@semanticus/semanticus-css 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "1.1.0",
+  "version": "1.2.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",
@@ -88,6 +88,7 @@
     "storybook": "storybook dev -p 6006",
     "demo:server": "tsx --tsconfig scripts/tsconfig.json scripts/demo-server.ts",
     "test": "npx playwright test",
+    "test:dev": "npx playwright test --ui",
     "test:update-snapshots": "npx playwright test -u",
     "kill-zombies": "sh -c 'PORT=${PORT:-4000}; pids=$(lsof -t -i :$PORT); if [ -n \"$pids\" ]; then echo \"Killing PIDs: $pids\"; kill -9 $pids; else echo \"No processes listening on port $PORT\"; fi'",
     "kill-playwright": "sh -c 'pgrep -af playwright | awk \"{print $1}\" | xargs -r kill -9 || true'",

package/src/components/_card-list.css

@@ -0,0 +1,60 @@
+.card-list {
+  border: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  list-style: none;
+
+  > * {
+    --color-background: transparent;
+    --card-fill: var(--color-background);
+    --border-color: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-zinc-350)), transparent 90%);
+
+    background: var(--card-fill);
+    border-bottom: var(--border-size) solid var(--border-color);
+    border-inline: var(--border-size) solid var(--border-color);
+    color: var(--color-text);
+    margin: 0;
+    padding: var(--spacing);
+    list-style: none;
+
+    &:first-child {
+      border-top: var(--border-size) solid var(--border-color);
+      border-top-left-radius: var(--radius);
+      border-top-right-radius: var(--radius);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--radius);
+      border-bottom-right-radius: var(--radius);
+    }
+
+    &:is([aria-current]:not([aria-current="false"])) {
+      --card-fill: color-mix(in srgb, var(--color-background), var(--color-hover-effect) 15%);
+    }
+  }
+
+  nav & {
+    gap: 0;
+    flex-direction: row;
+
+    > * {
+      flex: 1 1 0;
+      text-align: center;
+      border-top: var(--border-size) solid var(--border-color);
+      border-left: none;
+      white-space: nowrap;
+
+      &:first-child {
+        border-left: var(--border-size) solid var(--border-color);
+        border-bottom-left-radius: var(--radius);
+        border-top-right-radius: 0;
+      }
+
+      &:last-child {
+        border-top-right-radius: var(--radius);
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}

package/src/components/_card.css

@@ -1,6 +1,4 @@
-.card,
-.pane {
-  --shadow: var(--dialog-shadow);
+.card {
   --color-background: var(--dialog-fill);
   --border-color: var(--dialog-border);
 
@@ -10,7 +8,6 @@
   border-radius: var(--radius);
   border: var(--border-size) solid var(--border-color);
   background: var(--color-background);
-  box-shadow: var(--shadow);
 
   > header,
   > footer {

package/src/components/modules.css

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

package/src/index.css

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

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

@@ -0,0 +1,125 @@
+[role="search"],
+[role="group"] {
+  border-radius: var(--radius);
+  box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  display: inline-flex;
+  gap: 0;
+  margin-bottom: var(--spacing);
+  position: relative;
+  transition: box-shadow var(--transition);
+  vertical-align: middle;
+  width: 100%;
+
+  & > *:not(details),
+  & input:not([type="checkbox"], [type="radio"]),
+  & select {
+    position: relative;
+    flex: 1 1 auto;
+    margin-bottom: 0;
+
+    &:not(:first-child) {
+      margin-left: calc(var(--border-size) * -1);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:focus {
+      z-index: 2;
+    }
+  }
+
+  & button,
+  & [type="submit"],
+  & [type="reset"],
+  & [type="button"],
+  & [role="button"] {
+    width: auto;
+  }
+
+  /* Details dropdown inside group */
+  & > details {
+    position: relative;
+    margin-bottom: 0;
+    /* Constrain details height to just the button, not the dropdown menu */
+    height: calc(
+        1rem * var(--line-height) + var(--input-spacing-vertical) *
+            2 + var(--border-size) * 2
+    );
+    overflow: visible;
+
+    &:not(:first-child) {
+      margin-left: calc(var(--border-size) * -1);
+
+      & > summary {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:not(:last-child) > summary {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    & > summary:focus {
+      z-index: 2;
+    }
+
+    /* Ensure consistent height with other form elements in the group */
+    & > summary[role="button"] {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      &::after {
+        height: calc(1rem * var(--line-height, 1.5));
+      }
+    }
+  }
+}
+
+@supports selector(:has(*)) {
+  [role="search"],
+  [role="group"] {
+    &:has(
+      button:focus,
+      [type="submit"]:focus,
+      [type="button"]:focus,
+      [role="button"]:focus
+    ) {
+      --group-shadow: var(--group-shadow-focus-button);
+
+      & input:not([type="checkbox"], [type="radio"]),
+      & select {
+        border-color: transparent;
+      }
+    }
+
+    &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+      --group-shadow: var(--group-shadow-focus-input);
+
+      & button,
+      & [type="submit"],
+      & [type="button"],
+      & [role="button"] {
+        --button-shadow: 0 0 0 var(--border-size)
+            var(--color-primary-fill);
+        --button-shadow-hover: 0 0 0 var(--border-size)
+            var(--color-primary-fill-hover);
+      }
+    }
+
+    & button:focus,
+    & [type="submit"]:focus,
+    & [type="reset"]:focus,
+    & [type="button"]:focus,
+    & [role="button"]:focus {
+      box-shadow: none;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+/* [role="search"] shares most of its styles with [role="group"] */
+/* See _role-group.css for the shared styles */
+
+[role="search"] {
+  & > :first-child {
+    border-top-left-radius: 5rem;
+    border-bottom-left-radius: 5rem;
+  }
+
+  & > :last-child {
+    border-top-right-radius: 5rem;
+    border-bottom-right-radius: 5rem;
+  }
+}

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

@@ -15,7 +15,6 @@
   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);

package/src/semantics/elements/_nav.css

@@ -8,8 +8,12 @@ nav {
   justify-content: space-between;
   overflow: visible;
 
-  & > * {
+  > * {
     margin: 0 !important;
+
+    &:only-child {
+      flex-grow: 1;
+    }
   }
 
   &[aria-label=breadcrumb] {

package/src/semantics/modules.css

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

package/src/utilities/effects/_shadows.css

@@ -6,6 +6,10 @@
   box-shadow: var(--shadow-sm) !important;
 }
 
+.shadow-md {
+  box-shadow: var(--shadow-md) !important;
+}
+
 .shadow-lg {
   box-shadow: var(--shadow-lg) !important;
 }

package/src/variables/_theme.css

@@ -220,7 +220,7 @@
 
   /* === Dialog / Alert tokens === */
   --dialog-fill: light-dark(var(--color-background), var(--color-slate-900));
-  --dialog-border: light-dark(var(--color-border), var(--color-slate-900));
+  --dialog-border: var(--color-border);
   --dialog-shadow: var(--shadow);
   --dialog-section-fill: light-dark(
     color-mix(in srgb, var(--color-slate-50) 25%, white),

package/src/variants/intent/_contrast.css

@@ -1,6 +1,17 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.contrast {
+.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%);
+  }
+
+  &: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%);
 
@@ -8,17 +19,8 @@
       --color-text: oklch(from var(--color-contrast-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.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 {
+  &: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));
@@ -32,13 +34,6 @@
   }
 }
 
-: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%);
-  --dialog-section-border: color-mix(in srgb, light-dark(var(--color-slate-50), black), transparent 95%);
-}
-
 /* Accordion chevron override */
 details summary[role="button"].contrast::after {
   @container style(--theme: dark) {

package/src/variants/intent/_danger.css

@@ -1,6 +1,16 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.danger {
+.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%);
+  }
+
+  &: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%);
 
@@ -8,17 +18,8 @@
       --color-text: oklch(from var(--color-danger-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.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 {
+  &: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));
@@ -31,9 +32,3 @@
     }
   }
 }
-
-: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

@@ -1,6 +1,16 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.info {
+.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%);
+  }
+
+  &: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%);
 
@@ -8,17 +18,8 @@
       --color-text: oklch(from var(--color-info-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.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 {
+  &: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));
@@ -31,9 +32,3 @@
     }
   }
 }
-
-: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

@@ -1,6 +1,16 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.primary {
+.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%);
+  }
+
+  &: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%);
 
@@ -8,17 +18,8 @@
       --color-text: oklch(from var(--color-primary-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.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 {
+  &: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));
@@ -31,9 +32,3 @@
     }
   }
 }
-
-: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

@@ -1,6 +1,16 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.secondary {
+.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%);
+  }
+
+  &: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%);
 
@@ -8,17 +18,8 @@
       --color-text: oklch(from var(--color-secondary-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.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 {
+  &: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));
@@ -31,9 +32,3 @@
     }
   }
 }
-
-: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%);
-}

package/src/variants/intent/_success.css

@@ -1,6 +1,16 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.success {
+.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%);
+  }
+
+  &: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%);
 
@@ -8,17 +18,8 @@
       --color-text: oklch(from var(--color-success-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.success:not([role="link"], a:not([role="button"])) {
-  --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%);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-  &.success {
+  &: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));
@@ -31,9 +32,3 @@
     }
   }
 }
-
-:is(.card, .pane, [role="status"], [role="alert"]).success {
-  --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%);
-}

package/src/variants/intent/_warning.css

@@ -1,6 +1,16 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.warning {
+.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%);
+  }
+
+  &: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%);
 
@@ -8,17 +18,8 @@
       --color-text: oklch(from var(--color-warning-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.warning:not([role="link"], a:not([role="button"])) {
-  --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%);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-  &.warning {
+  &: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));
@@ -31,9 +32,3 @@
     }
   }
 }
-
-:is(.card, .pane, [role="status"], [role="alert"]).warning {
-  --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%);
-}