@shohojdhara/atomix 0.1.30 → 0.2.2

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

@@ -1,35 +1,37 @@
+@use 'sass:map';
+@use 'settings.spacing' as spacing;
+@use 'settings.border' as border;
+@use 'settings.box-shadow' as shadow;
 @use 'settings.config' as *;
 @use 'settings.border-radius' as *;
 @use 'settings.typography' as *;
 
 $btn-color: var(--#{$prefix}body-color) !default;
-$btn-padding-y: 12px !default;
-$btn-padding-x: 20px !default;
+$btn-padding-y: map.get(spacing.$spacing-sizes, 3) !default;
+$btn-padding-x: map.get(spacing.$spacing-sizes, 4) !default;
 $btn-font-family: $font-family-base !default;
 $btn-font-size: $font-size-base !default;
 $btn-line-height: 1.2 !default;
 $btn-white-space: nowrap !default;
-$btn-icon-size: 20px !default;
-$btn-icon-size-sm: 18px !default;
-$btn-icon-size-lg: 22px !default;
+$btn-icon-size: map.get(spacing.$spacing-sizes, 4) !default;
+$btn-icon-size-sm: map.get(spacing.$spacing-sizes, 3) !default;
+$btn-icon-size-lg: map.get(spacing.$spacing-sizes, 5) !default;
 $btn-letter-spacing: 0.0892857143em !default; // 1.25px/14px
 $btn-text-transform: none !default;
 
-$btn-padding-y-sm: 8px !default;
-$btn-padding-x-sm: 16px !default;
+$btn-padding-y-sm: map.get(spacing.$spacing-sizes, 1) !default;
+$btn-padding-x-sm: map.get(spacing.$spacing-sizes, 2) !default;
 $btn-font-size-sm: $font-size-sm !default;
 
-$btn-padding-y-lg: 16px !default;
-$btn-padding-x-lg: 24px !default;
+$btn-padding-y-lg: map.get(spacing.$spacing-sizes, 4) !default;
+$btn-padding-x-lg: map.get(spacing.$spacing-sizes, 6) !default;
 $btn-font-size-lg: $font-size-lg !default;
 
-$btn-border-width: 1px !default;
+$btn-border-width: map.get(border.$border-widths, 1) !default;
 
 $btn-font-weight: $font-weight-medium !default;
 $btn-focus-width: 2px !default;
-$btn-box-shadow:
-  0 1px 3px rgba(0, 0, 0, 0.1),
-  0 1px 2px rgba(0, 0, 0, 0.06) !default;
+$btn-box-shadow: shadow.$box-shadow !default;
 $btn-focus-box-shadow: 0 0 0 $btn-focus-width rgba(var(--#{$prefix}primary-rgb), 0.25) !default;
 $btn-focus-outline: 2px solid var(--#{$prefix}primary) !default;
 $btn-focus-outline-offset: 2px !default;
@@ -49,11 +51,11 @@ $btn-border-radius-lg: $border-radius-xl !default;
 
 $btn-link-color: var(--#{$prefix}brand-text-emphasis) !default;
 $btn-link-color-hover: var(--#{$prefix}invert-text-emphasis) !default;
-$btn-link-font-weight: $font-weight-medium;
+$btn-link-font-weight: $font-weight-medium !default;
 $btn-link-border-color: var(--#{$prefix}brand-border-subtle) !default;
 $btn-link-border-color-hover: var(--#{$prefix}secondary-border-subtle) !default;
 
-$btn-inner-gap: 8px !default;
+$btn-inner-gap: map.get(spacing.$spacing-sizes, 2) !default;
 
 $btn-transition:
   all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
@@ -70,13 +72,9 @@ $btn-active-border-tint-amount: 10% !default;
 
 // Enhanced button states
 $btn-hover-transform: translateY(-1px) !default;
-$btn-hover-shadow:
-  0 4px 12px rgba(0, 0, 0, 0.15),
-  0 2px 4px rgba(0, 0, 0, 0.1) !default;
+$btn-hover-shadow: shadow.$box-shadow-sm !default;
 $btn-active-transform: translateY(0) !default;
-$btn-active-shadow:
-  0 1px 3px rgba(0, 0, 0, 0.2),
-  0 1px 2px rgba(0, 0, 0, 0.1) !default;
+$btn-active-shadow: shadow.$box-shadow-xs !default;
 $btn-focus-shadow-opacity: 0.25 !default;
 
 // Enable pointer cursor on buttons

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

@@ -1,57 +1,75 @@
+@use 'sass:map';
 @use 'settings.colors' as *;
 @use 'settings.config' as config;
+@use './settings.spacing' as *;
 @use '../02-tools/tools.rem' as rem;
 
+$toast-positions-top: map.get($spacing-sizes, 4); //16px
+$toast-positions-right: map.get($spacing-sizes, 4); //16px
+$toast-positions-bottom: map.get($spacing-sizes, 4); //16px
+$toast-positions-left: map.get($spacing-sizes, 4); //16px
+
 // Callout
 $callout-width: 100% !default;
-$callout-padding-x: 16px !default;
-$callout-padding-y: 16px !default;
-$callout-tost-padding-x: 16px !default;
-$callout-tost-padding-y: 16px !default;
+
+$callout-padding-x: map.get($spacing-sizes, 4) !default; //16px
+$callout-padding-y: map.get($spacing-sizes, 4) !default; //16px
+
+$callout-tost-padding-x: map.get($spacing-sizes, 4) !default; //16px
+$callout-tost-padding-y: map.get($spacing-sizes, 4) !default; //16px
+$callout-toast-bg: $white !default;
+
 $callout-bg: $white !default;
-$callout-border-radius: 8px !default;
+
+$callout-border-radius: map.get($spacing-sizes, 2) !default; //8px
 $callout-border-color: $gray-3 !default;
-$callout-border-width: 1px !default;
-$callout-title-font-size: 16px !default;
+$callout-border-width: var(--#{config.$prefix}border-width) !default; //1px
+
+$callout-title-font-size: map.get($spacing-sizes, 4) !default; //16px
 $callout-title-font-weight: 600 !default;
 $callout-title-color: $gray-9 !default;
-$callout-text-font-size: 14px !default;
+
+$callout-text-font-size: map.get($spacing-sizes, 3.5) !default; //14px
 $callout-text-font-weight: 400 !default;
 $callout-text-color: $gray-7 !default;
-$callout-message-spacer: 12px !default;
-$callout-icon-size: 20px !default;
+
+$callout-message-spacer: map.get($spacing-sizes, 3) !default; //12px
+
+$callout-icon-size: map.get($spacing-sizes, 5) !default; //20px
 $callout-icon-color: $primary !default;
-$callout-close-btn-size: 20px !default;
-$callout-actions-spacer: 8px !default;
-$callout-actions-spacer-y: 12px !default;
-$callout-toast-bg: $white !default;
+
+$callout-close-btn-size: map.get($spacing-sizes, 5) !default; //20px
+
+$callout-actions-spacer: map.get($spacing-sizes, 2) !default; //8px
+$callout-actions-spacer-y: map.get($spacing-sizes, 3) !default; //12px
+
 $callout-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !default;
 
 // Toast positions
 $callout-toast-positions: (
   'top-right': (
-    top: 16px,
-    right: 16px,
+    top: $toast-positions-top,
+    right: $toast-positions-right,
   ),
   'top-left': (
-    top: 16px,
-    left: 16px,
+    top: $toast-positions-top,
+    left: $toast-positions-left,
   ),
   'top-center': (
-    top: 16px,
+    top: $toast-positions-top,
     left: 50%,
     transform: translateX(-50%),
   ),
   'bottom-right': (
-    bottom: 16px,
-    right: 16px,
+    bottom: $toast-positions-bottom,
+    right: $toast-positions-right,
   ),
   'bottom-left': (
-    bottom: 16px,
-    left: 16px,
+    bottom: $toast-positions-bottom,
+    left: $toast-positions-left,
   ),
   'bottom-center': (
-    bottom: 16px,
+    bottom: $toast-positions-bottom,
     left: 50%,
     transform: translateX(-50%),
   ),

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

@@ -1,20 +1,22 @@
+@use 'sass:map';
+@use 'settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as fonts;
 
-$card-spacer-y: 16px !default;
-$card-spacer-x: 16px !default;
-$card-row-spacer-y: 12px !default;
-$card-row-spacer-x: 12px !default;
-$card-title-spacer-y: 4px !default;
-$card-action-spacer-y: 12px !default;
-$card-header-spacer-y: 12px !default;
+$card-spacer-y: map.get($spacing-sizes, 4) !default; //16px
+$card-spacer-x: map.get($spacing-sizes, 4) !default; //16px
+$card-row-spacer-y: map.get($spacing-sizes, 3) !default; //12px
+$card-row-spacer-x: map.get($spacing-sizes, 3) !default; //12px
+$card-title-spacer-y: map.get($spacing-sizes, 1) !default; //4px
+$card-action-spacer-y: map.get($spacing-sizes, 3) !default; //12px
+$card-header-spacer-y: map.get($spacing-sizes, 3) !default; //12px
 
 $card-title-color: var(--#{config.$prefix}body-color) !default;
 $card-title-font-size: fonts.$font-size-base !default;
 $card-text-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
 $card-text-font-size: fonts.$font-size-sm !default;
 
-$card-border-width: 1px !default;
+$card-border-width: var(--#{config.$prefix}border-width) !default; //1px
 $card-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 
 $card-border-radius: var(--#{config.$prefix}border-radius-lg) !default;
@@ -27,11 +29,11 @@ $card-height: null !default;
 $card-bg: var(--#{config.$prefix}primary-bg-subtle) !default;
 $card-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
 
-$card-icon-size: 20px !default;
-$card-icon-padding: 10px !default;
+$card-icon-size: map.get($spacing-sizes, 5) !default; //20px
+$card-icon-padding: map.get($spacing-sizes, 1.5) !default; //10px
 $card-icon-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
 $card-icon-color: var(--#{config.$prefix}brand-text-emphasis) !default;
 
 $card-width: 100% !default;
 
-$card-hover: false !default;
+$card-hover: false !default;

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

@@ -0,0 +1,199 @@
+@use 'sass:map';
+@use 'settings.spacing' as *;
+@use 'settings.typography' as *;
+@use 'settings.border-radius' as *;
+@use 'settings.box-shadow' as *;
+@use 'settings.colors' as *;
+@use 'settings.config' as *;
+
+// Chart Configuration
+// =============================================================================
+
+// Chart Base Settings
+$chart-border-width: var(--#{$prefix}border-width) !default; //1px
+$chart-border-color: var(--atomix-border-color) !default;
+$chart-bg: var(--atomix-body-bg) !default;
+$chart-border-radius: $border-radius-lg !default;
+
+// Chart Spacing
+$chart-padding: map.get($spacing-sizes, 4) !default;
+$chart-gap: map.get($spacing-sizes, 2) !default;
+$chart-header-spacer-y: map.get($spacing-sizes, 4) !default;
+$chart-title-spacer-y: map.get($spacing-sizes, 2) !default;
+$chart-legend-spacer: map.get($spacing-sizes, 3) !default;
+$chart-legend-item-spacer: map.get($spacing-sizes, 2) !default;
+
+// Chart Sizing
+$chart-min-height: map.get($spacing-sizes, 52) !default; // 208px
+$chart-min-height-xs: map.get($spacing-sizes, 28) !default; // 112px
+$chart-min-height-sm: map.get($spacing-sizes, 36) !default; // 144px
+$chart-min-height-md: map.get($spacing-sizes, 52) !default; // 208px
+$chart-min-height-lg: map.get($spacing-sizes, 72) !default; // 288px
+$chart-min-height-xl: map.get($spacing-sizes, 80) !default; // 320px
+$chart-min-height-2xl: map.get($spacing-sizes, 96) !default; // 384px
+$chart-canvas-min-height: map.get($spacing-sizes, 32) !default; // 128px
+
+// Chart Typography
+$chart-title-font-size: $font-size-lg !default;
+$chart-title-font-weight: $font-weight-semibold !default;
+$chart-title-color: var(--atomix-heading-color) !default;
+$chart-subtitle-color: var(--atomix-secondary-text-emphasis) !default;
+$chart-axis-label-font-size: $font-size-xs !default;
+$chart-axis-label-font-weight: $font-weight-medium !default;
+$chart-axis-label-color: var(--atomix-tertiary-text-emphasis) !default;
+
+// Chart Colors - Mapped to Atomix Design Tokens
+$chart-primary-color: var(--atomix-primary) !default;
+$chart-secondary-color: var(--atomix-secondary) !default;
+$chart-success-color: var(--atomix-success) !default;
+$chart-error-color: var(--atomix-error) !default;
+$chart-warning-color: var(--atomix-warning) !default;
+$chart-info-color: var(--atomix-info) !default;
+$chart-light-color: var(--atomix-light) !default;
+$chart-dark-color: var(--atomix-dark) !default;
+
+// Chart Text Colors
+$chart-primary-text: var(--atomix-primary-text-emphasis) !default;
+$chart-secondary-text: var(--atomix-secondary-text-emphasis) !default;
+$chart-tertiary-text: var(--atomix-tertiary-text-emphasis) !default;
+$chart-disabled-text: var(--atomix-disabled-text-emphasis) !default;
+$chart-invert-text: var(--atomix-invert-text-emphasis) !default;
+$chart-brand-text: var(--atomix-brand-text-emphasis) !default;
+$chart-error-text: var(--atomix-error-text-emphasis) !default;
+$chart-success-text: var(--atomix-success-text-emphasis) !default;
+$chart-warning-text: var(--atomix-warning-text-emphasis) !default;
+$chart-info-text: var(--atomix-info-text-emphasis) !default;
+
+// Chart Background Colors
+$chart-primary-bg: var(--atomix-primary-bg-subtle) !default;
+$chart-secondary-bg: var(--atomix-secondary-bg-subtle) !default;
+$chart-tertiary-bg: var(--atomix-tertiary-bg-subtle) !default;
+$chart-invert-bg: var(--atomix-invert-bg-subtle) !default;
+$chart-brand-bg: var(--atomix-brand-bg-subtle) !default;
+$chart-error-bg: var(--atomix-error-bg-subtle) !default;
+$chart-success-bg: var(--atomix-success-bg-subtle) !default;
+$chart-warning-bg: var(--atomix-warning-bg-subtle) !default;
+$chart-info-bg: var(--atomix-info-bg-subtle) !default;
+$chart-light-bg: var(--atomix-light-bg-subtle) !default;
+$chart-dark-bg: var(--atomix-dark-bg-subtle) !default;
+
+// Chart Border Colors
+$chart-primary-border: var(--atomix-primary-border-subtle) !default;
+$chart-secondary-border: var(--atomix-secondary-border-subtle) !default;
+$chart-success-border: var(--atomix-success-border-subtle) !default;
+$chart-error-border: var(--atomix-error-border-subtle) !default;
+$chart-warning-border: var(--atomix-warning-border-subtle) !default;
+$chart-info-border: var(--atomix-info-border-subtle) !default;
+$chart-brand-border: var(--atomix-brand-border-subtle) !default;
+$chart-light-border: var(--atomix-light-border-subtle) !default;
+$chart-dark-border: var(--atomix-dark-border-subtle) !default;
+
+// Chart Hover Colors
+$chart-primary-hover: var(--atomix-primary-hover) !default;
+$chart-secondary-hover: var(--atomix-secondary-hover) !default;
+$chart-light-hover: var(--atomix-light-hover) !default;
+$chart-dark-hover: var(--atomix-dark-hover) !default;
+$chart-error-hover: var(--atomix-error-hover) !default;
+$chart-success-hover: var(--atomix-success-hover) !default;
+$chart-warning-hover: var(--atomix-warning-hover) !default;
+$chart-info-hover: var(--atomix-info-hover) !default;
+
+// Chart Effects
+$chart-backdrop-blur: map.get($spacing-sizes, 2) !default; //8px
+$chart-header-backdrop-blur: map.get($spacing-sizes, 3) !default; //12px
+$chart-tooltip-backdrop-blur: map.get($spacing-sizes, 4) !default; //16px
+$chart-glassmorphism-opacity: 0.6 !default;
+$chart-pattern-opacity: 0.03 !default;
+$chart-pattern-size: map.get($spacing-sizes, 5) !default; //20px
+
+// Chart Transitions
+$chart-transition-duration: 0.3s !default;
+$chart-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$chart-hover-transform: translateY(-1px) !default;
+$chart-active-transform: translateY(0) !default;
+
+// Chart Focus
+$chart-focus-ring-width: calc(var(--#{$prefix}border-width) * 3) !default; //3px
+
+// Chart Elements
+$chart-legend-color-size: map.get($spacing-sizes, 3) !default;
+$chart-action-button-size: map.get($spacing-sizes, 8) !default;
+$chart-touch-target-size: map.get($spacing-sizes, 10) !default;
+
+// Chart Loading & States
+$chart-loading-spinner-size: map.get($spacing-sizes, 8) !default;
+$chart-error-icon-size: map.get($spacing-sizes, 12) !default;
+$chart-empty-icon-size: map.get($spacing-sizes, 16) !default;
+
+// Chart Tooltip
+$chart-tooltip-max-width: map.get($spacing-sizes, 64) !default;
+$chart-tooltip-min-width: map.get($spacing-sizes, 32) !default;
+$chart-tooltip-padding-y: map.get($spacing-sizes, 3) !default;
+$chart-tooltip-padding-x: map.get($spacing-sizes, 4) !default;
+$chart-tooltip-font-size: $font-size-sm !default;
+$chart-tooltip-border-radius: $border-radius-lg !default;
+
+// Chart Data Visualization
+$chart-line-width: 2.5 !default;
+$chart-line-width-hover: 3.5 !default;
+$chart-data-point-radius: 4 !default;
+$chart-data-point-radius-hover: 6 !default;
+$chart-data-point-radius-highlighted: 8 !default;
+$chart-area-opacity: 0.15 !default;
+$chart-area-opacity-hover: 0.25 !default;
+
+// Chart Grid & Axis
+$chart-grid-stroke-width: 0.5 !default;
+$chart-grid-opacity: 0.2 !default;
+$chart-grid-major-stroke-width: 1 !default;
+$chart-grid-major-opacity: 0.4 !default;
+$chart-grid-minor-opacity: 0.1 !default;
+$chart-grid-zero-stroke-width: 1.5 !default;
+$chart-grid-zero-opacity: 0.6 !default;
+$chart-axis-line-stroke-width: 1 !default;
+$chart-axis-line-opacity: 0.6 !default;
+
+// Chart Pie & Donut
+$chart-pie-stroke-width: 2 !default;
+$chart-pie-stroke-width-hover: 3 !default;
+$chart-pie-transition-duration: 0.4s !default;
+
+// Chart Bar
+$chart-bar-opacity-hover: 0.85 !default;
+
+// Chart Candlestick
+$chart-candlestick-wick-stroke-width: 1 !default;
+$chart-candlestick-wick-opacity: 0.8 !default;
+$chart-volume-bar-opacity: 0.3 !default;
+$chart-volume-bar-opacity-hover: 0.6 !default;
+
+// Chart Scatter
+$chart-scatter-point-radius: 4 !default;
+$chart-scatter-point-radius-hover: 6 !default;
+
+// Chart Interactive Features
+$chart-crosshair-opacity: 0.6 !default;
+$chart-zoom-indicator-bg: rgba(0, 0, 0, 0.8) !default;
+$chart-real-time-indicator-bg: var(--atomix-success-bg-subtle) !default;
+$chart-navigator-opacity: 0.8 !default;
+$chart-brush-selection-opacity: 0.3 !default;
+
+// Chart Animations
+$chart-animation-duration: 1s !default;
+$chart-animation-delay: 0.1s !default;
+$chart-animation-easing: ease-out !default;
+$chart-real-time-pulse-duration: 2s !default;
+
+// Chart Performance
+$chart-decimation-threshold: 1000 !default;
+$chart-max-data-points: 500 !default;
+$chart-debounce-delay: 100ms !default;
+
+// Chart Accessibility
+$chart-focus-outline-width: calc(var(--#{$prefix}border-width) * 2) !default;  //2px
+$chart-focus-outline-color: var(--atomix-focus-border-color) !default;
+$chart-keyboard-nav-highlight: var(--atomix-primary-bg-subtle) !default;
+
+// Chart Responsive Breakpoints
+$chart-mobile-breakpoint: 768px !default;
+$chart-small-mobile-breakpoint: 480px !default;

package/src/styles/01-settings/_settings.checkbox-group.scss

@@ -1,2 +1,5 @@
-$checkbox-group-items-spacer-y: 8px !default;
-$checkbox-group-items-spacer-x: 16px !default;
+@use 'sass:map';
+@use './settings.spacing' as *;
+
+$checkbox-group-items-spacer-y: map.get($spacing-sizes, 2) !default; //8px
+$checkbox-group-items-spacer-x: map.get($spacing-sizes, 4) !default; //16px

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

@@ -1,19 +1,25 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as fonts;
 
-$checkbox-width: 20px !default;
-$checkbox-height: 20px !default;
-$checkbox-spacer: 8px !default;
+$checkbox-width: map.get($spacing-sizes, 5) !default; //20px
+$checkbox-height: map.get($spacing-sizes, 5) !default; //20px
+
+$checkbox-spacer: map.get($spacing-sizes, 2) !default; //8px
+
 $checkbox-font-size: fonts.$font-size-base !default;
 $checkbox-text-color: var(--#{config.$prefix}body-color) !default;
 $checkbox-checked-text-color: $checkbox-text-color !default;
 $checkbox-text-color-disabled: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $checkbox-checked-text-color-disabled: var(--#{config.$prefix}disabled-text-emphasis) !default;
+
 $checkbox-bg: var(--#{config.$prefix}body-bg) !default;
 $checkbox-checked-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
 $checkbox-checked-bg-hover: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $checkbox-checked-bg-disabled: var(--#{config.$prefix}disabled-text-emphasis) !default;
-$checkbox-border-width: 1px !default;
+
+$checkbox-border-width: var(--#{config.$prefix}border-width) !default;
 $checkbox-border-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $checkbox-border-color-hover: var(--#{config.$prefix}primary-text-emphasis) !default;
 $checkbox-border-color-disabled: var(--#{config.$prefix}disabled-text-emphasis) !default;

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

@@ -249,4 +249,24 @@ $focus-border-color-dark: $primary-4 !default;
 $component-active-color: $white !default;
 $component-active-bg: $primary !default;
 
+// Gradient theme colors for light mode
+$gradient-primary: linear-gradient(135deg, $primary-2, $primary-3, $primary-4) !default;
+$gradient-secondary: linear-gradient(135deg, $gray-2, $gray-3, $gray-4) !default;
+$gradient-light: linear-gradient(135deg, $gray-1, $gray-2, $gray-3) !default;
+$gradient-dark: linear-gradient(135deg, $gray-7, $gray-9, $black) !default;
+$gradient-success: linear-gradient(135deg, $green-2, $green-4, $green-5) !default;
+$gradient-info: linear-gradient(135deg, $blue-2, $blue-3, $blue-5) !default;
+$gradient-warning: linear-gradient(135deg, $yellow-2, $yellow-3, $yellow-5) !default;
+$gradient-error: linear-gradient(135deg, $red-1, $red-2, $red-3) !default;
+
+// Gradient theme colors for dark mode
+$gradient-primary-dark: linear-gradient(135deg, $primary-10, $primary-9, $primary-8) !default;
+$gradient-secondary-dark: linear-gradient(135deg, $gray-8, $gray-6, $gray-4) !default;
+$gradient-light-dark: linear-gradient(135deg, $gray-5, $gray-6, $gray-5) !default;
+$gradient-dark-dark: linear-gradient(135deg, $black, $gray-7, $gray-9) !default;
+$gradient-success-dark: linear-gradient(135deg, $green-10, $green-7, $green-9) !default;
+$gradient-info-dark: linear-gradient(135deg, $blue-10, $blue-8, $blue-9) !default;
+$gradient-warning-dark: linear-gradient(135deg, $yellow-10, $yellow-8, $yellow-9) !default;
+$gradient-error-dark: linear-gradient(135deg, $red-10, $red-7, $red-10) !default;
+
 // All variables are automatically exported when using @use

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

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

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

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.border-radius' as border-radius;
@@ -9,7 +11,7 @@ $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-item-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$countdown-item-padding-y: map.get($spacing-sizes, 2) !default; //8px
+$countdown-items-gap: map.get($spacing-sizes, 1) !default; //4px
+$countdown-focused-items-gap: map.get($spacing-sizes, 2) !default; //8px

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

@@ -1,6 +1,8 @@
+@use 'sass:map';
 @use 'settings.typography' as typography;
 @use 'settings.config' as config;
 @use 'settings.border-radius' as border-radius;
+@use './settings.spacing' as *;
 
 $dropdown-min-width: 180px !default;
 $dropdown-font-size: typography.$font-size-base !default;
@@ -8,14 +10,14 @@ $dropdown-color: var(--#{config.$prefix}body-color) !default;
 $dropdown-bg: var(--#{config.$prefix}body-bg) !default;
 $dropdown-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $dropdown-border-radius: border-radius.$border-radius !default;
-$dropdown-border-width: 1px !default;
-$dropdown-padding-x: 0 !default;
-$dropdown-padding-y: 8px !default;
-$dropdown-spacer: 4px !default;
+$dropdown-border-width: var(--#{config.$prefix}border-width) !default;
+$dropdown-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$dropdown-padding-y: map.get($spacing-sizes, 2) !default; //8px
+$dropdown-spacer: map.get($spacing-sizes, 1) !default; //4px
 $dropdown-box-shadow: var(--#{config.$prefix}box-shadow) !default;
 
-$dropdown-item-padding-x: 16px !default;
-$dropdown-item-padding-y: 8px !default;
+$dropdown-item-padding-x: map.get($spacing-sizes, 4) !default; //16px
+$dropdown-item-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $dropdown-item-hover-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
 $dropdown-item-hover-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
 
@@ -34,5 +36,5 @@ $dropdown-link-border-radius: border-radius.$border-radius !default;
 $dropdown-header-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $dropdown-header-padding: $dropdown-item-padding-y $dropdown-item-padding-x !default;
 
-$dropdown-divider-margin-y: 8px !default;
+$dropdown-divider-margin-y:  map.get($spacing-sizes, 2) !default; //8px
 $dropdown-divider-bg: var(--#{config.$prefix}primary-border-subtle) !default;

package/src/styles/01-settings/_settings.edge-panel.scss

@@ -1,12 +1,13 @@
 @use 'sass:map';
 @use 'settings.z-layers' as z-layers;
 @use 'settings.config' as config;
+@use './settings.spacing' as *;
 
 $edge-panel-zindex: map.get(z-layers.$z-layers, 5) !default;
 $edge-panel-width: 240px !default;
 $edge-panel-height: 30vh !default;
-$edge-panel-padding-x: 16px !default;
-$edge-panel-padding-y: 16px !default;
+$edge-panel-padding-x: map.get($spacing-sizes, 4) !default; //16px
+$edge-panel-padding-y: map.get($spacing-sizes, 4) !default; //16px
 $edge-panel-bg: var(--#{config.$prefix}body-bg) !default;
 $edge-panel-color: var(--#{config.$prefix}body-color) !default;
 $edge-panel-shadow: var(--#{config.$prefix}box-shadow) !default;

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

@@ -1,4 +1,4 @@
-$assets-fonts-path: '../assets/fonts/';
+$assets-fonts-path: '../assets/fonts/' !default;
 
 @mixin font-face($name, $foldername, $filename, $weight: normal, $style: normal) {
   @font-face {