@acorex/styles 19.10.0-next.1 → 19.10.0-next.10

package/themes/default.scss

@@ -1,145 +1,41 @@
+@use '../utils/index.scss' as *;
+
+$theme-colors: (
+  'primary': oklch(0.623 0.214 259.815),
+  'secondary': oklch(0.554 0.046 257.417),
+  'success': oklch(0.696 0.17 162.48),
+  'warning': oklch(0.769 0.188 70.08),
+  'danger': (
+    oklch(0.645 0.246 16.439),
+    oklch(0.712 0.194 13.428),
+  ),
+);
+
+$theme-surfaces: (
+  'light-start': #ffffff,
+  'light-end': #d4d4d4,
+  'dark-start': #27272a,
+  'dark-end': #09090b,
+);
+
+$options: (
+  'color-range': true,
+  'light': #ffffff,
+  'dark': #09090b,
+);
+
+@forward '../variables/index.scss';
+
 :root,
 .ax-light {
-  --ax-size-base: 2.5rem;
-  --ax-size-default: var(--ax-size-base);
-  --ax-icon-weight: 400;
-  --ax-icon-size: 100%;
-
-  --ax-rounded-border-default: 0.5rem;
-
-  --ax-color-border-default: 233, 234, 235;
-
-  --ax-color-background-default: 249, 250, 251;
-  --ax-color-text-default: 22, 22, 22;
-
-  --ax-color-surface: 255, 255, 255;
-  --ax-color-surface-fore: 22, 22, 22;
-
-  --ax-color-on-surface: 250, 250, 250;
-  --ax-color-on-surface-fore: 22, 22, 22;
-
-  --ax-color-input-surface: 255, 255, 255;
-  --ax-color-input-surface-fore: 22, 22, 22;
-  --ax-color-input-border: 213, 215, 218;
-
-  --ax-color-ghost: 255, 255, 255;
-  --ax-color-ghost-fore: 22, 22, 22;
-
-  --ax-color-primary-fore: 255, 255, 255;
-  --ax-color-primary-fore-tint: 11, 30, 71;
-  --ax-color-primary-50: 244, 247, 254;
-  --ax-color-primary-100: 233, 239, 253;
-  --ax-color-primary-200: 190, 208, 249;
-  --ax-color-primary-300: 146, 177, 245;
-  --ax-color-primary-400: 102, 146, 241;
-  --ax-color-primary-500: 37, 99, 235;
-  --ax-color-primary-600: 33, 89, 212;
-  --ax-color-primary-700: 26, 69, 165;
-  --ax-color-primary-800: 19, 50, 118;
-  --ax-color-primary-900: 11, 30, 71;
-  --ax-color-primary-950: 4, 10, 23;
-
-  --ax-color-secondary-fore: 255, 255, 255;
-  --ax-color-secondary-fore-tint: 9, 12, 18;
-  --ax-color-secondary-50: 244, 244, 245;
-  --ax-color-secondary-100: 233, 234, 235;
-  --ax-color-secondary-200: 188, 191, 196;
-  --ax-color-secondary-300: 143, 148, 157;
-  --ax-color-secondary-400: 98, 105, 118;
-  --ax-color-secondary-500: 30, 41, 59;
-  --ax-color-secondary-600: 27, 37, 53;
-  --ax-color-secondary-700: 21, 29, 41;
-  --ax-color-secondary-800: 15, 21, 30;
-  --ax-color-secondary-900: 9, 12, 18;
-  --ax-color-secondary-950: 3, 4, 6;
-
-  --ax-color-success-fore: 255, 255, 255;
-  --ax-color-success-fore-tint: 6, 78, 59;
-  --ax-color-success-50: 236, 253, 245;
-  --ax-color-success-100: 209, 250, 229;
-  --ax-color-success-200: 167, 243, 208;
-  --ax-color-success-300: 110, 231, 183;
-  --ax-color-success-400: 52, 211, 153;
-  --ax-color-success-500: 16, 185, 129;
-  --ax-color-success-600: 5, 150, 105;
-  --ax-color-success-700: 4, 120, 87;
-  --ax-color-success-800: 6, 95, 70;
-  --ax-color-success-900: 6, 78, 59;
-  --ax-color-success-950: 2, 44, 34;
-
-  --ax-color-warning-fore: 48, 26, 10;
-  --ax-color-warning-fore-tint: 255, 111, 0;
-  --ax-color-warning-50: 255, 248, 225;
-  --ax-color-warning-100: 255, 236, 179;
-  --ax-color-warning-200: 255, 224, 130;
-  --ax-color-warning-300: 255, 213, 79;
-  --ax-color-warning-400: 255, 202, 40;
-  --ax-color-warning-500: 255, 193, 7;
-  --ax-color-warning-600: 255, 179, 0;
-  --ax-color-warning-700: 255, 160, 0;
-  --ax-color-warning-800: 255, 143, 0;
-  --ax-color-warning-900: 255, 111, 0;
-  --ax-color-warning-950: 72, 40, 15;
-
-  --ax-color-danger-fore: 255, 255, 255;
-  --ax-color-danger-fore-tint: 127, 29, 29;
-  --ax-color-danger-50: 254, 242, 242;
-  --ax-color-danger-100: 254, 226, 226;
-  --ax-color-danger-200: 254, 202, 202;
-  --ax-color-danger-300: 252, 165, 165;
-  --ax-color-danger-400: 248, 113, 113;
-  --ax-color-danger-500: 239, 68, 68;
-  --ax-color-danger-600: 220, 38, 38;
-  --ax-color-danger-700: 185, 28, 28;
-  --ax-color-danger-800: 153, 27, 27;
-  --ax-color-danger-900: 127, 29, 29;
-  --ax-color-danger-950: 69, 10, 10;
-
-  --ax-color-info-fore: 255, 255, 255;
-  --ax-color-info-fore-tint: 49, 46, 129;
-  --ax-color-info-50: 238, 242, 255;
-  --ax-color-info-100: 224, 231, 255;
-  --ax-color-info-200: 199, 210, 254;
-  --ax-color-info-300: 165, 180, 252;
-  --ax-color-info-400: 129, 140, 248;
-  --ax-color-info-500: 99, 102, 241;
-  --ax-color-info-600: 79, 70, 229;
-  --ax-color-info-700: 67, 56, 202;
-  --ax-color-info-800: 55, 48, 163;
-  --ax-color-info-900: 49, 46, 129;
-  --ax-color-info-950: 30, 27, 75;
-
-  --ax-color-neutral-fore: 255, 255, 255;
-  --ax-color-neutral-fore-tint: 17, 24, 39;
-  --ax-color-neutral-50: 249, 250, 251;
-  --ax-color-neutral-100: 243, 244, 246;
-  --ax-color-neutral-200: 229, 231, 235;
-  --ax-color-neutral-300: 209, 213, 219;
-  --ax-color-neutral-400: 156, 163, 175;
-  --ax-color-neutral-500: 107, 114, 128;
-  --ax-color-neutral-600: 75, 85, 99;
-  --ax-color-neutral-700: 55, 65, 81;
-  --ax-color-neutral-800: 31, 41, 55;
-  --ax-color-neutral-900: 17, 24, 39;
-  --ax-color-neutral-950: 3, 7, 18;
+  --ax-sys-body-font-size: 1rem;
+  --ax-sys-size-base: 2.5rem;
+  --ax-sys-border-radius: 0.5rem;
+  --ax-sys-color-body-text: 0, 0, 0;
+  --ax-sys-color-input-text: 0, 0, 0;
+
+  // --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-color-border-default: 34, 38, 47;
-
-  --ax-color-background-default: 12, 14, 18;
-  --ax-color-text-default: 255, 255, 255;
-
-  --ax-color-surface: 19, 22, 27;
-  --ax-color-surface-fore: 255, 255, 255;
-
-  --ax-color-on-surface: 34, 38, 47;
-  --ax-color-on-surface-fore: 255, 255, 255;
-
-  --ax-color-input-surface: 12, 14, 18;
-  --ax-color-input-surface-fore: 224, 224, 224;
-  --ax-color-input-border: 55, 58, 65;
-
-  --ax-color-ghost: 77, 91, 113;
-  --ax-color-ghost-fore: 255, 255, 255;
-}
+@include generate-pallete-variables($theme-colors, $theme-surfaces, $options);

package/utils/_theme-generator.scss

@@ -0,0 +1,230 @@
+@use './utils' as *;
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+
+@function generate-surfaces-colors-variables($surfaces, $options) {
+  $light-color: if(map.has-key($options, 'light'), map.get($options, 'light'), #f0f0f0);
+  $neutral-color: if(map.has-key($options, 'neutral'), map.get($options, 'neutral'), #808080);
+  $dark-color: if(map.has-key($options, 'dark'), map.get($options, 'dark'), #303030);
+  //
+  $is-dark: if(map.has-key($options, 'is-dark'), map.get($options, 'is-dark'), false);
+  //
+  $dark-start-color: map.get($surfaces, 'dark-start');
+  $dark-end-color: map.get($surfaces, 'dark-end');
+  // 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-light: $light-color,
+    ax-sys-color-neutral: $neutral-color,
+    ax-sys-color-dark: $dark-color,
+    //
+    ax-sys-color-lightest-surface: $lightest-surface,
+    ax-sys-color-on-lightest-surface: $on-lightest-surface,
+    ax-sys-color-border-lightest-surface: $lightest-surface-border,
+
+    ax-sys-color-lighter-surface: $lighter-surface,
+    ax-sys-color-on-lighter-surface: $on-lighter-surface,
+    ax-sys-color-border-lighter-surface: $lighter-surface-border,
+
+    ax-sys-color-light-surface: $light-surface,
+    ax-sys-color-on-light-surface: $on-light-surface,
+    ax-sys-color-border-light-surface: $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-dark-surface: $dark-surface,
+    ax-sys-color-on-dark-surface: $on-dark-surface,
+    ax-sys-color-border-dark-surface: $dark-surface-border,
+
+    ax-sys-color-darker-surface: $darker-surface,
+    ax-sys-color-on-darker-surface: $on-darker-surface,
+    ax-sys-color-border-darker-surface: $darker-surface-border,
+
+    ax-sys-color-darkest-surface: $darkest-surface,
+    ax-sys-color-on-darkest-surface: $on-darkest-surface,
+    ax-sys-color-border-darkest-surface: $darkest-surface-border
+  );
+}
+
+@function generate-named-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, $options) {
+  $generate-color-range: map.get($options, 'color-range');
+
+  /************** Light Palette **************/
+  $options: map.deep-merge(
+    $options,
+    (
+      'is-dark': false,
+    )
+  );
+  :root,
+  .ax-light {
+    // Generate Base Surfaces
+    @include convert-to-rgb(generate-surfaces-colors-variables($theme-surfaces, $options));
+    // Generate Ranges
+    @if $generate-color-range {
+      /* Ranges */
+      @each $name, $color in $colors {
+        @if (meta.type-of($color) == list) {
+          $color: list.nth($color, 1);
+        }
+        @include convert-to-rgb(generate-color-ranges-variables($name, $color, false));
+      }
+    }
+    // Generate Colored Surfaces
+    @each $name, $color in $colors {
+      @if (meta.type-of($color) == list) {
+        $color: list.nth($color, 1);
+      }
+      @include convert-to-rgb(generate-named-surfaces-variables($name, $color, false));
+    }
+  }
+
+  /************** Dark Palette **************/
+  $options: map.deep-merge(
+    $options,
+    (
+      'is-dark': true,
+    )
+  );
+  .ax-dark {
+    // Generate Base Surfaces
+    @include convert-to-rgb(generate-surfaces-colors-variables($theme-surfaces, $options));
+    // Generate Ranges
+    @if $generate-color-range {
+      /* Ranges */
+      @each $name, $color in $colors {
+        @if (meta.type-of($color) == list) {
+          $color: list.nth($color, 2);
+        }
+        @include convert-to-rgb(generate-color-ranges-variables($name, $color, true));
+      }
+    }
+    // Generate Colored Surfaces
+    @each $name, $color in $colors {
+      @if (meta.type-of($color) == list) {
+        $color: list.nth($color, 2);
+      }
+      @include convert-to-rgb(generate-named-surfaces-variables($name, $color, true));
+    }
+  }
+}

package/utils/_utils.scss

@@ -0,0 +1,276 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+
+@function strip-rgba($color) {
+  @if meta.type-of($color) == 'color' {
+    $r: math.round(color.channel($color, 'red', rgb));
+    $g: math.round(color.channel($color, 'green', rgb));
+    $b: math.round(color.channel($color, 'blue', rgb));
+    @return $r, $g, $b;
+  }
+  @error "Invalid input: #{$color}. It must be a color.";
+}
+
+@mixin convert-to-rgb($variable-map) {
+  @each $key, $value in $variable-map {
+    --#{$key}: #{strip-rgba($value)};
+  }
+}
+
+// A helper function to clamp a value between $min and $max.
+// Renamed to avoid conflict with the built-in `clamp()` function.
+@function clamp-value($value, $min, $max) {
+  @return max($min, min($value, $max));
+}
+
+// Gamma correction for converting linear sRGB to sRGB.
+// Uses the piecewise function:
+//   if (channel <= 0.0031308) then sRGB = 12.92 * channel
+//   else sRGB = 1.055 * (channel^(1/2.4)) - 0.055
+@function gamma-correct($channel) {
+  @if $channel <= 0.0031308 {
+    @return 12.92 * $channel;
+  } @else {
+    @return 1.055 * math.pow($channel, 1/2.4) - 0.055;
+  }
+}
+
+// Converts an Oklch value to an rgba() color.
+// The input can be either:
+//   • a color (e.g. one produced by `oklch()`), or
+//   • a list of numbers: (L, C, H) or (L, C, H, alpha)
+// In the first case, the built-in color channels are used via `color.channel()`.
+// In the second, a manual conversion is performed.
+@function oklch-to-rgba($color) {
+  // If the input is a color, extract its components using the new API.
+  @if meta.type-of($color) == 'color' {
+    $r: round(color.channel($color, 'red', $space: rgb));
+    $g: round(color.channel($color, 'green', $space: rgb));
+    $b: round(color.channel($color, 'blue', $space: rgb));
+    $a: color.channel($color, 'alpha', $space: rgb);
+    @return rgba($r, $g, $b, $a);
+  }
+  // Otherwise, if the input is a list with at least 3 elements, assume it's (L, C, H, [alpha]).
+  @else if type-of($color) == 'list' {
+    @if length($color) >= 3 {
+      $l: nth($color, 1);
+      $c: nth($color, 2);
+      $h: nth($color, 3);
+      $alpha: if(length($color) >= 4, nth($color, 4), 1);
+
+      // Convert hue from degrees to radians.
+      $h_rad: $h * math.pi() / 180;
+
+      // Convert from Oklch to OKLab.
+      $a: $c * math.cos($h_rad);
+      $b: $c * math.sin($h_rad);
+
+      // Compute intermediate OKLab values.
+      $l_oklab: $l;
+      $l_: $l_oklab + 0.3963377774 * $a + 0.2158037573 * $b;
+      $m_: $l_oklab - 0.1055613458 * $a - 0.0638541728 * $b;
+      $s_: $l_oklab - 0.0894841775 * $a - 1.291485548 * $b;
+
+      // Cube the intermediate values.
+      $l_cube: $l_ * $l_ * $l_;
+      $m_cube: $m_ * $m_ * $m_;
+      $s_cube: $s_ * $s_ * $s_;
+
+      // Convert OKLab (cubed) to linear sRGB.
+      $r_linear: 4.0767416621 * $l_cube - 3.3077115913 * $m_cube + 0.2309699292 * $s_cube;
+      $g_linear: -1.2684380046 * $l_cube + 2.6097574011 * $m_cube - 0.3413193965 * $s_cube;
+      $b_linear: -0.0041960863 * $l_cube - 0.7034186147 * $m_cube + 1.707614701 * $s_cube;
+
+      // Gamma correction.
+      $r: gamma-correct($r_linear);
+      $g: gamma-correct($g_linear);
+      $b: gamma-correct($b_linear);
+
+      // Clamp the sRGB values to the 0–1 range.
+      $r: clamp-value($r, 0, 1);
+      $g: clamp-value($g, 0, 1);
+      $b: clamp-value($b, 0, 1);
+
+      // Convert the 0–1 values to 0–255 integers.
+      $r_int: round($r * 255);
+      $g_int: round($g * 255);
+      $b_int: round($b * 255);
+
+      @return rgba($r_int, $g_int, $b_int, $alpha);
+    } @else {
+      @error "Invalid input for oklch-to-rgba: list must have at least 3 elements.";
+    }
+  } @else {
+    @error "Invalid input for oklch-to-rgba: expected a color or a list of numbers.";
+  }
+}
+
+@function shift-dark-mode-color($color, $lightness: 20%, $saturation: 10%) {
+  // Convert the color to HSL
+  $hsl: hsl(hue($color), saturation($color), lightness($color));
+
+  // Check if the color is already dark (lightness < 40%)
+  @if lightness($hsl) < 40% {
+    // If the color is dark, adjust it slightly or leave it unchanged
+    @return $color; // Or adjust slightly, e.g., darken($color, 5%);
+  } @else {
+    // If the color is light, darken it
+    $new-lightness: max(0%, lightness($hsl) - $lightness); // Ensure lightness doesn't go below 0%
+    $new-saturation: min(100%, saturation($hsl) + $saturation); // Ensure saturation doesn't exceed 100%
+    @return hsl(hue($hsl), $new-saturation, $new-lightness);
+  }
+}
+
+// Function to calculate text color based on surface color
+@function lightness-calc($hue) {
+  @if ($hue <= 80) {
+    @return 0.06 * $hue + 75;
+  }
+  @if ($hue < 270) {
+    @return -0.07 * $hue + 85.82;
+  }
+  @return 0.09 * $hue + 42.6;
+}
+@function is-dark-on-surface($lightness, $hue, $is-dark) {
+  @if ($is-dark) {
+    @return $lightness >= math.div(lightness-calc(math.div($hue, 1deg)) - 15, 100);
+  } @else {
+    @return $lightness >= math.div(lightness-calc(math.div($hue, 1deg)), 100);
+  }
+}
+
+@function contrast-text($color, $is-dark: false) {
+  $hue: color.channel($color, 'hue', $space: oklch);
+  $chroma: color.channel($color, 'chroma', $space: oklch);
+  $lightness: color.channel($color, 'lightness', $space: oklch);
+  $lightness: math.div($lightness, 100%);
+  $l: null;
+  @if ($is-dark) {
+    @if (is-dark-on-surface($lightness, $hue, true)) {
+      $l: 0.2;
+    } @else {
+      $l: 0.995;
+    }
+  } @else {
+    @if (is-dark-on-surface($lightness, $hue, false)) {
+      $l: 0.3;
+    } @else {
+      $l: 0.995;
+    }
+  }
+  $oklch-color: oklch($l $chroma $hue);
+  @return color.to-gamut($oklch-color, $space: rgb, $method: local-minde);
+}
+
+@function border-color($color, $is-dark) {
+  @if $is-dark {
+    // Dark theme: lightening the border color for contrast
+    @return color.adjust($color, $lightness: 9%);
+  } @else {
+    // Light theme: darkening the border color for contrast
+    @return color.adjust($color, $lightness: -7%);
+  }
+}
+
+@function light-palette-generator($color) {
+  $shades: (
+    50: 40,
+    100: 90,
+    200: 160,
+    300: 270,
+    400: 410,
+    500: 500,
+    600: 590,
+    700: 700,
+    800: 790,
+    900: 860,
+    950: 1060,
+  );
+  $palette: ();
+  $hue: color.channel($color, 'hue', $space: oklch);
+  $chroma: color.channel($color, 'chroma', $space: oklch);
+  $lightness: color.channel($color, 'lightness', $space: oklch);
+  $lightness: math.div($lightness, 100%);
+  @each $name, $shade in $shades {
+    $l: null;
+    @if (meta.type-of($shade) == number) {
+      @if ($shade <= 500) {
+        $l: math.div((-$shade + $shade * $lightness + 500), 500);
+      } @else {
+        $l: (1 - math.div(($shade - 500), 500)) * ($lightness - 0.3) + 0.3;
+      }
+      $palette: map.set($palette, $name, $l);
+    }
+    $oklch-color: oklch((map.get($palette, $name) * 100%) $chroma $hue);
+    $gamut-oklch: color.to-gamut($oklch-color, $space: rgb, $method: local-minde);
+    @if ($name==950) {
+      $gamut-oklch: color.scale($gamut-oklch, $chroma: -50%, $space: oklch);
+    }
+    @if ($name==900) {
+      $gamut-oklch: color.scale($gamut-oklch, $chroma: -33%, $space: oklch);
+    }
+    @if ($name==800) {
+      $gamut-oklch: color.scale($gamut-oklch, $chroma: -8%, $space: oklch);
+    }
+    $palette: map.set($palette, $name, $gamut-oklch);
+  }
+  @return $palette;
+}
+
+@function dark-palette-generator($color) {
+  $shades: (
+    50: 50,
+    100: 100,
+    200: 200,
+    300: 300,
+    400: 400,
+    500: 500,
+    600: 600,
+    700: 700,
+    800: 800,
+    900: 900,
+    950: 950,
+  );
+  $palette: ();
+  $hue: color.channel($color, 'hue', $space: oklch);
+  $chroma: color.channel($color, 'chroma', $space: oklch);
+  $lightness: color.channel($color, 'lightness', $space: oklch);
+  $lightness: math.div($lightness, 100%);
+  @each $name, $shade in $shades {
+    $l: null;
+    @if (meta.type-of($shade) == number) {
+      @if ($shade <= 700) {
+        $l: math.div((-$shade + $shade * $lightness + 700), 700);
+      } @else {
+        $l: (1 - math.div(($shade - 700), 700)) * ($lightness - 0.3) + 0.3;
+      }
+      $palette: map.set($palette, $name, $l);
+    }
+    $oklch-color: oklch((map.get($palette, $name) * 100%) $chroma $hue);
+    $gamut-oklch: color.to-gamut($oklch-color, $space: rgb, $method: local-minde);
+    $palette: map.set($palette, $name, $gamut-oklch);
+  }
+  @return $palette;
+}
+
+@function generate-color-ranges-variables($name, $color, $is-dark: false) {
+  $colors: ();
+  $light-shades: (50, 100, 200, 300, 400);
+  $dark-shades: (600, 700, 800, 900, 950);
+
+  @if $is-dark {
+    $palette: dark-palette-generator($color);
+    @each $shade, $color in $palette {
+      $colors: map.merge($colors, (ax-sys-color-#{$name}-#{$shade}: $color));
+    }
+  } @else {
+    $palette: light-palette-generator($color);
+    @each $shade, $color in $palette {
+      $colors: map.merge($colors, (ax-sys-color-#{$name}-#{$shade}: $color));
+    }
+  }
+
+  @return $colors;
+}

package/utils/index.scss

@@ -0,0 +1,2 @@
+@forward './theme-generator';
+@forward './utils';

package/variables/_colors.scss

@@ -0,0 +1,7 @@
+$theme-colors: (
+  'primary': #3b82f6,
+  'secondary': #64748b,
+  'success': #22c55e,
+  'warning': #f59e0b,
+  'danger': #f43f5e,
+) !default;

package/variables/_looks.scss

@@ -0,0 +1 @@
+$theme-looks: 'solid', 'outline', 'twotone', 'blank', 'link' !default;