@acorex/styles 21.0.0-next.6 → 21.0.0-next.7

package/mixins/_editor-looks.scss

@@ -1,32 +0,0 @@
-@mixin solid-look() {
-  --ax-comp-editor-bg-color: var(--ax-sys-color-lightest-surface);
-  --ax-comp-editor-border-width: 1px;
-}
-@mixin fill-look() {
-  --ax-comp-editor-box-outline-width: 2px;
-  --ax-comp-editor-border-width: 0px;
-
-  --ax-comp-editor-bg-color: var(--ax-sys-color-surface);
-  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
-  --ax-comp-editor-border-color: var(--ax-sys-color-border-lighter-surface);
-}
-@mixin outline-look() {
-  --ax-comp-editor-bg-color: 0, 0, 0, 0;
-  --ax-comp-editor-border-width: 1px;
-}
-@mixin flat-look() {
-  --ax-comp-editor-border-width: 2px;
-  --ax-comp-editor-border-radius: 0px;
-  --ax-comp-editor-box-outline-width: 0px;
-  border-width: 0px !important;
-  border-bottom-width: var(--ax-comp-editor-border-width) !important;
-}
-
-@mixin none-look() {
-  --ax-comp-editor-border-radius: 0px;
-  --ax-comp-editor-box-outline-width: 0px;
-  --ax-comp-editor-border-width: 0px;
-  --ax-comp-editor-bg-color: 0, 0, 0, 0;
-  --ax-comp-editor-border-color: 0, 0, 0, 0;
-  --ax-comp-editor-text-color: var(--ax-sys-color-on-lighter-surface);
-}

package/mixins/_media.scss

@@ -1,73 +0,0 @@
-@mixin media($media) {
-  // phone -> xs
-  @if $media == 'xs' {
-    @media (min-width: 320px) and (max-width: 640px) {
-      @content;
-    }
-  }
-
-  // tablet -> md
-  @if $media == 'md' {
-    @media (min-width: 768px) {
-      @content;
-    }
-  }
-
-  // tablet-landscape  -> lg
-  @if $media == 'lg' {
-    @media (min-width: 1024px) {
-      @content;
-    }
-  }
-
-  // desktop  -> xl
-  @if $media == 'xl' {
-    @media (min-width: 1280px) {
-      @content;
-    }
-  }
-
-  // desktop-large  -> 2xl
-  @if $media == '2xl' {
-    @media (min-width: 1536px) {
-      @content;
-    }
-  }
-}
-
-@mixin mediaLessThan($media) {
-  // phone -> xs
-  @if $media == 'xs' {
-    @media screen and (max-width: 640px) {
-      @content;
-    }
-  }
-
-  // tablet -> md
-  @if $media == 'md' {
-    @media screen and (max-width: 768px) {
-      @content;
-    }
-  }
-
-  // tablet-landscape  -> lg
-  @if $media == 'lg' {
-    @media screen and (max-width: 1024px) {
-      @content;
-    }
-  }
-
-  // desktop  -> xl
-  @if $media == 'xl' {
-    @media screen and (max-width: 1280px) {
-      @content;
-    }
-  }
-
-  // desktop-large  -> 2xl
-  @if $media == '2xl' {
-    @media screen and (max-width: 1536px) {
-      @content;
-    }
-  }
-}

package/mixins/_scroll-bar.scss

@@ -1,35 +0,0 @@
-@mixin scroll-bar() {
-  :root,
-  * {
-    --ax-sys-scroller-size: 5px;
-    --ax-sys-scroller-size-radius: 3px;
-    --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
-    --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
-    scrollbar-width: thin;
-    scrollbar-color: var(--ax-sys-scroller-thumb-color) var(--ax-sys-scroller-track-color);
-  }
-
-  .ax-dark,
-  .ax-dark * {
-    --ax-sys-scroller-size: 5px;
-    --ax-sys-scroller-size-radius: 3px;
-    --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darker-surface));
-    --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-lightest-surface));
-    scrollbar-color: var(--ax-sys-scroller-thumb-color) var(--ax-sys-scroller-track-color);
-  }
-
-  ::-webkit-scrollbar {
-    width: var(--ax-sys-scroller-size);
-    height: var(--ax-sys-scroller-size);
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--ax-sys-scroller-track-color);
-    border-radius: var(--ax-sys-scroller-size-radius);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--ax-sys-scroller-thumb-color);
-    border-radius: var(--ax-sys-scroller-size-radius);
-  }
-}

package/mixins/_util.scss

@@ -1,19 +0,0 @@
-@mixin darkMode() {
-  .ax-dark {
-    @content;
-  }
-}
-@mixin direction($dir) {
-  html {
-    @if ($dir == 'rtl') {
-      &[dir='rtl'] {
-        @content;
-      }
-    }
-    @if ($dir == 'ltr') {
-      &[dir='ltr'] {
-        @content;
-      }
-    }
-  }
-}

package/mixins/index.scss

@@ -1,4 +0,0 @@
-@forward './media';
-@forward './util';
-@forward './editor-looks';
-@forward './scroll-bar';

package/utils/_theme-generator.scss

@@ -1,238 +0,0 @@
-@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-palette-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 $color != null {
-          @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 $color != null {
-        @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 $color != null {
-          @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 $color != null {
-        @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

@@ -1,278 +0,0 @@
-@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%);
-  @if ($color) {
-    @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 ($color) {
-    @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

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