@acorex/styles 19.10.0-next.0 → 19.10.0-next.2

package/themes/default.scss

@@ -1,245 +1,32 @@
+@use '../utils/index.scss' as *;
+
+$theme-colors: (
+  'primary': #2563eb,
+  'secondary': #e84f88,
+  'success': #10b981,
+  'warning': #ffca28,
+  'danger': #ff2056,
+  'ghost': #71717a,
+) !default;
+
+$theme-surfaces: (
+  'light-start': #ffffff,
+  'light-end': #dee2e6,
+  'dark-start': #13161b,
+  'dark-end': #0c0e12,
+) !default;
+
+@forward '../variables/index.scss';
+
 :root,
 .ax-light {
   --ax-sys-body-font-size: 1rem;
   --ax-sys-size-base: 2.5rem;
-  --ax-sys-transition-duration: 150ms;
-  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --ax-sys-border-radius: 0.5rem;
-  --ax-sys-border-color: 233, 234, 235;
-  --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
-  --ax-sys-body-text-color: 22, 22, 22;
-
-  // Surfaces
-  --ax-sys-color-surface-light: 255, 255, 255;
-  --ax-sys-color-on-surface-light: 0, 0, 0;
-  --ax-sys-color-border-surface-light: 0, 0, 0;
-
-  --ax-sys-color-surface-lowest: 255, 255, 255;
-  --ax-sys-color-on-surface-lowest: 40, 40, 40;
-  --ax-sys-color-border-surface-lowest: 233, 236, 239;
-
-  --ax-sys-color-surface-low: 248, 249, 250;
-  --ax-sys-color-on-surface-low: 40, 40, 40;
-  --ax-sys-color-border-surface-low: 233, 236, 239;
-
-  --ax-sys-color-surface: 239, 241, 243;
-  --ax-sys-color-on-surface: 30, 30, 30;
-  --ax-sys-color-border-surface: 232, 235, 238;
-
-  --ax-sys-color-surface-high: 234, 237, 239;
-  --ax-sys-color-on-surface-high: 20, 20, 20;
-  --ax-sys-color-border-surface-high: 228, 231, 234;
-
-  --ax-sys-color-surface-highest: 230, 233, 236;
-  --ax-sys-color-on-surface-highest: 10, 10, 10;
-  --ax-sys-color-border-surface-highest: 225, 229, 233;
 
-  --ax-sys-color-surface-dark: 0, 0, 0;
-  --ax-sys-color-on-surface-dark: 255, 255, 255;
-  --ax-sys-color-border-surface-dark: 255, 255, 255;
-
-  --ax-sys-color-input-surface: 255, 255, 255;
-  --ax-sys-color-input-surface-text: 30, 30, 30;
-  --ax-sys-color-input-surface-placeholder: 180, 180, 180;
-  --ax-sys-color-input-surface-border: 220, 220, 220;
-
-  --ax-sys-color-primary-50: 227, 244, 255;
-  --ax-sys-color-primary-100: 207, 231, 255;
-  --ax-sys-color-primary-200: 167, 207, 255;
-  --ax-sys-color-primary-300: 126, 181, 255;
-  --ax-sys-color-primary-400: 81, 154, 255;
-  --ax-sys-color-primary-500: 43, 127, 255;
-  --ax-sys-color-primary-600: 0, 97, 222;
-  --ax-sys-color-primary-700: 0, 66, 190;
-  --ax-sys-color-primary-800: 0, 31, 158;
-  --ax-sys-color-primary-900: 0, 0, 117;
-  --ax-sys-color-primary-950: 0, 0, 89;
-  --ax-sys-color-on-primary: 255, 255, 255;
-  --ax-sys-color-on-contrast-primary: 0, 0, 89;
-
-  --ax-sys-color-secondary-50: 231, 240, 255;
-  --ax-sys-color-secondary-100: 216, 226, 244;
-  --ax-sys-color-secondary-200: 188, 196, 214;
-  --ax-sys-color-secondary-300: 159, 168, 185;
-  --ax-sys-color-secondary-400: 132, 141, 157;
-  --ax-sys-color-secondary-500: 106, 114, 130;
-  --ax-sys-color-secondary-600: 83, 91, 107;
-  --ax-sys-color-secondary-700: 62, 69, 84;
-  --ax-sys-color-secondary-800: 42, 48, 62;
-  --ax-sys-color-secondary-900: 23, 29, 42;
-  --ax-sys-color-secondary-950: 14, 20, 32;
-  --ax-sys-color-on-secondary: 255, 255, 255;
-  --ax-sys-color-on-contrast-secondary: 14, 20, 32;
-
-  --ax-sys-color-success-50: 199, 255, 228;
-  --ax-sys-color-success-100: 152, 255, 206;
-  --ax-sys-color-success-200: 102, 247, 180;
-  --ax-sys-color-success-300: 78, 227, 162;
-  --ax-sys-color-success-400: 51, 207, 143;
-  --ax-sys-color-success-500: 1, 188, 125;
-  --ax-sys-color-success-600: 0, 153, 93;
-  --ax-sys-color-success-700: 0, 116, 67;
-  --ax-sys-color-success-800: 0, 80, 43;
-  --ax-sys-color-success-900: 0, 47, 21;
-  --ax-sys-color-success-950: 0, 32, 11;
-  --ax-sys-color-on-success: 255, 255, 255;
-  --ax-sys-color-on-contrast-success: 0, 32, 11;
-
-  --ax-sys-color-warning-50: 255, 242, 216;
-  --ax-sys-color-warning-100: 255, 233, 198;
-  --ax-sys-color-warning-200: 255, 213, 158;
-  --ax-sys-color-warning-300: 255, 192, 113;
-  --ax-sys-color-warning-400: 255, 170, 50;
-  --ax-sys-color-warning-500: 253, 154, 1;
-  --ax-sys-color-warning-600: 208, 116, 0;
-  --ax-sys-color-warning-700: 157, 85, 0;
-  --ax-sys-color-warning-800: 109, 55, 0;
-  --ax-sys-color-warning-900: 65, 28, 0;
-  --ax-sys-color-warning-950: 45, 16, 0;
-  --ax-sys-color-on-warning: 255, 255, 255;
-  --ax-sys-color-on-contrast-warning: 45, 16, 0;
-
-  --ax-sys-color-danger-50: 255, 233, 233;
-  --ax-sys-color-danger-100: 255, 216, 216;
-  --ax-sys-color-danger-200: 255, 181, 181;
-  --ax-sys-color-danger-300: 255, 142, 152;
-  --ax-sys-color-danger-400: 255, 94, 117;
-  --ax-sys-color-danger-500: 255, 32, 86;
-  --ax-sys-color-danger-600: 215, 0, 60;
-  --ax-sys-color-danger-700: 165, 0, 43;
-  --ax-sys-color-danger-800: 119, 0, 27;
-  --ax-sys-color-danger-900: 75, 0, 11;
-  --ax-sys-color-danger-950: 54, 0, 5;
-  --ax-sys-color-on-danger: 255, 255, 255;
-  --ax-sys-color-on-contrast-danger: 54, 0, 5;
+  --ax-sys-border-radius: 0.5rem;
 
-  --ax-sys-color-ghost-50: 255, 255, 255;
-  --ax-sys-color-ghost-100: 244, 244, 245;
-  --ax-sys-color-ghost-200: 228, 228, 231;
-  --ax-sys-color-ghost-300: 212, 212, 216;
-  --ax-sys-color-ghost-400: 159, 159, 169;
-  --ax-sys-color-ghost-500: 113, 113, 123;
-  --ax-sys-color-ghost-600: 82, 82, 92;
-  --ax-sys-color-ghost-700: 63, 63, 70;
-  --ax-sys-color-ghost-800: 39, 39, 42;
-  --ax-sys-color-ghost-900: 24, 24, 27;
-  --ax-sys-color-ghost-950: 9, 9, 11;
-  --ax-sys-color-on-ghost: 255, 255, 255;
-  --ax-sys-color-on-contrast-ghost: 24, 24, 27;
+  // --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
+  // --ax-sys-body-text-color: var(--ax-sys-color-surface-lowest-border);
 }
 
-.ax-dark {
-  --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
-  --ax-sys-body-text-color: 255, 255, 255;
-
-  --ax-sys-border-color: 34, 38, 47;
-
-  --ax-sys-color-surface-lowest: 15, 15, 15;
-  --ax-sys-color-on-surface-lowest: 220, 220, 220;
-  --ax-sys-color-border-surface-lowest: 20, 20, 20;
-
-  --ax-sys-color-surface-low: 20, 20, 20;
-  --ax-sys-color-on-surface-low: 230, 230, 230;
-  --ax-sys-color-border-surface-low: 25, 25, 25;
-
-  --ax-sys-color-surface: 25, 25, 25;
-  --ax-sys-color-on-surface: 240, 240, 240;
-  --ax-sys-color-border-surface: 34, 34, 34;
-
-  --ax-sys-color-surface-high: 29, 29, 29;
-  --ax-sys-color-on-surface-high: 250, 250, 250;
-  --ax-sys-color-border-surface-high: 43, 43, 43;
-
-  --ax-sys-color-surface-highest: 34, 34, 34;
-  --ax-sys-color-on-surface-highest: 255, 255, 255;
-  --ax-sys-color-border-surface-highest: 52, 52, 52;
-
-  --ax-sys-color-input-surface: var(--ax-sys-color-surface-lowest);
-  --ax-sys-color-input-surface-text: var(--ax-sys-color-on-surface-lowest);
-  --ax-sys-color-input-surface-placeholder: 100, 100, 100;
-  --ax-sys-color-input-surface-border: var(--ax-sys-color-border-surface);
-
-  --ax-sys-color-primary-50: 233, 247, 255;
-  --ax-sys-color-primary-100: 219, 238, 255;
-  --ax-sys-color-primary-200: 190, 221, 255;
-  --ax-sys-color-primary-300: 161, 203, 255;
-  --ax-sys-color-primary-400: 132, 185, 255;
-  --ax-sys-color-primary-500: 101, 166, 255;
-  --ax-sys-color-primary-600: 67, 146, 255;
-  --ax-sys-color-primary-700: 43, 127, 255;
-  --ax-sys-color-primary-800: 25, 112, 239;
-  --ax-sys-color-primary-900: 0, 98, 223;
-  --ax-sys-color-primary-950: 0, 90, 215;
-  --ax-sys-color-on-primary: 0, 0, 91;
-  --ax-sys-color-on-contrast-primary: 0, 12, 146;
-
-  --ax-sys-color-secondary-50: 240, 249, 255;
-  --ax-sys-color-secondary-100: 233, 242, 255;
-  --ax-sys-color-secondary-200: 219, 228, 243;
-  --ax-sys-color-secondary-300: 206, 214, 229;
-  --ax-sys-color-secondary-400: 192, 201, 215;
-  --ax-sys-color-secondary-500: 179, 187, 202;
-  --ax-sys-color-secondary-600: 166, 174, 188;
-  --ax-sys-color-secondary-700: 153, 161, 175;
-  --ax-sys-color-secondary-800: 135, 143, 157;
-  --ax-sys-color-secondary-900: 118, 126, 139;
-  --ax-sys-color-secondary-950: 110, 117, 131;
-  --ax-sys-color-on-secondary: 16, 22, 32;
-  --ax-sys-color-on-contrast-secondary: 40, 46, 57;
-
-  --ax-sys-color-success-50: 210, 255, 233;
-  --ax-sys-color-success-100: 180, 255, 219;
-  --ax-sys-color-success-200: 115, 255, 191;
-  --ax-sys-color-success-300: 99, 244, 178;
-  --ax-sys-color-success-400: 82, 230, 164;
-  --ax-sys-color-success-500: 63, 216, 151;
-  --ax-sys-color-success-600: 41, 202, 138;
-  --ax-sys-color-success-700: 1, 188, 125;
-  --ax-sys-color-success-800: 0, 170, 108;
-  --ax-sys-color-success-900: 0, 151, 91;
-  --ax-sys-color-success-950: 0, 141, 85;
-  --ax-sys-color-on-success: 0, 31, 10;
-  --ax-sys-color-on-contrast-success: 0, 59, 29;
-
-  --ax-sys-color-warning-50: 255, 245, 222;
-  --ax-sys-color-warning-100: 255, 238, 208;
-  --ax-sys-color-warning-200: 255, 224, 181;
-  --ax-sys-color-warning-300: 255, 210, 152;
-  --ax-sys-color-warning-400: 255, 195, 120;
-  --ax-sys-color-warning-500: 255, 180, 82;
-  --ax-sys-color-warning-600: 255, 165, 33;
-  --ax-sys-color-warning-700: 253, 154, 1;
-  --ax-sys-color-warning-800: 230, 133, 0;
-  --ax-sys-color-warning-900: 203, 114, 0;
-  --ax-sys-color-warning-950: 190, 105, 0;
-  --ax-sys-color-on-warning: 41, 13, 0;
-  --ax-sys-color-on-contrast-warning: 74, 34, 0;
-
-  --ax-sys-color-danger-50: 255, 240, 242;
-  --ax-sys-color-danger-100: 255, 230, 233;
-  --ax-sys-color-danger-200: 255, 210, 215;
-  --ax-sys-color-danger-300: 255, 189, 196;
-  --ax-sys-color-danger-400: 255, 167, 178;
-  --ax-sys-color-danger-500: 255, 144, 159;
-  --ax-sys-color-danger-600: 255, 117, 140;
-  --ax-sys-color-danger-700: 255, 99, 126;
-  --ax-sys-color-danger-800: 234, 80, 109;
-  --ax-sys-color-danger-900: 213, 59, 92;
-  --ax-sys-color-danger-950: 203, 48, 84;
-  --ax-sys-color-on-danger: 54, 0, 9;
-  --ax-sys-color-on-contrast-danger: 97, 0, 25;
-
-  --ax-sys-color-ghost-50: 9, 9, 11;
-  --ax-sys-color-ghost-100: 24, 24, 27;
-  --ax-sys-color-ghost-200: 39, 39, 42;
-  --ax-sys-color-ghost-300: 63, 63, 70;
-  --ax-sys-color-ghost-400: 82, 82, 92;
-  --ax-sys-color-ghost-500: 113, 113, 123;
-  --ax-sys-color-ghost-600: 159, 159, 169;
-  --ax-sys-color-ghost-700: 212, 212, 216;
-  --ax-sys-color-ghost-800: 228, 228, 231;
-  --ax-sys-color-ghost-900: 244, 244, 245;
-  --ax-sys-color-ghost-950: 250, 250, 250;
-  --ax-sys-color-on-ghost: 24, 24, 27;
-  --ax-sys-color-on-contrast-ghost: 244, 244, 245;
-}
+@include generate-pallete-variables($theme-colors, $theme-surfaces, true);

package/utils/_theme-generator.scss

@@ -0,0 +1,228 @@
+@use './utils' as *;
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+
+@function generate-ghost-colors($primary, $impact-rate, $is-dark: false) {
+  @if $is-dark {
+    @return (
+      ax-sys-color-ghost-950: color.mix(white, $primary, (1 - $impact-rate) * 30%),
+      ax-sys-color-ghost-900: color.mix(white, $primary, (1 - $impact-rate) * 10%),
+      ax-sys-color-ghost-800: color.mix(white, $primary, (1 - $impact-rate) * 20%),
+      ax-sys-color-ghost-700: color.mix(white, $primary, (1 - $impact-rate) * 30%),
+      ax-sys-color-ghost-600: color.mix(white, $primary, (1 - $impact-rate) * 45%),
+      ax-sys-color-ghost-500: color.mix(white, $primary, (1 - $impact-rate) * 60%),
+      ax-sys-color-ghost-400: color.mix(white, $primary, (1 - $impact-rate) * 75%),
+      ax-sys-color-ghost-300: color.mix(white, $primary, (1 - $impact-rate) * 85%),
+      ax-sys-color-ghost-200: color.mix(white, $primary, (1 - $impact-rate) * 92%),
+      ax-sys-color-ghost-100: color.mix(white, $primary, (1 - $impact-rate) * 96%),
+      ax-sys-color-ghost-50: color.mix(white, $primary, (1 - $impact-rate) * 70%),
+      ax-sys-color-on-ghost: color.mix(black, $primary, $impact-rate * 8%),
+      //ax-sys-color-on-contrast-ghost: color.mix(white, $primary, (1 - $impact-rate) * 95%),
+      ax-sys-color-on-contrast-ghost: color.mix(black, $primary, $impact-rate * 8%)
+    );
+  } @else {
+    @return (
+      ax-sys-color-ghost-50: color.mix(white, $primary, (1 - $impact-rate) * 99%),
+      ax-sys-color-ghost-100: color.mix(white, $primary, (1 - $impact-rate) * 96%),
+      ax-sys-color-ghost-200: color.mix(white, $primary, (1 - $impact-rate) * 92%),
+      ax-sys-color-ghost-300: color.mix(white, $primary, (1 - $impact-rate) * 85%),
+      ax-sys-color-ghost-400: color.mix(white, $primary, (1 - $impact-rate) * 75%),
+      ax-sys-color-ghost-500: color.mix(white, $primary, (1 - $impact-rate) * 60%),
+      ax-sys-color-ghost-600: color.mix(white, $primary, (1 - $impact-rate) * 45%),
+      ax-sys-color-ghost-700: color.mix(white, $primary, (1 - $impact-rate) * 30%),
+      ax-sys-color-ghost-800: color.mix(white, $primary, (1 - $impact-rate) * 20%),
+      ax-sys-color-ghost-900: color.mix(white, $primary, (1 - $impact-rate) * 10%),
+      ax-sys-color-ghost-950: color.mix(white, $primary, (1 - $impact-rate) * 5%),
+      ax-sys-color-on-ghost: color.mix(white, $primary, (1 - $impact-rate) * 95%),
+      ax-sys-color-on-contrast-ghost: color.mix(black, $primary, $impact-rate * 8%)
+    );
+  }
+}
+
+@function generate-surfaces-colors-variables($surfaces, $is-dark) {
+  // Extract the start and end colors for both light and dark themes
+  $start-color: map.get($surfaces, 'light-start');
+  $end-color: map.get($surfaces, 'light-end');
+
+  // If the dark theme is enabled, use the dark theme colors
+  @if $is-dark {
+    $start-color: map.get($surfaces, 'dark-start');
+    $end-color: map.get($surfaces, 'dark-end');
+  }
+
+  // Lightest Surface (start color)
+  $lightest-surface: $start-color;
+  $on-lightest-surface: contrast-text($lightest-surface, $is-dark);
+  $lightest-surface-border: border-color($lightest-surface, $is-dark);
+
+  // Lighter Surface: 80% of $start-color
+  $lighter-surface: color.mix($start-color, $end-color, 80%);
+  $on-lighter-surface: contrast-text($lighter-surface, $is-dark);
+  $lighter-surface-border: border-color($lighter-surface, $is-dark);
+
+  // Light Surface: 65% of $start-color
+  $light-surface: color.mix($start-color, $end-color, 65%);
+  $on-light-surface: contrast-text($light-surface, $is-dark);
+  $light-surface-border: border-color($light-surface, $is-dark);
+
+  // Base Surface: 50% of $start-color (the midpoint)
+  $surface: color.mix($start-color, $end-color, 50%);
+  $on-surface: contrast-text($surface, $is-dark);
+  $surface-border: border-color($surface, $is-dark);
+
+  // Dark Surface: 35% of $start-color
+  $dark-surface: color.mix($start-color, $end-color, 35%);
+  $on-dark-surface: contrast-text($dark-surface, $is-dark);
+  $dark-surface-border: border-color($dark-surface, $is-dark);
+
+  // Darker Surface: 20% of $start-color
+  $darker-surface: color.mix($start-color, $end-color, 20%);
+  $on-darker-surface: contrast-text($darker-surface, $is-dark);
+  $darker-surface-border: border-color($darker-surface, $is-dark);
+
+  // Darkest Surface (end color)
+  $darkest-surface: $end-color;
+  $on-darkest-surface: contrast-text($darkest-surface, $is-dark);
+  $darkest-surface-border: border-color($darkest-surface, $is-dark);
+
+  @return (
+    ax-sys-color-surface-lightest: $lightest-surface,
+    ax-sys-color-on-surface-lightest: $on-lightest-surface,
+    ax-sys-color-border-surface-lightest: $lightest-surface-border,
+
+    ax-sys-color-surface-lighter: $lighter-surface,
+    ax-sys-color-on-surface-lighter: $on-lighter-surface,
+    ax-sys-color-border-surface-lighter: $lighter-surface-border,
+
+    ax-sys-color-surface-light: $light-surface,
+    ax-sys-color-on-surface-light: $on-light-surface,
+    ax-sys-color-border-surface-light: $light-surface-border,
+
+    ax-sys-color-surface: $surface,
+    ax-sys-color-on-surface: $on-surface,
+    ax-sys-color-border-surface: $surface-border,
+
+    ax-sys-color-surface-dark: $dark-surface,
+    ax-sys-color-on-surface-dark: $on-dark-surface,
+    ax-sys-color-border-surface-dark: $dark-surface-border,
+
+    ax-sys-color-surface-darker: $darker-surface,
+    ax-sys-color-on-surface-darker: $on-darker-surface,
+    ax-sys-color-border-surface-darker: $darker-surface-border,
+
+    ax-sys-color-surface-darkest: $darkest-surface,
+    ax-sys-color-on-surface-darkest: $on-darkest-surface,
+    ax-sys-color-border-surface-darkest: $darkest-surface-border
+  );
+}
+
+@function generate-color-surfaces-variables($name, $color, $is-dark: false) {
+  $palette: light-palette-generator($color);
+  @if $is-dark {
+    $palette: dark-palette-generator($color);
+  }
+
+  // Lightest Surface
+  $lightest-surface: oklch-to-rgba(map.get($palette, 100));
+  $on-lightest-surface: contrast-text($lightest-surface, $is-dark);
+  $lightest-surface-border: border-color($lightest-surface, $is-dark);
+
+  // Lighter Surface
+  $lighter-surface: oklch-to-rgba(map.get($palette, 200));
+  $on-lighter-surface: contrast-text($lighter-surface, $is-dark);
+  $lighter-surface-border: border-color($lighter-surface, $is-dark);
+
+  // Light Surface
+  $light-surface: oklch-to-rgba(map.get($palette, 300));
+  $on-light-surface: contrast-text($light-surface, $is-dark);
+  $light-surface-border: border-color($light-surface, $is-dark);
+
+  // Base Surface
+  $surface: oklch-to-rgba(map.get($palette, 500));
+  $on-surface: contrast-text($surface, $is-dark);
+  $surface-border: border-color($surface, $is-dark);
+
+  // Dark Surface
+  $dark-surface: oklch-to-rgba(map.get($palette, 600));
+  $on-dark-surface: contrast-text($dark-surface, $is-dark);
+  $dark-surface-border: border-color($dark-surface, $is-dark);
+
+  // Darker Surface
+  $darker-surface: oklch-to-rgba(map.get($palette, 700));
+  $on-darker-surface: contrast-text($darker-surface, $is-dark);
+  $darker-surface-border: border-color($darker-surface, $is-dark);
+
+  // Darkest Surface
+  $darkest-surface: oklch-to-rgba(map.get($palette, 800));
+  $on-darkest-surface: contrast-text($darkest-surface, $is-dark);
+  $darkest-surface-border: border-color($darkest-surface, $is-dark);
+
+  @return (
+    ax-sys-color-#{$name}-lightest-surface: $lightest-surface,
+    ax-sys-color-on-#{$name}-lightest-surface: $on-lightest-surface,
+    ax-sys-color-border-#{$name}-lightest-surface: $lightest-surface-border,
+
+    ax-sys-color-#{$name}-lighter-surface: $lighter-surface,
+    ax-sys-color-on-#{$name}-lighter-surface: $on-lighter-surface,
+    ax-sys-color-border-#{$name}-lighter-surface: $lighter-surface-border,
+
+    ax-sys-color-#{$name}-light-surface: $light-surface,
+    ax-sys-color-on-#{$name}-light-surface: $on-light-surface,
+    ax-sys-color-border-#{$name}-light-surface: $light-surface-border,
+
+    ax-sys-color-#{$name}-surface: $surface,
+    ax-sys-color-on-#{$name}-surface: $on-surface,
+    ax-sys-color-border-#{$name}-surface: $surface-border,
+
+    ax-sys-color-#{$name}-dark-surface: $dark-surface,
+    ax-sys-color-on-#{$name}-dark-surface: $on-dark-surface,
+    ax-sys-color-border-#{$name}-dark-surface: $dark-surface-border,
+
+    ax-sys-color-#{$name}-darker-surface: $darker-surface,
+    ax-sys-color-on-#{$name}-darker-surface: $on-darker-surface,
+    ax-sys-color-border-#{$name}-darker-surface: $darker-surface-border,
+
+    ax-sys-color-#{$name}-darkest-surface: $darkest-surface,
+    ax-sys-color-on-#{$name}-darkest-surface: $on-darkest-surface,
+    ax-sys-color-border-#{$name}-darkest-surface: $darkest-surface-border
+  );
+}
+
+@mixin generate-pallete-variables($colors, $theme-surfaces, $generate-color-range: true) {
+  /************** Light Palette **************/
+  :root,
+  .ax-light {
+    // Generate Base Surfaces
+    @include convert-to-rgb(generate-surfaces-colors-variables($theme-surfaces, false));
+    // Generate Ranges
+    @if $generate-color-range {
+      /* Ranges */
+      @each $name, $color in $colors {
+        @include convert-to-rgb(generate-color-ranges-variables($name, $color, false));
+      }
+    }
+    // Generate Colored Surfaces
+    @each $name, $color in $colors {
+      @include convert-to-rgb(generate-color-surfaces-variables($name, $color, false));
+    }
+  }
+
+  /************** Dark Palette **************/
+  .ax-dark {
+    // Generate Base Surfaces
+    @include convert-to-rgb(generate-surfaces-colors-variables($theme-surfaces, true));
+    // Generate Ranges
+    @if $generate-color-range {
+      /* Ranges */
+      @each $name, $color in $colors {
+        @include convert-to-rgb(generate-color-ranges-variables($name, $color, true));
+      }
+    }
+    // Generate Colored Surfaces
+    @each $name, $color in $colors {
+      @include convert-to-rgb(generate-color-surfaces-variables($name, $color, true));
+    }
+  }
+}