@semanticus/semanticus-css 1.0.0 → 1.2.0

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),
@@ -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

@@ -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,14 +19,8 @@
       --color-text: oklch(from var(--color-contrast-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
-
-: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(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));
@@ -29,15 +34,6 @@
   }
 }
 
-: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%);
-  --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,14 +18,8 @@
       --color-text: oklch(from var(--color-danger-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
-
-: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(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));
@@ -28,11 +32,3 @@
     }
   }
 }
-
-: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%);
-  --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,14 +18,8 @@
       --color-text: oklch(from var(--color-info-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
-
-: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(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));
@@ -28,11 +32,3 @@
     }
   }
 }
-
-: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%);
-  --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,14 +18,8 @@
       --color-text: oklch(from var(--color-primary-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
-
-: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(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));
@@ -28,11 +32,3 @@
     }
   }
 }
-
-: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%);
-  --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,14 +18,8 @@
       --color-text: oklch(from var(--color-secondary-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
-
-: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(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));
@@ -28,11 +32,3 @@
     }
   }
 }
-
-: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%);
-  --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,14 +18,8 @@
       --color-text: oklch(from var(--color-success-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-  &.success {
-    --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));
 
+  &: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));
@@ -28,11 +32,3 @@
     }
   }
 }
-
-:is(.card, .pane, .panel).success {
-  --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%);
-}

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,14 +18,8 @@
       --color-text: oklch(from var(--color-warning-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-  &.warning {
-    --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));
 
+  &: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));
@@ -28,11 +32,3 @@
     }
   }
 }
-
-:is(.card, .pane, .panel).warning {
-  --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%);
-}

package/src/variants/modifiers/_ghost.css

@@ -1,10 +1,10 @@
 .ghost {
   --color-background: transparent;
 
-  background-color: var(--color-background) !important;
+  background-color: var(--color-background);
 }
 
-:is(.card, .pane, .panel, button, [type="submit"], [type="button"], [role="button"]) {
+:not([role="link"], a:not([role="button"])) {
   &.ghost {
     &.primary {
       --color-background: transparent;
@@ -131,7 +131,7 @@
   }
 }
 
-:is(.card, .pane, .panel).ghost {
+:is(.card, .pane, [role="status"], [role="alert"]).ghost {
   > header,
   > footer {
     --dialog-section-fill: light-dark(

package/src/variants/modifiers/_striped.css

@@ -1,11 +1,11 @@
-:root,
-:host {
-  --table-row-fill-striped: oklch(from var(--color-zinc-500) l c h / 0.0375);
-}
+.striped {
+  > :not(table):nth-child(odd) {
+    background-color: color-mix(in srgb, var(--color-background), var(--color-hover-effect) 15%);
+  }
 
-table.striped tbody tr:nth-child(odd) {
-  & th,
-  & td {
-    background-color: var(--table-row-fill-striped);
+  > tbody > tr:nth-child(odd) {
+    &:is(th, td) {
+      background-color: color-mix(in srgb, var(--color-background), var(--color-hover-effect) 15%);
+    }
   }
 }

package/src/variants/modifiers/_subtle.css

@@ -2,7 +2,7 @@
   --subtle-opacity: 60%;
 }
 
-:is(.card, .pane, .panel, button, [type="submit"], [type="button"], [role="button"]) {
+:not([role="link"], a:not([role="button"])) {
   &.subtle {
     &.primary {
       --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
@@ -62,7 +62,7 @@
     --border-color: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-border-opacity));
     --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
-    &:is(.primary, [aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
       --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
       --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));

package/src/variants/modules.css

@@ -8,7 +8,6 @@
 @import "./intent/_success.css";
 @import "./intent/_warning.css";
 
-@import "./modifiers/_container.css";
 @import "./modifiers/_ghost.css";
 @import "./modifiers/_striped.css";
 @import "./modifiers/_subtle.css";

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

@@ -1,137 +0,0 @@
-[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;
-        }
-    }
-}
-
-[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;
-    }
-}