@semanticus/semanticus-css 1.1.0 → 2.0.0

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%);
-}

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, [role="status"], [role="alert"], button, [type="submit"], [type="button"], [role="button"]) {
+:not([role="link"], a:not([role="button"])) {
   &.ghost {
     &.primary {
       --color-background: transparent;

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, [role="status"], [role="alert"], 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/components/_pane.css

@@ -1,19 +0,0 @@
-/* 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/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;
-    }
-}