chore(styles): removed background-image borders

swisspost · Sep 25, 2024 · 906b4a9 · 906b4a9
1 parent 5855373
commit 906b4a9
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 128 deletions.
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
@@ -1,5 +1,6 @@
 @forward './../variables/options';
 
+@use 'sass:map';
 @use '../variables/color';
 @use '../variables/commons';
 @use '../variables/type';
@@ -12,7 +13,22 @@
 @use '../tokens/components' as components;
 @use '../functions/tokens' as tokens;
 
-tokens.$default-map: components.$post-switch;
+$temp-map: (
+  'post-switch-disabled-border-width': 1px,
+  'post-switch-disabled-border-stroke': grey,
+  'post-switch-disabled-border-style': dashed,
+  'post-switch-border-width': 1px,
+  'post-switch-border-stroke': tokens.get('switch', 'element-enabled-bg'),
+  'post-switch-handle-disabled-border-width': 1px,
+  'post-switch-handle-disabled-border-stroke': grey,
+  'post-switch-handle-disabled-border-style': dashed,
+  'post-switch-handle-border-width': 1px,
+  'post-switch-handle-border-stroke': tokens.get('switch', 'element-enabled-fg'),
+);
+
+$merged-map: map.merge(components.$post-switch, $temp-map);
+
+tokens.$default-map: $merged-map;
 
 .form-check {
   display: flex;
@@ -152,14 +168,14 @@ tokens.$default-map: components.$post-switch;
       }
 
       border: 0;
-      background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
+      // background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
 
       @include color-mx.on-dark-background {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}');
+        // background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}');
       }
 
       @include utility-mx.high-contrast-mode {
-        background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-lg}') !important;
+        // background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-lg}') !important;
       }
 
       .form-check-sm &[type='checkbox'] {
@@ -209,51 +225,70 @@ tokens.$default-map: components.$post-switch;
   }
 }
 
+$switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/></svg>");
+$switch-handle-icon-disabled: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='m12.667 23.6-7.2-7.067 1.067-1.067 6.133 6.267L25.467 8.8l1.067 1.067z'/></svg>");
+
 .form-switch {
   .form-check-input {
     position: relative;
     display: flex;
     align-items: center;
     height: tokens.get('switch', 'element-height');
     width: tokens.get('switch', 'element-width');
-    border: 0;
+    border: tokens.get('switch', 'border-width') solid tokens.get('switch', 'border-stroke');
     border-radius: tokens.get('switch', 'element-width');
     background-color: tokens.get('switch', 'element-enabled-bg');
-    padding: tokens.get('switch', 'padding-block-text') 0 tokens.get('switch', 'padding-block-text') tokens.get('switch', 'padding-inline-handle');
+    padding: tokens.get('switch', 'padding-block-text') 0 tokens.get('switch', 'padding-block-text')
+      tokens.get('switch', 'padding-inline-handle');
     transition:
-      background-color animation.$transition-base-timing;
-
-    &::before, &::after {
+      background-color animation.$transition-base-timing,
+      border-color animation.$transition-base-timing;
+
+    &::before,
+    &::after {
       position: absolute;
       display: block;
       width: tokens.get('switch', 'element-handle');
       height: tokens.get('switch', 'element-handle');
       background-color: tokens.get('switch', 'element-enabled-fg');
       border-radius: tokens.get('switch', 'border-radius-round');
-      transition: 
+      transition:
         transform animation.$transition-base-timing,
         background-color animation.$transition-base-timing;
     }
 
     &::before {
       content: '';
-      mask-image: form-check.$form-switch-handle-checkmark;
+      mask-image: $switch-handle-icon;
       background-color: transparent;
       z-index: 1;
     }
 
+    &::after {
+      border: tokens.get('switch', 'handle-border-width') solid
+        tokens.get('switch', 'handle-border-stroke');
+    }
+
     &:checked {
       background-color: tokens.get('switch', 'element-selected-bg');
+      border-color: tokens.get('switch', 'element-selected-bg');
+
+      &::before,
+      &::after {
+        transform: translateX(
+          calc(tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') * 1.5)
+        );
+      }
 
-      &::before{
-        transform: translateX(calc(tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') - tokens.get('switch', 'padding-inline-handle') * 2));
+      &::before {
         background-color: tokens.get('switch', 'icon-success');
-      } 
+      }
+
       &::after {
         @include icons-mx.remove-icon;
         background-color: tokens.get('switch', 'element-selected-fg');
-        transform: translateX(calc(tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') - tokens.get('switch', 'padding-inline-handle') * 2));
       }
+
       & + .form-check-label {
         color: tokens.get('switch', 'text-selected-fg');
       }
@@ -262,32 +297,42 @@ tokens.$default-map: components.$post-switch;
     @include utility-mx.high-contrast-mode {
       transition: none;
       border: form-check.$form-check-input-border-width solid CanvasText;
-      
+
       &:checked {
         background-color: SelectedItem !important;
       }
-    
+
       &::after {
         max-width: tokens.get('switch', 'element-handle');
         border-color: Canvas;
         background-color: CanvasText;
       }
 
       &:checked::after {
-        transform: translateX(calc(tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') - tokens.get('switch', 'padding-inline-handle') * 2 - form-check.$form-check-input-border-width * 2));
+        transform: translateX(
+          calc(
+            tokens.get('switch', 'element-width') - tokens.get('switch', 'element-handle') - tokens.get(
+                'switch',
+                'padding-inline-handle'
+              ) * 2 - form-check.$form-check-input-border-width * 2
+          )
+        );
       }
     }
 
     &[disabled] {
       background-color: tokens.get('switch', 'element-disabled-bg');
-      background-image: url('#{form-check.$form-check-input-switch-disabled-background-url-light}');
-
+      border: tokens.get('switch', 'disabled-border-width')
+        tokens.get('switch', 'disabled-border-style') tokens.get('switch', 'disabled-border-stroke');
+
       @include color-mx.on-dark-background {
-        background-image: url('#{form-check.$form-check-input-switch-disabled-background-url-dark}');
+        border: tokens.get('switch', 'disabled-border-width')
+          tokens.get('switch', 'disabled-border-style') color.$white-alpha-80;
       }
 
       @include utility-mx.high-contrast-mode {
-        background-image: url('#{form-check.$form-check-input-switch-disabled-background-url-hcm}') !important;
+        border: tokens.get('switch', 'disabled-border-width')
+          tokens.get('switch', 'disabled-border-style') GrayText;
       }
 
       & + .form-check-label {
@@ -296,19 +341,24 @@ tokens.$default-map: components.$post-switch;
 
       &::after {
         background-color: tokens.get('switch', 'element-disabled-fg');
-        background-image: url('#{form-check.$form-check-input-switch-handle-disabled-background-url-light}');
-
+        border: tokens.get('switch', 'handle-disabled-border-width')
+          tokens.get('switch', 'handle-disabled-border-style')
+          tokens.get('switch', 'handle-disabled-border-stroke');
+
         @include color-mx.on-dark-background {
-          background-image: url('#{form-check.$form-check-input-switch-handle-disabled-background-url-dark}');
+          border: tokens.get('switch', 'handle-disabled-border-width')
+            tokens.get('switch', 'handle-disabled-border-style') color.$white-alpha-80;
         }
-  
+
         @include utility-mx.high-contrast-mode {
-          background-image: url('#{form-check.$form-check-input-switch-handle-disabled-background-url-hcm}') !important;
+          border: tokens.get('switch', 'handle-disabled-border-width')
+            tokens.get('switch', 'handle-disabled-border-style') GrayText;
         }
       }
 
-      &::before {
-        background-color: transparent;
+      &:checked::before {
+        background-color: tokens.get('switch', 'disabled-border-stroke');
+        mask-image: $switch-handle-icon-disabled;
       }
 
       @include utility-mx.high-contrast-mode {
@@ -325,9 +375,11 @@ tokens.$default-map: components.$post-switch;
 
   &:hover > .form-check-input:not([disabled]) {
     background-color: tokens.get('switch', 'element-hover-bg');
+    border-color: tokens.get('switch', 'element-hover-bg');
 
     &::after {
       background-color: tokens.get('switch', 'element-hover-fg');
+      border-color: tokens.get('switch', 'element-hover-fg');
     }
 
     &::before {
@@ -336,7 +388,7 @@ tokens.$default-map: components.$post-switch;
 
     @include utility-mx.high-contrast-mode {
       border-color: Highlight;
-      &::after{
+      &::after {
         background-color: CanvasText;
       }
     }

diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss
@@ -7,10 +7,10 @@
 @use './../../functions/sizing';
 @use './../../functions/forms' as forms-fn;
 
-@use '../../tokens/components' as components;
-@use '../../functions/tokens' as tokens;
+// @use '../../tokens/components' as components;
+// @use '../../functions/tokens' as tokens;
 
-tokens.$default-map: components.$post-switch;
+// tokens.$default-map: components.$post-switch;
 
 $form-check-row-gap: spacing.$size-small-regular !default;
 $form-check-column-gap: spacing.$size-mini !default;
@@ -27,13 +27,6 @@ $form-check-input-disabled-svg-stroke-square-pattern-sm: '2 1.5 4 1.5 4 1.5 2 3.
 $form-check-input-disabled-svg-stroke-square-pathlength-sm: 66;
 $form-check-input-disabled-svg-stroke-circle-pattern: '4 2';
 
-// Switch
-$form-check-input-disabled-svg-stroke-switch-color: #696864;
-$form-check-input-disabled-svg-stroke-switch-border-width: 2px;
-$form-check-input-disabled-svg-stroke-switch-pattern:'4 2';
-$form-check-input-disabled-svg-stroke-switch-pathlength: 138;
-$form-check-input-disabled-svg-stroke-switch-handle-pathlength: 48;
-
 // Checkbox lg
 $form-check-input-disabled-background-url-light-lg: forms-fn.get-background-svg-stroke(
   'square',
@@ -100,91 +93,3 @@ $form-check-input-radio-disabled-background-url-hcm: forms-fn.get-background-svg
   initial,
   $form-check-input-disabled-svg-border-width
 );
-
-// Switch
-$form-check-input-switch-disabled-background-url-light: forms-fn.get-background-svg-stroke(
-  'switch',
-  $form-check-input-disabled-svg-stroke-switch-color,
-  $form-check-input-disabled-svg-stroke-switch-pattern,
-  $form-check-input-disabled-svg-stroke-switch-pathlength,
-  $form-check-input-disabled-svg-stroke-switch-border-width
-);
-$form-check-input-switch-disabled-background-url-dark: forms-fn.get-background-svg-stroke(
-  'switch',
-  color.$white-alpha-80,
-  $form-check-input-disabled-svg-stroke-switch-pattern,
-  $form-check-input-disabled-svg-stroke-switch-pathlength,
-  $form-check-input-disabled-svg-stroke-switch-border-width
-);
-$form-check-input-switch-disabled-background-url-hcm: forms-fn.get-background-svg-stroke(
-  'switch',
-  'GrayText',
-  $form-check-input-disabled-svg-stroke-switch-pattern,
-  $form-check-input-disabled-svg-stroke-switch-pathlength,
-  $form-check-input-disabled-svg-stroke-switch-border-width
-);
-
-// Switch handle
-$form-check-input-switch-handle-disabled-background-url-light: forms-fn.get-background-svg-stroke(
-  'circle',
-  $form-check-input-disabled-svg-stroke-switch-color,
-  $form-check-input-disabled-svg-stroke-switch-pattern,
-  $form-check-input-disabled-svg-stroke-switch-handle-pathlength,
-  $form-check-input-disabled-svg-stroke-switch-border-width
-);
-$form-check-input-switch-handle-disabled-background-url-dark: forms-fn.get-background-svg-stroke(
-  'circle',
-  color.$white-alpha-80,
-  $form-check-input-disabled-svg-stroke-switch-pattern,
-  $form-check-input-disabled-svg-stroke-switch-handle-pathlength,
-  $form-check-input-disabled-svg-stroke-switch-border-width
-);
-$form-check-input-switch-handle-disabled-background-url-hcm: forms-fn.get-background-svg-stroke(
-  'circle',
-  'GrayText',
-  $form-check-input-disabled-svg-stroke-switch-pattern,
-  $form-check-input-disabled-svg-stroke-switch-handle-pathlength,
-  $form-check-input-disabled-svg-stroke-switch-border-width
-);
-
-$form-switch-column-gap: spacing.$size-regular !default;
-$form-switch-height: spacing.$size-big !default;
-$form-switch-width: 2 * spacing.$size-big !default;
-$form-switch-bg: rgba(var(--post-contrast-color-rgb), 0.3) !default;
-$form-switch-checked-bg: var(--post-success) !default;
-$form-switch-disabled-bg: color.$gray-20 !default;
-$form-switch-background-image: linear-gradient(
-  to right,
-  #{$form-switch-bg} 50%,
-  #{$form-switch-checked-bg} 50%
-) !default;
-$form-switch-color: color.$white !default;
-$form-switch-border-color: color.$gray-60 !default;
-$form-switch-checked-border-color: color.$black !default;
-$form-switch-disabled-border-color: color.$gray-40 !default;
-$form-switch-label-padding-top: ($form-switch-height - type.$line-height-copy) * 0.5 !default;
-$form-switch-handle-checkmark: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/></svg>") !default;
-
-// DEPRECATED
-
-$form-switch-padding-start: 0 !default;
-$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-border-color}' stroke-width='2' fill='#{$form-switch-color}'/></svg>") !default;
-$form-switch-border-radius: $form-switch-width !default;
-$form-switch-transition:
-  background-position animation.$transition-base-timing,
-  background-color animation.$transition-time-default !default;
-$form-switch-checked-color: color.$white !default;
-$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'><circle r='15' stroke='#{$form-switch-checked-border-color}' stroke-width='2' fill='#{$form-switch-checked-color}'/></svg>") !default;
-$form-switch-focus-bg-image: $form-switch-checked-bg-image;
-$form-switch-checked-bg-image-size: $form-switch-height;
-$form-switch-hover-bg: rgba(var(--post-contrast-color-rgb), 0.1) !default;
-$form-switch-linear-gradient: linear-gradient(
-  to right,
-  #{$form-switch-bg} 50%,
-  #{$form-switch-checked-bg} 50%
-);
-$form-switch-linear-gradient-size: (2 * $form-switch-width - $form-switch-height)
-  $form-switch-height;
-$form-switch-label-padding-x: spacing.$size-regular !default;
-$form-switch-label-padding-start: $form-switch-label-padding-top 0 0 $form-switch-label-padding-x !default;
-$form-switch-label-padding-end: $form-switch-label-padding-top $form-switch-label-padding-x 0 0 !default;