@ztwoint/z-ui 0.1.47 → 0.1.50

package/dist/css/config/colors/semantic/overlay.css

@@ -0,0 +1,13 @@
+
+:root {
+    --overlay-default: var(--alpha-one-500);
+}
+
+.dark {
+    --overlay-default: var(--alpha-one-200);
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+    --color-overlay-default: var(--overlay-default);
+}

package/dist/css/config/colors/semantic/stroke.css

@@ -0,0 +1,90 @@
+/* Stroke and Focus Ring Colors - Design System */
+:root {
+  /* Focus Ring Colors */
+  --focus-ring-default: var(--blue-300);
+
+  /* Stroke Colors - Solid */
+  --stroke-solid-light: var(--neutral-100);
+  --stroke-solid-medium: var(--neutral-150);
+  --stroke-solid-high: var(--neutral-200);
+  --stroke-solid-hover: var(--neutral-300);
+  --stroke-solid-active: var(--blue-600);
+  --stroke-solid-attention: var(--neutral-950);
+  --stroke-solid-highlight: var(--blue-300);
+
+  /* Stroke Colors - Transparent */
+  --stroke-transparent-light: var(--alpha-one-100);
+  --stroke-transparent-medium: var(--alpha-one-150);
+  --stroke-transparent-high: var(--alpha-one-200);
+  --stroke-transparent-hover: var(--alpha-one-300);
+  --stroke-transparent-active: var(--blue-600);
+  --stroke-transparent-attention: var(--neutral-950);
+  --stroke-transparent-highlight: var(--blue-300);
+
+  /* Stroke Colors - Inverted */
+  --stroke-inverted-default: var(--alpha-two-100);
+  --stroke-inverted-hover: var(--alpha-two-300);
+  --stroke-inverted-active: var(--blue-500);
+  --stroke-inverted-attention: var(--amber-500);
+  --stroke-inverted-highlight: var(--blue-200);
+}
+
+.dark {
+  /* Focus Ring Colors - Dark Mode */
+  --focus-ring-default: var(--blue-300);
+
+  /* Stroke Colors - Solid - Dark Mode */
+  --stroke-solid-light: var(--neutral-75);
+  --stroke-solid-medium: var(--neutral-100);
+  --stroke-solid-high: var(--neutral-150);
+  --stroke-solid-hover: var(--neutral-200);
+  --stroke-solid-active: var(--blue-500);
+  --stroke-solid-attention: var(--neutral-950);
+  --stroke-solid-highlight: var(--blue-200);
+
+  /* Stroke Colors - Transparent - Dark Mode */
+  --stroke-transparent-light: var(--neutral-75);
+  --stroke-transparent-medium: var(--neutral-100);
+  --stroke-transparent-high: var(--neutral-150);
+  --stroke-transparent-hover: var(--neutral-200);
+  --stroke-transparent-active: var(--blue-500);
+  --stroke-transparent-attention: var(--neutral-950);
+  --stroke-transparent-highlight: var(--blue-200);
+
+  /* Stroke Colors - Inverted - Dark Mode */
+  --stroke-inverted-default: var(--neutral-150);
+  --stroke-inverted-hover: var(--neutral-150);
+  --stroke-inverted-active: var(--neutral-150);
+  --stroke-inverted-attention: var(--neutral-150);
+  --stroke-inverted-highlight: var(--neutral-150);
+}
+
+@theme inline {
+  /* Focus Ring */
+  --color-focus-ring-default: var(--focus-ring-default);
+
+  /* Stroke Colors - Solid */
+  --color-stroke-solid-light: var(--stroke-solid-light);
+  --color-stroke-solid-medium: var(--stroke-solid-medium);
+  --color-stroke-solid-high: var(--stroke-solid-high);
+  --color-stroke-solid-hover: var(--stroke-solid-hover);
+  --color-stroke-solid-active: var(--stroke-solid-active);
+  --color-stroke-solid-attention: var(--stroke-solid-attention);
+  --color-stroke-solid-highlight: var(--stroke-solid-highlight);
+
+  /* Stroke Colors - Transparent */
+  --color-stroke-transparent-light: var(--stroke-transparent-light);
+  --color-stroke-transparent-medium: var(--stroke-transparent-medium);
+  --color-stroke-transparent-high: var(--stroke-transparent-high);
+  --color-stroke-transparent-hover: var(--stroke-transparent-hover);
+  --color-stroke-transparent-active: var(--stroke-transparent-active);
+  --color-stroke-transparent-attention: var(--stroke-transparent-attention);
+  --color-stroke-transparent-highlight: var(--stroke-transparent-highlight);
+
+  /* Stroke Colors - Inverted */
+  --color-stroke-inverted-default: var(--stroke-inverted-default);
+  --color-stroke-inverted-hover: var(--stroke-inverted-hover);
+  --color-stroke-inverted-active: var(--stroke-inverted-active);
+  --color-stroke-inverted-attention: var(--stroke-inverted-attention);
+  --color-stroke-inverted-highlight: var(--stroke-inverted-highlight);
+} 

package/dist/css/config/colors/semantic/surface.css

@@ -0,0 +1,135 @@
+/* Surface Colors - Design System */
+:root {
+  /* Surface Colors - Neutral */
+  --surface-neutral-default: var(--neutral-00);
+  --surface-neutral-hover: var(--neutral-75);
+  --surface-neutral-pressed: var(--neutral-100);
+  --surface-neutral-focused: var(--neutral-75);
+  --surface-neutral-disabled: var(--neutral-100);
+
+  /* Surface Colors - Accent */
+  --surface-accent-default: var(--blue-600);
+  --surface-accent-hover: var(--blue-800);
+  --surface-accent-pressed: var(--blue-400);
+  --surface-accent-disabled: var(--neutral-100);
+
+  /* Surface Colors - Danger */
+  --surface-danger-default: var(--red-600);
+  --surface-danger-hover: var(--red-800);
+  --surface-danger-pressed: var(--red-400);
+  --surface-danger-disabled: var(--neutral-100);
+
+  /* Surface Colors - Success */
+  --surface-success-default: var(--green-600);
+  --surface-success-hover: var(--green-800);
+  --surface-success-pressed: var(--green-400);
+  --surface-success-disabled: var(--neutral-100);
+
+  /* Surface Colors - Warning */
+  --surface-warning-default: var(--amber-600);
+  --surface-warning-hover: var(--amber-800);
+  --surface-warning-pressed: var(--amber-400);
+  --surface-warning-disabled: var(--neutral-100);
+
+  /* Surface Colors - Purple */
+  --surface-purple-default: var(--violet-600);
+  --surface-purple-hover: var(--violet-700);
+  --surface-purple-pressed: var(--violet-400);
+  --surface-purple-disabled: var(--neutral-100);
+
+  /* Surface Colors - Inverted */
+  --surface-inverted-default: var(--alpha-two-150);
+  --surface-inverted-hover: var(--alpha-two-300);
+  --surface-inverted-pressed: var(--neutral-00);
+  --surface-inverted-disabled: var(--neutral-100);
+}
+
+.dark {
+  /* Surface Colors - Neutral - Dark Mode */
+  --surface-neutral-default: var(--neutral-00);
+  --surface-neutral-hover: var(--neutral-75);
+  --surface-neutral-pressed: var(--neutral-100);
+  --surface-neutral-focused: var(--neutral-75);
+  --surface-neutral-disabled: var(--neutral-50);
+
+  /* Surface Colors - Accent - Dark Mode */
+  --surface-accent-default: var(--blue-500);
+  --surface-accent-hover: var(--blue-700);
+  --surface-accent-pressed: var(--blue-400);
+  --surface-accent-disabled: var(--neutral-50);
+
+  /* Surface Colors - Danger - Dark Mode */
+  --surface-danger-default: var(--red-500);
+  --surface-danger-hover: var(--red-700);
+  --surface-danger-pressed: var(--red-400);
+  --surface-danger-disabled: var(--neutral-50);
+
+  /* Surface Colors - Success - Dark Mode */
+  --surface-success-default: var(--green-500);
+  --surface-success-hover: var(--green-700);
+  --surface-success-pressed: var(--green-400);
+  --surface-success-disabled: var(--neutral-50);
+
+  /* Surface Colors - Warning - Dark Mode */
+  --surface-warning-default: var(--amber-500);
+  --surface-warning-hover: var(--amber-700);
+  --surface-warning-pressed: var(--amber-400);
+  --surface-warning-disabled: var(--neutral-100);
+
+  /* Surface Colors - Purple - Dark Mode */
+  --surface-purple-default: var(--violet-500);
+  --surface-purple-hover: var(--violet-700);
+  --surface-purple-pressed: var(--violet-400);
+  --surface-purple-disabled: var(--neutral-50);
+
+  /* Surface Colors - Inverted - Dark Mode */
+  --surface-inverted-default: var(--neutral-150);
+  --surface-inverted-hover: var(--neutral-300);
+  --surface-inverted-pressed: var(--neutral-00);
+  --surface-inverted-disabled: var(--neutral-100);
+}
+
+@theme inline {
+  /* Surface Colors - Neutral */
+  --color-surface-neutral-default: var(--surface-neutral-default);
+  --color-surface-neutral-hover: var(--surface-neutral-hover);
+  --color-surface-neutral-pressed: var(--surface-neutral-pressed);
+  --color-surface-neutral-focused: var(--surface-neutral-focused);
+  --color-surface-neutral-disabled: var(--surface-neutral-disabled);
+
+  /* Surface Colors - Accent */
+  --color-surface-accent-default: var(--surface-accent-default);
+  --color-surface-accent-hover: var(--surface-accent-hover);
+  --color-surface-accent-pressed: var(--surface-accent-pressed);
+  --color-surface-accent-disabled: var(--surface-accent-disabled);
+
+  /* Surface Colors - Danger */
+  --color-surface-danger-default: var(--surface-danger-default);
+  --color-surface-danger-hover: var(--surface-danger-hover);
+  --color-surface-danger-pressed: var(--surface-danger-pressed);
+  --color-surface-danger-disabled: var(--surface-danger-disabled);
+
+  /* Surface Colors - Success */
+  --color-surface-success-default: var(--surface-success-default);
+  --color-surface-success-hover: var(--surface-success-hover);
+  --color-surface-success-pressed: var(--surface-success-pressed);
+  --color-surface-success-disabled: var(--surface-success-disabled);
+
+  /* Surface Colors - Warning */
+  --color-surface-warning-default: var(--surface-warning-default);
+  --color-surface-warning-hover: var(--surface-warning-hover);
+  --color-surface-warning-pressed: var(--surface-warning-pressed);
+  --color-surface-warning-disabled: var(--surface-warning-disabled);
+
+  /* Surface Colors - Purple */
+  --color-surface-purple-default: var(--surface-purple-default);
+  --color-surface-purple-hover: var(--surface-purple-hover);
+  --color-surface-purple-pressed: var(--surface-purple-pressed);
+  --color-surface-purple-disabled: var(--surface-purple-disabled);
+
+  /* Surface Colors - Inverted */
+  --color-surface-inverted-default: var(--surface-inverted-default);
+  --color-surface-inverted-hover: var(--surface-inverted-hover);
+  --color-surface-inverted-pressed: var(--surface-inverted-pressed);
+  --color-surface-inverted-disabled: var(--surface-inverted-disabled);
+} 

package/dist/css/config/colors/semantic/text.css

@@ -0,0 +1,113 @@
+/* Text Colors - Design System */
+:root {
+  /* Text Colors - Neutral */
+  --text-neutral-primary: var(--neutral-950);
+  --text-neutral-secondary: var(--neutral-600);
+  --text-neutral-muted: var(--neutral-400);
+
+  /* Text Colors - Inverted */
+  --text-inverted-primary: var(--neutral-00);
+  --text-inverted-secondary: var(--alpha-two-600);
+  --text-inverted-static: var(--neutral-00);
+
+  /* Text Colors - Brand */
+  --text-brand-primary: var(--blue-950);
+  --text-brand-secondary: var(--blue-600);
+
+  /* Text Colors - Success */
+  --text-success-primary: var(--green-950);
+  --text-success-secondary: var(--green-600);
+
+  /* Text Colors - Danger */
+  --text-danger-primary: var(--red-950);
+  --text-danger-secondary: var(--red-600);
+
+  /* Text Colors - Warning */
+  --text-warning-primary: var(--amber-950);
+  --text-warning-secondary: var(--amber-600);
+
+  /* Text Colors - Purple */
+  --text-purple-primary: var(--violet-950);
+  --text-purple-secondary: var(--violet-600);
+
+  /* Text Colors - Body */
+  --text-body-primary: var(--neutral-950);
+  --text-body-long: var(--neutral-800);
+  --text-body-short: var(--neutral-700);
+}
+
+.dark {
+  /* Text Colors - Neutral - Dark Mode */
+  --text-neutral-primary: var(--neutral-950);
+  --text-neutral-secondary: var(--neutral-500);
+  --text-neutral-muted: var(--neutral-400);
+
+  /* Text Colors - Inverted - Dark Mode */
+  --text-inverted-primary: var(--neutral-00);
+  --text-inverted-secondary: var(--alpha-one-600);
+  --text-inverted-static: var(--neutral-950);
+
+  /* Text Colors - Brand - Dark Mode */
+  --text-brand-primary: var(--blue-950);
+  --text-brand-secondary: var(--blue-600);
+
+  /* Text Colors - Success - Dark Mode */
+  --text-success-primary: var(--green-950);
+  --text-success-secondary: var(--green-600);
+
+  /* Text Colors - Danger - Dark Mode */
+  --text-danger-primary: var(--red-950);
+  --text-danger-secondary: var(--red-600);
+
+  /* Text Colors - Warning - Dark Mode */
+  --text-warning-primary: var(--amber-950);
+  --text-warning-secondary: var(--amber-600);
+
+  /* Text Colors - Purple - Dark Mode */
+  --text-purple-primary: var(--violet-950);
+  --text-purple-secondary: var(--violet-600);
+
+  /* Text Colors - Body - Dark Mode */
+  --text-body-primary: var(--neutral-00);
+  --text-body-long: var(--neutral-800);
+  --text-body-short: var(--neutral-700);
+}
+
+@theme inline {
+  --font-sans: 'Inter', sans-serif;
+
+  /* Text Colors - Neutral */
+  --color-text-neutral-primary: var(--text-neutral-primary);
+  --color-text-neutral-secondary: var(--text-neutral-secondary);
+  --color-text-neutral-muted: var(--text-neutral-muted);
+
+  /* Text Colors - Inverted */
+  --color-text-inverted-primary: var(--text-inverted-primary);
+  --color-text-inverted-secondary: var(--text-inverted-secondary);
+  --color-text-inverted-static: var(--text-inverted-static);
+
+  /* Text Colors - Brand */
+  --color-text-brand-primary: var(--text-brand-primary);
+  --color-text-brand-secondary: var(--text-brand-secondary);
+
+  /* Text Colors - Success */
+  --color-text-success-primary: var(--text-success-primary);
+  --color-text-success-secondary: var(--text-success-secondary);
+
+  /* Text Colors - Danger */
+  --color-text-danger-primary: var(--text-danger-primary);
+  --color-text-danger-secondary: var(--text-danger-secondary);
+
+  /* Text Colors - Warning */
+  --color-text-warning-primary: var(--text-warning-primary);
+  --color-text-warning-secondary: var(--text-warning-secondary);
+
+  /* Text Colors - Purple */
+  --color-text-purple-primary: var(--text-purple-primary);
+  --color-text-purple-secondary: var(--text-purple-secondary);
+
+  /* Text Colors - Body */
+  --color-text-body-primary: var(--text-body-primary);
+  --color-text-body-long: var(--text-body-long);
+  --color-text-body-short: var(--text-body-short);
+} 

package/dist/css/config/colors/semantic/tooltip.css

@@ -0,0 +1,12 @@
+:root {
+    --tooltip-surface: var(--color-neutral-950);
+}
+
+.dark {
+    --tooltip-surface: #373737;
+}
+
+/* Tailwind v4 Theme Integration */
+@theme inline {
+    --color-tooltip-surface: var(--tooltip-surface);
+}

package/dist/css/config/colors/shape.css

@@ -1,163 +1,163 @@
 /* shape: neutral */
 @utility shape-neutral-default {
-  fill: var(--color-neutral-500);
+  fill: var(--color-text-neutral-secondary);
 }
 
 @utility shape-neutral-transparent {
-  fill: var(--color-alpha-500);
+  fill: var(--color-stroke-transparent-hover);
 }
 
 @utility shape-neutral-disabled {
-  fill: var(--color-neutral-400);
+  fill: var(--color-text-neutral-muted);
 }
 
 @utility shape-neutral-pale {
-  fill: var(--color-neutral-300);
+  fill: var(--color-stroke-solid-hover);
 }
 
 @utility shape-neutral-attention {
-  fill: var(--color-neutral-950);
+  fill: var(--color-text-neutral-primary);
 }
 
 @utility shape-neutral-accent {
-  fill: var(--color-accent-600);
+  fill: var(--color-text-brand-secondary);
 }
 
 @utility shape-neutral-danger {
-  fill: var(--color-red-600);
+  fill: var(--color-text-danger-secondary);
 }
 
 @utility shape-neutral-warning {
-  fill: var(--color-amber-600);
+  fill: var(--color-text-warning-secondary);
 }
 
 @utility shape-neutral-success {
-  fill: var(--color-green-600);
+  fill: var(--color-text-success-secondary);
 }
 
 @utility shape-neutral-purple {
-  fill: var(--color-violet-600);
+  fill: var(--color-text-purple-secondary);
 }
 
 @utility shape-neutral-sky {
-  fill: var(--color-sky-600);
+  fill: var(--color-text-brand-secondary);
 }
 
 /* shape: inverted */
 @utility shape-inverted-default {
-  fill: var(--color-alpha-two-500);
+  fill: var(--color-text-inverted-secondary);
 }
 
 @utility shape-inverted-disabled {
-  fill: var(--color-alpha-two-400);
+  fill: var(--color-stroke-inverted-default);
 }
 
 @utility shape-inverted-attention {
-  fill: var(--color-neutral-00);
+  fill: var(--color-text-inverted-primary);
 }
 
 @utility shape-inverted-accent {
-  fill: var(--color-accent-500);
+  fill: var(--color-text-brand-secondary);
 }
 
 @utility shape-inverted-danger {
-  fill: var(--color-red-500);
+  fill: var(--color-text-danger-secondary);
 }
 
 @utility shape-inverted-warning {
-  fill: var(--color-amber-500);
+  fill: var(--color-text-warning-secondary);
 }
 
 @utility shape-inverted-success {
-  fill: var(--color-green-500);
+  fill: var(--color-text-success-secondary);
 }
 
 @utility shape-inverted-purple {
-  fill: var(--color-purple-500);
+  fill: var(--color-text-purple-secondary);
 }
 
 @utility shape-inverted-sky {
-  fill: var(--color-sky-500);
+  fill: var(--color-text-brand-secondary);
 }
 
 /* shape-bg: neutral */
 @utility shape-bg-neutral-default {
-  background-color: var(--color-neutral-500);
+  background-color: var(--color-surface-neutral-pressed);
 }
 
 @utility shape-bg-neutral-transparent {
-  background-color: var(--color-alpha-500);
+  background-color: var(--color-stroke-transparent-hover);
 }
 
 @utility shape-bg-neutral-disabled {
-  background-color: var(--color-neutral-400);
+  background-color: var(--color-surface-neutral-disabled);
 }
 
 @utility shape-bg-neutral-pale {
-  background-color: var(--color-neutral-300);
+  background-color: var(--color-surface-neutral-hover);
 }
 
 @utility shape-bg-neutral-attention {
-  background-color: var(--color-neutral-950);
+  background-color: var(--color-surface-neutral-pressed);
 }
 
 @utility shape-bg-neutral-accent {
-  background-color: var(--color-accent-600);
+  background-color: var(--color-surface-accent-default);
 }
 
 @utility shape-bg-neutral-danger {
-  background-color: var(--color-danger-600);
+  background-color: var(--color-surface-danger-default);
 }
 
 @utility shape-bg-neutral-warning {
-  background-color: var(--color-warning-600);
+  background-color: var(--color-surface-warning-default);
 }
 
 @utility shape-bg-neutral-success {
-  background-color: var(--color-success-600);
+  background-color: var(--color-surface-success-default);
 }
 
 @utility shape-bg-neutral-purple {
-  background-color: var(--color-purple-600);
+  background-color: var(--color-surface-purple-default);
 }
 
 @utility shape-bg-neutral-sky {
-  background-color: var(--color-sky-600);
+  background-color: var(--color-surface-accent-default);
 }
 
 /* shape-bg: inverted */
 @utility shape-bg-inverted-default {
-  background-color: var(--color-alpha-two-500);
+  background-color: var(--color-surface-inverted-default);
 }
 
 @utility shape-bg-inverted-disabled {
-  background-color: var(--color-alpha-two-400);
+  background-color: var(--color-surface-inverted-disabled);
 }
 
 @utility shape-bg-inverted-attention {
-  background-color: var(--color-neutral-00);
+  background-color: var(--color-surface-inverted-pressed);
 }
 
 @utility shape-bg-inverted-accent {
-  background-color: var(--color-accent-500);
+  background-color: var(--color-surface-accent-default);
 }
 
 @utility shape-bg-inverted-danger {
-  background-color: var(--color-danger-500);
+  background-color: var(--color-surface-danger-default);
 }
 
 @utility shape-bg-inverted-warning {
-  background-color: var(--color-warning-500);
+  background-color: var(--color-surface-warning-default);
 }
 
 @utility shape-bg-inverted-success {
-  background-color: var(--color-success-500);
+  background-color: var(--color-surface-success-default);
 }
 
 @utility shape-bg-inverted-purple {
-  background-color: var(--color-purple-500);
+  background-color: var(--color-surface-purple-default);
 }
 
 @utility shape-bg-inverted-sky {
-  background-color: var(--color-sky-500);
+  background-color: var(--color-surface-accent-default);
 }

package/dist/css/config/colors/stroke.css

@@ -1,79 +1,79 @@
 /* For stroke/borders across ui */
 /* solid */
 @utility stroke-solid-light {
-  border-color: var(--color-neutral-100);
+  border-color: var(--color-stroke-solid-light);
 }
 
 @utility stroke-solid-medium {
-  border-color: var(--color-neutral-150);
+  border-color: var(--color-stroke-solid-medium);
 }
 
 @utility stroke-solid-high {
-  border-color: var(--color-neutral-200);
+  border-color: var(--color-stroke-solid-high);
 }
 
 @utility stroke-solid-hover {
-  border-color: var(--color-neutral-300);
+  border-color: var(--color-stroke-solid-hover);
 }
 
 @utility stroke-solid-active {
-  border-color: var(--color-accent-600);
+  border-color: var(--color-stroke-solid-active);
 }
 
 @utility stroke-solid-attention {
-  border-color: var(--color-neutral-950);
+  border-color: var(--color-stroke-solid-attention);
 }
 
 @utility stroke-solid-highlight {
-  border-color: var(--color-accent-300);
+  border-color: var(--color-stroke-solid-highlight);
 }
 
 /* transparent */
 
 @utility stroke-transparent-light {
-  border-color: var(--color-alpha-one-100);
+  border-color: var(--color-stroke-transparent-light);
 }
 
 @utility stroke-transparent-medium {
-  border-color: var(--color-alpha-one-150);
+  border-color: var(--color-stroke-transparent-medium);
 }
 
 @utility stroke-transparent-high {
-  border-color: var(--color-alpha-one-200);
+  border-color: var(--color-stroke-transparent-high);
 }
 
 @utility stroke-transparent-hover {
-  border-color: var(--color-alpha-one-300);
+  border-color: var(--color-stroke-transparent-hover);
 }
 
 @utility stroke-transparent-active {
-  border-color: var(--color-accent-600);
+  border-color: var(--color-stroke-transparent-active);
 }
 
 @utility stroke-transparent-attention {
-  border-color: var(--color-neutral-950);
+  border-color: var(--color-stroke-transparent-attention);
 }
 
 @utility stroke-transparent-highlight {
-  border-color: var(--color-accent-300);
+  border-color: var(--color-stroke-transparent-highlight);
 }
 
 @utility stroke-inverted-default {
-  border-color: var(--color-alpha-two-100);
+  border-color: var(--color-stroke-inverted-default);
 }
 
 @utility stroke-inverted-hover {
-  border-color: var(--color-alpha-two-300);
+  border-color: var(--color-stroke-inverted-hover);
 }
 
 @utility stroke-inverted-active {
-  border-color: var(--color-accent-500);
+  border-color: var(--color-stroke-inverted-active);
 }
 
 @utility stroke-inverted-attention {
-  border-color: var(--color-amber-500);
+  border-color: var(--color-stroke-inverted-attention);
 }
 
 @utility stroke-inverted-highlight {
-  border-color: var(--color-accent-200);
+  border-color: var(--color-stroke-inverted-highlight);
 }