Typescript
Colors
Semantic colors use light-dark css function. Set appropriate color-scheme: <light/dark> in the app.
Spacing
--spacing variable is set to a base increment unit as recommended in the Tailwind CSS documentation. Use calc(var(--spacing) * x) or --spacing(x) in custom styles.
ads-theme.ts
/* This code was generated by a tool. Any changes made directly to this file will be lost when the code is regenerated. */
/* Based on ADS 2.1 */
/* Generated by ADS.Gen 0.1.1 on 2026-03-19T10:49:32.076Z */
export const adsTheme = {
colors: {
basic: {
neutral: {
'0': '#FFFFFF',
'100': '#F2F2F2',
'200': '#E6E6E6',
'300': '#CCCCCC',
'400': '#B3B3B3',
'500': '#757575',
'600': '#4D4D4D',
'700': '#333333',
'800': '#1A1A1A',
'900': '#000000',
},
blue: {
light: {
'100': '#E5F4FD',
'200': '#CCEAFA',
'300': '#99D4F5',
'400': '#66BFF1',
'500': '#33A9EC',
'600': '#0094E7',
'700': '#0074B5',
'800': '#00598B',
'900': '#0E2B61',
},
dark: {
'100': '#EFF3FD',
'200': '#D9E4F9',
'300': '#B2C3E5',
'400': '#8BA3D1',
'500': '#6482BC',
'600': '#3D62A8',
'700': '#164194',
'800': '#0F2B61',
'900': '#0A1D42',
},
},
steel: {
'100': '#F1F3F5',
'200': '#DDE1E7',
'300': '#BEC6D1',
'400': '#9EABBC',
'500': '#7A8AA1',
'600': '#344661',
'700': '#29374D',
'800': '#212C3D',
'900': '#161D29',
},
violet: {
'100': '#EADAF5',
'200': '#CEB6DE',
'300': '#B191C7',
'400': '#956DB1',
'500': '#78489A',
'600': '#5C2483',
'700': '#4A1D69',
'800': '#38164F',
'900': '#250E34',
},
green: {
'100': '#EFFBE7',
'200': '#DFF6D0',
'300': '#BFEDA0',
'400': '#9EE571',
'500': '#7EDC41',
'600': '#5ED312',
'700': '#48A10E',
'800': '#387F0B',
'900': '#1C3E05',
},
yellow: {
'100': '#FEF9D2',
'200': '#FDF988',
'300': '#FCE649',
'400': '#FFD538',
'500': '#FFCA05',
'600': '#D1A500',
'700': '#997900',
'800': '#665000',
'900': '#332800',
mkt: '#F8E923',
},
orange: {
'100': '#FFF2E5',
'200': '#FFE4CC',
'300': '#FFC999',
'400': '#FFAF66',
'500': '#FF9433',
'600': '#FF7900',
'700': '#CC6300',
'800': '#994900',
'900': '#663000',
},
red: {
'100': '#F9E8E8',
'200': '#F3D1D1',
'300': '#E8A2A3',
'400': '#DC7474',
'500': '#D14546',
'600': '#C51718',
'700': '#911112',
'800': '#760E0E',
'900': '#4F090A',
},
b2b: {
'100': '#E8F7F3',
'200': '#D2EFE8',
'300': '#A1DECE',
'400': '#73CEB7',
'500': '#43BD9E',
'600': '#389F84',
'700': '#2C7D68',
'800': '#215E4F',
'900': '#174036',
},
},
semantic: {
text: {
headlineNeutral: 'light-dark(#1a1a1aff, #ffffffff)',
headlineNeutralOnDark: 'light-dark(#ffffffff, #000000ff)',
headlinePositive: 'light-dark(#387f0bff, #5ed312ff)',
headlineWarning: 'light-dark(#ff7900ff, #ff7900ff)',
headlineNegative: 'light-dark(#c51718ff, #e1b100ff)',
bodyNeutral: 'light-dark(#333333ff, #e6e6e6ff)',
bodyNeutralOnDark: 'light-dark(#ffffffe6, #ffffffe6)',
bodyAdditional: 'light-dark(#757575ff, #b3b3b3ff)',
bodyDisabled: 'light-dark(#757575ff, #e1b100ff)',
bodyPositive: 'light-dark(#387f0bff, #5ed312ff)',
bodyWarning: 'light-dark(#ff7900ff, #e1b100ff)',
bodyNegative: 'light-dark(#c51718ff, #e1b100ff)',
bodyCurrentPrice: 'light-dark(#c51718ff, #dc7474ff)',
bodyOriginalPrice: 'light-dark(#757575ff, #b3b3b3ff)',
},
availability: {
inStock: 'light-dark(#387f0bff, #5ed312ff)',
forOrder: 'light-dark(#164194ff, #b2c3e5ff)',
},
account: {
bronze: 'light-dark(#994900ff, #e1b100ff)',
silver: 'light-dark(#4d4d4dff, #e1b100ff)',
gold: 'light-dark(#997900ff, #e1b100ff)',
benefit: 'light-dark(#164194ff, #b2c3e5ff)',
b2b: 'light-dark(#389f84ff, #e1b100ff)',
isic: 'light-dark(#389f84ff, #e1b100ff)',
alzaPlus: 'light-dark(#ff7900ff, #ff7900ff)',
alzaPremium: 'light-dark(#911112ff, #e1b100ff)',
},
link: {
primary: 'light-dark(#164194ff, #b2c3e5ff)',
secondary: 'light-dark(#333333ff, #e6e6e6ff)',
tertiary: 'light-dark(#757575ff, #b3b3b3ff)',
positive: 'light-dark(#387f0bff, #5ed312ff)',
negative: 'light-dark(#c51718ff, #e1b100ff)',
},
background: {
primary: 'light-dark(#ffffffff, #333333ff)',
secondary: 'light-dark(#f2f2f2ff, #1a1a1aff)',
tertiary: 'light-dark(#e6e6e6ff, #000000ff)',
dark: 'light-dark(#1a1a1aff, #e1b100ff)',
disabled: 'light-dark(#e6e6e6ff, #e1b100ff)',
selected: 'light-dark(#eff3fdff, #0a1d42ff)',
dialog: 'light-dark(#000000cc, #000000e6)',
positiveLight: 'light-dark(#effbe7ff, #1c3e05ff)',
positiveDark: 'light-dark(#5ed312ff, #5ed312ff)',
negativeLight: 'light-dark(#f9e8e8ff, #e1b100ff)',
negativeDark: 'light-dark(#c51718ff, #c51718ff)',
warningLight: 'light-dark(#fef9d2ff, #665000ff)',
warningDark: 'light-dark(#fce649ff, #e1b100ff)',
brandLight: 'light-dark(#d9e4f9ff, #29374dff)',
brandDark: 'light-dark(#164194ff, #b2c3e5ff)',
alzaPlus: 'light-dark(#ff7900ff, #ff7900ff)',
alzaPlusLight: 'light-dark(#fff2e5ff, #663000ff)',
},
border: {
neutral: 'light-dark(#00000029, #00000029)',
brand: 'light-dark(#d9e4f9ff, #344661ff)',
positive: 'light-dark(#bfeda0ff, #e1b100ff)',
warning: 'light-dark(#ffd538ff, #997900ff)',
negative: 'light-dark(#e8a2a3ff, #e1b100ff)',
focused: 'light-dark(#3d62a8ff, #b2c3e5ff)',
selected: 'light-dark(#164194ff, #b2c3e5ff)',
alzaPlus: 'light-dark(#ff7900ff, #994900ff)',
},
},
},
typography: {
headline: {
article: {
fontSize: '2rem',
fontWeight: '700',
lineHeight: '3rem',
},
h1: {
fontSize: '1.5rem',
fontWeight: '700',
lineHeight: '2.25rem',
},
h2: {
fontSize: '1.25rem',
fontWeight: '700',
lineHeight: '1.875rem',
},
h3: {
fontSize: '1rem',
fontWeight: '700',
lineHeight: '1.75rem',
},
h4: {
fontSize: '0.875rem',
fontWeight: '700',
lineHeight: '1.3125rem',
},
},
body: {
big: {
fontSize: '1rem',
fontWeight: '400',
lineHeight: '1.5rem',
},
normal: {
fontSize: '0.875rem',
fontWeight: '400',
lineHeight: '1.3125rem',
},
small: {
fontSize: '0.8125rem',
fontWeight: '400',
lineHeight: '1.125rem',
},
},
},
shadows: {
primary: '0px 1px 4px 0px rgba(0, 0, 0, 0.15)',
clickable: '0px 1px 4px 0px rgba(0, 0, 0, 0.16)',
hover: '0px 1px 8px 0px rgba(0, 0, 0, 0.32)',
pressed: '0px 1px 1px 0px rgba(0, 0, 0, 0.1)',
},
radius: {
'4': '0.25rem',
normal: '0.5rem',
big: '1rem',
full: 'calc(infinity * 1px)',
},
} as const;
Last updated on