mirror of https://github.com/grafana/grafana
Dominik Prokop
7 years ago
parent
bb8bec5aaa
commit
71576a634e
@ -1,50 +0,0 @@ |
||||
const sass = require('node-sass'); |
||||
const sassUtils = require('node-sass-utils')(sass); |
||||
const { get } = require('lodash'); |
||||
const tinycolor = require('tinycolor2'); |
||||
const { getTheme } = require('@grafana/ui/src/themes'); |
||||
|
||||
const units = ['rem', 'em', 'vh', 'vw', 'vmin', 'vmax', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch']; |
||||
const matchDimension = value => value.match(/[a-zA-Z]+|[0-9]+/g); |
||||
|
||||
const isHex = value => { |
||||
const hexRegex = /^((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6})$/gi; |
||||
return hexRegex.test(value); |
||||
}; |
||||
|
||||
const isDimension = value => { |
||||
if (typeof value !== 'string') { |
||||
return false; |
||||
} |
||||
const [val, unit] = matchDimension(value); |
||||
return units.indexOf(unit) > -1; |
||||
}; |
||||
|
||||
/** |
||||
* @param {SassString} variablePath |
||||
* @param {"dark"|"light"} themeName |
||||
*/ |
||||
function getThemeVariable(variablePath, themeName) { |
||||
const theme = getTheme(themeName.getValue()); |
||||
const variable = get(theme, variablePath.getValue()); |
||||
|
||||
if (!variable) { |
||||
throw new Error(`${variablePath.getValue()} is not defined for ${themeName.getValue()}`); |
||||
} |
||||
|
||||
if (isHex(variable)) { |
||||
const rgb = new tinycolor(variable).toRgb(); |
||||
const color = new sass.types.Color(rgb.r, rgb.g, rgb.b); |
||||
return color; |
||||
} |
||||
|
||||
if (isDimension(variable)) { |
||||
const [value, unit] = matchDimension(variable); |
||||
const dimension = new sassUtils.SassDimension(parseInt(value, 10), unit); |
||||
return sassUtils.castToSass(dimension); |
||||
} |
||||
|
||||
return sassUtils.castToSass(variable); |
||||
} |
||||
|
||||
module.exports = getThemeVariable; |
||||
@ -1,40 +0,0 @@ |
||||
const sass = require('node-sass'); |
||||
const getThemeVariable = require('./getThemeVariable'); |
||||
const { mockTheme } = require('@grafana/ui'); |
||||
|
||||
const themeMock = { |
||||
color: { |
||||
background: '#ff0000', |
||||
}, |
||||
spacing: { |
||||
padding: '2em', |
||||
}, |
||||
typography: { |
||||
fontFamily: 'Arial, sans-serif', |
||||
}, |
||||
}; |
||||
|
||||
describe('Variables retrieval', () => { |
||||
const restoreTheme = mockTheme(() => themeMock); |
||||
|
||||
afterAll(() => { |
||||
restoreTheme(); |
||||
}); |
||||
|
||||
it('returns sass Color for color values', () => { |
||||
const result = getThemeVariable({ getValue: () => 'color.background' }, { getValue: () => {} }); |
||||
expect(result).toBeInstanceOf(sass.types.Color); |
||||
}); |
||||
it('returns sass Number for dimension values', () => { |
||||
const result = getThemeVariable({ getValue: () => 'spacing.padding' }, { getValue: () => {} }); |
||||
expect(result).toBeInstanceOf(sass.types.Number); |
||||
}); |
||||
it('returns sass String for string values', () => { |
||||
const result = getThemeVariable({ getValue: () => 'typography.fontFamily' }, { getValue: () => {} }); |
||||
expect(result).toBeInstanceOf(sass.types.String); |
||||
}); |
||||
|
||||
it('throws for unknown theme paths', () => { |
||||
expect(() => getThemeVariable({ getValue: () => 'what.ever' }, { getValue: () => {} })).toThrow(); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue