@shohojdhara/atomix 0.1.30 → 0.2.1

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,8 +29,8 @@ $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, 2.5) !default; //10px
 $card-icon-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
 $card-icon-color: var(--#{config.$prefix}brand-text-emphasis) !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: 1px !default;
+$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: 8px !default;
+$chart-header-backdrop-blur: 12px !default;
+$chart-tooltip-backdrop-blur: 16px !default;
+$chart-glassmorphism-opacity: 0.6 !default;
+$chart-pattern-opacity: 0.03 !default;
+$chart-pattern-size: 20px !default;
+
+// 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: 3px !default;
+
+// 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: 2px !default;
+$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.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.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 {

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

@@ -1,8 +1,8 @@
 @use 'settings.breakpoints' as breakpoints;
 
-$enable-grid-classes: true;
-$grid-columns: 12;
-$grid-gutter-width: 16px;
+$enable-grid-classes: true !default;
+$grid-columns: 12 !default;
+$grid-gutter-width: 16px !default;
 
 // Use breakpoints from the breakpoints module
 $container-max-widths: (

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

@@ -27,4 +27,4 @@ $hero-actions-margin-top: 24px !default;
 $hero-actions-inner-gap: 12px !default;
 
 $hero-grid-gutter: 64px !default;
-$hero-content-width: 536px !default;
+$hero-content-width: 800px !default;

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

@@ -20,7 +20,7 @@ $input-padding-y-sm: 6px !default;
 $input-padding-x-lg: 12px !default;
 $input-padding-y-lg: 12px !default;
 
-$input-border-width: 1px;
+$input-border-width: 1px !default;
 $input-border-color: var(--#{$prefix}primary-border-subtle) !default;
 $input-hover-border-color: var(--#{$prefix}secondary-border-subtle) !default;
 $input-focus-border-color: $input-hover-border-color !default;

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

@@ -89,14 +89,14 @@ $theme-colors-border-subtle-dark: (
 
 // Main theme colors map
 $theme-colors: (
-  'primary': $primary-6,
-  'secondary': $gray-6,
-  'success': $green-6,
-  'info': $blue-6,
-  'warning': $yellow-6,
-  'error': $red-6,
-  'light': $gray-1,
-  'dark': $gray-7,
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'error': $error,
+  'light': $light,
+  'dark': $dark,
 ) !default;
 
 $theme-colors-dark: (
@@ -145,6 +145,19 @@ $grays: (
   '10': $gray-10,
 ) !default;
 
+$primarys: (
+  '1': $primary-1,
+  '2': $primary-2,
+  '3': $primary-3,
+  '4': $primary-4,
+  '5': $primary-5,
+  '6': $primary-6,
+  '7': $primary-7,
+  '8': $primary-8,
+  '9': $primary-9,
+  '10': $primary-10,
+) !default;
+
 // Typography Maps
 
 $theme-font-size: (
@@ -276,3 +289,25 @@ $shadows-dark: (
   'shadow-xl': var(--#{config.$prefix}box-shadow-xl-dark),
   'shadow-inset': var(--#{config.$prefix}box-shadow-inset-dark),
 ) !default;
+
+$gradient-colors: (
+  'primary': $gradient-primary,
+  'secondary': $gradient-secondary,
+  'light': $gradient-light,
+  'dark': $gradient-dark,
+  'success': $gradient-success,
+  'info': $gradient-info,
+  'warning': $gradient-warning,
+  'error': $gradient-error,
+);
+
+$gradient-colors-dark: (
+  'primary': $gradient-primary-dark,
+  'secondary': $gradient-secondary-dark,
+  'light': $gradient-light-dark,
+  'dark': $gradient-dark-dark,
+  'success': $gradient-success-dark,
+  'info': $gradient-info-dark,
+  'warning': $gradient-warning-dark,
+  'error': $gradient-error-dark,
+);

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

@@ -13,7 +13,7 @@ $modal-content-box-shadow: var(--#{$prefix}box-shadow) !default;
 $modal-header-padding-bottom: 12px !default;
 $modal-title-font-size: $font-size-lg !default;
 $modal-sub-margin-top: 4px !default;
-$modal-sub-font-size: $font-size-sm;
+$modal-sub-font-size: $font-size-sm !default;
 $modal-sub-color: var(--#{$prefix}tertiary-text-emphasis) !default;
 
 $modal-footer-items-gap: 8px !default;