@semanticus/semanticus-css 2.2.0 → 3.0.0

package/src/variants/_intent.css

@@ -0,0 +1,8 @@
+@import "./intent/_common.css";
+@import "./intent/_contrast.css";
+@import "./intent/_danger.css";
+@import "./intent/_primary.css";
+@import "./intent/_secondary.css";
+@import "./intent/_success.css";
+@import "./intent/_warning.css";
+@import "./intent/_info.css";

package/src/variants/_variables.css

@@ -1,24 +1,124 @@
-:root, :host {
-  --subtle-shade: light-dark(var(--color-zinc-250), var(--color-slate-750));
+:root,
+:host {
+  /* ===== MISSING VARIANT TOKENS ===== */
+
+  /* --- Contrast --- */
+  --contrast-background-color: light-dark(
+    var(--_color-slate-900),
+    var(--_color-slate-50)
+  );
+  --contrast-background-color-hover: color-mix(
+    in srgb,
+    var(--contrast-background-color),
+    var(--color-hover-shade) 30%
+  );
+  --contrast-color: light-dark(var(--_color-slate-900), var(--_color-slate-100));
+  --contrast-color-hover: color-mix(
+    in srgb,
+    var(--contrast-color),
+    var(--color-hover-shade) 30%
+  );
+  --contrast-outline-color: color-mix(
+    in srgb,
+    var(--contrast-color) 70%,
+    light-dark(white, black)
+  );
+
+  /* --- Info --- */
+  --_color-azure-450: #018cd4;
+  --_color-azure-250: #79c0ff;
+  --info-background-color: var(--_color-azure-450);
+  --info-background-color-hover: color-mix(
+    in srgb,
+    var(--info-background-color),
+    var(--color-hover-shade) 30%
+  );
+  --info-color: light-dark(var(--_color-azure-450), var(--_color-azure-250));
+  --info-color-hover: color-mix(
+    in srgb,
+    var(--info-color),
+    var(--color-hover-shade) 30%
+  );
+  --info-outline-color: color-mix(
+    in srgb,
+    var(--info-color) 70%,
+    light-dark(white, black)
+  );
+
+  /* --- Warning --- */
+  --_color-amber-350: #c79400;
+  --_color-amber-250: #e8ae01;
+  --warning-background-color: var(--_color-amber-350);
+  --warning-background-color-hover: color-mix(
+    in srgb,
+    var(--warning-background-color),
+    var(--color-hover-shade) 30%
+  );
+  --warning-color: light-dark(var(--_color-amber-350), var(--_color-amber-250));
+  --warning-color-hover: color-mix(
+    in srgb,
+    var(--warning-color),
+    var(--color-hover-shade) 30%
+  );
+  --warning-outline-color: color-mix(
+    in srgb,
+    var(--warning-color) 70%,
+    light-dark(white, black)
+  );
+
+  /* Subtle colors */
+
+  /* Private helper to derive subtle color variants from the base colors */
+  --_subtle-color-shade: light-dark(
+    var(--_color-zinc-250),
+    var(--_color-slate-750)
+  );
 
   /* Primary subtle colors */
-  --color-primary-subtle-fill: color-mix(in srgb, var(--color-primary-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+  --primary-subtle-background-color: color-mix(
+    in srgb,
+    var(--primary-background-color),
+    var(--_subtle-color-shade) 60%
+  );
 
   /* Secondary subtle colors */
-  --color-secondary-subtle-fill: color-mix(in srgb, var(--color-secondary-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+  --secondary-subtle-background-color: light-dark(
+    color-mix(in srgb, var(--_color-slate-50), white 25%),
+    color-mix(in srgb, var(--_color-slate-50), black 75%)
+  );
 
   /* Contrast subtle colors */
-  --color-contrast-subtle-fill: color-mix(in srgb, var(--color-contrast-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+  --contrast-subtle-background-color: color-mix(
+    in srgb,
+    var(--contrast-background-color),
+    var(--_subtle-color-shade) 60%
+  );
 
   /* Success subtle colors */
-  --color-success-subtle-fill: color-mix(in srgb, var(--color-success-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+  --success-subtle-background-color: color-mix(
+    in srgb,
+    var(--success-background-color),
+    var(--_subtle-color-shade) 60%
+  );
 
   /* Info subtle colors */
-  --color-info-subtle-fill: color-mix(in srgb, var(--color-info-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+  --info-subtle-background-color: color-mix(
+    in srgb,
+    var(--info-background-color),
+    var(--_subtle-color-shade) 60%
+  );
 
   /* Warning subtle colors */
-  --color-warning-subtle-fill: color-mix(in srgb, var(--color-warning-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+  --warning-subtle-background-color: color-mix(
+    in srgb,
+    var(--warning-background-color),
+    var(--_subtle-color-shade) 60%
+  );
 
   /* Danger subtle colors */
-  --color-danger-subtle-fill: color-mix(in srgb, var(--color-danger-fill), var(--subtle-shade) var(--subtle-opacity, 60%));
+  --danger-subtle-background-color: color-mix(
+    in srgb,
+    var(--danger-background-color),
+    var(--_subtle-color-shade) 60%
+  );
 }

package/src/variants/intent/_common.css

@@ -0,0 +1,33 @@
+:is(.primary, .secondary, .contrast, .success, .info, .warning, .danger) {
+  /* --- Buttons Individual Styling --- */
+  --_buttons-background-color: var(--intent-background-color);
+  --_buttons-background-color-hover: var(--intent-background-color-hover);
+  --_buttons-outline-color: var(--intent-outline-color);
+
+  /* --- Alert Individual Styling --- */
+  --_alert-color: #fff;
+  --_alert-background-color: var(--intent-background-color);
+  --_alert-border-color: var(--intent-background-color);
+
+  /* --- Card Individual Styling --- */
+  --_card-color: #fff;
+  --_card-background-color: var(--intent-background-color);
+  --_card-marginals-background-color: color-mix(
+    in srgb,
+    light-dark(var(--_color-slate-900), var(--_color-slate-50)),
+    transparent 90%
+  );
+  --_card-border-color: var(--_card-marginals-background-color);
+
+  /* --- Link Individual Styling --- */
+  --_links-color: var(--intent-color);
+  --_links-color-hover: var(--intent-color-hover);
+  --_links-outline-color: var(--intent-outline-color);
+
+  /* --- Pane Individual Styling --- */
+  --_pane-color: #fff;
+  --_pane-background-color: var(--intent-background-color);
+
+  /* --- Progress Bar Individual Styling --- */
+  --_progress-accent-color: var(--intent-background-color);
+}

package/src/variants/intent/_contrast.css

@@ -1,42 +1,41 @@
+/* See ./_common.css for shared styles */
+
 .contrast {
-  &:not(a:not([role="button"]), [role="link"]) {
-    --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-contrast-fill) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    --dialog-fill: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
-    --dialog-border: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
-    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-50), var(--color-slate-900)), transparent 90%);
-    --dialog-section-border: color-mix(in srgb, light-dark(var(--color-slate-50), black), transparent 95%);
-  }
+  --intent-background-color: var(--contrast-background-color);
+  --intent-background-color-hover: var(--contrast-background-color-hover);
 
-  &:is(a:not([role="button"]), [role="link"]) {
-    --color-text: oklch(from var(--color-contrast-text) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+  --intent-color: var(--contrast-color);
+  --intent-color-hover: var(--contrast-color-hover);
 
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: oklch(from var(--color-contrast-text-hover) l c h / var(--color-text-opacity));
-    }
-  }
+  --intent-outline-color: var(--contrast-outline-color);
 
-  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-background: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
-    }
+  /* Readability adjustments */
+  --_buttons-color: light-dark(#fff, #191c20);
+  --_buttons-color-hover: light-dark(#fff, #191c20);
 
-    &:focus,
-    &:is([aria-current]:not([aria-current="false"])):focus {
-      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-contrast-focus-ring);
-    }
-  }
+  --_alert-color: light-dark(#fff, #191c20);
+
+  --_card-color: light-dark(#fff, #191c20);
+  --_card-marginals-background-color: color-mix(
+    in srgb,
+    light-dark(var(--_color-slate-50), var(--_color-slate-900)),
+    transparent 90%
+  );
+
+  --_pane-color: light-dark(#fff, #191c20);
 }
 
 /* Accordion chevron override */
-details summary[role="button"].contrast::after {
+details summary[role="button"].contrast {
   @container style(--theme: dark) {
-    filter:  brightness(0);
+    &::after {
+      filter: brightness(0);
+    }
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      &::after {
+        filter: brightness(0);
+      }
+    }
   }
 }

package/src/variants/intent/_danger.css

@@ -1,34 +1,11 @@
-.danger {
-  &:not(a:not([role="button"]), [role="link"]) {
-    --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-danger-fill) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    --dialog-fill: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
-    --dialog-border: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
-    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
-  }
+/* See ./_common.css for shared styles */
 
-  &:is(a:not([role="button"]), [role="link"]) {
-    --color-text: oklch(from var(--color-danger-text) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: oklch(from var(--color-danger-text-hover) l c h / var(--color-text-opacity));
-    }
-  }
+.danger {
+  --intent-background-color: var(--danger-background-color);
+  --intent-background-color-hover: var(--danger-background-color-hover);
 
-  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-background: oklch(from var(--color-danger-fill-hover) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-danger-fill-hover) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
-    }
+  --intent-color: var(--danger-color);
+  --intent-color-hover: var(--danger-color-hover);
 
-    &:focus,
-    &:is([aria-current]:not([aria-current="false"])):focus {
-      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-danger-focus-ring);
-    }
-  }
+  --intent-outline-color: var(--danger-outline-color);
 }

package/src/variants/intent/_info.css

@@ -1,34 +1,11 @@
-.info {
-  &:not(a:not([role="button"]), [role="link"]) {
-    --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-info-fill) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    --dialog-fill: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
-    --dialog-border: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
-    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
-  }
+/* See ./_common.css for shared styles */
 
-  &:is(a:not([role="button"]), [role="link"]) {
-    --color-text: oklch(from var(--color-info-text) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: oklch(from var(--color-info-text-hover) l c h / var(--color-text-opacity));
-    }
-  }
+.info {
+  --intent-background-color: var(--info-background-color);
+  --intent-background-color-hover: var(--info-background-color-hover);
 
-  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-background: oklch(from var(--color-info-fill-hover) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-info-fill-hover) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
-    }
+  --intent-color: var(--info-color);
+  --intent-color-hover: var(--info-color-hover);
 
-    &:focus,
-    &:is([aria-current]:not([aria-current="false"])):focus {
-      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-info-focus-ring);
-    }
-  }
+  --intent-outline-color: var(--info-outline-color);
 }

package/src/variants/intent/_primary.css

@@ -1,34 +1,11 @@
-.primary {
-  &:not(a:not([role="button"]), [role="link"]) {
-    --color-background: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-primary-fill) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    --dialog-fill: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
-    --dialog-border: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
-    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
-  }
+/* See ./_common.css for shared styles */
 
-  &:is(a:not([role="button"]), [role="link"]) {
-    --color-text: oklch(from var(--color-primary-text) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: oklch(from var(--color-primary-text-hover) l c h / var(--color-text-opacity));
-    }
-  }
+.primary {
+  --intent-background-color: var(--primary-background-color);
+  --intent-background-color-hover: var(--primary-background-color-hover);
 
-  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-background: oklch(from var(--color-primary-fill-hover) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-primary-fill-hover) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
-    }
+  --intent-color: var(--primary-color);
+  --intent-color-hover: var(--primary-color-hover);
 
-    &:focus,
-    &:is([aria-current]:not([aria-current="false"])):focus {
-      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
-    }
-  }
+  --intent-outline-color: var(--primary-outline-color);
 }

package/src/variants/intent/_secondary.css

@@ -1,34 +1,11 @@
-.secondary {
-  &:not(a:not([role="button"]), [role="link"]) {
-    --color-background: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-secondary-fill) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    --dialog-fill: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
-    --dialog-border: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
-    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
-  }
+/* See ./_common.css for shared styles */
 
-  &:is(a:not([role="button"]), [role="link"]) {
-    --color-text: oklch(from var(--color-secondary-text) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: oklch(from var(--color-secondary-text-hover) l c h / var(--color-text-opacity));
-    }
-  }
+.secondary {
+  --intent-background-color: var(--secondary-background-color);
+  --intent-background-color-hover: var(--secondary-background-color-hover);
 
-  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-background: oklch(from var(--color-secondary-fill-hover) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-secondary-fill-hover) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
-    }
+  --intent-color: var(--secondary-color);
+  --intent-color-hover: var(--secondary-color-hover);
 
-    &:focus,
-    &:is([aria-current]:not([aria-current="false"])):focus {
-      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);
-    }
-  }
+  --intent-outline-color: var(--secondary-outline-color);
 }

package/src/variants/intent/_success.css

@@ -1,34 +1,11 @@
-.success {
-  &:not(a:not([role="button"]), [role="link"]) {
-    --color-background: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-success-fill) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    --dialog-fill: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
-    --dialog-border: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
-    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
-  }
+/* See ./_common.css for shared styles */
 
-  &:is(a:not([role="button"]), [role="link"]) {
-    --color-text: oklch(from var(--color-success-text) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: oklch(from var(--color-success-text-hover) l c h / var(--color-text-opacity));
-    }
-  }
+.success {
+  --intent-background-color: var(--success-background-color);
+  --intent-background-color-hover: var(--success-background-color-hover);
 
-  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-background: oklch(from var(--color-success-fill-hover) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-success-fill-hover) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
-    }
+  --intent-color: var(--success-color);
+  --intent-color-hover: var(--success-color-hover);
 
-    &:focus,
-    &:is([aria-current]:not([aria-current="false"])):focus {
-      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-success-focus-ring);
-    }
-  }
+  --intent-outline-color: var(--success-outline-color);
 }

package/src/variants/intent/_warning.css

@@ -1,34 +1,11 @@
-.warning {
-  &:not(a:not([role="button"]), [role="link"]) {
-    --color-background: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-warning-fill) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    --dialog-fill: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
-    --dialog-border: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
-    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
-  }
+/* See ./_common.css for shared styles */
 
-  &:is(a:not([role="button"]), [role="link"]) {
-    --color-text: oklch(from var(--color-warning-text) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: oklch(from var(--color-warning-text-hover) l c h / var(--color-text-opacity));
-    }
-  }
+.warning {
+  --intent-background-color: var(--warning-background-color);
+  --intent-background-color-hover: var(--warning-background-color-hover);
 
-  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-background: oklch(from var(--color-warning-fill-hover) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-warning-fill-hover) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
-    }
+  --intent-color: var(--warning-color);
+  --intent-color-hover: var(--warning-color-hover);
 
-    &:focus,
-    &:is([aria-current]:not([aria-current="false"])):focus {
-      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-warning-focus-ring);
-    }
-  }
+  --intent-outline-color: var(--warning-outline-color);
 }