@massimo-cassandro/minimo 1.22.0 → 1.22.1

package/design-tokens/_src/switch.minimo.tokens.mjs

@@ -1,53 +1,56 @@
 export default {
-  switch: {
-    width: {
-      $value: '2.25em',
-      $type: 'dimension'
-    },
-
-    height: {
-      $value: '1.25em',
-      $type: 'dimension'
-    },
-
-    thumb: {
-      inset: {
-        $value: '.125em',
+  form: {
+
+    switch: {
+      width: {
+        $value: '2.25em',
         $type: 'dimension'
       },
-    },
 
-    transition: {
-      duration: {
-        $value: '.2s',
-        $type: 'duration'
+      height: {
+        $value: '1.25em',
+        $type: 'dimension'
       },
-    },
 
-    background: {
-      color: {
-        $value: '{neutral.100}',
-        $type: 'color'
-      }
-    },
+      thumb: {
+        inset: {
+          $value: '.125em',
+          $type: 'dimension'
+        },
+      },
 
-    cursor: {
-      background: {
-        color: {
-          $value: '{body.background.color}',
-          $type: 'color'
-        }
+      transition: {
+        duration: {
+          $value: '.2s',
+          $type: 'duration'
+        },
       },
-    },
 
-    checked: {
       background: {
         color: {
-          $value: '{primary.100}',
+          $value: '{neutral.100}',
           $type: 'color'
         }
       },
-    }
 
+      cursor: {
+        background: {
+          color: {
+            $value: '{body.background.color}',
+            $type: 'color'
+          }
+        },
+      },
+
+      checked: {
+        background: {
+          color: {
+            $value: '{primary.100}',
+            $type: 'color'
+          }
+        },
+      }
+
+    }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/css/forms/switch.css

@@ -17,7 +17,7 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
 
 .form-switch {
 
-  --_switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
+  --_switch-thumb-size: calc(var(--form-switch-height) - var(--form-switch-thumb-inset) * 2);
 
   /* annulla il layout con float di `.form-check` */
   display: flex;
@@ -28,29 +28,29 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
   .form-check-input {
     float: none;
     flex: none;
-    width: var(--switch-width);
-    height: var(--switch-height);
+    width: var(--form-switch-width);
+    height: var(--form-switch-height);
     margin: 0;
     appearance: none;
     cursor: pointer;
-    background-color: var(--switch-background-color);
+    background-color: var(--form-switch-background-color);
     background-image: radial-gradient(
       circle closest-side,
-      var(--switch-cursor-background-color) 98%,
+      var(--form-switch-cursor-background-color) 98%,
       transparent
     );
     background-repeat: no-repeat;
-    background-position: var(--switch-thumb-inset) center;
+    background-position: var(--form-switch-thumb-inset) center;
     background-size: var(--_switch-thumb-size) var(--_switch-thumb-size);
     border: none;
-    border-radius: var(--switch-height);
+    border-radius: var(--form-switch-height);
 
     /* annulla lo `scale` applicato a tutti i checkbox */
     scale: none;
 
     &:checked {
-      background-color: var(--switch-checked-background-color);
-      background-position: calc(100% - var(--switch-thumb-inset)) center;
+      background-color: var(--form-switch-checked-background-color);
+      background-position: calc(100% - var(--form-switch-thumb-inset)) center;
     }
 
     &:focus {
@@ -80,8 +80,8 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
 @media (prefers-reduced-motion: no-preference) {
   .form-switch .form-check-input {
     transition:
-      background-color var(--switch-transition-duration) linear,
-      background-position var(--switch-transition-duration) ease-in-out;
+      background-color var(--form-switch-transition-duration) linear,
+      background-position var(--form-switch-transition-duration) ease-in-out;
   }
 }
 
@@ -95,15 +95,15 @@ Dove non è supportato (o dove l'attributo è assente) si applica il fallback
     border-radius: 0; /* gestito da ::track */
 
     &::track {
-      background-color: var(--switch-background-color);
+      background-color: var(--form-switch-background-color);
     }
 
     &::thumb {
-      background-color: var(--switch-cursor-background-color);
+      background-color: var(--form-switch-cursor-background-color);
     }
 
     &:checked::track {
-      background-color: var(--switch-checked-background-color);
+      background-color: var(--form-switch-checked-background-color);
     }
   }
 }

package/src/custom-properties.css

@@ -193,6 +193,13 @@
   --form-label-font-weight: var(--font-weight-semibold);
   --form-legend-background-color: transparent;
   --form-legend-color: var(--text-color);
+  --form-switch-background-color: var(--neutral-100);
+  --form-switch-checked-background-color: var(--primary-100);
+  --form-switch-cursor-background-color: var(--body-background-color);
+  --form-switch-height: 1.25em;
+  --form-switch-thumb-inset: .125em;
+  --form-switch-transition-duration: .2s;
+  --form-switch-width: 2.25em;
   --form-user-info-color: var(--text-muted);
   --form-user-info-font-size: var(--font-size-xs);
   --form-validation-outline-offset: -3px;
@@ -380,14 +387,6 @@
   --status-warning-color: #fc0;
   --status-warning-fg: #4f2900;
 
-  --switch-background-color: var(--neutral-100);
-  --switch-checked-background-color: var(--primary-100);
-  --switch-cursor-background-color: var(--body-background-color);
-  --switch-height: 1.25em;
-  --switch-thumb-inset: .125em;
-  --switch-transition-duration: .2s;
-  --switch-width: 2.25em;
-
   --table-body-border-width: 1px;
   --table-body-tr-alt-bg-color: #efefef;
   --table-body-tr-hover-bg-color: #cbcbcb;