@dynamic-framework/ui-react 2.0.0-dev.1 → 2.0.0-dev.3

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

@@ -35,7 +35,7 @@ $grays: (
 // fusv-enable
 
 // scss-docs-start color-variables
-$blue: #0d6efd !default;
+$blue: #2068d5 !default;
 $indigo: #6610f2 !default;
 $purple: #4848b7 !default;
 $pink: #d81b60 !default;
@@ -339,25 +339,25 @@ $cyans: (
 // custom
 // theme <- colors mapping.
 $theme-colors-mapping: (
-  "primary": "pink",
-  "secondary": "purple",
+  "primary": "blue",
+  "secondary": "gray-800",
   "success": "green",
   "info": "blue",
   "warning": "yellow",
   "danger": "red",
-  "light": "gray-100",
+  "light": "gray-25",
   "dark": "gray-900"
 ) !default;
 // end custom
 
 // scss-docs-start theme-color-variables
-$primary: $pink !default;
-$secondary: $purple !default;
+$primary: $blue !default;
+$secondary: $gray-400 !default;
 $success: $green !default;
 $info: $blue !default;
 $warning: $yellow !default;
 $danger: $red !default;
-$light: $gray-100 !default;
+$light: $gray-25 !default;
 $dark: $gray-900 !default;
 // scss-docs-end theme-color-variables
 
@@ -370,7 +370,16 @@ $theme-colors: (
   "warning": $warning,
   "danger": $danger,
   "light": $light,
-  "dark": $dark
+  "dark": $dark,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan
 ) !default;
 // scss-docs-end theme-colors-map
 
@@ -387,7 +396,7 @@ $primary-text-emphasis: var(--#{$prefix}primary-600) !default;
 $secondary-text-emphasis: var(--#{$prefix}secondary-600) !default;
 $success-text-emphasis: var(--#{$prefix}success-600) !default;
 $info-text-emphasis: var(--#{$prefix}info-600) !default;
-$warning-text-emphasis: var(--#{$prefix}warning-600) !default;
+$warning-text-emphasis: var(--#{$prefix}warning-800) !default;
 $danger-text-emphasis: var(--#{$prefix}danger-600) !default;
 $light-text-emphasis: var(--#{$prefix}gray-600) !default;
 $dark-text-emphasis: var(--#{$prefix}gray-600) !default;
@@ -415,29 +424,29 @@ $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;
-$primary-300: $pink-300 !default;
-$primary-400: $pink-400 !default;
-$primary-500: $pink-500 !default;
-$primary-600: $pink-600 !default;
-$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;
-$secondary-300: $purple-300 !default;
-$secondary-400: $purple-400 !default;
-$secondary-500: $purple-500 !default;
-$secondary-600: $purple-600 !default;
-$secondary-700: $purple-700 !default;
-$secondary-800: $purple-800 !default;
-$secondary-900: $purple-900 !default;
+$primary-25: $blue-25 !default;
+$primary-50: $blue-50 !default;
+$primary-100: $blue-100 !default;
+$primary-200: $blue-200 !default;
+$primary-300: $blue-300 !default;
+$primary-400: $blue-400 !default;
+$primary-500: $blue-500 !default;
+$primary-600: $blue-600 !default;
+$primary-700: $blue-700 !default;
+$primary-800: $blue-800 !default;
+$primary-900: $blue-900 !default;
+
+$secondary-25: $gray-25 !default;
+$secondary-50: $gray-50 !default;
+$secondary-100: $gray-100 !default;
+$secondary-200: $gray-200 !default;
+$secondary-300: $gray-300 !default;
+$secondary-400: $gray-400 !default;
+$secondary-500: $gray-500 !default;
+$secondary-600: $gray-600 !default;
+$secondary-700: $gray-700 !default;
+$secondary-800: $gray-800 !default;
+$secondary-900: $gray-900 !default;
 
 $success-25: $green-25 !default;
 $success-50: $green-50 !default;
@@ -487,43 +496,6 @@ $danger-700: $red-700 !default;
 $danger-800: $red-800 !default;
 $danger-900: $red-900 !default;
 
-// custom
-$bg-surface-gray: var(--#{$prefix}gray-50-rgb) !default;
-$bg-surface-primary: var(--#{$prefix}primary-50-rgb) !default;
-$bg-surface-secondary: var(--#{$prefix}secondary-50-rgb) !default;
-$bg-surface-success: var(--#{$prefix}success-50-rgb) !default;
-$bg-surface-info: var(--#{$prefix}info-50-rgb) !default;
-$bg-surface-warning: var(--#{$prefix}warning-50-rgb) !default;
-$bg-surface-danger: var(--#{$prefix}danger-50-rgb) !default;
-
-$bg-surface-colors: (
-  "surface-gray": $bg-surface-gray,
-  "surface-primary": $bg-surface-primary,
-  "surface-secondary": $bg-surface-secondary,
-  "surface-success": $bg-surface-success,
-  "surface-info": $bg-surface-info,
-  "surface-warning": $bg-surface-warning,
-  "surface-danger": $bg-surface-danger,
-) !default;
-
-$bg-gray-soft: var(--#{$prefix}gray-25-rgb) !default;
-$bg-primary-soft: var(--#{$prefix}primary-25-rgb) !default;
-$bg-secondary-soft: var(--#{$prefix}secondary-25-rgb) !default;
-$bg-success-soft: var(--#{$prefix}success-25-rgb) !default;
-$bg-info-soft: var(--#{$prefix}info-25-rgb) !default;
-$bg-warning-soft: var(--#{$prefix}warning-25-rgb) !default;
-$bg-danger-soft: var(--#{$prefix}danger-25-rgb) !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-palettes: (
   "primary-25": $primary-25,
@@ -592,6 +564,105 @@ $theme-colors-palettes: (
   "danger-700": $danger-700,
   "danger-800": $danger-800,
   "danger-900": $danger-900,
+  "indigo-25": $indigo-25,
+  "indigo-50": $indigo-50,
+  "indigo-100": $indigo-100,
+  "indigo-200": $indigo-200,
+  "indigo-300": $indigo-300,
+  "indigo-400": $indigo-400,
+  "indigo-500": $indigo-500,
+  "indigo-600": $indigo-600,
+  "indigo-700": $indigo-700,
+  "indigo-800": $indigo-800,
+  "indigo-900": $indigo-900,
+  "purple-25": $purple-25,
+  "purple-50": $purple-50,
+  "purple-100": $purple-100,
+  "purple-200": $purple-200,
+  "purple-300": $purple-300,
+  "purple-400": $purple-400,
+  "purple-500": $purple-500,
+  "purple-600": $purple-600,
+  "purple-700": $purple-700,
+  "purple-800": $purple-800,
+  "purple-900": $purple-900,
+  "pink-25": $pink-25,
+  "pink-50": $pink-50,
+  "pink-100": $pink-100,
+  "pink-200": $pink-200,
+  "pink-300": $pink-300,
+  "pink-400": $pink-400,
+  "pink-500": $pink-500,
+  "pink-600": $pink-600,
+  "pink-700": $pink-700,
+  "pink-800": $pink-800,
+  "pink-900": $pink-900,
+  "red-25": $red-25,
+  "red-50": $red-50,
+  "red-100": $red-100,
+  "red-200": $red-200,
+  "red-300": $red-300,
+  "red-400": $red-400,
+  "red-500": $red-500,
+  "red-600": $red-600,
+  "red-700": $red-700,
+  "red-800": $red-800,
+  "red-900": $red-900,
+  "orange-25": $orange-25,
+  "orange-50": $orange-50,
+  "orange-100": $orange-100,
+  "orange-200": $orange-200,
+  "orange-300": $orange-300,
+  "orange-400": $orange-400,
+  "orange-500": $orange-500,
+  "orange-600": $orange-600,
+  "orange-700": $orange-700,
+  "orange-800": $orange-800,
+  "orange-900": $orange-900,
+  "yellow-25": $yellow-25,
+  "yellow-50": $yellow-50,
+  "yellow-100": $yellow-100,
+  "yellow-200": $yellow-200,
+  "yellow-300": $yellow-300,
+  "yellow-400": $yellow-400,
+  "yellow-500": $yellow-500,
+  "yellow-600": $yellow-600,
+  "yellow-700": $yellow-700,
+  "yellow-800": $yellow-800,
+  "yellow-900": $yellow-900,
+  "green-25": $green-25,
+  "green-50": $green-50,
+  "green-100": $green-100,
+  "green-200": $green-200,
+  "green-300": $green-300,
+  "green-400": $green-400,
+  "green-500": $green-500,
+  "green-600": $green-600,
+  "green-700": $green-700,
+  "green-800": $green-800,
+  "green-900": $green-900,
+  "teal-25": $teal-25,
+  "teal-50": $teal-50,
+  "teal-100": $teal-100,
+  "teal-200": $teal-200,
+  "teal-300": $teal-300,
+  "teal-400": $teal-400,
+  "teal-500": $teal-500,
+  "teal-600": $teal-600,
+  "teal-700": $teal-700,
+  "teal-800": $teal-800,
+  "teal-900": $teal-900,
+  "cyan-25": $cyan-25,
+  "cyan-50": $cyan-50,
+  "cyan-100": $cyan-100,
+  "cyan-200": $cyan-200,
+  "cyan-300": $cyan-300,
+  "cyan-400": $cyan-400,
+  "cyan-500": $cyan-500,
+  "cyan-600": $cyan-600,
+  "cyan-700": $cyan-700,
+  "cyan-800": $cyan-800,
+  "cyan-900": $cyan-900,
 ) !default;
 
 $palette-grays: map-prev-key($grays, "gray") !default;

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

@@ -5,8 +5,8 @@ $datepicker-border-color: var(--#{$prefix}gray-400) !default;
 $datepicker-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $datepicker-day-border-radius: .25rem !default;
 // Header
-$datepicker-header-bg: var(--#{$prefix}secondary-soft) !default;
-$datepicker-header-padding: var(--#{$prefix}ref-spacer-2) 0 !default;
+$datepicker-header-bg: none !default;
+$datepicker-header-padding: 0 !default;
 $datepicker-header-font-weight: var(--#{$prefix}fw-bold) !default;
 $datepicker-day-names-color: var(--#{$prefix}gray) !default;
 $datepicker-day-names-font-size: var(--#{$prefix}fs-small) !default;
@@ -24,7 +24,7 @@ $datepicker-day-color: var(--#{$prefix}body-color) !default;
 
 // Day selected
 $datepicker-day-selected-color: var(--#{$prefix}white) !default;
-$datepicker-day-selected-bg: var(--#{$prefix}secondary) !default;
+$datepicker-day-selected-bg: var(--#{$prefix}primary-500) !default;
 
 // Day Disabled
 $datepicker-day-disabled-color: var(--#{$prefix}gray-400) !default;
@@ -37,11 +37,12 @@ $datepicker-week-number-border-radius: .25rem !default;
 
 // Range
 $datepicker-range-start-color: var(--#{$prefix}white) !default;
-$datepicker-range-start-bg: var(--#{$prefix}secondary-600) !default;
+$datepicker-range-start-bg: var(--#{$prefix}primary-500) !default;
 $datepicker-range-end-color: var(--#{$prefix}white) !default;
-$datepicker-range-end-bg: var(--#{$prefix}secondary-600) !default;
-$datepicker-in-range-bg: var(--#{$prefix}secondary-200) !default;
+$datepicker-range-end-bg: var(--#{$prefix}primary-500) !default;
+$datepicker-in-range-bg: var(--#{$prefix}primary-200) !default;
 $datepicker-range-color: var(--#{$prefix}body-color) !default;
-$datepicker-in-range-hover-bg: var(--#{$prefix}secondary-400) !default;
-$datepicker-in-range-disabled-color: var(--#{$prefix}secondary-200) !default;
-$datepicker-in-range-disabled-bg: var(--#{$prefix}secondary-50) !default;
+$datepicker-in-range-hover-bg: var(--#{$prefix}primary-400) !default;
+$datepicker-in-range-disabled-color: var(--#{$prefix}primary-200) !default;
+$datepicker-in-range-disabled-bg: var(--#{$prefix}primary-50) !default;
+$datepicker-time-list-item-width: 100px !default;

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

@@ -3,7 +3,7 @@
 // Dropdown menu container and contents.
 
 // scss-docs-start dropdown-variables
-$dropdown-padding-x: var(--#{$prefix}--#{$prefix}ref-spacer-2) !default;
+$dropdown-padding-x: var(--#{$prefix}ref-spacer-2) !default;
 $dropdown-bg: var(--#{$prefix}white) !default;
 $dropdown-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $dropdown-border-width: 0 !default;
@@ -11,8 +11,10 @@ $dropdown-border-width: 0 !default;
 $dropdown-divider-margin-y: var(--#{$prefix}ref-spacer-2) !default;
 $dropdown-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 
-$dropdown-link-color: rgb(var(--#{$prefix}gray-500-rgb)) !default;
-$dropdown-link-hover-bg: rgb(var(--#{$prefix}gray-100-rgb)) !default;
+$dropdown-link-color: rgb(var(--#{$prefix}gray-700-rgb)) !default;
+$dropdown-link-hover-color: rgb(var(--#{$prefix}gray-700-rgb)) !default;
+$dropdown-link-hover-bg: rgb(var(--#{$prefix}gray-25-rgb)) !default;
+$dropdown-link-active-bg: rgb(var(--#{$prefix}gray-50-rgb)) !default;
 
 $dropdown-item-padding-y: var(--#{$prefix}ref-spacer-2) !default;
 $dropdown-item-padding-x: var(--#{$prefix}ref-spacer-4) !default;
@@ -28,7 +30,7 @@ $dropdown-header-color: var(--#{$prefix}gray-600) !default;
 $dropdown-dark-color: var(--#{$prefix}gray-300) !default;
 $dropdown-dark-bg: var(--#{$prefix}gray-800) !default;
 $dropdown-dark-link-hover-color: var(--#{$prefix}white) !default;
-$dropdown-dark-link-hover-bg: rgba(var(--#{$prefix}white-rgb), .15) !default;
+$dropdown-dark-link-hover-bg: var(--#{$prefix}gray-50) !default;
 $dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
 $dropdown-dark-header-color: var(--#{$prefix}gray-500) !default;
 // scss-docs-end dropdown-dark-variables

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

@@ -1,6 +1,6 @@
 // scss-docs-start form-text-variables
 $form-text-margin-top: var(--#{$prefix}ref-spacer-1) !default;
-$form-text-color: var(--#{$prefix}body-color) !default;
+$form-text-color: var(--#{$prefix}bs-gray-400) !default;
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
@@ -11,8 +11,8 @@ $form-label-color: var(--#{$prefix}label-color) !default;
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-input-variables
-$input-padding-y: $spacer-3 !default;
-$input-padding-x: $spacer-4 !default;
+$input-padding-y: $spacer-2 !default;
+$input-padding-x: $spacer-3 !default;
 
 $input-padding-x-sm: $spacer-2 !default;
 $input-padding-y-sm: $spacer-1 !default;
@@ -35,7 +35,7 @@ $input-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $input-border-radius-lg: var(--#{$prefix}border-radius-sm) !default;
 
-$input-focus-border-color: $component-focus-border-color !default; // unused
+$input-focus-border-color: var(--#{$prefix}gray-200) !default;
 $input-focus-width: $input-btn-focus-width !default;
 
 $input-placeholder-color: var(--#{$prefix}border-color) !default;

package/src/style/abstracts/variables/_list-group.scss

@@ -3,7 +3,7 @@
 // scss-docs-start list-group-variables
 $list-group-color: var(--#{$prefix}dark) !default;
 $list-group-bg: transparent !default;
-$list-group-border-color: var(--#{$prefix}gray-300) !default;
+$list-group-border-color: var(--#{$prefix}gray-100) !default;
 $list-group-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 $list-group-item-padding-y: var(--#{$prefix}ref-spacer-3) !default;
@@ -14,7 +14,7 @@ $list-group-item-bg-scale: 0% !default;
 $list-group-item-color-scale: 40% !default;
 // fusv-enable
 
-$list-group-hover-bg: var(--#{$prefix}surface-primary) !default;
+$list-group-hover-bg: var(--#{$prefix}subtle-primary) !default;
 
 $list-group-disabled-color: var(--#{$prefix}gray-600) !default;
 

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

@@ -19,19 +19,20 @@ $modal-backdrop-bg: var(--#{$prefix}black) !default;
 $modal-backdrop-opacity: .3 !default;
 
 $modal-header-border-color: transparent !default;
-$modal-header-padding-y: var(--#{$prefix}ref-spacer-4) !default;
+$modal-header-padding-y: var(--#{$prefix}ref-spacer-6) !default;
 $modal-header-padding-x: var(--#{$prefix}ref-spacer-4) !default;
 $modal-header-padding: var(--#{$prefix}ref-spacer-4) !default; // Keep this for backwards compatibility
+$modal-body-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6) !default;
 
 $modal-footer-border-color: transparent !default;
 
 // custom
 $modal-separator-bg: var(--#{$prefix}gray-100) !default;
 $modal-separator-height: 1px !default;
-$modal-separator-margin-x: var(--#{$prefix}ref-spacer-4) !default;
+$modal-separator-margin-x: 0 !default;
 // end custom
 
 // custom
-$modal-footer-padding: var(--#{$prefix}ref-spacer-4) !default;
+$modal-footer-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6) !default;
 // end custom
 // scss-docs-end modal-variables

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

@@ -3,6 +3,7 @@
 // scss-docs-start offcanvas-variables
 $offcanvas-padding-y: var(--#{$prefix}ref-spacer-4) !default;
 $offcanvas-padding-x: var(--#{$prefix}ref-spacer-4) !default;
+$offcanvas-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
 
 // custom
 $offcanvas-header-gap: var(--#{$prefix}ref-spacer-4) !default;

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

@@ -12,7 +12,7 @@ $pagination-padding-x-lg: var(--#{$prefix}ref-spacer-1) !default;
 $pagination-page-item-size: $spacer-8 !default;
 $pagination-page-item-size-lg: $spacer-10 !default;
 $pagination-page-item-size-sm: $spacer-6 !default;
-$pagination-page-border-radius: $pagination-page-item-size !default;
+$pagination-page-border-radius: var(--#{$prefix}border-radius) !default;
 $pagination-page-control-color: var(--#{$prefix}primary) !default;
 $pagination-page-control-disabled-color: var(--#{$prefix}primary-200) !default;
 // end custom
@@ -22,7 +22,7 @@ $pagination-bg: transparent !default;
 $pagination-border-width: 0 !default;
 
 $pagination-hover-color: var(--#{$prefix}body-color) !default;
-$pagination-hover-bg: var(--#{$prefix}primary-50) !default;
+$pagination-hover-bg: var(--#{$prefix}gray-50) !default;
 $pagination-hover-border-color: 0 !default; // Todo in v6: remove this?
 
 $pagination-focus-color: #{$pagination-hover-color} !default;
@@ -33,6 +33,6 @@ $pagination-focus-outline: 0 !default;
 $pagination-disabled-color: var(--#{$prefix}body-color) !default;
 $pagination-disabled-bg: var(--#{$prefix}transparent) !default;
 
-$pagination-border-radius-sm: $pagination-page-item-size-sm !default;
-$pagination-border-radius-lg: $pagination-page-item-size-lg !default;
+// $pagination-border-radius-sm: $pagination-page-item-size-sm !default;
+// $pagination-border-radius-lg: $pagination-page-item-size-lg !default;
 // scss-docs-end pagination-variables

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

@@ -0,0 +1 @@
+$box-shadow-lg: 0 10px 10px rgba(0, 0, 0, .02) !default;

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

@@ -10,17 +10,22 @@ $table-bg-scale: -100% !default;
 
 $table-striped-color: $table-color !default;
 $table-striped-bg-factor: .05 !default;
-$table-striped-bg: unquote("color-mix(in srgb, var(--#{$prefix}white), var(--#{$prefix}black) #{(100% - $table-bg-scale) * $table-striped-bg-factor})") !default;
 
 $table-active-color: $table-color !default;
 $table-active-bg-factor: .1 !default;
-$table-active-bg: unquote("color-mix(in srgb, var(--#{$prefix}white), var(--#{$prefix}black) #{(100% - $table-bg-scale) * $table-active-bg-factor})") !default;
 
 $table-hover-color: $table-color !default;
 $table-hover-bg-factor: .075 !default;
-$table-hover-bg: unquote("color-mix(in srgb, var(--#{$prefix}white), var(--#{$prefix}black) #{(100% - $table-bg-scale) * $table-hover-bg-factor})") !default;
+
+
+$table-bg-color-default: var(--#{$prefix}gray-25) !default;
+
+$table-hover-bg: $table-bg-color-default !default;
+$table-striped-bg: $table-bg-color-default !default;
+$table-active-bg: $table-bg-color-default !default;
 
 $table-border-factor: .1 !default;
+$table-border-color: var(--#{$prefix}gray-50) !default;
 
 
 // scss-docs-end table-variables

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

@@ -1,7 +1,7 @@
 // scss-docs-start tooltip-variables
 $tooltip-font-size: var(--#{$prefix}body-font-size) !default;
 $tooltip-max-width:  300px !default;
-$tooltip-color:  var(--#{$prefix}body-bg) !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;

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

@@ -3,7 +3,7 @@
 // Font, line-height, and color for body text, headings, and more.
 
 // scss-docs-start font-variables
-$font-family-sans-serif: "Source Sans 3", sans-serif !default;
+$font-family-sans-serif: "Jost", sans-serif !default;
 
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
@@ -21,9 +21,9 @@ $font-size-lg: $font-size-base * 1.125 !default;  // 18px
 $font-weight-lighter-value: lighter !default;
 $font-weight-light-value: 200 !default;
 $font-weight-normal-value: 400 !default;
-$font-weight-semibold-value: 600 !default;
-$font-weight-bold-value: 700 !default;
-$font-weight-bolder-value: 800 !default;
+$font-weight-semibold-value: 500 !default;
+$font-weight-bold-value: 600 !default;
+$font-weight-bolder-value: 600 !default;
 
 $font-weight-lighter: var(--#{$prefix}fw-lighter) !default;
 $font-weight-light: var(--#{$prefix}fw-light) !default;
@@ -169,9 +169,9 @@ $small-font-size-value: $font-size-sm-value !default;
 
 $sub-sup-font-size: .75em !default;
 
-// fusv-disable
-$text-muted: var(--#{$prefix}gray) !default;
-// fusv-enable
+// // fusv-disable
+// $text-muted: var(--#{$prefix}gray-400) !default;
+// // fusv-enable
 
 $blockquote-margin-y: var(--#{$prefix}ref-spacer-4) !default;
 $blockquote-footer-color: var(--#{$prefix}gray-600) !default;

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

@@ -42,6 +42,7 @@
 @import "form-check";
 @import "form-control";
 @import "form-range";
+@import "list-group";
 @import "form-text";
 @import "input-group";
 @import "buttons";

package/src/style/base/_alert.scss

@@ -1,7 +1,7 @@
 .alert {
   --#{$prefix}alert-gap: #{$alert-gap};
   --#{$prefix}alert-close-icon-size: #{$alert-close-icon-size};
-  --#{$prefix}alert-icon-size: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}alert-icon-size: var(--#{$prefix}ref-spacer-6);
 
   display: flex;
   flex-direction: row;
@@ -20,30 +20,4 @@
       color: var(--#{$prefix}icon-color);
     }
   }
-
-  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-    &.alert-#{$theme} {
-      --#{$prefix}alert-icon-color: var(--#{$prefix}#{$theme}-500);
-      --#{$prefix}alert-color: var(--#{$prefix}body-color);
-
-      --#{$prefix}alert-bg: var(--#{$prefix}surface-#{$theme});
-      --#{$prefix}alert-border-color: var(--#{$prefix}surface-#{$theme});
-    }
-  }
-
-  &.alert-light {
-    --#{$prefix}alert-icon-color: var(--#{$prefix}gray-500);
-    --#{$prefix}alert-color: var(--#{$prefix}body-color);
-
-    --#{$prefix}alert-bg: var(--#{$prefix}surface-gray);
-    --#{$prefix}alert-border-color: var(--#{$prefix}surface-gray);
-  }
-
-  &.alert-dark {
-    --#{$prefix}alert-icon-color: var(--#{$prefix}light);
-    --#{$prefix}alert-color: var(--#{$prefix}white);
-
-    --#{$prefix}alert-bg: var(--#{$prefix}gray-500);
-    --#{$prefix}alert-border-color: var(--#{$prefix}gray-500);
-  }
 }

package/src/style/base/_badge.scss

@@ -3,15 +3,17 @@
   --#{$prefix}badge-icon-size: #{$badge-font-size};
   --#{$prefix}badge-bg: #{$badge-bg};
   --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-sm-font-size: var(--#{$prefix}fs-body-small);
+  --#{$prefix}badge-lg-font-size: var(--#{$prefix}fs-body-large);
 
   display: inline-flex;
   gap: var(--#{$prefix}badge-gap);
+  align-items: center;
   color: var(--#{$prefix}badge-color);
-
   background-color: var(--#{$prefix}badge-bg);
 
   .d-icon {
-    --#{$prefix}icon-size: var(--#{$prefix}badge-icon-size);
+    --#{$prefix}icon-size: .75rem;
   }
 
   @each $theme, $value in map-remove($theme-colors, "light") {
@@ -23,23 +25,58 @@
     }
   }
 
-  &.badge-light {
-    --#{$prefix}badge-bg: var(--#{$prefix}gray-200);
+
+  &.badge-sm {
+    --#{$prefix}badge-font-size: var(--#{$prefix}badge-sm-font-size);
+  }
+
+  &.badge-lg {
+    --#{$prefix}badge-font-size: var(--#{$prefix}badge-lg-font-size);
+  }
+
+  &.badge-secondary {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-100);
     --#{$prefix}badge-color: var(--#{$prefix}gray-900);
   }
 
-  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-    $color: color-contrast-var($value);
+  &.badge-light {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-25);
+    --#{$prefix}badge-color: var(--#{$prefix}gray-700);
+  }
 
-    &.badge-soft-#{$theme} {
-      --#{$prefix}badge-bg: var(--#{$prefix}surface-#{$theme});
-      --#{$prefix}badge-color: var(--#{$prefix}body-color);
-    }
+  &.badge-soft-primary {
+    --#{$prefix}badge-bg: var(--#{$prefix}primary-50);
+    --#{$prefix}badge-color: var(--#{$prefix}primary-700);
+  }
+
+  &.badge-soft-secondary {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-50);
+    --#{$prefix}badge-color: var(--#{$prefix}gray-700);
+  }
+
+  &.badge-soft-success {
+    --#{$prefix}badge-bg: var(--#{$prefix}success-50);
+    --#{$prefix}badge-color: var(--#{$prefix}success-700);
+  }
+
+  &.badge-soft-warning {
+    --#{$prefix}badge-bg: var(--#{$prefix}warning-50);
+    --#{$prefix}badge-color: var(--#{$prefix}warning-800);
+  }
+
+  &.badge-soft-info {
+    --#{$prefix}badge-bg: var(--#{$prefix}info-50);
+    --#{$prefix}badge-color: var(--#{$prefix}info-700);
+  }
+
+  &.badge-soft-danger {
+    --#{$prefix}badge-bg: var(--#{$prefix}danger-50);
+    --#{$prefix}badge-color: var(--#{$prefix}danger-700);
   }
 
   &.badge-soft-light {
-    --#{$prefix}badge-bg: var(--#{$prefix}gray-700);
-    --#{$prefix}badge-color: var(--#{$prefix}white);
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-25);
+    --#{$prefix}badge-color: var(--#{$prefix}gray-500);
   }
 
   &.badge-soft-dark {
@@ -47,3 +84,4 @@
     --#{$prefix}badge-color: var(--#{$prefix}body-color);
   }
 }
+