@semanticus/semanticus-css 0.9.0 → 1.0.0

package/src/palettes/slate.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Slate
-  Overrides primary color variables for the slate palette
-*/
+:root,
+:host {
+  /* --color-slate-950: #0e1118; */
+  /* --color-slate-900: #181c25; */
+  /* --color-slate-850: #202632; */
+  /* --color-slate-800: #2a3140; */
+  /* --color-slate-750: #333c4e; */
+  /* --color-slate-700: #3d475c; */
+  /* --color-slate-650: #48536b; */
+  --color-slate-600: #525f7a;
+  --color-slate-550: #5d6b89;
+  /* --color-slate-500: #687899; */
+  /* --color-slate-450: #7385a9; */
+  /* --color-slate-400: #8191b5; */
+  --color-slate-350: #909ebe;
+  /* --color-slate-300: #a0acc7; */
+  /* --color-slate-250: #b0b9d0; */
+  /* --color-slate-200: #bfc7d9; */
+  /* --color-slate-150: #cfd5e2; */
+  /* --color-slate-100: #dfe3eb; */
+  /* --color-slate-50: #eff1f4; */
+  /* --color-slate: var(--color-slate-550); */
 
-/* Light theme - Slate */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(130, 146, 170, 0.25);
-  --color-primary-rgb: 72, 83, 107;
-  --color-primary-bg: #48536b;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(72, 83, 107, 0.5);
-  --color-primary-hover: #383f54;
-  --color-primary-hover-bg: #383f54;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(130, 146, 170, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Slate */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(159, 176, 200, 0.1875);
-    --color-primary-rgb: 159, 176, 200;
-    --color-primary-bg: #48536b;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(159, 176, 200, 0.5);
-    --color-primary-hover: #bdcce0;
-    --color-primary-hover-bg: #525f7a;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(159, 176, 200, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-slate-550), var(--color-slate-350));
+  --color-primary-fill: var(--color-slate-600);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(159, 176, 200, 0.1875);
-  --color-primary-rgb: 159, 176, 200;
-  --color-primary-bg: #48536b;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(159, 176, 200, 0.5);
-  --color-primary-hover: #bdcce0;
-  --color-primary-hover-bg: #525f7a;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(159, 176, 200, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/violet.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Violet
-  Overrides primary color variables for the violet palette
-*/
+:root,
+:host {
+  /* --color-violet-950: #190928; */
+  /* --color-violet-900: #251140; */
+  /* --color-violet-850: #321856; */
+  /* --color-violet-800: #3f1e6d; */
+  /* --color-violet-750: #4d2585; */
+  /* --color-violet-700: #5b2d9c; */
+  /* --color-violet-650: #6935b3; */
+  --color-violet-600: #7540bf;
+  --color-violet-550: #8352c5;
+  /* --color-violet-500: #9062ca; */
+  /* --color-violet-450: #9b71cf; */
+  /* --color-violet-400: #a780d4; */
+  --color-violet-350: #b290d9;
+  /* --color-violet-300: #bd9fdf; */
+  /* --color-violet-250: #c9afe4; */
+  /* --color-violet-200: #d3bfe8; */
+  /* --color-violet-150: #decfed; */
+  /* --color-violet-100: #e8dff2; */
+  /* --color-violet-50: #f3eff7; */
+  /* --color-violet: var(--color-violet-550); */
 
-/* Light theme - Violet */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(167, 128, 212, 0.25);
-  --color-primary-rgb: 117, 64, 191;
-  --color-primary-bg: #7540bf;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(117, 64, 191, 0.5);
-  --color-primary-hover: #6935b3;
-  --color-primary-hover-bg: #6935b3;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(167, 128, 212, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Violet */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(189, 159, 223, 0.1875);
-    --color-primary-rgb: 189, 159, 223;
-    --color-primary-bg: #7540bf;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(189, 159, 223, 0.5);
-    --color-primary-hover: #d3bfe8;
-    --color-primary-hover-bg: #8352c5;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(189, 159, 223, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-violet-550), var(--color-violet-350));
+  --color-primary-fill: var(--color-violet-600);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(189, 159, 223, 0.1875);
-  --color-primary-rgb: 189, 159, 223;
-  --color-primary-bg: #7540bf;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(189, 159, 223, 0.5);
-  --color-primary-hover: #d3bfe8;
-  --color-primary-hover-bg: #8352c5;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(189, 159, 223, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

package/src/palettes/yellow.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Yellow
-  Overrides primary color variables for the yellow palette
-*/
+:root,
+:host {
+  /* --color-yellow-950: #141103; */
+  /* --color-yellow-900: #1f1c02; */
+  /* --color-yellow-850: #2b2600; */
+  /* --color-yellow-800: #363100; */
+  /* --color-yellow-750: #423c00; */
+  /* --color-yellow-700: #4e4700; */
+  /* --color-yellow-650: #5b5300; */
+  /* --color-yellow-600: #685f00; */
+  --color-yellow-550: #756b00;
+  /* --color-yellow-500: #827800; */
+  /* --color-yellow-450: #908501; */
+  /* --color-yellow-400: #9e9200; */
+  --color-yellow-350: #ad9f00;
+  /* --color-yellow-300: #bbac00; */
+  /* --color-yellow-250: #caba01; */
+  /* --color-yellow-200: #d9c800; */
+  /* --color-yellow-150: #e8d600; */
+  --color-yellow-100: #f2df0d;
+  /* --color-yellow-50: #fdf1b4; */
+  /* --color-yellow: var(--color-yellow-550); */
 
-/* Light theme - Yellow */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(209, 188, 0, 0.25);
-  --color-primary-rgb: 138, 122, 0;
-  --color-primary-bg: #fcf19c;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(138, 122, 0, 0.5);
-  --color-primary-hover: #6b5f00;
-  --color-primary-hover-bg: #fdf2b4;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(209, 188, 0, 0.5);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-
-/* Dark theme - Yellow */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(233, 212, 0, 0.1875);
-    --color-primary-rgb: 233, 212, 0;
-    --color-primary-bg: #fcf19c;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(233, 212, 0, 0.5);
-    --color-primary-hover: #f7ec58;
-    --color-primary-hover-bg: #fcf4b6;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(233, 212, 0, 0.375);
-    --color-primary-inverse: #000;
-    --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-yellow-550), var(--color-yellow-350));
+  --color-primary-fill: var(--color-yellow-100);
+  --color-primary-on-fill: black;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(233, 212, 0, 0.1875);
-  --color-primary-rgb: 233, 212, 0;
-  --color-primary-bg: #fcf19c;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(233, 212, 0, 0.5);
-  --color-primary-hover: #f7ec58;
-  --color-primary-hover-bg: #fcf4b6;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(233, 212, 0, 0.375);
-  --color-primary-inverse: #000;
-  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0.5rem oklch(0% 0 0deg / 0.25), 0 0 0.5rem oklch(0% 0 0deg / 0.25));
 }

package/src/palettes/zinc.css

@@ -1,56 +1,31 @@
-/*
-  Semanticus CSS Palette: Zinc
-  Overrides primary color variables for the zinc palette
-*/
+:root,
+:host {
+  /* --color-zinc-950: #0f1114; */
+  /* --color-zinc-900: #191c20; */
+  /* --color-zinc-850: #23262c; */
+  /* --color-zinc-800: #2d3138; */
+  /* --color-zinc-750: #373c44; */
+  /* --color-zinc-700: #424751; */
+  /* --color-zinc-650: #4d535e; */
+  /* --color-zinc-600: #5c6370; */
+  --color-zinc-550: #646b79;
+  /* --color-zinc-500: #6f7887; */
+  /* --color-zinc-450: #7b8495; */
+  /* --color-zinc-400: #8891a4; */
+  --color-zinc-350: #969eaf;
+  /* --color-zinc-300: #a4acba; */
+  /* --color-zinc-250: #b3b9c5; */
+  /* --color-zinc-200: #c2c7d0; */
+  /* --color-zinc-150: #d1d5db; */
+  /* --color-zinc-100: #e0e3e7; */
+  /* --color-zinc-50: #f0f1f3; */
+  /* --color-zinc: var(--color-zinc-550); */
 
-/* Light theme - Zinc */
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --color-text-selection: rgba(127, 139, 158, 0.25);
-  --color-primary-rgb: 82, 95, 122;
-  --color-primary-bg: #525f7a;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(82, 95, 122, 0.5);
-  --color-primary-hover: #424b61;
-  --color-primary-hover-bg: #424b61;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(127, 139, 158, 0.5);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-}
-
-/* Dark theme - Zinc */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --color-text-selection: rgba(155, 168, 189, 0.1875);
-    --color-primary-rgb: 155, 168, 189;
-    --color-primary-bg: #525f7a;
-    --color-primary-border: var(--color-primary-bg);
-    --color-primary-underline: rgba(155, 168, 189, 0.5);
-    --color-primary-hover: #bac5d4;
-    --color-primary-hover-bg: #5d6b89;
-    --color-primary-hover-border: var(--color-primary-hover-bg);
-    --color-primary-hover-underline: var(--color-primary-hover);
-    --color-primary-focus: rgba(155, 168, 189, 0.375);
-    --color-primary-inverse: #fff;
-    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-}
+  /* System tokens */
+  --color-primary-text: light-dark(var(--color-zinc-550), var(--color-zinc-350));
+  --color-primary-fill: var(--color-zinc-550);
+  --color-primary-on-fill: white;
 
-[data-theme="dark"] {
-  --color-text-selection: rgba(155, 168, 189, 0.1875);
-  --color-primary-rgb: 155, 168, 189;
-  --color-primary-bg: #525f7a;
-  --color-primary-border: var(--color-primary-bg);
-  --color-primary-underline: rgba(155, 168, 189, 0.5);
-  --color-primary-hover: #bac5d4;
-  --color-primary-hover-bg: #5d6b89;
-  --color-primary-hover-border: var(--color-primary-hover-bg);
-  --color-primary-hover-underline: var(--color-primary-hover);
-  --color-primary-focus: rgba(155, 168, 189, 0.375);
-  --color-primary-inverse: #fff;
-  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  /* Component tokens */
+  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
 }

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

@@ -1,6 +1,3 @@
-/**
- * Loading ([aria-busy=true])
- */
 [aria-busy=true]:not(input, select, textarea, html, form) {
   white-space: nowrap;
 

package/src/semantics/attributes/_hidden.css

@@ -1,6 +1,3 @@
-/**
- * Hidden elements
- */
 [hidden],
 template {
   display: none !important;

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

@@ -1,9 +1,6 @@
-/**
- * Group ([role="group"], [role="search"])
- */
 [role="search"],
 [role="group"] {
-    border-radius: var(--border-radius);
+    border-radius: var(--radius);
     box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
     display: inline-flex;
     gap: 0;
@@ -21,7 +18,7 @@
         margin-bottom: 0;
 
         &:not(:first-child) {
-            margin-left: calc(var(--border-width) * -1);
+            margin-left: calc(var(--border-size) * -1);
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
         }
@@ -50,13 +47,13 @@
         margin-bottom: 0;
         /* Constrain details height to just the button, not the dropdown menu */
         height: calc(
-            1rem * var(--line-height) + var(--form-element-spacing-vertical) *
-                2 + var(--border-width) * 2
+            1rem * var(--line-height) + var(--input-spacing-vertical) *
+                2 + var(--border-size) * 2
         );
         overflow: visible;
 
         &:not(:first-child) {
-            margin-left: calc(var(--border-width) * -1);
+            margin-left: calc(var(--border-size) * -1);
 
             & > summary {
                 border-top-left-radius: 0;
@@ -95,7 +92,7 @@
             [type="button"]:focus,
             [role="button"]:focus
         ) {
-            --group-shadow: var(--group-shadow-focus-with-button);
+            --group-shadow: var(--group-shadow-focus-button);
 
             & input:not([type="checkbox"], [type="radio"]),
             & select {
@@ -104,16 +101,16 @@
         }
 
         &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
-            --group-shadow: var(--group-shadow-focus-with-input);
+            --group-shadow: var(--group-shadow-focus-input);
 
             & button,
             & [type="submit"],
             & [type="button"],
             & [role="button"] {
-                --button-shadow: 0 0 0 var(--border-width)
-                    var(--color-primary-border);
-                --button-shadow-hover: 0 0 0 var(--border-width)
-                    var(--color-primary-hover-border);
+                --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);
             }
         }
 

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

@@ -1,9 +1,6 @@
-/**
- * Minimal grid system with auto-layout columns
- */
 [role="toolbar"] {
-  grid-column-gap: var(--grid-column-gap);
-  grid-row-gap: var(--grid-row-gap);
+  grid-column-gap: var(--spacing);
+  grid-row-gap: var(--spacing);
   display: grid;
   grid-template-columns: 1fr;
 

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

@@ -1,6 +1,3 @@
-/**
- * Tooltip ([role="tooltip"])
- */
 :has(> [role="tooltip"]) {
   position: relative;
   display: inline-block;
@@ -21,8 +18,8 @@
   left: 50%;
   padding: 0.25rem 0.5rem;
   transform: translate(-50%, -0.25rem);
-  border-radius: var(--border-radius);
-  background: var(--tooltip-bg);
+  border-radius: var(--radius);
+  background: var(--tooltip-fill);
   color: var(--tooltip-text);
   font-style: normal;
   font-weight: var(--font-weight);
@@ -40,7 +37,7 @@
     top: 100%;
     left: 50%;
     transform: translate(-50%, 0);
-    border-top: 0.3rem solid var(--tooltip-bg);
+    border-top: 0.3rem solid var(--tooltip-fill);
     border-right: 0.3rem solid transparent;
     border-left: 0.3rem solid transparent;
   }
@@ -55,7 +52,7 @@
       bottom: 100%;
       transform: translate(-50%, 0);
       border-top: none;
-      border-bottom: 0.3rem solid var(--tooltip-bg);
+      border-bottom: 0.3rem solid var(--tooltip-fill);
     }
   }
 
@@ -72,7 +69,7 @@
       transform: translate(0, -50%);
       border-top: 0.3rem solid transparent;
       border-bottom: 0.3rem solid transparent;
-      border-left: 0.3rem solid var(--tooltip-bg);
+      border-left: 0.3rem solid var(--tooltip-fill);
       border-right: none;
     }
   }
@@ -90,7 +87,7 @@
       transform: translate(0, -50%);
       border-top: 0.3rem solid transparent;
       border-bottom: 0.3rem solid transparent;
-      border-right: 0.3rem solid var(--tooltip-bg);
+      border-right: 0.3rem solid var(--tooltip-fill);
       border-left: none;
     }
   }

package/src/semantics/elements/_article.css

@@ -1,6 +1,3 @@
-/**
- * Article
- */
 article {
   width: 100%;
 }

package/src/semantics/elements/_aside.css

@@ -1,11 +1,5 @@
-/**
- * Aside its width changes according to certain breakpoints,
- * and its height grows to fill the available space,
- * and stacks its children in a column with space between them (like a <nav> would).
- * In case of a single child, this child will fill the entire height.
- */
 aside {
-  width: var(--sidebar-width) !important;
+  width: var(--sidebar-size) !important;
   padding: var(--spacing) !important;
 
   :where(ol, ul, li) {

package/src/semantics/elements/_blockquote.css

@@ -1,7 +1,7 @@
 blockquote {
   border-inline-end: none;
-  border-inline-start: 0.25rem solid var(--color-border-muted);
-  border-left: 0.25rem solid var(--color-border-muted);
+  border-inline-start: 0.25rem solid var(--color-border);
+  border-left: 0.25rem solid var(--color-border);
   border-right: none;
   color: var(--color-text);
   display: block;

package/src/semantics/elements/_body.css

@@ -1,8 +1,5 @@
-/**
- * Body fills up the available width, and has the same height as the viewport.
- * Stacks its children vertically.
- */
 body {
   width: 100%;
   min-height: 100svh;
+  margin: 0; /* modern-normalize */
 }

package/src/semantics/elements/_button.css

@@ -1,6 +1,3 @@
-/**
- * Button
- */
 button {
   margin: 0;
   overflow: visible;
@@ -21,16 +18,16 @@ button,
 [type=button],
 [type=file]::file-selector-button,
 [role=button] {
-  --color-background: var(--color-primary-bg);
-  --border-color: var(--color-primary-border);
-  --color-text: var(--color-primary-inverse);
-  --shadow-lg: var(--button-shadow, 0 0 0 rgba(0, 0, 0, 0));
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
+  --color-background: var(--color-primary-fill);
+  --border-color: var(--color-primary-fill);
+  --color-text: var(--color-primary-on-fill);
+  --shadow: var(--button-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
+  border: var(--border-size) solid var(--border-color);
+  border-radius: var(--radius);
   outline: none;
   background-color: var(--color-background);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow);
   color: var(--color-text);
   font-weight: var(--font-weight);
   font-size: 1rem;
@@ -52,10 +49,10 @@ button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active,
 [type=file]::file-selector-button:is(:hover, :active, :focus),
 [role=button]:is([aria-current]:not([aria-current=false])),
 [role=button]:is(:hover, :active, :focus) {
-  --color-background: var(--color-primary-hover-bg);
-  --border-color: var(--color-primary-hover-border);
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0));
-  --color-text: var(--color-primary-inverse);
+  --color-background: var(--color-primary-fill-hover);
+  --border-color: var(--color-primary-fill-hover);
+  --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0));
+  --color-text: var(--color-primary-on-fill);
 }
 
 button:focus, button:is([aria-current]:not([aria-current=false])):focus,
@@ -68,7 +65,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 [type=file]::file-selector-button:focus,
 [role=button]:focus,
 [role=button]:is([aria-current]:not([aria-current=false])):focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-primary-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);
 }
 
 [type=submit],
@@ -80,25 +77,25 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 [type=reset],
 [type=file]::file-selector-button,
 [aria-label="Close"] {
-  --color-background: var(--color-secondary-bg);
-  --border-color: var(--color-secondary-border);
-  --color-text: var(--color-secondary-inverse);
+  --color-background: var(--color-secondary-fill);
+  --border-color: var(--color-secondary-fill);
+  --color-text: var(--color-secondary-on-fill);
   cursor: pointer;
 }
 
 [type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
 [type=file]::file-selector-button:is(:hover, :active, :focus),
 [aria-label="Close"]:is(:hover, :active, :focus) {
-  --color-background: var(--color-secondary-hover-bg);
-  --border-color: var(--color-secondary-hover-border);
-  --color-text: var(--color-secondary-inverse);
+  --color-background: var(--color-secondary-fill-hover);
+  --border-color: var(--color-secondary-fill-hover);
+  --color-text: var(--color-secondary-on-fill);
 }
 
 [type=reset]:focus,
 [aria-label="Close"]:focus,
 [type=reset]:is([aria-current]:not([aria-current=false])):focus,
 [type=file]::file-selector-button:focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-secondary-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(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
@@ -118,13 +115,13 @@ aside {
 
 nav {
   :where(button, [role=button], [type=button], input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
-    --form-element-spacing-vertical: calc(var(--nav-link-spacing) - var(--border-width) * 2);
-    --form-element-spacing-horizontal: var(--nav-link-spacing);
+    --input-spacing-vertical: calc(var(--nav-link-gap) - var(--border-size) * 2);
+    --input-spacing-horizontal: var(--nav-link-gap);
 
     height: auto;
     margin-right: inherit;
     margin-bottom: 0;
     margin-left: inherit;
-    padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+    padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
   }
 }

package/src/semantics/elements/_code.css

@@ -1,15 +1,12 @@
-/**
- * Code
- */
 pre,
 code,
 kbd,
 samp {
   font-size: 0.875em;
   font-family: var(--font-family);
-  border-radius: var(--border-radius);
-  background: var(--code-bg);
-  color: var(--code-color);
+  border-radius: var(--radius);
+  background: var(--code-fill);
+  color: var(--code-text);
   font-weight: var(--font-weight);
   line-height: initial;
 }
@@ -47,7 +44,7 @@ pre {
 }
 
 kbd {
-  background-color: var(--kbd-bg);
-  color: var(--kbd-color);
+  background-color: var(--kbd-fill);
+  color: var(--kbd-text);
   vertical-align: baseline;
 }