@dynamic-framework/ui-react 1.22.0 → 1.24.0

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.22.0",
+  "version": "1.24.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -156,5 +156,5 @@
       "optional": true
     }
   },
-  "gitHead": "fff9359c0bbac31afab8446c503843b93abaecc1"
+  "gitHead": "9152b65367486ebe3ac167e46cc6b48d0aeed336"
 }

package/src/style/abstracts/_+import.scss

@@ -1,15 +1,15 @@
 @import "funcions";
-@import "bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/functions";
 
 @import "variables/+import"; // Include any default variable overrides here
-@import "bootstrap/scss/variables";
-// @import "bootstrap/scss/variables-dark"; re-enable with dark implementation
+@import "node_modules/bootstrap/scss/variables";
+// @import "node_modules/bootstrap/scss/variables-dark"; re-enable with dark implementation
 
 @import "maps"; // Include any default map overrides here
-@import "bootstrap/scss/maps";
+@import "node_modules/bootstrap/scss/maps";
 
 @import "mixins";
-@import "bootstrap/scss/mixins";
+@import "node_modules/bootstrap/scss/mixins";
 
-@import "bootstrap/scss/utilities";
+@import "node_modules/bootstrap/scss/utilities";
 @import "utilities"; // Extend utilities here

package/src/style/abstracts/_mixins.scss

@@ -5,11 +5,11 @@
   $hover-color: var(--#{$prefix}#{$color-name}-600),
   $focus-color: var(--#{$prefix}#{$color-name}-500),
   $active-color: var(--#{$prefix}#{$color-name}-700),
-  $default-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-500)),
-  $hover-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
-  $focus-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-600)),
-  $active-text-color: color-contrast-var(map-get($theme-colors-palletes, #{$color-name}-700)),
-  $disabled-opacity: .5
+  $default-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-500)),
+  $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
+  $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
+  $disabled-opacity: .65
 ) {
   --#{$prefix}btn-#{$color-name}-color: #{$default-text-color};
   --#{$prefix}btn-#{$color-name}-bg: #{$default-color};
@@ -44,7 +44,7 @@
   $active-text-color: var(--#{$prefix}#{$color-name}-700),
   $active-bg-color: var(--#{$prefix}#{$color-name}-100),
   $active-border-color: var(--#{$prefix}#{$color-name}-700),
-  $disabled-opacity: .5
+  $disabled-opacity: .65
 ) {
   --#{$prefix}btn-outline-#{$color-name}-color: #{$default-color};
   --#{$prefix}btn-outline-#{$color-name}-bg: transparent;
@@ -78,7 +78,7 @@
   $focus-text-color: var(--#{$prefix}#{$color-name}-500),
   $active-text-color: var(--#{$prefix}#{$color-name}-700),
   $active-bg-color: var(--#{$prefix}#{$color-name}-100),
-  $disabled-opacity: .5
+  $disabled-opacity: .65
 ) {
   --#{$prefix}btn-link-#{$color-name}-bg: transparent;
   --#{$prefix}btn-link-#{$color-name}-border-color: transparent;

package/src/style/abstracts/_utilities.scss

@@ -20,7 +20,7 @@ $utilities: map-merge(
       (
         values: map-merge(
           map-get(map-get($utilities, "color"), "values"),
-          map-loop(map-merge-multiple($theme-colors-palletes, $palette-grays), rgba-css-var, "$key", "text"),
+          map-loop(map-merge-multiple($theme-colors-palettes, $palette-grays), rgba-css-var, "$key", "text"),
         )
       )
     ),
@@ -29,7 +29,12 @@ $utilities: map-merge(
       (
         values: map-merge(
           map-get(map-get($utilities, "background-color"), "values"),
-          map-loop(map-merge-multiple($theme-colors-palletes, $palette-grays, $bg-surface-colors), rgba-css-var, "$key", "bg"),
+          map-loop(
+            map-merge-multiple($theme-colors-palettes, $palette-grays, $bg-surface-colors, $bg-soft-colors),
+            rgba-css-var,
+            "$key",
+            "bg"
+          )
         )
       )
     ),
@@ -40,7 +45,7 @@ $utilities: map-merge(
           null: var(--#{$prefix}box-shadow),
           sm: var(--#{$prefix}box-shadow-sm),
           lg: var(--#{$prefix}box-shadow-lg),
-          none: none,
+          none: none
         )
       )
     ),
@@ -50,7 +55,7 @@ $utilities: map-merge(
         values: map-merge(
           map-get(map-get($utilities, "text-opacity"), "values"),
           (
-            40: .4,
+            40: .4
           )
         )
       )

package/src/style/abstracts/variables/_colors.scss

@@ -2,22 +2,24 @@
 
 // scss-docs-start gray-color-variables
 $white: #fff !default;
-$gray-50: #fcfcfd !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
+$gray-25: #fbfbfc !default;
+$gray-50: #f7f8f8 !default;
+$gray-100: #eff0f2 !default;
+$gray-200: #dee1e5 !default;
+$gray-300: #ced3d7 !default;
+$gray-400: #bdc4ca !default;
 $gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
+$gray-600: #8a9197 !default;
+$gray-700: #686d71 !default;
+$gray-800: #45484c !default;
+$gray-900: #232426 !default;
 $black: #000 !default;
 // scss-docs-end gray-color-variables
 
 // fusv-disable
 // scss-docs-start gray-colors-map
 $grays: (
+  "25": $gray-25,
   "50": $gray-50,
   "100": $gray-100,
   "200": $gray-200,
@@ -73,6 +75,7 @@ $color-contrast-dark: $gray-700 !default;
 $color-contrast-light: $white !default;
 
 // fusv-disable
+$blue-25: tint-color($blue, 95%) !default;
 $blue-50: tint-color($blue, 90%) !default;
 $blue-100: tint-color($blue, 80%) !default;
 $blue-200: tint-color($blue, 60%) !default;
@@ -84,6 +87,7 @@ $blue-700: shade-color($blue, 40%) !default;
 $blue-800: shade-color($blue, 60%) !default;
 $blue-900: shade-color($blue, 80%) !default;
 
+$indigo-25: tint-color($indigo, 95%) !default;
 $indigo-50: tint-color($indigo, 90%) !default;
 $indigo-100: tint-color($indigo, 80%) !default;
 $indigo-200: tint-color($indigo, 60%) !default;
@@ -95,6 +99,7 @@ $indigo-700: shade-color($indigo, 40%) !default;
 $indigo-800: shade-color($indigo, 60%) !default;
 $indigo-900: shade-color($indigo, 80%) !default;
 
+$purple-25: tint-color($purple, 95%) !default;
 $purple-50: tint-color($purple, 90%) !default;
 $purple-100: tint-color($purple, 80%) !default;
 $purple-200: tint-color($purple, 60%) !default;
@@ -106,6 +111,7 @@ $purple-700: shade-color($purple, 40%) !default;
 $purple-800: shade-color($purple, 60%) !default;
 $purple-900: shade-color($purple, 80%) !default;
 
+$pink-25: tint-color($pink, 95%) !default;
 $pink-50: tint-color($pink, 90%) !default;
 $pink-100: tint-color($pink, 80%) !default;
 $pink-200: tint-color($pink, 60%) !default;
@@ -117,6 +123,7 @@ $pink-700: shade-color($pink, 40%) !default;
 $pink-800: shade-color($pink, 60%) !default;
 $pink-900: shade-color($pink, 80%) !default;
 
+$red-25: tint-color($red, 95%) !default;
 $red-50: tint-color($red, 90%) !default;
 $red-100: tint-color($red, 80%) !default;
 $red-200: tint-color($red, 60%) !default;
@@ -128,6 +135,7 @@ $red-700: shade-color($red, 40%) !default;
 $red-800: shade-color($red, 60%) !default;
 $red-900: shade-color($red, 80%) !default;
 
+$orange-25: tint-color($orange, 95%) !default;
 $orange-50: tint-color($orange, 90%) !default;
 $orange-100: tint-color($orange, 80%) !default;
 $orange-200: tint-color($orange, 60%) !default;
@@ -139,6 +147,7 @@ $orange-700: shade-color($orange, 40%) !default;
 $orange-800: shade-color($orange, 60%) !default;
 $orange-900: shade-color($orange, 80%) !default;
 
+$yellow-25: tint-color($yellow, 95%) !default;
 $yellow-50: tint-color($yellow, 90%) !default;
 $yellow-100: tint-color($yellow, 80%) !default;
 $yellow-200: tint-color($yellow, 60%) !default;
@@ -150,6 +159,7 @@ $yellow-700: shade-color($yellow, 40%) !default;
 $yellow-800: shade-color($yellow, 60%) !default;
 $yellow-900: shade-color($yellow, 80%) !default;
 
+$green-25: tint-color($green, 95%) !default;
 $green-50: tint-color($green, 90%) !default;
 $green-100: tint-color($green, 80%) !default;
 $green-200: tint-color($green, 60%) !default;
@@ -161,6 +171,7 @@ $green-700: shade-color($green, 40%) !default;
 $green-800: shade-color($green, 60%) !default;
 $green-900: shade-color($green, 80%) !default;
 
+$teal-25: tint-color($teal, 95%) !default;
 $teal-50: tint-color($teal, 90%) !default;
 $teal-100: tint-color($teal, 80%) !default;
 $teal-200: tint-color($teal, 60%) !default;
@@ -172,6 +183,7 @@ $teal-700: shade-color($teal, 40%) !default;
 $teal-800: shade-color($teal, 60%) !default;
 $teal-900: shade-color($teal, 80%) !default;
 
+$cyan-25: tint-color($cyan, 95%) !default;
 $cyan-50: tint-color($cyan, 90%) !default;
 $cyan-100: tint-color($cyan, 80%) !default;
 $cyan-200: tint-color($cyan, 60%) !default;
@@ -184,6 +196,7 @@ $cyan-800: shade-color($cyan, 60%) !default;
 $cyan-900: shade-color($cyan, 80%) !default;
 
 $blues: (
+  "blue-25": $blue-25,
   "blue-50": $blue-50,
   "blue-100": $blue-100,
   "blue-200": $blue-200,
@@ -197,6 +210,7 @@ $blues: (
 ) !default;
 
 $indigos: (
+  "indigo-25": $indigo-25,
   "indigo-50": $indigo-50,
   "indigo-100": $indigo-100,
   "indigo-200": $indigo-200,
@@ -210,6 +224,7 @@ $indigos: (
 ) !default;
 
 $purples: (
+  "purple-25": $purple-25,
   "purple-50": $purple-50,
   "purple-100": $purple-100,
   "purple-200": $purple-200,
@@ -223,6 +238,7 @@ $purples: (
 ) !default;
 
 $pinks: (
+  "pink-25": $pink-25,
   "pink-50": $pink-50,
   "pink-100": $pink-100,
   "pink-200": $pink-200,
@@ -236,6 +252,7 @@ $pinks: (
 ) !default;
 
 $reds: (
+  "red-25": $red-25,
   "red-50": $red-50,
   "red-100": $red-100,
   "red-200": $red-200,
@@ -249,6 +266,7 @@ $reds: (
 ) !default;
 
 $oranges: (
+  "orange-25": $orange-25,
   "orange-50": $orange-50,
   "orange-100": $orange-100,
   "orange-200": $orange-200,
@@ -262,6 +280,7 @@ $oranges: (
 ) !default;
 
 $yellows: (
+  "yellow-25": $yellow-25,
   "yellow-50": $yellow-50,
   "yellow-100": $yellow-100,
   "yellow-200": $yellow-200,
@@ -275,6 +294,7 @@ $yellows: (
 ) !default;
 
 $greens: (
+  "green-25": $green-25,
   "green-50": $green-50,
   "green-100": $green-100,
   "green-200": $green-200,
@@ -288,6 +308,7 @@ $greens: (
 ) !default;
 
 $teals: (
+  "teal-25": $teal-25,
   "teal-50": $teal-50,
   "teal-100": $teal-100,
   "teal-200": $teal-200,
@@ -301,6 +322,7 @@ $teals: (
 ) !default;
 
 $cyans: (
+  "cyan-25": $cyan-25,
   "cyan-50": $cyan-50,
   "cyan-100": $cyan-100,
   "cyan-200": $cyan-200,
@@ -393,6 +415,7 @@ $light-border-subtle: var(--#{$prefix}gray-100) !default;
 $dark-border-subtle: var(--#{$prefix}gray-400) !default;
 // scss-docs-end theme-border-subtle-variables
 
+$primary-25: $pink-25 !default;
 $primary-50: $pink-50 !default;
 $primary-100: $pink-100 !default;
 $primary-200: $pink-200 !default;
@@ -404,6 +427,7 @@ $primary-700: $pink-700 !default;
 $primary-800: $pink-800 !default;
 $primary-900: $pink-900 !default;
 
+$secondary-25: $purple-25 !default;
 $secondary-50: $purple-50 !default;
 $secondary-100: $purple-100 !default;
 $secondary-200: $purple-200 !default;
@@ -415,6 +439,7 @@ $secondary-700: $purple-700 !default;
 $secondary-800: $purple-800 !default;
 $secondary-900: $purple-900 !default;
 
+$success-25: $green-25 !default;
 $success-50: $green-50 !default;
 $success-100: $green-100 !default;
 $success-200: $green-200 !default;
@@ -426,6 +451,7 @@ $success-700: $green-700 !default;
 $success-800: $green-800 !default;
 $success-900: $green-900 !default;
 
+$info-25: $blue-25 !default;
 $info-50: $blue-50 !default;
 $info-100: $blue-100 !default;
 $info-200: $blue-200 !default;
@@ -437,6 +463,7 @@ $info-700: $blue-700 !default;
 $info-800: $blue-800 !default;
 $info-900: $blue-900 !default;
 
+$warning-25: $yellow-25 !default;
 $warning-50: $yellow-50 !default;
 $warning-100: $yellow-100 !default;
 $warning-200: $yellow-200 !default;
@@ -448,6 +475,7 @@ $warning-700: $yellow-700 !default;
 $warning-800: $yellow-800 !default;
 $warning-900: $yellow-900 !default;
 
+$danger-25: $red-25 !default;
 $danger-50: $red-50 !default;
 $danger-100: $red-100 !default;
 $danger-200: $red-200 !default;
@@ -460,7 +488,6 @@ $danger-800: $red-800 !default;
 $danger-900: $red-900 !default;
 
 // custom
-// TODO: check this.
 $bg-surface-gray: $gray-50 !default;
 $bg-surface-primary: $primary-50 !default;
 $bg-surface-secondary: $secondary-50 !default;
@@ -470,9 +497,6 @@ $bg-surface-warning: $warning-50 !default;
 $bg-surface-danger: $danger-50 !default;
 
 $bg-surface-colors: (
-  "gray-soft": $bg-surface-gray, // DEPRECATED
-  "primary-soft": $bg-surface-primary, // DEPRECATED
-  "secondary-soft": $bg-surface-secondary, // DEPRECATED
   "surface-gray": $bg-surface-gray,
   "surface-primary": $bg-surface-primary,
   "surface-secondary": $bg-surface-secondary,
@@ -481,9 +505,28 @@ $bg-surface-colors: (
   "surface-warning": $bg-surface-warning,
   "surface-danger": $bg-surface-danger,
 ) !default;
+
+$bg-gray-soft: $gray-25 !default;
+$bg-primary-soft: $primary-25 !default;
+$bg-secondary-soft: $secondary-25 !default;
+$bg-success-soft: $success-25 !default;
+$bg-info-soft: $info-25 !default;
+$bg-warning-soft: $warning-25 !default;
+$bg-danger-soft: $danger-25 !default;
+
+$bg-soft-colors: (
+  "gray-soft": $bg-gray-soft,
+  "primary-soft": $bg-primary-soft,
+  "secondary-soft": $bg-secondary-soft,
+  "success-soft": $bg-success-soft,
+  "info-soft": $bg-info-soft,
+  "warning-soft": $bg-warning-soft,
+  "danger-soft": $bg-danger-soft,
+) !default;
 // end custom
 
-$theme-colors-palletes: (
+$theme-colors-palettes: (
+  "primary-25": $primary-25,
   "primary-50": $primary-50,
   "primary-100": $primary-100,
   "primary-200": $primary-200,
@@ -494,6 +537,7 @@ $theme-colors-palletes: (
   "primary-700": $primary-700,
   "primary-800": $primary-800,
   "primary-900": $primary-900,
+  "secondary-25": $secondary-25,
   "secondary-50": $secondary-50,
   "secondary-100": $secondary-100,
   "secondary-200": $secondary-200,
@@ -504,6 +548,7 @@ $theme-colors-palletes: (
   "secondary-700": $secondary-700,
   "secondary-800": $secondary-800,
   "secondary-900": $secondary-900,
+  "success-25": $success-25,
   "success-50": $success-50,
   "success-100": $success-100,
   "success-200": $success-200,
@@ -514,6 +559,7 @@ $theme-colors-palletes: (
   "success-700": $success-700,
   "success-800": $success-800,
   "success-900": $success-900,
+  "info-25": $info-25,
   "info-50": $info-50,
   "info-100": $info-100,
   "info-200": $info-200,
@@ -524,6 +570,7 @@ $theme-colors-palletes: (
   "info-700": $info-700,
   "info-800": $info-800,
   "info-900": $info-900,
+  "warning-25": $warning-25,
   "warning-50": $warning-50,
   "warning-100": $warning-100,
   "warning-200": $warning-200,
@@ -534,6 +581,7 @@ $theme-colors-palletes: (
   "warning-700": $warning-700,
   "warning-800": $warning-800,
   "warning-900": $warning-900,
+  "danger-25": $danger-25,
   "danger-50": $danger-50,
   "danger-100": $danger-100,
   "danger-200": $danger-200,
@@ -552,7 +600,7 @@ $all-colors: map-merge-multiple(
   $colors,
   $theme-colors,
   $palette-grays,
-  $theme-colors-palletes,
+  $theme-colors-palettes,
   (
     "black": $black,
     "white": $white,

package/src/style/abstracts/variables/_tooltip.scss

@@ -1,9 +1,9 @@
 // scss-docs-start tooltip-variables
-$tooltip-font-size: var(--#{$prefix}tooltip-component-font-size, var(--#{$prefix}body-font-size)) !default;
-$tooltip-max-width: var(--#{$prefix}tooltip-component-max-width, 300px) !default;
-$tooltip-color: var(--#{$prefix}tooltip-component-color, var(--#{$prefix}body-bg)) !default;
-$tooltip-bg: var(--#{$prefix}tooltip-component-bg, var(--#{$prefix}emphasis-color)) !default;
-$tooltip-border-radius: var(--#{$prefix}tooltip-component-border-radius, var(--#{$prefix}ref-spacer-1)) !default;
+$tooltip-font-size: var(--#{$prefix}body-font-size) !default;
+$tooltip-max-width:  300px !default;
+$tooltip-color:  var(--#{$prefix}body-bg) !default;
+$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
+$tooltip-border-radius: var(--#{$prefix}ref-spacer-1) !default;
 $tooltip-opacity: 1 !default;
 $tooltip-padding-y: var(--#{$prefix}ref-spacer-1) !default;
 $tooltip-padding-x: var(--#{$prefix}ref-spacer-2) !default;

package/src/style/base/_+import.scss

@@ -1,38 +1,38 @@
-@import "bootstrap/scss/reboot";
+@import "node_modules/bootstrap/scss/reboot";
 
-// @import "bootstrap/scss/type"; we use our own bootstrap based implementation
+// @import "node_modules/bootstrap/scss/type"; we use our own bootstrap based implementation
 
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-// @import "bootstrap/scss/tables"; we use our own bootstrap based implementation
+@import "node_modules/bootstrap/scss/images";
+@import "node_modules/bootstrap/scss/containers";
+@import "node_modules/bootstrap/scss/grid";
+// @import "node_modules/bootstrap/scss/tables"; we use our own bootstrap based implementation
 @import "tables";
 
-@import "bootstrap/scss/transitions";
+@import "node_modules/bootstrap/scss/transitions";
 
-@import "bootstrap/scss/forms";
-// @import "bootstrap/scss/buttons"; we use our own bootstrap based implementation
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/accordion";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
-@import "bootstrap/scss/badge";
+@import "node_modules/bootstrap/scss/forms";
+// @import "node_modules/bootstrap/scss/buttons"; we use our own bootstrap based implementation
+@import "node_modules/bootstrap/scss/dropdown";
+@import "node_modules/bootstrap/scss/button-group";
+@import "node_modules/bootstrap/scss/nav";
+@import "node_modules/bootstrap/scss/navbar";
+@import "node_modules/bootstrap/scss/card";
+@import "node_modules/bootstrap/scss/accordion";
+@import "node_modules/bootstrap/scss/breadcrumb";
+@import "node_modules/bootstrap/scss/pagination";
+@import "node_modules/bootstrap/scss/alert";
+@import "node_modules/bootstrap/scss/progress";
+@import "node_modules/bootstrap/scss/list-group";
+@import "node_modules/bootstrap/scss/close";
+@import "node_modules/bootstrap/scss/toasts";
+@import "node_modules/bootstrap/scss/modal";
+@import "node_modules/bootstrap/scss/tooltip";
+@import "node_modules/bootstrap/scss/popover";
+@import "node_modules/bootstrap/scss/carousel";
+@import "node_modules/bootstrap/scss/spinners";
+@import "node_modules/bootstrap/scss/offcanvas";
+@import "node_modules/bootstrap/scss/placeholders";
+@import "node_modules/bootstrap/scss/badge";
 
 @import "type";
 @import "body";

package/src/style/base/_tooltip.scss

@@ -16,8 +16,8 @@
     $color: color-contrast-var($value);
 
     &.tooltip-#{$theme} {
-      --#{$prefix}tooltip-color: var(--#{$prefix}tooltip-component-color, #{$color});
-      --#{$prefix}tooltip-bg: var(--#{$prefix}tooltip-component-bg, var(--#{$prefix}#{$theme}));
+      --#{$prefix}tooltip-color: #{$color};
+      --#{$prefix}tooltip-bg: var(--#{$prefix}#{$theme});
     }
   }
 }

package/src/style/components/_+import.scss

@@ -1,4 +1,4 @@
-@import "react-toastify/scss/main";
+@import "node_modules/react-toastify/scss/main";
 
 @import "d-icon";
 @import "d-input-pin";

package/src/style/components/_d-carousel.scss

@@ -1,4 +1,4 @@
-@import "@splidejs/splide/src/css/template/default/index";
+@import "node_modules/@splidejs/splide/src/css/template/default/index";
 
 .d-carousel {
   // Arrows

package/src/style/components/_d-datepicker.scss

@@ -1,4 +1,4 @@
-@import "react-datepicker/src/stylesheets/datepicker";
+@import "node_modules/react-datepicker/src/stylesheets/datepicker";
 
 // stylelint-disable selector-class-pattern
 

package/src/style/dynamic-ui-non-root.scss

@@ -8,6 +8,6 @@
 
 @import "helpers/+import";
 
-@import "bootstrap/scss/utilities/api";
+@import "node_modules/bootstrap/scss/utilities/api";
 
 @import "shame";

package/src/style/dynamic-ui.scss

@@ -10,6 +10,6 @@
 
 @import "helpers/+import";
 
-@import "bootstrap/scss/utilities/api";
+@import "node_modules/bootstrap/scss/utilities/api";
 
 @import "shame";

package/src/style/helpers/_+import.scss

@@ -1,17 +1,17 @@
-@import "bootstrap/scss/helpers/clearfix";
-// @import "bootstrap/scss/helpers/color-bg";
+@import "node_modules/bootstrap/scss/helpers/clearfix";
+// @import "node_modules/bootstrap/scss/helpers/color-bg";
 @import "color-bg";
-//@import "bootstrap/scss/helpers/colored-links";
+//@import "node_modules/bootstrap/scss/helpers/colored-links";
 @import "colored-links";
-@import "bootstrap/scss/helpers/focus-ring";
-@import "bootstrap/scss/helpers/icon-link";
-@import "bootstrap/scss/helpers/ratio";
-@import "bootstrap/scss/helpers/position";
-@import "bootstrap/scss/helpers/stacks";
-@import "bootstrap/scss/helpers/visually-hidden";
-@import "bootstrap/scss/helpers/stretched-link";
-@import "bootstrap/scss/helpers/text-truncation";
-@import "bootstrap/scss/helpers/vr";
+@import "node_modules/bootstrap/scss/helpers/focus-ring";
+@import "node_modules/bootstrap/scss/helpers/icon-link";
+@import "node_modules/bootstrap/scss/helpers/ratio";
+@import "node_modules/bootstrap/scss/helpers/position";
+@import "node_modules/bootstrap/scss/helpers/stacks";
+@import "node_modules/bootstrap/scss/helpers/visually-hidden";
+@import "node_modules/bootstrap/scss/helpers/stretched-link";
+@import "node_modules/bootstrap/scss/helpers/text-truncation";
+@import "node_modules/bootstrap/scss/helpers/vr";
 
 @import "overlay";
 @import "text-truncate";

package/src/style/helpers/_color-bg.scss

@@ -1,11 +1,13 @@
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-@each $color, $value in $theme-colors {
+@each $color, $value in map-merge-multiple($theme-colors-palettes, $theme-colors, $palette-grays, ("gray": map-get($colors, "gray"))) {
   .text-bg-#{$color} {
     color: color-contrast-var($value) if($enable-important-utilities, !important, null);
     background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
+}
 
-  .text-bg-soft-#{$color} {
+@each $color, $value in $theme-colors {
+  .text-#{$color}-bg-color {
     color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $color == "light" {

package/src/style/root/_+import.scss

@@ -1,2 +1,2 @@
-// @import "bootstrap/scss/root";
+// @import "node_modules/bootstrap/scss/root";
 @import "root";