@acorex/styles 21.0.0-next.64 → 21.0.0-next.66

package/components/{_table.css → _table.scss}

@@ -1,11 +1,11 @@
-.dark {
+@use '../mixins/index.scss' as mixins;
+@include mixins.darkMode() {
   .ax-table {
     thead {
       background-color: rgba(var(--ax-sys-color-surface));
     }
   }
 }
-
 .ax-table {
   width: 100%;
   border-collapse: collapse;
@@ -14,25 +14,26 @@
   border-radius: var(--ax-sys-border-radius);
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-lightest-surface));
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
   td {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface));
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
+    padding-left: 1rem /* 16px */;
+    padding-right: 1rem /* 16px */;
+    padding-top: 0.75rem /* 12px */;
+    padding-bottom: 0.75rem /* 12px */;
   }
   thead {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface));
     background-color: rgba(var(--ax-sys-color-surface));
+
     th {
-      padding-left: 1rem;
-      padding-right: 1rem;
-      padding-top: 0.875rem;
-      padding-bottom: 0.875rem;
+      padding-left: 1rem /* 16px */;
+      padding-right: 1rem /* 16px */;
+      padding-top: 0.875rem /* 14px */;
+      padding-bottom: 0.875rem /* 14px */;
       text-align: start;
       font-weight: 500;
       text-transform: uppercase;
@@ -67,10 +68,12 @@
         }
       }
     }
+
     td,
     th {
       border-width: 1px;
       border-color: rgba(var(--ax-sys-color-border-lightest-surface));
+
       &:first-child {
         border-inline-start-width: 0px;
       }
@@ -79,28 +82,28 @@
       }
     }
   }
-}
-@media screen and (max-width: 640px) {
-  .ax-table {
+  @include mixins.mediaLessThan('xs') {
     &.ax-table-responsive {
       display: block;
       overflow-wrap: break-word;
       border-width: 0px;
+
       thead {
         position: absolute;
         inset-inline-start: -100%;
         top: -100%;
       }
+
       td {
         float: inline-start;
         clear: both;
         box-sizing: border-box;
         display: block;
         width: 100%;
-        padding-left: 0.625rem;
-        padding-right: 0.625rem;
-        padding-top: 0.375rem;
-        padding-bottom: 0.375rem;
+        padding-left: 0.625rem /* 10px */;
+        padding-right: 0.625rem /* 10px */;
+        padding-top: 0.375rem /* 6px */;
+        padding-bottom: 0.375rem /* 6px */;
         &:last-child {
           border-width: 0px;
         }
@@ -117,7 +120,7 @@
       tr,
       tbody {
         float: inline-start;
-        margin-bottom: 0.625rem;
+        margin-bottom: 0.625rem /* 10px */;
         width: 100%;
       }
     }

package/components/{_uploader.css → _uploader.scss}

@@ -1,3 +1,5 @@
+@use '../mixins/index.scss' as mixin;
+
 .ax-uploader-overlay-state {
   border-radius: inherit;
   pointer-events: none;
@@ -14,6 +16,7 @@
   justify-content: space-evenly;
   gap: 1rem /* 16px */;
 
+  // Enhanced backdrop with blur and gradient
   background: linear-gradient(
     135deg,
     rgba(var(--ax-sys-color-primary-500), 0.15) 0%,
@@ -22,21 +25,25 @@
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 
+  // Modern border design
   border: 2px dashed rgba(var(--ax-sys-color-primary-500), 0.6);
   box-shadow:
     0 4px 16px rgba(var(--ax-sys-color-primary-500), 0.15),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
 
+  // Typography
   font-size: 0.9375rem /* 15px */;
   line-height: 1.5rem /* 24px */;
   font-weight: 500;
   color: rgba(var(--ax-sys-color-primary-700));
   text-align: center;
 
+  // Smooth transitions
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
 
+  // Icon styling
   .ax-icon {
     height: 3rem;
     font-size: 2.5rem /* 40px */;
@@ -46,19 +53,23 @@
     animation: pulse 2s ease-in-out infinite;
   }
 
+  // Text styling
   > span:not(.ax-icon) {
     max-width: 80%;
     padding: 0 1rem;
     text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
   }
 
+  // Subtle animation on mount
   animation: fadeInScale 200ms cubic-bezier(0.4, 0, 0.2, 1);
 
+  // Exit animation class
   &.ax-uploader-overlay-exiting {
     animation: fadeOutScale 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
 }
 
+// Pulse animation for icon
 @keyframes pulse {
   0%,
   100% {
@@ -71,6 +82,7 @@
   }
 }
 
+// Fade in and scale animation
 @keyframes fadeInScale {
   from {
     opacity: 0;
@@ -82,6 +94,7 @@
   }
 }
 
+// Fade out and scale animation
 @keyframes fadeOutScale {
   from {
     opacity: 1;
@@ -103,27 +116,33 @@
   }
 }
 
-.dark {
+@include mixin.darkMode() {
   .ax-uploader-overlay-state {
+    // Dark mode gradient
     background: linear-gradient(
       135deg,
       rgba(var(--ax-sys-color-primary-600), 0.2) 0%,
       rgba(var(--ax-sys-color-primary-500), 0.25) 100%
     );
 
+    // Dark mode border
     border-color: rgba(var(--ax-sys-color-primary-400), 0.5);
 
+    // Dark mode shadow
     box-shadow:
       0 4px 16px rgba(var(--ax-sys-color-primary-900), 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.05);
 
+    // Dark mode text
     color: rgba(var(--ax-sys-color-primary-300));
 
+    // Dark mode icon
     .ax-icon {
       color: rgba(var(--ax-sys-color-primary-400));
       filter: drop-shadow(0 2px 4px rgba(var(--ax-sys-color-primary-900), 0.4));
     }
 
+    // Dark mode text shadow
     > span:not(.ax-icon) {
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     }

package/components/index.scss

@@ -0,0 +1,11 @@
+@forward './action-item';
+@forward './actionsheet';
+@forward './check-box';
+@forward './drop-down';
+@forward './editor-container';
+@forward './general-button';
+@forward './list';
+@forward './radio';
+@forward './ripple';
+@forward './table';
+@forward './uploader';

package/generators/index.js

@@ -0,0 +1 @@
+export * from './tailwind-class-generator';

package/generators/tailwind-class-generator.js

@@ -0,0 +1,68 @@
+/**
+ * You can give it the variable name you added in the theme file as input and generate color range classes from 50 to 950.
+ */
+const variations = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
+
+export const createPalette = function (colorName) {
+  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>)`,
+  };
+
+  shades.forEach((shade) => {
+    palette[shade] = `rgba(var(--ax-sys-color-${colorName}-${shade}), <alpha-value>)`;
+  });
+
+  return palette;
+};
+
+/**
+ * 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 variations.reduce((surfaces, variation) => {
+    const surfaceVariant = variation === 'surface' ? '' : '-surface';
+    surfaces[variation] = `rgba(var(--ax-sys-color-${colorName}-${variation}${surfaceVariant}), <alpha-value>)`;
+    return surfaces;
+  }, {});
+};
+
+/**
+ * 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 variations.reduce((onSurfaces, variation) => {
+    const surfaceVariant = variation === 'surface' ? '' : '-surface';
+    const key = variation === 'contrast' ? `on-${variation}` : `on-${variation}`;
+    onSurfaces[key] = `rgba(var(--ax-sys-color-on-${colorName}-${variation}${surfaceVariant}), <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 variations.reduce((borderSurfaces, variation) => {
+    const surfaceVariant = variation === 'surface' ? '' : '-surface';
+    borderSurfaces[variation] =
+      `rgba(var(--ax-sys-color-border-${colorName}-${variation}${surfaceVariant}), <alpha-value>)`;
+    return borderSurfaces;
+  }, {});
+};
+
+export function createColoredSurfaces(colorName) {
+  return variations.reduce((classes, variation) => {
+    const surfaceVariant = variation === 'surface' ? '' : '-surface';
+
+    classes[`.${colorName}-${variation}`] = {
+      backgroundColor: `rgb(var(--ax-sys-color-${colorName}-${variation}${surfaceVariant}))`,
+      color: `rgb(var(--ax-sys-color-on-${colorName}-${variation}${surfaceVariant}))`,
+      borderColor: `rgb(var(--ax-sys-color-border-${colorName}-${variation}${surfaceVariant}))`,
+    };
+    return classes;
+  }, {});
+}

package/icons/fontawesome/_variables.scss

@@ -0,0 +1,227 @@
+$ax-icon-more-horizontal: '\f141';
+$ax-icon-more-horizontal-after: '';
+
+$ax-icon-more-vertical: '\f142';
+$ax-icon-more-vertical-after: '';
+
+$ax-icon-arrow-long-up: '\f176';
+$ax-icon-arrow-long-up-after: '';
+
+$ax-icon-arrow-long-down: '\f175';
+$ax-icon-arrow-long-down-after: '';
+
+$ax-icon-color-palette: '\f53f';
+$ax-icon-color-palette-after: '';
+
+$ax-icon-arrow-left: '\f0d9';
+$ax-icon-arrow-left-after: '';
+
+$ax-icon-arrow-down: '\f0d7';
+$ax-icon-arrow-down-after: '';
+
+$ax-icon-arrow-up: '\f0d8';
+$ax-icon-arrow-up-after: '';
+
+$ax-icon-arrow-right: '\f0da';
+$ax-icon-arrow-right-after: '';
+
+$ax-icon-chevron-left: '\f053';
+$ax-icon-chevron-left-after: '';
+
+$ax-icon-chevron-down: '\f078';
+$ax-icon-chevron-down-after: '';
+
+$ax-icon-chevron-up: '\f077';
+$ax-icon-chevron-up-after: '';
+
+$ax-icon-chevron-right: '\f054';
+$ax-icon-chevron-right-after: '';
+
+$ax-icon-chevron-double-right: '\f324';
+$ax-icon-chevron-double-right-after: '';
+
+$ax-icon-chevron-double-left: '\f323';
+$ax-icon-chevron-double-left-after: '';
+
+$ax-icon-first-page: '\f33e';
+$ax-icon-first-page-after: '';
+
+$ax-icon-last-page: '\f340';
+$ax-icon-last-page-after: '';
+
+$ax-icon-calendar: '\f133';
+$ax-icon-calendar-after: '';
+
+$ax-icon-info: '\f05a';
+$ax-icon-info-after: '';
+
+$ax-icon-error: '\f06a';
+$ax-icon-error-after: '';
+
+$ax-icon-warning: '\f071';
+$ax-icon-warning-after: '';
+
+$ax-icon-check: '\f00c';
+$ax-icon-check-after: '';
+
+$ax-icon-check-circle: '\f058';
+$ax-icon-check-circle-after: '';
+
+$ax-icon-dobble-check: '\f560';
+$ax-icon-dobble-check-after: '';
+
+$ax-icon-close: '\f00d';
+$ax-icon-close-after: '';
+
+$ax-icon-clear: '\f057';
+$ax-icon-clear-after: '';
+
+$ax-icon-visibility-off: '\f070';
+$ax-icon-visibility-off-after: '';
+
+$ax-icon-visibility: '\f06e';
+$ax-icon-visibility-after: '';
+
+$ax-icon-unfold-more: '\f0dc';
+$ax-icon-unfold-more-after: '';
+
+$ax-icon-download: '\f019';
+$ax-icon-download-after: '';
+
+$ax-icon-upload: '\e09a';
+$ax-icon-upload-after: '';
+
+$ax-icon-search: '\f002';
+$ax-icon-search-after: '';
+
+$ax-icon-copy: '\f0c5';
+$ax-icon-copy-after: '';
+
+$ax-icon-refresh: '\f021';
+$ax-icon-refresh-after: '';
+
+$ax-icon-inbox: '\f01c';
+$ax-icon-inbox-after: '';
+
+$ax-icon-emoji: '\f118';
+$ax-icon-emoji-after: '';
+
+$ax-icon-attach: '\f0c6';
+$ax-icon-attach-after: '';
+
+$ax-icon-mic: '\f130';
+$ax-icon-mic-after: '';
+
+$ax-icon-send: '\f1d8';
+$ax-icon-send-after: '';
+
+$ax-icon-play: '\f04b';
+$ax-icon-play-after: '';
+
+$ax-icon-pause: '\f04c';
+$ax-icon-pause-after: '';
+
+$ax-icon-reload: '\f2f9';
+$ax-icon-reload-after: '';
+
+$ax-icon-heart: '\f004';
+$ax-icon-heart-after: '';
+
+$ax-icon-comment: '\f075';
+$ax-icon-comment-after: '';
+
+$ax-icon-bold: '\f032';
+$ax-icon-bold-after: '';
+
+$ax-icon-italic: '\f033';
+$ax-icon-italic-after: '';
+
+$ax-icon-strike: '\f0cc';
+$ax-icon-strike-after: '';
+
+$ax-icon-under-line: '\f0cd';
+$ax-icon-under-line-after: '';
+
+$ax-icon-order-list: '\f0cb';
+$ax-icon-order-list-after: '';
+
+$ax-icon-un-order-list: '\f0ca';
+$ax-icon-un-order-list-after: '';
+
+$ax-icon-align-left: '\f036';
+$ax-icon-align-left-after: '';
+
+$ax-icon-align-right: '\f038';
+$ax-icon-align-right-after: '';
+
+$ax-icon-align-center: '\f037';
+$ax-icon-align-center-after: '';
+
+$ax-icon-align-justify: '\f039';
+$ax-icon-align-justify-after: '';
+
+$ax-icon-undo: '\f0e2';
+$ax-icon-undo-after: '';
+
+$ax-icon-redo: '\f01e';
+$ax-icon-redo-after: '';
+
+$ax-icon-highlight: '\f591';
+$ax-icon-highlight-after: '';
+
+$ax-icon-link: '\f0c1';
+$ax-icon-link-after: '';
+
+$ax-icon-image: '\f03e';
+$ax-icon-image-after: '';
+
+$ax-icon-pen: '\f304';
+$ax-icon-pen-after: '';
+
+$ax-icon-eraser: '\f12d';
+$ax-icon-eraser-after: '';
+
+$ax-icon-pen-ruler: '\f5ae';
+$ax-icon-pen-ruler-after: '';
+
+$ax-icon-crop: '\f125';
+$ax-icon-crop-after: '';
+
+$ax-icon-full-screen: '\f065';
+$ax-icon-full-screen-after: '';
+
+$ax-icon-up-folder: '\e632';
+$ax-icon-up-folder-after: '';
+
+$ax-icon-sort: '\e0ae';
+$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: '';
+
+$ax-icon-arrow-turn-right: '\e635';
+$ax-icon-arrow-turn-right-after: '';
+
+$ax-icon-arrow-turn-left: '\e632';
+$ax-icon-arrow-turn-left-after: '';
+
+$ax-icon-save: '\f0c7';
+$ax-icon-save-after: '';
+
+$ax-icon-minimize: '\f068';
+$ax-icon-minimize-after: '';
+
+$ax-icon-maximize: '\f31d';
+$ax-icon-maximize-after: '';
+
+$ax-icon-code: '\f121';
+$ax-icon-code-after: '';
+
+$ax-icon-paragraph: '\f1dd';
+$ax-icon-paragraph-after: '';