@incodetech/web 2.0.0-alpha.1

package/src/styles/tailwind.css

@@ -0,0 +1,291 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
+
+@layer incode-theme, incode-base, incode-components, incode-utilities;
+@import "tailwindcss/theme.css" layer(incode-theme);
+@import "tailwindcss/utilities.css" layer(incode-utilities);
+@import "./reset.css";
+
+@theme {
+  --color-surface-neutral-0: var(--surface-neutral-0);
+  --color-surface-neutral-0-80: var(--surface-neutral-0-80);
+  --color-surface-neutral-50: var(--surface-neutral-50);
+  --color-surface-neutral-100: var(--surface-neutral-100);
+  --color-surface-neutral-200: var(--surface-neutral-200);
+  --color-surface-neutral-300: var(--surface-neutral-300);
+  --color-surface-neutral-500: var(--surface-neutral-500);
+  --color-surface-neutral-700: var(--surface-neutral-700);
+  --color-surface-neutral-800: var(--surface-neutral-800);
+  --color-surface-neutral-900: var(--surface-neutral-900);
+  --color-surface-neutral-900-80: var(--surface-neutral-900-80);
+  --color-surface-neutral-900-static: var(--surface-neutral-900-static);
+  --color-surface-neutral-1000: var(--surface-neutral-1000);
+
+  --color-surface-brand-50: var(--surface-brand-50);
+  --color-surface-brand-400: var(--surface-brand-400-static);
+  --color-surface-brand-500: var(--surface-brand-500-static);
+  --color-surface-brand-600: var(--surface-brand-600-static);
+
+  --color-surface-status-negative-50: var(--surface-status-negative-50);
+  --color-surface-status-negative-600: var(--surface-status-negative-600);
+  --color-surface-status-warning-50: var(--surface-status-warning-50);
+  --color-surface-status-warning-500: var(--surface-status-warning-500);
+  --color-surface-status-positive-50: var(--surface-status-positive-50);
+  --color-surface-status-positive-600: var(
+    --surface-status-positive-600-static
+  );
+
+  --color-icon-neutral-0: var(--icon-neutral-0);
+  --color-icon-neutral-50: var(--icon-neutral-50-static);
+  --color-icon-neutral-300: var(--icon-neutral-300);
+  --color-icon-neutral-500: var(--icon-neutral-500);
+  --color-icon-neutral-800: var(--icon-neutral-800);
+  --color-icon-brand-500: var(--icon-brand-500-static);
+  --color-icon-status-negative: var(--icon-status-negative);
+  --color-icon-status-warning: var(--icon-status-warning);
+  --color-icon-status-positive: var(--icon-status-positive-static);
+
+  --color-border-neutral-100: var(--border-neutral-100);
+  --color-border-neutral-300: var(--border-neutral-300);
+  --color-border-neutral-500: var(--border-neutral-500);
+  --color-border-brand-500: var(--border-brand-500-static);
+  --color-border-brand-600: var(--border-brand-600);
+  --color-border-status-negative: var(--border-status-negative);
+  --color-border-status-warning: var(--border-status-warning);
+  --color-border-status-positive: var(--border-status-positive-static);
+
+  --color-text-body-primary: var(--text-body-primary);
+  --color-text-body-secondary: var(--text-body-secondary);
+  --color-text-body-tertiary: var(--text-body-tertiary);
+  --color-text-body-0: var(--text-body-0-static);
+  --color-text-link-default: var(--text-link-default);
+  --color-text-link-hover: var(--text-link-hover-static);
+  --color-text-link-disabled: var(--text-link-disabled-static);
+  --color-text-link-visited: var(--text-link-visited);
+  --color-text-accent-brand: var(--text-accent-brand-static);
+  --color-text-accent-brand-secondary: var(
+    --text-accent-brand-secondary-static
+  );
+  --color-text-status-negative: var(--text-status-negative);
+  --color-text-status-warning: var(--text-status-warning);
+  --color-text-status-positive: var(--text-status-positive-static);
+
+  --spacing: initial;
+  --spacing-0: var(--spacing-none, 0px);
+  --spacing-2: var(--spacing-2, 2px);
+  --spacing-4: var(--spacing-4, 4px);
+  --spacing-8: var(--spacing-8, 8px);
+  --spacing-12: var(--spacing-12, 12px);
+  --spacing-16: var(--spacing-16, 16px);
+  --spacing-20: var(--spacing-20, 20px);
+  --spacing-24: var(--spacing-24, 24px);
+  --spacing-32: var(--spacing-32, 32px);
+  --spacing-40: var(--spacing-40, 40px);
+  --spacing-48: var(--spacing-48, 48px);
+  --spacing-64: var(--spacing-64, 64px);
+  --spacing-80: var(--spacing-80, 80px);
+  --spacing-96: var(--spacing-96, 96px);
+  --spacing-104: var(--spacing-104, 104px);
+  --spacing-120: var(--spacing-120, 120px);
+  --spacing-160: var(--spacing-160, 160px);
+  --spacing-200: var(--spacing-200, 200px);
+
+  --radius-none: var(--border-radius-none);
+  --radius-x-small: var(--border-radius-x-small);
+  --radius-small: var(--border-radius-small);
+  --radius-medium: var(--border-radius-medium);
+  --radius-large: var(--border-radius-large);
+  --radius-x-large: var(--border-radius-x-large);
+  --radius-xx-large: var(--border-radius-xx-large);
+  --radius-full: var(--border-radius-full);
+
+  --border-width-none: var(--border-none);
+  --border-width-regular: var(--border-regular);
+  --border-width-bold: var(--border-bold);
+
+  --tw-border-style: solid;
+
+  --text-12: var(--primitive-typography-size-12);
+  --text-14: var(--primitive-typography-size-14);
+  --text-16: var(--primitive-typography-size-16);
+  --text-18: var(--primitive-typography-size-18);
+  --text-20: var(--primitive-typography-size-20);
+  --text-24: var(--primitive-typography-size-24);
+  --text-32: var(--primitive-typography-size-32);
+  --text-40: var(--primitive-typography-size-40);
+  --text-48: var(--primitive-typography-size-48);
+  --text-80: var(--primitive-typography-size-80);
+
+  --font-weight-thin: var(--primitive-typography-weight-thin);
+  --font-weight-regular: var(--primitive-typography-weight-regular);
+  --font-weight-medium: var(--primitive-typography-weight-medium);
+  --font-weight-semibold: var(--primitive-typography-weight-semibold);
+  --font-weight-bold: var(--primitive-typography-weight-bold);
+  --font-weight-extrabold: var(--primitive-typography-weight-extrabold);
+
+  --font-family-rethink-sans: var(--primitive-typography-family-rethink-sans);
+  --font-family-dm-sans: var(--primitive-typography-family-dm-sans);
+
+  /* Button */
+  --color-button-primary-surface-default: var(--button-primary-surface-default);
+  --color-button-primary-surface-hover: var(--button-primary-surface-hover);
+  --color-button-primary-surface-pressed: var(--button-primary-surface-pressed);
+  --color-button-primary-surface-disabled: var(
+    --button-primary-surface-disabled
+  );
+  --color-button-primary-text-default: var(--button-primary-text-default);
+  --color-button-primary-text-disabled: var(--button-primary-text-disabled);
+  --color-button-primary-border-default: var(--button-primary-border-default);
+  --color-button-primary-border-hover: var(--button-primary-border-hover);
+  --color-button-primary-border-pressed: var(--button-primary-border-pressed);
+  --color-button-primary-border-disabled: var(--button-primary-border-disabled);
+  --color-button-secondary-surface-default: var(
+    --button-secondary-surface-default
+  );
+  --color-button-secondary-surface-hover: var(--button-secondary-surface-hover);
+  --color-button-secondary-surface-pressed: var(
+    --button-secondary-surface-pressed
+  );
+  --color-button-secondary-surface-disabled: var(
+    --button-secondary-surface-disabled
+  );
+  --color-button-secondary-text-default: var(--button-secondary-text-default);
+  --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
+  --color-button-secondary-border-default: var(
+    --button-secondary-border-default
+  );
+  --color-button-secondary-border-hover: var(--button-secondary-border-hover);
+  --color-button-secondary-border-pressed: var(
+    --button-secondary-border-pressed
+  );
+  --color-button-secondary-border-disabled: var(
+    --button-secondary-border-disabled
+  );
+  --color-button-tertiary-text-default: var(--button-tertiary-text-default);
+  --color-button-tertiary-text-disabled: var(--button-tertiary-text-disabled);
+  --radius-button-primary: var(--button-primary-border-radius);
+  --radius-button-secondary: var(--button-secondary-border-radius);
+
+  /* Checkbox */
+  --color-checkbox-surface-default: var(--checkbox-surface-default);
+  --color-checkbox-surface-selected: var(--checkbox-surface-selected);
+  --color-checkbox-surface-disabled: var(--checkbox-surface-disabled);
+  --color-checkbox-border-default: var(--checkbox-border-default);
+  --color-checkbox-border-selected: var(--checkbox-border-selected);
+  --color-checkbox-border-disabled: var(--checkbox-border-disabled);
+  --color-checkbox-border-negative: var(--checkbox-border-negative);
+  --color-checkbox-icon-default: var(--checkbox-icon-default);
+  --color-checkbox-text-default: var(--checkbox-text-default);
+  --color-checkbox-text-disabled: var(--checkbox-text-disabled);
+  --color-checkbox-text-negative: var(--checkbox-text-negative);
+  --radius-checkbox: var(--checkbox-border-radius);
+
+  /* Card */
+  --color-card-surface-primary: var(--card-surface-primary);
+  --color-card-text-title: var(--card-text-title);
+  --color-card-text-subtitle: var(--card-text-subtitle);
+
+  /* Countdown */
+  --color-countdown-surface-default: var(--countdown-surface-default);
+  --color-countdown-text-default: var(--countdown-text-default);
+
+  /* Input */
+  --color-input-surface-default: var(--input-surface-default);
+  --color-input-surface-active: var(--input-surface-active);
+  --color-input-surface-disabled: var(--input-surface-disabled);
+  --color-input-surface-negative: var(--input-surface-negative);
+  --color-input-border-default: var(--input-border-default);
+  --color-input-border-active: var(--input-border-active);
+  --color-input-border-disabled: var(--input-border-disabled);
+  --color-input-border-negative: var(--input-border-negative);
+  --color-input-icon-default: var(--input-icon-default);
+  --color-input-icon-positive: var(--input-icon-positive);
+  --color-input-icon-negative: var(--input-icon-negative);
+  --color-input-icon-warning: var(--input-icon-warning);
+  --color-input-text-label-default: var(--input-text-label-default);
+  --color-input-text-label-disabled: var(--input-text-label-disabled);
+  --color-input-text-field-default: var(--input-text-field-default);
+  --color-input-text-field-disabled: var(--input-text-field-disabled);
+  --color-input-text-field-placeholder: var(--input-text-field-placeholder);
+  --color-input-text-helper-default: var(--input-text-helper-default);
+  --color-input-text-helper-disabled: var(--input-text-helper-disabled);
+  --color-input-text-helper-negative: var(--input-text-helper-negative);
+
+  /* Dropdown */
+  --color-dropdown-surface-default: var(--dropdown-surface-default);
+  --color-dropdown-surface-active: var(--dropdown-surface-active);
+  --color-dropdown-surface-disabled: var(--dropdown-surface-disabled);
+  --color-dropdown-surface-negative: var(--dropdown-surface-negative);
+  --color-dropdown-border-default: var(--dropdown-border-default);
+  --color-dropdown-border-active: var(--dropdown-border-active);
+  --color-dropdown-border-disabled: var(--dropdown-border-disabled);
+  --color-dropdown-border-negative: var(--dropdown-border-negative);
+  --color-dropdown-icon-default: var(--dropdown-icon-default);
+  --color-dropdown-icon-positive: var(--dropdown-icon-positive);
+  --color-dropdown-icon-negative: var(--dropdown-icon-negative);
+  --color-dropdown-icon-warning: var(--dropdown-icon-warning);
+  --color-dropdown-text-label-default: var(--dropdown-text-label-default);
+  --color-dropdown-text-label-disabled: var(--dropdown-text-label-disabled);
+  --color-dropdown-text-input-default: var(--dropdown-text-input-default);
+  --color-dropdown-text-input-disabled: var(--dropdown-text-input-disabled);
+  --color-dropdown-text-input-placeholder: var(
+    --dropdown-text-input-placeholder
+  );
+  --color-dropdown-text-helper-default: var(--dropdown-text-helper-default);
+  --color-dropdown-text-helper-disabled: var(--dropdown-text-helper-disabled);
+  --color-dropdown-text-helper-negative: var(--dropdown-text-helper-negative);
+
+  /* Link */
+  --color-link-default: var(--link-default);
+  --color-link-hover: var(--link-hover);
+  --color-link-disabled: var(--link-disabled);
+  --color-link-visited: var(--link-visited);
+
+  /* Spinner */
+  --color-spinner-surface-primary: var(--spinner-surface-primary);
+  --color-spinner-surface-secondary: var(--spinner-surface-secondary);
+  --color-spinner-text-title: var(--spinner-text-title);
+  --color-spinner-text-subtitle: var(--spinner-text-subtitle);
+
+  /* Snackbar */
+  --color-snackbar-surface-neutral: var(--snackbar-surface-neutral);
+  --color-snackbar-surface-positive: var(--snackbar-surface-positive);
+  --color-snackbar-surface-warning: var(--snackbar-surface-warning);
+  --color-snackbar-surface-negative: var(--snackbar-surface-negative);
+  --color-snackbar-border-neutral: var(--snackbar-border-neutral);
+  --color-snackbar-border-positive: var(--snackbar-border-positive);
+  --color-snackbar-border-warning: var(--snackbar-border-warning);
+  --color-snackbar-border-negative: var(--snackbar-border-negative);
+  --color-snackbar-icon-brand: var(--snackbar-icon-brand);
+  --color-snackbar-icon-positive: var(--snackbar-icon-positive);
+  --color-snackbar-icon-negative: var(--snackbar-icon-negative);
+  --color-snackbar-icon-warning: var(--snackbar-icon-warning);
+  --color-snackbar-text-default: var(--snackbar-text-default);
+  --color-snackbar-text-link: var(--snackbar-text-link);
+  --color-snackbar-text-positive: var(--snackbar-text-positive);
+  --color-snackbar-text-warning: var(--snackbar-text-warning);
+  --color-snackbar-text-negative: var(--snackbar-text-negative);
+
+  /* Toggle Switch */
+  --color-toggle-switch-surface-primary-on: var(
+    --toggle-switch-surface-primary-on
+  );
+  --color-toggle-switch-surface-primary-off: var(
+    --toggle-switch-surface-primary-off
+  );
+  --color-toggle-switch-surface-primary-disabled: var(
+    --toggle-switch-surface-primary-disabled
+  );
+  --color-toggle-switch-surface-secondary-on: var(
+    --toggle-switch-surface-secondary-on
+  );
+  --color-toggle-switch-surface-secondary-off: var(
+    --toggle-switch-surface-secondary-off
+  );
+  --color-toggle-switch-surface-secondary-disabled: var(
+    --toggle-switch-surface-secondary-disabled
+  );
+  --color-toggle-switch-text-default: var(--toggle-switch-text-default);
+  --color-toggle-switch-text-disabled: var(--toggle-switch-text-disabled);
+  --color-toggle-switch-text-negative: var(--toggle-switch-text-negative);
+  --color-toggle-switch-text-link: var(--toggle-switch-text-link);
+}

package/src/styles/themeTypes.ts

@@ -0,0 +1,18 @@
+export type AssetsResponse = {
+  theme: string;
+  'logo.png'?: string;
+  'logo.svg'?: string;
+  'logo.jpg'?: string;
+  'logo.jpeg'?: string;
+  'logo.webp'?: string;
+};
+
+export type ThemeConfig = {
+  buttonBorderRadius?: string;
+  buttonColor?: string;
+  hideFooterBranding?: boolean;
+  main: string;
+  subtitle?: string;
+  logo?: string;
+  css?: string;
+};

package/src/styles/tokens/colors.css

@@ -0,0 +1,190 @@
+:root,
+:host {
+  /* Surface / Neutral */
+
+  --surface-neutral-0: var(--primitive-color-gray-0);
+  --surface-neutral-0-80: var(--primitive-color-gray-0-80);
+  --surface-neutral-50: var(--primitive-color-gray-50);
+  --surface-neutral-100: var(--primitive-color-gray-100);
+  --surface-neutral-200: var(--primitive-color-gray-200);
+  --surface-neutral-300: var(--primitive-color-gray-300);
+  --surface-neutral-500: var(--primitive-color-gray-500);
+  --surface-neutral-700: var(--primitive-color-gray-700);
+  --surface-neutral-800: var(--primitive-color-gray-800);
+  --surface-neutral-900: var(--primitive-color-gray-900);
+  --surface-neutral-900-80: var(--primitive-color-gray-900-80);
+  --surface-neutral-900-static: var(--primitive-color-gray-900);
+  --surface-neutral-1000: var(--primitive-color-gray-1000);
+
+  /* Surface / Brand */
+
+  --surface-brand-50: var(--primitive-color-brand-50);
+  --surface-brand-400: var(--primitive-color-brand-400);
+  --surface-brand-400-static: var(--primitive-color-brand-400);
+  --surface-brand-500: var(--primitive-color-brand-500);
+  --surface-brand-500-static: var(--primitive-color-brand-500);
+  --surface-brand-600: var(--primitive-color-brand-600);
+  --surface-brand-600-static: var(--primitive-color-brand-600);
+
+  /* Surface / Status */
+
+  --surface-status-negative-50: var(--primitive-color-negative-50);
+  --surface-status-negative-600: var(--primitive-color-negative-600);
+
+  --surface-status-warning-50: var(--primitive-color-warning-50);
+  --surface-status-warning-500: var(--primitive-color-warning-500);
+
+  --surface-status-positive-50: var(--primitive-color-positive-50);
+  --surface-status-positive-600: var(--primitive-color-positive-600);
+  --surface-status-positive-600-static: var(--primitive-color-positive-600);
+
+  /* Icon / Neutral */
+
+  --icon-neutral-0: var(--primitive-color-gray-0);
+  --icon-neutral-0-static: var(--primitive-color-gray-0);
+  --icon-neutral-50: var(--primitive-color-gray-50);
+  --icon-neutral-50-static: var(--primitive-color-gray-50);
+  --icon-neutral-300: var(--primitive-color-gray-300);
+  --icon-neutral-500: var(--primitive-color-gray-500);
+  --icon-neutral-500-static: var(--primitive-color-gray-500);
+  --icon-neutral-800: var(--primitive-color-gray-800);
+  --icon-neutral-800-static: var(--primitive-color-gray-800);
+
+  /* Icon / Brand */
+
+  --icon-brand-500: var(--primitive-color-brand-500);
+  --icon-brand-500-static: var(--primitive-color-brand-500);
+
+  /* Icon / Status */
+
+  --icon-status-negative: var(--primitive-color-negative-600);
+  --icon-status-warning: var(--primitive-color-warning-500);
+  --icon-status-positive: var(--primitive-color-positive-600);
+  --icon-status-positive-static: var(--primitive-color-positive-600);
+
+  /* Border / Neutral */
+
+  --border-neutral-100: var(--primitive-color-gray-100);
+  --border-neutral-300: var(--primitive-color-gray-300);
+  --border-neutral-500: var(--primitive-color-gray-500);
+
+  /* Border / Brand */
+
+  --border-brand-500: var(--primitive-color-brand-500);
+  --border-brand-500-static: var(--primitive-color-brand-500);
+  --border-brand-600: var(--primitive-color-brand-600);
+
+  /* Border / Status */
+
+  --border-status-negative: var(--primitive-color-negative-600);
+  --border-status-warning: var(--primitive-color-warning-500);
+  --border-status-positive: var(--primitive-color-positive-600);
+  --border-status-positive-static: var(--primitive-color-positive-600);
+
+  /* Text / Body */
+
+  --text-body-primary: var(--primitive-color-gray-800);
+  --text-body-secondary: var(--primitive-color-gray-500);
+  --text-body-tertiary: var(--primitive-color-gray-300);
+  --text-body-0: var(--primitive-color-gray-0);
+  --text-body-0-static: var(--primitive-color-gray-0);
+
+  /* Text / Link */
+
+  --text-link-default: var(--primitive-color-brand-500);
+  --text-link-hover: var(--primitive-color-brand-300);
+  --text-link-hover-static: var(--primitive-color-brand-300);
+  --text-link-disabled: var(--primitive-color-gray-500);
+  --text-link-disabled-static: var(--primitive-color-gray-500);
+  --text-link-visited: var(--primitive-color-gray-700);
+
+  /* Text / Accent */
+
+  --text-accent-brand: var(--primitive-color-brand-500);
+  --text-accent-brand-static: var(--primitive-color-brand-500);
+  --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);
+  --text-accent-brand-secondary-static: var(
+    --primitive-color-brand-secondary-500
+  );
+
+  /* Text / Status */
+
+  --text-status-negative: var(--primitive-color-negative-600);
+  --text-status-warning: var(--primitive-color-warning-500);
+  --text-status-positive: var(--primitive-color-positive-600);
+  --text-status-positive-static: var(--primitive-color-positive-600);
+}
+
+[data-incode-theme="dark"] {
+  /* Surface / Neutral */
+
+  --surface-neutral-0: var(--primitive-color-gray-1000);
+  --surface-neutral-0-80: var(--primitive-color-gray-900-80);
+  --surface-neutral-50: var(--primitive-color-gray-900);
+  --surface-neutral-100: var(--primitive-color-gray-800);
+  --surface-neutral-200: var(--primitive-color-gray-700);
+  --surface-neutral-300: var(--primitive-color-gray-500);
+  --surface-neutral-500: var(--primitive-color-gray-300);
+  --surface-neutral-700: var(--primitive-color-gray-200);
+  --surface-neutral-800: var(--primitive-color-gray-100);
+  --surface-neutral-900: var(--primitive-color-gray-0);
+  --surface-neutral-900-80: var(--primitive-color-gray-0-80);
+  --surface-neutral-1000: var(--primitive-color-gray-0);
+
+  /* Surface / Brand */
+
+  --surface-brand-50: var(--primitive-color-brand-900);
+
+  /* Surface / Status */
+
+  --surface-status-negative-50: var(--primitive-color-negative-950);
+  --surface-status-negative-600: var(--primitive-color-negative-500);
+
+  --surface-status-warning-50: var(--primitive-color-warning-950);
+  --surface-status-warning-500: var(--primitive-color-warning-400);
+
+  --surface-status-positive-50: var(--primitive-color-positive-800);
+
+  /* Icon / Neutral */
+
+  --icon-neutral-0: var(--primitive-color-gray-800);
+  --icon-neutral-300: var(--primitive-color-gray-500);
+  --icon-neutral-500: var(--primitive-color-gray-300);
+  --icon-neutral-800: var(--primitive-color-gray-100);
+
+  /* Icon / Status */
+
+  --icon-status-negative: var(--primitive-color-negative-500);
+  --icon-status-warning: var(--primitive-color-warning-400);
+
+  /* Border / Neutral */
+
+  --border-neutral-100: var(--primitive-color-gray-700);
+  --border-neutral-300: var(--primitive-color-gray-500);
+  --border-neutral-500: var(--primitive-color-gray-300);
+
+  /* Border / Brand */
+
+  --border-brand-600: var(--primitive-color-brand-400);
+
+  /* Border / Status */
+
+  --border-status-negative: var(--primitive-color-negative-500);
+  --border-status-warning: var(--primitive-color-warning-400);
+
+  /* Text / Body */
+
+  --text-body-primary: var(--primitive-color-gray-50);
+  --text-body-secondary: var(--primitive-color-gray-300);
+  --text-body-tertiary: var(--primitive-color-gray-500);
+
+  /* Text / Link */
+
+  --text-link-default: var(--primitive-color-brand-400);
+  --text-link-visited: var(--primitive-color-gray-300);
+
+  /* Text / Status */
+
+  --text-status-negative: var(--primitive-color-negative-500);
+  --text-status-warning: var(--primitive-color-warning-400);
+}

package/src/styles/tokens/components.css

@@ -0,0 +1,174 @@
+:root,
+:host {
+  /* Button / Primary */
+  --button-primary-surface-default: var(--surface-brand-500-static);
+  --button-primary-surface-hover: var(--surface-brand-400-static);
+  --button-primary-surface-pressed: var(--surface-brand-600-static);
+  --button-primary-surface-disabled: var(--surface-neutral-100);
+
+  --button-primary-text-default: var(--text-body-0-static);
+  --button-primary-text-disabled: var(--text-body-tertiary);
+
+  --button-primary-border-default: var(--surface-brand-500-static);
+  --button-primary-border-hover: var(--surface-brand-400-static);
+  --button-primary-border-pressed: var(--surface-brand-600-static);
+  --button-primary-border-disabled: var(--surface-neutral-100);
+  --button-primary-border-radius: var(--border-radius-medium);
+
+  /* Button / Secondary */
+  --button-secondary-surface-default: var(--surface-neutral-0);
+  --button-secondary-surface-hover: var(--surface-brand-50);
+  --button-secondary-surface-pressed: var(--surface-brand-600-static);
+  --button-secondary-surface-disabled: var(--surface-neutral-200);
+
+  --button-secondary-text-default: var(--text-accent-brand-static);
+  --button-secondary-text-disabled: var(--text-body-secondary);
+
+  --button-secondary-border-default: var(--surface-brand-500-static);
+  --button-secondary-border-hover: var(--surface-brand-400-static);
+  --button-secondary-border-pressed: var(--surface-brand-600-static);
+  --button-secondary-border-disabled: var(--surface-neutral-100);
+  --button-secondary-border-radius: var(--border-radius-medium);
+
+  /* Button / Tertiary */
+  --button-tertiary-text-default: var(--text-accent-brand-static);
+  --button-tertiary-text-disabled: var(--text-body-secondary);
+
+  /* Checkbox */
+  --checkbox-surface-default: var(--surface-neutral-50);
+  --checkbox-surface-selected: var(--surface-brand-500-static);
+  --checkbox-surface-disabled: var(--surface-neutral-200);
+
+  --checkbox-border-default: var(--border-neutral-100);
+  --checkbox-border-selected: var(--border-brand-500-static);
+  --checkbox-border-disabled: var(--border-neutral-300);
+  --checkbox-border-negative: var(--border-status-negative);
+  --checkbox-border-radius: var(--border-radius-small);
+
+  --checkbox-icon-default: var(--surface-neutral-0);
+
+  --checkbox-text-default: var(--text-body-primary);
+  --checkbox-text-disabled: var(--text-body-tertiary);
+  --checkbox-text-negative: var(--text-status-negative);
+
+  /* Card */
+  --card-surface-primary: var(--surface-neutral-800);
+
+  --card-text-title: var(--surface-neutral-100);
+  --card-text-subtitle: var(--text-body-secondary);
+
+  /* Countdown */
+  --countdown-surface-default: var(--surface-neutral-900-static);
+
+  --countdown-text-default: var(--text-body-0-static);
+
+  /* Input */
+  --input-surface-default: var(--surface-neutral-50);
+  --input-surface-active: var(--surface-neutral-50);
+  --input-surface-disabled: var(--surface-neutral-100);
+  --input-surface-negative: var(--surface-neutral-50);
+
+  --input-border-default: var(--border-neutral-100);
+  --input-border-active: var(--border-brand-500-static);
+  --input-border-disabled: var(--border-neutral-100);
+  --input-border-negative: var(--border-status-negative);
+
+  --input-icon-default: var(--surface-neutral-300);
+  --input-icon-positive: var(--surface-status-positive-600-static);
+  --input-icon-negative: var(--border-status-negative);
+  --input-icon-warning: var(--surface-status-warning-500);
+
+  --input-text-label-default: var(--text-body-primary);
+  --input-text-label-disabled: var(--text-body-tertiary);
+
+  --input-text-field-default: var(--text-body-primary);
+  --input-text-field-disabled: var(--text-body-tertiary);
+  --input-text-field-placeholder: var(--text-body-tertiary);
+
+  --input-text-helper-default: var(--text-body-secondary);
+  --input-text-helper-disabled: var(--text-body-tertiary);
+  --input-text-helper-negative: var(--text-status-negative);
+
+  /* Dropdown */
+
+  --dropdown-surface-default: var(--surface-neutral-50);
+  --dropdown-surface-active: var(--surface-neutral-50);
+  --dropdown-surface-disabled: var(--surface-neutral-100);
+  --dropdown-surface-negative: var(--surface-neutral-50);
+
+  --dropdown-border-default: var(--border-neutral-100);
+  --dropdown-border-active: var(--border-brand-500-static);
+  --dropdown-border-disabled: var(--border-neutral-100);
+  --dropdown-border-negative: var(--border-status-negative);
+
+  --dropdown-icon-default: var(--surface-neutral-300);
+  --dropdown-icon-positive: var(--surface-status-positive-600-static);
+  --dropdown-icon-negative: var(--border-status-negative);
+  --dropdown-icon-warning: var(--surface-status-warning-500);
+
+  --dropdown-text-label-default: var(--text-body-primary);
+  --dropdown-text-label-disabled: var(--text-body-tertiary);
+
+  --dropdown-text-input-default: var(--text-body-primary);
+  --dropdown-text-input-disabled: var(--text-body-tertiary);
+  --dropdown-text-input-placeholder: var(--text-body-tertiary);
+
+  --dropdown-text-helper-default: var(--text-body-secondary);
+  --dropdown-text-helper-disabled: var(--text-body-tertiary);
+  --dropdown-text-helper-negative: var(--text-status-negative);
+
+  /* Link */
+
+  --link-default: var(--text-accent-brand-static);
+  --link-hover: var(--text-body-primary);
+  --link-disabled: var(--text-body-secondary);
+  --link-visited: var(--text-accent-brand-static);
+
+  /* Spinner */
+
+  --spinner-surface-primary: var(--surface-brand-500-static);
+  --spinner-surface-secondary: var(--surface-brand-50);
+  --spinner-surface-overlay: var(--surface-neutral-0);
+  --spinner-surface-overlay-opacity: 1;
+
+  --spinner-text-title: var(--text-body-primary);
+  --spinner-text-subtitle: var(--text-body-secondary);
+
+  /* Snackbar */
+
+  --snackbar-surface-neutral: var(--surface-brand-50);
+  --snackbar-surface-positive: var(--surface-status-positive-50);
+  --snackbar-surface-warning: var(--surface-status-warning-50);
+  --snackbar-surface-negative: var(--surface-status-negative-50);
+
+  --snackbar-border-neutral: var(--border-brand-500-static);
+  --snackbar-border-positive: var(--border-status-positive-static);
+  --snackbar-border-warning: var(--border-status-warning);
+  --snackbar-border-negative: var(--border-status-negative);
+
+  --snackbar-icon-brand: var(--icon-brand-500-static);
+  --snackbar-icon-positive: var(--icon-status-positive-static);
+  --snackbar-icon-negative: var(--icon-status-negative);
+  --snackbar-icon-warning: var(--icon-status-warning);
+
+  --snackbar-text-default: var(--text-body-primary);
+  --snackbar-text-link: var(--link-default);
+  --snackbar-text-positive: var(--text-status-positive-static);
+  --snackbar-text-warning: var(--text-status-warning);
+  --snackbar-text-negative: var(--text-status-negative);
+
+  /* Toggle-switch */
+
+  --toggle-switch-surface-primary-on: var(--surface-brand-500-static);
+  --toggle-switch-surface-primary-off: var(--surface-neutral-200);
+  --toggle-switch-surface-primary-disabled: var(--surface-neutral-200);
+
+  --toggle-switch-surface-secondary-on: var(--surface-neutral-100);
+  --toggle-switch-surface-secondary-off: var(--surface-neutral-100);
+  --toggle-switch-surface-secondary-disabled: var(--surface-neutral-200);
+
+  --toggle-switch-text-default: var(--text-body-primary);
+  --toggle-switch-text-disabled: var(--text-body-tertiary);
+  --toggle-switch-text-negative: var(--text-status-negative);
+  --toggle-switch-text-link: var(--text-accent-brand-static);
+}

package/src/styles/tokens/index.css

@@ -0,0 +1,4 @@
+@import "./primitives.css";
+@import "./semantic.css";
+@import "./colors.css";
+@import "./components.css";