[OUDS] Add "Colors" tokens, utilities and documentation

.bundlewatch.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "62.75 kB"
+      "maxSize": "63.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "59.5 kB"
+      "maxSize": "60.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
@@ -18,27 +18,27 @@
     },
     {
       "path": "./dist/css/ouds-web-reboot.css",
-      "maxSize": "5.75 kB"
+      "maxSize": "7.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-reboot.min.css",
-      "maxSize": "5.5 kB"
+      "maxSize": "6.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.css",
-      "maxSize": "22.25 kB"
+      "maxSize": "23.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.min.css",
-      "maxSize": "21.0 kB"
+      "maxSize": "22.0 kB"
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "56.25 kB"
+      "maxSize": "57.0 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "53.0 kB"
+      "maxSize": "53.75 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",

build/.pa11yci.json

@@ -15,7 +15,7 @@
       "axe"
     ],
     "useIncognitoBrowserContext": false,
-    "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, fieldset.star-rating[disabled]",
+    "hideElements": "iframe, #text-decoration + p + div a.text-decoration-none, .accordion-collapse, #offcanvas, #offcanvasDark, #offcanvasResponsive, #bdSidebar, #sidebarMenu, .overflow-y-scroll, .overflow-y-auto, .overflow-x-scroll, .overflow-x-auto, .table-responsive, fieldset.star-rating[disabled]",
     "ignore": [
       "color-contrast"
     ]

scss/_accordion.scss

@@ -82,7 +82,7 @@
     // OUDS mod
     &[data-focus-visible-added] {
       outline-offset: add($focus-visible-outer-offset, var(--#{$prefix}accordion-border-width));
-      box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color);
+      box-shadow: 0 0 0 add(var(--#{$prefix}accordion-border-width), $focus-visible-inner-width) var(--#{$prefix}color-border-focus-inset);
     }
     // End mod
   }

scss/_button-group.scss

@@ -142,11 +142,11 @@
   .btn.active + &,
   &:active + * + .btn,
   &.active + * + .btn {
-    border-color: $supporting-orange;
+    border-color: $ouds-color-orange-500;
   }
 
   .btn-group.show > &:not(:focus):not(:active)::before {
-    color: $supporting-orange;
+    color: $ouds-color-orange-500;
     background-color: currentcolor;
   }
   // End mod

scss/_buttons.scss

@@ -105,7 +105,7 @@
 
 // scss-docs-start btn-variant-loops
 .btn-primary {
-  @include button-variant($supporting-orange, $supporting-orange, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color));
+  @include button-variant($ouds-color-orange-500, $ouds-color-orange-500, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}border-color), $active-color: var(--#{$prefix}body-color));
 }
 
 .btn-success {
@@ -151,7 +151,7 @@
 
 // OUDS mod: OUDS Web-specific no outline button
 .btn-no-outline {
-  @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}disabled-color));
+  @include button-variant(transparent, transparent, var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}primary), transparent, transparent, var(--#{$prefix}color-content-disabled));
 
   .btn-check:checked + &.btn {
     border-color: transparent;
@@ -166,7 +166,7 @@
 
 // OUDS mod: OUDS Web-specific toggle button
 .btn-toggle {
-  @include button-variant(transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}primary), $supporting-orange, $supporting-orange, $black, transparent, var(--#{$prefix}border-color-subtle), var(--#{$prefix}disabled-color));
+  @include button-variant(transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}primary), $ouds-color-orange-500, $ouds-color-orange-500, $black, transparent, var(--#{$prefix}color-border-emphasized), var(--#{$prefix}color-content-disabled));
 
   .btn-check:checked + & {
     color: var(--#{$prefix}highlight-color);
@@ -201,7 +201,7 @@
 
 // OUDS mod: OUDS Web-specific dropdown button
 .btn-dropdown {
-  @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}border-color-subtle), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color));
+  @include button-variant(var(--#{$prefix}body-bg), var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}color-border-emphasized), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}body-color), var(--#{$prefix}body-color), var(--#{$prefix}body-bg), var(--#{$prefix}color-content-disabled), var(--#{$prefix}color-content-disabled));
 }
 // End mod
 
@@ -270,7 +270,7 @@
   --#{$prefix}btn-active-color: var(--#{$prefix}highlight-color);
   --#{$prefix}btn-active-bg: var(--#{$prefix}highlight-bg);
   --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color);
-  --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}color-content-disabled);
   --#{$prefix}btn-disabled-bg: transparent;
   @include border-radius(50%, 50%);
   @include button-icon(var(--#{$prefix}network-logo));

scss/_config.scss

@@ -0,0 +1,3 @@
+// Configuration file for OUDS Web
+
+$prefix: bs- !default;

scss/_dropdown.scss

@@ -211,7 +211,7 @@
   &:focus {
     &[data-focus-visible-added] {
       outline-offset: -$focus-visible-outer-width;
-      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
+      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
     }
   }
   // End mod

scss/_list-group.scss

@@ -141,11 +141,11 @@
   &:focus {
     &[data-focus-visible-added] {
       outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width));
-      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color);
+      box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus-inset);
 
       &.active {
-        outline-color: var(--#{$prefix}focus-visible-inner-color);
-        box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-outer-color);
+        outline-color: var(--#{$prefix}color-border-focus-inset);
+        box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}color-border-focus);
       }
     }
   }

scss/_root.scss

@@ -258,14 +258,11 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
-  --#{$prefix}disabled-color: #{$disabled-color}; // OUDS mod
-  --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg}; // OUDS mod
 
   // scss-docs-start root-border-var-ouds
   --#{$prefix}border-width: #{$border-width};
   --#{$prefix}border-style: #{$border-style};
   --#{$prefix}border-color: #{$border-color};
-  --#{$prefix}border-color-subtle: #{$border-color-subtle}; // OUDS mod
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
   // scss-docs-end root-border-var-ouds
 
@@ -401,9 +398,6 @@
     --#{$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
-
   // Focus styles
   // scss-docs-start root-focus-variables
   --#{$prefix}focus-ring-width: #{$focus-ring-width};
@@ -498,16 +492,10 @@
     --#{$prefix}code-color: #{$code-color-dark};
     --#{$prefix}highlight-color: #{$mark-color-dark};
     --#{$prefix}highlight-bg: #{$mark-bg-dark};
-    --#{$prefix}disabled-color: #{$disabled-color-dark}; // OUDS mod
-    --#{$prefix}tertiary-active-bg: #{$tertiary-active-bg-dark}; // OUDS mod
 
     --#{$prefix}border-color: #{$border-color-dark};
-    --#{$prefix}border-color-subtle: #{$border-color-subtle-dark}; // OUDS mod
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
 
-    --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-dark}; // OUDS mod
-    --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-dark}; // OUDS mod
-
     --#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // OUDS mod
 
     --#{$prefix}form-valid-color: #{$form-valid-color-dark};

scss/_stepped-process.scss

@@ -99,7 +99,7 @@
   color: var(--#{$prefix}stepped-process-link-color);
   text-decoration: if($link-decoration == none, null, none);
   white-space: nowrap;
-  outline-color: var(--#{$prefix}focus-visible-inner-color);
+  outline-color: var(--#{$prefix}color-border-focus-inset);
   box-shadow: none;
 
   &::before {
@@ -121,7 +121,7 @@
 
   .active ~ .stepped-process-item & {
     color: var(--#{$prefix}stepped-process-link-next-color);
-    outline-color: var(--#{$prefix}focus-visible-outer-color);
+    outline-color: var(--#{$prefix}color-border-focus);
   }
 }
 

scss/_utilities.scss

@@ -1061,12 +1061,6 @@ $utilities: map-merge(
           "transparent": transparent,
           "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
           "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
-          "supporting-green": $supporting-green, // OUDS mod
-          "supporting-blue": $supporting-blue, // OUDS mod
-          "supporting-yellow": $supporting-yellow, // OUDS mod
-          "supporting-pink": $supporting-pink, // OUDS mod
-          "supporting-purple": $supporting-purple, // OUDS mod
-          "supporting-orange": $supporting-orange, // OUDS mod
         )
       )
     ),