apphouse
Version:
Component library for React that uses observable state management and theme-able components.
1,074 lines (1,017 loc) • 33 kB
text/typescript
import { getDefaultThemeSettings, tokenize } from '../defaults.tokens';
import {
getLookupTableForCurrentThemePalettes,
getLookupTableForThisApp,
Theme
} from '../Theme';
import {
getCssWithThemedTokens,
getIdForTokenFromValue,
getPaletteInfoFromReferenceKey,
getPaletteInfoFromStringKey,
getTokenInfoFromReferenceKey,
getTokenInfoFromStringKey,
getValueFromReference,
getValueFromReferenceString,
isColorReferenceString,
isValidTokenKey,
isValidTokenType
} from './theme.utils';
import { ApphousePaletteModeOptions } from '../../constants/constants';
import { getDefaultColors } from '../Color';
import { StyleUtils } from '../../utils/style.utils';
import { THEMES } from '../presets';
import {
COLOR,
CssPropertyStyle,
StyleTokenReference,
TOKEN
} from '../style.interface';
import { tokenTypes } from '../token.interface';
jest.mock('./color.utils', () => {
const originalModule = jest.requireActual('./color.utils');
//Mock the default export and named export 'foo'
return {
__esModule: true,
...originalModule,
// default: jest.fn(() => "mocked setAlpha"),
setAlpha: () => 'rgba(0,0,0,1)',
fromColorStringToRgbaObject: () => ({ r: 0, g: 0, b: 0, a: 0 }),
getStringRgbaColor: () => 'rgba(0,0,0,1)'
};
});
const backgroundColorStyleProperty: CssPropertyStyle = {
property: 'backgroundColor',
value: 'theme.surface',
isSelector: false,
reference: {
type: 'color',
value: 'black',
key: 'theme.surface'
}
};
const paddingStyleProperty: CssPropertyStyle = {
property: 'padding',
value: 'spacings.xs',
isSelector: false,
reference: {
type: 'token',
value: '2px',
key: 'spacings.xs'
}
};
const colorStyleProperty: CssPropertyStyle = {
property: 'color',
value: 'rgba(0,0,0,0.5)',
isSelector: false,
reference: null
};
const defaultThemeSettings = getDefaultThemeSettings('dark');
export const SampleTestTheme = new Theme({
id: 'test-theme',
title: 'Test theme',
colors: [
{
title: 'Base',
id: 'base',
description: 'Base colors',
mode: 'base',
colors: getDefaultColors(ApphousePaletteModeOptions.base)
},
{
title: 'Dark',
id: 'dark',
description: 'Dark theme colors',
mode: 'theme',
colors: getDefaultColors(ApphousePaletteModeOptions.dark)
},
{
title: 'Light',
id: 'light',
description: 'Light theme colors',
mode: 'theme',
colors: getDefaultColors(ApphousePaletteModeOptions.light)
}
],
tokens: Object.keys(defaultThemeSettings.tokens).map(
(key) => defaultThemeSettings.tokens[key]
),
styles: Object.keys(defaultThemeSettings.styles).map(
(key) => defaultThemeSettings.styles[key]
)
});
describe('theme utils', () => {
test('should return css with raw values from token when there are selectors', () => {
const cssStylesWithTokens = {
backgroundColor: 'theme.background',
padding: 'spacings.xs',
color: 'theme.onBackground',
':hover': {
backgroundColor: 'theme.background',
padding: 'spacings.xs',
color: 'theme.onBackground'
}
};
const lookup = {
'theme.background': 'green',
'theme.dark.background': 'black',
'theme.surface': 'black',
'spacings.xs': '2px',
'theme.onSurface': 'white'
};
const ts = StyleUtils.toCssPropertyStyle(cssStylesWithTokens, lookup);
const themeColor = 'dark';
let css = getCssWithThemedTokens({
value: ts,
lookup,
withColorsFromPaletteId: themeColor as any,
withRawValue: true
});
expect(css).toEqual({
':hover': {
backgroundColor: 'black',
padding: '2px',
color: 'theme.onBackground'
},
backgroundColor: 'black',
color: 'theme.onBackground',
padding: '2px'
});
css = getCssWithThemedTokens({
value: ts,
lookup,
withColorsFromPaletteId: themeColor as any,
withRawValue: false
});
expect(css).toEqual({
':hover': {
backgroundColor: 'green',
padding: '2px',
color: 'theme.onBackground'
},
backgroundColor: 'green',
color: 'theme.onBackground',
padding: '2px'
});
});
describe('getCssWithThemedTokens', () => {
test('should return css with value strings', () => {
const lookup = {
'theme.surface': 'black',
'spacings.xs': '2px'
};
// const ts = convertObjectToStyleProperty(cssStylesWithTokens, lookup);
const themeColor = 'dark';
const css = getCssWithThemedTokens({
value: [
backgroundColorStyleProperty,
paddingStyleProperty,
colorStyleProperty
],
lookup,
withColorsFromPaletteId: themeColor as any
});
expect(css).toEqual({
backgroundColor: 'theme.surface',
padding: 'spacings.xs',
color: 'rgba(0,0,0,0.5)'
});
});
test('should return css with token keys strings', () => {
const lookup = {
'theme.surface': 'black',
'spacings.xs': '2px',
'theme.onSurface': 'white'
};
const themeColor = 'dark';
const css = getCssWithThemedTokens({
value: [
backgroundColorStyleProperty,
paddingStyleProperty,
colorStyleProperty
],
lookup,
withColorsFromPaletteId: themeColor as any
});
const themeColors = SampleTestTheme.palette[themeColor].colors;
expect(themeColors).toHaveProperty('surface');
expect(css).toEqual({
backgroundColor: 'theme.surface',
padding: 'spacings.xs',
color: 'rgba(0,0,0,0.5)'
});
});
test('should return css with raw values from token when theme is provided', () => {
const cssStylesWithTokens = {
backgroundColor: 'theme.surface',
padding: 'spacings.xs',
color: 'theme.onSurface'
};
const lookup = {
'theme.dark.surface': 'black',
'spacings.xs': '2px',
'theme.dark.onSurface': 'white'
};
const ts = StyleUtils.toCssPropertyStyle(cssStylesWithTokens, lookup);
const themeColor = 'dark';
const css = getCssWithThemedTokens({
value: ts,
lookup,
withColorsFromPaletteId: themeColor as any,
withRawValue: true
});
expect(css).toEqual({
backgroundColor: 'black',
color: 'white',
padding: '2px'
});
});
});
describe('getPaletteInfoFromStringKey', () => {
test('should get palette info from string', () => {
let info = getPaletteInfoFromStringKey('base.primary.surface');
expect(info).toEqual({
paletteId: 'primary',
paletteMode: 'base',
colorId: 'surface'
});
info = getPaletteInfoFromStringKey('theme.surface', 'light');
expect(info).toEqual({
paletteId: 'light',
paletteMode: 'light',
colorId: 'surface'
});
info = getPaletteInfoFromStringKey('theme.surface', 'dark');
expect(info).toEqual({
paletteId: 'dark',
paletteMode: 'dark',
colorId: 'surface'
});
});
});
describe('getPaletteInfoFromReferenceKey', () => {
test('should return palette info if reference is of type palette', () => {
const tokenRef: StyleTokenReference = {
type: COLOR,
key: 'base.primary.surface',
value: {
hex: ''
}
};
const info = getPaletteInfoFromReferenceKey(tokenRef);
expect(info).toEqual({
paletteId: 'primary',
paletteMode: 'base',
colorId: 'surface'
});
});
test('should return undefined if reference is not of type palette', () => {
const tokenRef: StyleTokenReference = {
type: TOKEN,
key: 'backgroundColors.surface',
value: {
hex: ''
}
};
const info = getPaletteInfoFromReferenceKey(tokenRef);
expect(info).toEqual(undefined);
});
test('should return if normalized reference for themed colors', () => {
const tokenRef: StyleTokenReference = {
type: COLOR,
key: 'theme.surface',
value: {
hex: ''
}
};
let info = getPaletteInfoFromReferenceKey(tokenRef, 'dark');
expect(info).toEqual({
paletteId: 'dark',
paletteMode: 'dark',
colorId: 'surface'
});
info = getPaletteInfoFromReferenceKey(tokenRef, 'light');
expect(info).toEqual({
paletteId: 'light',
paletteMode: 'light',
colorId: 'surface'
});
});
});
describe('isValidTokenType', () => {
test('should return false if invalid', () => {
const tokenType = isValidTokenType('spacing');
expect(tokenType).toEqual(false);
});
test('should return true if valid', () => {
tokenTypes.forEach((type) => {
const tokenType = isValidTokenType(type);
expect(tokenType).toEqual(true);
});
});
});
describe('isValidTokenKey', () => {
test('should return false if invalid', () => {
const isValid = isValidTokenKey('0');
expect(isValid).toEqual(false);
});
test('should return true if valid', () => {
let isValid = isValidTokenKey('spacings.xs');
expect(isValid).toEqual(true);
isValid = isValidTokenKey('theme.background');
expect(isValid).toEqual(true);
isValid = isValidTokenKey('base.primary.background');
expect(isValid).toEqual(true);
isValid = isValidTokenKey('dark.dark.background');
expect(isValid).toEqual(true);
});
});
describe('getTokenInfoFromReferenceKey', () => {
test('should return token reference info', () => {
const tokenRef: StyleTokenReference = {
type: TOKEN,
key: 'spacings.xs',
value: 30
};
const info = getTokenInfoFromReferenceKey(tokenRef);
expect(info).toEqual({
tokenType: 'spacings',
tokenKey: 'xs',
tokenId: tokenRef.key
});
});
test('should return undefined if token is not of type TOKEN', () => {
const tokenRef: StyleTokenReference = {
type: COLOR,
key: 'theme.background',
value: {
hex: ''
}
};
const info = getTokenInfoFromReferenceKey(tokenRef);
expect(info).toEqual(undefined);
});
});
describe('getTokenInfoFromStringKey', () => {
test('should return token reference info', () => {
const info = getTokenInfoFromStringKey('spacings.xs');
expect(info).toEqual({
tokenType: 'spacings',
tokenKey: 'xs',
tokenId: `spacings.xs`
});
});
test('should return undefined if token is not of type TOKEN', () => {
const info = getTokenInfoFromStringKey('base.primary.background');
expect(info).toEqual(undefined);
});
test('should return undefined if token is not of type TOKEN or COLOR', () => {
const info = getTokenInfoFromStringKey('rgba(0,0,0,0.5)');
expect(info).toEqual(undefined);
});
test('should return undefined if token value is a floating number starting with 0', () => {
const info = getTokenInfoFromStringKey('0.5');
expect(info).toEqual(undefined);
});
});
describe('getIdForTokenFromValue', () => {
test('should return id for token', () => {
const tokenType = 'spacings';
const tokenKey = 'xs';
let id = getIdForTokenFromValue(tokenType, tokenKey);
expect(id).toEqual(`${tokenType}.${tokenKey}`);
id = getIdForTokenFromValue('spacings', 'large');
expect(id).toEqual('spacings.large');
id = getIdForTokenFromValue('spacing', 'large');
expect(id).toEqual(undefined);
});
});
describe('getValueFromReferenceString', () => {
test('should return reference value for token', () => {
const colors = SampleTestTheme.palette;
const tokens = SampleTestTheme.tokens;
const themeColor = 'dark' as any;
const withRaw = true;
const value = getValueFromReferenceString({
referenceString: 'theme.primary',
colors,
tokens,
theme: themeColor,
withRaw
});
expect(value).toEqual('theme.primary');
});
test('should not parse rgba string when trying to find reference value', () => {
const colors = SampleTestTheme.palette;
const tokens = SampleTestTheme.tokens;
const themeColor = 'dark' as any;
const withRaw = true;
const value = getValueFromReferenceString({
referenceString: 'rgba(0, 0, 0, 0.5)',
colors,
tokens,
theme: themeColor,
withRaw
});
expect(value).toEqual('rgba(0, 0, 0, 0.5)');
});
test('should return string key reference value for token when with raw value is false', () => {
const colors = SampleTestTheme.palette;
const tokens = SampleTestTheme.tokens;
const themeColor = 'dark' as any;
const value = getValueFromReferenceString({
referenceString: 'theme.background',
colors,
tokens,
theme: themeColor,
withRaw: false
});
expect(value).toEqual('theme.background');
});
test('should return token value from reference', () => {
const colors = SampleTestTheme.palette;
const tokens = SampleTestTheme.tokens;
const value = getValueFromReferenceString({
referenceString: 'spacings.xs',
colors,
tokens,
withRaw: false
});
expect(value).toEqual('spacings.xs');
});
test('should return raw value from reference string token', () => {
const colors = SampleTestTheme.palette;
const tokens = SampleTestTheme.tokens;
const value = getValueFromReferenceString({
referenceString: 'spacings.xs',
colors,
tokens,
withRaw: true
});
const t = tokens['spacings.xs'];
expect(value).toBeDefined();
expect(value).toEqual(t?.value);
});
test('isColorReferenceString', () => {
let isColorReference = isColorReferenceString('theme.background');
expect(isColorReference).toEqual(true);
isColorReference = isColorReferenceString('base.primary.background');
expect(isColorReference).toEqual(true);
isColorReference = isColorReferenceString('spacings.xs');
expect(isColorReference).toEqual(false);
isColorReference = isColorReferenceString('0');
expect(isColorReference).toEqual(false);
isColorReference = isColorReferenceString('rgba(0,0,0,0.75)');
expect(isColorReference).toEqual(false);
isColorReference = isColorReferenceString('r.g.ba(0,0,0,0.75)');
expect(isColorReference).toEqual(false);
});
});
describe('getValueFromReference', () => {
test('should return reference value for Palette reference', () => {
const reference: StyleTokenReference = {
type: COLOR,
value: 'rgba(0,0,0,0)',
key: 'theme.surface'
};
const lookup = getLookupTableForThisApp();
const themeColor = 'dark' as any;
const withRaw = true;
const value = getValueFromReference({
reference,
lookup,
theme: themeColor,
withRaw
});
expect(value).toEqual('theme.surface');
});
test('should return reference value for Token reference', () => {
const reference: StyleTokenReference = {
type: TOKEN,
value: '8',
key: 'spacings.l'
};
const lookup = getLookupTableForThisApp();
const themeColor = 'dark' as any;
const withRaw = true;
const value = getValueFromReference({
reference,
lookup,
theme: themeColor,
withRaw
});
expect(value).toEqual(20);
});
});
});
describe('tokenize', () => {
test('properly convert this App DesginTokens to Record<string, Token>', () => {
const tokens = tokenize(THEMES.APPHOUSE_DARK.tokens);
expect(tokens).toEqual({
'borderWidth.default': {
key: 'default',
reference: undefined,
type: 'borderWidth',
value: '2px'
},
'borderWidth.none': {
key: 'none',
reference: undefined,
type: 'borderWidth',
value: 0
},
'borderWidth.thin': {
key: 'thin',
reference: undefined,
type: 'borderWidth',
value: '1px'
},
'fontFamily.default': {
key: 'default',
reference: undefined,
type: 'fontFamily',
value:
'-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica, sans-serif'
},
'fontFamily.heading': {
key: 'heading',
reference: undefined,
type: 'fontFamily',
value:
'-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica, sans-serif'
},
'fontFamily.monospace': {
key: 'monospace',
reference: undefined,
type: 'fontFamily',
value: 'monospace'
},
'fontFamily.text': {
key: 'text',
reference: undefined,
type: 'fontFamily',
value:
'-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica, sans-serif'
},
'fontSize.caption': {
key: 'caption',
reference: undefined,
type: 'fontSize',
value: '10px'
},
'fontSize.header': {
key: 'header',
reference: undefined,
type: 'fontSize',
value: '32px'
},
'fontSize.standard': {
key: 'standard',
reference: undefined,
type: 'fontSize',
value: '13px'
},
'fontSize.standardLarge': {
key: 'standardLarge',
reference: undefined,
type: 'fontSize',
value: '15px'
},
'fontSize.standardSmall': {
key: 'standardSmall',
reference: undefined,
type: 'fontSize',
value: '11px'
},
'fontSize.subheader': {
key: 'subheader',
reference: undefined,
type: 'fontSize',
value: '26px'
},
'fontSize.subtitle': {
key: 'subtitle',
reference: undefined,
type: 'fontSize',
value: '16px'
},
'fontSize.title': {
key: 'title',
reference: undefined,
type: 'fontSize',
value: '18px'
},
'fontWeight.bold': {
key: 'bold',
reference: undefined,
type: 'fontWeight',
value: 600
},
'fontWeight.bolder': {
key: 'bolder',
reference: undefined,
type: 'fontWeight',
value: 700
},
'fontWeight.light': {
key: 'light',
reference: undefined,
type: 'fontWeight',
value: 300
},
'fontWeight.standard': {
key: 'standard',
reference: undefined,
type: 'fontWeight',
value: 500
},
'iconSize.l': {
key: 'l',
reference: undefined,
type: 'iconSize',
value: 30
},
'iconSize.m': {
key: 'm',
reference: undefined,
type: 'iconSize',
value: 24
},
'iconSize.s': {
key: 's',
reference: undefined,
type: 'iconSize',
value: 12
},
'iconSize.standard': {
key: 'standard',
reference: undefined,
type: 'iconSize',
value: 16
},
'mediaQuery.l': {
key: 'l',
reference: undefined,
type: 'mediaQuery',
value:
'@media only screen and (min-width: 1280px) and (max-width: 1919px)'
},
'mediaQuery.m': {
key: 'm',
reference: undefined,
type: 'mediaQuery',
value:
'@media only screen and (min-width: 960px) and (max-width: 1279px)'
},
'mediaQuery.s': {
key: 's',
reference: undefined,
type: 'mediaQuery',
value:
'@media only screen and (min-width: 600px) and (max-width: 959px)'
},
'mediaQuery.xl': {
key: 'xl',
reference: undefined,
type: 'mediaQuery',
value: '@media only screen and (min-width: 1920px)'
},
'mediaQuery.xs': {
key: 'xs',
reference: undefined,
type: 'mediaQuery',
value: '@media only screen and (max-width: 599px)'
},
'radius.circle': {
key: 'circle',
reference: undefined,
type: 'radius',
value: '50%'
},
'radius.default': {
key: 'default',
reference: undefined,
type: 'radius',
value: '6px'
},
'radius.l': {
key: 'l',
reference: undefined,
type: 'radius',
value: '12px'
},
'radius.m': {
key: 'm',
reference: undefined,
type: 'radius',
value: '8px'
},
'radius.s': {
key: 's',
reference: undefined,
type: 'radius',
value: '4px'
},
'spacings.default': {
key: 'default',
reference: undefined,
type: 'spacings',
value: 8
},
'spacings.l': {
key: 'l',
reference: undefined,
type: 'spacings',
value: 20
},
'spacings.m': {
key: 'm',
reference: undefined,
type: 'spacings',
value: 14
},
'spacings.r': {
key: 'r',
reference: undefined,
type: 'spacings',
value: 10
},
'spacings.s': {
key: 's',
reference: undefined,
type: 'spacings',
value: 4
},
'spacings.xl': {
key: 'xl',
reference: undefined,
type: 'spacings',
value: 30
},
'spacings.xs': {
key: 'xs',
reference: undefined,
type: 'spacings',
value: 2
},
'zIndex.default': {
key: 'default',
reference: undefined,
type: 'zIndex',
value: 1
},
'zIndex.menu': {
key: 'menu',
reference: undefined,
type: 'zIndex',
value: 400
},
'zIndex.overlay': {
key: 'overlay',
reference: undefined,
type: 'zIndex',
value: 1000
},
'zIndex.panel': {
key: 'panel',
reference: undefined,
type: 'zIndex',
value: 0
},
'zIndex.popup': {
key: 'popup',
reference: undefined,
type: 'zIndex',
value: 5000
},
'zIndex.toast': {
key: 'toast',
reference: undefined,
type: 'zIndex',
value: 300
}
});
});
});
describe('lookup', () => {
test('getLookupTableForThisApp', () => {
const lookup = getLookupTableForThisApp();
expect(lookup).toEqual({
'base.BLACK': 'rgba(0,0,0,1)',
'base.GREEN': 'rgba(0,0,0,1)',
'base.GREY': 'rgba(0,0,0,1)',
'base.GREY_ALT': 'rgba(0,0,0,1)',
'base.GREY_ALT_50': 'rgba(0,0,0,1)',
'base.GREY_ALT_75': 'rgba(0,0,0,1)',
'base.LIGHT_BLUE': 'rgba(0,0,0,1)',
'base.LIGHT_GRAY': 'rgba(0,0,0,1)',
'base.MONTANA': 'rgba(0,0,0,1)',
'base.NERO': 'rgba(0,0,0,1)',
'base.PURE_BLACK': 'rgba(0,0,0,1)',
'base.PURE_WHITE': 'rgba(0,0,0,1)',
'base.RED': 'rgba(0,0,0,1)',
'base.WHITE': 'rgba(0,0,0,1)',
'base.WHITEISH': 'rgba(0,0,0,1)',
'base.YELLOW': 'rgba(0,0,0,1)',
'borderWidth.default': '2px',
'borderWidth.none': 0,
'borderWidth.thin': '1px',
'fontFamily.default':
'-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, tarell, Open Sans, Helvetica, sans-serif',
'fontFamily.heading':
'-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, tarell, Open Sans, Helvetica, sans-serif',
'fontFamily.monospace': 'monospace',
'fontFamily.text':
'-apple-system,BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, n Sans, Helvetica, sans-serif',
'fontSize.caption': '10px',
'fontSize.header': '32px',
'fontSize.standard': '13px',
'fontSize.standardLarge': '15px',
'fontSize.standardSmall': '11px',
'fontSize.subheader': '26px',
'fontSize.subtitle': '16px',
'fontSize.title': '18px',
'fontWeight.bold': 600,
'fontWeight.bolder': 700,
'fontWeight.light': 300,
'fontWeight.standard': 500,
'iconSize.l': 30,
'iconSize.m': 24,
'iconSize.s': 12,
'iconSize.standard': 16,
'mediaQuery.l':
'@media only screen and (min-width: 1280px) and (max-width: 1919px)',
'mediaQuery.m':
'@media only screen and (min-width: 960px) and (max-width: 1279px)',
'mediaQuery.s':
'@media only screen and (min-width: 600px) and (max-width: 959px)',
'mediaQuery.xl': '@media only screen and (min-width: 1920px)',
'mediaQuery.xs': '@media only screen and (max-width: 599px)',
'radius.circle': '50%',
'radius.default': '6px',
'radius.l': '12px',
'radius.m': '8px',
'radius.s': '4px',
'spacings.default': 8,
'spacings.l': 20,
'spacings.m': 14,
'spacings.r': 10,
'spacings.s': 4,
'spacings.xl': 30,
'spacings.xs': 2,
'theme.dark.borderOnPrimary': 'rgba(0,0,0,1)',
'theme.dark.borderOnPrimaryInverse': 'rgba(0,0,0,1)',
'theme.dark.borderOnSurface': 'rgba(0,0,0,1)',
'theme.dark.borderOnSurface10': 'rgba(0,0,0,1)',
'theme.dark.brand': 'rgba(0,0,0,1)',
'theme.dark.brandAlt': 'rgba(0,0,0,1)',
'theme.dark.error': 'rgba(0,0,0,1)',
'theme.dark.focusRingInset': 'rgba(0,0,0,1)',
'theme.dark.focusRingOutline': 'rgba(0,0,0,1)',
'theme.dark.info': 'rgba(0,0,0,1)',
'theme.dark.onBrand': 'rgba(0,0,0,1)',
'theme.dark.onError': 'rgba(0,0,0,1)',
'theme.dark.onInfo': 'rgba(0,0,0,1)',
'theme.dark.onPrimary': 'rgba(0,0,0,1)',
'theme.dark.onPrimaryInverse': 'rgba(0,0,0,1)',
'theme.dark.onSelection': 'rgba(0,0,0,1)',
'theme.dark.onSuccess': 'rgba(0,0,0,1)',
'theme.dark.onSurface': 'rgba(0,0,0,1)',
'theme.dark.onSurface10': 'rgba(0,0,0,1)',
'theme.dark.onSurface20': 'rgba(0,0,0,1)',
'theme.dark.onWarning': 'rgba(0,0,0,1)',
'theme.dark.primary': 'rgba(0,0,0,1)',
'theme.dark.primaryInverse': 'rgba(0,0,0,1)',
'theme.dark.required': 'rgba(0,0,0,1)',
'theme.dark.selection': 'rgba(0,0,0,1)',
'theme.dark.success': 'rgba(0,0,0,1)',
'theme.dark.surface': 'rgba(0,0,0,1)',
'theme.dark.surface10': 'rgba(0,0,0,1)',
'theme.dark.surface20': 'rgba(0,0,0,1)',
'theme.dark.toggleOn': 'rgba(0,0,0,1)',
'theme.dark.warning': 'rgba(0,0,0,1)',
'theme.light.borderOnPrimary': 'rgba(0,0,0,1)',
'theme.light.borderOnPrimaryInverse': 'rgba(0,0,0,1)',
'theme.light.borderOnSurface': 'rgba(0,0,0,1)',
'theme.light.borderOnSurface10': 'rgba(0,0,0,1)',
'theme.light.brand': 'rgba(0,0,0,1)',
'theme.light.brandAlt': 'rgba(0,0,0,1)',
'theme.light.error': 'rgba(0,0,0,1)',
'theme.light.focusRingInset': 'rgba(0,0,0,1)',
'theme.light.focusRingOutline': 'rgba(0,0,0,1)',
'theme.light.info': 'rgba(0,0,0,1)',
'theme.light.onBrand': 'rgba(0,0,0,1)',
'theme.light.onError': 'rgba(0,0,0,1)',
'theme.light.onInfo': 'rgba(0,0,0,1)',
'theme.light.onPrimary': 'rgba(0,0,0,1)',
'theme.light.onPrimaryInverse': 'rgba(0,0,0,1)',
'theme.light.onSelection': 'rgba(0,0,0,1)',
'theme.light.onSuccess': 'rgba(0,0,0,1)',
'theme.light.onSurface': 'rgba(0,0,0,1)',
'theme.light.onSurface10': 'rgba(0,0,0,1)',
'theme.light.onSurface20': 'rgba(0,0,0,1)',
'theme.light.onWarning': 'rgba(0,0,0,1)',
'theme.light.primary': 'rgba(0,0,0,1)',
'theme.light.primaryInverse': 'rgba(0,0,0,1)',
'theme.light.required': 'rgba(0,0,0,1)',
'theme.light.selection': 'rgba(0,0,0,1)',
'theme.light.success': 'rgba(0,0,0,1)',
'theme.light.surface': 'rgba(0,0,0,1)',
'theme.light.surface10': 'rgba(0,0,0,1)',
'theme.light.surface20': 'rgba(0,0,0,1)',
'theme.light.toggleOn': 'rgba(0,0,0,1)',
'theme.light.warning': 'rgba(0,0,0,1)',
'zIndex.default': 1,
'zIndex.menu': 400,
'zIndex.overlay': 1000,
'zIndex.panel': 0,
'zIndex.popup': 5000,
'zIndex.toast': 300
});
});
test('getLookupTableForCurrentThemePalettes', () => {
const lookup = getLookupTableForCurrentThemePalettes(
SampleTestTheme.palette
);
expect(lookup).toEqual({
'base.BLACK': 'rgba(30, 28, 29, 1)',
'base.GREEN': 'rgba(0, 179, 36, 1)',
'base.GREY': 'rgba(75, 74, 74, 1)',
'base.GREY_ALT': 'rgba(198, 198, 198, 1)',
'base.GREY_ALT_50': 'rgba(45, 45, 45, 1)',
'base.GREY_ALT_75': 'rgba(54, 51, 51, 1)',
'base.LIGHT_BLUE': 'rgba(0, 113, 227, 1)',
'base.LIGHT_GRAY': 'rgba(211, 211, 211, 1)',
'base.MONTANA': 'rgba(57, 57, 59, 1)',
'base.NERO': 'rgba(39, 38, 39, 1)',
'base.PURE_BLACK': 'rgba(0, 0, 0, 1)',
'base.PURE_WHITE': 'rgba(255, 255, 255, 1)',
'base.RED': 'rgba(178, 0, 0, 1)',
'base.WHITE': 'rgba(236, 236, 236, 1)',
'base.WHITEISH': 'rgba(221, 221, 221, 1)',
'base.YELLOW': 'rgba(255, 165, 0, 1)',
'theme.dark.borderOnPrimary': 'rgba(0, 0, 0, 1)',
'theme.dark.borderOnPrimaryInverse': 'rgba(75, 74, 74, 1)',
'theme.dark.borderOnSurface': 'rgba(75, 74, 74, 1)',
'theme.dark.borderOnSurface10': 'rgba(75, 74, 74, 1)',
'theme.dark.brand': 'rgba(0, 113, 227, 1)',
'theme.dark.brandAlt': 'rgba(0, 113, 227, 1)',
'theme.dark.error': 'rgba(178, 0, 0, 1)',
'theme.dark.focusRingInset': 'rgba(0, 0, 0, 1)',
'theme.dark.focusRingOutline': 'rgba(255, 255, 255, 1)',
'theme.dark.info': 'rgba(0, 113, 227, 1)',
'theme.dark.onBrand': 'rgba(236, 236, 236, 1)',
'theme.dark.onError': 'rgba(236, 236, 236, 1)',
'theme.dark.onInfo': 'rgba(236, 236, 236, 1)',
'theme.dark.onPrimary': 'rgba(236, 236, 236, 1)',
'theme.dark.onPrimaryInverse': 'rgba(30, 28, 29, 1)',
'theme.dark.onSelection': 'rgba(236, 236, 236, 1)',
'theme.dark.onSuccess': 'rgba(30, 28, 29, 1)',
'theme.dark.onSurface': 'rgba(236, 236, 236, 1)',
'theme.dark.onSurface10': 'rgba(236, 236, 236, 1)',
'theme.dark.onSurface20': 'rgba(236, 236, 236, 1)',
'theme.dark.onWarning': 'rgba(30, 28, 29, 1)',
'theme.dark.primary': 'rgba(30, 28, 29, 1)',
'theme.dark.primaryInverse': 'rgba(236, 236, 236, 1)',
'theme.dark.required': 'rgba(178, 0, 0, 1)',
'theme.dark.selection': 'rgba(57, 57, 59, 1)',
'theme.dark.success': 'rgba(0, 179, 36, 1)',
'theme.dark.surface': 'rgba(39, 38, 39, 1)',
'theme.dark.surface10': 'rgba(45, 45, 45, 1)',
'theme.dark.surface20': 'rgba(54, 51, 51, 1)',
'theme.dark.toggleOn': 'rgba(0, 113, 227, 1)',
'theme.dark.warning': 'rgba(255, 165, 0, 1)',
'theme.light.borderOnPrimary': 'rgba(198, 198, 198, 1)',
'theme.light.borderOnPrimaryInverse': 'rgba(198, 198, 198, 1)',
'theme.light.borderOnSurface': 'rgba(198, 198, 198, 1)',
'theme.light.borderOnSurface10': 'rgba(198, 198, 198, 1)',
'theme.light.brand': 'rgba(0, 113, 227, 1)',
'theme.light.brandAlt': 'rgba(0, 113, 227, 1)',
'theme.light.error': 'rgba(178, 0, 0, 1)',
'theme.light.focusRingInset': 'rgba(255, 255, 255, 1)',
'theme.light.focusRingOutline': 'rgba(0, 0, 0, 1)',
'theme.light.info': 'rgba(0, 113, 227, 1)',
'theme.light.onBrand': 'rgba(236, 236, 236, 1)',
'theme.light.onError': 'rgba(236, 236, 236, 1)',
'theme.light.onInfo': 'rgba(236, 236, 236, 1)',
'theme.light.onPrimary': 'rgba(30, 28, 29, 1)',
'theme.light.onPrimaryInverse': 'rgba(236, 236, 236, 1)',
'theme.light.onSelection': 'rgba(30, 28, 29, 1)',
'theme.light.onSuccess': 'rgba(30, 28, 29, 1)',
'theme.light.onSurface': 'rgba(30, 28, 29, 1)',
'theme.light.onSurface10': 'rgba(30, 28, 29, 1)',
'theme.light.onSurface20': 'rgba(30, 28, 29, 1)',
'theme.light.onWarning': 'rgba(30, 28, 29, 1)',
'theme.light.primary': 'rgba(236, 236, 236, 1)',
'theme.light.primaryInverse': 'rgba(30, 28, 29, 1)',
'theme.light.required': 'rgba(178, 0, 0, 1)',
'theme.light.selection': 'rgba(211, 211, 211, 1)',
'theme.light.success': 'rgba(0, 179, 36, 1)',
'theme.light.surface': 'rgba(221, 221, 221, 1)',
'theme.light.surface10': 'rgba(221, 221, 221, 1)',
'theme.light.surface20': 'rgba(221, 221, 221, 1)',
'theme.light.toggleOn': 'rgba(0, 113, 227, 1)',
'theme.light.warning': 'rgba(255, 165, 0, 1)'
});
});
});