Orange-OpenSource · julien-deramond · Jan 12, 2023 · Jan 3, 2023 · Jan 9, 2023 · Jan 9, 2023
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -2,35 +2,35 @@
   "files": [
     {
       "path": "./dist/css/boosted-grid.css",
-      "maxSize": "11.75 kB"
+      "maxSize": "12.75 kB"
     },
     {
       "path": "./dist/css/boosted-grid.min.css",
-      "maxSize": "10.75 kB"
+      "maxSize": "11.75 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.css",
-      "maxSize": "3.75 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/boosted-reboot.min.css",
-      "maxSize": "3.75 kB"
+      "maxSize": "4.25 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.css",
-      "maxSize": "10.5 kB"
+      "maxSize": "11.5 kB"
     },
     {
       "path": "./dist/css/boosted-utilities.min.css",
-      "maxSize": "9.75 kB"
+      "maxSize": "10.5 kB"
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "39.75 kB"
+      "maxSize": "41.0 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "36.75 kB"
+      "maxSize": "38.0 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -130,6 +130,8 @@
 
 // Boosted mod: no Flush accordion items
 
+// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
+
 //
 // Boosted mod:
 // - Sizes

diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -14,6 +14,7 @@
   --#{$prefix}alert-border-color: transparent;
   --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: #{$alert-border-radius};
+  --#{$prefix}alert-link-color: inherit;
   --#{$prefix}alert-logo-size: #{$alert-logo-size}; // Boosted mod
   --#{$prefix}alert-icon-size: #{$alert-icon-size}; // Boosted mod
   --#{$prefix}alert-icon-margin-y: #{$alert-icon-margin-y}; // Boosted mod
@@ -50,6 +51,7 @@
 // Provide class for links that match alerts
 .alert-link {
   font-weight: var(--#{$prefix}alert-link-font-weight); // Boosted mod
+  color: var(--#{$prefix}alert-link-color);
 }
 
 
@@ -75,13 +77,11 @@
 // Generate contextual modifier classes for colorizing the alert.
 
 @each $state, $value in $alert-colors {
-  $alert-background: transparent; // Boosted mod
-  $alert-border: $alert-border-width solid $value; // Boosted mod
-  // Boosted mod: no $alert-color change
-
-  // Boosted mod: no contrast-ratio test
   .alert-#{$state} {
-    @include alert-variant($alert-background, $alert-border, $alert-color, map-get($alert-icons, $state)); // Boosted mod
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}alert-icon-bg-image: #{map-get($alert-icons, $state)}; // Boosted mod
   }
 }
 // scss-docs-end alert-modifiers
@@ -118,6 +118,7 @@
     order: -1;
     height: var(--#{$prefix}alert-logo-size);
     content: "";
+    background-image: var(--#{$prefix}alert-icon-bg-image);
     background-repeat: no-repeat;
 
     /* rtl:raw:

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -319,7 +319,7 @@
   background-color: color-contrast($carousel-caption-color); // Boosted mod: ensure contrast
 }
 
-// Boosted mod: no dark carousel
+// Boosted mod: no dark carousel nor carousel in dark mode since Boosted doesn't have any dark mode for now
 
 // Boosted mod: play/pause button
 .carousel-control-play-pause {

diff --git a/scss/_close.scss b/scss/_close.scss
@@ -60,7 +60,9 @@
   }
 }
 
-// Boosted mod: changing color instead of using filter
+// Boosted mod:
+// - no dark mode management so we keep our .btn-close-white
+// - changing color instead of using filter
 .btn-close-white {
   // scss-docs-start btn-close-white-css-vars
   --#{$prefix}btn-close-color: #{$btn-close-white-color}; // Boosted mod

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -193,6 +193,7 @@
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
+  @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
 
   // Boosted mod: no focus
   &:hover {

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -13,7 +13,7 @@
   --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
   --#{$prefix}list-group-action-color: #{$list-group-action-color};
   --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
-  // Boosted mod: no --#{$prefix}list-group-action-hover-bg
+  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
   --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
   --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
   --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
@@ -59,7 +59,7 @@
     z-index: 1; // Place hover/focus items above their siblings for proper border styling
     color: var(--#{$prefix}list-group-action-hover-color);
     text-decoration: none;
-    // Boosted mod: no background-color
+    background-color: var(--#{$prefix}list-group-action-hover-bg);
   }
 
   &:active {
@@ -197,8 +197,21 @@
 //
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
-@each $color, $value in $background-colors {
-  @include list-group-item-variant($color, $value, color-contrast($value));
+@each $state, $value in $background-colors { // Boosted mod: instead of `@each $state in map-keys($theme-colors)`
+  .list-group-item-#{$state} {
+    --#{$prefix}list-group-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}#{state}-text)`
+    --#{$prefix}list-group-bg: #{$value}; // Boosted mod: instead of `var(--#{$prefix}#{$state}-bg-subtle)`
+    // Boosted mod: no `--#{$prefix}list-group-border-color`
+
+    &.list-group-item-action {
+      &:hover { // Boosted mod: no `&:focus`
+        --#{$prefix}list-group-action-hover-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`;
+        --#{$prefix}list-group-action-hover-bg: #{if(color-contrast($value) == $white, shade-color($value, 10%), tint-color($value, 10%))}; // Boosted mod: instead of `var(--#{$prefix}#{state}-border-subtle)`;
+      }
+
+      // Boosted mod: no `&:active`
+    }
+  }
 }
 // scss-docs-end list-group-modifiers
 

diff --git a/scss/_maps.scss b/scss/_maps.scss
@@ -6,6 +6,39 @@
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb
 
+$theme-colors-text: (
+  "primary": $primary-text,
+  "secondary": $secondary-text,
+  "success": $success-text,
+  "info": $info-text,
+  "warning": $warning-text,
+  "danger": $danger-text,
+  "light": $light-text,
+  "dark": $dark-text,
+) !default;
+
+$theme-colors-bg-subtle: (
+  "primary": $primary-bg-subtle,
+  "secondary": $secondary-bg-subtle,
+  "success": $success-bg-subtle,
+  "info": $info-bg-subtle,
+  "warning": $warning-bg-subtle,
+  "danger": $danger-bg-subtle,
+  "light": $light-bg-subtle,
+  "dark": $dark-bg-subtle,
+) !default;
+
+$theme-colors-border-subtle: (
+  "primary": $primary-border-subtle,
+  "secondary": $secondary-border-subtle,
+  "success": $success-border-subtle,
+  "info": $info-border-subtle,
+  "warning": $warning-border-subtle,
+  "danger": $danger-border-subtle,
+  "light": $light-border-subtle,
+  "dark": $dark-border-subtle,
+) !default;
+
 // Boosted mod
 $background-colors: map-merge(
   $theme-colors,
@@ -36,6 +69,17 @@ $utilities-text: (
   "body": to-rgb($body-color),
 ) !default;
 $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+$utilities-text-emphasis-colors: (
+  "primary-emphasis": var(--#{$prefix}primary-text),
+  "secondary-emphasis": var(--#{$prefix}secondary-text),
+  "success-emphasis": var(--#{$prefix}success-text),
+  "info-emphasis": var(--#{$prefix}info-text),
+  "warning-emphasis": var(--#{$prefix}warning-text),
+  "danger-emphasis": var(--#{$prefix}danger-text),
+  "light-emphasis": var(--#{$prefix}light-text),
+  "dark-emphasis": var(--#{$prefix}dark-text)
+) !default;
 // scss-docs-end utilities-text-colors
 
 // scss-docs-start utilities-bg-colors
@@ -48,6 +92,18 @@ $utilities-bg: map-merge(
   )
 ) !default;
 $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+$utilities-bg-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+  "success-subtle": var(--#{$prefix}success-bg-subtle),
+  "info-subtle": var(--#{$prefix}info-bg-subtle),
+  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+  "light-subtle": var(--#{$prefix}light-bg-subtle),
+  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+) !default;
+// $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors
 
 // scss-docs-start utilities-border-colors
@@ -60,6 +116,17 @@ $utilities-border: map-merge(
   )
 ) !default;
 $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border", "$value") !default; // Boosted mod
+
+$utilities-border-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-border-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+  "success-subtle": var(--#{$prefix}success-border-subtle),
+  "info-subtle": var(--#{$prefix}info-border-subtle),
+  "warning-subtle": var(--#{$prefix}warning-border-subtle),
+  "danger-subtle": var(--#{$prefix}danger-border-subtle),
+  "light-subtle": var(--#{$prefix}light-border-subtle),
+  "dark-subtle": var(--#{$prefix}dark-border-subtle)
+) !default;
 // scss-docs-end utilities-border-colors
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -10,6 +10,7 @@
 
 // Helpers
 @import "mixins/breakpoints";
+@import "mixins/color-mode";
 @import "mixins/color-scheme";
 @import "mixins/image";
 @import "mixins/resize";
@@ -22,13 +23,11 @@
 @import "mixins/utilities";
 
 // Components
-@import "mixins/alert";
 @import "mixins/backdrop";
 @import "mixins/buttons";
 @import "mixins/caret";
 @import "mixins/pagination";
 @import "mixins/lists";
-@import "mixins/list-group";
 @import "mixins/forms";
 @import "mixins/table-variants";
 @import "mixins/star-rating"; // Boosted mod

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -517,3 +517,5 @@
   --#{$prefix}navbar-toggler-icon-filter: #{$invert-filter}; // Boosted mod
   // scss-docs-end navbar-dark-css-vars
 }
+
+// Boosted mod: no `@if enable-dark-mode` since Boosted doesn't have any dark mode for now
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -135,7 +135,7 @@ hr {
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
-  color: $headings-color;
+  color: var(--#{$prefix}heading-color, inherit);
 
   /* rtl:remove */
   letter-spacing: $letter-spacing-base; // Boosted mod
@@ -336,11 +336,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: var(--#{$prefix}link-color);
+  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
   text-decoration: $link-decoration;
 
   &:hover {
-    color: var(--#{$prefix}link-hover-color);
+    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
     text-decoration: $link-hover-decoration;
   }
 }