Tokenize toggle style, so it can be easily overridden

Author: mpellerin42

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.64.10 (2024-03-15)
+
+### Improvements
+
+- **Toggle**: tokenize toggle style, so it can be easily overridden
+
 # 2.64.9 (2024-03-11)
 
 ### Improvements

projects/pastanaga-angular/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.64.9",
+    "version": "2.64.10",
     "license": "MIT",
     "keywords": [
         "angular",

projects/pastanaga-angular/src/lib/controls/toggles/toggle/toggle.component.scss

@@ -1,10 +1,7 @@
 @use 'sass:math';
 @import '../../../../styles/variables';
 
-$toggle-full-width: rhythm(6);
-$toggle-full-mid-width: math.div($toggle-full-width, 2);
-$toggle-full-height: rhythm(3);
-$toggle-slider-padding: rhythm(0.25);
+$toggle-mid-width: math.div($width-toggle, 2);
 $toggle-transition-duration: $duration-fast;
 
 .pa-field {
@@ -52,9 +49,9 @@ $toggle-transition-duration: $duration-fast;
 
 .pa-toggle-container {
   position: relative;
-  width: $toggle-full-width;
-  min-width: $toggle-full-width;
-  height: $toggle-full-height;
+  width: $width-toggle;
+  min-width: $width-toggle;
+  height: $height-toggle;
   box-sizing: border-box;
 
   input {
@@ -63,8 +60,8 @@ $toggle-transition-duration: $duration-fast;
   }
 
   .pa-toggle-checkbox {
-    width: $toggle-full-width;
-    height: $toggle-full-height;
+    width: $width-toggle;
+    height: $height-toggle;
     opacity: 0;
   }
   .pa-toggle-slider {
@@ -74,28 +71,28 @@ $toggle-transition-duration: $duration-fast;
     bottom: 0;
     left: 0;
     transition: $toggle-transition-duration;
-    border-radius: $toggle-full-height;
-    background: $color-neutral-lighter;
+    border-radius: $height-toggle;
+    background: $color-background-toggle-slider;
     cursor: pointer;
     &:before {
       content: '';
       position: absolute;
       border-radius: 50%;
       transition: $toggle-transition-duration;
-      top: $toggle-slider-padding;
-      right: $toggle-full-mid-width + $toggle-slider-padding;
-      bottom: $toggle-slider-padding;
-      left: $toggle-slider-padding;
+      top: $padding-toggle-slider;
+      right: $toggle-mid-width + $padding-toggle-slider;
+      bottom: $padding-toggle-slider;
+      left: $padding-toggle-slider;
       box-shadow: 0 rhythm(0.25) rhythm(0.5) rgba(0, 0, 0, 0.15);
-      background-color: $color-light-stronger;
+      background-color: $color-background-toggle-button;
     }
   }
 
   &.pa-checked {
     .pa-toggle-slider {
-      background: $color-primary-regular;
+      background: $color-background-toggle-slider-selected;
       &:before {
-        transform: translateX($toggle-full-mid-width);
+        transform: translateX($toggle-mid-width);
       }
     }
   }
@@ -107,9 +104,9 @@ $toggle-transition-duration: $duration-fast;
   &.pa-disable {
     .pa-toggle-slider {
       cursor: default;
-      background: $color-neutral-light;
+      background: $color-background-toggle-slider-disabled;
       &:before {
-        background-color: $color-neutral-lighter;
+        background-color: $color-background-toggle-button-disabled;
       }
     }
   }

projects/pastanaga-angular/src/styles/theme/_toggle.tokens.scss

@@ -6,12 +6,19 @@
 // COLORS
 //=====================================
 
-// Background
+// Background checkbox/radio
 $color-background-toggle-selected: $color-primary-regular !default;
 $color-background-toggle-selected-hover: $color-primary-strong !default;
 $color-background-toggle-disabled: $color-neutral-lightest !default;
 $color-background-toggle-unselected-disabled: $color-neutral-lightest !default;
 
+// Background toggle
+$color-background-toggle-button: $color-light-stronger !default;
+$color-background-toggle-slider: $color-neutral-lighter !default;
+$color-background-toggle-slider-selected: $color-primary-regular !default;
+$color-background-toggle-slider-disabled: $color-neutral-light !default;
+$color-background-toggle-button-disabled: $color-neutral-lighter !default;
+
 // Border
 $color-border-toggle-selected: $color-background-toggle-selected !default;
 $color-border-toggle-selected-hover: $color-background-toggle-selected-hover !default;
@@ -31,6 +38,10 @@ $color-check-toggle-disabled: $color-neutral-light !default;
 $size-toggle-checkbox: calc(#{rhythm(2)} - #{rhythm(0.25)}) !default;
 $gap-radio-group: rhythm(1) !default;
 
+$height-toggle: rhythm(3) !default;
+$width-toggle: rhythm(6) !default;
+$padding-toggle-slider: rhythm(0.25) !default;
+
 //=====================================
 // TYPOGRAPHY
 //=====================================