@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/styles/01-settings/_settings.colors.scss

@@ -1,269 +1,252 @@
-@use "sass:color";
+@use 'sass:color';
 
 @use '../02-tools/tools.to-rgb' as *;
 @use '../02-tools/tools.color-functions' as *;
 
-// Basic Colors 
-$white:                         #ffffff !default;
-$black:                         #000000 !default;
+// Basic Colors
+$white: #ffffff !default;
+$black: #000000 !default;
 
 // Color contrast variables
-$color-contrast-dark:          #000000 !default;
-$color-contrast-light:         #ffffff !default;
+$color-contrast-dark: #000000 !default;
+$color-contrast-light: #ffffff !default;
 
 // Primitives Primary Colors
-$primary-1:                     #F2E8FD !default;
-$primary-2:                     #E4D0FA !default;
-$primary-3:                     #D0B2F5 !default;
-$primary-4:                     #B88CEF !default;
-$primary-5:                     #9C63E9 !default;
-$primary-6:                     #7C3AED !default; // Balanced primary purple
-$primary-7:                     #6425CA !default;
-$primary-8:                     #501BA6 !default;
-$primary-9:                     #3C1583 !default;
-$primary-10:                    #2A0E60 !default;
+$primary-1: #f2e8fd !default;
+$primary-2: #e4d0fa !default;
+$primary-3: #d0b2f5 !default;
+$primary-4: #b88cef !default;
+$primary-5: #9c63e9 !default;
+$primary-6: #7c3aed !default; // Balanced primary purple
+$primary-7: #6425ca !default;
+$primary-8: #501ba6 !default;
+$primary-9: #3c1583 !default;
+$primary-10: #2a0e60 !default;
 
 // Primitives Red Colors
-$red-1:                         #FEF2F2 !default;
-$red-2:                         #FEE2E2 !default;
-$red-3:                         #FECACA !default;
-$red-4:                         #FCA5A5 !default;
-$red-5:                         #F87171 !default;
-$red-6:                         #EF4444 !default; // Vibrant, accessible red
-$red-7:                         #DC2626 !default;
-$red-8:                         #B91C1C !default;
-$red-9:                         #991B1B !default;
-$red-10:                        #7F1D1D !default;
+$red-1: #fef2f2 !default;
+$red-2: #fee2e2 !default;
+$red-3: #fecaca !default;
+$red-4: #fca5a5 !default;
+$red-5: #f87171 !default;
+$red-6: #ef4444 !default; // Vibrant, accessible red
+$red-7: #dc2626 !default;
+$red-8: #b91c1c !default;
+$red-9: #991b1b !default;
+$red-10: #7f1d1d !default;
 
 // Primitives Green Colors
-$green-1:                       #F0FDF4 !default;
-$green-2:                       #DCFCE7 !default;
-$green-3:                       #BBF7D0 !default;
-$green-4:                       #86EFAC !default;
-$green-5:                       #4ADE80 !default;
-$green-6:                       #22C55E !default; // Balanced, accessible green
-$green-7:                       #16A34A !default;
-$green-8:                       #15803D !default;
-$green-9:                       #166534 !default;
-$green-10:                      #14532D !default;
+$green-1: #f0fdf4 !default;
+$green-2: #dcfce7 !default;
+$green-3: #bbf7d0 !default;
+$green-4: #86efac !default;
+$green-5: #4ade80 !default;
+$green-6: #22c55e !default; // Balanced, accessible green
+$green-7: #16a34a !default;
+$green-8: #15803d !default;
+$green-9: #166534 !default;
+$green-10: #14532d !default;
 
 // Primitives Yellow Colors
-$yellow-1:                      #FEFCE8 !default;
-$yellow-2:                      #FEF9C3 !default;
-$yellow-3:                      #FEF08A !default;
-$yellow-4:                      #FDE047 !default;
-$yellow-5:                      #FACC15 !default;
-$yellow-6:                      #EAB308 !default; // Accessible, high-visibility yellow
-$yellow-7:                      #CA8A04 !default;
-$yellow-8:                      #A16207 !default;
-$yellow-9:                      #854D0E !default;
-$yellow-10:                     #713F12 !default;
+$yellow-1: #fefce8 !default;
+$yellow-2: #fef9c3 !default;
+$yellow-3: #fef08a !default;
+$yellow-4: #fde047 !default;
+$yellow-5: #facc15 !default;
+$yellow-6: #eab308 !default; // Accessible, high-visibility yellow
+$yellow-7: #ca8a04 !default;
+$yellow-8: #a16207 !default;
+$yellow-9: #854d0e !default;
+$yellow-10: #713f12 !default;
 
 // Primitives Blue Colors
-$blue-1:                        #EFF6FF !default;
-$blue-2:                        #DBEAFE !default;
-$blue-3:                        #BFDBFE !default;
-$blue-4:                        #93C5FD !default;
-$blue-5:                        #60A5FA !default;
-$blue-6:                        #3B82F6 !default; // Balanced, accessible blue
-$blue-7:                        #2563EB !default;
-$blue-8:                        #1D4ED8 !default;
-$blue-9:                        #1E40AF !default;
-$blue-10:                       #1E3A8A !default;
+$blue-1: #eff6ff !default;
+$blue-2: #dbeafe !default;
+$blue-3: #bfdbfe !default;
+$blue-4: #93c5fd !default;
+$blue-5: #60a5fa !default;
+$blue-6: #3b82f6 !default; // Balanced, accessible blue
+$blue-7: #2563eb !default;
+$blue-8: #1d4ed8 !default;
+$blue-9: #1e40af !default;
+$blue-10: #1e3a8a !default;
 
 // Primitives Gray Colors
-$gray-1:                        #F9FAFB !default;
-$gray-2:                        #F3F4F6 !default;
-$gray-3:                        #E5E7EB !default;
-$gray-4:                        #D1D5DB !default;
-$gray-5:                        #9CA3AF !default;
-$gray-6:                        #6B7280 !default;
-$gray-7:                        #4B5563 !default;
-$gray-8:                        #374151 !default;
-$gray-9:                        #1F2937 !default;
-$gray-10:                       #111827 !default;
+$gray-1: #f9fafb !default;
+$gray-2: #f3f4f6 !default;
+$gray-3: #e5e7eb !default;
+$gray-4: #d1d5db !default;
+$gray-5: #9ca3af !default;
+$gray-6: #6b7280 !default;
+$gray-7: #4b5563 !default;
+$gray-8: #374151 !default;
+$gray-9: #1f2937 !default;
+$gray-10: #111827 !default;
 
 // Primitives Overlay
-$overlay-1:                      rgba(20, 20, 20, 0.302) !default;
-$overlay-2:                      rgba($gray-6, .6) !default;
-
-
-
-
-
+$overlay-1: rgba(20, 20, 20, 0.302) !default;
+$overlay-2: rgba($gray-6, 0.6) !default;
 
 //Text colors emphasis
-$primary-text:                  $gray-10 !default;
-$secondary-text:                $gray-8 !default;
-$tertiary-text:                 $gray-6 !default;
-$disabled-text:                 $gray-5 !default;
-$invert-text:                   $gray-10 !default;
-$brand-text:                    $primary-6 !default;
-$error-text:                    $red-6 !default;
-$success-text:                  $green-6 !default;
-$warning-text:                  $yellow-6 !default;
-$info-text:                     $blue-6 !default;
-$light-text:                    $gray-1 !default;
-$dark-text:                     $gray-9 !default;
+$primary-text: $gray-10 !default;
+$secondary-text: $gray-8 !default;
+$tertiary-text: $gray-6 !default;
+$disabled-text: $gray-5 !default;
+$invert-text: $gray-10 !default;
+$brand-text: $primary-6 !default;
+$error-text: $red-6 !default;
+$success-text: $green-6 !default;
+$warning-text: $yellow-6 !default;
+$info-text: $blue-6 !default;
+$light-text: $gray-1 !default;
+$dark-text: $gray-9 !default;
 
 // Text colors dark emphasis
-$primary-text-dark:             $white !default;
-$secondary-text-dark:           $gray-3 !default;
-$tertiary-text-dark:            $gray-4 !default;
-$disabled-text-dark:            $gray-5 !default;
-$invert-text-dark:              $gray-1 !default;
-$brand-text-dark:               $primary-2 !default;
-$error-text-dark:               $red-3 !default;
-$success-text-dark:             $green-3 !default;
-$warning-text-dark:             $yellow-3 !default;
-$info-text-dark:                $blue-3 !default;
-$light-text-dark:               $gray-1 !default;
-$dark-text-dark:                $gray-8 !default;
-
-
+$primary-text-dark: $white !default;
+$secondary-text-dark: $gray-3 !default;
+$tertiary-text-dark: $gray-4 !default;
+$disabled-text-dark: $gray-5 !default;
+$invert-text-dark: $gray-1 !default;
+$brand-text-dark: $primary-2 !default;
+$error-text-dark: $red-3 !default;
+$success-text-dark: $green-3 !default;
+$warning-text-dark: $yellow-3 !default;
+$info-text-dark: $blue-3 !default;
+$light-text-dark: $gray-1 !default;
+$dark-text-dark: $gray-8 !default;
 
 // Background colors subtle
-$primary-bg:                    $white !default;
-$secondary-bg:                  $gray-3 !default;
-$tertiary-bg:                   $gray-4 !default;
-$invert-bg:                     $gray-10 !default;
-$brand-bg:                      $primary-2 !default;
-$error-bg:                      $red-2 !default;
-$success-bg:                    $green-2 !default;
-$warning-bg:                    $yellow-2 !default;
-$info-bg:                       $blue-2 !default;
-$light-bg:                      $gray-2 !default;
-$dark-bg:                       $gray-9 !default;
+$primary-bg: $white !default;
+$secondary-bg: $gray-3 !default;
+$tertiary-bg: $gray-4 !default;
+$invert-bg: $gray-10 !default;
+$brand-bg: $primary-2 !default;
+$error-bg: $red-2 !default;
+$success-bg: $green-2 !default;
+$warning-bg: $yellow-2 !default;
+$info-bg: $blue-2 !default;
+$light-bg: $gray-2 !default;
+$dark-bg: $gray-9 !default;
 
 // Background colors dark subtle
-$primary-bg-dark:               $gray-9 !default;
-$secondary-bg-dark:             $gray-7 !default;
-$tertiary-bg-dark:              $gray-6 !default;
-$invert-bg-dark:                $white !default;
-$brand-bg-dark:                 $primary-8 !default;
-$error-bg-dark:                 $red-10 !default;
-$success-bg-dark:               $green-9 !default;
-$warning-bg-dark:               $yellow-10 !default;
-$info-bg-dark:                  $blue-10   !default;
-$light-bg-dark:                 $gray-1 !default;
-$dark-bg-dark:                  $gray-8 !default;
-
-
+$primary-bg-dark: $gray-9 !default;
+$secondary-bg-dark: $gray-7 !default;
+$tertiary-bg-dark: $gray-6 !default;
+$invert-bg-dark: $white !default;
+$brand-bg-dark: $primary-8 !default;
+$error-bg-dark: $red-10 !default;
+$success-bg-dark: $green-9 !default;
+$warning-bg-dark: $yellow-10 !default;
+$info-bg-dark: $blue-10 !default;
+$light-bg-dark: $gray-1 !default;
+$dark-bg-dark: $gray-8 !default;
 
 // Border color
-$primary-border:                $gray-3 !default;
-$secondary-border:              $gray-10 !default;
-$brand-border:                  $primary-6 !default;
-$error-border:                  $red-6 !default;
-$success-border:                $green-6 !default;
-$warning-border:                $yellow-6 !default;
-$info-border:                   $blue-6 !default;
-$light-border:                  $gray-1 !default;
-$dark-border:                   $gray-9 !default;
+$primary-border: $gray-3 !default;
+$secondary-border: $gray-10 !default;
+$brand-border: $primary-6 !default;
+$error-border: $red-6 !default;
+$success-border: $green-6 !default;
+$warning-border: $yellow-6 !default;
+$info-border: $blue-6 !default;
+$light-border: $gray-1 !default;
+$dark-border: $gray-9 !default;
 
 // Border color dark
-$primary-border-dark:           $gray-8 !default;
-$secondary-border-dark:         $white !default;
-$brand-border-dark:             $primary-6 !default;
-$error-border-dark:             $red-6 !default;
-$success-border-dark:           $green-6 !default;
-$warning-border-dark:           $yellow-6 !default;
-$info-border-dark:              $blue-6 !default;
-$light-border-dark:             $gray-1 !default;
-$dark-border-dark:              $gray-8 !default;
-
-
+$primary-border-dark: $gray-8 !default;
+$secondary-border-dark: $white !default;
+$brand-border-dark: $primary-6 !default;
+$error-border-dark: $red-6 !default;
+$success-border-dark: $green-6 !default;
+$warning-border-dark: $yellow-6 !default;
+$info-border-dark: $blue-6 !default;
+$light-border-dark: $gray-1 !default;
+$dark-border-dark: $gray-8 !default;
 
 // theme colors
-$primary:                       $primary-6 !default;
-$secondary:                     $gray-2 !default;
-$light:                         $gray-1 !default;
-$dark:                          $gray-9 !default;
-$success:                       $green-6 !default;
-$info:                          $blue-6 !default;
-$warning:                       $yellow-6 !default;
-$error:                         $red-6 !default;
+$primary: $primary-6 !default;
+$secondary: $gray-2 !default;
+$light: $gray-1 !default;
+$dark: $gray-9 !default;
+$success: $green-6 !default;
+$info: $blue-6 !default;
+$warning: $yellow-6 !default;
+$error: $red-6 !default;
 
 // Theme colors Dark
-$primary-dark:                  $primary-6 !default;
-$secondary-dark:                $gray-7 !default;
-$light-dark:                    $gray-1 !default;
-$dark-dark:                     $gray-8 !default;
-$success-dark:                  $green-6 !default;
-$info-dark:                     $blue-6 !default;
-$warning-dark:                  $yellow-6 !default; 
-$error-dark:                    $red-6 !default;        
-
-
-
+$primary-dark: $primary-6 !default;
+$secondary-dark: $gray-7 !default;
+$light-dark: $gray-1 !default;
+$dark-dark: $gray-8 !default;
+$success-dark: $green-6 !default;
+$info-dark: $blue-6 !default;
+$warning-dark: $yellow-6 !default;
+$error-dark: $red-6 !default;
 
 // Theme hover background
-$primary-hover:                 $primary-6 !default;
-$secondary-hover:               $gray-3 !default;
-$light-hover:                   $gray-2 !default;
-$dark-hover:                    $gray-7 !default;
-$success-hover:                 $green-8 !default;
-$info-hover:                    $blue-8 !default;
-$warning-hover:                 $yellow-8 !default;
-$error-hover:                   $red-8 !default;
-
- // Theme hover background for dark theme
-$primary-hover-dark:            $primary-6 !default;
-$secondary-hover-dark:          $gray-6 !default;
-$light-hover-dark:              $gray-5 !default; 
-$dark-hover-dark:               $gray-7 !default;
-$info-hover-dark:               $blue-4 !default;
-$success-hover-dark:            $green-4 !default;
-$warning-hover-dark:            $yellow-5 !default;
-$error-hover-dark:              $red-4 !default;
-
-
-
+$primary-hover: $primary-6 !default;
+$secondary-hover: $gray-3 !default;
+$light-hover: $gray-2 !default;
+$dark-hover: $gray-7 !default;
+$success-hover: $green-8 !default;
+$info-hover: $blue-8 !default;
+$warning-hover: $yellow-8 !default;
+$error-hover: $red-8 !default;
+
+// Theme hover background for dark theme
+$primary-hover-dark: $primary-6 !default;
+$secondary-hover-dark: $gray-6 !default;
+$light-hover-dark: $gray-5 !default;
+$dark-hover-dark: $gray-7 !default;
+$info-hover-dark: $blue-4 !default;
+$success-hover-dark: $green-4 !default;
+$warning-hover-dark: $yellow-5 !default;
+$error-hover-dark: $red-4 !default;
 
 //  Mischelleneous Colors
-$color-contrast-dark:           $black !default;
-$color-contrast-light:          $white !default;
-
-$body-color:                    $primary-text !default;
-$body-bg:                       $primary-bg !default;
-$headings-color:                $primary-text !default;
-$link-color:                    $primary !default;
-$link-decoration:              none !default;
-$link-hover-color:             color.adjust($link-color, $lightness: -15%) !default;
-$link-hover-decoration:        null !default;
-$code-color:                   $red-6 !default;
-$mark-bg:                      $yellow-3 !default;
+$color-contrast-dark: $black !default;
+$color-contrast-light: $white !default;
+
+$body-color: $primary-text !default;
+$body-bg: $primary-bg !default;
+$headings-color: $primary-text !default;
+$link-color: $primary !default;
+$link-decoration: none !default;
+$link-hover-color: color.adjust($link-color, $lightness: -15%) !default;
+$link-hover-decoration: null !default;
+$code-color: $red-6 !default;
+$mark-bg: $yellow-3 !default;
 
 // Form validation colors
-$form-valid-color:             $green-6 !default;
-$form-valid-border-color:      $green-6 !default;
-$form-invalid-color:           $red-6 !default;
-$form-invalid-border-color:    $red-6 !default;
+$form-valid-color: $green-6 !default;
+$form-valid-border-color: $green-6 !default;
+$form-invalid-color: $red-6 !default;
+$form-invalid-border-color: $red-6 !default;
 
-$body-color-dark:               $primary-text-dark !default;
-$body-bg-dark:                  $primary-bg-dark !default;
+$body-color-dark: $primary-text-dark !default;
+$body-bg-dark: $primary-bg-dark !default;
 
 // Border colors for use with components
-$primary-border:                $gray-6 !default;
-$primary-border-dark:           $gray-7 !default;
+$primary-border: $gray-6 !default;
+$primary-border-dark: $gray-7 !default;
 
 // Dark mode colors
-$headings-color-dark:           $gray-3 !default;
-$link-color-dark:               $primary-4 !default;
-$link-hover-color-dark:         color.adjust($link-color-dark, $lightness: -15%) !default;
-$code-color-dark:               $red-5 !default;
+$headings-color-dark: $gray-3 !default;
+$link-color-dark: $primary-4 !default;
+$link-hover-color-dark: color.adjust($link-color-dark, $lightness: -15%) !default;
+$code-color-dark: $red-5 !default;
 $border-color-translucent-dark: rgba($white, 0.15) !default;
 
 // Form validation dark mode colors
-$form-valid-color-dark:         $green-5 !default;
-$form-valid-border-color-dark:  $green-5 !default;
-$form-invalid-color-dark:       $red-5 !default;
+$form-valid-color-dark: $green-5 !default;
+$form-valid-border-color-dark: $green-5 !default;
+$form-invalid-color-dark: $red-5 !default;
 $form-invalid-border-color-dark: $red-5 !default;
 
-$focus-border-color:            $primary-5 !default;
-$focus-border-color-dark:       $primary-4 !default;
+$focus-border-color: $primary-5 !default;
+$focus-border-color-dark: $primary-4 !default;
 
-$component-active-color:        $white !default;
-$component-active-bg:           $primary !default;
+$component-active-color: $white !default;
+$component-active-bg: $primary !default;
 
 // All variables are automatically exported when using @use

package/src/styles/01-settings/_settings.config.scss

@@ -1,6 +1,4 @@
 // These variables must act as constants, hence the uppercase
 $ENV: 'dev';
 
-
-
-$prefix: atomix- !default;
+$prefix: atomix- !default;

package/src/styles/01-settings/_settings.countdown.scss

@@ -1,15 +1,15 @@
-@use "settings.config" as config;
-@use "settings.typography" as typography;
-@use "settings.border-radius" as border-radius;
+@use 'settings.config' as config;
+@use 'settings.typography' as typography;
+@use 'settings.border-radius' as border-radius;
 
-$countdown-color:                          var(--#{config.$prefix}body-color) !default;
-$countdown-font-size:                      typography.$font-size-base !default;
-$countdown-font-weight:                    typography.$font-weight-medium !default;
-$countdown-focused-time-font-size:         typography.$font-size-lg !default;
-$countdown-focused-label-font-size:        typography.$font-size-xs !default; 
-$countdown-focused-border-radius:          border-radius.$border-radius !default;
-$countdown-focused-bg:                     var(--#{config.$prefix}secondary-bg-subtle) !default;
-$countdown-item-padding-x:                  12px !default;
-$countdown-item-padding-y:                  8px !default;
-$countdown-items-gap:                       4px !default;
-$countdown-focused-items-gap:               8px !default;
+$countdown-color: var(--#{config.$prefix}body-color) !default;
+$countdown-font-size: typography.$font-size-base !default;
+$countdown-font-weight: typography.$font-weight-medium !default;
+$countdown-focused-time-font-size: typography.$font-size-lg !default;
+$countdown-focused-label-font-size: typography.$font-size-xs !default;
+$countdown-focused-border-radius: border-radius.$border-radius !default;
+$countdown-focused-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$countdown-item-padding-x: 12px !default;
+$countdown-item-padding-y: 8px !default;
+$countdown-items-gap: 4px !default;
+$countdown-focused-items-gap: 8px !default;

package/src/styles/01-settings/_settings.data-table.scss

@@ -1,9 +1,9 @@
-@use "settings.config" as config;
-@use "settings.colors" as colors;
-@use "settings.border" as border;
-@use "settings.border-radius" as border-radius;
-@use "settings.typography" as typography;
-@use "settings.spacing" as spacing;
+@use 'settings.config' as config;
+@use 'settings.colors' as colors;
+@use 'settings.border' as border;
+@use 'settings.border-radius' as border-radius;
+@use 'settings.typography' as typography;
+@use 'settings.spacing' as spacing;
 
 // DataTable Variables
 $data-table-bg: var(--#{config.$prefix}white) !default;

package/src/styles/01-settings/_settings.datepicker.scss

@@ -2,45 +2,43 @@
 @use 'settings.border-radius' as border-radius;
 @use 'settings.typography' as typography;
 
-$datepicker-padding-x:                    8px !default;
-$datepicker-padding-y:                    12px !default;
-
-$datepicker-bg:                           var(--#{config.$prefix}body-bg);
-$datepicker-color:                        var(--#{config.$prefix}body-color);
-$datepicker-deactivate-color:             var(--#{config.$prefix}tertiary-text-emphasis);
-$datepicker-border-radius:                border-radius.$border-radius-xl !default;
-$datepicker-border-width:                 null !default;
-$datepicker-border-color:                 null !default;
-$datepicker-box-shadow:                   var(--#{config.$prefix}box-shadow);
-
-$datepicker-body-padding-x:                4px !default;
-$datepicker-body-padding-y:                4px !default;
-
-$datepicker-month-font-size:               typography.$font-size-sm !default;
-$datepicker-month-font-weight:             typography.$font-weight-bold !default;
-
-$datepicker-year-font-size:                $datepicker-month-font-size !default;
-$datepicker-year-font-weight:              typography.$font-weight-bold !default;
-
-$datepicker-week-font-size:                typography.$font-size-sm !default;
-$datepicker-week-font-weight:              typography.$font-weight-normal !default;
-$datepicker-week-width:                    40px !default;
-$datepicker-week-height:                   40px !default;   
-
-$datepicker-day-font-size:                 typography.$font-size-sm !default;
-$datepicker-day-font-weight:               typography.$font-weight-normal !default;
-$datepicker-day-width:                     $datepicker-week-width !default;
-$datepicker-day-height:                    $datepicker-week-height !default;    
-$datepicker-day-hover-bg:                  var(--#{config.$prefix}secondary-bg-subtle) !default;
-$datepicker-day-border-radius:             border-radius.$border-radius-pill !default;
-
-$datepicker-today-color:                   var(--#{config.$prefix}brand-text-emphasis);
-
-$datepicker-day-in-range-bg:               var(--#{config.$prefix}brand-bg-subtle);
-$datepicker-day-selected-color:            var(--#{config.$prefix}gray-1);
-$datepicker-day-selected-bg:               var(--#{config.$prefix}primary);
-
-
-$datepicker-width:                         ($datepicker-week-width * 7 ) + ($datepicker-padding-x * 2) + ($datepicker-body-padding-x + $datepicker-body-padding-y)!default;
-
-
+$datepicker-padding-x: 8px !default;
+$datepicker-padding-y: 12px !default;
+
+$datepicker-bg: var(--#{config.$prefix}body-bg);
+$datepicker-color: var(--#{config.$prefix}body-color);
+$datepicker-deactivate-color: var(--#{config.$prefix}tertiary-text-emphasis);
+$datepicker-border-radius: border-radius.$border-radius-xl !default;
+$datepicker-border-width: null !default;
+$datepicker-border-color: null !default;
+$datepicker-box-shadow: var(--#{config.$prefix}box-shadow);
+
+$datepicker-body-padding-x: 4px !default;
+$datepicker-body-padding-y: 4px !default;
+
+$datepicker-month-font-size: typography.$font-size-sm !default;
+$datepicker-month-font-weight: typography.$font-weight-bold !default;
+
+$datepicker-year-font-size: $datepicker-month-font-size !default;
+$datepicker-year-font-weight: typography.$font-weight-bold !default;
+
+$datepicker-week-font-size: typography.$font-size-sm !default;
+$datepicker-week-font-weight: typography.$font-weight-normal !default;
+$datepicker-week-width: 40px !default;
+$datepicker-week-height: 40px !default;
+
+$datepicker-day-font-size: typography.$font-size-sm !default;
+$datepicker-day-font-weight: typography.$font-weight-normal !default;
+$datepicker-day-width: $datepicker-week-width !default;
+$datepicker-day-height: $datepicker-week-height !default;
+$datepicker-day-hover-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$datepicker-day-border-radius: border-radius.$border-radius-pill !default;
+
+$datepicker-today-color: var(--#{config.$prefix}brand-text-emphasis);
+
+$datepicker-day-in-range-bg: var(--#{config.$prefix}brand-bg-subtle);
+$datepicker-day-selected-color: var(--#{config.$prefix}gray-1);
+$datepicker-day-selected-bg: var(--#{config.$prefix}primary);
+
+$datepicker-width: ($datepicker-week-width * 7) + ($datepicker-padding-x * 2) +
+  ($datepicker-body-padding-x + $datepicker-body-padding-y) !default;