mainstack-design-system 0.7.45 → 1.0.1

package/dist/assets/theme/lightDarkModeTheme.css

@@ -0,0 +1,590 @@
+@theme {
+  /* Defaults, also Applies when: [data-theme-mode="light"] */
+
+  /* 
+  * In comparison to the figma design system, "-content" prefix was intentionally omitted here in the naming convention.
+  * So instead of --color-content-primary- we have --color-primary.
+  */
+  --color-primary: var(--color-neutral-400);
+  --color-secondary: var(--color-neutral-300);
+  --color-tertiary: var(--color-neutral-275);
+  --color-accent: var(--color-purple-300);
+
+  --color-accent-hover: var(--color-purple-375);
+  --color-disabled: var(--color-neutral-250);
+  --color-success: var(--color-green-400);
+  --color-success-hover: var(--color-green-450);
+  --color-error: var(--color-red-375);
+
+  --color-error-hover: var(--color-red-400);
+  --color-info: var(--color-cobalt-325);
+  --color-info-hover: var(--color-cobalt-375);
+  --color-warning: var(--color-lemon-425);
+  --color-warning-hover: var(--color-lemon-475);
+
+  --color-on-primary: var(--color-neutral-50);
+  --color-on-primary-disabled: var(--color-neutral-250);
+  --color-on-secondary: var(--color-neutral-400);
+  --color-on-secondary-disabled: var(--color-neutral-250);
+  --color-on-ghost: var(--color-neutral-400);
+
+  --color-on-accent: var(--color-purple-50);
+  --color-on-success: var(--color-green-50);
+  --color-on-success-disabled: var(--color-muted-green-325);
+  --color-on-success-light: var(--color-green-425);
+  --color-on-success-light-disabled: var(--color-muted-green-325);
+
+  --color-on-warning: var(--color-lemon-125);
+  --color-on-warning-disabled: var(--color-muted-lemon-325);
+  --color-on-warning-light: var(--color-lemon-425);
+  --color-on-warning-light-disabled: var(--color-muted-lemon-325);
+
+  --color-on-error: var(--color-red-75);
+  --color-on-error-disabled: var(--color-muted-red-325);
+  --color-on-error-light: var(--color-red-425);
+  --color-on-error-light-disabled: var(--color-muted-red-325);
+
+  --color-on-info: var(--color-cobalt-75);
+  --color-on-info-disabled: var(--color-muted-cobalt-325);
+  --color-on-info-light: var(--color-cobalt-425);
+  --color-on-info-light-disabled: var(--color-muted-cobalt-325);
+
+  --color-interactive-primary: var(--color-neutral-400);
+  --color-interactive-primary-hover: var(--color-neutral-450);
+  --color-interactive-primary-pressed: var(--color-neutral-500);
+  --color-interactive-primary-disabled: var(--color-neutral-150);
+
+  --color-interactive-secondary: var(--color-neutral-150);
+  --color-interactive-secondary-hover: var(--color-neutral-175);
+  --color-interactive-secondary-pressed: var(--color-neutral-200);
+  --color-interactive-secondary-disabled: var(--color-neutral-150);
+
+  --color-interactive-ghost: var(--color-neutral-50);
+  --color-interactive-ghost-hover: var(--color-neutral-150);
+  --color-interactive-ghost-pressed: var(--color-neutral-175);
+
+  --color-interactive-accent: var(--color-purple-300);
+  --color-interactive-accent-hover: var(--color-purple-350);
+  --color-interactive-accent-pressed: var(--color-purple-400);
+  --color-interactive-accent-disabled: var(--color-purple-125);
+
+  --color-interactive-success: var(--color-green-400);
+  --color-interactive-success-hover: var(--color-green-450);
+  --color-interactive-success-pressed: var(--color-green-475);
+  --color-interactive-success-disabled: var(--color-muted-green-225);
+
+  --color-interactive-success-light: var(--color-green-75);
+  --color-interactive-success-light-hover: var(--color-green-100);
+  --color-interactive-success-light-pressed: var(--color-green-125);
+  --color-interactive-success-light-disabled: var(--color-muted-green-225);
+
+  --color-interactive-error: var(--color-red-350);
+  --color-interactive-error-hover: var(--color-red-375);
+  --color-interactive-error-pressed: var(--color-red-400);
+  --color-interactive-error-disabled: var(--color-muted-red-225);
+
+  --color-interactive-error-light: var(--color-red-75);
+  --color-interactive-error-light-hover: var(--color-red-100);
+  --color-interactive-error-light-pressed: var(--color-red-125);
+  --color-interactive-error-light-disabled: var(--color-muted-red-225);
+
+  --color-interactive-warning: var(--color-lemon-425);
+  --color-interactive-warning-hover: var(--color-lemon-450);
+  --color-interactive-warning-pressed: var(--color-lemon-475);
+  --color-interactive-warning-disabled: var(--color-muted-lemon-225);
+
+  --color-interactive-warning-light: var(--color-lemon-75);
+  --color-interactive-warning-light-hover: var(--color-lemon-100);
+  --color-interactive-warning-light-pressed: var(--color-lemon-125);
+  --color-interactive-warning-light-disabled: var(--color-muted-lemon-200);
+
+  --color-interactive-info: var(--color-cobalt-375);
+  --color-interactive-info-hover: var(--color-cobalt-425);
+  --color-interactive-info-pressed: var(--color-cobalt-450);
+  --color-interactive-info-disabled: var(--color-muted-cobalt-225);
+
+  --color-interactive-info-light: var(--color-cobalt-75);
+  --color-interactive-info-light-hover: var(--color-cobalt-100);
+  --color-interactive-info-light-pressed: var(--color-cobalt-125);
+  --color-interactive-info-light-disabled: var(--color-muted-cobalt-225);
+
+  --color-surface-neutral-l1: var(--color-neutral-50);
+  --color-surface-neutral-l2: var(--color-neutral-75);
+  --color-surface-neutral-l3: var(--color-neutral-100);
+  --color-surface-neutral-l4: var(--color-neutral-125);
+  --color-surface-neutral-l5: var(--color-neutral-150);
+
+  --color-surface-neutral-invert-l1: var(--color-neutral-500);
+  --color-surface-neutral-invert-l2: var(--color-neutral-475);
+  --color-surface-neutral-invert-l3: var(--color-neutral-450);
+  --color-surface-neutral-invert-l4: var(--color-neutral-425);
+  --color-surface-neutral-invert-l5: var(--color-neutral-400);
+
+  --color-surface-accent-l1: var(--color-purple-50);
+  --color-surface-accent-l2: var(--color-purple-75);
+  --color-surface-accent-l3: var(--color-purple-100);
+  --color-surface-accent-l4: var(--color-purple-125);
+  --color-surface-accent-l5: var(--color-purple-150);
+
+  --color-surface-accent-invert-l1: var(--color-purple-500);
+  --color-surface-accent-invert-l2: var(--color-purple-475);
+  --color-surface-accent-invert-l3: var(--color-purple-450);
+  --color-surface-accent-invert-l4: var(--color-purple-425);
+  --color-surface-accent-invert-l5: var(--color-purple-400);
+
+  --color-surface-success-l1: var(--color-green-50);
+  --color-surface-success-l2: var(--color-green-75);
+  --color-surface-success-l3: var(--color-green-100);
+  --color-surface-success-l4: var(--color-green-125);
+  --color-surface-success-l5: var(--color-green-150);
+
+  --color-surface-success-invert-l1: var(--color-green-500);
+  --color-surface-success-invert-l2: var(--color-green-475);
+  --color-surface-success-invert-l3: var(--color-green-450);
+  --color-surface-success-invert-l4: var(--color-green-425);
+  --color-surface-success-invert-l5: var(--color-green-400);
+
+  --color-surface-error-l1: var(--color-red-50);
+  --color-surface-error-l2: var(--color-red-75);
+  --color-surface-error-l3: var(--color-red-100);
+  --color-surface-error-l4: var(--color-red-125);
+  --color-surface-error-l5: var(--color-red-150);
+
+  --color-surface-error-invert-l1: var(--color-red-500);
+  --color-surface-error-invert-l2: var(--color-red-475);
+  --color-surface-error-invert-l3: var(--color-red-450);
+  --color-surface-error-invert-l4: var(--color-red-425);
+  --color-surface-error-invert-l5: var(--color-red-400);
+
+  --color-surface-info-l1: var(--color-cobalt-50);
+  --color-surface-info-l2: var(--color-cobalt-75);
+  --color-surface-info-l3: var(--color-cobalt-100);
+  --color-surface-info-l4: var(--color-cobalt-125);
+  --color-surface-info-l5: var(--color-cobalt-125);
+
+  --color-surface-info-invert-l1: var(--color-cobalt-500);
+  --color-surface-info-invert-l2: var(--color-cobalt-475);
+  --color-surface-info-invert-l3: var(--color-cobalt-450);
+  --color-surface-info-invert-l4: var(--color-cobalt-425);
+  --color-surface-info-invert-l5: var(--color-cobalt-400);
+
+  --color-surface-warning-l1: var(--color-lemon-50);
+  --color-surface-warning-l2: var(--color-lemon-75);
+  --color-surface-warning-l3: var(--color-lemon-100);
+  --color-surface-warning-l4: var(--color-lemon-125);
+  --color-surface-warning-l5: var(--color-lemon-150);
+
+  --color-surface-warning-invert-l1: var(--color-lemon-500);
+  --color-surface-warning-invert-l2: var(--color-lemon-475);
+  --color-surface-warning-invert-l3: var(--color-lemon-450);
+  --color-surface-warning-invert-l4: var(--color-lemon-425);
+  --color-surface-warning-invert-l5: var(--color-lemon-400);
+
+  --color-border-interactive-success: var(--color-green-125);
+  --color-border-interactive-neutral: var(--color-neutral-150);
+  --color-border-interactive-neutral-hover: var(--color-neutral-175);
+  --color-border-interactive-neutral-pressed: var(--color-neutral-375);
+  --color-border-interactive-neutral-disabled: var(--color-neutral-150);
+  --color-border-interactive-neutral-active: var(--color-neutral-400);
+  --color-border-interactive-neutral-active-hover: var(--color-neutral-450);
+  --color-border-interactive-neutral-active-pressed: var(--color-neutral-500);
+  --color-border-interactive-neutral-active-disabled: var(--color-neutral-375);
+
+  --color-border-interactive-neutral-inverse: var(--color-neutral-450);
+  --color-border-interactive-neutral-inverse-hover: var(--color-neutral-275);
+  --color-border-interactive-neutral-inverse-pressed: var(--color-neutral-200);
+  --color-border-interactive-neutral-inverse-disabled: var(--color-neutral-400);
+
+  --color-border-interactive-success: var(--color-green-125);
+  --color-border-interactive-success-hover: var(--color-green-250);
+  --color-border-interactive-success-pressed: var(--color-green-375);
+  --color-border-interactive-success-disabled: var(--color-muted-green-75);
+
+  --color-border-interactive-error: var(--color-red-125);
+  --color-border-interactive-error-hover: var(--color-red-250);
+  --color-border-interactive-error-pressed: var(--color-red-375);
+  --color-border-interactive-error-disabled: var(--color-muted-red-75);
+
+  --color-border-interactive-warning: var(--color-lemon-125);
+  --color-border-interactive-warning-hover: var(--color-lemon-250);
+  --color-border-interactive-warning-pressed: var(--color-lemon-375);
+  --color-border-interactive-warning-disabled: var(--color-muted-lemon-75);
+
+  --color-border-interactive-info: var(--color-cobalt-125);
+  --color-border-interactive-info-hover: var(--color-cobalt-250);
+  --color-border-interactive-info-pressed: var(--color-cobalt-375);
+  --color-border-interactive-info-disabled: var(--color-cobalt-75);
+
+  --color-border-surface-neutral-l1: var(--color-neutral-175);
+  --color-border-surface-neutral-l2: var(--color-neutral-200);
+
+  --color-border-surface-neutral-inverse-l1: var(--color-neutral-400);
+  --color-border-surface-neutral-inverse-l2: var(--color-neutral-500);
+
+  --color-border-surface-success-l1: var(--color-green-275);
+  --color-border-surface-success-l2: var(--color-green-325);
+
+  --color-border-surface-error-l1: var(--color-red-225);
+  --color-border-surface-error-l2: var(--color-red-275);
+
+  --color-border-surface-warning-l1: var(--color-lemon-275);
+  --color-border-surface-warning-l2: var(--color-lemon-325);
+
+  --color-border-surface-info-subtle: var(--color-cobalt-275);
+  --color-border-surface-info-strong: var(--color-cobalt-325);
+
+  --color-border-surface-spread-neutral: var(--color-neutral-225);
+  --color-border-surface-spread-success: var(--color-green-175);
+  --color-border-surface-spread-error: var(--color-red-175);
+  --color-border-surface-spread-warning: var(--color-lemon-175);
+  --color-border-surface-spread-info: var(--color-cobalt-175);
+  --color-border-surface-spread-focus: var(--color-cobalt-200);
+
+  /*  Base values, every shadow and elevation will be computed from this colors */
+  --color-base-shadow-elevation-lt: #363b45;
+  --color-base-shadow-elevation-dt: #040506;
+
+  --color-elevation-shadow-2: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 2%,
+    transparent
+  );
+  --color-elevation-shadow-4: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 4%,
+    transparent
+  );
+  --color-elevation-shadow-6: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 6%,
+    transparent
+  );
+  --color-elevation-shadow-8: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 8%,
+    transparent
+  );
+  --color-elevation-shadow-10: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 10%,
+    transparent
+  );
+  --color-elevation-shadow-12: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 12%,
+    transparent
+  );
+  --color-elevation-shadow-16: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 16%,
+    transparent
+  );
+  --color-elevation-shadow-20: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 20%,
+    transparent
+  );
+  --color-elevation-shadow-24: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 24%,
+    transparent
+  );
+  --color-elevation-shadow-28: color-mix(
+    in srgb,
+    var(--color-base-shadow-elevation-lt) 28%,
+    transparent
+  );
+}
+
+@layer theme {
+  /* Dark Mode Overides */
+  [data-theme-mode="dark"] {
+    --color-primary: var(--color-neutral-100);
+    --color-secondary: var(--color-neutral-250);
+    --color-tertiary: var(--color-neutral-275);
+    --color-accent: var(--color-neutral-275);
+    --color-accent-hover: var(--color-neutral-275);
+    --color-disabled: var(--color-neutral-325);
+    --color-success: var(--color-muted-green-175);
+    --color-success-hover: var(--color-muted-green-175);
+    --color-error: var(--color-muted-red-175);
+
+    --color-error-hover: var(--color-muted-red-175);
+    --color-info: var(--color-muted-cobalt-150);
+    --color-info-hover: var(--color-muted-cobalt-150);
+    --color-warning: var(--color-lemon-175);
+    --color-warning-hover: var(--color-lemon-175);
+    --color-on-primary: var(--color-neutral-400);
+    --color-on-primary-disabled: var(--color-neutral-325);
+
+    --color-on-secondary: var(--color-neutral-50);
+    --color-on-secondary-disabled: var(--color-neutral-325);
+    --color-on-ghost: var(--color-neutral-50);
+    --color-on-accent: var(--color-neutral-50);
+    --color-on-success: var(--color-muted-green-450);
+    --color-on-success-disabled: var(--color-muted-green-325);
+    --color-on-success-light: var(--color-muted-green-50);
+    --color-on-success-light-disabled: var(--color-muted-green-325);
+    --color-on-warning: var(--color-muted-lemon-450);
+    --color-on-warning-disabled: var(--color-muted-lemon-325);
+
+    --color-on-warning-light: var(--color-muted-lemon-50);
+    --color-on-warning-light-disabled: var(--color-muted-lemon-325);
+    --color-on-error: var(--color-muted-red-450);
+    --color-on-error-disabled: var(--color-muted-red-325);
+    --color-on-error-light: var(--color-muted-red-75);
+    --color-on-error-light-disabled: var(--color-muted-red-325);
+
+    --color-on-info: var(--color-muted-cobalt-450);
+    --color-on-info-disabled: var(--color-muted-cobalt-325);
+    --color-on-info-light: var(--color-muted-cobalt-50);
+    --color-on-info-light-disabled: var(--color-muted-cobalt-325);
+
+    --color-interactive-primary: var(--color-neutral-150);
+    --color-interactive-primary-hover: var(--color-neutral-100);
+    --color-interactive-primary-pressed: var(--color-neutral-50);
+    --color-interactive-primary-disabled: var(--color-neutral-400);
+
+    --color-interactive-secondary: var(--color-neutral-375);
+    --color-interactive-secondary-hover: var(--color-neutral-350);
+    --color-interactive-secondary-pressed: var(--color-neutral-325);
+    --color-interactive-secondary-disabled: var(--color-neutral-400);
+
+    --color-interactive-ghost: var(--color-neutral-50);
+    --color-interactive-ghost-hover: var(--color-neutral-400);
+    --color-interactive-ghost-pressed: var(--color-neutral-375);
+
+    --color-interactive-accent: var(--color-neutral-150);
+    --color-interactive-accent-hover: var(--color-neutral-100);
+    --color-interactive-accent-pressed: var(--color-neutral-50);
+    --color-interactive-accent-disabled: var(--color-neutral-400);
+
+    --color-interactive-success: var(--color-muted-green-150);
+    --color-interactive-success-hover: var(--color-muted-green-175);
+    --color-interactive-success-pressed: var(--color-muted-green-200);
+    --color-interactive-success-disabled: var(--color-muted-green-225);
+
+    --color-interactive-success-light: var(--color-muted-green-425);
+    --color-interactive-success-light-hover: var(--color-muted-green-450);
+    --color-interactive-success-light-pressed: var(--color-muted-green-475);
+    --color-interactive-success-light-disabled: var(--color-muted-green-225);
+
+    --color-interactive-error: var(--color-muted-red-150);
+    --color-interactive-error-hover: var(--color-muted-red-175);
+    --color-interactive-error-pressed: var(--color-muted-red-200);
+    --color-interactive-error-disabled: var(--color-muted-red-225);
+
+    --color-interactive-error-light: var(--color-muted-red-425);
+    --color-interactive-error-light-hover: var(--color-muted-red-450);
+    --color-interactive-error-light-pressed: var(--color-muted-red-475);
+    --color-interactive-error-light-disabled: var(--color-muted-red-225);
+
+    --color-interactive-warning: var(--color-muted-lemon-150);
+    --color-interactive-warning-hover: var(--color-muted-lemon-175);
+    --color-interactive-warning-pressed: var(--color-muted-lemon-200);
+    --color-interactive-warning-disabled: var(--color-muted-lemon-225);
+
+    --color-interactive-warning-light: var(--color-muted-lemon-425);
+    --color-interactive-warning-light-hover: var(--color-muted-lemon-450);
+    --color-interactive-warning-light-pressed: var(--color-muted-lemon-475);
+    --color-interactive-warning-light-disabled: var(--color-muted-lemon-225);
+
+    --color-interactive-info: var(--color-muted-cobalt-150);
+    --color-interactive-info-hover: var(--color-muted-cobalt-175);
+    --color-interactive-info-pressed: var(--color-muted-cobalt-200);
+    --color-interactive-info-disabled: var(--color-muted-cobalt-225);
+
+    --color-interactive-info-light: var(--color-muted-cobalt-425);
+    --color-interactive-info-light-hover: var(--color-muted-cobalt-450);
+    --color-interactive-info-light-pressed: var(--color-muted-cobalt-475);
+    --color-interactive-info-light-disabled: var(--color-muted-cobalt-225);
+
+    --color-surface-neutral-l1: var(--color-neutral-500);
+    --color-surface-neutral-l2: var(--color-neutral-475);
+    --color-surface-neutral-l3: var(--color-neutral-450);
+    --color-surface-neutral-l4: var(--color-neutral-425);
+    --color-surface-neutral-l5: var(--color-neutral-400);
+
+    --color-surface-neutral-invert-l1: var(--color-neutral-50);
+    --color-surface-neutral-invert-l2: var(--color-neutral-75);
+    --color-surface-neutral-invert-l3: var(--color-neutral-100);
+    --color-surface-neutral-invert-l4: var(--color-neutral-125);
+    --color-surface-neutral-invert-l5: var(--color-neutral-150);
+
+    --color-surface-accent-l1: var(--color-neutral-500);
+    --color-surface-accent-l2: var(--color-neutral-475);
+    --color-surface-accent-l3: var(--color-neutral-450);
+    --color-surface-accent-l4: var(--color-neutral-425);
+    --color-surface-accent-l5: var(--color-neutral-400);
+
+    --color-surface-accent-invert-l1: var(--color-neutral-500);
+    --color-surface-accent-invert-l2: var(--color-neutral-475);
+    --color-surface-accent-invert-l3: var(--color-neutral-450);
+    --color-surface-accent-invert-l4: var(--color-neutral-425);
+    --color-surface-accent-invert-l5: var(--color-neutral-400);
+
+    --color-surface-success-l1: var(--color-muted-green-500);
+    --color-surface-success-l2: var(--color-muted-green-475);
+    --color-surface-success-l3: var(--color-muted-green-450);
+    --color-surface-success-l4: var(--color-muted-green-425);
+    --color-surface-success-l5: var(--color-muted-green-400);
+
+    --color-surface-success-invert-l1: var(--color-muted-green-50);
+    --color-surface-success-invert-l2: var(--color-muted-green-75);
+    --color-surface-success-invert-l3: var(--color-muted-green-100);
+    --color-surface-success-invert-l4: var(--color-muted-green-125);
+    --color-surface-success-invert-l5: var(--color-muted-green-150);
+
+    --color-surface-error-l1: var(--color-muted-red-500);
+    --color-surface-error-l2: var(--color-muted-red-475);
+    --color-surface-error-l3: var(--color-muted-red-450);
+    --color-surface-error-l4: var(--color-muted-red-425);
+    --color-surface-error-l5: var(--color-muted-red-400);
+
+    --color-surface-error-invert-l1: var(--color-muted-red-50);
+    --color-surface-error-invert-l2: var(--color-muted-red-75);
+    --color-surface-error-invert-l3: var(--color-muted-red-100);
+    --color-surface-error-invert-l4: var(--color-muted-red-125);
+    --color-surface-error-invert-l5: var(--color-muted-red-150);
+
+    --color-surface-info-l1: var(--color-muted-cobalt-500);
+    --color-surface-info-l2: var(--color-muted-cobalt-475);
+    --color-surface-info-l3: var(--color-muted-cobalt-450);
+    --color-surface-info-l4: var(--color-muted-cobalt-425);
+    --color-surface-info-l5: var(--color-muted-cobalt-400);
+
+    --color-surface-info-invert-l1: var(--color-muted-cobalt-50);
+    --color-surface-info-invert-l2: var(--color-muted-cobalt-75);
+    --color-surface-info-invert-l3: var(--color-muted-cobalt-100);
+    --color-surface-info-invert-l4: var(--color-muted-cobalt-125);
+    --color-surface-info-invert-l5: var(--color-muted-cobalt-150);
+
+    --color-surface-warning-l1: var(--color-muted-lemon-500);
+    --color-surface-warning-l2: var(--color-muted-lemon-475);
+    --color-surface-warning-l3: var(--color-muted-lemon-450);
+    --color-surface-warning-l4: var(--color-muted-lemon-425);
+    --color-surface-warning-l5: var(--color-muted-lemon-400);
+
+    --color-surface-warning-invert-l1: var(--color-muted-lemon-50);
+    --color-surface-warning-invert-l2: var(--color-muted-lemon-75);
+    --color-surface-warning-invert-l3: var(--color-muted-lemon-100);
+    --color-surface-warning-invert-l4: var(--color-muted-lemon-125);
+    --color-surface-warning-invert-l5: var(--color-muted-lemon-150);
+
+    --color-border-interactive-neutral: var(--color-neutral-375);
+    --color-border-interactive-neutral-hover: var(--color-neutral-275);
+    --color-border-interactive-neutral-pressed: var(--color-neutral-200);
+    --color-border-interactive-neutral-disabled: var(--color-neutral-400);
+    --color-border-interactive-neutral-active: var(--color-neutral-150);
+    --color-border-interactive-neutral-active-hover: var(--color-neutral-100);
+    --color-border-interactive-neutral-active-pressed: var(--color-neutral-50);
+    --color-border-interactive-neutral-active-disabled: var(
+      --color-neutral-325
+    );
+
+    --color-border-interactive-neutral-inverse: var(--color-neutral-175);
+    --color-border-interactive-neutral-inverse-hover: var(--color-neutral-350);
+    --color-border-interactive-neutral-inverse-pressed: var(
+      --color-neutral-375
+    );
+    --color-border-interactive-neutral-inverse-disabled: var(
+      --color-neutral-150
+    );
+
+    --color-border-interactive-success: var(--color-muted-green-250);
+    --color-border-interactive-success-hover: var(--color-muted-green-275);
+    --color-border-interactive-success-pressed: var(--color-muted-green-275);
+    --color-border-interactive-success-disabled: var(--color-muted-green-500);
+
+    --color-border-interactive-error: var(--color-muted-red-200);
+    --color-border-interactive-error-hover: var(--color-muted-red-350);
+    --color-border-interactive-error-pressed: var(--color-muted-red-350);
+    --color-border-interactive-error-disabled: var(--color-muted-red-500);
+
+    --color-border-interactive-warning: var(--color-muted-lemon-325);
+    --color-border-interactive-warning-hover: var(--color-muted-lemon-350);
+    --color-border-interactive-warning-pressed: var(--color-muted-lemon-350);
+    --color-border-interactive-warning-disabled: var(--color-muted-lemon-500);
+
+    --color-border-interactive-info: var(--color-muted-cobalt-250);
+    --color-border-interactive-info-hover: var(--color-muted-cobalt-275);
+    --color-border-interactive-info-pressed: var(--color-muted-cobalt-275);
+    --color-border-interactive-info-disabled: var(--color-muted-cobalt-500);
+
+    --color-border-surface-neutral-l1: var(--color-neutral-350);
+    --color-border-surface-neutral-l2: var(--color-neutral-325);
+
+    --color-border-surface-neutral-inverse-l1: var(--color-neutral-150);
+    --color-border-surface-neutral-inverse-l2: var(--color-neutral-200);
+
+    --color-border-surface-success-l1: var(--color-muted-green-200);
+    --color-border-surface-success-l2: var(--color-muted-green-250);
+
+    --color-border-surface-error-l1: var(--color-muted-red-200);
+    --color-border-surface-error-l2: var(--color-muted-red-325);
+
+    --color-border-surface-warning-l1: var(--color-muted-lemon-275);
+    --color-border-surface-warning-l2: var(--color-muted-lemon-325);
+
+    --color-border-surface-info-subtle: var(--color-muted-cobalt-200);
+    --color-border-surface-info-strong: var(--color-muted-cobalt-250);
+
+    --color-border-surface-spread-neutral: var(--color-neutral-325);
+    --color-border-surface-spread-success: var(--color-muted-green-450);
+    --color-border-surface-spread-error: var(--color-red-450);
+    --color-border-surface-spread-warning: var(--color-muted-lemon-450);
+    --color-border-surface-spread-info: var(--color-muted-cobalt-450);
+    --color-border-surface-spread-focus: var(--color-muted-cobalt-200);
+
+    --color-elevation-shadow-2: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 2%,
+      transparent
+    );
+    --color-elevation-shadow-4: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 4%,
+      transparent
+    );
+    --color-elevation-shadow-6: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 6%,
+      transparent
+    );
+    --color-elevation-shadow-8: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 8%,
+      transparent
+    );
+    --color-elevation-shadow-10: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 10%,
+      transparent
+    );
+    --color-elevation-shadow-12: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 12%,
+      transparent
+    );
+    --color-elevation-shadow-16: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 16%,
+      transparent
+    );
+    --color-elevation-shadow-20: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 20%,
+      transparent
+    );
+    --color-elevation-shadow-24: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 24%,
+      transparent
+    );
+    --color-elevation-shadow-28: color-mix(
+      in srgb,
+      var(--color-base-shadow-elevation-dt) 28%,
+      transparent
+    );
+  }
+}

package/dist/assets/theme/themeKit.css

@@ -0,0 +1,3 @@
+@import "./tokenTheme.css";
+@import "./lightDarkModeTheme.css";
+@import "./uiTheme.css";