@acorex/styles 21.0.0-next.8 → 21.0.0-next51

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,54 +14,31 @@
   border-radius: var(--ax-sys-border-radius);
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-lightest-surface));
-  font-size: 0.875rem
-    /* 14px */
-  ;
-  line-height: 1.25rem
-    /* 20px */
-  ;
-
+  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
-      /* 16px */
-    ;
-    padding-right: 1rem
-      /* 16px */
-    ;
-    padding-top: 0.75rem
-      /* 12px */
-    ;
-    padding-bottom: 0.75rem
-      /* 12px */
-    ;
+    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
-        /* 16px */
-      ;
-      padding-right: 1rem
-        /* 16px */
-      ;
-      padding-top: 0.875rem
-        /* 14px */
-      ;
-      padding-bottom: 0.875rem
-        /* 14px */
-      ;
+      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;
     }
   }
-
   &.ax-table-alternate {
     tbody {
       tr {
@@ -71,14 +48,12 @@
       }
     }
   }
-
   &.ax-table-bordered {
     thead {
       th {
         border-top-width: 0px !important;
       }
     }
-
     tbody {
       tr {
         &:last-child {
@@ -86,7 +61,6 @@
             border-bottom-width: 0px !important;
           }
         }
-
         td {
           &:last-child {
             border-bottom-width: 0px !important;
@@ -103,14 +77,12 @@
       &:first-child {
         border-inline-start-width: 0px;
       }
-
       &:last-child {
         border-inline-end-width: 0px;
       }
     }
   }
-
-  @media screen and (max-width: 640px) {
+  @include mixins.mediaLessThan('xs') {
     &.ax-table-responsive {
       display: block;
       overflow-wrap: break-word;
@@ -128,44 +100,29 @@
         box-sizing: border-box;
         display: block;
         width: 100%;
-        padding-left: 0.625rem
-          /* 10px */
-        ;
-        padding-right: 0.625rem
-          /* 10px */
-        ;
-        padding-top: 0.375rem
-          /* 6px */
-        ;
-        padding-bottom: 0.375rem
-          /* 6px */
-        ;
-
+        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;
         }
-
         &:before {
           content: attr(data-label);
           display: block;
           font-weight: 700;
         }
       }
-
       tr {
         border-width: 1px;
         border-color: rgba(var(--ax-sys-color-border-lightest-surface));
       }
-
       tr,
       tbody {
         float: inline-start;
-        margin-bottom: 0.625rem
-          /* 10px */
-        ;
+        margin-bottom: 0.625rem /* 10px */;
         width: 100%;
       }
     }
   }
-
-}
+}

package/components/_uploader.scss

@@ -0,0 +1,150 @@
+@use '../mixins/index.scss' as mixin;
+
+.ax-uploader-overlay-state {
+  border-radius: inherit;
+  pointer-events: none;
+  position: absolute;
+  inset-inline-start: 0px;
+  top: 0px;
+  z-index: 10;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  flex-direction: column;
+  align-items: center;
+  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%,
+    rgba(var(--ax-sys-color-primary-400), 0.2) 100%
+  );
+  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 */;
+    color: rgba(var(--ax-sys-color-primary-600));
+    filter: drop-shadow(0 2px 4px rgba(var(--ax-sys-color-primary-500), 0.2));
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    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% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+}
+
+// Fade in and scale animation
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Fade out and scale animation
+@keyframes fadeOutScale {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.ax-drop-zone {
+  > input {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    opacity: 0;
+  }
+}
+
+@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: '';