@semanticus/semanticus-css 0.9.0 → 1.1.0

package/src/semantics/elements/_input.css

@@ -1,6 +1,3 @@
-/**
- * Basics form elements
- */
 input,
 optgroup,
 select,
@@ -79,7 +76,7 @@ textarea {
 }
 
 input:not([type=checkbox], [type=radio], [type=range]) {
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
 }
 
 fieldset {
@@ -112,21 +109,21 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file]),
 select,
 textarea {
   appearance: none;
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
 }
 
 input,
 select,
 textarea {
-  --color-background: var(--form-bg);
-  --border-color: var(--form-border-color);
-  --color-text: var(--form-text-color);
-  --shadow-lg: none;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
+  --color-background: var(--input-fill);
+  --border-color: var(--input-border);
+  --color-text: var(--input-text);
+  --shadow: none;
+  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);
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
@@ -139,12 +136,12 @@ input:not([type=submit],
 [type=radio],
 [readonly]):is(:active, :focus),
 :where(select, textarea):not([readonly]):is(:active, :focus) {
-  --color-background: var(--form-active-bg);
+  --color-background: var(--input-fill-active);
 }
 
 input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
 :where(select, textarea):not([readonly]):is(:active, :focus) {
-  --border-color: var(--form-active-border);
+  --border-color: var(--input-border-focus);
 }
 
 input:not([type=submit],
@@ -154,7 +151,7 @@ input:not([type=submit],
 [type=file],
 [readonly]):focus,
 :where(select, textarea):not([readonly]):focus {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--input-border-focus);
 }
 
 input:not([type=submit], [type=button], [type=reset])[disabled],
@@ -162,7 +159,7 @@ select[disabled],
 textarea[disabled],
 label[aria-disabled=true],
 :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
-  opacity: var(--form-disabled-opacity);
+  opacity: var(--input-opacity-disabled);
   pointer-events: none;
 }
 
@@ -178,10 +175,10 @@ label[aria-disabled=true] input[disabled] {
  [type=time],
  [type=week],
  [type=range])[aria-invalid]) {
-  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-  padding-left: var(--form-element-spacing-horizontal);
-  padding-inline-start: var(--form-element-spacing-horizontal);
-  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-right: calc(var(--input-spacing-horizontal) + 1.5rem);
+  padding-left: var(--input-spacing-horizontal);
+  padding-inline-start: var(--input-spacing-horizontal);
+  padding-inline-end: calc(var(--input-spacing-horizontal) + 1.5rem);
   background-position: center right 0.75rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
@@ -208,23 +205,23 @@ label[aria-disabled=true] input[disabled] {
 }
 
 :is(input, select, textarea)[aria-invalid=false] {
-  --border-color: var(--form-valid-border);
+  --border-color: var(--color-success-fill);
 }
 :is(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
-  --border-color: var(--form-valid-active-border);
+  --border-color: var(--color-success-fill-hover);
 }
 input:not([type=checkbox], [type=radio])[aria-invalid=false]:is(:active, :focus), select[aria-invalid=false]:is(:active, :focus), textarea[aria-invalid=false]:is(:active, :focus) {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-valid-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--color-success-fill);
 }
 
 :is(input, select, textarea)[aria-invalid=true] {
-  --border-color: var(--form-invalid-border);
+  --border-color: var(--color-danger-fill);
 }
 :is(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
-  --border-color: var(--form-invalid-active-border);
+  --border-color: var(--color-danger-fill-hover);
 }
 input:not([type=checkbox], [type=radio])[aria-invalid=true]:is(:active, :focus), select[aria-invalid=true]:is(:active, :focus), textarea[aria-invalid=true]:is(:active, :focus) {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-invalid-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--color-danger-fill);
 }
 
 :where([dir=rtl] :is(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false])) {
@@ -236,7 +233,7 @@ input::-webkit-input-placeholder,
 textarea::placeholder,
 textarea::-webkit-input-placeholder,
 select:invalid {
-  color: var(--form-placeholder-color);
+  color: var(--input-placeholder-text);
   opacity: 1;
 }
 
@@ -253,10 +250,10 @@ select {
   }
 
   &:not([multiple], [size]) {
-    padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-    padding-left: var(--form-element-spacing-horizontal);
-    padding-inline-start: var(--form-element-spacing-horizontal);
-    padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+    padding-right: calc(var(--input-spacing-horizontal) + 1.5rem);
+    padding-left: var(--input-spacing-horizontal);
+    padding-inline-start: var(--input-spacing-horizontal);
+    padding-inline-end: calc(var(--input-spacing-horizontal) + 1.5rem);
     background-image: var(--icon-chevron);
     background-position: center right 0.75rem;
     background-size: 1rem auto;
@@ -264,8 +261,8 @@ select {
   }
 
   &[multiple] option:checked {
-    background: var(--form-selected-bg);
-    color: var(--form-text-color);
+    background: var(--input-fill-selected);
+    color: var(--input-text);
   }
 }
 
@@ -279,7 +276,7 @@ textarea {
 }
 
 :where(textarea[aria-invalid]) {
-  --icon-height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  --icon-height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
   background-position: top right 0.75rem;
   background-size: 1rem var(--icon-height);
 }
@@ -293,11 +290,11 @@ textarea {
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
-  color: rgb(var(--color-success-rgb));
+  color: var(--color-success-text);
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=true] + small {
-  color: rgb(var(--color-danger-rgb));
+  color: var(--color-danger-text);
 }
 
 label > :where(input, select, textarea) {

package/src/semantics/elements/_ins.css

@@ -1,4 +1,4 @@
 ins {
-  color: rgb(var(--color-success-rgb));
+  color: var(--color-success-text);
   text-decoration: none;
 }

package/src/semantics/elements/_links.css

@@ -1,37 +1,41 @@
-/**
- * Link
- */
 :where(a:not([role=button])),
 [role=link] {
   --color-background: transparent;
   --border-color: transparent;
-  --color-text: rgb(var(--color-primary-rgb));
-  --shadow-lg: transparent;
-  --underline: var(--color-primary-underline);
+  --color-text: var(--color-primary-text);
+  --shadow: transparent;
   outline: none;
   padding: 0;
   background-color: var(--color-background);
   color: var(--color-text);
-  text-decoration: var(--text-decoration);
-  text-decoration-color: var(--underline);
+  text-decoration: var(--a-decoration);
+  text-decoration-color: oklch(from var(--color-text) l c h / 0.3);
   text-underline-offset: 0.125em;
-  transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
+  transition: background-color var(--transition), color var(--transition), text-decoration-color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
 
-  &:is(:hover, :active, :focus) {
+  &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
     --color-background: transparent;
     --border-color: transparent;
-    --color-text: rgb(var(--color-primary-rgb));
-    --shadow-lg: transparent;
+    --color-text: var(--color-primary-text-hover);
+    --shadow: transparent;
+    text-decoration-color: oklch(from var(--color-text) l c h / 0.85);
   }
 
-  &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
-    --color-text: var(--color-primary-hover);
-    --underline: var(--color-primary-hover-underline);
-    --text-decoration: underline;
+  &:is([aria-current]:not([aria-current=false])) {
+    font-weight: 500;
+    text-decoration-color: oklch(from var(--color-text) l c h / 0.6);
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 var(--outline-width) var(--color-primary-focus);
+    box-shadow: 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
+  }
+}
+
+[role=link] {
+  cursor: pointer;
+
+  &button {
+    display: inline-flex;
   }
 }
 
@@ -51,7 +55,7 @@ aside {
 nav {
   a:not([role=button]), [role=link] {
     &:not(:hover) {
-      text-decoration: none;
+      --a-decoration: none;
     }
   }
 }

package/src/semantics/elements/_main.css

@@ -1,7 +1,3 @@
-/**
- * Main fills up the available width, and has a height defined by its content.
- * Stacks its children vertically.
- */
 main {
   width: 100%;
 }

package/src/semantics/elements/_mark.css

@@ -1,6 +1,6 @@
 mark {
   padding: 0.125rem 0.25rem;
-  background-color: var(--color-mark-bg);
-  color: var(--color-mark-text);
+  background-color: var(--color-warning-fill);
+  color: var(--color-warning-on-fill);
   vertical-align: baseline;
 }

package/src/semantics/elements/_nav.css

@@ -1,12 +1,9 @@
-/**
- * Nav
- */
 nav {
   --typography-spacing-vertical: 0;
-  --typography-headings-top: 0;
+  --heading-gap-top: 0;
 
   display: flex;
-  gap: calc(var(--nav-link-spacing) * 1.5);
+  gap: calc(var(--nav-link-gap) * 1.5);
   align-items: center;
   justify-content: space-between;
   overflow: visible;
@@ -21,13 +18,13 @@ nav {
 
     & ul li {
       &:not(:first-child) {
-        margin-inline-start: calc(var(--nav-link-spacing) * 2);
+        margin-inline-start: calc(var(--nav-link-gap) * 2);
       }
 
       &:not(:last-child)::after {
         display: inline-block;
         position: absolute;
-        width: calc(var(--nav-link-spacing) * 3);
+        width: calc(var(--nav-link-gap) * 3);
         content: var(--nav-breadcrumb-divider);
         color: var(--color-text-muted);
         text-align: center;
@@ -47,7 +44,7 @@ nav {
   ul, ol {
     align-items: center;
     display: flex;
-    gap: calc(var(--nav-link-spacing) * 1.5);
+    gap: calc(var(--nav-link-gap) * 1.5);
     list-style: none;
     margin-bottom: 0 !important;
     padding: 0;

package/src/semantics/elements/_progress.css

@@ -1,6 +1,3 @@
-/**
- * Progress
- */
 progress {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -11,14 +8,14 @@ progress {
   margin-bottom: calc(var(--spacing) * 0.5);
   overflow: hidden;
   border: 0;
-  border-radius: var(--border-radius);
-  background-color: var(--progress-bg);
+  border-radius: var(--radius);
+  background-color: var(--progress-track-fill);
   color: var(--progress-fill);
   vertical-align: baseline;
-  accent-color: rgb(var(--color-primary-rgb));
+  accent-color: var(--color-primary-fill);
 
   &::-webkit-progress-bar {
-    border-radius: var(--border-radius);
+    border-radius: var(--radius);
     background: none;
   }
 
@@ -34,7 +31,7 @@ progress {
 
 @media (prefers-reduced-motion: no-preference) {
   progress:indeterminate {
-    background: var(--progress-bg) linear-gradient(to right, var(--progress-fill) 30%, var(--progress-bg) 30%) top left/150% 150% no-repeat;
+    background: var(--progress-track-fill) linear-gradient(to right, var(--progress-fill) 30%, var(--progress-track-fill) 30%) top left/150% 150% no-repeat;
     animation: progress-indeterminate 1s linear infinite;
 
     &[value]::-webkit-progress-value {

package/src/semantics/elements/_section.css

@@ -1,6 +1,3 @@
-/**
- * Section
- */
 section {
   width: 100%;
   margin-bottom: var(--spacing);

package/src/semantics/elements/_small.css

@@ -0,0 +1,3 @@
+small {
+  font-size: var(--font-size);
+}

package/src/semantics/elements/_table.css

@@ -1,8 +1,6 @@
-/**
- * Table
- */
 table {
   border-collapse: collapse;
+  border-color: currentcolor; /* modern-normalize */
   border-spacing: 0;
   color: var(--color-text);
   font-style: normal;
@@ -16,7 +14,7 @@ table {
 th,
 td {
   padding: calc(var(--spacing) / 2) var(--spacing);
-  border-bottom: var(--border-width) solid var(--table-border-color);
+  border-bottom: var(--border-size) solid var(--color-border);
   background-color: var(--color-background);
   color: var(--color-text);
   font-weight: var(--font-weight);
@@ -27,7 +25,7 @@ td {
 tfoot {
   & th,
   & td {
-    border-top: var(--border-width) solid var(--table-border-color);
+    border-top: var(--border-size) solid var(--color-border);
     border-bottom: 0;
   }
 }

package/src/semantics/elements/_type-checkbox-radio.css

@@ -1,6 +1,3 @@
-/**
- * Checkboxes, Radios and Switches
- */
 label:has([type=checkbox], [type=radio]) {
   width: fit-content;
   cursor: pointer;
@@ -15,7 +12,7 @@ label:has([type=checkbox], [type=radio]) {
   height: 1.25em;
   margin-top: -0.125em;
   margin-inline-end: 0.5em;
-  border-width: var(--border-width);
+  border-width: var(--border-size);
   vertical-align: middle;
   cursor: pointer;
 
@@ -24,8 +21,8 @@ label:has([type=checkbox], [type=radio]) {
   }
 
   &:checked, &:checked:active, &:checked:focus {
-    --color-background: var(--color-primary-bg);
-    --border-color: var(--color-primary-border);
+    --color-background: var(--color-primary-fill);
+    --border-color: var(--color-primary-fill);
     background-image: var(--icon-checkbox);
     background-position: center;
     background-size: 0.75em auto;
@@ -45,8 +42,8 @@ label:has([type=checkbox], [type=radio]) {
 
 [type=checkbox] {
   &:indeterminate {
-    --color-background: var(--color-primary-bg);
-    --border-color: var(--color-primary-border);
+    --color-background: var(--color-primary-fill);
+    --border-color: var(--color-primary-fill);
     background-image: var(--icon-minus);
     background-position: center;
     background-size: 0.75em auto;
@@ -58,24 +55,24 @@ label:has([type=checkbox], [type=radio]) {
   border-radius: 50%;
 
   &:checked, &:checked:active, &:checked:focus {
-    --color-background: var(--color-primary-inverse);
+    --color-background: var(--color-primary-on-fill);
     border-width: 0.35em;
     background-image: none;
   }
 }
 
 [type=checkbox][role=switch] {
-  --color-background: var(--switch-bg);
-  --color-text: var(--switch-thumb-color);
+  --color-background: var(--switch-fill);
+  --color-text: var(--switch-thumb-fill);
   width: 2.25em;
   height: 1.25em;
-  border: var(--border-width) solid var(--border-color);
+  border: var(--border-size) solid var(--border-color);
   border-radius: 1.25em;
   background-color: var(--color-background);
   line-height: 1.25em;
 
   &:not([aria-invalid]) {
-    --border-color: var(--switch-bg);
+    --border-color: var(--switch-fill);
   }
 
   &:before {
@@ -84,19 +81,19 @@ label:has([type=checkbox], [type=radio]) {
     height: 100%;
     border-radius: 50%;
     background-color: var(--color-text);
-    box-shadow: var(--switch-thumb-shadow);
+    box-shadow: var(--switch-thumb-glow);
     content: "";
     transition: margin 0.1s ease-in-out;
   }
 
   &:focus {
-    --color-background: var(--switch-bg);
-    --border-color: var(--switch-bg);
+    --color-background: var(--switch-fill);
+    --border-color: var(--switch-fill);
   }
 
   &:checked {
-    --color-background: var(--switch-checked-bg);
-    --border-color: var(--switch-checked-bg);
+    --color-background: var(--switch-fill-checked);
+    --border-color: var(--switch-fill-checked);
     background-image: none;
 
     &::before {
@@ -113,13 +110,13 @@ label:has([type=checkbox], [type=radio]) {
 [type=checkbox][role=switch][aria-invalid=false]:checked,
 [type=checkbox][role=switch][aria-invalid=false]:checked:active,
 [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
-  --color-background: var(--form-valid-border);
+  --color-background: var(--color-success-fill);
 }
 [type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
 [type=checkbox][role=switch]:checked[aria-invalid=true],
 [type=checkbox][role=switch]:checked:active[aria-invalid=true],
 [type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
-  --color-background: var(--form-invalid-border);
+  --color-background: var(--color-danger-fill);
 }
 
 [type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
@@ -129,7 +126,7 @@ label:has([type=checkbox], [type=radio]) {
 [type=checkbox][role=switch][aria-invalid=false]:checked,
 [type=checkbox][role=switch][aria-invalid=false]:checked:active,
 [type=checkbox][role=switch][aria-invalid=false]:checked:focus {
-  --border-color: var(--form-valid-border);
+  --border-color: var(--color-success-fill);
 }
 [type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
 [type=radio]:checked[aria-invalid=true],
@@ -138,5 +135,5 @@ label:has([type=checkbox], [type=radio]) {
 [type=checkbox][role=switch]:checked[aria-invalid=true],
 [type=checkbox][role=switch]:checked:active[aria-invalid=true],
 [type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
-  --border-color: var(--form-invalid-border);
+  --border-color: var(--color-danger-fill);
 }

package/src/semantics/elements/_type-color.css

@@ -1,6 +1,3 @@
-/**
- * Input type color
- */
 [type=color] {
   &::-webkit-color-swatch-wrapper {
     padding: 0;
@@ -12,11 +9,11 @@
 
   &::-webkit-color-swatch {
     border: 0;
-    border-radius: calc(var(--border-radius) * 0.5);
+    border-radius: calc(var(--radius) * 0.5);
   }
 
   &::-moz-color-swatch {
     border: 0;
-    border-radius: calc(var(--border-radius) * 0.5);
+    border-radius: calc(var(--radius) * 0.5);
   }
 }

package/src/semantics/elements/_type-date.css

@@ -1,6 +1,3 @@
-/**
- * Input type datetime
- */
 :where(input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week])) {
   --icon-position: 0.75rem;
   --icon-width: 1rem;
@@ -31,7 +28,7 @@
   [type=month],
   [type=time],
   [type=week] {
-    padding-right: var(--form-element-spacing-horizontal);
+    padding-right: var(--input-spacing-horizontal);
     background-image: none;
   }
 }

package/src/semantics/elements/_type-file.css

@@ -1,26 +1,23 @@
-/**
- * Input type file
- */
 [type=file] {
   --color-text: var(--color-text-muted);
-  margin-left: calc(var(--outline-width) * -1);
-  padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
-  padding-left: var(--outline-width);
+  margin-left: calc(var(--outline-size) * -1);
+  padding: calc(var(--input-spacing-vertical) * 0.5) 0;
+  padding-left: var(--outline-size);
   border: 0;
   border-radius: 0;
   background: none;
 
   &::file-selector-button {
     margin-right: calc(var(--spacing) / 2);
-    padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+    padding: calc(var(--input-spacing-vertical) * 0.5) var(--input-spacing-horizontal);
   }
 
   &:is(:hover, :active, :focus)::file-selector-button {
-    --color-background: var(--color-secondary-hover-bg);
-    --border-color: var(--color-secondary-hover-border);
+    --color-background: var(--color-secondary-fill-hover);
+    --border-color: var(--color-secondary-fill-hover);
   }
 
   &:focus::file-selector-button {
-    --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);
   }
 }

package/src/semantics/elements/_type-range.css

@@ -1,6 +1,3 @@
-/**
- * Input type range
- */
 [type=range] {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -12,24 +9,24 @@
   &::-webkit-slider-runnable-track {
     width: 100%;
     height: 0.375rem;
-    border-radius: var(--border-radius);
-    background-color: var(--range-border-color);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     transition: background-color var(--transition), box-shadow var(--transition);
   }
 
   &::-moz-range-track {
     width: 100%;
     height: 0.375rem;
-    border-radius: var(--border-radius);
-    background-color: var(--range-border-color);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     transition: background-color var(--transition), box-shadow var(--transition);
   }
 
   &::-ms-track {
     width: 100%;
     height: 0.375rem;
-    border-radius: var(--border-radius);
-    background-color: var(--range-border-color);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     transition: background-color var(--transition), box-shadow var(--transition);
   }
 
@@ -40,7 +37,7 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     cursor: pointer;
     transition: background-color var(--transition), transform var(--transition);
   }
@@ -52,7 +49,7 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     cursor: pointer;
     transition: background-color var(--transition), transform var(--transition);
   }
@@ -64,14 +61,14 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     cursor: pointer;
     transition: background-color var(--transition), transform var(--transition);
   }
 
   &:active, &:focus-within {
-    --range-border-color: var(--range-active-border);
-    --range-thumb-color: var(--range-thumb-active);
+    --range-track-border: var(--range-track-border-active);
+    --range-thumb-fill: var(--range-thumb-fill-active);
   }
 
   &:active {