@acorex/styles 19.15.0-next.9 → 20.0.1

package/mixins/_scroll-bar.scss

@@ -2,10 +2,10 @@
   :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;
   }
 
   .ax-dark,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "19.15.0-next.9",
+  "version": "20.0.1",
   "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",

package/tailwind-base.js

@@ -293,9 +293,6 @@ module.exports = withAnimations({
       width: {
         default: 'var(--ax-sys-size-base)',
       },
-      maxHeight: {
-        default: 'var(--ax-sys-size-base)',
-      },
       minHeight: {
         default: 'var(--ax-sys-size-base)',
       },

package/themes/default.scss

@@ -18,6 +18,7 @@ $theme-colors: (
     oklch(0.645 0.246 16.439),
     oklch(0.712 0.194 13.428),
   ),
+  'accent1': #f00,
 );
 
 /*

package/utils/_theme-generator.scss

@@ -184,18 +184,22 @@
     @if $generate-color-range {
       /* Ranges */
       @each $name, $color in $colors {
-        @if (meta.type-of($color) == list) {
-          $color: list.nth($color, 1);
+        @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));
         }
-        @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);
+      @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));
       }
-      @include convert-to-rgb(generate-named-surfaces-variables($name, $color, false));
     }
   }
 
@@ -213,18 +217,22 @@
     @if $generate-color-range {
       /* Ranges */
       @each $name, $color in $colors {
-        @if (meta.type-of($color) == list) {
-          $color: list.nth($color, 2);
+        @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));
         }
-        @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);
+      @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));
       }
-      @include convert-to-rgb(generate-named-surfaces-variables($name, $color, true));
     }
   }
 }

package/utils/_utils.scss

@@ -193,28 +193,30 @@
   $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;
+  @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);
       }
-      $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);
+      $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);
     }
-    $palette: map.set($palette, $name, $gamut-oklch);
   }
   @return $palette;
 }
@@ -259,18 +261,18 @@
   $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));
+  @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/variables/_colors.scss

@@ -4,4 +4,11 @@ $theme-colors: (
   'success': #22c55e,
   'warning': #f59e0b,
   'danger': #f43f5e,
+  'accent1': null,
+  'accent2': null,
+  'accent3': null,
+  'accent4': null,
+  'accent5': null,
+  'accnt6': null,
+  'accent7': null,
 ) !default;