[OUDS] feat: Add "Elevation" tokens, utilities and documentation - new version

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "45.0 kB"
+      "maxSize": "45.25 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "41.75 kB"
+      "maxSize": "42.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",

scss/_maps.scss

@@ -1,39 +1,3 @@
-// OUDS mod
-// scss-docs-start ouds-maps-borders
-$ouds-border-radiuses: (
-  null:       $ouds-border-radius-default,
-  "none":     $ouds-border-radius-none,
-  "short":    $ouds-border-radius-short,
-  "medium":   $ouds-border-radius-medium,
-  "tall":     $ouds-border-radius-tall,
-  "pill":     $ouds-border-radius-pill,
-  "circle":   50%
-) !default;
-
-$ouds-border-styles: (
-  "drag":     $ouds-border-style-drag
-) !default;
-
-$ouds-border-widths: (
-  "thin":     $ouds-border-width-thin,
-  "medium":   $ouds-border-width-medium,
-  "thick":    $ouds-border-width-thick,
-  "thicker":  $ouds-border-width-thicker,
-) !default;
-// scss-docs-end ouds-maps-borders
-
-// scss-docs-start ouds-maps-opacities
-$ouds-opacities: (
-  "transparent": $ouds-opacity-transparent,
-  "weaker":      $ouds-opacity-weaker,
-  "weak":        $ouds-opacity-weak,
-  "medium":      $ouds-opacity-medium,
-  "strong":      $ouds-opacity-strong,
-  "opaque":      $ouds-opacity-opaque
-) !default;
-// scss-docs-end ouds-maps-opacities
-// End mod
-
 // Re-assigned maps
 //
 // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.

scss/_ouds-maps.scss

@@ -0,0 +1,49 @@
+// OUDS mod
+// scss-docs-start ouds-maps-borders
+$ouds-border-radiuses: (
+  null:       $ouds-border-radius-default,
+  "none":     $ouds-border-radius-none,
+  "short":    $ouds-border-radius-short,
+  "medium":   $ouds-border-radius-medium,
+  "tall":     $ouds-border-radius-tall,
+  "pill":     $ouds-border-radius-pill,
+  "circle":   50%
+) !default;
+
+$ouds-border-styles: (
+  "drag":     $ouds-border-style-drag
+) !default;
+
+$ouds-border-widths: (
+  "thin":     $ouds-border-width-thin,
+  "medium":   $ouds-border-width-medium,
+  "thick":    $ouds-border-width-thick,
+  "thicker":  $ouds-border-width-thicker,
+) !default;
+// scss-docs-end ouds-maps-borders
+
+// scss-docs-start ouds-maps-elevations
+$ouds-elevations: (
+  "none":                       $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none $ouds-elevation-color-none,
+  "raised":                     $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised $ouds-elevation-color-raised,
+  "drag":                       $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag $ouds-elevation-color-drag,
+  "overlay-default":            $ouds-elevation-x-overlay-default $ouds-elevation-y-overlay-default $ouds-elevation-blur-overlay-default $ouds-elevation-spread-overlay-default $ouds-elevation-color-overlay-default,
+  "overlay-emphasized":         $ouds-elevation-x-overlay-emphasized $ouds-elevation-y-overlay-emphasized $ouds-elevation-blur-overlay-emphasized $ouds-elevation-spread-overlay-emphasized $ouds-elevation-color-overlay-emphasized,
+  "sticky-default":             $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default $ouds-elevation-color-sticky-default,
+  "sticky-emphasized":          $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized,
+  "sticky-navigation-scrolled": $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled,
+  "focus":                      $ouds-elevation-x-focus $ouds-elevation-y-focus $ouds-elevation-blur-focus $ouds-elevation-spread-focus $ouds-elevation-color-focus
+) !default;
+// scss-docs-end ouds-maps-elevations
+
+// scss-docs-start ouds-maps-opacities
+$ouds-opacities: (
+  "transparent": $ouds-opacity-transparent,
+  "weaker":      $ouds-opacity-weaker,
+  "weak":        $ouds-opacity-weak,
+  "medium":      $ouds-opacity-medium,
+  "strong":      $ouds-opacity-strong,
+  "opaque":      $ouds-opacity-opaque
+) !default;
+// scss-docs-end ouds-maps-opacities
+// End mod

scss/_root.scss

@@ -134,10 +134,12 @@
   }
   // scss-docs-end root-border-var
 
-  --#{$prefix}box-shadow: #{$box-shadow};
-  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
-  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
-  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+  @if $enable-bootstrap-compatibility {
+    --#{$prefix}box-shadow: #{$box-shadow};
+    --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+    --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+    --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+  }
 
   --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color}; // OUDS mod
   --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color}; // OUDS mod

scss/_utilities.scss

@@ -87,10 +87,20 @@ $utilities: map-merge(
         null: var(--#{$prefix}box-shadow),
         sm: var(--#{$prefix}box-shadow-sm),
         lg: var(--#{$prefix}box-shadow-lg),
-        none: none,
-      )
+        // OUDS mod: `none` value handled by `shadow-ouds`
+      ),
+      bootstrap-compatibility: true
     ),
     // scss-docs-end utils-shadow
+    // OUDS mod
+    // scss-docs-start utils-shadow-ouds
+    "shadow-ouds": (
+      property: box-shadow,
+      class: shadow,
+      values: $ouds-elevations
+    ),
+    // scss-docs-end utils-shadow-ouds
+    // End mod
     // scss-docs-start utils-focus-ring
     "focus-ring": (
       css-var: true,

scss/_variables.scss

@@ -649,9 +649,9 @@ $focus-visible-outer-color:           $black !default; // OUDS mod
 // scss-docs-end focus-visible-variables
 
 // scss-docs-start box-shadow-variables
-$box-shadow:        null !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
-$box-shadow-sm:     null !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
-$box-shadow-lg:     null !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)`
+$box-shadow:        map-get($ouds-elevations, "overlay-default") !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
+$box-shadow-sm:     map-get($ouds-elevations, "overlay-default") !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
+$box-shadow-lg:     map-get($ouds-elevations, "overlay-emphasized") !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)`
 $box-shadow-inset:  null !default; // OUDS mod: instead of `inset 0 1px 2px rgba($black, .075)`
 // scss-docs-end box-shadow-variables
 

scss/ouds-web-grid.scss

@@ -7,6 +7,7 @@ $include-column-box-sizing: true !default;
 @import "tokens/raw";
 @import "tokens/semantic";
 @import "tokens/component";
+@import "ouds-maps";
 @import "variables";
 @import "variables-dark";
 @import "maps";

scss/ouds-web-reboot.scss

@@ -5,6 +5,7 @@
 @import "tokens/raw";
 @import "tokens/semantic";
 @import "tokens/component";
+@import "ouds-maps";
 @import "variables";
 @import "variables-dark";
 @import "maps";

scss/ouds-web-utilities.scss

@@ -6,6 +6,7 @@
 @import "tokens/raw";
 @import "tokens/semantic";
 @import "tokens/component";
+@import "ouds-maps";
 @import "variables";
 @import "variables-dark";
 @import "maps";

scss/ouds-web.scss

@@ -7,6 +7,7 @@
 @import "tokens/raw";
 @import "tokens/semantic";
 @import "tokens/component";
+@import "ouds-maps";
 @import "variables";
 @import "variables-dark";
 @import "maps";

scss/tests/customize/_ouds-web-bootstrap.test.scss

@@ -2,6 +2,7 @@
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
 @import "../../tokens/component";
+@import "../../ouds-maps";
 @import "../../variables";
 @import "../../maps";
 @import "../../mixins";
@@ -232,7 +233,22 @@ $utilities: ();
         property: border-bottom-left-radius border-top-left-radius,
         class: rounded-start,
         values: $ouds-border-radiuses
-      )
+      ),
+      "shadow": (
+        property: box-shadow,
+        class: shadow,
+        values: (
+          null: var(--#{$prefix}box-shadow),
+          sm: var(--#{$prefix}box-shadow-sm),
+          lg: var(--#{$prefix}box-shadow-lg),
+        ),
+        bootstrap-compatibility: true
+      ),
+      "shadow-ouds": (
+        property: box-shadow,
+        class: shadow,
+        values: $ouds-elevations
+      ),
     ) !global;
 
     @include assert() {
@@ -573,6 +589,42 @@ $utilities: ();
           border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list
           border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list, order/properties-order
         }
+
+        .shadow-none {
+          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+        }
+
+        .shadow-raised {
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-drag {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-overlay-default {
+          box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-overlay-emphasized {
+          box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-default {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-emphasized {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-navigation-scrolled {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-focus {
+          box-shadow: 0 0 0 3px rgb(0, 0, 0) !important;
+        }
       }
     }
   }
@@ -800,7 +852,22 @@ $utilities: ();
         property: border-bottom-left-radius border-top-left-radius,
         class: rounded-start,
         values: $ouds-border-radiuses
-      )
+      ),
+      "shadow": (
+        property: box-shadow,
+        class: shadow,
+        values: (
+          null: var(--#{$prefix}box-shadow),
+          sm: var(--#{$prefix}box-shadow-sm),
+          lg: var(--#{$prefix}box-shadow-lg),
+        ),
+        bootstrap-compatibility: true
+      ),
+      "shadow-ouds": (
+        property: box-shadow,
+        class: shadow,
+        values: $ouds-elevations
+      ),
     ) !global;
 
     @include assert() {
@@ -1373,6 +1440,54 @@ $utilities: ();
           border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list
           border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list, order/properties-order
         }
+
+        .shadow {
+          box-shadow: var(--bs-box-shadow) !important;
+        }
+
+        .shadow-sm {
+          box-shadow: var(--bs-box-shadow-sm) !important;
+        }
+
+        .shadow-lg {
+          box-shadow: var(--bs-box-shadow-lg) !important;
+        }
+
+        .shadow-none {
+          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+        }
+
+        .shadow-raised {
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-drag {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-overlay-default {
+          box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-overlay-emphasized {
+          box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-default {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-emphasized {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-navigation-scrolled {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-focus {
+          box-shadow: 0 0 0 3px rgb(0, 0, 0) !important;
+        }
       }
     }
   }

scss/tests/mixins/_auto-import-of-variables-dark.test.scss

@@ -4,6 +4,7 @@
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
 @import "../../tokens/component";
+@import "../../ouds-maps";
 @import "../../variables";
 // Voluntarily not importing _variables-dark.scss
 @import "../../maps";

scss/tests/mixins/_color-modes.test.scss

@@ -4,6 +4,7 @@
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
 @import "../../tokens/component";
+@import "../../ouds-maps";
 @import "../../variables";
 @import "../../variables-dark";
 @import "../../maps";

scss/tests/mixins/_utilities.test.scss

@@ -7,6 +7,7 @@ $enable-important-utilities: false;
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
 @import "../../tokens/component";
+@import "../../ouds-maps";
 @import "../../variables"; // Added to avoid undefined variable error like `$white`
 // End mod
 @import "../../mixins/utilities";

scss/tests/utilities/_api.test.scss

@@ -2,6 +2,7 @@
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
 @import "../../tokens/component";
+@import "../../ouds-maps";
 @import "../../variables";
 @import "../../variables-dark";
 @import "../../maps";