feat: stroke and colors

src/base.css

@@ -256,40 +256,22 @@
 
 
     /* Link utilities */
-  --underline-link-primary: var(
-    --color-brand-blue-600
-  ); /* Temporary light mode value */
-  --underline-link-secondary: var(
-    --color-neutral-900
-  ); /* Temporary light mode value */
-  --underline-link-visited: var(
-    --color-brand-blue-800
-  ); /* Temporary light mode value */
+  --underline-link-primary: var(--color-brand-blue-600);
+  --underline-link-secondary: var(--color-base-black);
+  --underline-link-visited: var(--color-feedback-violet-600);
 
 
   /* ============================================
    * BORDER TOKENS
    * ============================================ */
 
   /* Border utilities - neutral states */
-  --border-neutral-active: var(
-    --color-neutral-200
-  ); /* Temporary light mode value */
-  --border-neutral-hover: var(
-    --color-neutral-300
-  ); /* Temporary light mode value */
-  --border-neutral-default: var(
-    --color-neutral-400
-  ); /* Temporary light mode value */
-  --border-neutral-disabled: var(
-    --color-neutral-400
-  ); /* Temporary light mode value */
-  --border-neutral-softest: var(
-    --color-neutral-500
-  ); /* Temporary light mode value */
-  --border-neutral-inset: var(
-    --color-neutral-900
-  ); /* Temporary light mode value */
+  --border-neutral-active: var(--color-neutral-600);
+  --border-neutral-hover: var(--color-neutral-500);
+  --border-neutral-default: var(--color-neutral-400);
+  --border-neutral-disabled: hsl(from var(--color-neutral-400) h s l / 40%);
+  --border-neutral-softest: var(--color-neutral-300);
+  --border-neutral-inset: var(--color-base-black);
   --border-neutral-alpha: hsla(
     0,
     0%,
@@ -312,9 +294,9 @@
 
   /* Border Success utilities */
   --border-success-highlight: var(--color-feedback-green-600);
-  --border-success-default: var(--color-feedback-green-600);
-  --border-success-muted: hsl(from var(--color-feedback-green-600) h s l / 56%);
-  --border-success-softest: var(--colo-feedback-green-600);
+  --border-success-default: var(--color-feedback-green-500);
+  --border-success-muted: hsl(from var(--color-feedback-green-500) h s l / 56%);
+  --border-success-softest: var(--colo-feedback-green-300);
 
   /* Border Warning utilities */
   --border-warning-highlight: var(--color-feedback-orange-600);
@@ -371,6 +353,51 @@
    --fill-warning-default: var(--color-feedback-orange-500);
    --fill-warning-muted: hsl(from var(--color-feedback-orange-500) h s l / 56%);
 
+   /* ============================================
+   * Strokes
+   * ============================================ */
+
+   /* Neutrals */
+   --stroke-neutral-highlight: var(--color-base-black);
+   --stroke-neutral-active: var(--color-neutral-900);
+   --stroke-neutral-default: var(--color-neutral-800);
+   --stroke-neutral-muted: hsl(from var(--color-neutral-800) h s l / 56%);
+
+   /* onColor / Dark */
+   --stroke-onColor-dark-highlight: var(--color-base-black);
+   --stroke-onColor-dark-default: var(--color-neutral-800);
+   --stroke-onColor-dark-muted: hsl(from var(--color-neutral-900) h s l / 56%);
+
+   /* onColor / Light */
+   --stroke-onColor-light-highlight: var(--color-base-white);
+   --stroke-onColor-light-default: var(--color-neutral-100);
+   --stroke-onColor-light-muted: hsl(from var(--color-neutral-100) h s l / 56%);
+
+   /* Links */
+   --stroke-link-primary: var(--color-brand-blue-600);
+   --stroke-link-secondary: var(--color-base-black);
+   --stroke-link-visited: var(--color-feedback-violet-600);
+
+   /* Destructive */
+   --stroke-destructive-highlight: var(--color-feedback-red-600);
+   --stroke-destructive-default: var(--color-feedback-red-500);
+   --stroke-destructive-muted: hsl(from var(--color-feedback-red-600) h s l / 56%);
+
+   /* Information */
+   --stroke-information-highlight: var(--color-feedback-blue-600);
+   --stroke-information-default: var(--color-feedback-blue-500);
+   --stroke-information-muted: hsl(from var(--color-feedback-blue-500) h s l / 56%);
+
+   /* Success */
+   --stroke-success-highlight: var(--color-feedback-green-600);
+   --stroke-success-default: var(--color-feedback-green-500);
+   --stroke-success-muted: hsl(from var(--color-feedback-green-500) h s l / 56%);
+
+   /* Warning */
+   --stroke-warning-highlight: var(--color-feedback-orange-600);
+   --stroke-warning-default: var(--color-feedback-orange-500);
+   --stroke-warning-muted: hsl(from var(--color-feedback-orange-500) h s l / 56%);
+
   /* ============================================
    * BACKGROUNDS
    * ============================================ */
@@ -604,30 +631,29 @@
   --text-warning: var(--color-feedback-orange-300);
   --border-warning: var(--color-feedback-orange-700);
 
+    /* Link utilities (dark mode) */
+  --underline-link-primary: var(--color-brand-blue-300);
+  --underline-link-secondary: var(--color-base-white);
+  --underline-link-visited: var(--color-feedback-violet-300);
+
+  /* ============================================
+   * BORDER TOKENS
+   * ============================================ */
+
   /* Border utilities - neutral states (dark mode) */
   --border-neutral-active: var(--color-neutral-400);
   --border-neutral-hover: var(--color-neutral-500);
   --border-neutral-default: var(--color-neutral-600);
-  --border-neutral-disabled: var(--color-neutral-600);
+  --border-neutral-disabled: hsl(from var(--color-neutral-600) h s l / 40%);
   --border-neutral-softest: var(--color-neutral-700);
-  --border-neutral-inset: var(--color-base-black);
+  --border-neutral-inset: var(--color-base-white);
   --border-neutral-alpha: hsla(
     255,
     255%,
     255%,
     0.2
   ); /* White with 20% opacity */
 
-
-    /* Link utilities (dark mode) */
-  --underline-link-primary: var(--color-brand-blue-300);
-  --underline-link-secondary: var(--color-base-white);
-  --underline-link-visited: var(--color-brand-blue-400);
-
-  /* ============================================
-   * BORDER TOKENS
-   * ============================================ */
-
   /* Border destructive utilities */
   --border-destructive-highlight: var(--color-feedback-red-300);
   --border-destructive-default: var(--color-feedback-red-500);
@@ -642,9 +668,9 @@
 
   /* Border Success utilities */
   --border-success-highlight: var(--color-feedback-green-300);
-  --border-success-default: var(--color-feedback-green-300);
-  --border-success-muted: hsl(from var(--color-feedback-green-300) h s l / 56%);
-  --border-success-softest: var(--colo-feedback-green-300);
+  --border-success-default: var(--color-feedback-green-500);
+  --border-success-muted: hsl(from var(--color-feedback-green-500) h s l / 56%);
+  --border-success-softest: var(--colo-feedback-green-700);
 
   /* Border Warning utilities */
   --border-warning-highlight: var(--color-feedback-orange-300);
@@ -701,6 +727,51 @@
    --fill-warning-default: var(--color-feedback-orange-400);
    --fill-warning-muted: hsl(from var(--color-feedback-orange-400) h s l / 56%);
 
+   /* ============================================
+   * Strokes
+   * ============================================ */
+
+   /* Neutrals */
+  --stroke-neutral-highlight: var(--color-base-white);
+  --stroke-neutral-active: var(--color-neutral-100);
+  --stroke-neutral-default: var(--color-neutral-200);
+  --stroke-neutral-muted: hsl(from var(--color-neutral-200) h s l / 56%);
+
+  /* onColor / Dark */
+   --stroke-onColor-dark-highlight: var(--color-base-black);
+   --stroke-onColor-dark-default: var(--color-neutral-800);
+   --stroke-onColor-dark-muted: hsl(from var(--color-neutral-900) h s l / 56%);
+
+   /* onColor / Light */
+   --stroke-onColor-light-highlight: var(--color-base-white);
+   --stroke-onColor-light-default: var(--color-neutral-100);
+   --stroke-onColor-light-muted: hsl(from var(--color-neutral-100) h s l / 56%);
+
+   /* Links */
+   --stroke-link-primary: var(--color-brand-blue-300);
+   --stroke-link-secondary: var(--color-base-white);
+   --stroke-link-visited: var(--color-feedback-violet-300);
+
+    /* Destructive */
+   --stroke-destructive-highlight: var(--color-feedback-red-300);
+   --stroke-destructive-default: var(--color-feedback-red-400);
+   --stroke-destructive-muted: hsl(from var(--color-feedback-red-400) h s l / 56%);
+
+   /* Information */
+   --stroke-information-highlight: var(--color-feedback-blue-300);
+   --stroke-information-default: var(--color-feedback-blue-400);
+   --stroke-information-muted: hsl(from var(--color-feedback-blue-400) h s l / 56%);
+
+   /* Success */
+   --stroke-success-highlight: var(--color-feedback-green-300);
+   --stroke-success-default: var(--color-feedback-green-400);
+   --stroke-success-muted: hsl(from var(--color-feedback-green-400) h s l / 56%);
+
+   /* Warning */
+   --stroke-warning-highlight: var(--color-feedback-orange-300);
+   --stroke-warning-default: var(--color-feedback-orange-400);
+   --stroke-warning-muted: hsl(from var(--color-feedback-orange-400) h s l / 56%);
+
    /* ============================================
    * BACKGROUNDS
    * ============================================ */

src/utilities.css

@@ -511,6 +511,23 @@
   border-color: var(--border-success-softest);
 }
 
+/* Warning Border utilities */
+@utility border-warning-highlight {
+  border-color: var(--border-warning-highlight);
+}
+
+@utility border-warning-default {
+  border-color: var(--border-warning-default);
+}
+
+@utility border-warning-muted {
+  border-color: var(--border-warning-muted);
+}
+
+@utility border-warning-softest {
+  border-color: var(--border-warning-softest);
+}
+
 /* Focus Border utilities */
 @utility border-focus {
   border-color: var(--border-focus);
@@ -628,6 +645,118 @@
   fill: var(--fill-warning-muted);
 }
 
+/* =============================
+*  Strokes
+*  ============================*/
+
+/* Neutrals */
+@utility stroke-neutral-highlight {
+  stroke: var(--stroke-neutral-highlight);
+}
+
+@utility stroke-neutral-active {
+  stroke: var(--stroke-neutral-active);
+}
+
+@utility stroke-neutral-default {
+  stroke: var(--stroke-neutral-default);
+}
+
+@utility stroke-neutral-muted {
+  stroke: var(--stroke-neutral-muted);
+}
+
+/* onColor / Dark */
+@utility stroke-onColor-dark-highlight {
+  stroke: var(--stroke-onColor-dark-highlight);
+}
+
+@utility stroke-onColor-dark-default {
+  stroke: var(--stroke-onColor-dark-default);
+}
+
+@utility stroke-onColor-dark-muted {
+  stroke: var(--stroke-onColor-dark-muted);
+}
+
+/* onColor / Light */
+@utility stroke-onColor-light-highlight {
+  stroke: var(--stroke-onColor-light-highlight);
+}
+
+@utility stroke-onColor-light-default {
+  stroke: var(--stroke-onColor-light-default);
+}
+
+@utility stroke-onColor-light-muted {
+  stroke: var(--stroke-onColor-light-muted);
+}
+
+/* Link stroke */
+@utility stroke-link-primary {
+  stroke: var(--stroke-link-primary);
+}
+
+@utility stroke-link-secondary {
+  stroke: var(--stroke-link-secondary);
+}
+
+@utility stroke-link-visited {
+  stroke: var(--stroke-link-visited);
+}
+
+/* Destructive stroke */
+@utility stroke-destructive-highlight {
+  stroke: var(--stroke-destructive-highlight);
+}
+
+@utility stroke-destructive-default {
+  stroke: var(--stroke-destructive-default);
+}
+
+@utility stroke-destructive-muted {
+  stroke: var(--stroke-destructive-muted);
+}
+
+/* Information stroke */
+@utility stroke-information-highlight {
+  stroke: var(--stroke-information-highlight);
+}
+
+@utility stroke-information-default {
+  stroke: var(--stroke-information-default);
+}
+
+@utility stroke-information-muted {
+  stroke: var(--stroke-information-muted);
+}
+
+/* Success stroke */
+@utility stroke-success-highlight {
+  stroke: var(--stroke-success-highlight);
+}
+
+@utility stroke-success-default {
+  stroke: var(--stroke-success-default);
+}
+
+@utility stroke-success-muted {
+  stroke: var(--stroke-success-muted);
+}
+
+/* Warninig stroke */
+@utility stroke-warning-highlight {
+  stroke: var(--stroke-warning-highlight);
+}
+
+@utility stroke-warning-default {
+  stroke: var(--stroke-warning-default);
+}
+
+@utility stroke-warning-muted {
+  stroke: var(--stroke-warning-muted);
+}
+
 /* ============================================
 * BACKGROUNDS
 * ============================================ */