@acorex/styles 19.11.6 → 19.11.7

package/generators/tailwind-class-generator.js

@@ -3,21 +3,17 @@
  */
 
 export const createPalette = function (colorName) {
-  return {
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  const palette = {
     DEFAULT: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
     default: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
-    50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
-    100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
-    200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
-    300: `rgba(var(--ax-sys-color-${colorName}-300), <alpha-value>)`,
-    400: `rgba(var(--ax-sys-color-${colorName}-400), <alpha-value>)`,
-    500: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
-    600: `rgba(var(--ax-sys-color-${colorName}-600), <alpha-value>)`,
-    700: `rgba(var(--ax-sys-color-${colorName}-700), <alpha-value>)`,
-    800: `rgba(var(--ax-sys-color-${colorName}-800), <alpha-value>)`,
-    900: `rgba(var(--ax-sys-color-${colorName}-900), <alpha-value>)`,
-    950: `rgba(var(--ax-sys-color-${colorName}-950), <alpha-value>)`,
   };
+
+  shades.forEach((shade) => {
+    palette[shade] = `rgba(var(--ax-sys-color-${colorName}-${shade}), <alpha-value>)`;
+  });
+
+  return palette;
 };
 
 /**
@@ -25,16 +21,12 @@ export const createPalette = function (colorName) {
  *  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>)`,
-    lighter: `rgba(var(--ax-sys-color-${colorName}-lighter-surface), <alpha-value>)`,
-    light: `rgba(var(--ax-sys-color-${colorName}-light-surface), <alpha-value>)`,
-    surface: `rgba(var(--ax-sys-color-${colorName}-surface), <alpha-value>)`,
-    dark: `rgba(var(--ax-sys-color-${colorName}-dark-surface), <alpha-value>)`,
-    darker: `rgba(var(--ax-sys-color-${colorName}-darker-surface), <alpha-value>)`,
-    darkest: `rgba(var(--ax-sys-color-${colorName}-darkest-surface), <alpha-value>)`,
-    on: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
-  };
+  const variations = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
+
+  return variations.reduce((surfaces, variation) => {
+    surfaces[variation] = `rgba(var(--ax-sys-color-${colorName}-${variation}-surface), <alpha-value>)`;
+    return surfaces;
+  }, {});
 };
 
 /**
@@ -42,29 +34,45 @@ export const createSurfaces = function (colorName) {
  * 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>)`,
-    'on-lighter': `rgba(var(--ax-sys-color-on-${colorName}-lighter-surface), <alpha-value>)`,
-    'on-light': `rgba(var(--ax-sys-color-on-${colorName}-light-surface), <alpha-value>)`,
-    'on-surface': `rgba(var(--ax-sys-color-on-${colorName}-surface), <alpha-value>)`,
-    'on-dark': `rgba(var(--ax-sys-color-on-${colorName}-dark-surface), <alpha-value>)`,
-    'on-darker': `rgba(var(--ax-sys-color-on-${colorName}-darker-surface), <alpha-value>)`,
-    'on-darkest': `rgba(var(--ax-sys-color-on-${colorName}-darkest-surface), <alpha-value>)`,
-    'on-contrast': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
-  };
+  const variations = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest', 'contrast'];
+
+  return variations.reduce((onSurfaces, variation) => {
+    const key = variation === 'contrast' ? `on-${variation}` : `on-${variation}`;
+    onSurfaces[key] = `rgba(var(--ax-sys-color-on-${colorName}-${variation}-surface), <alpha-value>)`;
+    return onSurfaces;
+  }, {});
 };
 
 /**
  * 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>)`,
-    lighter: `rgba(var(--ax-sys-color-border-${colorName}-lighter-surface), <alpha-value>)`,
-    light: `rgba(var(--ax-sys-color-border-${colorName}-light-surface), <alpha-value>)`,
-    surface: `rgba(var(--ax-sys-color-border-${colorName}-surface), <alpha-value>)`,
-    dark: `rgba(var(--ax-sys-color-border-${colorName}-dark-surface), <alpha-value>)`,
-    darker: `rgba(var(--ax-sys-color-border-${colorName}-darker-surface), <alpha-value>)`,
-    darkest: `rgba(var(--ax-sys-color-border-${colorName}-darkest-surface), <alpha-value>)`,
-  };
+  const variations = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
+
+  return variations.reduce((borderSurfaces, variation) => {
+    borderSurfaces[variation] = `rgba(var(--ax-sys-color-border-${colorName}-${variation}-surface), <alpha-value>)`;
+    return borderSurfaces;
+  }, {});
 };
+
+export function createColoredSurfaces(colorName) {
+  const variations = [
+    'surface',
+    'lightest-surface',
+    'lighter-surface',
+    'light-surface',
+    'dark-surface',
+    'darker-surface',
+    'darkest-surface',
+  ];
+
+  return variations.reduce((classes, variation) => {
+    const baseName = variation.replace('-surface', ''); // Extract the base name (e.g., 'lightest', 'lighter', etc.)
+    classes[`.${colorName}-${variation}`] = {
+      backgroundColor: `rgb(var(--ax-sys-color-${colorName}-${baseName || 'surface'}))`,
+      color: `rgb(var(--ax-sys-color-on-${colorName}-${baseName || 'surface'}))`,
+      borderColor: `rgb(var(--ax-sys-color-border-${colorName}-${baseName || 'surface'}))`,
+    };
+    return classes;
+  }, {});
+}

package/package.json

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

package/tailwind-base.js

@@ -1,6 +1,13 @@
 const plugin = require('tailwindcss/plugin');
 const { withAnimations } = require('animated-tailwindcss');
-const { createBorderSurfaces, createOnSurfaces, createPalette, createSurfaces } = require('./generators/index');
+const {
+  createBorderSurfaces,
+  createOnSurfaces,
+  createPalette,
+  createSurfaces,
+  createColorSurfaces,
+  createColoredSurfaces,
+} = require('./generators/index');
 
 const childSelector = plugin(function ({ addVariant }) {
   addVariant('child', '& > *');
@@ -56,7 +63,16 @@ const SURFACE_BORDER = {
   darkest: 'rgba(var(--ax-sys-color-border-darkest-surface), <alpha-value>)',
 };
 
+const dynamicSurfaceClasses = {
+  ...createColoredSurfaces('primary'),
+  ...createColoredSurfaces('secondary'),
+  ...createColoredSurfaces('success'),
+  ...createColoredSurfaces('warning'),
+  ...createColoredSurfaces('danger'),
+};
+
 const UTILITY_CLASSES = {
+  ...dynamicSurfaceClasses,
   '.h1': {
     'font-size': '2.5rem',
     'font-weight': '500',
@@ -205,7 +221,8 @@ module.exports = withAnimations({
       pattern: /(?:(?:on|border)-)?(?:lightest|lighter|light|surface|dark|darker|darkest)/,
     },
     {
-      pattern: /(?:bg|text)(?:-(?:primary|secondary|danger|success|warning|ghost))?-(?:50|100|200|300|400|500|600|700|800|900|950)/,
+      pattern:
+        /(?:bg|text)(?:-(?:primary|secondary|danger|success|warning|ghost))?-(?:50|100|200|300|400|500|600|700|800|900|950)/,
     },
   ],
   theme: {
@@ -289,7 +306,7 @@ module.exports = withAnimations({
 
   plugins: [
     plugin(function ({ addUtilities }) {
-      UTILITY_CLASSES, addUtilities(UTILITY_CLASSES, ['responsive', 'hover', 'focus']);
+      addUtilities(UTILITY_CLASSES, ['responsive', 'hover', 'focus']);
     }),
     childSelector,
   ],