feat(component): Add Switch component

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "64.0 kB"
+      "maxSize": "64.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "61.0 kB"
+      "maxSize": "61.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",

scss/_root.scss

@@ -431,8 +431,6 @@
   --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter}; // OUDS mod
   --#{$prefix}form-select-indicator: #{$form-select-indicator}; // OUDS mod
   --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator}; // OUDS mod
-  --#{$prefix}form-switch-square-bg: #{$form-switch-square-bg}; // OUDS mod
-  --#{$prefix}form-switch-unchecked-invalid-border-color: #{$form-switch-unchecked-invalid-border-color}; // OUDS mod
 
   // OUDS mod
   // Table-specific styles
@@ -525,8 +523,6 @@
     --#{$prefix}form-select-indicator: #{$form-select-indicator-dark}; // OUDS mod
     --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // OUDS mod
     --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter-dark};
-    --#{$prefix}form-switch-square-bg: #{$form-switch-square-bg-dark}; // OUDS mod
-    --#{$prefix}form-switch-unchecked-invalid-border-color: #{$form-switch-unchecked-invalid-border-color-dark}; // OUDS mod
 
     // OUDS mod
     // Table-specific styles

scss/_variables-dark.scss

@@ -99,7 +99,6 @@ $svg-as-custom-props-dark: (
 //
 
 $form-color-disabled-filter-dark:       brightness(0) invert(1) brightness(.4) !default; // OUDS mod
-$form-switch-square-bg-dark:            $ouds-color-functional-dark-gray-880 !default; // OUDS mod
 
 // OUDS mod: no $form-select-indicator-color-dark
 $form-select-indicator-dark:            escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$white}' d='M7 7 0 0h14L7 7z'/></svg>")) !default; // OUDS mod: instead of Bootstrap svg
@@ -113,7 +112,6 @@ $form-valid-color-dark:                           $ouds-color-content-default-da
 $form-valid-border-color-dark:                    $ouds-color-border-emphasized-dark !default; // OUDS mod: instead of `$green-300`
 $form-invalid-color-dark:                         $ouds-color-action-negative-enabled-dark !default; // OUDS mod: instead of `$red-300`
 $form-invalid-border-color-dark:                  $ouds-color-action-negative-enabled-dark !default; // OUDS mod: instead of `$red-300`
-$form-switch-unchecked-invalid-border-color-dark: $form-invalid-border-color-dark !default; // OUDS mod
 // scss-docs-end form-validation-colors-dark
 
 //

scss/_variables.scss

@@ -1104,43 +1104,21 @@ $form-star-rating-sm-unchecked-icon:    escape-svg(url("data:image/svg+xml,<svg
 // End mod
 // scss-docs-end form-check-variables
 
-// fusv-disable
 // scss-docs-start form-switch-variables
 // OUDS mod: no $form-switch-color
-$form-switch-width:               $spacer * 3 !default; // OUDS mod
-$form-switch-padding-start:       $form-switch-width + .625rem !default; // OUDS mod
-$form-switch-bg-image:            var(--#{$prefix}close-icon) !default;  // OUDS mod
-$form-switch-bg-position:         right .5rem top 50% !default;  // OUDS mod
-$form-switch-bg-size:             .75rem !default;  // OUDS mod
-$form-switch-bg-square-size:      add(1rem, $spacer * .5) !default;  // OUDS mod
-$form-switch-border-radius:       null !default; // OUDS mod
-$form-switch-transition:          background-position .15s ease-in-out, $transition-focus !default; // OUDS mod
-
-$form-switch-square-bg:             $black !default; // OUDS mod
-$form-switch-bg:                    $white !default; // OUDS mod
-$form-switch-border-color:          $white !default; // OUDS mod
-$form-switch-filter:                var(--#{$prefix}form-check-filter) !default; // OUDS mod
-$form-switch-focus-visible-inner:   $black !default; // OUDS mod
-$form-switch-focus-visible-outer:   $white !default; // OUDS mod
+// OUDS mod: no $form-switch-width
+// OUDS mod: no $form-switch-padding-start
+// OUDS mod: no $form-switch-bg-image
+$form-switch-border-radius:       $ouds-switch-border-radius !default; // OUDS mod: instead of `$form-switch-width`
+$form-switch-transition:          width .15s cubic-bezier(.2, 0, 0, 1), height .15s cubic-bezier(.2, 0, 0, 1), left .15s cubic-bezier(.2, 0, 0, 1) !default; // OUDS mod: instead of `background-position .15s ease-in-out`
 
 // OUDS mod: no $form-switch-focus-color
 // OUDS mod: no $form-switch-focus-bg-image
 
 // OUDS mod: no $form-switch-checked-color
-$form-switch-checked-bg-image:    $form-check-input-checked-bg-image !default; // OUDS mod
-$form-switch-checked-bg-size:     add(map-get($spacers, 2), map-get($spacers, 1)) !default; // OUDS mod
-// stylelint-disable-next-line function-disallowed-list
-$form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // OUDS mod
-
-$form-switch-checked-square-bg:                 var(--#{$prefix}body-bg) !default; // OUDS mod
-$form-switch-checked-bg:                        $ouds-color-orange-500 !default; // OUDS mod
-$form-switch-checked-border-color:              $ouds-color-orange-500 !default; // OUDS mod
-$form-switch-checked-filter:                    none !default; // OUDS mod
-$form-switch-checked-focus-inner:               var(--#{$prefix}color-border-focus-inset) !default; // OUDS mod
-$form-switch-checked-focus-outer:               var(--#{$prefix}color-border-focus) !default; // OUDS mod
-$form-switch-unchecked-invalid-border-color:    #31c3eb !default; // OUDS mod: will be rendered red when mixed with the filter
+$form-switch-checked-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#000' d='m17.413 8.962-6.207 7.2a.998.998 0 0 1-.758.338.997.997 0 0 1-.757-.338l-3.103-3.6A.857.857 0 0 1 6.375 12c0-.248.109-.473.284-.636l.388-.36c.175-.163.418-.264.686-.264.24 0 .461.082.63.217l1.891 1.943 5.738-5.157c.173-.15.407-.243.663-.243.536 0 .97.403.97.9 0 .213-.08.408-.212.562Z'/></svg>") !default; // OUDS mod: instead of Bootstrap icon
+// OUDS mod: no $form-switch-checked-bg-position
 // scss-docs-end form-switch-variables
-// fusv-enable
 
 // scss-docs-start input-group-variables
 $input-group-addon-padding-y:           $input-padding-y !default;

scss/forms/_control-item.scss

@@ -280,6 +280,107 @@
 }
 
 
+//
+// Control item switch indicator
+//
+
+@keyframes switch-check-in {
+  0%,
+  99% {
+    background-color: transparent;
+  }
+  100% {
+    background-color: $ouds-switch-color-check;
+  }
+}
+
+.control-item-indicator[role="switch"] {
+  min-width: $ouds-switch-size-min-width;
+  min-height: $ouds-switch-size-min-height;
+  background-color: $ouds-switch-color-track-unselected;
+  border: 0;
+  @include border-radius($ouds-switch-border-radius, $ouds-switch-border-radius);
+
+  &[type="checkbox"]::before {
+    position: absolute;
+    top: 50%;
+    left: $ouds-switch-space-padding-inline-unselected;
+    display: block;
+    width: $ouds-switch-size-width-cursor-unselected;
+    height: $ouds-switch-size-height-cursor-unselected;
+    content: "";
+    background-color: $ouds-switch-color-cursor;
+    box-shadow: $ouds-elevation-raised;
+    mask: none;
+    transform: translateY(-50%);
+    @include border-radius($form-switch-border-radius, $form-switch-border-radius);
+    @include transition($form-switch-transition);
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active {
+    background-color: $ouds-switch-color-track-unselected-interaction;
+  }
+
+  &:active::before {
+    width: $ouds-switch-size-width-cursor-unselected-pressed;
+  }
+
+  &:disabled {
+    background-color: $ouds-color-action-disabled;
+  }
+
+  &:checked {
+    background-color: $ouds-switch-color-track-selected;
+
+    &::before {
+      left: calc($ouds-switch-size-min-width - $ouds-switch-space-padding-inline-selected - $ouds-switch-size-width-cursor-selected); // stylelint-disable-line function-disallowed-list
+      width: $ouds-switch-size-width-cursor-selected;
+      height: $ouds-switch-size-height-cursor-selected;
+    }
+
+    &:not(:active)::after {
+      position: absolute;
+      top: 50%;
+      right: $ouds-switch-space-padding-inline-selected;
+      display: block;
+      width: $ouds-switch-size-width-cursor-selected;
+      height: $ouds-switch-size-height-cursor-selected;
+      content: "";
+      background-color: $ouds-switch-color-check;
+      opacity: $ouds-switch-opacity-check;
+      mask: escape-svg($form-switch-checked-bg-image);
+      transform: translateY(-50%);
+      animation: .15s linear 0s switch-check-in;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+
+    &:hover,
+    &:focus-visible,
+    &:active {
+      background-color: $ouds-switch-color-track-selected-interaction;
+    }
+
+    &:active::before {
+      left: calc($ouds-switch-size-min-width - $ouds-switch-space-padding-inline-selected - $ouds-switch-size-width-cursor-selected-pressed); // stylelint-disable-line function-disallowed-list
+      width: $ouds-switch-size-width-cursor-selected-pressed;
+    }
+
+    &:disabled {
+      background-color: $ouds-color-action-disabled;
+
+      &::after {
+        background-color: $ouds-color-action-disabled;
+      }
+    }
+  }
+}
+
+
 //
 // Control item standalone
 //
@@ -405,6 +506,19 @@
 }
 
 
+//
+// Switch
+//
+
+.switch-item {
+  @extend %control-item;
+}
+
+.switch-standalone {
+  @extend %control-item-standalone;
+}
+
+
 //
 // Bootstrap compatibility
 //

scss/ouds-web-grid.scss

@@ -9,6 +9,7 @@ $include-column-box-sizing: true !default;
 @import "tokens/semantic";
 @import "tokens/semantic-colors-custom-props";
 @import "tokens/composite";
+@import "tokens/component-colors-custom-props";
 @import "tokens/component";
 @import "variables";
 @import "variables-dark";

scss/ouds-web-reboot.scss

@@ -7,6 +7,7 @@
 @import "tokens/semantic";
 @import "tokens/semantic-colors-custom-props";
 @import "tokens/composite";
+@import "tokens/component-colors-custom-props";
 @import "tokens/component";
 @import "variables";
 @import "variables-dark";

scss/ouds-web-utilities.scss

@@ -8,6 +8,7 @@
 @import "tokens/semantic";
 @import "tokens/semantic-colors-custom-props";
 @import "tokens/composite";
+@import "tokens/component-colors-custom-props";
 @import "tokens/component";
 @import "variables";
 @import "variables-dark";

scss/ouds-web.scss

@@ -9,6 +9,7 @@
 @import "tokens/semantic";
 @import "tokens/semantic-colors-custom-props";
 @import "tokens/composite";
+@import "tokens/component-colors-custom-props";
 @import "tokens/component";
 @import "variables";
 @import "variables-dark";

site/assets/js/tac.js

@@ -86,9 +86,9 @@
         'tarteaucitron.userInterface.respond(document.getElementById(\'googletagmanagerAllowed\'),document.getElementById(\'googletagmanagerAllowed\').checked);'
       const toggle = document
         .createRange()
-        .createContextualFragment( // TODO replace with a form-switch
-          `<label class="checkbox-standalone ">
-            <input class="control-item-indicator" type="checkbox" value="" id="googletagmanagerAllowed" aria-labelledby="googletagmanagerLine" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}>
+        .createContextualFragment(
+          `<label class="switch-standalone">
+            <input class="control-item-indicator" type="checkbox" role="switch" value="" id="googletagmanagerAllowed" aria-labelledby="googletagmanagerLine" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}>
             <span class="visually-hidden">Google Tag Manager</span>
             <input id="googletagmanagerDenied" class="d-none">
           </label>`

site/assets/scss/_tarteaucitron.scss

@@ -162,18 +162,18 @@
 }
 
 @include tac("Allow", true) {
-  @include button-icon($form-switch-checked-bg-image, 1em);
+  @include button-icon(escape-svg($form-check-input-checked-bg-image), 1.625em);
 
   &::before {
-    margin-right: $spacer / 2;
+    margin-right: $spacer * .625;
   }
 }
 
 @include tac("Deny", true) {
-  @include button-icon($form-switch-bg-image, 1em);
+  @include button-icon(escape-svg($cross-icon-stroke), 1em);
 
   &::before {
-    margin-right: $spacer / 2;
+    margin-right: $spacer * .875;
   }
 }
 

site/assets/scss/docs.scss

@@ -33,6 +33,7 @@ $enable-rounded: true;
 @import "../../../scss/tokens/semantic";
 @import "../../../scss/tokens/semantic-colors-custom-props";
 @import "../../../scss/tokens/composite";
+@import "../../../scss/tokens/component-colors-custom-props";
 @import "../../../scss/tokens/component";
 @import "../../../scss/variables";
 @import "../../../scss/maps";

site/assets/scss/search.scss

@@ -11,6 +11,7 @@
 @import "../../../scss/tokens/semantic";
 @import "../../../scss/tokens/semantic-colors-custom-props";
 @import "../../../scss/tokens/composite";
+@import "../../../scss/tokens/component-colors-custom-props";
 @import "../../../scss/tokens/component";
 @import "../../../scss/variables";
 @import "../../../scss/mixins";

site/content/docs/0.3/customize/color-palette.md

@@ -205,6 +205,7 @@ Here's an example that generates text color utilities (e.g., `.text-purple-500`)
 @import "@ouds/web/scss/tokens/semantic";
 @import "@ouds/web/scss/tokens/semantic-colors-custom-props";
 @import "@ouds/web/scss/tokens/composite";
+@import "@ouds/web/scss/tokens/component-colors-custom-props";
 @import "@ouds/web/scss/tokens/component";
 @import "@ouds/web/scss/variables";
 @import "@ouds/web/scss/variables-dark";

site/content/docs/0.3/forms/checkbox.md

@@ -61,7 +61,7 @@ You can find here the [OUDS Checkbox design guidelines](https://unified-design-s
 
 ## Approach
 
-Browser default checkboxes are replaced with the help of `.checkbox-item`. Checkboxes are for selecting one or several options in a list.
+Browser default checkboxes are replaced with the help of `.control-item-indicator[type="checkbox"]`. Checkboxes are for selecting one or several options in a list.
 
 Checkboxes are implemented using `.control-item-*` classes, see below.
 

site/content/docs/0.3/forms/radio-button.md

@@ -60,7 +60,7 @@ You can find here the [OUDS Radio button design guidelines](https://unified-desi
 
 ## Approach
 
-Browser default radio buttons are replaced with the help of `.radio-button-item`. Radio buttons allows user to select a single option from a set of mutually exclusive choices.
+Browser default radio buttons are replaced with the help of `.control-item-indicator[type="radio"]`. Radio buttons allows user to select a single option from a set of mutually exclusive choices.
 
 Radio buttons are implemented using `.control-item-*` classes, see below.
 
@@ -368,4 +368,4 @@ Be careful using this, you must implement the background on hover, focus and act
   <input class="form-check-input" type="radio" id="radioNoLabel" value="" aria-label="...">
 </div>
 {{< /example >}}
-{{< /bootstrap-compatibility >}}
+{{< /bootstrap-compatibility >}}