@acorex/styles 19.11.0-next.0 → 19.11.0-next.1

package/README.md

@@ -1,32 +1,34 @@
-# ACoreX Styles
 
-ACoreX is an UI framework based on angular. With over 50+ beautiful fully responsive and accessible components for everyone.
-
-<p style="text-align: center;">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://acorexui.com/acorex-slang-dark.svg">
-    <img alt="Acorex - Design System, UI Framework, App Builder" src="https://acorexui.com/acorex-slang.svg" width="100%">
-  </picture>
-</p>
-
-<div style="text-align: center;">
+ <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://acorexui.com/public/acorex-slang-dark.svg">
+    <img alt="Acorex - Design System, UI Framework, App Builder" src="https://acorexui.com/public/acorex-slang-dark.svg" width="100%">
+     </picture>
 
 [![License](https://img.shields.io/npm/l/nx.svg?style=flat-square)]()
 
-</div>
+# ACoreX
+
+ACoreX is an UI framework based on angular. With over 50+ beautiful fully responsive and accessible components for everyone.
 
 A few links to help you get started:
 
 - [ACoreX: Documentation, Guides](https://acorexui.com)
 
-## Core Team
+## Team Leads
+
+| Arash Oshnoudi                                                                                                           | Ali Safari                                                                                                           |
+|--------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|
+| ![Arash Oshnoudi](https://gravatar.com/avatar/df151090660e3842ec1ff788bb5a650e939e45784f01513a9b9f8107311e4e78?size=180) | ![Ali Safari](https://gravatar.com/avatar/555280ee36f23bedcfcfec6e068d1a85d7e1fd14676ca07e05958fc762199def?size=180) | 
+
+## Develop Team
+
+| Reza Safari                                                                                                           | Matin Givi                                                                                                           | Shahin Kahrizi                                                                                                           | Mohammad Parsaeifard                                                                                                           | Mojtaba Erfan Rad                                                                                                             |
+|-----------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------|
+| ![Reza Safari](https://gravatar.com/avatar/0d419926e9e86bbb4b47ca6ae3ca6a2cde30fb01a6ddedefb97d043a350d11f0?size=180) | ![Matin Givi](https://gravatar.com/avatar/9a477829fc2ecdbce20a26af33d24baf63d24f042a551af8147eef1c99d2315a?size=180) | ![Shahin Kahrizi](https://gravatar.com/avatar/e699eeae86920ea44f9dd18f8bb01b5f0d28cdbd816032c4387f1f036c5977c0?size=180) | ![Mohammad Parsaeifard](https://gravatar.com/avatar/c0d9a0143f2dbbcea46e037d12ccad8f0fdaaeeaeb5089c1ae4a0c4ad131df88?size=180) | ![Mojtaba Erfan Rad](https://2.gravatar.com/avatar/791cb5077cf66aaf4f89098f9eb459a0c49198cc81d55a9b344d2620a72295bc?size=180) |
 
-| Arash Oshnoudi                                                                                                           | Ali Safari                                                                                                           | Matin Givi                                                                                                           | Reza Safari                                                                                                           |
-| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| ![Arash Oshnoudi](https://gravatar.com/avatar/df151090660e3842ec1ff788bb5a650e939e45784f01513a9b9f8107311e4e78?size=180) | ![Ali Safari](https://gravatar.com/avatar/555280ee36f23bedcfcfec6e068d1a85d7e1fd14676ca07e05958fc762199def?size=180) | ![Matin Givi](https://gravatar.com/avatar/9a477829fc2ecdbce20a26af33d24baf63d24f042a551af8147eef1c99d2315a?size=180) | ![Reza Safari](https://gravatar.com/avatar/0d419926e9e86bbb4b47ca6ae3ca6a2cde30fb01a6ddedefb97d043a350d11f0?size=180) |
 
-<br/>
+## Design Team
 
-| Shahin Kahrizi                                                                                                           | Mohamad Parsaeifard                                                                                                            | Mohamad Hasanzade                                                                            | Meysa Aghili                                                                                                             |
-| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| ![Shahin Kahrizi](https://gravatar.com/avatar/e699eeae86920ea44f9dd18f8bb01b5f0d28cdbd816032c4387f1f036c5977c0?size=180) | ![Mohammad Parsaeifard](https://gravatar.com/avatar/c0d9a0143f2dbbcea46e037d12ccad8f0fdaaeeaeb5089c1ae4a0c4ad131df88?size=180) | ![Mohammad Hasanzade](https://gravatar.com/avatar/ca346e55701bbf079140cb04edea9e3c?size=180) | ![Meysa Aghili](https://0.gravatar.com/avatar/bf607792c9fac9e5f4e53d141d331abd11fa56e56f42da8b69cf9ede2ffff289?size=180) |
+| Mohammad Hasanzade                                                                                                            | Meysa Aghili                                                                                                           |
+|--------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|
+| ![Mohammad Hasanzade](https://gravatar.com/avatar/ca346e55701bbf079140cb04edea9e3c?size=180) | ![Meysa Aghili](https://0.gravatar.com/avatar/bf607792c9fac9e5f4e53d141d331abd11fa56e56f42da8b69cf9ede2ffff289?size=180) |

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: 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-space-block-size: 0.5rem;
   --ax-comp-editor-height: var(--ax-sys-size-base);
   --ax-comp-editor-placeholder-space-x: 0.75rem;
 
@@ -169,11 +170,29 @@
     max-width: fit-content;
   }
 
+  &:has(ax-suffix) {
+    &:not(&:empty) {
+      &:has(ax-button, .ax-editor-container) {
+        --ax-comp-editor-space-end-size: 0px;
+      }
+    }
+  }
+  &:has(ax-prefix) {
+    &:not(&:empty) {
+      &:has(ax-button, .ax-editor-container) {
+        --ax-comp-editor-space-start-size: 0px;
+      }
+    }
+  }
+
   & > ax-prefix,
   & > ax-suffix {
     height: 100%;
 
-    *:not(ax-kbd, ax-kbd-item, kbd) {
+    ax-button,
+    ax-text,
+    ax-icon,
+    .ax-editor-container {
       display: flex;
       height: 100%;
       align-items: center;
@@ -228,8 +247,8 @@
 .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;
 }

package/components/_table.scss

@@ -43,7 +43,7 @@
     tbody {
       tr {
         &:nth-child(even) {
-          background-color: rgba(var(--ax-sys-color-surface));
+          background-color: rgba(var(--ax-sys-color-lighter-surface));
         }
       }
     }

package/generators/tailwind-class-generator.js

@@ -1,3 +1,7 @@
+/**
+ * You can give it the variable name you added in the theme file as input and generate color range classes from 50 to 950.
+ */
+
 export const createPalette = function (colorName) {
   return {
     DEFAULT: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
@@ -15,6 +19,11 @@ export const createPalette = function (colorName) {
     950: `rgba(var(--ax-sys-color-${colorName}-950), <alpha-value>)`,
   };
 };
+
+/**
+ * To be able to create additional color classes you need to use the createSurface.
+ *  This function generates seven surface colors. Also, if you want to have surfaces in all Tailwind properties, you can put them in colors.
+ */
 export const createSurfaces = function (colorName) {
   return {
     lightest: `rgba(var(--ax-sys-color-${colorName}-lightest-surface), <alpha-value>)`,
@@ -27,6 +36,11 @@ export const createSurfaces = function (colorName) {
     on: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
   };
 };
+
+/**
+ * The on surface color is based on the surface color of the same name,
+ * so you can generate it with createOnSurface for both text and other colors.
+ */
 export const createOnSurfaces = function (colorName) {
   return {
     'on-lightest': `rgba(var(--ax-sys-color-on-${colorName}-lightest-surface), <alpha-value>)`,
@@ -39,6 +53,10 @@ export const createOnSurfaces = function (colorName) {
     'on-contrast': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
   };
 };
+
+/**
+ * The board color is only used for border colors, which you can generate with the createBorderSurfaces function.
+ */
 export const createBorderSurfaces = function (colorName) {
   return {
     lightest: `rgba(var(--ax-sys-color-border-${colorName}-lightest-surface), <alpha-value>)`,

package/icons/fontawesome/_variables.scss

@@ -198,3 +198,9 @@ $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: '';

package/icons/fontawesome/index.scss

@@ -631,3 +631,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-bulk/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: 'ν'; //sorting-01
 
 $ax-icon-menu: 'ﭾ'; //menu-01
 $ax-icon-menu-after: 'ﭽ'; //menu-01
+
+$ax-icon-plus: ''; //add-01
+$ax-icon-plus-after: ''; //add-01
+
+$ax-icon-trash: ''; //delete-02
+$ax-icon-trash-after: ''; //delete-02

package/icons/huge/huge-bulk/index.scss

@@ -627,3 +627,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-duotone/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: 'Ꮪ'; //sorting-01
 
 $ax-icon-menu: '஝'; //menu-01
 $ax-icon-menu-after: 'ஜ'; //menu-01
+
+$ax-icon-plus: '層'; //add-01
+$ax-icon-plus-after: '墨'; //add-01
+
+$ax-icon-trash: '˝'; //delete-02
+$ax-icon-trash-after: '˜'; //delete-02

package/icons/huge/huge-duotone/index.scss

@@ -628,3 +628,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-solid-rounded/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: ''; //sorting-01
 
 $ax-icon-menu: 'ዽ'; //menu-01
 $ax-icon-menu-after: ''; //menu-01
+
+$ax-icon-plus: 'ੌ'; //add-01
+$ax-icon-plus-after: ''; //add-01
+
+$ax-icon-trash: 'ຝ'; //delete-02
+$ax-icon-trash-after: ''; //delete-02

package/icons/huge/huge-solid-rounded/index.scss

@@ -614,3 +614,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-solid-sharp/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: ''; //sorting-01
 
 $ax-icon-menu: '⌜'; //menu-01
 $ax-icon-menu-after: ''; //menu-01
+
+$ax-icon-plus: 'ᩫ'; //add-01
+$ax-icon-plus-after: ''; //add-01
+
+$ax-icon-trash: 'Ẽ'; //delete-02
+$ax-icon-trash-after: ''; //delete-02

package/icons/huge/huge-solid-sharp/index.scss

@@ -627,3 +627,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-solid-standard/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: ''; //sorting-01
 
 $ax-icon-menu: '㌻'; //menu-01
 $ax-icon-menu-after: ''; //menu-01
+
+$ax-icon-plus: '⪊'; //add-01
+$ax-icon-plus-after: ''; //add-01
+
+$ax-icon-trash: '⻛'; //delete-02
+$ax-icon-trash-after: ''; //delete-02

package/icons/huge/huge-solid-standard/index.scss

@@ -627,3 +627,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-stroke-rounded/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: ''; //sorting-01
 
 $ax-icon-menu: '䍚'; //menu-01
 $ax-icon-menu-after: ''; //menu-01
+
+$ax-icon-plus: '㪩'; //add-01
+$ax-icon-plus-after: ''; //add-01
+
+$ax-icon-trash: '㻺'; //delete-02
+$ax-icon-trash-after: ''; //delete-02

package/icons/huge/huge-stroke-rounded/index.scss

@@ -627,3 +627,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-stroke-sharp/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: ''; //sorting-01
 
 $ax-icon-menu: '卹'; //menu-01
 $ax-icon-menu-after: ''; //menu-01
+
+$ax-icon-plus: '䫈'; //add-01
+$ax-icon-plus-after: ''; //add-01
+
+$ax-icon-trash: '伙'; //delete-02
+$ax-icon-trash-after: ''; //delete-02

package/icons/huge/huge-stroke-sharp/index.scss

@@ -627,3 +627,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-stroke-standard/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: ''; //sorting-01
 
 $ax-icon-menu: '掘'; //menu-01
 $ax-icon-menu-after: ''; //menu-01
+
+$ax-icon-plus: '嫧'; //add-01
+$ax-icon-plus-after: ''; //add-01
+
+$ax-icon-trash: '弸'; //delete-02
+$ax-icon-trash-after: ''; //delete-02

package/icons/huge/huge-stroke-standard/index.scss

@@ -627,3 +627,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/huge/huge-twotone/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: '蒵'; //sorting-01
 
 $ax-icon-menu: '籶'; //menu-01
 $ax-icon-menu-after: '籵'; //menu-01
+
+$ax-icon-plus: '欔'; //add-01
+$ax-icon-plus-after: '欓'; //add-01
+
+$ax-icon-trash: '玶'; //delete-02
+$ax-icon-trash-after: '玵'; //delete-02

package/icons/huge/huge-twotone/index.scss

@@ -627,3 +627,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/icons/material/_variables.scss

@@ -198,3 +198,9 @@ $ax-icon-sort-after: '';
 
 $ax-icon-menu: '\e5d2';
 $ax-icon-menu-after: '';
+
+$ax-icon-plus: '\e145';
+$ax-icon-plus-after: '';
+
+$ax-icon-trash: '\e872';
+$ax-icon-trash-after: '';

package/icons/material/index.scss

@@ -635,3 +635,21 @@
     content: variables.$ax-icon-menu-after;
   }
 }
+
+.ax-icon-plus {
+  &:before {
+    content: variables.$ax-icon-plus;
+  }
+  &:after {
+    content: variables.$ax-icon-plus-after;
+  }
+}
+
+.ax-icon-trash {
+  &:before {
+    content: variables.$ax-icon-trash;
+  }
+  &:after {
+    content: variables.$ax-icon-trash-after;
+  }
+}

package/package.json

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

package/tailwind-base.js

@@ -10,11 +10,15 @@ const childSelector = plugin(function ({ addVariant }) {
 });
 
 const SURFACE_BG = {
+  DEFAULT: 'rgba(var(--ax-sys-color-lightest-surface), <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-dark-surface), <alpha-value>)',
   darker: 'rgba(var(--ax-sys-color-darker-surface), <alpha-value>)',
   darkest: 'rgba(var(--ax-sys-color-darkest-surface), <alpha-value>)',
@@ -22,11 +26,15 @@ const SURFACE_BG = {
 
 const SURFACES_ON = {
   on: {
+    DEFAULT: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
+    default: 'rgba(var(--ax-sys-color-on-lightest-surface), <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-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>)',
@@ -34,11 +42,15 @@ const SURFACES_ON = {
 };
 
 const SURFACE_BORDER = {
+  DEFAULT: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
+  default: 'rgba(var(--ax-sys-color-border-lightest-surface), <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-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>)',
@@ -218,8 +230,6 @@ module.exports = withAnimations({
         ...SURFACES_ON,
       },
       backgroundColor: {
-        DEFAULT: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
-        default: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
         primary: createSurfaces('primary'),
         secondary: createSurfaces('secondary'),
         success: createSurfaces('success'),
@@ -229,8 +239,6 @@ module.exports = withAnimations({
         ...SURFACES_ON,
       },
       borderColor: {
-        DEFAULT: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
-        default: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
         primary: createBorderSurfaces('primary'),
         secondary: createBorderSurfaces('secondary'),
         success: createBorderSurfaces('success'),

package/themes/default.scss

@@ -1,38 +1,58 @@
-@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),
+  '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(0.769 0.188 70.08),
+  '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),
   ),
 );
 
+/*
+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);