@semanticus/semanticus-css 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "lightweight CSS framework that prioritizes semantic HTML and ARIA-focused accessibility, with a small set of atomic utilities",
   "author": "Joao Goncalves",
   "style": "./dist/semanticus.css",

package/src/components/_card.css

@@ -1,6 +1,5 @@
 .card,
-.pane,
-.panel {
+.pane {
   --shadow: var(--dialog-shadow);
   --color-background: var(--dialog-fill);
   --border-color: var(--dialog-border);
@@ -12,7 +11,6 @@
   border: var(--border-size) solid var(--border-color);
   background: var(--color-background);
   box-shadow: var(--shadow);
-  position: relative;
 
   > header,
   > footer {
@@ -20,65 +18,30 @@
     margin-inline: calc(var(--spacing) * -1);
     padding-inline: var(--spacing);
     background-color: var(--dialog-section-fill);
+    display: flex;
+    gap: calc(var(--nav-link-gap) * 1.5);
+    align-items: center;
   }
 
+  /* Header styling */
   > header {
     margin-top: calc(var(--spacing) * -1);
     border-bottom: var(--border-size) solid var(--dialog-section-border);
     border-top-right-radius: var(--radius);
     border-top-left-radius: var(--radius);
+    justify-content: space-between;
   }
 
+  /* Footer styling */
   > footer {
     margin-bottom: calc(var(--spacing) * -1);
     border-top: var(--border-size) solid var(--dialog-section-border);
     border-bottom-right-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
-    display: flex;
     justify-content: end;
-    gap: calc(var(--nav-link-gap) * 1.5);
   }
 
-  > :last-child:is(hgroup) {
+  > :last-child:is(hgroup, h1, h2, h3, h4, h5, h6) {
     margin-bottom: 0;
   }
-
-  /* Close button styling */
-  [rel="prev"] {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    top: var(--spacing);
-    right: var(--spacing);
-    border: none;
-    border-radius: 0;
-    background-image: var(--icon-close);
-    background-position: center;
-    background-size: auto 1rem;
-    background-repeat: no-repeat;
-    background-color: transparent;
-    box-shadow: none;
-    opacity: 0.5;
-    transition: opacity var(--transition);
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-.pane,
-.panel {
-  --dialog-shadow: none;
-  --shadow: none;
-}
-
-.pane {
-  --dialog-border: transparent;
-  --border-color: transparent;
-
-  border-radius: 0;
 }

package/src/components/_icons.css

@@ -0,0 +1,59 @@
+/* Base styles shared by all .icon-* classes */
+[class^="icon-"],
+[class*=" icon-"] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background-color: currentColor;
+  background-image: none;
+  mask-position: center;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  vertical-align: -.199em;
+  align-self: center;
+  color: inherit;
+}
+
+.icon-checkbox {
+  mask-image: var(--icon-checkbox);
+}
+
+.icon-chevron {
+  mask-image: var(--icon-chevron);
+}
+
+.icon-close {
+  mask-image: var(--icon-close);
+}
+
+.icon-date {
+  mask-image: var(--icon-date);
+}
+
+.icon-invalid {
+  mask-image: var(--icon-invalid);
+}
+
+.icon-loading {
+  mask-image: var(--icon-loading);
+}
+
+.icon-minus {
+  mask-image: var(--icon-minus);
+}
+
+.icon-search {
+  mask-image: var(--icon-search);
+}
+
+.icon-time {
+  mask-image: var(--icon-time);
+}
+
+.icon-valid {
+  mask-image: var(--icon-valid);
+}

package/src/components/_pane.css

@@ -0,0 +1,19 @@
+/* Please see src/components/_card.css, since .pane shares most of its styling with .card */
+
+.pane {
+  --dialog-shadow: none;
+  --shadow: none;
+  --dialog-border: transparent;
+  --border-color: transparent;
+  --color-background: light-dark(
+    color-mix(in srgb, var(--color-slate-50) 25%, white),
+    color-mix(in srgb, var(--color-slate-50), transparent 95%)
+  );
+  --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
+
+  border-radius: 0;
+
+  > :is(header, footer) {
+    border-radius: 0;
+  }
+}

package/src/components/modules.css

@@ -1,2 +1,5 @@
 @import "./_card.css";
+@import "./_container.css";
+@import "./_icons.css";
+@import "./_pane.css";
 @import "./_sidebar.css";

package/src/index.css

@@ -1,5 +1,5 @@
 /*!
- * Semanticus CSS v0.9.0 (https://semanticus.design/)
+ * Semanticus CSS v1.1.0 (https://semanticus.design/)
  *
  * A ARIA-centric, semantic HTML — enhanced with components and variants and utilities
  *

package/src/semantics/attributes/_aria-disabled.css

@@ -0,0 +1,25 @@
+/* Buttons and button-like elements */
+:is(button, [type=submit], [type=button], [type=reset], [role=button])[aria-disabled=true],
+fieldset[aria-disabled=true] :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Links */
+a[aria-disabled=true],
+[role=link][aria-disabled=true] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Form controls */
+:is(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-disabled=true],
+fieldset[aria-disabled=true] :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
+  opacity: var(--input-opacity-disabled);
+  pointer-events: none;
+}
+
+/* Switch color adjustment */
+[type=checkbox][role=switch][aria-disabled=true] {
+  --color-background: var(--border-color);
+}

package/src/semantics/attributes/_role-status-alert.css

@@ -0,0 +1,123 @@
+[role="status"],
+[role="alert"] {
+  --color-background: light-dark(
+    color-mix(in srgb, var(--color-slate-50) 25%, white),
+    color-mix(in srgb, var(--color-slate-50), transparent 95%)
+  );
+  --border-color: var(--dialog-border);
+  --alert-size: var(--border-size);
+
+  color: var(--color-text);
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+  border-radius: var(--radius);
+  border: var(--border-size) solid var(--border-color);
+  border-inline-start-width: var(--alert-size);
+  border-inline-start-color: var(--dialog-border);
+  background: var(--color-background);
+  position: relative;
+
+  &:is(.ghost, .subtle) {
+    --alert-size: calc(var(--border-size) * 4);
+  }
+
+  /* Opening animation using @starting-style (Chrome 117+, Firefox 129+, Safari 17.4+) */
+  /* Gracefully degrades to instant appearance in unsupported browsers */
+  transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out, right 0.2s ease-in-out, left 0.2s ease-in-out, bottom 0.2s ease-in-out;
+
+  &[popover] {
+    display: none;
+    box-shadow: var(--shadow);
+    left: unset;
+    right: 0;
+    bottom: 0;
+    top: unset;
+    margin: var(--spacing);
+
+    &:popover-open {
+      display: flex;
+    }
+
+    &[data-placement="top-start"] {
+      left: 0;
+      right: unset;
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="top-center"] {
+      right: 50%;
+      transform: translateX(50%);
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="top-end"] {
+      right: 0;
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="middle-start"] {
+      left: 0;
+      right: unset;
+      bottom: 50%;
+      transform: translateY(50%);
+    }
+
+    &[data-placement="middle-center"] {
+      right: 50%;
+      transform: translate(50%, 50%);
+      bottom: 50%;
+    }
+
+    &[data-placement="middle-end"] {
+      right: 0;
+      bottom: 50%;
+      transform: translateY(50%);
+    }
+
+    &[data-placement="bottom-start"] {
+      left: 0;
+      right: unset;
+      bottom: 0;
+    }
+
+    &[data-placement="bottom-center"] {
+      right: 50%;
+      transform: translateX(50%);
+      bottom: 0;
+    }
+
+    &[data-placement="bottom-end"] {
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+
+@starting-style {
+  :is([role="status"], [role="alert"]):popover-open {
+    opacity: 0;
+
+    &:not([data-placement]) {
+      right: -20px;
+    }
+
+    &[data-placement$="start"] {
+      left: -20px;
+    }
+
+    &[data-placement="top-center"] {
+      top: -20px;
+    }
+
+    &[data-placement="bottom-center"] {
+      bottom: -20px;
+    }
+
+    &[data-placement$="end"] {
+      right: -20px;
+    }
+  }
+}

package/src/semantics/attributes/_role-tooltip.css

@@ -4,7 +4,7 @@
   width: fit-content;
 }
 
-:not(a, button, input, [role=button])[aria-describedby] {
+:not(a, button, dialog, input, [role=button])[aria-describedby] {
   border-bottom: 1px dotted;
   text-decoration: none;
   cursor: help;

package/src/semantics/elements/_button.css

@@ -75,8 +75,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 }
 
 [type=reset],
-[type=file]::file-selector-button,
-[aria-label="Close"] {
+[type=file]::file-selector-button {
   --color-background: var(--color-secondary-fill);
   --border-color: var(--color-secondary-fill);
   --color-text: var(--color-secondary-on-fill);
@@ -84,15 +83,13 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 }
 
 [type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
-[type=file]::file-selector-button:is(:hover, :active, :focus),
-[aria-label="Close"]:is(:hover, :active, :focus) {
+[type=file]::file-selector-button:is(:hover, :active, :focus) {
   --color-background: var(--color-secondary-fill-hover);
   --border-color: var(--color-secondary-fill-hover);
   --color-text: var(--color-secondary-on-fill);
 }
 
 [type=reset]:focus,
-[aria-label="Close"]:focus,
 [type=reset]:is([aria-current]:not([aria-current=false])):focus,
 [type=file]::file-selector-button: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);

package/src/semantics/elements/_dialog.css

@@ -19,7 +19,7 @@ dialog {
   border-radius: var(--radius);
   background: var(--dialog-fill);
   box-shadow: var(--dialog-shadow);
-  border: 0;
+  border: var(--border-size) solid var(--border-color);
 
   /* Opening animation using @starting-style (Chrome 117+, Firefox 129+, Safari 17.4+) */
   /* Gracefully degrades to instant appearance in unsupported browsers */
@@ -52,6 +52,9 @@ dialog {
     margin-inline: calc(var(--spacing) * -1);
     padding-inline: var(--spacing);
     background-color: var(--dialog-section-fill);
+    display: flex;
+    gap: calc(var(--nav-link-gap) * 1.5);
+    align-items: center;
   }
 
   /* Header styling */
@@ -60,6 +63,7 @@ dialog {
     border-bottom: var(--border-size) solid var(--dialog-section-border);
     border-top-right-radius: var(--radius);
     border-top-left-radius: var(--radius);
+    justify-content: space-between;
   }
 
   /* Footer styling */
@@ -68,35 +72,11 @@ dialog {
     border-top: var(--border-size) solid var(--dialog-section-border);
     border-bottom-right-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
-    display: flex;
     justify-content: end;
-    gap: calc(var(--nav-link-gap) * 1.5);
   }
 
-  /* Close button styling */
-  [rel=prev] {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    top: calc(var(--spacing) * .66);
-    right: var(--spacing);
-    border: none;
-    border-radius: 0;
-    background-image: var(--icon-close);
-    background-position: center;
-    background-size: auto 1rem;
-    background-repeat: no-repeat;
-    background-color: transparent;
-    box-shadow: none;
-    opacity: 0.5;
-    transition: opacity var(--transition);
-
-    &:hover {
-      opacity: 1;
-    }
+  > :last-child:is(hgroup, h1, h2, h3, h4, h5, h6) {
+    margin-bottom: 0;
   }
 }
 

package/src/semantics/modules.css

@@ -1,7 +1,9 @@
 @import "./attributes/_aria-busy.css";
+@import "./attributes/_aria-disabled.css";
 @import "./attributes/_hidden.css";
 @import "./attributes/_popover.css";
 @import "./attributes/_role-group-search.css";
+@import "./attributes/_role-status-alert.css";
 @import "./attributes/_role-toolbar.css";
 @import "./attributes/_role-tooltip.css";
 

package/src/variables/_theme.css

@@ -266,15 +266,15 @@
 /* === ICONS === */
 body {
   --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
-  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
   --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(197, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   --icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(43, 122, 76)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(197, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 
   @container style(--theme: dark) {
     --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(110, 213, 157)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");

package/src/variants/intent/_contrast.css

@@ -10,12 +10,15 @@
   }
 }
 
+.contrast:not([role="link"], a:not([role="button"])) {
+  --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%);
+}
+
 :is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
   &.contrast {
-    --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));
-
     &: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));
@@ -29,9 +32,7 @@
   }
 }
 
-:is(.card, .pane, .panel).contrast {
-  --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%);
+:is(.card, .pane, [role="status"], [role="alert"]).contrast {
   --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%);

package/src/variants/intent/_danger.css

@@ -10,12 +10,15 @@
   }
 }
 
+.danger:not([role="link"], a:not([role="button"])) {
+  --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%);
+}
+
 :is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
   &.danger {
-    --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));
-
     &: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));
@@ -29,9 +32,7 @@
   }
 }
 
-:is(.card, .pane, .panel).danger {
-  --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%);
+:is(.card, .pane, [role="status"], [role="alert"]).danger {
   --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%);

package/src/variants/intent/_info.css

@@ -10,12 +10,15 @@
   }
 }
 
+.info:not([role="link"], a:not([role="button"])) {
+  --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%);
+}
+
 :is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
   &.info {
-    --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));
-
     &: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));
@@ -29,9 +32,7 @@
   }
 }
 
-:is(.card, .pane, .panel).info {
-  --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%);
+:is(.card, .pane, [role="status"], [role="alert"]).info {
   --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%);

package/src/variants/intent/_primary.css

@@ -10,12 +10,15 @@
   }
 }
 
+.primary:not([role="link"], a:not([role="button"])) {
+  --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%);
+}
+
 :is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
   &.primary {
-    --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));
-
     &: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));
@@ -29,9 +32,7 @@
   }
 }
 
-:is(.card, .pane, .panel).primary {
-  --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%);
+:is(.card, .pane, [role="status"], [role="alert"]).primary {
   --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%);

package/src/variants/intent/_secondary.css

@@ -10,12 +10,15 @@
   }
 }
 
+.secondary:not([role="link"], a:not([role="button"])) {
+  --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%);
+}
+
 :is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
   &.secondary {
-    --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));
-
     &: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));
@@ -29,9 +32,7 @@
   }
 }
 
-:is(.card, .pane, .panel).secondary {
-  --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%);
+:is(.card, .pane, [role="status"], [role="alert"]).secondary {
   --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%);