feat(ld-toggle): use up-to-date css custom props

screenshot/builds/master.json

@@ -12083,7 +12083,7 @@
     },
     {
       "id": "ac2dc773",
-      "image": "14c99899fce820101b4e87846b5f8fae.png",
+      "image": "640e2caa19e66dac2b7a8a8f1411d6ea.png",
       "userAgent": "default",
       "desc": "ld-toggle themed aria-disabled focus theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12109,7 +12109,7 @@
     },
     {
       "id": "8147ebda",
-      "image": "3cfc7bb58986d312bc225865611b110c.png",
+      "image": "d1e5f1e166c2cd918de6a65fa515729b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed aria-disabled focus theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12135,7 +12135,7 @@
     },
     {
       "id": "f5e7d469",
-      "image": "14c99899fce820101b4e87846b5f8fae.png",
+      "image": "640e2caa19e66dac2b7a8a8f1411d6ea.png",
       "userAgent": "default",
       "desc": "ld-toggle themed aria-disabled theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12161,7 +12161,7 @@
     },
     {
       "id": "b489c3cc",
-      "image": "3cfc7bb58986d312bc225865611b110c.png",
+      "image": "d1e5f1e166c2cd918de6a65fa515729b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed aria-disabled theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12187,7 +12187,7 @@
     },
     {
       "id": "003c30a0",
-      "image": "14c99899fce820101b4e87846b5f8fae.png",
+      "image": "640e2caa19e66dac2b7a8a8f1411d6ea.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component aria-disabled focus theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12213,7 +12213,7 @@
     },
     {
       "id": "79725db9",
-      "image": "3cfc7bb58986d312bc225865611b110c.png",
+      "image": "d1e5f1e166c2cd918de6a65fa515729b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component aria-disabled focus theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12239,7 +12239,7 @@
     },
     {
       "id": "7bfd4a4d",
-      "image": "14c99899fce820101b4e87846b5f8fae.png",
+      "image": "640e2caa19e66dac2b7a8a8f1411d6ea.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component aria-disabled theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12265,7 +12265,7 @@
     },
     {
       "id": "d16f5f42",
-      "image": "3cfc7bb58986d312bc225865611b110c.png",
+      "image": "8977571f62d56aa45d241a490d0bd10b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component aria-disabled theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12343,7 +12343,7 @@
     },
     {
       "id": "11956509",
-      "image": "14c99899fce820101b4e87846b5f8fae.png",
+      "image": "640e2caa19e66dac2b7a8a8f1411d6ea.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component disabled focus theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12369,7 +12369,7 @@
     },
     {
       "id": "83b8bad6",
-      "image": "3cfc7bb58986d312bc225865611b110c.png",
+      "image": "d1e5f1e166c2cd918de6a65fa515729b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component disabled focus theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12395,7 +12395,7 @@
     },
     {
       "id": "3998af6c",
-      "image": "14c99899fce820101b4e87846b5f8fae.png",
+      "image": "1dc0e323b98a140c2ee5e3b86e4d0f41.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component disabled theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12421,7 +12421,7 @@
     },
     {
       "id": "ea1ca67b",
-      "image": "3cfc7bb58986d312bc225865611b110c.png",
+      "image": "d1e5f1e166c2cd918de6a65fa515729b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component disabled theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12863,7 +12863,7 @@
     },
     {
       "id": "aac43082",
-      "image": "91799ace8702a9d603953a918121214a.png",
+      "image": "989d4d683da7fd867b6d3590ea33add4.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component with icons (disabled) theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12967,7 +12967,7 @@
     },
     {
       "id": "282b0dbc",
-      "image": "f43cb4178a7548a526aa9cdfaa53db17.png",
+      "image": "a497e7ef68f8eaa48f4d792530198711.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component with icons (invalid) theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -12993,7 +12993,7 @@
     },
     {
       "id": "6b222cae",
-      "image": "873736ce4fdc53267f21cccfbfb29324.png",
+      "image": "fd39ca719a25a820262ad191ee4db177.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component with icons (invalid) theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -13071,7 +13071,7 @@
     },
     {
       "id": "e4f4eaec",
-      "image": "aa2f3020954cb6b6063bfc361c71b654.png",
+      "image": "328a9e15030139e06c110932ab38480b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component with icons (large) theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -13383,7 +13383,7 @@
     },
     {
       "id": "f2cfc3da",
-      "image": "aa2f3020954cb6b6063bfc361c71b654.png",
+      "image": "328a9e15030139e06c110932ab38480b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component with icons (large, invalid) theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -13513,7 +13513,7 @@
     },
     {
       "id": "b27e7440",
-      "image": "fd39ca719a25a820262ad191ee4db177.png",
+      "image": "e6932adaf6c890797d2772af5b669034.png",
       "userAgent": "default",
       "desc": "ld-toggle themed css component with icons theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -13591,7 +13591,7 @@
     },
     {
       "id": "beea3acc",
-      "image": "14c99899fce820101b4e87846b5f8fae.png",
+      "image": "640e2caa19e66dac2b7a8a8f1411d6ea.png",
       "userAgent": "default",
       "desc": "ld-toggle themed disabled focus theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -13617,7 +13617,7 @@
     },
     {
       "id": "a58f6715",
-      "image": "3cfc7bb58986d312bc225865611b110c.png",
+      "image": "d1e5f1e166c2cd918de6a65fa515729b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed disabled focus theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -13643,7 +13643,7 @@
     },
     {
       "id": "e222a249",
-      "image": "14c99899fce820101b4e87846b5f8fae.png",
+      "image": "640e2caa19e66dac2b7a8a8f1411d6ea.png",
       "userAgent": "default",
       "desc": "ld-toggle themed disabled theme-bubblegum checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -13669,7 +13669,7 @@
     },
     {
       "id": "ed98ebaf",
-      "image": "3cfc7bb58986d312bc225865611b110c.png",
+      "image": "d1e5f1e166c2cd918de6a65fa515729b.png",
       "userAgent": "default",
       "desc": "ld-toggle themed disabled theme-ocean checked",
       "testPath": "./src/liquid/components/ld-toggle/test/ld-toggle.e2e.ts",
@@ -16255,4 +16255,4 @@
       "isMobile": false
     }
   ]
-}
+}

src/liquid/components/ld-toggle/ld-toggle.css

@@ -1,8 +1,36 @@
 :host,
 .ld-toggle {
+  /* layout */
   --ld-toggle-height: 2rem;
   --ld-toggle-width: 3.375rem;
   --ld-toggle-inner-space: 0.125rem;
+  --ld-toggle-with-icons-width: 4.5rem;
+  --ld-toggle-lg-height: 2.5rem;
+  --ld-toggle-lg-width: 4.1875rem;
+  --ld-toggle-lg-inner-space: 0.1875rem;
+  --ld-toggle-lg-with-icons-width: 6rem;
+  --ld-toggle-border-radius: var(--ld-br-full);
+  --ld-toggle-knob-border-radius: var(--ld-br-full);
+
+  /* colors */
+  --ld-toggle-input-bg-col: var(--ld-col-neutral-400);
+  --ld-toggle-icon-start-col: var(--ld-col-wht);
+  --ld-toggle-icon-end-col: var(--ld-col-neutral);
+  --ld-toggle-knob-bg-col: var(--ld-col-wht);
+  --ld-toggle-checked-icon-start-col: var(--ld-col-neutral);
+  --ld-toggle-checked-icon-end-col: var(--ld-col-wht);
+  --ld-toggle-disabled-input-bg-col: var(--ld-col-neutral-050);
+  --ld-toggle-disabled-icon-col: var(--ld-col-neutral-400);
+  --ld-toggle-disabled-knob-bg-col: var(--ld-col-wht);
+  --ld-toggle-with-icons-input-bg-col: var(--ld-col-neutral-100);
+  --ld-toggle-with-icons-disabled-input-bg-col: var(--ld-col-neutral-050);
+
+  /* themable colors */
+  --ld-toggle-checked-bg-col: var(--ld-thm-primary);
+  --ld-toggle-checked-disabled-input-bg-col: var(--ld-thm-primary-alpha-low);
+  --ld-toggle-invalid-input-bg-col: var(--ld-thm-error);
+  --ld-toggle-invalid-knob-bg-col: var(--ld-thm-error);
+  --ld-toggle-with-icons-knob-col: var(--ld-thm-primary);
 
   align-items: center;
   display: flex;
@@ -13,27 +41,27 @@
 
   input {
     appearance: none;
-    background-color: var(--ld-col-rblck4);
-    border-radius: var(--ld-br-full);
+    background-color: var(--ld-toggle-input-bg-col);
+    border-radius: var(--ld-toggle-border-radius);
     height: 100%;
+    margin: 0;
     position: absolute;
     /* animations triggered by user interactions on single component instances are probably not a performance issue */
     /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
     transition: background-color 200ms ease-in-out;
     width: 100%;
     z-index: 0;
-    margin: 0;
 
     &:not(:disabled):not([aria-disabled='true']) {
       cursor: pointer;
     }
 
     &:checked {
-      background-color: var(--ld-toggle-bg-color-checked);
+      background-color: var(--ld-toggle-checked-bg-col);
 
       &:disabled,
       &[aria-disabled='true'] {
-        background-color: var(--ld-toggle-bg-color-checked-disabled);
+        background-color: var(--ld-toggle-checked-disabled-input-bg-col);
       }
 
       ~ .ld-toggle__knob {
@@ -43,31 +71,31 @@
       }
 
       ~ .ld-toggle__icon-start {
-        color: var(--ld-col-rblck6);
+        color: var(--ld-toggle-checked-icon-start-col);
       }
 
       ~ .ld-toggle__icon-end {
-        color: var(--ld-col-wht);
+        color: var(--ld-toggle-checked-icon-end-col);
       }
     }
 
     &:disabled,
     &[aria-disabled='true'] {
-      background-color: var(--ld-col-bg-g);
+      background-color: var(--ld-toggle-disabled-input-bg-col);
 
       &:checked ~ .ld-toggle__icon-start {
-        color: var(--ld-col-rblck4);
+        color: var(--ld-toggle-disabled-icon-col);
       }
 
       &:not(:checked) ~ .ld-toggle__icon-end {
-        color: var(--ld-col-rblck4);
+        color: var(--ld-toggle-disabled-icon-col);
       }
     }
   }
 
   .ld-toggle__knob {
-    background-color: var(--ld-col-wht);
-    border-radius: var(--ld-br-full);
+    background-color: var(--ld-toggle-knob-bg-col);
+    border-radius: var(--ld-toggle-knob-border-radius);
     display: block;
     height: calc(var(--ld-toggle-height) - var(--ld-toggle-inner-space) * 2);
     margin: var(--ld-toggle-inner-space);
@@ -78,22 +106,22 @@
   }
 
   input:invalid {
-    background-color: var(--ld-col-rr-default);
+    background-color: var(--ld-toggle-invalid-input-bg-col);
   }
 }
 
 .ld-toggle--lg {
   &,
   :host(&) {
-    --ld-toggle-height: 2.5rem;
-    --ld-toggle-width: 4.1875rem;
-    --ld-toggle-inner-space: 0.1875rem;
+    --ld-toggle-height: var(--ld-toggle-lg-height);
+    --ld-toggle-width: var(--ld-toggle-lg-width);
+    --ld-toggle-inner-space: var(--ld-toggle-lg-inner-space);
   }
 
   &.ld-toggle--with-icons {
     &,
     :host(&) {
-      --ld-toggle-width: 6rem;
+      --ld-toggle-width: var(--ld-toggle-lg-with-icons-width);
 
       .ld-toggle__icon-start,
       .ld-toggle__icon-end {
@@ -105,27 +133,29 @@
 
 :host(.ld-toggle--with-icons),
 .ld-toggle--with-icons {
-  --ld-toggle-width: 4.5rem;
+  --ld-toggle-width: var(--ld-toggle-with-icons-width);
 
   input {
-    background-color: var(--ld-col-rblck1) !important;
+    &:not(:disabled) {
+      background-color: var(--ld-toggle-with-icons-input-bg-col);
+    }
 
     &:invalid ~ .ld-toggle__knob {
-      background-color: var(--ld-col-rr-default) !important;
+      background-color: var(--ld-toggle-invalid-knob-bg-col);
     }
 
     &:disabled,
     &[aria-disabled='true'] {
-      background-color: var(--ld-col-bg-g) !important;
+      background-color: var(--ld-toggle-with-icons-disabled-input-bg-col);
 
       ~ .ld-toggle__knob {
-        background-color: var(--ld-col-wht);
+        background-color: var(--ld-toggle-disabled-knob-bg-col);
       }
     }
   }
 
   .ld-toggle__knob {
-    background-color: var(--ld-toggle-with-icons-knob-color);
+    background-color: var(--ld-toggle-with-icons-knob-col);
   }
 
   .ld-toggle__icon-start,
@@ -151,11 +181,11 @@
 }
 
 .ld-toggle__icon-start {
-  color: var(--ld-col-wht);
+  color: var(--ld-toggle-icon-start-col);
   left: 0;
 }
 
 .ld-toggle__icon-end {
-  color: var(--ld-col-rblck6);
+  color: var(--ld-toggle-icon-end-col);
   right: 0;
 }