@acorex/styles 21.0.1-next.91 → 21.0.1-next.92

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/variables/_colors.scss

@@ -0,0 +1,14 @@
+$theme-colors: (
+  'primary': #3b82f6,
+  'secondary': #64748b,
+  'success': #22c55e,
+  'warning': #f59e0b,
+  'danger': #f43f5e,
+  'accent1': null,
+  'accent2': null,
+  'accent3': null,
+  'accent4': null,
+  'accent5': null,
+  'accent6': null,
+  'accent7': null,
+) !default;

package/variables/_looks.scss

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

package/variables/index.scss

@@ -0,0 +1,2 @@
+@forward './colors';
+@forward './looks';

package/components/_editor-container.css

@@ -1,48 +0,0 @@
-@import '../themes/default.css';
-
-@layer base {
-  .ax-editor-container {
-    @apply h-9 min-h-9 px-3 py-3 text-sm;
-    .ax-content {
-      @apply text-sm;
-    }
-  }
-
-  .ax-editor-container {
-    @apply rounded-default relative flex h-9 min-h-9 items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
-
-    .ax-editor-container {
-      @apply p-0;
-      .ax-input,
-      .ax-editor {
-        @apply p-0;
-      }
-    }
-
-    .ax-input,
-    .ax-editor {
-      font-size: inherit;
-
-      @apply w-full flex-1 py-2 outline-0 outline-transparent placeholder:opacity-50;
-    }
-    .ax-placeholder {
-      @apply opacity-50;
-    }
-
-    &.ax-state-error {
-      @apply border-danger-600! focus-within:ring-danger-600/30!;
-    }
-
-    &:has(.ax-general-button-control, .ax-general-button-icon) {
-      @apply pe-1;
-    }
-
-    ax-prefix,
-    ax-suffix {
-      @apply flex items-center gap-2;
-    }
-    ax-prefix {
-      @apply pe-2;
-    }
-  }
-}

package/components/_general-button.css

@@ -1,62 +0,0 @@
-@import '../themes/default.css';
-
-@layer base {
-  .ax-general-button,
-  .ax-general-button-icon {
-    @apply rounded-default inline-flex cursor-pointer items-center justify-center transition select-none;
-    @apply disabled:cursor-not-allowed disabled:opacity-50;
-    @apply text-text-default/50 hover:text-text-default/70;
-    @apply hover:bg-bg-default/10;
-    @apply focus-visible:ring-primary/30 focus-visible:ring-3 focus-visible:outline-none;
-    * {
-      @apply cursor-[inherit];
-    }
-  }
-
-  .ax-general-button {
-    @apply px-2 py-1 text-sm;
-
-    &.ax-xs {
-      @apply p-1.5 text-xs;
-    }
-
-    &.ax-sm {
-      @apply p-2 text-sm;
-    }
-
-    &.ax-md {
-      @apply p-2 text-sm;
-    }
-
-    &.ax-lg {
-      @apply p-2.5 text-lg;
-    }
-
-    &.ax-xl {
-      @apply p-2.5 text-xl;
-    }
-  }
-  .ax-general-button-icon {
-    @apply size-6 px-2 py-1 text-sm;
-
-    &.ax-xs {
-      @apply size-5 p-1.5 text-xs;
-    }
-
-    &.ax-sm {
-      @apply size-6 p-2 text-sm;
-    }
-
-    &.ax-md {
-      @apply size-6 p-2 text-sm;
-    }
-
-    &.ax-lg {
-      @apply size-8 p-2.5 text-lg;
-    }
-
-    &.ax-xl {
-      @apply size-9 p-2.5 text-xl;
-    }
-  }
-}

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';

package/icons/fontawesome/_variables.css

@@ -1,229 +0,0 @@
-:root {
-  --ax-icon-more-horizontal: '\f141';
-  --ax-icon-more-horizontal-after: '';
-
-  --ax-icon-more-vertical: '\f142';
-  --ax-icon-more-vertical-after: '';
-
-  --ax-icon-arrow-long-up: '\f176';
-  --ax-icon-arrow-long-up-after: '';
-
-  --ax-icon-arrow-long-down: '\f175';
-  --ax-icon-arrow-long-down-after: '';
-
-  --ax-icon-color-palette: '\f53f';
-  --ax-icon-color-palette-after: '';
-
-  --ax-icon-arrow-left: '\f0d9';
-  --ax-icon-arrow-left-after: '';
-
-  --ax-icon-arrow-down: '\f0d7';
-  --ax-icon-arrow-down-after: '';
-
-  --ax-icon-arrow-up: '\f0d8';
-  --ax-icon-arrow-up-after: '';
-
-  --ax-icon-arrow-right: '\f0da';
-  --ax-icon-arrow-right-after: '';
-
-  --ax-icon-chevron-left: '\f053';
-  --ax-icon-chevron-left-after: '';
-
-  --ax-icon-chevron-down: '\f078';
-  --ax-icon-chevron-down-after: '';
-
-  --ax-icon-chevron-up: '\f077';
-  --ax-icon-chevron-up-after: '';
-
-  --ax-icon-chevron-right: '\f054';
-  --ax-icon-chevron-right-after: '';
-
-  --ax-icon-chevron-double-right: '\f324';
-  --ax-icon-chevron-double-right-after: '';
-
-  --ax-icon-chevron-double-left: '\f323';
-  --ax-icon-chevron-double-left-after: '';
-
-  --ax-icon-first-page: '\f33e';
-  --ax-icon-first-page-after: '';
-
-  --ax-icon-last-page: '\f340';
-  --ax-icon-last-page-after: '';
-
-  --ax-icon-calendar: '\f133';
-  --ax-icon-calendar-after: '';
-
-  --ax-icon-info: '\f05a';
-  --ax-icon-info-after: '';
-
-  --ax-icon-error: '\f06a';
-  --ax-icon-error-after: '';
-
-  --ax-icon-warning: '\f071';
-  --ax-icon-warning-after: '';
-
-  --ax-icon-check: '\f00c';
-  --ax-icon-check-after: '';
-
-  --ax-icon-check-circle: '\f058';
-  --ax-icon-check-circle-after: '';
-
-  --ax-icon-dobble-check: '\f560';
-  --ax-icon-dobble-check-after: '';
-
-  --ax-icon-close: '\f00d';
-  --ax-icon-close-after: '';
-
-  --ax-icon-clear: '\f057';
-  --ax-icon-clear-after: '';
-
-  --ax-icon-visibility-off: '\f070';
-  --ax-icon-visibility-off-after: '';
-
-  --ax-icon-visibility: '\f06e';
-  --ax-icon-visibility-after: '';
-
-  --ax-icon-unfold-more: '\f0dc';
-  --ax-icon-unfold-more-after: '';
-
-  --ax-icon-download: '\f019';
-  --ax-icon-download-after: '';
-
-  --ax-icon-upload: '\e09a';
-  --ax-icon-upload-after: '';
-
-  --ax-icon-search: '\f002';
-  --ax-icon-search-after: '';
-
-  --ax-icon-copy: '\f0c5';
-  --ax-icon-copy-after: '';
-
-  --ax-icon-refresh: '\f021';
-  --ax-icon-refresh-after: '';
-
-  --ax-icon-inbox: '\f01c';
-  --ax-icon-inbox-after: '';
-
-  --ax-icon-emoji: '\f118';
-  --ax-icon-emoji-after: '';
-
-  --ax-icon-attach: '\f0c6';
-  --ax-icon-attach-after: '';
-
-  --ax-icon-mic: '\f130';
-  --ax-icon-mic-after: '';
-
-  --ax-icon-send: '\f1d8';
-  --ax-icon-send-after: '';
-
-  --ax-icon-play: '\f04b';
-  --ax-icon-play-after: '';
-
-  --ax-icon-pause: '\f04c';
-  --ax-icon-pause-after: '';
-
-  --ax-icon-reload: '\f2f9';
-  --ax-icon-reload-after: '';
-
-  --ax-icon-heart: '\f004';
-  --ax-icon-heart-after: '';
-
-  --ax-icon-comment: '\f075';
-  --ax-icon-comment-after: '';
-
-  --ax-icon-bold: '\f032';
-  --ax-icon-bold-after: '';
-
-  --ax-icon-italic: '\f033';
-  --ax-icon-italic-after: '';
-
-  --ax-icon-strike: '\f0cc';
-  --ax-icon-strike-after: '';
-
-  --ax-icon-under-line: '\f0cd';
-  --ax-icon-under-line-after: '';
-
-  --ax-icon-order-list: '\f0cb';
-  --ax-icon-order-list-after: '';
-
-  --ax-icon-un-order-list: '\f0ca';
-  --ax-icon-un-order-list-after: '';
-
-  --ax-icon-align-left: '\f036';
-  --ax-icon-align-left-after: '';
-
-  --ax-icon-align-right: '\f038';
-  --ax-icon-align-right-after: '';
-
-  --ax-icon-align-center: '\f037';
-  --ax-icon-align-center-after: '';
-
-  --ax-icon-align-justify: '\f039';
-  --ax-icon-align-justify-after: '';
-
-  --ax-icon-undo: '\f0e2';
-  --ax-icon-undo-after: '';
-
-  --ax-icon-redo: '\f01e';
-  --ax-icon-redo-after: '';
-
-  --ax-icon-highlight: '\f591';
-  --ax-icon-highlight-after: '';
-
-  --ax-icon-link: '\f0c1';
-  --ax-icon-link-after: '';
-
-  --ax-icon-image: '\f03e';
-  --ax-icon-image-after: '';
-
-  --ax-icon-pen: '\f304';
-  --ax-icon-pen-after: '';
-
-  --ax-icon-eraser: '\f12d';
-  --ax-icon-eraser-after: '';
-
-  --ax-icon-pen-ruler: '\f5ae';
-  --ax-icon-pen-ruler-after: '';
-
-  --ax-icon-crop: '\f125';
-  --ax-icon-crop-after: '';
-
-  --ax-icon-full-screen: '\f065';
-  --ax-icon-full-screen-after: '';
-
-  --ax-icon-up-folder: '\e632';
-  --ax-icon-up-folder-after: '';
-
-  --ax-icon-sort: '\e0ae';
-  --ax-icon-sort-after: '';
-
-  --ax-icon-menu: '\f0c9';
-  --ax-icon-menu-after: '';
-
-  --ax-icon-plus: '\2b';
-  --ax-icon-plus-after: '';
-
-  --ax-icon-trash: '\f1f8';
-  --ax-icon-trash-after: '';
-
-  --ax-icon-arrow-turn-right: '\e635';
-  --ax-icon-arrow-turn-right-after: '';
-
-  --ax-icon-arrow-turn-left: '\e632';
-  --ax-icon-arrow-turn-left-after: '';
-
-  --ax-icon-save: '\f0c7';
-  --ax-icon-save-after: '';
-
-  --ax-icon-minimize: '\f068';
-  --ax-icon-minimize-after: '';
-
-  --ax-icon-maximize: '\f31d';
-  --ax-icon-maximize-after: '';
-
-  --ax-icon-code: '\f121';
-  --ax-icon-code-after: '';
-
-  --ax-icon-paragraph: '\f1dd';
-  --ax-icon-paragraph-after: '';
-}