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