@acorex/styles 19.10.2 → 19.10.3

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "19.10.2",
+  "version": "19.10.3",
   "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'),