@dynamic-framework/ui-react 1.36.2 → 2.0.0-dev.10

package/src/style/abstracts/_mixins.scss

@@ -44,12 +44,12 @@
 @mixin df-button-outline-variant-variables(
   $color-name,
   $default-color: var(--#{$prefix}#{$color-name}-500),
-  $hover-bg-color: var(--#{$prefix}#{$color-name}-600),
-  $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
-  $focus-bg-color: var(--#{$prefix}#{$color-name}-600),
-  $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
-  $active-bg-color: var(--#{$prefix}#{$color-name}-700),
-  $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
+  $default-border-color: $default-color,
+  $hover-color: var(--#{$prefix}#{$color-name}-600),
+  $hover-border-color: $hover-color,
+  $focus-color: $hover-color,
+  $active-color: var(--#{$prefix}#{$color-name}-700),
+  $active-border-color: $active-color,
   $disabled-opacity: $btn-disabled-opacity,
   $box-shadow: $btn-box-shadow,
   $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
@@ -57,21 +57,21 @@
 ) {
   --#{$prefix}btn-outline-#{$color-name}-color: #{$default-color};
   --#{$prefix}btn-outline-#{$color-name}-bg: transparent;
-  --#{$prefix}btn-outline-#{$color-name}-border-color: #{$default-color};
+  --#{$prefix}btn-outline-#{$color-name}-border-color: #{$default-border-color};
   --#{$prefix}btn-outline-#{$color-name}-box-shadow: #{$box-shadow};
 
-  --#{$prefix}btn-outline-#{$color-name}-hover-color: #{$hover-text-color};
-  --#{$prefix}btn-outline-#{$color-name}-hover-bg: #{$hover-bg-color};
-  --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$hover-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-hover-color: #{$hover-color};
+  --#{$prefix}btn-outline-#{$color-name}-hover-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$hover-border-color};
 
-  --#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-text-color};
-  --#{$prefix}btn-outline-#{$color-name}-focus-bg: #{$focus-bg-color};
-  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$focus-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-color};
+  --#{$prefix}btn-outline-#{$color-name}-focus-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$focus-color};
   --#{$prefix}btn-outline-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
 
-  --#{$prefix}btn-outline-#{$color-name}-active-color: #{$active-text-color};
-  --#{$prefix}btn-outline-#{$color-name}-active-bg: #{$active-bg-color};
-  --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-bg-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-color: #{$active-color};
+  --#{$prefix}btn-outline-#{$color-name}-active-bg: transparent;
+  --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-border-color};
   --#{$prefix}btn-outline-#{$color-name}-active-box-shadow: #{$active-box-shadow};
 
   --#{$prefix}btn-outline-#{$color-name}-disabled-color: #{$default-color};
@@ -120,6 +120,24 @@
 }
 // scss-docs-end df-btn-link-variant-variables-mixin
 
+@mixin df-button-variant-outline-mapper($color-name) {
+  --#{$prefix}btn-color: var(--#{$prefix}btn-outline-#{$color-name}-color);
+  --#{$prefix}btn-border-color: var(--#{$prefix}btn-outline-#{$color-name}-border-color);
+
+  --#{$prefix}btn-hover-color: var(--#{$prefix}btn-outline-#{$color-name}-hover-color);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-outline-#{$color-name}-hover-border-color);
+  --#{$prefix}btn-active-color: var(--#{$prefix}btn-outline-#{$color-name}-active-color);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-outline-#{$color-name}-active-border-color);
+
+  --#{$prefix}btn-focus-color: var(--#{$prefix}btn-outline-#{$color-name}-focus-color);
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-outline-#{$color-name}-focus-shadow-rgb);
+
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-outline-#{$color-name}-disabled-border-color);
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-outline-#{$color-name}-disabled-color);
+}
+
 // scss-docs-start df-btn-variant-mixin
 @mixin df-button-variant-mapper($color-name, $variant-name: "") {
   @if $variant-name != "" {
@@ -149,12 +167,6 @@
   --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-bg);
   --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-border-color);
   --#{$prefix}btn-disabled-opacity: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-opacity);
-
-  &.loading {
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
-    --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
-  }
 }
 // scss-docs-end df-btn-variant-mixin
 
@@ -170,7 +182,7 @@
     --#{$prefix}table-striped-color: #{$color};
     --#{$prefix}table-active-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-active-bg-factor})")};
     --#{$prefix}table-active-color: #{$color};
-    --#{$prefix}table-hover-bg: #{unquote("color-mix(in srgb, var(--#{$prefix}#{$background}), var(--#{$prefix}white) #{(100% - $table-bg-scale) * $table-hover-bg-factor})")};
+    --#{$prefix}table-hover-bg: var(--#{$prefix}gray-25);
     --#{$prefix}table-hover-color: #{$color};
 
     color: var(--#{$prefix}table-color);

package/src/style/abstracts/_utilities.scss

@@ -30,7 +30,7 @@ $utilities: map-merge(
         values: map-merge(
           map-get(map-get($utilities, "background-color"), "values"),
           map-loop(
-            map-merge-multiple($theme-colors-palettes, $palette-grays, $bg-surface-colors, $bg-soft-colors),
+            map-merge-multiple($theme-colors-palettes, $palette-grays),
             rgba-css-var,
             "$key",
             "bg"
@@ -66,6 +66,12 @@ $utilities: map-merge(
         responsive: true
       )
     ),
+    "position": map-merge(
+      map-get($utilities, "position"),
+      (
+        responsive: true
+      )
+    ),
     "border-color": map-merge(
       map-get($utilities, "border-color"),
       (
@@ -75,6 +81,25 @@ $utilities: map-merge(
         )
       )
     ),
+    "grid-column": (
+      class: "g-col",
+      property: grid-column,
+      responsive: true,
+      values: (
+        13: auto/span 13,
+        14: auto/span 14,
+        15: auto/span 15,
+        16: auto/span 16,
+        17: auto/span 17,
+        18: auto/span 18,
+        19: auto/span 19,
+        20: auto/span 20,
+        21: auto/span 21,
+        22: auto/span 22,
+        23: auto/span 23,
+        24: auto/span 24
+      )
+    ),
     "overlay": (
       property: opacity,
       class: "overlay",
@@ -130,6 +155,50 @@ $utilities: map-merge(
         responsive: true,
       )
     ),
+    "v-align": (
+      property: vertical-align,
+      responsive: true,
+      class: "v-align",
+      values: (
+        baseline: baseline,
+        top: top,
+        bottom: bottom,
+        text-top: text-top,
+        text-bottom: text-bottom,
+        sub: sub,
+        super: super,
+        middle: middle,
+      )
+    ),
+    "display": (
+      property: display,
+      responsive: true,
+      class: "d",
+      values: (
+        inline: inline,
+        inline-block: inline-block,
+        block: block,
+        table: table,
+        table-row: table-row,
+        table-cell: table-cell,
+        flex: flex,
+        inline-flex: inline-flex,
+        none: none,
+        grid: grid,
+        table-header-group: table-header-group,
+      )
+    ),
+    "text-wrap": (
+      property: text-wrap,
+      responsive: true,
+      class: "text-wrap",
+      values: (
+        balance: balance,
+        normal: normal,
+        truncate: truncate,
+        wrap: wrap
+      )
+    ),
     "body-font-size": (
       class: "fs-body",
       responsive: true,

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

@@ -19,9 +19,9 @@ $focus-ring-width: .25rem !default;
 $focus-ring-opacity: .25 !default;
 $focus-ring-blur: 0 !default;
 // custom
-$focus-ring-border-color: var(--#{$prefix}secondary-300-rgb) !default;
+$focus-ring-border-color: transparent !default;
 $focus-ring-color-mapping: "secondary-rgb" !default;
-$focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
+$focus-ring-color: var(--#{$prefix}gray-100) !default;
 // end custom
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
@@ -66,6 +66,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "buttons";
 @import "forms";
 @import "z-index";
+@import "shadow";
 @import "navs";
 @import "navbar";
 @import "dropdowns";

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

@@ -13,5 +13,7 @@ $alert-color-scale: 100% !default;
 // custom
 $alert-gap: var(--#{$prefix}ref-spacer-4) !default;
 $alert-close-icon-size: var(--#{$prefix}ref-spacer-4) !default;
+
+
 // end custom
 // scss-docs-end alert-variables

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

@@ -5,8 +5,16 @@
 // custom
 $body-color-mapping: "gray-900" !default;
 $body-color: map-get($all-colors, $body-color-mapping) !default;
-$body-bg-mapping: "secondary-soft" !default;
-$body-bg: map-get($all-colors, $body-bg-mapping) !default;
+
+// $body-bg-mapping: "secondary-soft" !default;
+// $body-bg: map-get($all-colors, $body-bg-mapping) !default;
+// Se mapeaba a la variable css
+// Al final quedaba: --bs-secondary-soft-rgb
+
+// WIP: Se asigna el color manualmente
+// este color no existe en la paleta de grises
+// ¿Se tendría que agregar?
+$body-bg: #f5f6fa !default;
 
 $body-secondary-color: var(--#{$prefix}body-color-rgb) !default;
 $body-secondary-bg: var(--#{$prefix}gray-200) !default;
@@ -29,4 +37,3 @@ $link-hover-color: map-get($all-colors, $link-hover-color-mapping) !default;
 // end custom
 
 $link-decoration: none !default;
-$link-hover-decoration: underline !default;

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

@@ -8,10 +8,10 @@ $border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius: 1rem !default;
-$border-radius-sm: .5rem !default;
-$border-radius-lg: 1.5rem !default;
-$border-radius-xl: 2rem !default;
-$border-radius-xxl: 2.5rem !default;
+$border-radius: .5rem !default;
+$border-radius-sm: .25rem !default;
+$border-radius-lg: 1rem !default;
+$border-radius-xl: 1.5rem !default;
+$border-radius-xxl: 2rem !default;
 $border-radius-pill: 50rem !default;
 // scss-docs-end border-radius-variables

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

@@ -4,17 +4,18 @@
 
 // scss-docs-start btn-variables
 $btn-color: var(--#{$prefix}body-color) !default;
-$btn-padding-y: $spacer-3 !default;
-$btn-padding-x: $spacer-8 !default;
-$btn-line-height: 1 !default;
+$btn-padding-y: $spacer-2 !default;
+$btn-padding-x: $spacer-4 !default;
+$btn-line-height: 1.5 !default;
+$btn-font-weight: $font-weight-semibold !default;
 
-$btn-padding-y-sm: $spacer-2 !default;
-$btn-padding-x-sm: $spacer-4 !default;
+$btn-padding-y-sm: $spacer-1 !default;
+$btn-padding-x-sm: $spacer-3 !default;
 $btn-font-size-sm: $small-font-size !default;
 
-$btn-padding-y-lg: $spacer-4 !default;
-$btn-padding-x-lg: $spacer-8 !default;
-$btn-font-size-lg: $h6-font-size !default;
+$btn-padding-y-lg: $spacer-3 !default;
+$btn-padding-x-lg: $spacer-5 !default;
+$btn-lg-font-size: 1.15rem !default;
 
 $btn-border-width: $input-btn-border-width !default;
 
@@ -22,9 +23,16 @@ $btn-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstr
 $btn-disabled-opacity: .65 !default;
 $btn-active-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
 
-$btn-border-radius: var(--#{$prefix}border-radius-pill) !default;
-$btn-border-radius-sm: var(--#{$prefix}border-radius-pill) !default;
-$btn-border-radius-lg: var(--#{$prefix}border-radius-pill) !default;
+$btn-border-radius: .5rem !default;
+$btn-border-radius-lg: .5rem !default;
+$btn-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1) !default;
+$btn-border-radius-sm: .25rem !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;
 // scss-docs-end btn-variables
+
+$btn-outline-primary-hover-color: inherit !default;
+$btn-outline-primary-hover-bg: transparent !default;
+$btn-outline-primary-focus-bg: transparent !default;
+
+$btn-loading-gap: var(--#{$prefix}ref-spacer-2) !default;

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

@@ -1,9 +1,11 @@
 // Cards
 
 // scss-docs-start card-variables
-$card-border-width: 0px !default;
-$card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 $card-bg: var(--#{$prefix}white) !default;
-$card-spacer-y: $spacer-6 !default;
-$card-spacer-x: $spacer-6 !default;
+$card-spacer-y: $spacer-4 !default;
+$card-spacer-x: $spacer-4 !default;
+$card-cap-padding-y: $spacer-4 !default;
+$card-cap-bg: transparent !default;
+$card-border-color: var(--#{$prefix}gray-50) !default;
+
 // scss-docs-end card-variables

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

@@ -5,9 +5,9 @@ $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-x: $spacer-3 !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 * $spacer-4 !default;
+$chip-line-height: $line-height-base !default;
 // scss-docs-end chip-variables

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,30 +339,30 @@ $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
 
 // scss-docs-start theme-colors-map
-$theme-colors: (
+$theme-colors-base: (
   "primary": $primary,
   "secondary": $secondary,
   "success": $success,
@@ -370,8 +370,22 @@ $theme-colors: (
   "warning": $warning,
   "danger": $danger,
   "light": $light,
-  "dark": $dark
+  "dark": $dark,
 ) !default;
+
+$theme-colors-extra: (
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+) !default;
+
+$theme-colors: map-merge($theme-colors-base, $theme-colors-extra) !default;
 // scss-docs-end theme-colors-map
 
 // TODO: check this.
@@ -387,7 +401,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 +429,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 +501,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 +569,106 @@ $theme-colors-palettes: (
   "danger-700": $danger-700,
   "danger-800": $danger-800,
   "danger-900": $danger-900,
+  // extras colors
+  "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;