@acorex/styles 20.1.20 → 20.1.22

package/package.json

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

package/tailwind-base.js

@@ -229,7 +229,7 @@ module.exports = withAnimations({
     },
     {
       pattern:
-        /(?:bg|text)(?:-(?:primary|secondary|danger|success|warning|ghost))?-(?:50|100|200|300|400|500|600|700|800|900|950)/,
+        /(?:bg|text)(?:-(?:primary|secondary|danger|success|warning))?-(?:50|100|200|300|400|500|600|700|800|900|950)/,
     },
   ],
   theme: {
@@ -302,6 +302,16 @@ module.exports = withAnimations({
       maxHeight: {
         default: 'var(--ax-sys-size-base)',
       },
+      keyframes: {
+        floating: {
+          '0%': { transform: 'translatey(0px)' },
+          '50%': { transform: 'translatey(-20px)' },
+          '100%': { transform: 'translatey(0px)' },
+        },
+      },
+      animation: {
+        floating: 'floating 6s ease-in-out infinite',
+      },
     },
   },
   corePlugins: {

package/themes/default.scss

@@ -1,7 +1,15 @@
-@use '../utils/index.scss' as utils; // import ACoreX utilities for using generate-pallete-variables function
+/* 
+import ACoreX utilities for using generate-pallete-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
+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),
@@ -18,7 +26,13 @@ $theme-colors: (
     oklch(0.645 0.246 16.439),
     oklch(0.712 0.194 13.428),
   ),
-  'accent1': #f00,
+  '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),
 );
 
 /*
@@ -37,11 +51,12 @@ $theme-surfaces: (
 );
 
 $options: (
-  'color-range': true,
   // Color range production 50 to 950, if you don't need them you can put false
-  'light': #ffffff,
+  '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.
-  '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.
+  '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
 );
 
 /*