@axa-ch/design-tokens
Version:
AXA Design Tokens
173 lines (171 loc) • 7.51 kB
JavaScript
/** @type {Omit<import('tailwindcss').Config, 'content'>} */
const config = {
theme: {
fontFamily: {
primary: ["'Source Sans Pro'", 'Arial', 'sans-serif'],
secondary: ["'Publico Headline'", 'Georgia', 'serif'],
},
fontSize: {
'primary-h1': ['3.875rem', { lineHeight: '1.161', fontWeight: '700' }],
'primary-h1-small': ['2.25rem', { lineHeight: '1.111', fontWeight: '700' }],
'primary-h2': ['3rem', { lineHeight: '1.125', fontWeight: '700' }],
'primary-h2-small': ['1.875rem', { lineHeight: '1.133', fontWeight: '700' }],
'primary-h3': ['2.25rem', { lineHeight: '1.166', fontWeight: '700' }],
'primary-h3-small': ['1.75rem', { lineHeight: '1.142', fontWeight: '700' }],
'primary-h4': ['1.75rem', { lineHeight: '1.142', fontWeight: '700' }],
'primary-h4-small': ['1.5rem', { lineHeight: '1.208', fontWeight: '700' }],
'primary-h5': ['1.5rem', { lineHeight: '1.208', fontWeight: '700' }],
'primary-h5-small': ['1.25rem', { lineHeight: '1.208', fontWeight: '700' }],
'primary-h6': ['1.25rem', { lineHeight: '1.3', fontWeight: '700' }],
'primary-h6-small': ['1.125rem', { lineHeight: '1.111', fontWeight: '700' }],
'secondary-h1': ['3.875rem', { lineHeight: '1.161', fontWeight: '700' }],
'secondary-h1-small': ['2.25rem', { lineHeight: '1.111', fontWeight: '700' }],
'secondary-h2': ['3rem', { lineHeight: '1.125', fontWeight: '700' }],
'secondary-h2-small': ['1.875rem', { lineHeight: '1.133', fontWeight: '700' }],
'secondary-h3': ['2.25rem', { lineHeight: '1.166', fontWeight: '700' }],
'secondary-h3-small': ['1.75rem', { lineHeight: '1.142', fontWeight: '700' }],
'secondary-h4': ['1.75rem', { lineHeight: '1.142', fontWeight: '700' }],
'secondary-h4-small': ['1.5rem', { lineHeight: '1.208', fontWeight: '700' }],
'secondary-h5': ['1.5rem', { lineHeight: '1.208', fontWeight: '700' }],
'secondary-h5-small': ['1.25rem', { lineHeight: '1.208', fontWeight: '700' }],
'secondary-h6': ['1.25rem', { lineHeight: '1.3', fontWeight: '700' }],
'secondary-h6-small': ['1.125rem', { lineHeight: '1.111', fontWeight: '700' }],
'text-1': ['1.25rem', { lineHeight: '1.5', fontWeight: '400' }],
'text-2': ['1.125rem', { lineHeight: '1.5', fontWeight: '400' }],
'text-3': ['1rem', { lineHeight: '1.5', fontWeight: '400' }],
'text-4': ['0.875rem', { lineHeight: '1.214', fontWeight: '400' }],
base: ['1rem', { lineHeight: '1.5', fontWeight: '400' }],
sm: ['0.875rem', { lineHeight: '1.214', fontWeight: '400' }],
lg: ['1.125rem', { lineHeight: '1.5', fontWeight: '400' }],
xl: ['1.25rem', { lineHeight: '1.5', fontWeight: '400' }],
},
extend: {
screens: { xs: '0px', sm: '576px', md: '768px', lg: '992px', xl: '1200px', '2xl': '1440px' },
spacing: {
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem',
5: '1.25rem',
6: '1.75rem',
7: '2.5rem',
8: '3.75rem',
9: '5rem',
10: '7.5rem',
},
colors: {
'base-axa-blue': '#00008f',
'base-axa-blue-20': '#cccce9',
'base-axa-blue-dark': '#000072',
'base-axa-blue-light': '#4040ab',
'base-axa-red': '#ff1721',
'base-axa-red-20': '#ffd1d3',
'base-axa-red-dark': '#cc121a',
'base-axa-red-light': '#ff5159',
'greyscale-0': '#000000',
'greyscale-1': '#333333',
'greyscale-2': '#5f5f5f',
'greyscale-3': '#7f7f7f',
'greyscale-4': '#999999',
'greyscale-5': '#cccccc',
'greyscale-6': '#e5e5e5',
'greyscale-7': '#f5f5f5',
'greyscale-8': '#fafafa',
'greyscale-9': '#ffffff',
'misc-ocean-blue': '#4976ba',
'misc-ocean-blue-20': '#dbe4f1',
'misc-ocean-blue-dark': '#3a5e95',
'misc-ocean-blue-light': '#7798cb',
'misc-teal': '#027180',
'misc-teal-20': '#cce3e6',
'misc-teal-dark': '#025a66',
'misc-teal-light': '#4195a0',
'misc-viridia-green': '#668980',
'misc-viridia-green-20': '#e0e7e6',
'misc-viridia-green-dark': '#526e66',
'misc-viridia-green-light': '#8ca7a0',
'misc-pacific': '#00adc6',
'misc-pacific-20': '#cceff4',
'misc-pacific-dark': '#008a9e',
'misc-pacific-light': '#40c2d4',
'misc-greyjoy': '#9fbeaf',
'misc-greyjoy-20': '#ecf2ef',
'misc-greyjoy-dark': '#7f988c',
'misc-greyjoy-light': '#b7cec3',
'misc-aqua-green': '#9fd9b4',
'misc-aqua-green-20': '#ecf7f0',
'misc-aqua-green-dark': '#7fae90',
'misc-aqua-green-light': '#b7e3c7',
'misc-tosca': '#914146',
'misc-tosca-20': '#e9d9da',
'misc-tosca-dark': '#743438',
'misc-tosca-light': '#ad7174',
'misc-azalea': '#e196aa',
'misc-azalea-20': '#f9eaee',
'misc-azalea-dark': '#b47888',
'misc-azalea-light': '#e9b0bf',
'misc-cotton-candy': '#fad6de',
'misc-cotton-candy-20': '#fef7f8',
'misc-cotton-candy-dark': '#c8abb2',
'misc-cotton-candy-light': '#fbe0e6',
'misc-apache': '#bc9d45',
'misc-apache-20': '#f2ebda',
'misc-apache-dark': '#967e37',
'misc-apache-light': '#cdb674',
'misc-dune': '#fcd385',
'misc-dune-20': '#fef6e7',
'misc-dune-dark': '#caa96a',
'misc-dune-light': '#fddea4',
'misc-acid': '#f0ff93',
'misc-acid-20': '#fcffe9',
'misc-acid-dark': '#c0cc76',
'misc-acid-light': '#f4ffae',
'misc-logan': '#9190ac',
'misc-logan-20': '#e9e9ee',
'misc-logan-dark': '#74738a',
'misc-logan-light': '#adacc1',
'misc-igloo': '#b5d0ee',
'misc-igloo-20': '#f0f6fc',
'misc-igloo-dark': '#91a6be',
'misc-igloo-light': '#c8dcf2',
'status-malachite': '#1cc54e',
'status-malachite-20': '#d2f3dc',
'status-malachite-dark': '#169e3e',
'status-malachite-light': '#55d47a',
'status-shy-tomato': '#c91432',
'status-shy-tomato-20': '#f4d0d6',
'status-shy-tomato-dark': '#a11028',
'status-shy-tomato-light': '#d74f65',
'ui-design-axa-blue': '#00008f',
'ui-design-axa-blue-20': '#cccce9',
'ui-design-axa-blue-dark': '#000072',
'ui-design-axa-blue-light': '#4040ab',
'ui-design-burnt-sienna': '#f07662',
'ui-design-burnt-sienna-20': '#fce4e0',
'ui-design-burnt-sienna-dark': '#c05e4e',
'ui-design-burnt-sienna-light': '#f49889',
'ui-design-black': '#000000',
'ui-design-dark-grey': '#333333',
'ui-design-medium-grey': '#5f5f5f',
'ui-design-grey': '#7f7f7f',
'ui-design-light-grey': '#999999',
'ui-design-silver': '#cccccc',
'ui-design-mercury': '#e5e5e5',
'ui-design-wild-sand': '#f5f5f5',
'ui-design-alabaster': '#fafafa',
'ui-design-white': '#ffffff',
},
boxShadow: {
'box-default': '0px 1px 8px 0px rgba(0, 0, 0, 0.15)',
'box-high': '0px 1px 20px 0px rgba(0, 0, 0, 0.15)',
},
borderRadius: { small: '0.25rem', medium: '0.5rem', large: '1rem' },
transitionTimingFunction: {
standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
decelerated: 'cubic-bezier(0, 0, 0.2, 1)',
accelerated: 'cubic-bezier(0.4, 0, 1, 1)',
},
},
},
};
export default config;