@shohojdhara/atomix 0.2.9 → 0.3.1

package/src/styles/01-settings/{_settings.maps.scss → _settings.design-tokens.scss}

@@ -1,8 +1,13 @@
 @use 'sass:map';
 @use 'settings.colors' as *;
 @use 'settings.typography' as *;
+@use 'settings.spacing' as spacing;
+@use 'settings.animations' as animations;
+@use 'settings.z-layers' as z-layers;
+@use 'settings.breakpoints' as breakpoints;
 @use 'settings.config' as config;
 
+
 // Color maps
 
 $theme-colors-text: (
@@ -18,7 +23,7 @@ $theme-colors-text: (
   'info': $info-text,
   'light': $light-text,
   'dark': $dark-text,
-) !default;
+  ) !default;
 
 $theme-colors-text-dark: (
   'primary': $primary-text-dark,
@@ -33,7 +38,7 @@ $theme-colors-text-dark: (
   'info': $info-text-dark,
   'light': $light-text-dark,
   'dark': $dark-text-dark,
-) !default;
+  ) !default;
 
 $theme-colors-bg-subtle: (
   'primary': $primary-bg,
@@ -47,7 +52,7 @@ $theme-colors-bg-subtle: (
   'info': $info-bg,
   'light': $light-bg,
   'dark': $dark-bg,
-) !default;
+  ) !default;
 
 $theme-colors-bg-subtle-dark: (
   'primary': $primary-bg-dark,
@@ -61,7 +66,7 @@ $theme-colors-bg-subtle-dark: (
   'info': $info-bg-dark,
   'light': $light-bg-dark,
   'dark': $dark-bg-dark,
-) !default;
+  ) !default;
 
 $theme-colors-border-subtle: (
   'primary': $primary-border,
@@ -73,7 +78,7 @@ $theme-colors-border-subtle: (
   'brand': $brand-border,
   'light': $light-border,
   'dark': $dark-border,
-) !default;
+  ) !default;
 
 $theme-colors-border-subtle-dark: (
   'primary': $primary-border-dark,
@@ -85,7 +90,7 @@ $theme-colors-border-subtle-dark: (
   'brand': $brand-border-dark,
   'light': $light-border-dark,
   'dark': $dark-border-dark,
-) !default;
+  ) !default;
 
 // Main theme colors map
 $theme-colors: (
@@ -97,7 +102,7 @@ $theme-colors: (
   'error': $error,
   'light': $light,
   'dark': $dark,
-) !default;
+  ) !default;
 
 $theme-colors-dark: (
   'primary': $primary-dark,
@@ -108,7 +113,7 @@ $theme-colors-dark: (
   'success': $success-dark,
   'warning': $warning-dark,
   'info': $info-dark,
-) !default;
+  ) !default;
 
 $theme-colors-hover: (
   'primary': $primary-hover,
@@ -119,7 +124,7 @@ $theme-colors-hover: (
   'success': $success-hover,
   'warning': $warning-hover,
   'info': $info-hover,
-) !default;
+  ) !default;
 
 $theme-colors-hover-dark: (
   'primary': $primary-hover-dark,
@@ -130,7 +135,7 @@ $theme-colors-hover-dark: (
   'success': $success-hover-dark,
   'warning': $warning-hover-dark,
   'info': $info-hover-dark,
-) !default;
+  ) !default;
 
 $grays: (
   '1': $gray-1,
@@ -143,7 +148,7 @@ $grays: (
   '8': $gray-8,
   '9': $gray-9,
   '10': $gray-10,
-) !default;
+  ) !default;
 
 $primarys: (
   '1': $primary-1,
@@ -156,7 +161,7 @@ $primarys: (
   '8': $primary-8,
   '9': $primary-9,
   '10': $primary-10,
-) !default;
+  ) !default;
 
 // Typography Maps
 
@@ -172,7 +177,7 @@ $theme-font-size: (
   'h4': $h4-font-size,
   'h5': $h5-font-size,
   'h6': $h6-font-size,
-) !default;
+  ) !default;
 
 $theme-font-weight: (
   'light': $font-weight-light,
@@ -182,7 +187,7 @@ $theme-font-weight: (
   'bold': $font-weight-bold,
   'heavy': $font-weight-heavy,
   'black': $font-weight-black,
-) !default;
+  ) !default;
 
 // Utilities maps
 //
@@ -194,14 +199,11 @@ $theme-font-weight: (
 
 $utilities-colors: $theme-colors !default;
 
-$utilities-text-colors: map.merge(
-  $utilities-colors,
-  (
-    'black': $black,
-    'white': $white,
-    'body': $body-color,
-  )
-) !default;
+$utilities-text-colors: map.merge($utilities-colors,
+    ('black': $black,
+      'white': $white,
+      'body': $body-color,
+    )) !default;
 
 $utilities-text-emphasis-colors: (
   'primary-emphasis': var(--#{config.$prefix}primary-text-emphasis),
@@ -216,17 +218,14 @@ $utilities-text-emphasis-colors: (
   'error-emphasis': var(--#{config.$prefix}error-text-emphasis),
   'light-emphasis': var(--#{config.$prefix}light-text-emphasis),
   'dark-emphasis': var(--#{config.$prefix}dark-text-emphasis),
-) !default;
+  ) !default;
 
 // scss-docs-start utilities-bg-colors
-$utilities-bg-colors: map.merge(
-  $utilities-colors,
-  (
-    'black': $black,
-    'white': $white,
-    'body': var(--#{config.$prefix}body-bg),
-  )
-) !default;
+$utilities-bg-colors: map.merge($utilities-colors,
+    ('black': $black,
+      'white': $white,
+      'body': var(--#{config.$prefix}body-bg),
+    )) !default;
 
 $utilities-bg-subtle: (
   'primary-subtle': var(--#{config.$prefix}primary-bg-subtle),
@@ -240,16 +239,13 @@ $utilities-bg-subtle: (
   'error-subtle': var(--#{config.$prefix}error-bg-subtle),
   'light-subtle': var(--#{config.$prefix}light-bg-subtle),
   'dark-subtle': var(--#{config.$prefix}dark-bg-subtle),
-) !default;
+  ) !default;
 
 // scss-docs-start utilities-border-colors
-$utilities-border-colors: map.merge(
-  $utilities-colors,
-  (
-    'black': $black,
-    'white': $white,
-  )
-) !default;
+$utilities-border-colors: map.merge($utilities-colors,
+    ('black': $black,
+      'white': $white,
+    )) !default;
 
 $utilities-border-subtle: (
   'primary-subtle': var(--#{config.$prefix}primary-border-subtle),
@@ -261,16 +257,13 @@ $utilities-border-subtle: (
   'brand-subtle': var(--#{config.$prefix}brand-border-subtle),
   'light-subtle': var(--#{config.$prefix}light-border-subtle),
   'dark-subtle': var(--#{config.$prefix}dark-border-subtle),
-) !default;
+  ) !default;
 
 // scss-docs-start utilities-links-underline
-$utilities-links-underline: map.merge(
-  $utilities-colors,
-  (
-    'black': $black,
-    'white': $white,
-  )
-) !default;
+$utilities-links-underline: map.merge($utilities-colors,
+    ('black': $black,
+      'white': $white,
+    )) !default;
 
 $shadows: (
   'shadow': var(--#{config.$prefix}box-shadow),
@@ -279,7 +272,7 @@ $shadows: (
   'shadow-lg': var(--#{config.$prefix}box-shadow-lg),
   'shadow-xl': var(--#{config.$prefix}box-shadow-xl),
   'shadow-inset': var(--#{config.$prefix}box-shadow-inset),
-) !default;
+  ) !default;
 
 $shadows-dark: (
   'shadow': var(--#{config.$prefix}box-shadow-dark),
@@ -288,7 +281,7 @@ $shadows-dark: (
   'shadow-lg': var(--#{config.$prefix}box-shadow-lg-dark),
   'shadow-xl': var(--#{config.$prefix}box-shadow-xl-dark),
   'shadow-inset': var(--#{config.$prefix}box-shadow-inset-dark),
-) !default;
+  ) !default;
 
 $gradient-colors: (
   'primary': $gradient-primary,
@@ -311,3 +304,124 @@ $gradient-colors-dark: (
   'warning': $gradient-warning-dark,
   'error': $gradient-error-dark,
 );
+
+// Full Color Palette Maps
+// Red scale (1-10)
+$reds: (
+  '1': $red-1,
+  '2': $red-2,
+  '3': $red-3,
+  '4': $red-4,
+  '5': $red-5,
+  '6': $red-6,
+  '7': $red-7,
+  '8': $red-8,
+  '9': $red-9,
+  '10': $red-10,
+  ) !default;
+
+// Green scale (1-10)
+$greens: (
+  '1': $green-1,
+  '2': $green-2,
+  '3': $green-3,
+  '4': $green-4,
+  '5': $green-5,
+  '6': $green-6,
+  '7': $green-7,
+  '8': $green-8,
+  '9': $green-9,
+  '10': $green-10,
+  ) !default;
+
+// Blue scale (1-10)
+$blues: (
+  '1': $blue-1,
+  '2': $blue-2,
+  '3': $blue-3,
+  '4': $blue-4,
+  '5': $blue-5,
+  '6': $blue-6,
+  '7': $blue-7,
+  '8': $blue-8,
+  '9': $blue-9,
+  '10': $blue-10,
+  ) !default;
+
+// Yellow scale (1-10)
+$yellows: (
+  '1': $yellow-1,
+  '2': $yellow-2,
+  '3': $yellow-3,
+  '4': $yellow-4,
+  '5': $yellow-5,
+  '6': $yellow-6,
+  '7': $yellow-7,
+  '8': $yellow-8,
+  '9': $yellow-9,
+  '10': $yellow-10,
+  ) !default;
+
+// Line Height Maps
+$line-heights: (
+  'base': $line-height-base,
+  'sm': $line-height-sm,
+  'lg': $line-height-lg,
+  ) !default;
+
+// Extended Font Size Map
+$font-sizes-extended: (
+  'xs': $font-size-xs,
+  'sm': $font-size-sm,
+  'base': $font-size-base,
+  'md': $font-size-md,
+  'lg': $font-size-lg,
+  'xl': $font-size-xl,
+  '2xl': $font-size-2xl,
+  'h1': $h1-font-size,
+  'h2': $h2-font-size,
+  'h3': $h3-font-size,
+  'h4': $h4-font-size,
+  'h5': $h5-font-size,
+  'h6': $h6-font-size,
+  'display-1': $display-1,
+  ) !default;
+
+// Letter Spacing Map
+$letter-spacings: (
+  'h1': $h1-letter-spaceing,
+  'h2': $h2-letter-spaceing,
+  'h3': $h3-letter-spaceing,
+  'h4': $h4-letter-spaceing,
+  'h5': $h5-letter-spaceing,
+  'h6': $h6-letter-spaceing,
+  ) !default;
+
+// Transition & Animation Maps
+$transitions: (
+  'fast': animations.$transition-fast,
+  'base': animations.$transition-base,
+  'slow': animations.$transition-slow,
+  ) !default;
+
+$transition-durations: (
+  'fast': 0.15s,
+  'base': 0.3s,
+  'slow': 0.5s,
+  'slower': 0.7s,
+  ) !default;
+
+$easings: (
+  'base': animations.$easing,
+  'ease-in-out': cubic-bezier(0.4, 0, 0.2, 1),
+  'ease-out': cubic-bezier(0.0, 0, 0.2, 1),
+  'ease-in': cubic-bezier(0.4, 0, 1, 1),
+  'ease-linear': linear,
+  ) !default;
+
+// Focus Ring Tokens
+$focus-ring: (
+  'width': 3px,
+  'offset': 2px,
+  'opacity': 0.25,
+  ) !default;

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

@@ -18,7 +18,7 @@ $modal-sub-margin-top: map.get($spacing-sizes, 1) !default; //4px
 $modal-sub-font-size: $font-size-sm !default;
 $modal-sub-color: var(--#{$prefix}tertiary-text-emphasis) !default;
 
-$modal-footer-items-gap: map.get($spacing-sizes, 8) !default; //8px
+$modal-footer-items-gap: map.get($spacing-sizes, 2) !default; //8px
 
 $modal-backdrop-bg: var(--#{$prefix}invert-bg-subtle) !default;
 $modal-backdrop-opacity: 0.5 !default;

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

@@ -5,28 +5,28 @@ $spacing-sizes: (
   //00px
   1: 0.25rem,
   //04px
-  1.5: 0.375rem,
-  //6px
+  px-6: 0.375rem,
+  //6px (formerly 1.5)
   2: 0.5rem,
   //08px
-  2.5: 0.625rem,
-  //10px
+  px-10: 0.625rem,
+  //10px (formerly 2.5)
   3: 0.75rem,
   //12px
-  3.5: 0.875rem,
-  //14px
+  px-14: 0.875rem,
+  //14px (formerly 3.5)
   4: 1rem,
   //16px
   5: 1.25rem,
   //20px
-  5.5: 1.375rem,
-  //22px
+  px-22: 1.375rem,
+  //22px (formerly 5.5)
   6: 1.5rem,
   //24px
   7: 1.75rem,
   //28px
-  7.5: 1.875rem,
-  //30px
+  px-30: 1.875rem,
+  //30px (formerly 7.5)
   8: 2rem,
   //32px
   9: 2.25rem,
@@ -71,10 +71,11 @@ $spacing-sizes: (
   //320px
   90: 22.5rem,
   //360px
-  200: 50rem, //800px
-) !default;
+  200: 50rem,
+  //800px
+  ) !default;
 
 $spacing-important: false !default;
 $enable-negative-margins: false !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;
+$negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;

package/src/styles/03-generic/_generic.root.scss

@@ -4,12 +4,17 @@
 @use '../01-settings/settings.border-radius' as border-radius;
 @use '../01-settings/settings.border' as border;
 @use '../01-settings/settings.colors' as colors;
-@use '../01-settings/settings.maps' as color-maps;
+@use '../01-settings/settings.design-tokens' as color-maps;
 @use '../01-settings/settings.box-shadow' as box-shadow;
 @use '../01-settings/settings.typography' as typography;
+@use '../01-settings/settings.spacing' as spacing;
+@use '../01-settings/settings.animations' as animations;
+@use '../01-settings/settings.z-layers' as z-layers;
+@use '../01-settings/settings.breakpoints' as breakpoints;
 @use 'sass:meta';
 @use 'sass:map';
 
+// Root custom properties
 :root,
 [data-#{config.$prefix}color-mode='light'] {
   // Note: Custom variable values only support SassScript inside `#{}`.
@@ -67,14 +72,16 @@
 
   // Root and body
   // scss-docs-start root-body-variables
-  @if typography.$font-size-root != null {
+  @if typography.$font-size-root !=null {
     --#{config.$prefix}root-font-size: #{typography.$font-size-root};
   }
+
   --#{config.$prefix}body-font-family: #{meta.inspect(typography.$font-family-base)};
   --#{config.$prefix}body-font-size: #{typography.$font-size-base};
   --#{config.$prefix}body-font-weight: #{typography.$font-weight-base};
   --#{config.$prefix}body-line-height: #{typography.$line-height-base};
-  @if typography.$body-text-align != null {
+
+  @if typography.$body-text-align !=null {
     --#{config.$prefix}body-text-align: #{typography.$body-text-align};
   }
 
@@ -92,11 +99,11 @@
   --#{config.$prefix}link-hover-color: #{colors.$link-hover-color};
   --#{config.$prefix}link-hover-color-rgb: #{to-rgb(colors.$link-hover-color)};
 
-  @if colors.$link-hover-decoration != null {
+  @if colors.$link-hover-decoration !=null {
     --#{config.$prefix}link-hover-decoration: #{colors.$link-hover-decoration};
   }
 
-  --#{config.$prefix}code-color: #{colors.$code-color};
+  // Code tokens
   --#{config.$prefix}highlight-bg: #{colors.$mark-bg};
 
   // scss-docs-start root-border-var
@@ -110,9 +117,7 @@
   --#{config.$prefix}border-radius-lg: #{border-radius.$border-radius-lg};
   --#{config.$prefix}border-radius-xl: #{border-radius.$border-radius-xl};
   --#{config.$prefix}border-radius-xxl: #{border-radius.$border-radius-xxl};
-  --#{config.$prefix}border-radius-2xl: var(
-    --#{config.$prefix}border-radius-xxl
-  ); // Deprecated in v5.3.0 for consistency
+  --#{config.$prefix}border-radius-2xl: var(--#{config.$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
   --#{config.$prefix}border-radius-3xl: #{border-radius.$border-radius-3xl};
   --#{config.$prefix}border-radius-4xl: #{border-radius.$border-radius-4xl};
   --#{config.$prefix}border-radius-pill: #{border-radius.$border-radius-pill};
@@ -136,63 +141,139 @@
   --#{config.$prefix}form-invalid-color: #{colors.$form-invalid-color};
   --#{config.$prefix}form-invalid-border-color: #{colors.$form-invalid-border-color};
   // scss-docs-end root-form-validation-variables
-}
 
-@if color-mode.$enable-dark-mode {
-  @include color-mode(dark, true) {
-    color-scheme: dark;
+  // Spacing tokens
+  @each $size, $value in spacing.$spacing-sizes {
+    --#{config.$prefix}spacing-#{$size}: #{$value};
+  }
 
-    --#{config.$prefix}body-color: #{colors.$body-color-dark};
-    --#{config.$prefix}body-bg: #{colors.$body-bg-dark};
+  // Full color palette scales
 
-    @each $color, $value in color-maps.$theme-colors-dark {
-      --#{config.$prefix}#{$color}: #{$value};
-    }
+  @each $color, $value in color-maps.$reds {
+    --#{config.$prefix}red-#{$color}: #{$value};
+  }
 
-    @each $color, $value in color-maps.$theme-colors-text-dark {
-      --#{config.$prefix}#{$color}-text-emphasis: #{$value};
-    }
+  @each $color, $value in color-maps.$greens {
+    --#{config.$prefix}green-#{$color}: #{$value};
+  }
 
-    @each $color, $value in color-maps.$theme-colors-bg-subtle-dark {
-      --#{config.$prefix}#{$color}-bg-subtle: #{$value};
-    }
+  @each $color, $value in color-maps.$blues {
+    --#{config.$prefix}blue-#{$color}: #{$value};
+  }
 
-    @each $color, $value in color-maps.$theme-colors-border-subtle-dark {
-      --#{config.$prefix}#{$color}-border-subtle: #{$value};
-    }
+  @each $color, $value in color-maps.$yellows {
+    --#{config.$prefix}yellow-#{$color}: #{$value};
+  }
 
-    @each $color, $value in color-maps.$theme-colors-hover-dark {
-      --#{config.$prefix}#{$color}-hover: #{$value};
-    }
+  // Typography - Font weights
+  @each $weight, $value in color-maps.$theme-font-weight {
+    --#{config.$prefix}font-weight-#{$weight}: #{$value};
+  }
 
-    @each $color, $value in color-maps.$gradient-colors-dark {
-      --#{config.$prefix}#{$color}-gradient: #{$value};
-    }
+  // Typography - Line heights
+  @each $name, $value in color-maps.$line-heights {
+    --#{config.$prefix}line-height-#{$name}: #{$value};
+  }
 
-    --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, dark)};
+  // Typography - Extended font sizes
+  --#{config.$prefix}font-size-xl: #{typography.$font-size-xl};
+  --#{config.$prefix}font-size-2xl: #{typography.$font-size-2xl};
+  --#{config.$prefix}display-1: #{typography.$display-1};
 
-    --#{config.$prefix}box-shadow: #{box-shadow.$box-shadow-dark};
-    --#{config.$prefix}box-shadow-xs: #{box-shadow.$box-shadow-xs-dark};
-    --#{config.$prefix}box-shadow-sm: #{box-shadow.$box-shadow-sm-dark};
-    --#{config.$prefix}box-shadow-lg: #{box-shadow.$box-shadow-lg-dark};
-    --#{config.$prefix}box-shadow-xl: #{box-shadow.$box-shadow-xl-dark};
+  // Typography - Letter spacing
+  @each $heading, $value in color-maps.$letter-spacings {
+    --#{config.$prefix}letter-spacing-#{$heading}: #{$value};
+  }
 
-    --#{config.$prefix}heading-color: #{colors.$headings-color-dark};
+  // Transitions & Animations
+  @each $name, $value in color-maps.$transition-durations {
+    --#{config.$prefix}transition-duration-#{$name}: #{$value};
+  }
 
-    --#{config.$prefix}link-color: #{colors.$link-color-dark};
-    --#{config.$prefix}link-color-rgb: #{to-rgb(colors.$link-color-dark)};
-    --#{config.$prefix}link-hover-color: #{colors.$link-hover-color-dark};
+  @each $name, $value in color-maps.$easings {
+    --#{config.$prefix}easing-#{$name}: #{$value};
+  }
 
-    --#{config.$prefix}code-color: #{colors.$code-color-dark};
+  --#{config.$prefix}transition-fast: #{animations.$transition-fast};
+  --#{config.$prefix}transition-base: #{animations.$transition-base};
+  --#{config.$prefix}transition-slow: #{animations.$transition-slow};
 
-    --#{config.$prefix}border-color: #{border.$border-color-dark};
-    --#{config.$prefix}border-color-translucent: #{colors.$border-color-translucent-dark};
+  // Z-index layers
+  @each $layer, $value in z-layers.$z-layers {
+    --#{config.$prefix}z-#{$layer}: #{$value};
+  }
 
-    --#{config.$prefix}focus-border-color: #{colors.$focus-border-color-dark};
+  // Breakpoints
+  @each $breakpoint, $value in breakpoints.$grid-breakpoints {
+    --#{config.$prefix}breakpoint-#{$breakpoint}: #{$value};
+  }
 
-    --#{config.$prefix}form-valid-color: #{colors.$form-valid-color-dark};
-    --#{config.$prefix}form-valid-border-color: #{colors.$form-valid-border-color-dark};
-    --#{config.$prefix}form-invalid-color: #{colors.$form-invalid-color-dark};
-    --#{config.$prefix}form-invalid-border-color: #{colors.$form-invalid-border-color-dark};
+  // Focus ring tokens
+  @each $property, $value in color-maps.$focus-ring {
+    --#{config.$prefix}focus-ring-#{$property}: #{$value};
   }
+
 }
+
+// Dark mode overrides
+@include color-mode(dark, true) {
+  color-scheme: dark;
+
+  --#{config.$prefix}body-color: #{colors.$body-color-dark};
+  --#{config.$prefix}body-bg: #{colors.$body-bg-dark};
+
+  @each $color, $value in color-maps.$theme-colors-dark {
+    --#{config.$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-dark {
+    --#{config.$prefix}#{$color}-rgb: #{to-rgb($value)};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-text-dark {
+    --#{config.$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-bg-subtle-dark {
+    --#{config.$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-border-subtle-dark {
+    --#{config.$prefix}#{$color}-border-subtle: #{$value};
+  }
+
+  @each $color, $value in color-maps.$theme-colors-hover-dark {
+    --#{config.$prefix}#{$color}-hover: #{$value};
+  }
+
+  @each $color, $value in color-maps.$gradient-colors-dark {
+    --#{config.$prefix}#{$color}-gradient: #{$value};
+  }
+
+  --#{config.$prefix}gradient: #{map.get(color-maps.$gradient-colors, dark)};
+
+  --#{config.$prefix}box-shadow: #{box-shadow.$box-shadow-dark};
+  --#{config.$prefix}box-shadow-xs: #{box-shadow.$box-shadow-xs-dark};
+  --#{config.$prefix}box-shadow-sm: #{box-shadow.$box-shadow-sm-dark};
+  --#{config.$prefix}box-shadow-lg: #{box-shadow.$box-shadow-lg-dark};
+  --#{config.$prefix}box-shadow-xl: #{box-shadow.$box-shadow-xl-dark};
+
+  --#{config.$prefix}heading-color: #{colors.$headings-color-dark};
+
+  --#{config.$prefix}link-color: #{colors.$link-color-dark};
+  --#{config.$prefix}link-color-rgb: #{to-rgb(colors.$link-color-dark)};
+  --#{config.$prefix}link-hover-color: #{colors.$link-hover-color-dark};
+  --#{config.$prefix}link-hover-color-rgb: #{to-rgb(colors.$link-hover-color-dark)};
+
+  --#{config.$prefix}code-color: #{colors.$code-color-dark};
+
+  --#{config.$prefix}border-color: #{border.$border-color-dark};
+  --#{config.$prefix}border-color-translucent: #{colors.$border-color-translucent-dark};
+
+  --#{config.$prefix}focus-border-color: #{colors.$focus-border-color-dark};
+
+  --#{config.$prefix}form-valid-color: #{colors.$form-valid-color-dark};
+  --#{config.$prefix}form-valid-border-color: #{colors.$form-valid-border-color-dark};
+  --#{config.$prefix}form-invalid-color: #{colors.$form-invalid-color-dark};
+  --#{config.$prefix}form-invalid-border-color: #{colors.$form-invalid-border-color-dark};
+}

package/src/styles/05-objects/_objects.block.scss

@@ -1,7 +1,7 @@
 @use '../01-settings/settings.block' as settings;
 @use '../01-settings/settings.config' as *;
 @use '../02-tools/tools.breakpoints' as *;
-@use '../01-settings/settings.maps' as *;
+@use '../01-settings/settings.design-tokens' as *;
 
 // Block Objects Styles
 // Provides flexible section layout with customizable spacing and backgrounds