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.3 on 2026-05-15T12:30:20.293Z */
export const adsTheme = {
colors: {
basic: {
neutral: {
/** var(--color-basic-neutral-0, #FFFFFF) */
'0': 'var(--color-basic-neutral-0, #FFFFFF)',
/** var(--color-basic-neutral-100, #F2F2F2) */
'100': 'var(--color-basic-neutral-100, #F2F2F2)',
/** var(--color-basic-neutral-200, #E6E6E6) */
'200': 'var(--color-basic-neutral-200, #E6E6E6)',
/** var(--color-basic-neutral-300, #CCCCCC) */
'300': 'var(--color-basic-neutral-300, #CCCCCC)',
/** var(--color-basic-neutral-400, #A7A7A7) */
'400': 'var(--color-basic-neutral-400, #A7A7A7)',
/** var(--color-basic-neutral-500, #6E6E6E) */
'500': 'var(--color-basic-neutral-500, #6E6E6E)',
/** var(--color-basic-neutral-600, #4D4D4D) */
'600': 'var(--color-basic-neutral-600, #4D4D4D)',
/** var(--color-basic-neutral-700, #242424) */
'700': 'var(--color-basic-neutral-700, #242424)',
/** var(--color-basic-neutral-800, #121212) */
'800': 'var(--color-basic-neutral-800, #121212)',
/** var(--color-basic-neutral-900, #000000) */
'900': 'var(--color-basic-neutral-900, #000000)',
},
blue: {
light: {
/** var(--color-basic-blue-light-100, #E5F4FD) */
'100': 'var(--color-basic-blue-light-100, #E5F4FD)',
/** var(--color-basic-blue-light-200, #CCEAFA) */
'200': 'var(--color-basic-blue-light-200, #CCEAFA)',
/** var(--color-basic-blue-light-300, #99D4F5) */
'300': 'var(--color-basic-blue-light-300, #99D4F5)',
/** var(--color-basic-blue-light-400, #66BFF1) */
'400': 'var(--color-basic-blue-light-400, #66BFF1)',
/** var(--color-basic-blue-light-500, #33A9EC) */
'500': 'var(--color-basic-blue-light-500, #33A9EC)',
/** var(--color-basic-blue-light-600, #0094E7) */
'600': 'var(--color-basic-blue-light-600, #0094E7)',
/** var(--color-basic-blue-light-700, #0074B5) */
'700': 'var(--color-basic-blue-light-700, #0074B5)',
/** var(--color-basic-blue-light-800, #00598B) */
'800': 'var(--color-basic-blue-light-800, #00598B)',
/** var(--color-basic-blue-light-900, #0E2B61) */
'900': 'var(--color-basic-blue-light-900, #0E2B61)',
},
dark: {
/** var(--color-basic-blue-dark-100, #EFF3FD) */
'100': 'var(--color-basic-blue-dark-100, #EFF3FD)',
/** var(--color-basic-blue-dark-200, #D9E4F9) */
'200': 'var(--color-basic-blue-dark-200, #D9E4F9)',
/** var(--color-basic-blue-dark-300, #91B7FF) */
'300': 'var(--color-basic-blue-dark-300, #91B7FF)',
/** var(--color-basic-blue-dark-400, #6696E0) */
'400': 'var(--color-basic-blue-dark-400, #6696E0)',
/** var(--color-basic-blue-dark-500, #4B7CD1) */
'500': 'var(--color-basic-blue-dark-500, #4B7CD1)',
/** var(--color-basic-blue-dark-600, #3163C2) */
'600': 'var(--color-basic-blue-dark-600, #3163C2)',
/** var(--color-basic-blue-dark-700, #164194) */
'700': 'var(--color-basic-blue-dark-700, #164194)',
/** var(--color-basic-blue-dark-800, #0F2B61) */
'800': 'var(--color-basic-blue-dark-800, #0F2B61)',
/** var(--color-basic-blue-dark-900, #0A1D42) */
'900': 'var(--color-basic-blue-dark-900, #0A1D42)',
},
},
steel: {
/** var(--color-basic-steel-100, #F1F3F5) */
'100': 'var(--color-basic-steel-100, #F1F3F5)',
/** var(--color-basic-steel-200, #DDE1E7) */
'200': 'var(--color-basic-steel-200, #DDE1E7)',
/** var(--color-basic-steel-300, #BEC6D1) */
'300': 'var(--color-basic-steel-300, #BEC6D1)',
/** var(--color-basic-steel-400, #9EABBC) */
'400': 'var(--color-basic-steel-400, #9EABBC)',
/** var(--color-basic-steel-500, #7A8AA1) */
'500': 'var(--color-basic-steel-500, #7A8AA1)',
/** var(--color-basic-steel-600, #344661) */
'600': 'var(--color-basic-steel-600, #344661)',
/** var(--color-basic-steel-700, #29374D) */
'700': 'var(--color-basic-steel-700, #29374D)',
/** var(--color-basic-steel-800, #212C3D) */
'800': 'var(--color-basic-steel-800, #212C3D)',
/** var(--color-basic-steel-900, #161D29) */
'900': 'var(--color-basic-steel-900, #161D29)',
},
violet: {
/** var(--color-basic-violet-100, #EADAF5) */
'100': 'var(--color-basic-violet-100, #EADAF5)',
/** var(--color-basic-violet-200, #CEB6DE) */
'200': 'var(--color-basic-violet-200, #CEB6DE)',
/** var(--color-basic-violet-300, #B191C7) */
'300': 'var(--color-basic-violet-300, #B191C7)',
/** var(--color-basic-violet-400, #956DB1) */
'400': 'var(--color-basic-violet-400, #956DB1)',
/** var(--color-basic-violet-500, #78489A) */
'500': 'var(--color-basic-violet-500, #78489A)',
/** var(--color-basic-violet-600, #5C2483) */
'600': 'var(--color-basic-violet-600, #5C2483)',
/** var(--color-basic-violet-700, #4A1D69) */
'700': 'var(--color-basic-violet-700, #4A1D69)',
/** var(--color-basic-violet-800, #38164F) */
'800': 'var(--color-basic-violet-800, #38164F)',
/** var(--color-basic-violet-900, #250E34) */
'900': 'var(--color-basic-violet-900, #250E34)',
},
green: {
/** var(--color-basic-green-100, #EFFBE7) */
'100': 'var(--color-basic-green-100, #EFFBE7)',
/** var(--color-basic-green-200, #DFF6D0) */
'200': 'var(--color-basic-green-200, #DFF6D0)',
/** var(--color-basic-green-300, #BFEDA0) */
'300': 'var(--color-basic-green-300, #BFEDA0)',
/** var(--color-basic-green-400, #9EE571) */
'400': 'var(--color-basic-green-400, #9EE571)',
/** var(--color-basic-green-500, #7EDC41) */
'500': 'var(--color-basic-green-500, #7EDC41)',
/** var(--color-basic-green-600, #5ED312) */
'600': 'var(--color-basic-green-600, #5ED312)',
/** var(--color-basic-green-700, #48A10E) */
'700': 'var(--color-basic-green-700, #48A10E)',
/** var(--color-basic-green-800, #387F0B) */
'800': 'var(--color-basic-green-800, #387F0B)',
/** var(--color-basic-green-900, #1C3E05) */
'900': 'var(--color-basic-green-900, #1C3E05)',
},
yellow: {
/** var(--color-basic-yellow-100, #FEF9D2) */
'100': 'var(--color-basic-yellow-100, #FEF9D2)',
/** var(--color-basic-yellow-200, #FDF988) */
'200': 'var(--color-basic-yellow-200, #FDF988)',
/** var(--color-basic-yellow-300, #FCE649) */
'300': 'var(--color-basic-yellow-300, #FCE649)',
/** var(--color-basic-yellow-400, #FFD538) */
'400': 'var(--color-basic-yellow-400, #FFD538)',
/** var(--color-basic-yellow-500, #FFCA05) */
'500': 'var(--color-basic-yellow-500, #FFCA05)',
/** var(--color-basic-yellow-600, #D1A500) */
'600': 'var(--color-basic-yellow-600, #D1A500)',
/** var(--color-basic-yellow-700, #997900) */
'700': 'var(--color-basic-yellow-700, #997900)',
/** var(--color-basic-yellow-800, #665000) */
'800': 'var(--color-basic-yellow-800, #665000)',
/** var(--color-basic-yellow-900, #332800) */
'900': 'var(--color-basic-yellow-900, #332800)',
/** var(--color-basic-yellow-mkt, #F8E923) */
mkt: 'var(--color-basic-yellow-mkt, #F8E923)',
},
orange: {
/** var(--color-basic-orange-100, #FFF2E5) */
'100': 'var(--color-basic-orange-100, #FFF2E5)',
/** var(--color-basic-orange-200, #FFE4CC) */
'200': 'var(--color-basic-orange-200, #FFE4CC)',
/** var(--color-basic-orange-300, #FFC999) */
'300': 'var(--color-basic-orange-300, #FFC999)',
/** var(--color-basic-orange-400, #FFAF66) */
'400': 'var(--color-basic-orange-400, #FFAF66)',
/** var(--color-basic-orange-500, #FF9433) */
'500': 'var(--color-basic-orange-500, #FF9433)',
/** var(--color-basic-orange-600, #FF7900) */
'600': 'var(--color-basic-orange-600, #FF7900)',
/** var(--color-basic-orange-700, #CC6300) */
'700': 'var(--color-basic-orange-700, #CC6300)',
/** var(--color-basic-orange-800, #994900) */
'800': 'var(--color-basic-orange-800, #994900)',
/** var(--color-basic-orange-900, #472100) */
'900': 'var(--color-basic-orange-900, #472100)',
},
red: {
/** var(--color-basic-red-100, #F9E8E8) */
'100': 'var(--color-basic-red-100, #F9E8E8)',
/** var(--color-basic-red-200, #F3D1D1) */
'200': 'var(--color-basic-red-200, #F3D1D1)',
/** var(--color-basic-red-300, #E8A2A3) */
'300': 'var(--color-basic-red-300, #E8A2A3)',
/** var(--color-basic-red-400, #DC7474) */
'400': 'var(--color-basic-red-400, #DC7474)',
/** var(--color-basic-red-500, #D14546) */
'500': 'var(--color-basic-red-500, #D14546)',
/** var(--color-basic-red-600, #C51718) */
'600': 'var(--color-basic-red-600, #C51718)',
/** var(--color-basic-red-700, #911112) */
'700': 'var(--color-basic-red-700, #911112)',
/** var(--color-basic-red-800, #760E0E) */
'800': 'var(--color-basic-red-800, #760E0E)',
/** var(--color-basic-red-900, #4F090A) */
'900': 'var(--color-basic-red-900, #4F090A)',
},
b2b: {
/** var(--color-basic-b2b-100, #E8F7F3) */
'100': 'var(--color-basic-b2b-100, #E8F7F3)',
/** var(--color-basic-b2b-200, #D2EFE8) */
'200': 'var(--color-basic-b2b-200, #D2EFE8)',
/** var(--color-basic-b2b-300, #A1DECE) */
'300': 'var(--color-basic-b2b-300, #A1DECE)',
/** var(--color-basic-b2b-400, #73CEB7) */
'400': 'var(--color-basic-b2b-400, #73CEB7)',
/** var(--color-basic-b2b-500, #43BD9E) */
'500': 'var(--color-basic-b2b-500, #43BD9E)',
/** var(--color-basic-b2b-600, #389F84) */
'600': 'var(--color-basic-b2b-600, #389F84)',
/** var(--color-basic-b2b-700, #2C7D68) */
'700': 'var(--color-basic-b2b-700, #2C7D68)',
/** var(--color-basic-b2b-800, #215E4F) */
'800': 'var(--color-basic-b2b-800, #215E4F)',
/** var(--color-basic-b2b-900, #174036) */
'900': 'var(--color-basic-b2b-900, #174036)',
},
},
semantic: {
text: {
/** light: #121212ff, dark: #ffffffff */
headlineNeutral:
'var(--color-semantic-text-headline-neutral, light-dark(#121212ff, #ffffffff))',
/** light: #ffffffff, dark: #000000ff */
headlineNeutralOnDark:
'var(--color-semantic-text-headline-neutral-on-dark, light-dark(#ffffffff, #000000ff))',
/** light: #387f0bff, dark: #5ed312ff */
headlineGreen:
'var(--color-semantic-text-headline-green, light-dark(#387f0bff, #5ed312ff))',
/** light: #ff7900ff, dark: #ff7900ff */
headlineOrange:
'var(--color-semantic-text-headline-orange, light-dark(#ff7900ff, #ff7900ff))',
/** light: #c51718ff, dark: #00ff37ff */
headlineRed:
'var(--color-semantic-text-headline-red, light-dark(#c51718ff, #00ff37ff))',
/** light: #242424ff, dark: #e6e6e6ff */
bodyNeutral:
'var(--color-semantic-text-body-neutral, light-dark(#242424ff, #e6e6e6ff))',
/** light: #ffffffe6, dark: #ffffffe6 */
bodyNeutralOnDark:
'var(--color-semantic-text-body-neutral-on-dark, light-dark(#ffffffe6, #ffffffe6))',
/** light: #6e6e6eff, dark: #a7a7a7ff */
bodyAdditional:
'var(--color-semantic-text-body-additional, light-dark(#6e6e6eff, #a7a7a7ff))',
/** light: #a7a7a7ff, dark: #a7a7a7ff */
bodyPlaceholder:
'var(--color-semantic-text-body-placeholder, light-dark(#a7a7a7ff, #a7a7a7ff))',
/** light: #a7a7a7ff, dark: #00ff37ff */
bodyDisabled:
'var(--color-semantic-text-body-disabled, light-dark(#a7a7a7ff, #00ff37ff))',
/** light: #387f0bff, dark: #5ed312ff */
bodyGreen:
'var(--color-semantic-text-body-green, light-dark(#387f0bff, #5ed312ff))',
/** light: #ff7900ff, dark: #00ff37ff */
bodyOrange:
'var(--color-semantic-text-body-orange, light-dark(#ff7900ff, #00ff37ff))',
/** light: #c51718ff, dark: #00ff37ff */
bodyRed:
'var(--color-semantic-text-body-red, light-dark(#c51718ff, #00ff37ff))',
/** light: #c51718ff, dark: #dc7474ff */
bodyCurrentPrice:
'var(--color-semantic-text-body-current-price, light-dark(#c51718ff, #dc7474ff))',
/** light: #6e6e6eff, dark: #a7a7a7ff */
bodyOriginalPrice:
'var(--color-semantic-text-body-original-price, light-dark(#6e6e6eff, #a7a7a7ff))',
},
availability: {
/** light: #387f0bff, dark: #5ed312ff */
inStock:
'var(--color-semantic-availability-in-stock, light-dark(#387f0bff, #5ed312ff))',
/** light: #164194ff, dark: #91b7ffff */
forOrder:
'var(--color-semantic-availability-for-order, light-dark(#164194ff, #91b7ffff))',
},
account: {
/** light: #cc6300ff, dark: #00ff37ff */
bronze:
'var(--color-semantic-account-bronze, light-dark(#cc6300ff, #00ff37ff))',
/** light: #4d4d4dff, dark: #00ff37ff */
silver:
'var(--color-semantic-account-silver, light-dark(#4d4d4dff, #00ff37ff))',
/** light: #997900ff, dark: #00ff37ff */
gold: 'var(--color-semantic-account-gold, light-dark(#997900ff, #00ff37ff))',
/** light: #164194ff, dark: #91b7ffff */
benefit:
'var(--color-semantic-account-benefit, light-dark(#164194ff, #91b7ffff))',
/** light: #389f84ff, dark: #00ff37ff */
b2b: 'var(--color-semantic-account-b2b, light-dark(#389f84ff, #00ff37ff))',
/** light: #389f84ff, dark: #00ff37ff */
isic: 'var(--color-semantic-account-isic, light-dark(#389f84ff, #00ff37ff))',
/** light: #ff7900ff, dark: #ff7900ff */
alzaPlus:
'var(--color-semantic-account-alza-plus, light-dark(#ff7900ff, #ff7900ff))',
/** light: #911112ff, dark: #00ff37ff */
alzaPremium:
'var(--color-semantic-account-alza-premium, light-dark(#911112ff, #00ff37ff))',
},
link: {
/** light: #164194ff, dark: #91b7ffff */
primary:
'var(--color-semantic-link-primary, light-dark(#164194ff, #91b7ffff))',
/** light: #242424ff, dark: #e6e6e6ff */
secondary:
'var(--color-semantic-link-secondary, light-dark(#242424ff, #e6e6e6ff))',
/** light: #6e6e6eff, dark: #a7a7a7ff */
tertiary:
'var(--color-semantic-link-tertiary, light-dark(#6e6e6eff, #a7a7a7ff))',
/** light: #387f0bff, dark: #5ed312ff */
positive:
'var(--color-semantic-link-positive, light-dark(#387f0bff, #5ed312ff))',
/** light: #c51718ff, dark: #00ff37ff */
negative:
'var(--color-semantic-link-negative, light-dark(#c51718ff, #00ff37ff))',
},
background: {
/** light: #ffffffff, dark: #242424ff */
primary:
'var(--color-semantic-background-primary, light-dark(#ffffffff, #242424ff))',
/** light: #f2f2f2ff, dark: #121212ff */
secondary:
'var(--color-semantic-background-secondary, light-dark(#f2f2f2ff, #121212ff))',
/** light: #e6e6e6ff, dark: #000000ff */
tertiary:
'var(--color-semantic-background-tertiary, light-dark(#e6e6e6ff, #000000ff))',
/** light: #121212ff, dark: #00ff37ff */
dark: 'var(--color-semantic-background-dark, light-dark(#121212ff, #00ff37ff))',
/** light: #e6e6e6ff, dark: #00ff37ff */
disabled:
'var(--color-semantic-background-disabled, light-dark(#e6e6e6ff, #00ff37ff))',
/** light: #eff3fdff, dark: #0a1d42ff */
selected:
'var(--color-semantic-background-selected, light-dark(#eff3fdff, #0a1d42ff))',
/** light: #000000cc, dark: #000000e6 */
dialog:
'var(--color-semantic-background-dialog, light-dark(#000000cc, #000000e6))',
/** light: #effbe7ff, dark: #1c3e05ff */
positiveLight:
'var(--color-semantic-background-positive-light, light-dark(#effbe7ff, #1c3e05ff))',
/** light: #5ed312ff, dark: #5ed312ff */
positiveDark:
'var(--color-semantic-background-positive-dark, light-dark(#5ed312ff, #5ed312ff))',
/** light: #f9e8e8ff, dark: #00ff37ff */
negativeLight:
'var(--color-semantic-background-negative-light, light-dark(#f9e8e8ff, #00ff37ff))',
/** light: #c51718ff, dark: #c51718ff */
negativeDark:
'var(--color-semantic-background-negative-dark, light-dark(#c51718ff, #c51718ff))',
/** light: #fef9d2ff, dark: #665000ff */
warningLight:
'var(--color-semantic-background-warning-light, light-dark(#fef9d2ff, #665000ff))',
/** light: #fce649ff, dark: #00ff37ff */
warningDark:
'var(--color-semantic-background-warning-dark, light-dark(#fce649ff, #00ff37ff))',
/** light: #d9e4f9ff, dark: #29374dff */
brandLight:
'var(--color-semantic-background-brand-light, light-dark(#d9e4f9ff, #29374dff))',
/** light: #164194ff, dark: #91b7ffff */
brandDark:
'var(--color-semantic-background-brand-dark, light-dark(#164194ff, #91b7ffff))',
/** light: #ff7900ff, dark: #ff7900ff */
alzaPlus:
'var(--color-semantic-background-alza-plus, light-dark(#ff7900ff, #ff7900ff))',
/** light: #fff2e5ff, dark: #472100ff */
alzaPlusLight:
'var(--color-semantic-background-alza-plus-light, light-dark(#fff2e5ff, #472100ff))',
},
border: {
/** light: #00000029, dark: #ffffff29 */
neutral:
'var(--color-semantic-border-neutral, light-dark(#00000029, #ffffff29))',
/** light: #d9e4f9ff, dark: #344661ff */
brand:
'var(--color-semantic-border-brand, light-dark(#d9e4f9ff, #344661ff))',
/** light: #bfeda0ff, dark: #00ff37ff */
positive:
'var(--color-semantic-border-positive, light-dark(#bfeda0ff, #00ff37ff))',
/** light: #ffd538ff, dark: #997900ff */
warning:
'var(--color-semantic-border-warning, light-dark(#ffd538ff, #997900ff))',
/** light: #e8a2a3ff, dark: #00ff37ff */
negative:
'var(--color-semantic-border-negative, light-dark(#e8a2a3ff, #00ff37ff))',
/** light: #3163c2ff, dark: #91b7ffff */
focused:
'var(--color-semantic-border-focused, light-dark(#3163c2ff, #91b7ffff))',
/** light: #164194ff, dark: #91b7ffff */
selected:
'var(--color-semantic-border-selected, light-dark(#164194ff, #91b7ffff))',
/** light: #ff7900ff, dark: #994900ff */
alzaPlus:
'var(--color-semantic-border-alza-plus, 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