@dynamic-framework/ui-react 1.5.0 → 1.7.0

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

@@ -0,0 +1,55 @@
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+// scss-docs-start btn-variables
+$btn-color: var(--#{$prefix}body-color) !default;
+$btn-padding-y: .875rem !default;
+$btn-padding-x: $spacer-4 !default;
+$btn-font-family: $input-btn-font-family !default;
+$btn-font-size: $input-btn-font-size !default;
+$btn-line-height: 1rem !default;
+$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: .625rem !default;
+$btn-padding-x-sm: $spacer-4 !default;
+$btn-font-size-sm: $small-font-size !default;
+
+$btn-padding-y-lg: 1.125rem !default;
+$btn-padding-x-lg: $spacer-4 !default;
+$btn-font-size-lg: $h6-font-size !default;
+
+$btn-border-width: 2px !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: none !default;
+$btn-focus-width: 0 !default;
+$btn-focus-box-shadow: none !default;
+$btn-disabled-opacity: .5 !default;
+$btn-active-box-shadow: none !default;
+
+$btn-link-color: var(--#{$prefix}link-color) !default;
+$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
+$btn-link-disabled-color: $gray-600 !default;
+
+// custom
+$btn-link-padding-y: $spacer-2 !default;
+$btn-link-padding-x: $spacer-2 !default;
+$btn-link-font-size-sm: $small-font-size !default;
+// end custom
+
+$btn-border-radius: $border-radius-sm !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+
+$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount: 15% !default;
+$btn-hover-bg-tint-amount: 15% !default;
+$btn-hover-border-shade-amount: 20% !default;
+$btn-hover-border-tint-amount: 10% !default;
+$btn-active-bg-shade-amount: 20% !default;
+$btn-active-bg-tint-amount: 20% !default;
+$btn-active-border-shade-amount: 25% !default;
+$btn-active-border-tint-amount: 10% !default;
+// scss-docs-end btn-variables

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

@@ -0,0 +1,23 @@
+// Cards
+
+// scss-docs-start card-variables
+$card-spacer-y: $spacer !default;
+$card-spacer-x: $spacer !default;
+$card-title-spacer-y: $spacer * .5 !default;
+$card-title-color: null !default;
+$card-subtitle-color: null !default;
+$card-border-width: var(--#{$prefix}border-width) !default;
+$card-border-color: var(--#{$prefix}border-color-translucent) !default;
+$card-border-radius: var(--#{$prefix}border-radius) !default;
+$card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y: $card-spacer-y * .5 !default;
+$card-cap-padding-x: $card-spacer-x !default;
+$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
+$card-cap-color: null !default;
+$card-height: null !default;
+$card-color: null !default;
+$card-bg: var(--#{$prefix}body-bg) !default;
+$card-img-overlay-padding: $spacer !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
+// scss-docs-end card-variables

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

@@ -0,0 +1,37 @@
+// Carousel
+
+// scss-docs-start carousel-variables
+$carousel-control-color: var(--#{$prefix}white) !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-hover-opacity: .9 !default;
+$carousel-control-transition: opacity .15s ease !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-opacity: .5 !default;
+$carousel-indicator-active-bg: var(--#{$prefix}white) !default;
+$carousel-indicator-active-opacity: 1 !default;
+$carousel-indicator-transition: opacity .6s ease !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: var(--#{$prefix}white) !default;
+$carousel-caption-padding-y: 1.25rem !default;
+$carousel-caption-spacer: 1.25rem !default;
+
+$carousel-control-icon-width: 2rem !default;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
+
+$carousel-transition-duration: .6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+// scss-docs-end carousel-variables
+
+// scss-docs-start carousel-dark-variables
+$carousel-dark-indicator-active-bg: var(--#{$prefix}black) !default;
+$carousel-dark-caption-color: var(--#{$prefix}black) !default;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
+// scss-docs-end carousel-dark-variables

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

@@ -0,0 +1,13 @@
+// Badges
+
+// scss-docs-start chip-variables
+$chip-gap: $spacer-1 !default;
+$chip-bg: var(--#{$prefix}white) !default;
+$chip-color: var(--#{$prefix}gray-900) !default;
+$chip-border-radius: $border-radius-pill !default;
+$chip-padding-x: $spacer-2 !default;
+$chip-padding-y: $spacer-1 !default;
+$chip-font-size: $small-font-size !default;
+$chip-font-weight: $font-weight-bold !default;
+$chip-line-height: $line-height-base * 1rem !default;
+// scss-docs-end chip-variables

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

@@ -0,0 +1,16 @@
+// Close
+
+// scss-docs-start close-variables
+$btn-close-width: auto !default;
+$btn-close-height: auto !default;
+$btn-close-padding-x: 0 !default;
+$btn-close-padding-y: 0 !default;
+$btn-close-color: var(--#{$prefix}black) !default;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+$btn-close-focus-shadow: none !default;
+$btn-close-opacity: 1 !default;
+$btn-close-hover-opacity: 1 !default;
+$btn-close-focus-opacity: 1 !default;
+$btn-close-disabled-opacity: .25 !default;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables

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

@@ -0,0 +1,16 @@
+// Code
+
+$code-font-size: $small-font-size !default;
+// custom
+$code-color-mapping: "primary" !default;
+$code-color: map-get($all-colors, $code-color-mapping) !default;
+// end custom
+
+$kbd-padding-y: .1875rem !default;
+$kbd-padding-x: .375rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: var(--#{$prefix}body-bg) !default;
+$kbd-bg: var(--#{$prefix}body-color) !default;
+$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
+
+$pre-color: null !default;

package/src/style/abstracts/variables/_collapse-icon-text.scss

@@ -1,3 +1,3 @@
-$collapse-icon-text-header-gap: $spacer-3 !default;
-$collapse-icon-text-header-font-size: $h6-font-size !default;
-$collapse-icon-text-header-font-weight: $font-weight-bold !default;
+$collapse-icon-text-header-gap: var(--#{$prefix}ref-spacer-3) !default;
+$collapse-icon-text-header-font-size: var(--#{$prefix}ref-fs-6) !default;
+$collapse-icon-text-header-font-weight: var(--#{$prefix}ref-fw-bold) !default;

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

@@ -0,0 +1,515 @@
+// Color system
+
+// scss-docs-start gray-color-variables
+$white: #fff !default;
+$gray-100: #f7f7ff !default;
+$gray-200: #e6e6f3 !default;
+$gray-300: #d5d4e6 !default;
+$gray-400: #a1a1b5 !default;
+$gray-500: #6d6d82 !default;
+$gray-600: #616173 !default;
+$gray-700: #555564 !default;
+$gray-800: #363744 !default;
+$gray-900: #161723 !default;
+$black: #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #366ddb !default;
+$indigo: #4848b7 !default;
+$purple: #525298 !default;
+$pink: #e60063 !default;
+$red: #d81b60 !default;
+$orange: #d32f2f !default;
+$yellow: #fbc02d !default;
+$green: #028759 !default;
+$teal: #20c997 !default;
+$cyan: #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+  "black": $black,
+  "white": $white,
+  "gray": $gray-500,
+  "gray-dark": $gray-800,
+) !default;
+// scss-docs-end colors-map
+
+// custom
+// TODO: check this.
+$bg-gray-soft: #fafafa !default;
+$bg-primary-soft: #fff9fa !default;
+$bg-secondary-soft: #fbfaff !default;
+
+$bg-soft-colors: (
+  "gray-soft": $bg-gray-soft,
+  "primary-soft": $bg-primary-soft,
+  "secondary-soft": $bg-secondary-soft,
+) !default;
+// end custom
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: $gray-900 !default;
+$color-contrast-light: $white !default;
+
+// fusv-disable
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
+$blue-500: $blue !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
+
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
+
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
+$purple-500: $purple !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
+
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
+$pink-500: $pink !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
+
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
+$red-500: $red !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
+
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
+$orange-500: $orange !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
+
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
+
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
+$green-500: $green !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
+
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
+$teal-500: $teal !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
+
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+  "blue-100": $blue-100,
+  "blue-200": $blue-200,
+  "blue-300": $blue-300,
+  "blue-400": $blue-400,
+  "blue-500": $blue-500,
+  "blue-600": $blue-600,
+  "blue-700": $blue-700,
+  "blue-800": $blue-800,
+  "blue-900": $blue-900
+) !default;
+
+$indigos: (
+  "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
+) !default;
+
+$purples: (
+  "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
+) !default;
+
+$pinks: (
+  "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
+) !default;
+
+$reds: (
+  "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
+) !default;
+
+$oranges: (
+  "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
+) !default;
+
+$yellows: (
+  "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
+) !default;
+
+$greens: (
+  "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
+) !default;
+
+$teals: (
+  "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
+) !default;
+
+$cyans: (
+  "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;
+// fusv-enable
+
+// custom
+// theme <- colors mapping.
+$theme-colors-mapping: (
+  "primary": "red",
+  "secondary": "indigo",
+  "success": "green",
+  "info": "blue",
+  "warning": "yellow",
+  "danger": "orange",
+  "light": "gray-100",
+  "dark": "gray-900"
+) !default;
+// end custom
+
+// scss-docs-start theme-color-variables
+$primary: $red !default;
+$secondary: $indigo !default;
+$success: $green !default;
+$info: $blue !default;
+$warning: $yellow !default;
+$danger: $orange !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+// scss-docs-end theme-color-variables
+
+// scss-docs-start theme-colors-map
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark
+) !default;
+// scss-docs-end theme-colors-map
+
+// TODO: check this.
+$state-colors: (
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+) !default;
+
+// scss-docs-start theme-text-variables
+$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;
+$danger-text-emphasis: var(--#{$prefix}danger-600) !default;
+$light-text-emphasis: var(--#{$prefix}gray-600) !default;
+$dark-text-emphasis: var(--#{$prefix}gray-600) !default;
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$primary-bg-subtle: var(--#{$prefix}primary-100) !default;
+$secondary-bg-subtle: var(--#{$prefix}secondary-100) !default;
+$success-bg-subtle: var(--#{$prefix}success-100) !default;
+$info-bg-subtle: var(--#{$prefix}info-100) !default;
+$warning-bg-subtle: var(--#{$prefix}warning-100) !default;
+$danger-bg-subtle: var(--#{$prefix}danger-100) !default;
+$light-bg-subtle: var(--#{$prefix}gray-100) !default;
+$dark-bg-subtle: var(--#{$prefix}gray-400) !default;
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$primary-border-subtle: var(--#{$prefix}primary-100) !default;
+$secondary-border-subtle: var(--#{$prefix}secondary-100) !default;
+$success-border-subtle: var(--#{$prefix}success-100) !default;
+$info-border-subtle: var(--#{$prefix}info-100) !default;
+$warning-border-subtle: var(--#{$prefix}warning-100) !default;
+$danger-border-subtle: var(--#{$prefix}danger-100) !default;
+$light-border-subtle: var(--#{$prefix}gray-100) !default;
+$dark-border-subtle: var(--#{$prefix}gray-400) !default;
+// scss-docs-end theme-border-subtle-variables
+
+$primary-100: $red-100 !default;
+$primary-200: $red-200 !default;
+$primary-300: $red-300 !default;
+$primary-400: $red-400 !default;
+$primary-500: $red-500 !default;
+$primary-600: $red-600 !default;
+$primary-700: $red-700 !default;
+$primary-800: $red-800 !default;
+$primary-900: $red-900 !default;
+
+$secondary-100: $indigo-100 !default;
+$secondary-200: $indigo-200 !default;
+$secondary-300: $indigo-300 !default;
+$secondary-400: $indigo-400 !default;
+$secondary-500: $indigo-500 !default;
+$secondary-600: $indigo-600 !default;
+$secondary-700: $indigo-700 !default;
+$secondary-800: $indigo-800 !default;
+$secondary-900: $indigo-900 !default;
+
+$success-100: $green-100 !default;
+$success-200: $green-200 !default;
+$success-300: $green-300 !default;
+$success-400: $green-400 !default;
+$success-500: $green-500 !default;
+$success-600: $green-600 !default;
+$success-700: $green-700 !default;
+$success-800: $green-800 !default;
+$success-900: $green-900 !default;
+
+$info-100: $blue-100 !default;
+$info-200: $blue-200 !default;
+$info-300: $blue-300 !default;
+$info-400: $blue-400 !default;
+$info-500: $blue-500 !default;
+$info-600: $blue-600 !default;
+$info-700: $blue-700 !default;
+$info-800: $blue-800 !default;
+$info-900: $blue-900 !default;
+
+$warning-100: $yellow-100 !default;
+$warning-200: $yellow-200 !default;
+$warning-300: $yellow-300 !default;
+$warning-400: $yellow-400 !default;
+$warning-500: $yellow-500 !default;
+$warning-600: $yellow-600 !default;
+$warning-700: $yellow-700 !default;
+$warning-800: $yellow-800 !default;
+$warning-900: $yellow-900 !default;
+
+$danger-100: $orange-100 !default;
+$danger-200: $orange-200 !default;
+$danger-300: $orange-300 !default;
+$danger-400: $orange-400 !default;
+$danger-500: $orange-500 !default;
+$danger-600: $orange-600 !default;
+$danger-700: $orange-700 !default;
+$danger-800: $orange-800 !default;
+$danger-900: $orange-900 !default;
+
+$theme-colors-palletes: (
+  "primary-100": $primary-100,
+  "primary-200": $primary-200,
+  "primary-300": $primary-300,
+  "primary-400": $primary-400,
+  "primary-500": $primary-500,
+  "primary-600": $primary-600,
+  "primary-700": $primary-700,
+  "primary-800": $primary-800,
+  "primary-900": $primary-900,
+  "secondary-100": $secondary-100,
+  "secondary-200": $secondary-200,
+  "secondary-300": $secondary-300,
+  "secondary-400": $secondary-400,
+  "secondary-500": $secondary-500,
+  "secondary-600": $secondary-600,
+  "secondary-700": $secondary-700,
+  "secondary-800": $secondary-800,
+  "secondary-900": $secondary-900,
+  "success-100": $success-100,
+  "success-200": $success-200,
+  "success-300": $success-300,
+  "success-400": $success-400,
+  "success-500": $success-500,
+  "success-600": $success-600,
+  "success-700": $success-700,
+  "success-800": $success-800,
+  "success-900": $success-900,
+  "info-100": $info-100,
+  "info-200": $info-200,
+  "info-300": $info-300,
+  "info-400": $info-400,
+  "info-500": $info-500,
+  "info-600": $info-600,
+  "info-700": $info-700,
+  "info-800": $info-800,
+  "info-900": $info-900,
+  "warning-100": $warning-100,
+  "warning-200": $warning-200,
+  "warning-300": $warning-300,
+  "warning-400": $warning-400,
+  "warning-500": $warning-500,
+  "warning-600": $warning-600,
+  "warning-700": $warning-700,
+  "warning-800": $warning-800,
+  "warning-900": $warning-900,
+  "danger-100": $danger-100,
+  "danger-200": $danger-200,
+  "danger-300": $danger-300,
+  "danger-400": $danger-400,
+  "danger-500": $danger-500,
+  "danger-600": $danger-600,
+  "danger-700": $danger-700,
+  "danger-800": $danger-800,
+  "danger-900": $danger-900,
+) !default;
+
+$palette-grays: map-prev-key($grays, "gray") !default;
+
+$all-colors: map-merge-multiple(
+  $colors,
+  $theme-colors,
+  $palette-grays,
+  $theme-colors-palletes,
+  (
+    "black": $black,
+    "white": $white,
+  )
+) !default;