chore: add high contrast mode tokens

Author: aaryan610

packages/tailwind-config/variables.css

@@ -14,6 +14,8 @@
 @import "@fontsource/material-symbols-rounded/400.css";
 
 @custom-variant dark (&:where([data-theme*="dark"], [data-theme*="dark"] *));
+@custom-variant dark-high-contrast (&:where([data-theme="dark-contrast"], [data-theme="dark-contrast"] *));
+@custom-variant light-high-contrast (&:where([data-theme="light-contrast"], [data-theme="light-contrast"] *));
 
 @theme {
   --color-*: initial;
@@ -495,8 +497,8 @@
 @layer theme {
   :root,
   :host {
+    /* ---------- Dark mode color tokens ---------- */
     @variant dark {
-      /* ---------- Dark mode color tokens ---------- */
       /* Neutral colors */
       --color-neutral-black: oklch(0.1689 0.0021 286.18);
       --color-neutral-100: oklch(0.2039 0.0025 247.95);
@@ -566,7 +568,7 @@
       --color-red-1000: oklch(0.9365 0.032 17.74);
       --color-red-1100: oklch(0.9705 0.0129 17.38);
 
-      /* -------------------- Dark mode custom(derived) colors -------------------- */
+      /* -------------------- Dark mode derived colors -------------------- */
       /* Background colors */
       --background-color-canvas: var(--color-neutral-black);
       --background-color-surface-1: var(--color-neutral-100);
@@ -715,6 +717,44 @@
       --illustration-stroke-secondary: var(--color-neutral-800);
       --illustration-stroke-tertiary: var(--color-neutral-1000);
     }
+
+    /* -------------------- Dark high contrast mode derived colors -------------------- */
+    @variant dark-high-contrast {
+      /* Border colors */
+      --border-color-subtle: var(--color-neutral-1200);
+      --border-color-subtle-1: var(--color-neutral-1100);
+      --border-color-strong: var(--color-neutral-1000);
+      --border-color-strong-1: var(--color-neutral-900);
+      --border-color-inverse: var(--color-neutral-white);
+      --border-color-disabled: var(--color-neutral-700);
+      --border-color-accent-strong: var(--color-brand-default);
+      --border-color-accent-subtle: var(--color-brand-300);
+      --border-color-success-strong: var(--color-green-400);
+      --border-color-success-subtle: var(--color-green-200);
+      --border-color-warning-strong: var(--color-amber-400);
+      --border-color-warning-subtle: var(--color-amber-200);
+      --border-color-danger-strong: var(--color-red-400);
+      --border-color-danger-subtle: var(--color-red-200);
+    }
+
+    /* -------------------- Light high contrast mode derived colors -------------------- */
+    @variant light-high-contrast {
+      /* Border colors */
+      --border-color-subtle: var(--color-neutral-1200);
+      --border-color-subtle-1: var(--color-neutral-1100);
+      --border-color-strong: var(--color-neutral-1000);
+      --border-color-strong-1: var(--color-neutral-900);
+      --border-color-inverse: var(--color-neutral-black);
+      --border-color-disabled: var(--color-neutral-700);
+      --border-color-accent-strong: var(--color-brand-default);
+      --border-color-accent-subtle: var(--color-brand-300);
+      --border-color-success-strong: var(--color-green-700);
+      --border-color-success-subtle: var(--color-green-600);
+      --border-color-warning-strong: var(--color-amber-700);
+      --border-color-warning-subtle: var(--color-amber-400);
+      --border-color-danger-strong: var(--color-red-700);
+      --border-color-danger-subtle: var(--color-red-400);
+    }
   }
 }