@devseed-ui/theme-provider
Version:
devseed UI Kit Theme
292 lines (286 loc) • 9.18 kB
JavaScript
import { createUITheme } from './theme';
describe('<DevseedUiThemeProvider/>', () => {
describe('createUITheme', () => {
it('should create theme with correct replacements', () => {
const result = createUITheme({
newProp: 'new',
color: {
newColor: 'new',
base: '#FF0000'
},
type: {
newType: 'new',
base: {
newTypeBase: 'new',
family: 'Ariel'
},
heading: {
newTypeHeading: 'new'
},
overline: {
newTypeOverline: 'new'
}
},
shape: {
newShape: 'new',
rounded: '0.5rem'
},
layout: {
newLayout: 'new',
space: '10rem'
},
button: {
newButton: 'new',
type: {
newButtonType: 'new'
},
shape: {
newButtonShape: 'new',
rounded: '1rem'
}
},
boxShadow: {
newBoxShadow: 'new'
}
});
// Create the media ranges array.
const s = 544;
const m = 768;
const l = 992;
const x = 1216;
const expectedMediaRanges = {
xsmall: [null, s - 1],
small: [s, m - 1],
medium: [m, l - 1],
large: [l, x - 1],
xlarge: [x, null]
};
const expected = {
newProp: 'new',
color: {
newColor: 'new',
base: '#FF0000',
surface: '#FFFFFF',
primary: '#CF3F02',
secondary: '#E2C044',
danger: '#A71D31',
warning: '#E2C044',
success: '#4DA167',
info: '#2E86AB',
background: '#FFFFFF',
link: '#CF3F02',
'base-50': '#fff4f4',
'base-50a': 'rgba(255,0,0,0.04)',
'base-100': '#ffeaea',
'base-100a': 'rgba(255,0,0,0.08)',
'base-200': '#ffd6d6',
'base-200a': 'rgba(255,0,0,0.16)',
'base-300': '#ffadad',
'base-300a': 'rgba(255,0,0,0.32)',
'base-400': '#ff5b5b',
'base-400a': 'rgba(255,0,0,0.64)',
'base-500': '#FF0000',
'base-600': '#d60000',
'base-700': '#ad0000',
'base-800': '#840000',
'base-900': '#5b0000',
'surface-50': '#fff',
'surface-50a': 'rgba(255,255,255,0.04)',
'surface-100': '#fff',
'surface-100a': 'rgba(255,255,255,0.08)',
'surface-200': '#fff',
'surface-200a': 'rgba(255,255,255,0.16)',
'surface-300': '#fff',
'surface-300a': 'rgba(255,255,255,0.32)',
'surface-400': '#fff',
'surface-400a': 'rgba(255,255,255,0.64)',
'surface-500': '#FFFFFF',
'surface-600': '#d6d6d6',
'surface-700': '#adadad',
'surface-800': '#848484',
'surface-900': '#5b5b5b',
'primary-50': '#fdf7f4',
'primary-50a': 'rgba(207,63,2,0.04)',
'primary-100': '#fbefea',
'primary-100a': 'rgba(207,63,2,0.08)',
'primary-200': '#f7e0d6',
'primary-200a': 'rgba(207,63,2,0.16)',
'primary-300': '#efc1ae',
'primary-300a': 'rgba(207,63,2,0.32)',
'primary-400': '#e0845d',
'primary-400a': 'rgba(207,63,2,0.64)',
'primary-500': '#CF3F02',
'primary-600': '#ad3401',
'primary-700': '#8c2a01',
'primary-800': '#6b2001',
'primary-900': '#4a1600',
'secondary-50': '#fdfcf7',
'secondary-50a': 'rgba(226,192,68,0.04)',
'secondary-100': '#fcf9f0',
'secondary-100a': 'rgba(226,192,68,0.08)',
'secondary-200': '#faf4e1',
'secondary-200a': 'rgba(226,192,68,0.16)',
'secondary-300': '#f5eac3',
'secondary-300a': 'rgba(226,192,68,0.32)',
'secondary-400': '#ecd687',
'secondary-400a': 'rgba(226,192,68,0.64)',
'secondary-500': '#E2C044',
'secondary-600': '#bda139',
'secondary-700': '#99822e',
'secondary-800': '#756323',
'secondary-900': '#514518',
'danger-50': '#fbf5f6',
'danger-50a': 'rgba(167,29,49,0.04)',
'danger-100': '#f7ecee',
'danger-100a': 'rgba(167,29,49,0.08)',
'danger-200': '#f0dade',
'danger-200a': 'rgba(167,29,49,0.16)',
'danger-300': '#e2b6bd',
'danger-300a': 'rgba(167,29,49,0.32)',
'danger-400': '#c66e7b',
'danger-400a': 'rgba(167,29,49,0.64)',
'danger-500': '#A71D31',
'danger-600': '#8c1829',
'danger-700': '#711321',
'danger-800': '#560f19',
'danger-900': '#3c0a11',
'warning-50': '#fdfcf7',
'warning-50a': 'rgba(226,192,68,0.04)',
'warning-100': '#fcf9f0',
'warning-100a': 'rgba(226,192,68,0.08)',
'warning-200': '#faf4e1',
'warning-200a': 'rgba(226,192,68,0.16)',
'warning-300': '#f5eac3',
'warning-300a': 'rgba(226,192,68,0.32)',
'warning-400': '#ecd687',
'warning-400a': 'rgba(226,192,68,0.64)',
'warning-500': '#E2C044',
'warning-600': '#bda139',
'warning-700': '#99822e',
'warning-800': '#756323',
'warning-900': '#514518',
'success-50': '#f7fbf8',
'success-50a': 'rgba(77,161,103,0.04)',
'success-100': '#f0f7f2',
'success-100a': 'rgba(77,161,103,0.08)',
'success-200': '#e2efe6',
'success-200a': 'rgba(77,161,103,0.16)',
'success-300': '#c6e0ce',
'success-300a': 'rgba(77,161,103,0.32)',
'success-400': '#8dc29d',
'success-400a': 'rgba(77,161,103,0.64)',
'success-500': '#4DA167',
'success-600': '#408756',
'success-700': '#346d46',
'success-800': '#285335',
'success-900': '#1b3925',
'info-50': '#f6fafb',
'info-50a': 'rgba(46,134,171,0.04)',
'info-100': '#eef5f8',
'info-100a': 'rgba(46,134,171,0.08)',
'info-200': '#ddebf1',
'info-200a': 'rgba(46,134,171,0.16)',
'info-300': '#bcd8e4',
'info-300a': 'rgba(46,134,171,0.32)',
'info-400': '#79b1c9',
'info-400a': 'rgba(46,134,171,0.64)',
'info-500': '#2E86AB',
'info-600': '#26708f',
'info-700': '#1f5b74',
'info-800': '#174558',
'info-900': '#10303d'
},
type: {
newType: 'new',
base: {
newTypeBase: 'new',
size: '1rem',
leadSize: 'calc(1rem * 1.5)',
line: 'calc(0.5rem + 1em)',
color: '#FF0000',
family: 'Ariel',
style: 'normal',
settings: "'pnum' 0",
case: 'none',
light: 300,
regular: 400,
medium: 600,
bold: 700,
weight: 300,
antialiasing: true
},
heading: {
newTypeHeading: 'new',
family: 'Ariel',
style: 'normal',
settings: '"wdth" 80, "wght" 780',
case: 'none',
light: 300,
regular: 400,
medium: 600,
bold: 700,
weight: 700,
textTransform: 'none'
},
overline: {
newTypeOverline: 'new',
family: 'Ariel',
style: 'normal',
settings: "'pnum' 0",
case: 'none',
light: 300,
regular: 400,
medium: 600,
bold: 700,
weight: 700,
textTransform: 'uppercase'
}
},
shape: {
newShape: 'new',
rounded: '0.5rem',
ellipsoid: '320rem'
},
layout: {
newLayout: 'new',
space: '10rem',
border: '1px',
min: '320px',
max: '1280px'
},
button: {
newButton: 'new',
type: {
newButtonType: 'new',
family: 'Ariel',
style: 'normal',
settings: "'pnum' 0",
case: 'none',
weight: 700
},
shape: {
newButtonShape: 'new',
border: '1px',
rounded: '1rem'
}
},
boxShadow: {
newBoxShadow: 'new',
elevationA:
'0 0 4px 0 rgba(255,0,0,0.08), 0 2px 2px 0 rgba(255,0,0,0.08);',
elevationB:
'0 0 4px 0 rgba(255,0,0,0.08), 0 4px 4px 0 rgba(255,0,0,0.08);',
elevationC:
'0 0 4px 0 rgba(255,0,0,0.08), 0 8px 12px 0 rgba(255,0,0,0.08);',
elevationD:
'0 0 4px 0 rgba(255,0,0,0.08), 0 12px 24px 0 rgba(255,0,0,0.08);',
input:
'0 -1px 1px 0 rgba(255,0,0,0.08), 0 2px 6px 0 rgba(255,0,0,0.16);',
inset: 'inset 0px 0px 3px 0px rgba(255,0,0,0.04);'
},
mediaRanges: expectedMediaRanges
};
expect(result).toEqual(expected);
});
});
});