@acorex/styles 21.0.0-next.64 → 21.0.0-next.66

package/mixins/_editor-looks.scss

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

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

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

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

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

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.0-next.64",
-  "main": "index.css",
+  "version": "21.0.0-next.66",
+  "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",
   "peerDependencies": {
-    "tailwindcss": "^4.1.18",
-    "@tailwindcss/postcss": "^4.1.18",
-    "postcss": "^8.5.6",
-    "tw-animate": "^1.0.3",
-    "@angular/cdk": "^20.0.0"
+    "animated-tailwindcss": ">=4.0.0",
+    "tailwindcss": ">=3.4.17"
   }
 }

package/tailwind-base.js

@@ -220,6 +220,7 @@ const UTILITY_CLASSES = {
 };
 
 module.exports = withAnimations({
+  prefix: 'ax-',
   content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
   darkMode: 'class',
   safelist: [
@@ -314,6 +315,9 @@ module.exports = withAnimations({
       },
     },
   },
+  corePlugins: {
+    preflight: false,
+  },
 
   plugins: [
     plugin(function ({ addUtilities }) {

package/themes/default.scss

@@ -0,0 +1,74 @@
+/* 
+import ACoreX utilities for using generate-palette-variables function
+import path in your app must be like this:
+@use '@acorex/styles/utils/index.scss' as utils;
+*/
+@use '../utils/index.scss' as utils;
+
+/*
+Color themes that have multiple fixed primary colors, etc.
+that can range from 50 to 950, also generate 7 surfaces of these colors by default that are used to color components.
+If these colors have the same value, they are used for light mode and dark mode, but if you give the color key two colors,
+it uses the first color for light mode and the second color for dark mode. For example, you can see the color Danger
+*/
+$theme-colors: (
+  'primary': oklch(0.623 0.214 259.815),
+  'secondary': (
+    oklch(24.65% 0.0531 250.05),
+    oklch(47.03% 0.0531 250.05),
+  ),
+  'success': oklch(0.696 0.17 162.48),
+  'warning': (
+    oklch(81.17% 0.188 70.08),
+    oklch(86.5% 0.188 70.08),
+  ),
+  'danger': (
+    oklch(0.645 0.246 16.439),
+    oklch(0.712 0.194 13.428),
+  ),
+  'accent1': oklch(0.628 0.1579 104.82),
+  'accent2': oklch(0.628 0.1534 140.47),
+  'accent3': oklch(0.628 0.1727 31.76),
+  'accent4': oklch(0.5475 0.2056 258.35),
+  'accent5': oklch(0.5475 0.2467 1.06),
+  'accent6': oklch(0.5475 0.2565 338.82),
+  'accent7': oklch(0.5475 0.1554 46.59),
+);
+
+/*
+Surface colors for creating layouts, each color has a start and an end,
+which we use to create the color spectrum of surfaces.
+The colors are different for dark and light mode.
+*/
+$theme-surfaces: (
+  // Surfaces for light mode
+  'light-start': #ffffff,
+  'light-end': #d4d4d4,
+
+  // Surfaces for dark mode
+  'dark-start': #27272a,
+  'dark-end': #09090b
+);
+
+$options: (
+  // Color range production 50 to 950, if you don't need them you can put false
+  'color-range': true,
+  // White is always a fixed color in the project, used in some special cases and does not change in light mode and dark mode.
+  'light': #ffffff,
+  // dark is always a fixed color in the project, used in some special cases and does not change in light mode and dark mode.
+  'dark': #09090b
+);
+
+/*
+Importing default variables and overriding them with higher values
+*/
+@forward '../variables/index.scss';
+
+:root,
+.ax-light {
+  --ax-sys-body-font-size: 1rem; // Body font size
+  --ax-sys-size-base: 2.5rem; // Variable height of elements, such as inputs and buttons
+  --ax-sys-border-radius: 0.5rem; // Default roundness value for corners
+}
+
+@include utils.generate-palette-variables($theme-colors, $theme-surfaces, $options);

package/utils/_theme-generator.scss

@@ -0,0 +1,238 @@
+@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));
+      }
+    }
+  }
+}