@acorex/styles 21.0.0-next.16 → 21.0.0-next.18

package/utils/_utils.scss

@@ -0,0 +1,278 @@
+@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

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

package/components/_editor-container.css

@@ -1,306 +0,0 @@
-:root,
-.ax-editor-container {
-  --ax-comp-editor-font-size: 0.875rem;
-  --ax-comp-editor-gap: 0.5rem;
-  --ax-comp-editor-space-start-size: 0.5rem;
-  --ax-comp-editor-space-end-size: 0.5rem;
-  --ax-comp-editor-space-block-size: 0.5rem;
-  --ax-comp-editor-height: var(--ax-sys-size-base);
-  --ax-comp-editor-placeholder-space-x: 0.75rem;
-  --ax-comp-editor-error-bg-color: var(--ax-sys-color-danger-light-surface);
-  --ax-comp-editor-error-text-color: var(--ax-sys-color-danger-surface);
-  --ax-comp-editor-error-border-color: var(--ax-sys-color-border-danger-surface);
-  --ax-comp-editor-error-box-shadow-color: var(--ax-sys-color-danger-surface);
-  --ax-comp-editor-text-color: var(--ax-sys-color-on-surface);
-  --ax-comp-editor-border-color: var(--ax-sys-color-border-surface);
-  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
-  --ax-comp-editor-box-outline-width: 1px;
-  --ax-comp-editor-box-outline-color: var(--ax-sys-color-primary-surface);
-  --ax-comp-editor-placeholder-opacity: 0.5;
-  --ax-comp-editor-focused-border-color: var(--ax-sys-color-border-primary-surface);
-  --ax-comp-editor-focused-box-shadow-color: var(--ax-sys-color-primary-surface);
-  --ax-comp-editor-border-width: 0px;
-}
-
-.ax-editor-container {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  width: 100%;
-  height: var(--ax-comp-editor-height);
-  font-size: var(--ax-comp-editor-font-size);
-  border-radius: var(--ax-comp-editor-border-radius);
-  border-width: var(--ax-comp-editor-border-width);
-  border-color: rgba(var(--ax-comp-editor-border-color));
-  background-color: rgba(var(--ax-comp-editor-bg-color));
-  color: rgba(var(--ax-comp-editor-text-color));
-  position: relative;
-  gap: var(--ax-comp-editor-gap);
-  padding-inline-end: var(--ax-comp-editor-space-end-size);
-  padding-inline-start: var(--ax-comp-editor-space-start-size);
-  justify-content: space-between;
-}
-
-.ax-editor-container .ax-icon {
-  font-size: var(--ax-comp-editor-icon-font-size);
-}
-
-.ax-editor-container:has(> ax-prefix) {
-  padding-inline-start: 0;
-}
-
-.ax-editor-container:has(> ax-prefix) > ax-prefix:has(ax-button, .ax-editor-container) {
-  --ax-comp-editor-space-start-size: 0px;
-}
-
-.ax-editor-container:has(> ax-prefix) > ax-prefix {
-  padding-inline-start: var(--ax-comp-editor-space-start-size);
-}
-
-.ax-editor-container:has(> ax-suffix) {
-  padding-inline-end: 0;
-}
-
-.ax-editor-container:has(> ax-suffix) > ax-suffix:has(ax-button, .ax-editor-container) {
-  --ax-comp-editor-space-end-size: 0px;
-}
-
-.ax-editor-container:has(> ax-suffix) > ax-suffix {
-  padding-inline-end: var(--ax-comp-editor-space-end-size);
-}
-
-.ax-editor-container:not(.ax-state-disabled):focus-within {
-  border-color: rgba(var(--ax-comp-editor-focused-border-color));
-  outline-width: var(--ax-comp-editor-box-outline-width);
-  outline-style: solid;
-  outline-color: rgba(var(--ax-comp-editor-focused-border-color));
-}
-
-.ax-editor-container.ax-state-error {
-  border-color: rgba(var(--ax-comp-editor-error-border-color));
-  outline-width: var(--ax-comp-editor-box-outline-width);
-  outline-color: rgba(var(--ax-comp-editor-error-border-color));
-  outline-style: solid;
-}
-
-.ax-editor-container.ax-state-error:focus-within {
-  border-color: rgba(var(--ax-comp-editor-error-border-color));
-}
-
-.ax-editor-container.ax-state-error .ax-input .ax-placeholder,
-.ax-editor-container.ax-state-error .ax-input::placeholder {
-  color: rgba(var(--ax-comp-editor-error-text-color), var(--ax-comp-editor-placeholder-opacity));
-}
-
-.ax-editor-container.ax-solid {
-  --ax-comp-editor-bg-color: var(--ax-sys-color-lightest-surface);
-  --ax-comp-editor-border-width: 1px;
-}
-
-.ax-editor-container.ax-outline {
-  --ax-comp-editor-bg-color: 0, 0, 0, 0;
-  --ax-comp-editor-border-width: 1px;
-}
-
-.ax-editor-container.ax-flat {
-  --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;
-}
-
-.ax-editor-container.ax-fill {
-  --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);
-}
-
-.ax-editor-container.ax-none {
-  --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);
-}
-
-.ax-editor-container .ax-editor-input {
-  height: 100%;
-  flex: 1 1 0%;
-}
-
-.ax-editor-container .ax-editor-input .ax-input {
-  height: 100%;
-}
-
-.ax-editor-container .ax-input {
-  font-size: var(--ax-comp-editor-font-size);
-  line-height: var(--ax-comp-editor-font-size);
-  color: rgba(var(--ax-comp-editor-text-color));
-  cursor: inherit;
-}
-
-.ax-editor-container .ax-input .ax-placeholder,
-.ax-editor-container .ax-input::placeholder {
-  font-size: inherit;
-  font-weight: 400;
-  color: rgb(var(--ax-comp-editor-text-color), var(--ax-comp-editor-placeholder-opacity));
-}
-
-.ax-editor-container .ax-input:focus,
-.ax-editor-container .ax-input:focus-visible,
-.ax-editor-container .ax-input:focus-within {
-  outline: none;
-}
-
-.ax-editor-container.ax-state-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ax-editor-container .ax-editor-control {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  padding-inline-start: 0.5rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  color: rgba(var(--ax-comp-editor-text-color));
-}
-
-.ax-editor-container.ax-button-icon {
-  padding: 0 0.5rem;
-}
-
-.ax-editor-container .ax-input,
-.ax-editor-container .ax-text-area {
-  text-align: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  height: 100%;
-  width: 100%;
-  flex: 1 1 0%;
-  background-color: transparent;
-  font-weight: inherit;
-}
-
-.ax-editor-container .ax-input:focus,
-.ax-editor-container .ax-text-area:focus {
-  box-shadow: none;
-}
-
-.ax-editor-container .ax-editor-button {
-  font-size: var(--ax-comp-editor-button-font-size, var(--ax-comp-editor-font-size));
-  height: var(--ax-comp-editor-button-height, 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-}
-
-.ax-editor-container > ax-prefix,
-.ax-editor-container > ax-suffix {
-  height: 100%;
-  max-width: fit-content;
-}
-
-.ax-editor-container > ax-prefix ax-button,
-.ax-editor-container > ax-prefix ax-text,
-.ax-editor-container > ax-prefix ax-icon,
-.ax-editor-container > ax-prefix .ax-editor-container,
-.ax-editor-container > ax-suffix ax-button,
-.ax-editor-container > ax-suffix ax-text,
-.ax-editor-container > ax-suffix ax-icon,
-.ax-editor-container > ax-suffix .ax-editor-container {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0px;
-}
-
-.ax-editor-container > ax-prefix ax-title,
-.ax-editor-container > ax-suffix ax-title {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.ax-editor-container > ax-prefix > ax-text,
-.ax-editor-container > ax-suffix > ax-text {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ax-editor-container .ax-button {
-  height: 100% !important;
-  border-radius: 0px !important;
-}
-
-.ax-editor-container .ax-button.ax-button-icon {
-  height: 100%;
-  width: var(--ax-comp-editor-height);
-}
-
-.ax-editor-container ax-popover {
-  position: absolute;
-}
-
-.ax-xs .ax-editor-container,
-.ax-editor-container.ax-xs {
-  --ax-comp-editor-font-size: 0.75rem;
-  --ax-comp-editor-space-start-size: 0.25rem;
-  --ax-comp-editor-space-end-size: 0.25rem;
-  --ax-comp-editor-button-font-size: 0.625rem;
-  --ax-comp-editor-gap: 0.25rem;
-  --ax-comp-editor-icon-font-size: 0.75rem;
-}
-
-.ax-sm .ax-editor-container,
-.ax-editor-container.ax-sm {
-  --ax-comp-editor-font-size: 0.875rem;
-  --ax-comp-editor-space-start-size: 0.5rem;
-  --ax-comp-editor-space-end-size: 0.5rem;
-  --ax-comp-editor-button-font-size: 0.75rem;
-  --ax-comp-editor-gap: 0.375rem;
-  --ax-comp-editor-icon-font-size: 0.875rem;
-}
-
-.ax-md .ax-editor-container,
-.ax-editor-container,
-.ax-editor-container.ax-md {
-  --ax-comp-editor-space-start-size: 0.75rem;
-  --ax-comp-editor-space-end-size: 0.75rem;
-  --ax-comp-editor-button-font-size: 0.875rem;
-  --ax-comp-editor-gap: 0.5rem;
-  --ax-comp-editor-icon-font-size: 1rem;
-}
-
-.ax-lg .ax-editor-container,
-.ax-editor-container.ax-lg {
-  --ax-comp-editor-font-size: 1.125rem;
-  --ax-comp-editor-space-start-size: 1.125rem;
-  --ax-comp-editor-space-end-size: 1.125rem;
-  --ax-comp-editor-button-font-size: 0.875rem;
-  --ax-comp-editor-gap: 0.625rem;
-  --ax-comp-editor-icon-font-size: 1.25rem;
-}
-
-.ax-xl .ax-editor-container,
-.ax-editor-container.ax-xl {
-  --ax-comp-editor-font-size: 1.5rem;
-  --ax-comp-editor-space-start-size: 1.5rem;
-  --ax-comp-editor-space-end-size: 1.5rem;
-  --ax-comp-editor-button-font-size: 1rem;
-  --ax-comp-editor-gap: 0.75rem;
-  --ax-comp-editor-icon-font-size: 1.5rem;
-}
-
-ax-validation-rule {
-  position: absolute;
-}

package/components/_radio.css

@@ -1,33 +0,0 @@
-.ax-radio {
-  margin: 0px;
-  height: 1rem;
-  min-height: 1rem;
-  min-width: 1rem;
-  width: 1rem;
-  cursor: pointer;
-  appearance: none;
-  border-radius: 9999px;
-  border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-border-surface));
-  background-color: rgba(var(--ax-sys-color-input-surface));
-  vertical-align: middle;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  &:checked {
-    border-color: rgba(var(--ax-sys-color-primary-500)) !important;
-    background-color: rgba(var(--ax-sys-color-primary-500)) !important;
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  &:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  }
-  &:focus-visible,
-  &:focus {
-    box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
-  }
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}

package/components/index.css

@@ -1,11 +0,0 @@
-@import './_action-item.css';
-@import './_actionsheet.css';
-@import './_check-box.css';
-@import './_drop-down.css';
-@import './_editor-container.css';
-@import './_general-button.css';
-@import './_list.css';
-@import './_radio.css';
-@import './_ripple.css';
-@import './_table.css';
-@import './_uploader.css';