@nordcode/ui 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 ## 2.1.1 (2025-11-15)
 
-### changes
+### fixes
+
+- fix checkbox, radio and switch styles
+
+## 2.1.1 (2025-11-15)
+
+### fixes
 
 - properly disable animations for users who prefer reduced motion
 

package/out/bundle.css

@@ -1210,13 +1210,13 @@
 
   @media (prefers-reduced-motion: reduce) {
     :where(html) {
-      --transition-duration-quick-1: 80ms;
-      --transition-duration-quick-2: .12s;
-      --transition-duration-moderate-1: .18s;
-      --transition-duration-moderate-2: .26s;
-      --transition-duration-gentle-1: .32s;
-      --transition-duration-gentle-2: .42s;
-      --transition-duration-calculated: 0;
+      --transition-duration-quick-1: 0s;
+      --transition-duration-quick-2: 0s;
+      --transition-duration-moderate-1: 0s;
+      --transition-duration-moderate-2: 0s;
+      --transition-duration-gentle-1: 0s;
+      --transition-duration-gentle-2: 0s;
+      --transition-duration-calculated: 0s;
       --transition-duration-instant: 0s;
       --transition-duration-entry: 0s;
       --transition-duration-exit: 0s;

package/out/bundle_configless.css

@@ -1002,13 +1002,13 @@
 
   @media (prefers-reduced-motion: reduce) {
     :where(html) {
-      --transition-duration-quick-1: 80ms;
-      --transition-duration-quick-2: .12s;
-      --transition-duration-moderate-1: .18s;
-      --transition-duration-moderate-2: .26s;
-      --transition-duration-gentle-1: .32s;
-      --transition-duration-gentle-2: .42s;
-      --transition-duration-calculated: 0;
+      --transition-duration-quick-1: 0s;
+      --transition-duration-quick-2: 0s;
+      --transition-duration-moderate-1: 0s;
+      --transition-duration-moderate-2: 0s;
+      --transition-duration-gentle-1: 0s;
+      --transition-duration-gentle-2: 0s;
+      --transition-duration-calculated: 0s;
       --transition-duration-instant: 0s;
       --transition-duration-entry: 0s;
       --transition-duration-exit: 0s;

package/out/complete.css

@@ -1210,13 +1210,13 @@
 
   @media (prefers-reduced-motion: reduce) {
     :where(html) {
-      --transition-duration-quick-1: 80ms;
-      --transition-duration-quick-2: .12s;
-      --transition-duration-moderate-1: .18s;
-      --transition-duration-moderate-2: .26s;
-      --transition-duration-gentle-1: .32s;
-      --transition-duration-gentle-2: .42s;
-      --transition-duration-calculated: 0;
+      --transition-duration-quick-1: 0s;
+      --transition-duration-quick-2: 0s;
+      --transition-duration-moderate-1: 0s;
+      --transition-duration-moderate-2: 0s;
+      --transition-duration-gentle-1: 0s;
+      --transition-duration-gentle-2: 0s;
+      --transition-duration-calculated: 0s;
       --transition-duration-instant: 0s;
       --transition-duration-entry: 0s;
       --transition-duration-exit: 0s;
@@ -2171,8 +2171,7 @@
     line-height: var(--line-height-base);
   }
 
-  :where(input, textarea, select, .nc-input):focus, :where(input, textarea, select, .nc-input):hover:focus {
-    --current-background: var(--_input-background-active);
+  :where(input, textarea, select, .nc-input):focus-visible {
     outline: var(--_input-outline);
     outline-offset: 0;
     background-color: var(--_input-background-active);
@@ -2184,7 +2183,6 @@
   }
 
   :where(input, textarea, select, .nc-input):hover {
-    --current-background: var(--_input-hover-background);
     background-color: var(--_input-hover-background);
   }
 
@@ -2228,8 +2226,8 @@
   :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
     appearance: none;
     border: var(--_input-border);
-    --current-background: var(--_input-background);
-    background: var(--current-background);
+    --current-checkbox-bg: var(--_input-background);
+    background: var(--current-checkbox-bg);
     block-size: 1lh;
     inline-size: 1lh;
     transition: var(--transition-duration-quick-1) background var(--ease-2);
@@ -2240,6 +2238,19 @@
     display: inline-flex;
   }
 
+  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked {
+    --current-checkbox-bg: var(--color-brand-primary-base);
+    background-color: var(--color-brand-primary-base);
+  }
+
+  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):hover, :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):focus-visible {
+    background-color: var(--_input-hover-background);
+  }
+
+  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked:hover, :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked:focus-visible {
+    background-color: color-mix(in oklch, var(--current-checkbox-bg), var(--_input-hover-background) 20%);
+  }
+
   :where(input[type="checkbox"], .nc-input-checkbox) {
     --_transition-duration: 0s;
     border-radius: var(--_input-border-radius);
@@ -2263,10 +2274,6 @@
     transform: scale(.8)translateY(2em);
   }
 
-  :where(input[type="checkbox"], .nc-input-checkbox):checked {
-    --current-background: var(--color-brand-primary-base);
-  }
-
   :where(input[type="checkbox"], .nc-input-checkbox):checked:before {
     transform: scale(1)translateY(0%);
   }
@@ -2287,10 +2294,6 @@
     transform: scale(.8)translateY(2em);
   }
 
-  :where(input[type="radio"], .nc-input-radio):checked {
-    --current-background: var(--color-brand-primary-base);
-  }
-
   :where(input[type="radio"], .nc-input-radio):checked:before {
     transform: scale(1)translateY(0%);
   }
@@ -2406,8 +2409,12 @@
     grid-area: checkbox;
   }
 
-  :where(.nc-checkbox-wrapper):hover:not(:has(input:checked)) input {
-    background: var(--_input-hover-background);
+  :where(.nc-checkbox-wrapper):hover input {
+    background-color: var(--_input-hover-background);
+  }
+
+  :where(.nc-checkbox-wrapper):hover input:checked {
+    background-color: color-mix(in oklch, var(--current-checkbox-bg), var(--_input-hover-background) 20%);
   }
 
   :where(.nc-radio-field, .nc-checkbox-field) {
@@ -2538,7 +2545,7 @@
     inline-size: var(--_switch-width);
     block-size: var(--_switch-height);
     border-radius: var(--_input-border-radius);
-    --current-background: var(--_switch-color);
+    --current-checkbox-bg: var(--_switch-color);
     justify-content: flex-start;
   }
 
@@ -2548,21 +2555,24 @@
     margin-block: var(--_thumb-margin);
     transform: translateX(var(--_thumb-margin));
     block-size: calc(100% - 2 * var(--_thumb-margin));
+    inline-size: unset;
     background-color: var(--_thumb-color);
     border-radius: var(--_input-border-radius);
     box-shadow: var(--shadow-near);
     transition: transform, background-color;
     transition-duration: var(--transition-duration-quick-2);
     transition-timing-function: var(--ease-2);
+    clip-path: none;
     display: block;
   }
 
   :where(.nc-input-switch):checked {
-    --current-background: var(--_switch-color-checked);
+    --current-checkbox-bg: var(--_switch-color-checked);
   }
 
   :where(.nc-input-switch):checked:before {
     transform: translateX(calc(var(--_switch-width)  - var(--_switch-height)  + var(--_thumb-margin)));
+    --_thumb-color: var(--thumb-color-checked, var(--_input-background));
   }
 }
 

package/out/complete_configless.css

@@ -1002,13 +1002,13 @@
 
   @media (prefers-reduced-motion: reduce) {
     :where(html) {
-      --transition-duration-quick-1: 80ms;
-      --transition-duration-quick-2: .12s;
-      --transition-duration-moderate-1: .18s;
-      --transition-duration-moderate-2: .26s;
-      --transition-duration-gentle-1: .32s;
-      --transition-duration-gentle-2: .42s;
-      --transition-duration-calculated: 0;
+      --transition-duration-quick-1: 0s;
+      --transition-duration-quick-2: 0s;
+      --transition-duration-moderate-1: 0s;
+      --transition-duration-moderate-2: 0s;
+      --transition-duration-gentle-1: 0s;
+      --transition-duration-gentle-2: 0s;
+      --transition-duration-calculated: 0s;
       --transition-duration-instant: 0s;
       --transition-duration-entry: 0s;
       --transition-duration-exit: 0s;
@@ -1963,8 +1963,7 @@
     line-height: var(--line-height-base);
   }
 
-  :where(input, textarea, select, .nc-input):focus, :where(input, textarea, select, .nc-input):hover:focus {
-    --current-background: var(--_input-background-active);
+  :where(input, textarea, select, .nc-input):focus-visible {
     outline: var(--_input-outline);
     outline-offset: 0;
     background-color: var(--_input-background-active);
@@ -1976,7 +1975,6 @@
   }
 
   :where(input, textarea, select, .nc-input):hover {
-    --current-background: var(--_input-hover-background);
     background-color: var(--_input-hover-background);
   }
 
@@ -2020,8 +2018,8 @@
   :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
     appearance: none;
     border: var(--_input-border);
-    --current-background: var(--_input-background);
-    background: var(--current-background);
+    --current-checkbox-bg: var(--_input-background);
+    background: var(--current-checkbox-bg);
     block-size: 1lh;
     inline-size: 1lh;
     transition: var(--transition-duration-quick-1) background var(--ease-2);
@@ -2032,6 +2030,19 @@
     display: inline-flex;
   }
 
+  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked {
+    --current-checkbox-bg: var(--color-brand-primary-base);
+    background-color: var(--color-brand-primary-base);
+  }
+
+  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):hover, :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):focus-visible {
+    background-color: var(--_input-hover-background);
+  }
+
+  :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked:hover, :where(input[type="checkbox"], input[type="radio"], .nc-input-checkbox, .nc-input-radio, .nc-input-switch):checked:focus-visible {
+    background-color: color-mix(in oklch, var(--current-checkbox-bg), var(--_input-hover-background) 20%);
+  }
+
   :where(input[type="checkbox"], .nc-input-checkbox) {
     --_transition-duration: 0s;
     border-radius: var(--_input-border-radius);
@@ -2055,10 +2066,6 @@
     transform: scale(.8)translateY(2em);
   }
 
-  :where(input[type="checkbox"], .nc-input-checkbox):checked {
-    --current-background: var(--color-brand-primary-base);
-  }
-
   :where(input[type="checkbox"], .nc-input-checkbox):checked:before {
     transform: scale(1)translateY(0%);
   }
@@ -2079,10 +2086,6 @@
     transform: scale(.8)translateY(2em);
   }
 
-  :where(input[type="radio"], .nc-input-radio):checked {
-    --current-background: var(--color-brand-primary-base);
-  }
-
   :where(input[type="radio"], .nc-input-radio):checked:before {
     transform: scale(1)translateY(0%);
   }
@@ -2198,8 +2201,12 @@
     grid-area: checkbox;
   }
 
-  :where(.nc-checkbox-wrapper):hover:not(:has(input:checked)) input {
-    background: var(--_input-hover-background);
+  :where(.nc-checkbox-wrapper):hover input {
+    background-color: var(--_input-hover-background);
+  }
+
+  :where(.nc-checkbox-wrapper):hover input:checked {
+    background-color: color-mix(in oklch, var(--current-checkbox-bg), var(--_input-hover-background) 20%);
   }
 
   :where(.nc-radio-field, .nc-checkbox-field) {
@@ -2330,7 +2337,7 @@
     inline-size: var(--_switch-width);
     block-size: var(--_switch-height);
     border-radius: var(--_input-border-radius);
-    --current-background: var(--_switch-color);
+    --current-checkbox-bg: var(--_switch-color);
     justify-content: flex-start;
   }
 
@@ -2340,21 +2347,24 @@
     margin-block: var(--_thumb-margin);
     transform: translateX(var(--_thumb-margin));
     block-size: calc(100% - 2 * var(--_thumb-margin));
+    inline-size: unset;
     background-color: var(--_thumb-color);
     border-radius: var(--_input-border-radius);
     box-shadow: var(--shadow-near);
     transition: transform, background-color;
     transition-duration: var(--transition-duration-quick-2);
     transition-timing-function: var(--ease-2);
+    clip-path: none;
     display: block;
   }
 
   :where(.nc-input-switch):checked {
-    --current-background: var(--_switch-color-checked);
+    --current-checkbox-bg: var(--_switch-color-checked);
   }
 
   :where(.nc-input-switch):checked:before {
     transform: translateX(calc(var(--_switch-width)  - var(--_switch-height)  + var(--_thumb-margin)));
+    --_thumb-color: var(--thumb-color-checked, var(--_input-background));
   }
 }
 

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "2.1.1",
+  "version": "2.1.2",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/inputs/base.css

@@ -48,9 +48,7 @@
         inline-size: var(--input-inline-size, auto);
         line-height: var(--line-height-base);
 
-        &:focus,
-        &:hover:focus {
-            --current-background: var(--_input-background-active);
+        &:focus-visible {
             outline: var(--_input-outline);
             outline-offset: 0;
             background-color: var(--_input-background-active);
@@ -62,7 +60,6 @@
         }
 
         &:hover {
-            --current-background: var(--_input-hover-background);
             background-color: var(--_input-hover-background);
         }
 
@@ -114,10 +111,27 @@
         align-items: center;
         justify-content: center;
         border: var(--_input-border);
-        --current-background: var(--_input-background);
-        background: var(--current-background);
+        --current-checkbox-bg: var(--_input-background);
+        background: var(--current-checkbox-bg);
         transition: var(--transition-duration-quick-1) background var(--ease-2);
         box-shadow: var(--_input-box-shadow);
+
+        &:checked {
+            --current-checkbox-bg: var(--color-brand-primary-base);
+            background-color: var(--color-brand-primary-base);
+        }
+
+        &:hover, &:focus-visible {
+            background-color: var(--_input-hover-background);
+        }
+
+        &:checked:hover, &:checked:focus-visible {
+            background-color: color-mix(
+                in oklch,
+                var(--current-checkbox-bg),
+                var(--_input-hover-background) 20%
+            );
+        }
     }
 
     :where(input[type="checkbox"], .nc-input-checkbox) {
@@ -142,12 +156,8 @@
             clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
         }
 
-        &:checked {
-            --current-background: var(--color-brand-primary-base);
-
-            &:before {
-                transform: scale(1) translateY(0%);
-            }
+        &:checked:before {
+            transform: scale(1) translateY(0%);
         }
     }
 
@@ -166,12 +176,8 @@
             transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
         }
 
-        &:checked {
-            --current-background: var(--color-brand-primary-base);
-
-            &:before {
-                transform: scale(1) translateY(0%);
-            }
+        &:checked:before {
+            transform: scale(1) translateY(0%);
         }
     }
 

package/src/styles/components/inputs/fields.css

@@ -61,8 +61,16 @@
             grid-area: checkbox;
         }
 
-        &:hover:not(:has(input:checked)) input {
-            background: var(--_input-hover-background);
+        &:hover input {
+            background-color: var(--_input-hover-background);
+        }
+
+        &:hover input:checked {
+            background-color: color-mix(
+                in oklch,
+                var(--current-checkbox-bg),
+                var(--_input-hover-background) 20%
+            );
         }
     }
 

package/src/styles/components/inputs/switch.css

@@ -11,7 +11,7 @@
         inline-size: var(--_switch-width);
         block-size: var(--_switch-height);
         border-radius: var(--_input-border-radius);
-        --current-background: var(--_switch-color);
+        --current-checkbox-bg: var(--_switch-color);
         justify-content: flex-start;
 
         &:before {
@@ -21,20 +21,23 @@
             margin-block: var(--_thumb-margin);
             transform: translateX(var(--_thumb-margin));
             block-size: calc(100% - 2 * var(--_thumb-margin));
+            inline-size: unset;
             background-color: var(--_thumb-color);
             border-radius: var(--_input-border-radius);
             box-shadow: var(--shadow-near);
             transition: transform, background-color;
             transition-duration: var(--transition-duration-quick-2);
             transition-timing-function: var(--ease-2);
+            clip-path: none;
         }
 
         &:checked {
-            --current-background: var(--_switch-color-checked);
+            --current-checkbox-bg: var(--_switch-color-checked);
         }
 
         &:checked:before {
             transform: translateX(calc(var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin)));
+            --_thumb-color: var(--thumb-color-checked, var(--_input-background));
         }
     }
 }