@cirthcss/cirth 0.15.0-beta.2 → 0.15.0

package/README.md

@@ -57,8 +57,8 @@ on the first paint.
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.14.1/dist/cirth.min.css"
-  integrity="sha384-sU2A7luz2xm9uj6FZ0hdflySgcbY9uN+QeQgJzyaZaM4ujBLxiPPibqEcaG2Ckuk"
+  href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.15.0/dist/cirth.min.css"
+  integrity="sha384-EY9wuVx8+257bjfSiQThO5hiMpZ+YQAcVqmR6XcdxqYI0+qEJ15YD3/RVWYApOiN"
   crossorigin="anonymous">
 ```
 
@@ -183,7 +183,7 @@ loading the framework.
 :root {
   --cirth-font-family: Inter, system-ui, sans-serif;
   --cirth-primary: #2563eb;
-  --cirth-primary-background: #2563eb;
+  --cirth-primary-surface: #2563eb;
   --cirth-primary-border: #2563eb;
   --cirth-border-radius: 0.375rem;
   --cirth-spacing: 1rem;

package/dist/cirth.classless.css

@@ -213,7 +213,7 @@ del {
 }
 
 :where(a:not([role="button"])), [role="link"] {
-  --cirth-color: var(--cirth-primary);
+  --cirth-color: var(--cirth-primary-text);
   --cirth-background-color: transparent;
   --cirth-underline: var(--cirth-primary-underline);
   background-color: var(--cirth-background-color);
@@ -227,8 +227,8 @@ del {
 }
 
 :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --cirth-color: var(--cirth-primary-hover);
-  --cirth-underline: var(--cirth-primary-hover-underline);
+  --cirth-color: var(--cirth-primary-active);
+  --cirth-underline: var(--cirth-primary-underline-active);
   --cirth-text-decoration: underline;
 }
 
@@ -260,9 +260,9 @@ button, [type="submit"], [type="reset"], [type="button"] {
 }
 
 button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
-  --cirth-background-color: var(--cirth-primary-background);
+  --cirth-background-color: var(--cirth-primary-surface);
   --cirth-border-color: var(--cirth-primary-border);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
   max-width: 100%;
   min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -285,9 +285,9 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
 }
 
 [type="file"]::file-selector-button {
-  --cirth-background-color: var(--cirth-primary-background);
+  --cirth-background-color: var(--cirth-primary-surface);
   --cirth-border-color: var(--cirth-primary-border);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
   max-width: 100%;
   min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -310,24 +310,24 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
 }
 
 button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :focus), [type="submit"][aria-current]:not([aria-current="false"]), [type="submit"]:is(:hover, :active, :focus), [type="reset"][aria-current]:not([aria-current="false"]), [type="reset"]:is(:hover, :active, :focus), [type="button"][aria-current]:not([aria-current="false"]), [type="button"]:is(:hover, :active, :focus), [role="button"][aria-current]:not([aria-current="false"]), [role="button"]:is(:hover, :active, :focus) {
-  --cirth-background-color: var(--cirth-primary-hover-background);
-  --cirth-border-color: var(--cirth-primary-hover-border);
+  --cirth-background-color: var(--cirth-primary-surface-active);
+  --cirth-border-color: var(--cirth-primary-border-active);
   --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
 }
 
 [type="file"]::file-selector-button:is() {
-  --cirth-background-color: var(--cirth-primary-hover-background);
-  --cirth-border-color: var(--cirth-primary-hover-border);
+  --cirth-background-color: var(--cirth-primary-surface-active);
+  --cirth-border-color: var(--cirth-primary-border-active);
   --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
 }
 
 [type="file"]::file-selector-button:is(:hover, :active, :focus) {
-  --cirth-background-color: var(--cirth-primary-hover-background);
-  --cirth-border-color: var(--cirth-primary-hover-border);
+  --cirth-background-color: var(--cirth-primary-surface-active);
+  --cirth-border-color: var(--cirth-primary-border-active);
   --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
-  --cirth-color: var(--cirth-primary-inverse);
+  --cirth-color: var(--cirth-primary-on-surface);
 }
 
 button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active, [role="button"]:active {
@@ -349,29 +349,29 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
 }
 
 [type="reset"] {
-  --cirth-background-color: var(--cirth-secondary-background);
+  --cirth-background-color: var(--cirth-secondary-surface);
   --cirth-border-color: var(--cirth-secondary-border);
-  --cirth-color: var(--cirth-secondary-inverse);
+  --cirth-color: var(--cirth-secondary-on-surface);
   cursor: pointer;
 }
 
 [type="file"]::file-selector-button {
-  --cirth-background-color: var(--cirth-secondary-background);
+  --cirth-background-color: var(--cirth-secondary-surface);
   --cirth-border-color: var(--cirth-secondary-border);
-  --cirth-color: var(--cirth-secondary-inverse);
+  --cirth-color: var(--cirth-secondary-on-surface);
   cursor: pointer;
 }
 
 [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --cirth-background-color: var(--cirth-secondary-hover-background);
-  --cirth-border-color: var(--cirth-secondary-hover-border);
-  --cirth-color: var(--cirth-secondary-inverse);
+  --cirth-background-color: var(--cirth-secondary-surface-active);
+  --cirth-border-color: var(--cirth-secondary-border-active);
+  --cirth-color: var(--cirth-secondary-on-surface);
 }
 
 [type="file"]::file-selector-button:is(:hover, :active, :focus) {
-  --cirth-background-color: var(--cirth-secondary-hover-background);
-  --cirth-border-color: var(--cirth-secondary-hover-border);
-  --cirth-color: var(--cirth-secondary-inverse);
+  --cirth-background-color: var(--cirth-secondary-surface-active);
+  --cirth-border-color: var(--cirth-secondary-border-active);
+  --cirth-color: var(--cirth-secondary-on-surface);
 }
 
 [type="reset"]:focus-visible {
@@ -616,6 +616,20 @@ input, select, textarea {
   border-style: dashed;
 }
 
+input[type="number"][readonly] {
+  appearance: textfield;
+}
+
+input[type="number"][readonly]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"][readonly]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
 input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
   --cirth-background-color: var(--cirth-form-element-active-background-color);
 }
@@ -782,7 +796,7 @@ label:has([type="checkbox"], [type="radio"]) {
 }
 
 [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
-  --cirth-background-color: var(--cirth-primary-background);
+  --cirth-background-color: var(--cirth-primary-surface);
   --cirth-border-color: var(--cirth-primary-border);
 }
 
@@ -797,7 +811,7 @@ label:has([type="checkbox"], [type="radio"]) {
 }
 
 [type="checkbox"]:not([role="switch"]):checked:before, [type="checkbox"]:not([role="switch"]):indeterminate:before {
-  background-color: var(--cirth-primary-inverse);
+  background-color: var(--cirth-primary-on-surface);
   content: "";
   width: 100%;
   height: 100%;
@@ -818,7 +832,7 @@ label:has([type="checkbox"], [type="radio"]) {
 }
 
 [type="checkbox"]:not([role="switch"]):indeterminate {
-  --cirth-background-color: var(--cirth-primary-background);
+  --cirth-background-color: var(--cirth-primary-surface);
   --cirth-border-color: var(--cirth-primary-border);
 }
 
@@ -831,7 +845,7 @@ label:has([type="checkbox"], [type="radio"]) {
 }
 
 [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
-  --cirth-background-color: var(--cirth-primary-inverse);
+  --cirth-background-color: var(--cirth-primary-on-surface);
   border-width: .42em;
 }
 
@@ -995,8 +1009,8 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 }
 
 [type="file"]:is(:hover, :active, :focus)::file-selector-button {
-  --cirth-background-color: var(--cirth-secondary-hover-background);
-  --cirth-border-color: var(--cirth-secondary-hover-border);
+  --cirth-background-color: var(--cirth-secondary-surface-active);
+  --cirth-border-color: var(--cirth-secondary-border-active);
 }
 
 [type="file"]:focus::file-selector-button {
@@ -1058,7 +1072,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 @media (hover: hover) and (pointer: fine) {
   [type="range"]:hover:not(:active, :focus, :disabled) {
     --cirth-range-border-color: var(--cirth-range-active-border-color);
-    --cirth-range-thumb-color: var(--cirth-secondary-hover);
+    --cirth-range-thumb-color: var(--cirth-secondary-active);
   }
 }
 
@@ -1338,7 +1352,7 @@ article > footer {
   --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
     var(--cirth-primary-border);
   --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-    var(--cirth-primary-hover-border);
+    var(--cirth-primary-border-active);
 }
 
 [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"]:not(fieldset) button:focus, [role="group"]:not(fieldset) [type="submit"]:focus, [role="group"]:not(fieldset) [type="reset"]:focus, [role="group"]:not(fieldset) [type="button"]:focus, [role="group"]:not(fieldset) [role="button"]:focus {
@@ -1673,11 +1687,11 @@ header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li
 header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
   --cirth-color: color-mix(in oklch,
     var(--cirth-muted-color),
-    var(--cirth-contrast));
+    var(--cirth-contrast-text));
 }
 
 header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
-  --cirth-color: var(--cirth-contrast);
+  --cirth-color: var(--cirth-contrast-text);
   font-weight: var(--cirth-font-weight-semibold);
 }
 
@@ -2104,18 +2118,18 @@ details summary[role="button"]:after {
   --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
   --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
   --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
-  --cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
+  --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
   --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
-  --cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
-  --cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
+  --cirth-secondary-active: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
+  --cirth-secondary-surface-active: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
   --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
-  --cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
-  --cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
+  --cirth-contrast-text: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
+  --cirth-contrast-surface: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
   --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
-  --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
-  --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
+  --cirth-contrast-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
+  --cirth-contrast-surface-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
   --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
-  --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
+  --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
   --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
   --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
     .0145rem .029rem .174rem oklch(9% .011 280 / .01698), .0335rem .067rem .402rem oklch(9% .011 280 / .024), .0625rem .125rem .75rem oklch(9% .011 280 / .03), .1125rem .225rem 1.35rem oklch(9% .011 280 / .036), .2085rem .417rem 2.502rem oklch(9% .011 280 / .04302), .5rem 1rem 6rem oklch(9% .011 280 / .06), 0 0 0 .0625rem oklch(9% .011 280 / .015));
@@ -2151,17 +2165,20 @@ details summary[role="button"]:after {
   --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
   --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
   --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
-  --cirth-primary-background: var(--cirth-primary);
-  --cirth-primary-border: var(--cirth-primary-background);
+  --cirth-primary-text: var(--cirth-primary);
+  --cirth-primary-surface: var(--cirth-primary);
+  --cirth-primary-border: var(--cirth-primary-surface);
   --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
-  --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
-  --cirth-primary-hover-background: color-mix(in oklch,
+  --cirth-primary-active: color-mix(in oklch,
+    var(--cirth-primary) 83.5%,
+    black);
+  --cirth-primary-surface-active: color-mix(in oklch,
     var(--cirth-primary) 91.7%,
     black);
-  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
-  --cirth-primary-hover-underline: var(--cirth-primary-hover);
+  --cirth-primary-border-active: var(--cirth-primary-surface-active);
+  --cirth-primary-underline-active: var(--cirth-primary-active);
   --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
-  --cirth-primary-inverse: oklch(100% 0 0);
+  --cirth-primary-on-surface: oklch(100% 0 0);
   --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
   --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
   --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
@@ -2170,14 +2187,14 @@ details summary[role="button"]:after {
   --cirth-form-element-active-background-color: var(--cirth-canvas);
   --cirth-dropdown-background-color: var(--cirth-card-background-color);
   --cirth-popover-background-color: var(--cirth-card-background-color);
-  --cirth-secondary-background: oklch(48.3% .03 280);
-  --cirth-secondary-border: var(--cirth-secondary-background);
-  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
-  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-  --cirth-secondary-inverse: oklch(100% 0 0);
-  --cirth-contrast-border: var(--cirth-contrast-background);
-  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
-  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
+  --cirth-secondary-surface: oklch(48.3% .03 280);
+  --cirth-secondary-border: var(--cirth-secondary-surface);
+  --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
+  --cirth-secondary-underline-active: var(--cirth-secondary-active);
+  --cirth-secondary-on-surface: oklch(100% 0 0);
+  --cirth-contrast-border: var(--cirth-contrast-surface);
+  --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
+  --cirth-contrast-underline-active: var(--cirth-secondary-active);
   --cirth-mark-background-color: color-mix(in oklab,
     var(--cirth-primary) 18%,
     var(--cirth-canvas));
@@ -2202,12 +2219,12 @@ details summary[role="button"]:after {
   --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
   --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
   --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-  --cirth-switch-checked-background-color: var(--cirth-primary-background);
-  --cirth-switch-color: var(--cirth-primary-inverse);
+  --cirth-switch-checked-background-color: var(--cirth-primary-surface);
+  --cirth-switch-color: var(--cirth-primary-on-surface);
   --cirth-range-thumb-border-color: var(--cirth-background-color);
-  --cirth-range-thumb-color: var(--cirth-secondary);
-  --cirth-range-thumb-active-color: var(--cirth-primary-background);
-  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
+  --cirth-range-thumb-color: var(--cirth-secondary-text);
+  --cirth-range-thumb-active-color: var(--cirth-primary-surface);
+  --cirth-accordion-active-summary-color: var(--cirth-primary-active);
   --cirth-accordion-close-summary-color: var(--cirth-ink);
   --cirth-accordion-open-summary-color: var(--cirth-ink);
   --cirth-card-border-color: color-mix(in oklab,
@@ -2217,7 +2234,7 @@ details summary[role="button"]:after {
   --cirth-meter-optimum-color: var(--cirth-success);
   --cirth-meter-suboptimum-color: var(--cirth-warning);
   --cirth-meter-even-less-good-color: var(--cirth-error);
-  --cirth-progress-color: var(--cirth-primary-background);
+  --cirth-progress-color: var(--cirth-primary-surface);
   --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' 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");
   --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' 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");
   --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' 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");
@@ -2241,20 +2258,21 @@ details summary[role="button"]:after {
     --cirth-warning-border: var(--cirth-warning);
     --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
     --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
-    --cirth-primary-background: color-mix(in oklch,
+    --cirth-primary-text: var(--cirth-primary);
+    --cirth-primary-surface: color-mix(in oklch,
       var(--cirth-primary) 75.2%,
       black);
-    --cirth-primary-border: var(--cirth-primary-background);
+    --cirth-primary-border: var(--cirth-primary-surface);
     --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
-    --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
-    --cirth-primary-hover-background: color-mix(in oklch,
+    --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
+    --cirth-primary-surface-active: color-mix(in oklch,
       var(--cirth-primary) 72%,
       black);
-    --cirth-primary-hover-border: var(--cirth-primary-hover-background);
-    --cirth-primary-hover-underline: var(--cirth-primary-hover);
+    --cirth-primary-border-active: var(--cirth-primary-surface-active);
+    --cirth-primary-underline-active: var(--cirth-primary-active);
     --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
     --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
-    --cirth-primary-inverse: oklch(100% 0 0);
+    --cirth-primary-on-surface: oklch(100% 0 0);
     --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
     --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
     --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2262,14 +2280,14 @@ details summary[role="button"]:after {
     --cirth-form-element-active-background-color: var(--cirth-canvas);
     --cirth-dropdown-background-color: var(--cirth-card-background-color);
     --cirth-popover-background-color: var(--cirth-card-background-color);
-    --cirth-secondary-background: oklch(48.3% .03 280);
-    --cirth-secondary-border: var(--cirth-secondary-background);
-    --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
-    --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-    --cirth-secondary-inverse: oklch(100% 0 0);
-    --cirth-contrast-border: var(--cirth-contrast-background);
-    --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
-    --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
+    --cirth-secondary-surface: oklch(48.3% .03 280);
+    --cirth-secondary-border: var(--cirth-secondary-surface);
+    --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
+    --cirth-secondary-underline-active: var(--cirth-secondary-active);
+    --cirth-secondary-on-surface: oklch(100% 0 0);
+    --cirth-contrast-border: var(--cirth-contrast-surface);
+    --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
+    --cirth-contrast-underline-active: var(--cirth-contrast-active);
     --cirth-mark-background-color: color-mix(in oklab,
       var(--cirth-primary) 24%,
       var(--cirth-canvas));
@@ -2294,12 +2312,12 @@ details summary[role="button"]:after {
     --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
     --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
     --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-    --cirth-switch-checked-background-color: var(--cirth-primary-background);
-    --cirth-switch-color: var(--cirth-primary-inverse);
+    --cirth-switch-checked-background-color: var(--cirth-primary-surface);
+    --cirth-switch-color: var(--cirth-primary-on-surface);
     --cirth-range-thumb-border-color: var(--cirth-background-color);
-    --cirth-range-thumb-color: var(--cirth-secondary);
-    --cirth-range-thumb-active-color: var(--cirth-primary-background);
-    --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
+    --cirth-range-thumb-color: var(--cirth-secondary-text);
+    --cirth-range-thumb-active-color: var(--cirth-primary-surface);
+    --cirth-accordion-active-summary-color: var(--cirth-primary-active);
     --cirth-accordion-close-summary-color: var(--cirth-ink);
     --cirth-accordion-open-summary-color: var(--cirth-ink);
     --cirth-card-border-color: color-mix(in oklab,
@@ -2309,7 +2327,7 @@ details summary[role="button"]:after {
     --cirth-meter-optimum-color: var(--cirth-success);
     --cirth-meter-suboptimum-color: var(--cirth-warning);
     --cirth-meter-even-less-good-color: var(--cirth-error);
-    --cirth-progress-color: var(--cirth-primary);
+    --cirth-progress-color: var(--cirth-primary-text);
     --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
     --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
     --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
@@ -2333,20 +2351,21 @@ details summary[role="button"]:after {
   --cirth-warning-border: var(--cirth-warning);
   --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
   --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
-  --cirth-primary-background: color-mix(in oklch,
+  --cirth-primary-text: var(--cirth-primary);
+  --cirth-primary-surface: color-mix(in oklch,
     var(--cirth-primary) 75.2%,
     black);
-  --cirth-primary-border: var(--cirth-primary-background);
+  --cirth-primary-border: var(--cirth-primary-surface);
   --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
-  --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
-  --cirth-primary-hover-background: color-mix(in oklch,
+  --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
+  --cirth-primary-surface-active: color-mix(in oklch,
     var(--cirth-primary) 72%,
     black);
-  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
-  --cirth-primary-hover-underline: var(--cirth-primary-hover);
+  --cirth-primary-border-active: var(--cirth-primary-surface-active);
+  --cirth-primary-underline-active: var(--cirth-primary-active);
   --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
   --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
-  --cirth-primary-inverse: oklch(100% 0 0);
+  --cirth-primary-on-surface: oklch(100% 0 0);
   --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
   --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
   --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2354,14 +2373,14 @@ details summary[role="button"]:after {
   --cirth-form-element-active-background-color: var(--cirth-canvas);
   --cirth-dropdown-background-color: var(--cirth-card-background-color);
   --cirth-popover-background-color: var(--cirth-card-background-color);
-  --cirth-secondary-background: oklch(48.3% .03 280);
-  --cirth-secondary-border: var(--cirth-secondary-background);
-  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
-  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-  --cirth-secondary-inverse: oklch(100% 0 0);
-  --cirth-contrast-border: var(--cirth-contrast-background);
-  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
-  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
+  --cirth-secondary-surface: oklch(48.3% .03 280);
+  --cirth-secondary-border: var(--cirth-secondary-surface);
+  --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
+  --cirth-secondary-underline-active: var(--cirth-secondary-active);
+  --cirth-secondary-on-surface: oklch(100% 0 0);
+  --cirth-contrast-border: var(--cirth-contrast-surface);
+  --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
+  --cirth-contrast-underline-active: var(--cirth-contrast-active);
   --cirth-mark-background-color: color-mix(in oklab,
     var(--cirth-primary) 24%,
     var(--cirth-canvas));
@@ -2386,12 +2405,12 @@ details summary[role="button"]:after {
   --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
   --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
   --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-  --cirth-switch-checked-background-color: var(--cirth-primary-background);
-  --cirth-switch-color: var(--cirth-primary-inverse);
+  --cirth-switch-checked-background-color: var(--cirth-primary-surface);
+  --cirth-switch-color: var(--cirth-primary-on-surface);
   --cirth-range-thumb-border-color: var(--cirth-background-color);
-  --cirth-range-thumb-color: var(--cirth-secondary);
-  --cirth-range-thumb-active-color: var(--cirth-primary-background);
-  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
+  --cirth-range-thumb-color: var(--cirth-secondary-text);
+  --cirth-range-thumb-active-color: var(--cirth-primary-surface);
+  --cirth-accordion-active-summary-color: var(--cirth-primary-active);
   --cirth-accordion-close-summary-color: var(--cirth-ink);
   --cirth-accordion-open-summary-color: var(--cirth-ink);
   --cirth-card-border-color: color-mix(in oklab,
@@ -2401,7 +2420,7 @@ details summary[role="button"]:after {
   --cirth-meter-optimum-color: var(--cirth-success);
   --cirth-meter-suboptimum-color: var(--cirth-warning);
   --cirth-meter-even-less-good-color: var(--cirth-error);
-  --cirth-progress-color: var(--cirth-primary);
+  --cirth-progress-color: var(--cirth-primary-text);
   --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
   --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
   --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
@@ -2411,7 +2430,7 @@ details summary[role="button"]:after {
 }
 
 progress, [type="checkbox"], [type="radio"], [type="range"] {
-  accent-color: var(--cirth-primary);
+  accent-color: var(--cirth-primary-text);
 }
 
 @media (prefers-contrast: more) {
@@ -2424,7 +2443,7 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
     --cirth-h5-color: var(--cirth-color);
     --cirth-h6-color: var(--cirth-color);
     --cirth-muted-color: oklch(39.7% .028 280);
-    --cirth-secondary: oklch(39.7% .028 280);
+    --cirth-secondary-text: oklch(39.7% .028 280);
     --cirth-code-color: oklch(35.3% .027 280);
     --cirth-link-visited-color: oklch(35.3% .027 280);
     --cirth-muted-border-color: oklch(57% .032 280);
@@ -2436,10 +2455,10 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
     --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
     --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
     --cirth-primary: oklch(39.7% .081 44);
-    --cirth-primary-hover: oklch(31% .063 44);
+    --cirth-primary-active: oklch(31% .063 44);
     --cirth-primary-underline: var(--cirth-primary);
-    --cirth-secondary-underline: var(--cirth-secondary);
-    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-secondary-underline: var(--cirth-secondary-text);
+    --cirth-contrast-underline: var(--cirth-contrast-text);
     --cirth-primary-focus: oklch(48.3% .098 44);
     --cirth-secondary-focus: oklch(48.3% .03 280);
     --cirth-contrast-focus: oklch(48.3% .03 280);
@@ -2465,7 +2484,7 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
     --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
     --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
     --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
-    --cirth-secondary: oklch(78.7% .014 280);
+    --cirth-secondary-text: oklch(78.7% .014 280);
     --cirth-code-color: oklch(83% .011 280);
     --cirth-link-visited-color: oklch(78.7% .014 280);
     --cirth-muted-border-color: oklch(57% .032 280);
@@ -2474,12 +2493,12 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
     --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
     --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
     --cirth-primary: oklch(78.7% .092 44);
-    --cirth-primary-hover: oklch(87.3% .051 44);
-    --cirth-primary-background: oklch(44% .09 44);
-    --cirth-primary-hover-background: oklch(39.7% .081 44);
+    --cirth-primary-active: oklch(87.3% .051 44);
+    --cirth-primary-surface: oklch(44% .09 44);
+    --cirth-primary-surface-active: oklch(39.7% .081 44);
     --cirth-primary-underline: var(--cirth-primary);
-    --cirth-secondary-underline: var(--cirth-secondary);
-    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-secondary-underline: var(--cirth-secondary-text);
+    --cirth-contrast-underline: var(--cirth-contrast-text);
     --cirth-primary-focus: oklch(70% .141 44);
     --cirth-secondary-focus: oklch(70% .021 280);
     --cirth-contrast-focus: oklch(87.3% .007 280);
@@ -2505,7 +2524,7 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
     --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
     --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
     --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
-    --cirth-secondary: oklch(78.7% .014 280);
+    --cirth-secondary-text: oklch(78.7% .014 280);
     --cirth-code-color: oklch(83% .011 280);
     --cirth-link-visited-color: oklch(78.7% .014 280);
     --cirth-muted-border-color: oklch(57% .032 280);
@@ -2514,12 +2533,12 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
     --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
     --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
     --cirth-primary: oklch(78.7% .092 44);
-    --cirth-primary-hover: oklch(87.3% .051 44);
-    --cirth-primary-background: oklch(44% .09 44);
-    --cirth-primary-hover-background: oklch(39.7% .081 44);
+    --cirth-primary-active: oklch(87.3% .051 44);
+    --cirth-primary-surface: oklch(44% .09 44);
+    --cirth-primary-surface-active: oklch(39.7% .081 44);
     --cirth-primary-underline: var(--cirth-primary);
-    --cirth-secondary-underline: var(--cirth-secondary);
-    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-secondary-underline: var(--cirth-secondary-text);
+    --cirth-contrast-underline: var(--cirth-contrast-text);
     --cirth-primary-focus: oklch(70% .141 44);
     --cirth-secondary-focus: oklch(70% .021 280);
     --cirth-contrast-focus: oklch(87.3% .007 280);