fix(styles): Update disabled styles for form-check (except switch) (#…

…2813)
swisspost · Apr 16, 2024 · 0300ab9 · 0300ab9
1 parent d0b7d89
commit 0300ab9
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 28 deletions.
diff --git a/.changeset/odd-rabbits-boil.md b/.changeset/odd-rabbits-boil.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added new disabled styles for radio and checkbox, fixed color contrast on this state and fixed cursor style.
diff --git a/packages/documentation/cypress/e2e/components/checkbox.cy.ts b/packages/documentation/cypress/e2e/components/checkbox.cy.ts
@@ -7,13 +7,7 @@ describe('Checkbox', () => {
     });
 
     it('Has no detectable a11y violations on load for all variants', () => {
-      cy.checkA11y('#root-inner', {
-        rules: {
-          'color-contrast': {
-            enabled: false,
-          },
-        },
-      });
+      cy.checkA11y('#root-inner');
     });
   });
 });
diff --git a/packages/documentation/cypress/e2e/components/radio.cy.ts b/packages/documentation/cypress/e2e/components/radio.cy.ts
@@ -7,13 +7,7 @@ describe('Radio', () => {
     });
 
     it('Has no detectable a11y violations on load for all variants', () => {
-      cy.checkA11y('#root-inner', {
-        rules: {
-          'color-contrast': {
-            enabled: false,
-          },
-        },
-      });
+      cy.checkA11y('#root-inner');
     });
   });
 });
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
@@ -6,6 +6,7 @@
 @use '../variables/spacing';
 @use '../variables/animation';
 @use '../variables/components/form-check';
+@use '../mixins/color' as color-mx;
 @use '../mixins/icons' as icons-mx;
 @use '../mixins/utilities' as utility-mx;
 
@@ -49,10 +50,11 @@
     }
 
     @include utility-mx.focus-style-none();
+
     display: inline-flex;
     flex: 0 auto;
     appearance: none;
-    background: color.$white;
+    background: transparent;
     height: form-check.$form-check-input-size;
     width: form-check.$form-check-input-size;
     border: form-check.$form-check-input-border-width solid
@@ -108,10 +110,41 @@
       }
     }
 
+    &[type='radio'] {
+      border-radius: 50%;
+
+      &:checked::after {
+        border: spacing.$size-micro solid transparent;
+        background-color: currentColor;
+        border-radius: inherit;
+        background-clip: padding-box;
+
+        @include utility-mx.high-contrast-mode {
+          background-color: SelectedItem;
+          border-color: Canvas;
+        }
+      }
+
+      &[disabled] {
+        padding: spacing.$size-line; // Used to mimic border width because it is used in combination with background-clip: padding-box; to size the selected shape
+        background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-light}');
+
+        @include color-mx.on-dark-background {
+          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-dark}');
+        }
+
+        @include utility-mx.high-contrast-mode {
+          background-image: url('#{form-check.$form-check-input-radio-disabled-background-url-hcm}') !important;
+        }
+      }
+    }
+
     &[disabled] {
       &[type='checkbox'],
       &[type='radio'] {
-        border-color: GrayText !important;
+        @include utility-mx.high-contrast-mode {
+          border-color: GrayText !important;
+        }
       }
 
       &[type='checkbox'] {
@@ -131,28 +164,39 @@
           }
         }
       }
-    }
 
-    &[type='radio'] {
-      border-radius: 50%;
+      border: 0;
+      background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
 
-      &:checked::after {
-        border: spacing.$size-micro solid transparent;
-        background-color: currentColor;
-        border-radius: inherit;
-        background-clip: padding-box;
+      @include color-mx.on-dark-background {
+        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;
+      }
+
+      .form-check-sm &[type='checkbox'] {
+        background-image: url('#{form-check.$form-check-input-disabled-background-url-light-sm}');
+
+        @include color-mx.on-dark-background {
+          background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-sm}');
+        }
 
         @include utility-mx.high-contrast-mode {
-          background-color: SelectedItem;
-          border-color: Canvas;
+          background-image: url('#{form-check.$form-check-input-disabled-background-url-hcm-sm}') !important;
         }
       }
     }
 
     &[disabled],
     &[disabled] ~ .form-check-label {
-      border-color: rgba(var(--post-contrast-color-rgb), 0.4) !important;
-      color: rgba(var(--post-contrast-color-rgb), 0.4) !important;
+      text-decoration: line-through;
+      color: color.$black-alpha-60;
+
+      @include color-mx.on-dark-background() {
+        color: color.$white-alpha-80;
+      }
     }
 
     .form-check-sm & {

diff --git a/packages/styles/src/functions/_forms.scss b/packages/styles/src/functions/_forms.scss
@@ -0,0 +1,22 @@
+// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
+@function get-background-svg-stroke(
+  $type,
+  $color,
+  $stroke-dasharray,
+  $stroke-pathlength,
+  $stroke-width
+) {
+  $svg-additional-attributes: '';
+  $stroke-pathlength-attribute: '';
+
+  @if ($type == 'circle') {
+    $svg-additional-attributes: "rx='100' ry='100'";
+  }
+  @if ($stroke-pathlength != 'initial') {
+    $stroke-pathlength-attribute: " pathLength='" + $stroke-pathlength + "'";
+  }
+  @return "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' " +
+    $svg-additional-attributes + " fill='none' stroke='" + $color + "' stroke-width='" +
+    $stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute +
+    ' /%3e%3c/svg%3e';
+}
diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss
@@ -5,6 +5,7 @@
 @use './../animation';
 @use './../../functions/icons';
 @use './../../functions/sizing';
+@use './../../functions/forms' as forms-fn;
 
 $form-check-row-gap: spacing.$size-small-regular !default;
 $form-check-column-gap: spacing.$size-mini !default;
@@ -14,6 +15,79 @@ $form-check-input-size: 1.375rem !default;
 $form-check-input-size-sm: spacing.$size-regular !default;
 $form-check-input-border-width: forms.$input-border-width !default;
 $form-check-input-focus-box-shadow: forms.$input-focus-box-shadow !default;
+$form-check-input-disabled-svg-border-width: $form-check-input-border-width * 2;
+$form-check-input-disabled-svg-stroke-square-pattern-lg: '2 1.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4';
+$form-check-input-disabled-svg-stroke-square-pathlength-lg: 88;
+$form-check-input-disabled-svg-stroke-square-pattern-sm: '2 1.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 2 3.5 4 1.5 4 1.5 4';
+$form-check-input-disabled-svg-stroke-square-pathlength-sm: 66;
+$form-check-input-disabled-svg-stroke-circle-pattern: '4 2';
+
+// Checkbox lg
+$form-check-input-disabled-background-url-light-lg: forms-fn.get-background-svg-stroke(
+  'square',
+  color.$gray-60,
+  $form-check-input-disabled-svg-stroke-square-pattern-lg,
+  $form-check-input-disabled-svg-stroke-square-pathlength-lg,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-disabled-background-url-dark-lg: forms-fn.get-background-svg-stroke(
+  'square',
+  color.$white-alpha-80,
+  $form-check-input-disabled-svg-stroke-square-pattern-lg,
+  $form-check-input-disabled-svg-stroke-square-pathlength-lg,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-disabled-background-url-hcm-lg: forms-fn.get-background-svg-stroke(
+  'square',
+  'GrayText',
+  $form-check-input-disabled-svg-stroke-square-pattern-lg,
+  $form-check-input-disabled-svg-stroke-square-pathlength-lg,
+  $form-check-input-disabled-svg-border-width
+);
+//Checkbox sm
+$form-check-input-disabled-background-url-light-sm: forms-fn.get-background-svg-stroke(
+  'square',
+  color.$gray-60,
+  $form-check-input-disabled-svg-stroke-square-pattern-sm,
+  $form-check-input-disabled-svg-stroke-square-pathlength-sm,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-disabled-background-url-dark-sm: forms-fn.get-background-svg-stroke(
+  'square',
+  color.$white-alpha-80,
+  $form-check-input-disabled-svg-stroke-square-pattern-sm,
+  $form-check-input-disabled-svg-stroke-square-pathlength-sm,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-disabled-background-url-hcm-sm: forms-fn.get-background-svg-stroke(
+  'square',
+  'GrayText',
+  $form-check-input-disabled-svg-stroke-square-pattern-sm,
+  $form-check-input-disabled-svg-stroke-square-pathlength-sm,
+  $form-check-input-disabled-svg-border-width
+);
+// Radio
+$form-check-input-radio-disabled-background-url-light: forms-fn.get-background-svg-stroke(
+  'circle',
+  color.$gray-60,
+  $form-check-input-disabled-svg-stroke-circle-pattern,
+  initial,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-radio-disabled-background-url-dark: forms-fn.get-background-svg-stroke(
+  'circle',
+  color.$white-alpha-80,
+  $form-check-input-disabled-svg-stroke-circle-pattern,
+  initial,
+  $form-check-input-disabled-svg-border-width
+);
+$form-check-input-radio-disabled-background-url-hcm: forms-fn.get-background-svg-stroke(
+  'circle',
+  'GrayText',
+  $form-check-input-disabled-svg-stroke-circle-pattern,
+  initial,
+  $form-check-input-disabled-svg-border-width
+);
 
 $form-switch-column-gap: spacing.$size-regular !default;
 $form-switch-height: spacing.$size-big !default;