@acorex/styles 19.10.0 → 19.10.1

package/components/_editor-container.scss

@@ -4,8 +4,9 @@
 .ax-editor-container {
   --ax-comp-editor-font-size: 0.875rem;
   --ax-comp-editor-gap: 0.5rem;
-  --ax-comp-editor-space-start-size: 0.75rem;
-  --ax-comp-editor-space-end-size: 0.75rem;
+  --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;
 
@@ -173,10 +174,7 @@
   & > ax-suffix {
     height: 100%;
 
-    ax-button,
-    ax-text,
-    ax-icon,
-    .ax-editor-container {
+    *:not(ax-kbd, ax-kbd-item, kbd) {
       display: flex;
       height: 100%;
       align-items: center;
@@ -218,7 +216,6 @@
   --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-height: 1.5rem;
 }
 .ax-sm .ax-editor-container,
 .ax-editor-container.ax-sm {
@@ -227,17 +224,15 @@
   --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-height: 1.969rem;
 }
 
 .ax-md .ax-editor-container,
 .ax-editor-container,
 .ax-editor-container.ax-md {
-  --ax-comp-editor-space-start-size: 1rem;
-  --ax-comp-editor-space-end-size: 1rem;
+  --ax-comp-editor-space-start-size: 0.5rem;
+  --ax-comp-editor-space-end-size: 0.5rem;
   --ax-comp-editor-button-font-size: 0.875rem;
   --ax-comp-editor-gap: 0.5rem;
-  --ax-comp-editor-height: 2.5rem;
 }
 
 .ax-lg .ax-editor-container,
@@ -247,7 +242,6 @@
   --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-height: 3.375rem;
 }
 
 .ax-xl .ax-editor-container,
@@ -257,5 +251,4 @@
   --ax-comp-editor-space-end-size: 1.5rem;
   --ax-comp-editor-button-font-size: 1rem;
   --ax-comp-editor-gap: 0.75rem;
-  --ax-comp-editor-height: 3.938rem;
 }

package/package.json

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

package/tailwind-base.js

@@ -78,7 +78,7 @@ const UTILITY_CLASSES = {
   '.heading': {
     width: '100%',
     'border-bottom': '1px solid',
-    'border-color': 'rgba(var(--ax-sys-border-color))',
+    'border-color': 'rgba(var(--ax-sys-color-border-lightest-surface))',
     'line-height': '0.1em',
     margin: '1rem auto',
   },
@@ -96,14 +96,14 @@ const UTILITY_CLASSES = {
     'text-align': 'end',
   },
   '.links': {
-    color: 'rgba(var(--ax-sys-color-primary-500))',
+    color: 'rgba(var(--ax-sys-color-primary-surface))',
     cursor: 'pointer',
   },
   '.links:hover': {
     'text-decoration': 'underline',
   },
   '.links:visited': {
-    color: 'rgba(var(--ax-sys-color-primary-700))',
+    color: 'rgba(var(--ax-sys-color-primary-darker))',
   },
   '.animate-slow': {
     animationDuration: '2s',
@@ -124,28 +124,28 @@ const UTILITY_CLASSES = {
     animationDuration: '250ms',
   },
   '.card': {
-    backgroundColor: 'rgb(var(--ax-color-surface))',
+    backgroundColor: 'rgb(var(--ax-sys-color-surface))',
     border: '1px solid',
-    borderColor: 'rgb(var(--ax-sys-border-color))',
+    borderColor: 'rgb(var(--ax-sys-color-border-lightest-surface))',
     borderRadius: 'var(--ax-sys-border-radius)',
   },
   '.tabs-fit': {
     width: '100%',
   },
   '.xs': {
-    '--ax-sys-size-base': '2rem',
+    '--ax-sys-size-base': '1.5rem',
   },
   '.sm': {
-    '--ax-sys-size-base': '2.25rem',
+    '--ax-sys-size-base': '2rem',
   },
   '.md': {
     '--ax-sys-size-base': '2.5rem',
   },
   '.lg': {
-    '--ax-sys-size-base': '3rem',
+    '--ax-sys-size-base': '3.375rem',
   },
   '.xl': {
-    '--ax-sys-size-base': '3.5rem',
+    '--ax-sys-size-base': '4rem',
   },
   '.surface': {
     backgroundColor: 'rgb(var(--ax-sys-color-surface))',

package/themes/default.scss

@@ -1,38 +1,54 @@
-@use '../utils/index.scss' as *;
+@use '../utils/index.scss' as utils; // import ACoreX utilities for using generate-pallete-variables function
 
+/*
+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(0.554 0.046 257.417),
   'success': oklch(0.696 0.17 162.48),
   'warning': oklch(0.769 0.188 70.08),
   'danger': (
+    // Danger color for light mode
     oklch(0.645 0.246 16.439),
+    // Danger color for dark mode
     oklch(0.712 0.194 13.428),
   ),
 );
 
+/*
+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,
+  'dark-end': #09090b
 );
 
 $options: (
   'color-range': true,
+  // Color range production 50 to 950, if you don't need them you can put false
   'light': #ffffff,
-  'dark': #09090b,
+  // White 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, // // dark is always a fixed color in the project, used in some special cases and does not change in light mode and dark mode.
 );
 
+/*
+Importing default variables and overriding them with higher values
+*/
 @forward '../variables/index.scss';
 
 :root,
 .ax-light {
-  --ax-sys-body-font-size: 1rem;
-  --ax-sys-size-base: 2.5rem;
-  --ax-sys-border-radius: 0.5rem;
-  --ax-sys-color-body-text: 0, 0, 0;
-  --ax-sys-color-input-text: 0, 0, 0;
+  --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 generate-pallete-variables($theme-colors, $theme-surfaces, $options);
+@include utils.generate-pallete-variables($theme-colors, $theme-surfaces, $options);