@acorex/styles 19.10.0-next.2 → 19.10.0-next.3

package/base/index.scss

@@ -5,18 +5,11 @@
   --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 html {
-  background-color: rgba(var(--ax-sys-color-surface-lightest));
-  color: rgba(var(--ax-sys-color-on-surface-lightest));
-}
-
-* {
-  border-color: rgba(var(--ax-sys-color-border-surface-lightest));
-}
-html.ax-dark * {
-  border-color: rgba(var(--ax-sys-color-border-surface-darkest));
+  background-color: rgba(var(--ax-sys-color-lightest-surface));
+  color: rgba(var(--ax-sys-color-on-lightest-surface));
 }
 
 html.ax-dark {
-  background-color: rgba(var(--ax-sys-color-surface-darkest));
-  color: rgba(var(--ax-sys-color-on-surface-darkest));
+  background-color: rgba(var(--ax-sys-color-darkest-surface));
+  color: rgba(var(--ax-sys-color-on-darkest-surface));
 }

package/components/_drop-down.scss

@@ -26,8 +26,8 @@
   height: fit-content;
   overflow: hidden;
   border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-border-surface-lightest));
-  background-color: rgba(var(--ax-sys-color-surface-lightest));
+  border-color: rgba(var(--ax-sys-color-border-lightest-surface));
+  background-color: rgba(var(--ax-sys-color-lightest-surface));
   --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
   box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);

package/package.json

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

package/tailwind-base.js

@@ -9,38 +9,38 @@ const childSelector = plugin(function ({ addVariant }) {
 });
 
 const SURFACE_BG = {
-  default: 'rgba(var(--ax-sys-color-surface-lightest), <alpha-value>)',
-  lightest: 'rgba(var(--ax-sys-color-surface-lightest), <alpha-value>)',
-  lighter: 'rgba(var(--ax-sys-color-surface-lighter), <alpha-value>)',
-  light: 'rgba(var(--ax-sys-color-surface-light), <alpha-value>)',
+  default: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
+  lightest: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
+  lighter: 'rgba(var(--ax-sys-color-lighter-surface), <alpha-value>)',
+  light: 'rgba(var(--ax-sys-color-light-surface), <alpha-value>)',
   surface: 'rgba(var(--ax-sys-color-surface), <alpha-value>)',
-  dark: 'rgba(var(--ax-sys-color-surface-dark), <alpha-value>)',
-  darker: 'rgba(var(--ax-sys-color-surface-darker), <alpha-value>)',
-  darkest: 'rgba(var(--ax-sys-color-surface-darkest), <alpha-value>)',
+  dark: 'rgba(var(--ax-sys-color-dark-surface), <alpha-value>)',
+  darker: 'rgba(var(--ax-sys-color-darker-surface), <alpha-value>)',
+  darkest: 'rgba(var(--ax-sys-color-darkest-surface), <alpha-value>)',
 };
 
 const SURFACES_ON = {
   on: {
-    lightest: 'rgba(var(--ax-sys-color-on-surface-lightest), <alpha-value>)',
-    lighter: 'rgba(var(--ax-sys-color-on-surface-lighter), <alpha-value>)',
-    light: 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
+    lightest: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
+    lighter: 'rgba(var(--ax-sys-color-on-lighter-surface), <alpha-value>)',
+    light: 'rgba(var(--ax-sys-color-on-light-surface), <alpha-value>)',
     DEFAULT: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
     surface: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
-    dark: 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
-    darker: 'rgba(var(--ax-sys-color-on-surface-darker), <alpha-value>)',
-    darkest: 'rgba(var(--ax-sys-color-on-surface-darkest), <alpha-value>)',
+    dark: 'rgba(var(--ax-sys-color-on-dark-surface), <alpha-value>)',
+    darker: 'rgba(var(--ax-sys-color-on-darker-surface), <alpha-value>)',
+    darkest: 'rgba(var(--ax-sys-color-on-darkest-surface), <alpha-value>)',
   },
 };
 
 const SURFACE_BORDER = {
-  lightest: 'rgba(var(--ax-sys-color-border-surface-lightest), <alpha-value>)',
-  lighter: 'rgba(var(--ax-sys-color-border-surface-lighter), <alpha-value>)',
-  light: 'rgba(var(--ax-sys-color-border-surface-light), <alpha-value>)',
+  lightest: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
+  lighter: 'rgba(var(--ax-sys-color-border-lighter-surface), <alpha-value>)',
+  light: 'rgba(var(--ax-sys-color-border-light-surface), <alpha-value>)',
   DEFAULT: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
   surface: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
-  dark: 'rgba(var(--ax-sys-color-border-surface-dark), <alpha-value>)',
-  darker: 'rgba(var(--ax-sys-color-border-surface-darker), <alpha-value>)',
-  darkest: 'rgba(var(--ax-sys-color-border-surface-darkest), <alpha-value>)',
+  dark: 'rgba(var(--ax-sys-color-border-dark-surface), <alpha-value>)',
+  darker: 'rgba(var(--ax-sys-color-border-darker-surface), <alpha-value>)',
+  darkest: 'rgba(var(--ax-sys-color-border-darkest-surface), <alpha-value>)',
 };
 
 const UTILITY_CLASSES = {
@@ -223,8 +223,8 @@ module.exports = withAnimations({
         ghost: createPalete('ghost'),
       },
       textColor: {
-        DEFAULT: 'rgba(var(--ax-sys-color-on-surface-lightest), <alpha-value>)',
-        default: 'rgba(var(--ax-sys-color-on-surface-lightest), <alpha-value>)',
+        DEFAULT: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
+        default: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
         primary: createOnPalete('primary'),
         secondary: createOnPalete('secondary'),
         success: createOnPalete('success'),
@@ -234,8 +234,8 @@ module.exports = withAnimations({
         ...SURFACES_ON,
       },
       backgroundColor: {
-        DEFAULT: 'rgba(var(--ax-sys-color-surface-lightest), <alpha-value>)',
-        default: 'rgba(var(--ax-sys-color-surface-lightest), <alpha-value>)',
+        DEFAULT: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
+        default: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
         primary: createBackgroundPalete('primary'),
         secondary: createBackgroundPalete('secondary'),
         success: createBackgroundPalete('success'),
@@ -246,8 +246,8 @@ module.exports = withAnimations({
         ...SURFACES_ON,
       },
       borderColor: {
-        DEFAULT: 'rgba(var(--ax-sys-color-border-surface-lightest), <alpha-value>)',
-        default: 'rgba(var(--ax-sys-color-border-surface-lightest), <alpha-value>)',
+        DEFAULT: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
+        default: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
         primary: createBorderPalete('primary'),
         secondary: createBorderPalete('secondary'),
         success: createBorderPalete('success'),

package/themes/default.scss

@@ -1,20 +1,22 @@
 @use '../utils/index.scss' as *;
 
 $theme-colors: (
-  'primary': #2563eb,
-  'secondary': #e84f88,
-  'success': #10b981,
-  'warning': #ffca28,
-  'danger': #ff2056,
-  'ghost': #71717a,
-) !default;
+  'primary': oklch(0.623 0.214 259.815),
+  'secondary': oklch(0.656 0.241 354.308),
+  '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': #dee2e6,
   'dark-start': #13161b,
   'dark-end': #0c0e12,
-) !default;
+);
 
 @forward '../variables/index.scss';
 

package/utils/_theme-generator.scss

@@ -3,6 +3,7 @@
 @use 'sass:meta';
 @use 'sass:math';
 @use 'sass:map';
+@use 'sass:list';
 
 @function generate-ghost-colors($primary, $impact-rate, $is-dark: false) {
   @if $is-dark {
@@ -88,33 +89,33 @@
   $darkest-surface-border: border-color($darkest-surface, $is-dark);
 
   @return (
-    ax-sys-color-surface-lightest: $lightest-surface,
-    ax-sys-color-on-surface-lightest: $on-lightest-surface,
-    ax-sys-color-border-surface-lightest: $lightest-surface-border,
+    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-surface-lighter: $lighter-surface,
-    ax-sys-color-on-surface-lighter: $on-lighter-surface,
-    ax-sys-color-border-surface-lighter: $lighter-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-surface-light: $light-surface,
-    ax-sys-color-on-surface-light: $on-light-surface,
-    ax-sys-color-border-surface-light: $light-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-surface-dark: $dark-surface,
-    ax-sys-color-on-surface-dark: $on-dark-surface,
-    ax-sys-color-border-surface-dark: $dark-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-surface-darker: $darker-surface,
-    ax-sys-color-on-surface-darker: $on-darker-surface,
-    ax-sys-color-border-surface-darker: $darker-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-surface-darkest: $darkest-surface,
-    ax-sys-color-on-surface-darkest: $on-darkest-surface,
-    ax-sys-color-border-surface-darkest: $darkest-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
   );
 }
 
@@ -200,11 +201,17 @@
     @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-color-surfaces-variables($name, $color, false));
     }
   }
@@ -217,11 +224,17 @@
     @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-color-surfaces-variables($name, $color, true));
     }
   }

package/utils/_utils.scss

@@ -133,11 +133,11 @@
   }
   @return 0.09 * $hue + 42.6;
 }
-@function is-dark-on-surface($lightness, $hue) {
-  @if ($lightness >= math.div(lightness-calc(math.div($hue, 1deg)), 100)) {
-    @return true;
+@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 false;
+    @return $lightness >= math.div(lightness-calc(math.div($hue, 1deg)), 100);
   }
 }
 
@@ -148,15 +148,13 @@
   $lightness: math.div($lightness, 100%);
   $l: null;
   @if ($is-dark) {
-    @if (is-dark-on-surface($lightness, $hue)) {
-      // $l: math.div(map.get($lightColors, 700), 2);
-      $l: 0.3;
+    @if (is-dark-on-surface($lightness, $hue, true)) {
+      $l: 0.2;
     } @else {
       $l: 0.995;
     }
   } @else {
-    @if (is-dark-on-surface($lightness, $hue)) {
-      // $l: map.get($lightColors, 900);
+    @if (is-dark-on-surface($lightness, $hue, false)) {
       $l: 0.3;
     } @else {
       $l: 0.995;
@@ -223,17 +221,17 @@
 
 @function dark-palette-generator($color) {
   $shades: (
-    50: 40,
-    100: 90,
-    200: 160,
-    300: 270,
-    400: 410,
+    50: 50,
+    100: 100,
+    200: 200,
+    300: 300,
+    400: 400,
     500: 500,
-    600: 590,
+    600: 600,
     700: 700,
-    800: 790,
-    900: 860,
-    950: 1060,
+    800: 800,
+    900: 900,
+    950: 950,
   );
   $palette: ();
   $hue: color.channel($color, 'hue', $space: oklch);

package/variables/_colors.scss

@@ -4,5 +4,4 @@ $theme-colors: (
   'success': #22c55e,
   'warning': #f59e0b,
   'danger': #f43f5e,
-  'ghost': #71717a,
 ) !default;