@cirthcss/cirth 0.7.0 → 0.8.1

package/dist/cirth.scoped.css

@@ -41,54 +41,48 @@
 }
 
 .cirth .container, .cirth .container-fluid {
-  width: 100%;
-  padding-inline: var(--cirth-spacing);
-  margin-inline: auto;
-}
-
-@media (min-width: 576px) {
-  .cirth .container {
-    max-width: 510px;
-    padding-inline: 0;
-  }
-}
-
-@media (min-width: 768px) {
-  .cirth .container {
-    max-width: 700px;
-  }
+  grid-template-columns: minmax(var(--cirth-spacing), 1fr) minmax(0, 1fr) minmax(var(--cirth-spacing), 1fr);
+  display: grid;
 }
 
-@media (min-width: 1024px) {
-  .cirth .container {
-    max-width: 950px;
-  }
+.cirth .container > *, .cirth .container-fluid > * {
+  grid-column: 2;
 }
 
-@media (min-width: 1280px) {
-  .cirth .container {
-    max-width: 1200px;
-  }
+.cirth .container {
+  grid-template-columns: minmax(var(--cirth-spacing), 1fr) minmax(0, var(--cirth-container-max-width)) minmax(var(--cirth-spacing), 1fr);
 }
 
-@media (min-width: 1536px) {
-  .cirth .container {
-    max-width: 1450px;
-  }
+.cirth .breakout {
+  grid-column: 1 / -1;
 }
 
-.cirth .grid {
+.cirth .row {
   gap: var(--cirth-grid-row-gap) var(--cirth-grid-column-gap);
   grid-template-columns: 1fr;
   display: grid;
 }
 
 @media (min-width: 768px) {
-  .cirth .grid {
+  .cirth .row {
     grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
   }
 }
 
+.cirth .row > * {
+  min-width: 0;
+}
+
+.cirth .row > :where(button, [type="submit"], [type="reset"], [role="button"], input:not([type="checkbox"], [type="radio"]), select, textarea) {
+  margin-bottom: 0;
+}
+
+.cirth .grid {
+  gap: var(--cirth-grid-row-gap) var(--cirth-grid-column-gap);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cirth-grid-min-column)), 1fr));
+  display: grid;
+}
+
 .cirth .grid > * {
   min-width: 0;
 }
@@ -490,6 +484,10 @@
   pointer-events: none;
 }
 
+.cirth form:invalid :is(button:not([type="button"], [type="reset"]), [type="submit"]) {
+  opacity: var(--cirth-opacity-disabled);
+}
+
 .cirth :where(table) {
   border-collapse: collapse;
   border-spacing: 0;
@@ -725,52 +723,52 @@
   opacity: 1;
 }
 
-.cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
+.cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
   padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
   background-position: center right var(--cirth-space-3);
   background-size: var(--cirth-size-4) auto;
   background-repeat: no-repeat;
 }
 
-.cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
+.cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="false"], :user-valid:not([aria-invalid])):not(select) {
   background-image: var(--cirth-icon-valid);
 }
 
-.cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
+.cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):not(select) {
   background-image: var(--cirth-icon-invalid);
 }
 
-.cirth :where(input, select, textarea)[aria-invalid="false"] {
+.cirth :where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])) {
   --cirth-border-color: var(--cirth-form-element-valid-border-color);
 }
 
-.cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
+.cirth :where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])):is(:active, :focus) {
   --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
 }
 
-.cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+.cirth :where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
   --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
     var(--cirth-form-element-valid-focus-color);
 }
 
-.cirth :where(input, select, textarea)[aria-invalid="true"] {
+.cirth :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) {
   --cirth-border-color: var(--cirth-form-element-invalid-border-color);
 }
 
-.cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
+.cirth :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):is(:active, :focus) {
   --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
 }
 
-.cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+.cirth :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
   --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
     var(--cirth-form-element-invalid-focus-color);
 }
 
-[dir="rtl"] .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
+[dir="rtl"] .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
   background-position: center left var(--cirth-space-3);
 }
 
-[dir="rtl"] .cirth textarea[aria-invalid] {
+[dir="rtl"] .cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
   background-position: top left var(--cirth-space-3);
 }
 
@@ -805,7 +803,7 @@
   display: block;
 }
 
-.cirth textarea[aria-invalid] {
+.cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
   --cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
       var(--cirth-form-element-spacing-vertical) * 2 +
       var(--cirth-border-width) * 2);
@@ -813,7 +811,7 @@
   background-size: var(--cirth-size-4) var(--cirth-icon-height);
 }
 
-.cirth :where(input, select, textarea, fieldset, .grid) + small {
+.cirth :where(input, select, textarea, fieldset, .row) + small {
   width: 100%;
   margin-top: calc(var(--cirth-spacing) * -.75);
   margin-bottom: var(--cirth-spacing);
@@ -821,11 +819,11 @@
   display: block;
 }
 
-.cirth :where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
+.cirth :where(input, select, textarea, fieldset, .row):is([aria-invalid="false"], :user-valid:not([aria-invalid])) + small {
   color: var(--cirth-ins-color);
 }
 
-.cirth :where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
+.cirth :where(input, select, textarea, fieldset, .row):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) + small {
   color: var(--cirth-del-color);
 }
 
@@ -1470,7 +1468,7 @@
   transform: rotate(0) translateX(0);
 }
 
-.cirth [role="search"], .cirth [role="group"] {
+.cirth [role="search"], .cirth .group {
   width: 100%;
   margin-bottom: var(--cirth-spacing);
   border-radius: var(--cirth-border-radius);
@@ -1482,61 +1480,61 @@
   position: relative;
 }
 
-.cirth [role="search"] > small, .cirth [role="group"] > small {
+.cirth [role="search"] > small, .cirth .group > small {
   margin-top: calc(var(--cirth-spacing) * .25);
   flex: 0 0 100%;
   order: 1;
   margin-bottom: 0;
 }
 
-.cirth [role="search"] > *, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]), .cirth [role="search"] select, .cirth [role="group"] > *, .cirth [role="group"] input:not([type="checkbox"], [type="radio"]), .cirth [role="group"] select {
+.cirth [role="search"] > *, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]), .cirth [role="search"] select, .cirth .group > *, .cirth .group input:not([type="checkbox"], [type="radio"]), .cirth .group select {
   flex: auto;
   margin-bottom: 0;
   position: relative;
 }
 
-.cirth [role="search"] > :is(input, select, textarea), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), .cirth [role="search"] select:is(input, select, textarea), .cirth [role="group"] > :is(input, select, textarea), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), .cirth [role="group"] select:is(input, select, textarea) {
+.cirth [role="search"] > :is(input, select, textarea), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), .cirth [role="search"] select:is(input, select, textarea), .cirth .group > :is(input, select, textarea), .cirth .group input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), .cirth .group select:is(input, select, textarea) {
   flex: 99;
 }
 
-.cirth [role="search"] > :not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] > :not(:first-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="group"] select:not(:first-child) {
+.cirth [role="search"] > :not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth .group > :not(:first-child), .cirth .group input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth .group select:not(:first-child) {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
   margin-inline-start: 0;
 }
 
-.cirth [role="search"] > :not(:last-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="search"] select:not(:last-child), .cirth [role="group"] > :not(:last-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="group"] select:not(:last-child) {
+.cirth [role="search"] > :not(:last-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="search"] select:not(:last-child), .cirth .group > :not(:last-child), .cirth .group input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth .group select:not(:last-child) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 
-.cirth [role="search"] > :focus, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="search"] select:focus, .cirth [role="group"] > :focus, .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="group"] select:focus {
+.cirth [role="search"] > :focus, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="search"] select:focus, .cirth .group > :focus, .cirth .group input:not([type="checkbox"], [type="radio"]):focus, .cirth .group select:focus {
   z-index: 2;
 }
 
-:is(.cirth [role="search"] > :has( + small:last-child), .cirth [role="group"] > :has( + small:last-child)) {
+:is(.cirth [role="search"] > :has( + small:last-child), .cirth .group > :has( + small:last-child)) {
   border-start-end-radius: var(--cirth-border-radius);
   border-end-end-radius: var(--cirth-border-radius);
 }
 
-.cirth [role="search"] button:not(:first-child), .cirth [role="search"] [type="submit"]:not(:first-child), .cirth [role="search"] [type="reset"]:not(:first-child), .cirth [role="search"] [type="button"]:not(:first-child), .cirth [role="search"] [role="button"]:not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] button:not(:first-child), .cirth [role="group"] [type="submit"]:not(:first-child), .cirth [role="group"] [type="reset"]:not(:first-child), .cirth [role="group"] [type="button"]:not(:first-child), .cirth [role="group"] [role="button"]:not(:first-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="group"] select:not(:first-child) {
+.cirth [role="search"] button:not(:first-child), .cirth [role="search"] [type="submit"]:not(:first-child), .cirth [role="search"] [type="reset"]:not(:first-child), .cirth [role="search"] [type="button"]:not(:first-child), .cirth [role="search"] [role="button"]:not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth .group button:not(:first-child), .cirth .group [type="submit"]:not(:first-child), .cirth .group [type="reset"]:not(:first-child), .cirth .group [type="button"]:not(:first-child), .cirth .group [role="button"]:not(:first-child), .cirth .group input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth .group select:not(:first-child) {
   margin-inline-start: calc(var(--cirth-border-width) * -1);
 }
 
-.cirth [role="search"] button, .cirth [role="search"] [type="submit"], .cirth [role="search"] [type="reset"], .cirth [role="search"] [type="button"], .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [type="submit"], .cirth [role="group"] [type="reset"], .cirth [role="group"] [type="button"], .cirth [role="group"] [role="button"] {
+.cirth [role="search"] button, .cirth [role="search"] [type="submit"], .cirth [role="search"] [type="reset"], .cirth [role="search"] [type="button"], .cirth [role="search"] [role="button"], .cirth .group button, .cirth .group [type="submit"], .cirth .group [type="reset"], .cirth .group [type="button"], .cirth .group [role="button"] {
   width: auto;
 }
 
 @supports selector(:has(*)) {
-  :is(.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus)) {
+  :is(.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), .cirth .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus)) {
     --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
   }
 
-  :is(.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]), .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid])) {
+  :is(.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]), .cirth .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid])) {
     border-color: #0000;
   }
 
-  :is(.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)) {
+  :is(.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus)) {
     --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
   }
 
@@ -1568,35 +1566,35 @@
       var(--cirth-primary-hover-border);
   }
 
-  .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
+  .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
     --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);
   }
 
-  .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
+  .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
     --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);
   }
 
-  .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
+  .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
     --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);
   }
 
-  .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
+  .cirth .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
     --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);
   }
 
-  .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"] button:focus, .cirth [role="group"] [type="submit"]:focus, .cirth [role="group"] [type="reset"]:focus, .cirth [role="group"] [type="button"]:focus, .cirth [role="group"] [role="button"]:focus {
+  .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth .group button:focus, .cirth .group [type="submit"]:focus, .cirth .group [type="reset"]:focus, .cirth .group [type="button"]:focus, .cirth .group [role="button"]:focus {
     box-shadow: none;
   }
 }
@@ -1854,7 +1852,7 @@
   text-decoration: none;
 }
 
-.cirth nav li [role="group"], .cirth nav li [role="search"] {
+.cirth nav li .group, .cirth nav li [role="search"] {
   width: auto;
   margin-bottom: 0;
 }
@@ -2299,8 +2297,10 @@
   --cirth-typography-spacing-vertical: var(--cirth-space-4);
   --cirth-block-spacing-vertical: var(--cirth-spacing);
   --cirth-block-spacing-horizontal: var(--cirth-spacing);
+  --cirth-container-max-width: 60rem;
   --cirth-grid-column-gap: var(--cirth-spacing);
   --cirth-grid-row-gap: var(--cirth-spacing);
+  --cirth-grid-min-column: 12rem;
   --cirth-form-element-spacing-vertical: var(--cirth-space-2);
   --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
   --cirth-form-label-font-weight: var(--cirth-font-weight);
@@ -2447,7 +2447,7 @@
   --cirth-border-radius: var(--cirth-radius-pill);
 }
 
-:is(.cirth [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), .cirth [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus)) {
+:is(.cirth [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), .cirth .group:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus)) {
   --cirth-group-box-shadow-focus-with-button: 0
     0
     0
@@ -2455,7 +2455,7 @@
     var(--cirth-secondary-focus);
 }
 
-:is(.cirth [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), .cirth [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus)) {
+:is(.cirth [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), .cirth .group:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus)) {
   --cirth-group-box-shadow-focus-with-button: 0
     0
     0
@@ -2463,7 +2463,7 @@
     var(--cirth-contrast-focus);
 }
 
-.cirth [role="search"] button, .cirth [role="search"] [type="submit"], .cirth [role="search"] [type="button"], .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [type="submit"], .cirth [role="group"] [type="button"], .cirth [role="group"] [role="button"] {
+.cirth [role="search"] button, .cirth [role="search"] [type="submit"], .cirth [role="search"] [type="button"], .cirth [role="search"] [role="button"], .cirth .group button, .cirth .group [type="submit"], .cirth .group [type="button"], .cirth .group [role="button"] {
   --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
 }
 
@@ -2548,7 +2548,7 @@
   --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
   --cirth-switch-background-color: oklch(61.3% .032 264);
   --cirth-switch-checked-background-color: var(--cirth-primary-background);
-  --cirth-switch-color: oklch(100% 0 0);
+  --cirth-switch-color: var(--cirth-primary-inverse);
   --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
   --cirth-range-border-color: oklch(91.7% .006 264);
   --cirth-range-active-border-color: oklch(83% .016 264);
@@ -2661,7 +2661,7 @@
     --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
     --cirth-switch-background-color: oklch(52.7% .032 264);
     --cirth-switch-checked-background-color: var(--cirth-primary-background);
-    --cirth-switch-color: oklch(100% 0 0);
+    --cirth-switch-color: var(--cirth-primary-inverse);
     --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
     --cirth-range-border-color: oklch(26.7% .011 264);
     --cirth-range-active-border-color: oklch(31% .016 264);
@@ -2778,7 +2778,7 @@
   --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
   --cirth-switch-background-color: oklch(52.7% .032 264);
   --cirth-switch-checked-background-color: var(--cirth-primary-background);
-  --cirth-switch-color: oklch(100% 0 0);
+  --cirth-switch-color: var(--cirth-primary-inverse);
   --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
   --cirth-range-border-color: oklch(26.7% .011 264);
   --cirth-range-active-border-color: oklch(31% .016 264);