@semanticus/semanticus-css 0.9.0 → 1.0.0

package/src/variants/intent/_info.css

@@ -0,0 +1,38 @@
+:where(a:not([role="button"])),
+[role="link"] {
+  &.info {
+    --color-text: oklch(from var(--color-info-text) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-text: oklch(from var(--color-info-text-hover) l c h / var(--color-text-opacity));
+    }
+  }
+}
+
+: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));
+      --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-info-focus-ring);
+    }
+  }
+}
+
+: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

@@ -0,0 +1,38 @@
+:where(a:not([role="button"])),
+[role="link"] {
+  &.primary {
+    --color-text: oklch(from var(--color-primary-text) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-text: oklch(from var(--color-primary-text-hover) l c h / var(--color-text-opacity));
+    }
+  }
+}
+
+: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));
+      --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
+    }
+  }
+}
+
+: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

@@ -0,0 +1,38 @@
+:where(a:not([role="button"])),
+[role="link"] {
+  &.secondary {
+    --color-text: oklch(from var(--color-secondary-text) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-text: oklch(from var(--color-secondary-text-hover) l c h / var(--color-text-opacity));
+    }
+  }
+}
+
+: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));
+      --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);
+    }
+  }
+}
+
+: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

@@ -0,0 +1,38 @@
+:where(a:not([role="button"])),
+[role="link"] {
+  &.success {
+    --color-text: oklch(from var(--color-success-text) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-text: oklch(from var(--color-success-text-hover) l c h / var(--color-text-opacity));
+    }
+  }
+}
+
+: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([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: oklch(from var(--color-success-fill-hover) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-success-fill-hover) l c h / var(--color-border-opacity));
+      --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-success-focus-ring);
+    }
+  }
+}
+
+: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

@@ -0,0 +1,38 @@
+:where(a:not([role="button"])),
+[role="link"] {
+  &.warning {
+    --color-text: oklch(from var(--color-warning-text) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-text: oklch(from var(--color-warning-text-hover) l c h / var(--color-text-opacity));
+    }
+  }
+}
+
+: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([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: oklch(from var(--color-warning-fill-hover) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-warning-fill-hover) l c h / var(--color-border-opacity));
+      --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-warning-focus-ring);
+    }
+  }
+}
+
+: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/{_container.css → modifiers/_container.css}

@@ -1,21 +1,14 @@
-/**
- * Container
- * Responsive width container with horizontal padding
- */
 .container,
 .container-fluid {
   width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: var(--spacing);
-  padding-left: var(--spacing);
+  margin-inline: auto;
+  padding-inline: var(--spacing);
 }
 
 .container {
   @media (--breakpoint-sm) {
     max-width: 510px;
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline: calc(var(--spacing) / 2);
   }
 
   @media (--breakpoint-md) {

package/src/variants/modifiers/_ghost.css

@@ -0,0 +1,164 @@
+.ghost {
+  --color-background: transparent;
+
+  background-color: var(--color-background) !important;
+}
+
+:is(.card, .pane, .panel, button, [type="submit"], [type="button"], [role="button"]) {
+  &.ghost {
+    &.primary {
+      --color-background: transparent;
+      --border-color: oklch(from var(--color-primary-fill) l c h / var(--color-border-opacity));
+      --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%);
+    }
+
+    &.secondary {
+      --color-background: transparent;
+      --border-color: oklch(from var(--color-secondary-fill) l c h / var(--color-border-opacity));
+      --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%);
+    }
+
+    &.contrast {
+      --color-background: transparent;
+      --border-color: oklch(from var(--color-contrast-fill) l c h / var(--color-border-opacity));
+      --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%);
+    }
+
+    &.success {
+      --color-background: transparent;
+      --border-color: oklch(from var(--color-success-fill) l c h / var(--color-border-opacity));
+      --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%);
+    }
+
+    &.info {
+      --color-background: transparent;
+      --border-color: oklch(from var(--color-info-fill) l c h / var(--color-border-opacity));
+      --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%);
+    }
+
+    &.warning {
+      --color-background: transparent;
+      --border-color: oklch(from var(--color-warning-fill) l c h / var(--color-border-opacity));
+      --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%);
+    }
+
+    &.danger {
+      --color-background: transparent;
+      --border-color: oklch(from var(--color-danger-fill) l c h / var(--color-border-opacity));
+      --color-text: oklch(from var(--color-danger-text) l c h / var(--color-text-opacity));
+      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+    }
+  }
+}
+
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.ghost {
+    --color-background: transparent;
+    --border-color: oklch(from var(--color-primary-fill) l c h / var(--color-border-opacity));
+    --color-text: oklch(from var(--color-primary-text) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: oklch(from var(--color-primary-fill-hover) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-primary-fill-hover) l c h / var(--color-border-opacity));
+      --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
+      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+    }
+
+    &.secondary {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: oklch(from var(--color-secondary-fill-hover) l c h / var(--color-background-opacity));
+        --border-color: oklch(from var(--color-secondary-fill-hover) l c h / var(--color-border-opacity));
+        --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
+        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+      }
+    }
+
+    &.contrast {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-background-opacity));
+        --border-color: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-border-opacity));
+        --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
+        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+      }
+    }
+
+    &.success {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: oklch(from var(--color-success-fill-hover) l c h / var(--color-background-opacity));
+        --border-color: oklch(from var(--color-success-fill-hover) l c h / var(--color-border-opacity));
+        --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
+        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+      }
+    }
+
+    &.info {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: oklch(from var(--color-info-fill-hover) l c h / var(--color-background-opacity));
+        --border-color: oklch(from var(--color-info-fill-hover) l c h / var(--color-border-opacity));
+        --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
+        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+      }
+    }
+
+    &.warning {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: oklch(from var(--color-warning-fill-hover) l c h / var(--color-background-opacity));
+        --border-color: oklch(from var(--color-warning-fill-hover) l c h / var(--color-border-opacity));
+        --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
+        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+        details &::after {
+          filter: brightness(0);
+        }
+      }
+    }
+
+    &.danger {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: oklch(from var(--color-danger-fill-hover) l c h / var(--color-background-opacity));
+        --border-color: oklch(from var(--color-danger-fill-hover) l c h / var(--color-border-opacity));
+        --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
+        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+      }
+    }
+  }
+}
+
+:is(.card, .pane, .panel).ghost {
+  > header,
+  > footer {
+    --dialog-section-fill: light-dark(
+      color-mix(in srgb, var(--color-slate-50) 25%, white),
+      color-mix(in srgb, var(--color-slate-50), transparent 95%)
+    );
+    --dialog-section-border: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-zinc-350)), transparent 90%);
+  }
+}
+
+/* Reset buttons */
+[type="reset"].ghost {
+  --color-background: transparent;
+  --border-color: oklch(from var(--color-secondary-fill) l c h / var(--color-border-opacity));
+  --color-text: oklch(from var(--color-secondary-text) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+    --color-background: oklch(from var(--color-primary-fill-hover) l c h / var(--color-background-opacity));
+    --border-color: oklch(from var(--color-primary-fill-hover) l c h / var(--color-border-opacity));
+    --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+  }
+}
+
+/* Accordion - ghost buttons have transparent backgrounds with colored text,
+   so the chevron should remain dark to match the text color */
+details summary[role="button"].ghost::after {
+  filter: none;
+}

package/src/variants/modifiers/_striped.css

@@ -0,0 +1,11 @@
+:root,
+:host {
+  --table-row-fill-striped: oklch(from var(--color-zinc-500) l c h / 0.0375);
+}
+
+table.striped tbody tr:nth-child(odd) {
+  & th,
+  & td {
+    background-color: var(--table-row-fill-striped);
+  }
+}

package/src/variants/modifiers/_subtle.css

@@ -0,0 +1,133 @@
+.subtle {
+  --subtle-opacity: 60%;
+}
+
+:is(.card, .pane, .panel, button, [type="submit"], [type="button"], [role="button"]) {
+  &.subtle {
+    &.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%);
+      --color-background: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-border-opacity));
+    }
+
+    &.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%);
+      --color-background: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-border-opacity));
+    }
+
+    &.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%);
+      --color-background: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-border-opacity));
+    }
+
+    &.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%);
+      --color-background: oklch(from var(--color-success-subtle-fill) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-success-subtle-fill) l c h / var(--color-border-opacity));
+    }
+
+    &.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%);
+      --color-background: oklch(from var(--color-info-subtle-fill) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-info-subtle-fill) l c h / var(--color-border-opacity));
+    }
+
+    &.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%);
+      --color-background: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-border-opacity));
+    }
+
+    &.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%);
+      --color-background: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-background-opacity));
+      --border-color: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-border-opacity));
+    }
+  }
+}
+
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.subtle {
+    --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
+    --color-background: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-background-opacity));
+    --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) {
+      --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));
+    }
+
+    &.secondary {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
+        --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));
+      }
+    }
+
+    &.contrast {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
+        --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));
+      }
+    }
+
+    &.success {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
+        --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));
+      }
+    }
+
+    &.info {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
+        --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));
+      }
+    }
+
+    &.warning {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
+        --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));
+      }
+    }
+
+    &.danger {
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
+        --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));
+      }
+    }
+  }
+}
+
+/* Reset buttons */
+[type="reset"].subtle {
+  --color-text: var(--color-secondary-on-fill);
+  --color-background: var(--color-secondary-subtle-fill);
+  --border-color: var(--color-secondary-subtle-fill);
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+    --color-text: var(--color-secondary-on-fill);
+    --color-background: var(--color-secondary-fill);
+    --border-color: var(--color-secondary-fill);
+  }
+}

package/src/variants/modules.css

@@ -1,16 +1,14 @@
-/**
- * Semanticus CSS Variants
- * Class-based variant styles that extend semantic elements
- * Used by the full version which imports global variables, normalize, and semantics separately
- */
+@import "./_variables.css";
 
- @import "./_contained.css";
- @import "./_container.css";
- @import "./_contrast.css";
- @import "./_pane-panel-card.css";
-@import "./_secondary.css";
-@import "./_sidebar.css";
-@import "./_striped.css";
+@import "./intent/_contrast.css";
+@import "./intent/_danger.css";
+@import "./intent/_info.css";
+@import "./intent/_primary.css";
+@import "./intent/_secondary.css";
+@import "./intent/_success.css";
+@import "./intent/_warning.css";
 
-/* Needs to be imported after other variants to override colors */
-@import "./_ghost.css";
+@import "./modifiers/_container.css";
+@import "./modifiers/_ghost.css";
+@import "./modifiers/_striped.css";
+@import "./modifiers/_subtle.css";