@adaods/viva-tokens/dist/light.css

Design tokens for Viva brand

:root {
  /* BACKGROUND */
  --ads-bg-background-default: #f9fafb;
  --ads-bg-background-hover: #f3f4f6;
  --ads-bg-background-active: #e5e7eb;
  --ads-bg-background-disabled: #f3f4f6;
  --ads-bg-muted-default: #f3f4f6;
  --ads-bg-muted-hover: #e5e7eb;
  --ads-bg-muted-active: #d1d5db;
  --ads-bg-surface-default: #ffffff;
  --ads-bg-surface-hover: #f9fafb;
  --ads-bg-surface-active: #f3f4f6;
  --ads-bg-inverted-default: #030712;
  --ads-bg-inverted-hover: #111827;
  --ads-bg-inverted-active: #1f2937;
  --ads-bg-primary-default: #3b82f6;
  --ads-bg-primary-hover: #60a5fa;
  --ads-bg-primary-active: #2563eb;
  --ads-bg-primary-weak-default: #dbeafe;
  --ads-bg-primary-weak-hover: #eff6ff;
  --ads-bg-primary-weak-active: #bfdbfe;
  --ads-bg-secondary-default: #ef8411;
  --ads-bg-secondary-hover: #f6ae3b;
  --ads-bg-secondary-active: #d3620c;
  --ads-bg-secondary-weak-default: #fdecc8;
  --ads-bg-secondary-weak-hover: #fef9ec;
  --ads-bg-secondary-weak-active: #fad88d;
  --ads-bg-positive-default: #10b981;
  --ads-bg-positive-hover: #34d399;
  --ads-bg-positive-active: #059669;
  --ads-bg-positive-weak-default: #d1fae5;
  --ads-bg-positive-weak-hover: #ecfdf5;
  --ads-bg-positive-weak-active: #a7f3d0;
  --ads-bg-destructive-default: #ef4444;
  --ads-bg-destructive-hover: #f87171;
  --ads-bg-destructive-active: #dc2626;
  --ads-bg-destructive-weak-default: #fee2e2;
  --ads-bg-destructive-weak-hover: #fef2f2;
  --ads-bg-destructive-weak-active: #fecaca;
  --ads-bg-warning-default: #f59e0b;
  --ads-bg-warning-hover: #fbbf24;
  --ads-bg-warning-active: #d97706;
  --ads-bg-warning-weak-default: #fef3c7;
  --ads-bg-warning-weak-hover: #fffbeb;
  --ads-bg-warning-weak-active: #fde68a;
  --ads-bg-info-default: #0ea5e9;
  --ads-bg-info-hover: #38bdf8;
  --ads-bg-info-active: #0284c7;
  --ads-bg-info-weak-default: #e0f2fe;
  --ads-bg-info-weak-hover: #f0f9ff;
  --ads-bg-info-weak-active: #bae6fd;

  /* FOREGROUND */
  --ads-fg-foreground: #1f2937;
  --ads-fg-muted: #6b7280;
  --ads-fg-disabled: #9ca3af;
  --ads-fg-white4ever: #ffffff;
  --ads-fg-inverted: #f9fafb;
  --ads-fg-primary-default: #2563eb;
  --ads-fg-primary-weak: #1d4ed8;
  --ads-fg-secondary-default: #d3620c;
  --ads-fg-secondary-weak: #af430e;
  --ads-fg-positive-default: #059669;
  --ads-fg-positive-weak: #047857;
  --ads-fg-destructive-default: #dc2626;
  --ads-fg-destructive-weak: #b91c1c;
  --ads-fg-warning-default: #d97706;
  --ads-fg-warning-weak: #b45309;
  --ads-fg-info-default: #0284c7;
  --ads-fg-info-weak: #0369a1;

  /* BORDER */
  --ads-border-all: #d1d5db;
  --ads-border-disabled: #e5e7eb;
  --ads-border-inverted: #111827;
  --ads-border-white4ever: #ffffff;
  --ads-border-primary: #93c5fd;
  --ads-border-neutral: #d1d5db;
  --ads-border-positive: #6ee7b7;
  --ads-border-destructive: #fca5a5;
  --ads-border-warning: #fcd34d;
  --ads-border-info: #7dd3fc;

  /* TYPOGRAPHY */
  --ads-display-sm: 600 2.25rem/1.2 Raleway;
  --ads-display-md: 600 3rem/1.2 Raleway;
  --ads-display-lg: 600 3.75rem/1.2 Raleway;
  --ads-display-xl: 600 4.5rem/1.2 Raleway;
  --ads-heading-sm: 600 1.25rem/1.4 Raleway;
  --ads-heading-md: 600 1.5rem/1.4 Raleway;
  --ads-heading-lg: 600 1.875rem/1.2 Raleway;
  --ads-heading-xl: 600 2.25rem/1.2 Raleway;
  --ads-body-xs: 400 0.75rem/1.4 Raleway;
  --ads-body-sm: 400 0.875rem/1.4 Raleway;
  --ads-body-md: 400 1rem/1.5 Raleway;
  --ads-body-lg: 400 1.125rem/1.5 Raleway;
  --ads-label-xs: 500 0.75rem/1.4 Raleway;
  --ads-label-xs-alt: 600 0.75rem/1.4 Raleway;
  --ads-label-sm: 500 0.875rem/1.4 Raleway;
  --ads-label-sm-alt: 600 0.875rem/1.4 Raleway;
  --ads-label-md: 500 1rem/1.4 Raleway;
  --ads-label-md-alt: 600 1rem/1.4 Raleway;
  --ads-label-lg: 500 1.125rem/1.4 Raleway;
  --ads-label-lg-alt: 600 1.125rem/1.4 Raleway;
  --ads-label-xl: 500 1.25rem/1.4 Raleway;
  --ads-label-xl-alt: 600 1.25rem/1.4 Raleway;

  /* SCHEME */
  --ads-scheme-brand-primary-50: #eff6ff;
  --ads-scheme-brand-primary-100: #dbeafe;
  --ads-scheme-brand-primary-200: #bfdbfe;
  --ads-scheme-brand-primary-300: #93c5fd;
  --ads-scheme-brand-primary-400: #60a5fa;
  --ads-scheme-brand-primary-500: #3b82f6;
  --ads-scheme-brand-primary-600: #2563eb;
  --ads-scheme-brand-primary-700: #1d4ed8;
  --ads-scheme-brand-primary-800: #1e40af;
  --ads-scheme-brand-primary-900: #1e3a8a;
  --ads-scheme-brand-primary-950: #172554;
  --ads-scheme-brand-secondary-50: #fef9ec;
  --ads-scheme-brand-secondary-100: #fdecc8;
  --ads-scheme-brand-secondary-200: #fad88d;
  --ads-scheme-brand-secondary-300: #f7bf52;
  --ads-scheme-brand-secondary-400: #f6ae3b;
  --ads-scheme-brand-secondary-500: #ef8411;
  --ads-scheme-brand-secondary-600: #d3620c;
  --ads-scheme-brand-secondary-700: #af430e;
  --ads-scheme-brand-secondary-800: #8e3412;
  --ads-scheme-brand-secondary-900: #752c12;
  --ads-scheme-brand-secondary-950: #431405;
  --ads-scheme-brand-neutral-50: #f9fafb;
  --ads-scheme-brand-neutral-100: #f3f4f6;
  --ads-scheme-brand-neutral-200: #e5e7eb;
  --ads-scheme-brand-neutral-300: #d1d5db;
  --ads-scheme-brand-neutral-400: #9ca3af;
  --ads-scheme-brand-neutral-500: #6b7280;
  --ads-scheme-brand-neutral-600: #4b5563;
  --ads-scheme-brand-neutral-700: #374151;
  --ads-scheme-brand-neutral-800: #1f2937;
  --ads-scheme-brand-neutral-900: #111827;
  --ads-scheme-brand-neutral-950: #030712;

  /* SPACING */
  --ads-spacing-0: 0px;
  --ads-spacing-xs: 0.125rem;
  --ads-spacing-sm: 0.25rem;
  --ads-spacing-md: 0.375rem;
  --ads-spacing-lg: 0.5rem;
  --ads-spacing-xl: 0.75rem;
  --ads-spacing-2xl: 1rem;
  --ads-spacing-3xl: 1.25rem;
  --ads-spacing-4xl: 1.5rem;
  --ads-spacing-5xl: 1.75rem;
  --ads-spacing-6xl: 2rem;
  --ads-spacing-7xl: 2.25rem;
  --ads-spacing-8xl: 2.5rem;
  --ads-spacing-9xl: 3rem;

  /* RADIUS */
  --ads-rounded-xs: 0.0938rem;
  --ads-rounded-sm: 0.1875rem;
  --ads-rounded-base: 0.375rem;
  --ads-rounded-md: 0.4688rem;
  --ads-rounded-lg: 1.125rem;
  --ads-rounded-xl: 1.6875rem;
  --ads-rounded-2xl: 2.25rem;
  --ads-rounded-3xl: 2.8125rem;
  --ads-rounded-full: 3749.625rem;

  /* TEXT */
  --ads-text-base: 1rem;
  --ads-text-xs: 0.75rem;
  --ads-text-sm: 0.875rem;
  --ads-text-lg: 1.125rem;
  --ads-text-xl: 1.25rem;
  --ads-text-2xl: 1.5rem;
  --ads-text-3xl: 1.875rem;
  --ads-text-4xl: 2.25rem;
  --ads-text-5xl: 3rem;
  --ads-text-6xl: 3.75rem;
  --ads-text-7xl: 4.5rem;
  --ads-text-8xl: 6rem;
  --ads-text-9xl: 8rem;

  /* FONT */
  --ads-font-thin: 100;
  --ads-font-extralight: 200;
  --ads-font-light: 300;
  --ads-font-regular: 400;
  --ads-font-medium: 500;
  --ads-font-semibold: 600;
  --ads-font-bold: 700;
  --ads-font-extrabold: 800;
  --ads-font-black: 900;
  --ads-font-sans: Raleway;

  /* LEADING */
  --ads-leading-none: 100%;
  --ads-leading-tight: 120%;
  --ads-leading-snug: 140%;
  --ads-leading-normal: 150%;
  --ads-leading-relaxed: 160%;
  --ads-leading-loose: 200%;

  /* MODIFIER */
  --ads-modifier-amount-0: 0.032;
  --ads-modifier-amount-1: 0.048;
  --ads-modifier-amount-2: 0.064;
  --ads-modifier-amount-3: 0.12;
  --ads-modifier-amount-4: 0.24;
  --ads-modifier-amount-5: 0.40;
  --ads-modifier-amount-6: 0.64;
  --ads-modifier-amount-7: 0.72;
  --ads-modifier-amount-8: 0.84;
  --ads-modifier-amount-9: 0.92;

  /* STATE */
  --ads-state-amount-hover: 0.24;
  --ads-state-amount-selected: 0.12;
  --ads-state-amount-focus: 0.064;
  --ads-state-disabled: .5;
  --ads-state-enabled: 1;
  --ads-state-neutral-amount-hover: 0.032;
  --ads-state-neutral-amount-selected: 0.048;
  --ads-state-neutral-amount-focus: 0.064;

  /* OPACITY */
  --ads-opacity-transparent: 0;
  --ads-opacity-xs: .16;
  --ads-opacity-sm: .24;
  --ads-opacity-md: .5;
  --ads-opacity-lg: .64;
  --ads-opacity-xl: .72;
}