@acorex/styles 21.0.0-next.5 → 21.0.0-next.7

package/icons/material/index.css

@@ -0,0 +1,573 @@
+@import './_variables.css';
+
+.ax-icon-thin {
+  --ax-sys-icon-weight: 100;
+}
+.ax-icon-light {
+  --ax-sys-icon-weight: 300;
+}
+.ax-icon-regular {
+  --ax-sys-icon-weight: 400;
+}
+.ax-icon-solid {
+  --ax-sys-icon-weight: 900;
+}
+
+.ax-icon {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+.ax-icon-more-horizontal::before {
+  content: var(--ax-icon-more-horizontal);
+}
+.ax-icon-more-horizontal::after {
+  content: var(--ax-icon-more-horizontal-after);
+}
+
+.ax-icon-more-vertical::before {
+  content: var(--ax-icon-more-vertical);
+}
+.ax-icon-more-vertical::after {
+  content: var(--ax-icon-more-vertical-after);
+}
+
+.ax-icon-arrow-long-up::before {
+  content: var(--ax-icon-arrow-long-up);
+}
+.ax-icon-arrow-long-up::after {
+  content: var(--ax-icon-arrow-long-up-after);
+}
+
+.ax-icon-arrow-long-down::before {
+  content: var(--ax-icon-arrow-long-down);
+}
+.ax-icon-arrow-long-down::after {
+  content: var(--ax-icon-arrow-long-down-after);
+}
+
+.ax-icon-color-palette::before {
+  content: var(--ax-icon-color-palette);
+}
+.ax-icon-color-palette::after {
+  content: var(--ax-icon-color-palette-after);
+}
+
+.ax-icon-arrow-left::before {
+  content: var(--ax-icon-arrow-left);
+}
+.ax-icon-arrow-left::after {
+  content: var(--ax-icon-arrow-left-after);
+}
+
+.ax-icon-arrow-down::before {
+  content: var(--ax-icon-arrow-down);
+}
+.ax-icon-arrow-down::after {
+  content: var(--ax-icon-arrow-down-after);
+}
+
+.ax-icon-arrow-up::before {
+  content: var(--ax-icon-arrow-up);
+}
+.ax-icon-arrow-up::after {
+  content: var(--ax-icon-arrow-up-after);
+}
+
+.ax-icon-arrow-right::before {
+  content: var(--ax-icon-arrow-right);
+}
+.ax-icon-arrow-right::after {
+  content: var(--ax-icon-arrow-right-after);
+}
+
+.ax-icon-chevron-left::before {
+  content: var(--ax-icon-chevron-left);
+}
+.ax-icon-chevron-left::after {
+  content: var(--ax-icon-chevron-left-after);
+}
+
+.ax-icon-chevron-down::before {
+  content: var(--ax-icon-chevron-down);
+}
+.ax-icon-chevron-down::after {
+  content: var(--ax-icon-chevron-down-after);
+}
+
+.ax-icon-chevron-up::before {
+  content: var(--ax-icon-chevron-up);
+}
+.ax-icon-chevron-up::after {
+  content: var(--ax-icon-chevron-up-after);
+}
+
+.ax-icon-chevron-right::before {
+  content: var(--ax-icon-chevron-right);
+}
+.ax-icon-chevron-right::after {
+  content: var(--ax-icon-chevron-right-after);
+}
+
+.ax-icon-chevron-double-right::before {
+  content: var(--ax-icon-chevron-double-right);
+}
+.ax-icon-chevron-double-right::after {
+  content: var(--ax-icon-chevron-double-right-after);
+}
+
+.ax-icon-chevron-double-left::before {
+  content: var(--ax-icon-chevron-double-left);
+}
+.ax-icon-chevron-double-left::after {
+  content: var(--ax-icon-chevron-double-left-after);
+}
+
+.ax-icon-first-page::before {
+  content: var(--ax-icon-first-page);
+}
+.ax-icon-first-page::after {
+  content: var(--ax-icon-first-page-after);
+}
+
+.ax-icon-last-page::before {
+  content: var(--ax-icon-last-page);
+}
+.ax-icon-last-page::after {
+  content: var(--ax-icon-last-page-after);
+}
+
+.ax-icon-calendar::before {
+  content: var(--ax-icon-calendar);
+}
+.ax-icon-calendar::after {
+  content: var(--ax-icon-calendar-after);
+}
+
+.ax-icon-error::before {
+  content: var(--ax-icon-error);
+}
+.ax-icon-error::after {
+  content: var(--ax-icon-error-after);
+}
+
+.ax-icon-info::before {
+  content: var(--ax-icon-info);
+}
+.ax-icon-info::after {
+  content: var(--ax-icon-info-after);
+}
+
+.ax-icon-warning::before {
+  content: var(--ax-icon-warning);
+}
+.ax-icon-warning::after {
+  content: var(--ax-icon-warning-after);
+}
+
+.ax-icon-check-circle::before {
+  content: var(--ax-icon-check-circle);
+}
+.ax-icon-check-circle::after {
+  content: var(--ax-icon-check-circle-after);
+}
+
+.ax-icon-close::before {
+  content: var(--ax-icon-close);
+}
+.ax-icon-close::after {
+  content: var(--ax-icon-close-after);
+}
+
+.ax-icon-clear::before {
+  content: var(--ax-icon-clear);
+}
+.ax-icon-clear::after {
+  content: var(--ax-icon-clear-after);
+}
+
+.ax-icon-visibility-off::before {
+  content: var(--ax-icon-visibility-off);
+}
+.ax-icon-visibility-off::after {
+  content: var(--ax-icon-visibility-off-after);
+}
+
+.ax-icon-visibility::before {
+  content: var(--ax-icon-visibility);
+}
+.ax-icon-visibility::after {
+  content: var(--ax-icon-visibility-after);
+}
+
+.ax-icon-unfold-more::before {
+  content: var(--ax-icon-unfold-more);
+}
+.ax-icon-unfold-more::after {
+  content: var(--ax-icon-unfold-more-after);
+}
+
+.ax-icon-download::before {
+  content: var(--ax-icon-download);
+}
+.ax-icon-download::after {
+  content: var(--ax-icon-download-after);
+}
+
+.ax-icon-upload::before {
+  content: var(--ax-icon-upload);
+}
+.ax-icon-upload::after {
+  content: var(--ax-icon-upload-after);
+}
+
+.ax-icon-search::before {
+  content: var(--ax-icon-search);
+}
+.ax-icon-search::after {
+  content: var(--ax-icon-search-after);
+}
+
+.ax-icon-copy::before {
+  content: var(--ax-icon-copy);
+}
+.ax-icon-copy::after {
+  content: var(--ax-icon-copy-after);
+}
+
+.ax-icon-refresh::before {
+  content: var(--ax-icon-refresh);
+}
+.ax-icon-refresh::after {
+  content: var(--ax-icon-refresh-after);
+}
+
+.ax-icon-inbox::before {
+  content: var(--ax-icon-inbox);
+}
+.ax-icon-inbox::after {
+  content: var(--ax-icon-inbox-after);
+}
+
+.ax-icon-emoji::before {
+  content: var(--ax-icon-emoji);
+}
+.ax-icon-emoji::after {
+  content: var(--ax-icon-emoji-after);
+}
+
+.ax-icon-attach::before {
+  content: var(--ax-icon-attach);
+}
+.ax-icon-attach::after {
+  content: var(--ax-icon-attach-after);
+}
+
+.ax-icon-mic::before {
+  content: var(--ax-icon-mic);
+}
+.ax-icon-mic::after {
+  content: var(--ax-icon-mic-after);
+}
+
+.ax-icon-send::before {
+  content: var(--ax-icon-send);
+}
+.ax-icon-send::after {
+  content: var(--ax-icon-send-after);
+}
+
+.ax-icon-check::before {
+  content: var(--ax-icon-check);
+}
+.ax-icon-check::after {
+  content: var(--ax-icon-check-after);
+}
+
+.ax-icon-dobble-check::before {
+  content: var(--ax-icon-dobble-check);
+}
+.ax-icon-dobble-check::after {
+  content: var(--ax-icon-dobble-check-after);
+}
+
+.ax-icon-pause::before {
+  content: var(--ax-icon-pause);
+}
+.ax-icon-pause::after {
+  content: var(--ax-icon-pause-after);
+}
+
+.ax-icon-play::before {
+  content: var(--ax-icon-play);
+}
+.ax-icon-play::after {
+  content: var(--ax-icon-play-after);
+}
+
+.ax-icon-reload::before {
+  content: var(--ax-icon-reload);
+}
+.ax-icon-reload::after {
+  content: var(--ax-icon-reload-after);
+}
+
+.ax-icon-heart::before {
+  content: var(--ax-icon-heart);
+}
+.ax-icon-heart::after {
+  content: var(--ax-icon-heart-after);
+}
+
+.ax-icon-comment::before {
+  content: var(--ax-icon-comment);
+}
+.ax-icon-comment::after {
+  content: var(--ax-icon-comment-after);
+}
+
+.ax-icon-bold::before {
+  content: var(--ax-icon-bold);
+}
+.ax-icon-bold::after {
+  content: var(--ax-icon-bold-after);
+}
+
+.ax-icon-italic::before {
+  content: var(--ax-icon-italic);
+}
+.ax-icon-italic::after {
+  content: var(--ax-icon-italic-after);
+}
+
+.ax-icon-under-line::before {
+  content: var(--ax-icon-under-line);
+}
+.ax-icon-under-line::after {
+  content: var(--ax-icon-under-line-after);
+}
+
+.ax-icon-strike::before {
+  content: var(--ax-icon-strike);
+}
+.ax-icon-strike::after {
+  content: var(--ax-icon-strike-after);
+}
+
+.ax-icon-order-list::before {
+  content: var(--ax-icon-order-list);
+}
+.ax-icon-un-order-list::after {
+  content: var(--ax-icon-un-order-list-after);
+}
+
+.ax-icon-align-left::before {
+  content: var(--ax-icon-align-left);
+}
+.ax-icon-align-left::after {
+  content: var(--ax-icon-align-left-after);
+}
+
+.ax-icon-align-right::before {
+  content: var(--ax-icon-align-right);
+}
+.ax-icon-align-right::after {
+  content: var(--ax-icon-align-right-after);
+}
+
+.ax-icon-align-center::before {
+  content: var(--ax-icon-align-center);
+}
+.ax-icon-align-center::after {
+  content: var(--ax-icon-align-center-after);
+}
+
+.ax-icon-align-justify::before {
+  content: var(--ax-icon-align-justify);
+}
+.ax-icon-align-justify::after {
+  content: var(--ax-icon-align-justify-after);
+}
+
+.ax-icon-undo::before {
+  content: var(--ax-icon-undo);
+}
+.ax-icon-undo::after {
+  content: var(--ax-icon-undo-after);
+}
+
+.ax-icon-redo::before {
+  content: var(--ax-icon-redo);
+}
+.ax-icon-redo::after {
+  content: var(--ax-icon-redo-after);
+}
+
+.ax-icon-highlight::before {
+  content: var(--ax-icon-highlight);
+}
+.ax-icon-highlight::after {
+  content: var(--ax-icon-highlight-after);
+}
+
+.ax-icon-link::before {
+  content: var(--ax-icon-link);
+}
+.ax-icon-link::after {
+  content: var(--ax-icon-link-after);
+}
+
+.ax-icon-image::before {
+  content: var(--ax-icon-image);
+}
+.ax-icon-image::after {
+  content: var(--ax-icon-image-after);
+}
+
+.ax-icon-pen::before {
+  content: var(--ax-icon-pen);
+}
+.ax-icon-pen::after {
+  content: var(--ax-icon-pen-after);
+}
+
+.ax-icon-eraser::before {
+  content: var(--ax-icon-eraser);
+}
+.ax-icon-eraser::after {
+  content: var(--ax-icon-eraser-after);
+}
+
+.ax-icon-pen-ruler::before {
+  content: var(--ax-icon-pen-ruler);
+}
+.ax-icon-pen-ruler::after {
+  content: var(--ax-icon-pen-ruler-after);
+}
+
+.ax-icon-crop::before {
+  content: var(--ax-icon-crop);
+}
+.ax-icon-crop::after {
+  content: var(--ax-icon-crop-after);
+}
+
+.ax-icon-full-screen::before {
+  content: var(--ax-icon-full-screen);
+}
+.ax-icon-full-screen::after {
+  content: var(--ax-icon-full-screen-after);
+}
+
+.ax-icon-up-folder::before {
+  content: var(--ax-icon-up-folder);
+}
+.ax-icon-up-folder::after {
+  content: var(--ax-icon-up-folder-after);
+}
+
+.ax-icon-sort::before {
+  content: var(--ax-icon-sort);
+}
+.ax-icon-sort::after {
+  content: var(--ax-icon-sort-after);
+}
+
+.ax-icon-menu::before {
+  content: var(--ax-icon-menu);
+}
+.ax-icon-menu::after {
+  content: var(--ax-icon-menu-after);
+}
+
+.ax-icon-plus::before {
+  content: var(--ax-icon-plus);
+}
+.ax-icon-plus::after {
+  content: var(--ax-icon-plus-after);
+}
+
+.ax-icon-trash::before {
+  content: var(--ax-icon-trash);
+}
+.ax-icon-trash::after {
+  content: var(--ax-icon-trash-after);
+}
+
+.ax-icon-arrow-turn-right::before {
+  content: var(--ax-icon-arrow-turn-right);
+}
+.ax-icon-arrow-turn-right::after {
+  content: var(--ax-icon-arrow-turn-right-after);
+}
+
+.ax-icon-arrow-turn-left::before {
+  content: var(--ax-icon-arrow-turn-left);
+}
+.ax-icon-arrow-turn-left::after {
+  content: var(--ax-icon-arrow-turn-left-after);
+}
+
+.ax-icon-save::before {
+  content: var(--ax-icon-save);
+}
+.ax-icon-save::after {
+  content: var(--ax-icon-save-after);
+}
+
+.ax-icon-minimize::before {
+  content: var(--ax-icon-minimize);
+}
+.ax-icon-minimize::after {
+  content: var(--ax-icon-minimize-after);
+}
+
+.ax-icon-maximize::before {
+  content: var(--ax-icon-maximize);
+}
+.ax-icon-maximize::after {
+  content: var(--ax-icon-maximize-after);
+}
+
+.ax-icon-code::before {
+  content: var(--ax-icon-code);
+}
+.ax-icon-code::after {
+  content: var(--ax-icon-code-after);
+}
+
+.ax-icon-paragraph::before {
+  content: var(--ax-icon-paragraph);
+}
+.ax-icon-paragraph::after {
+  content: var(--ax-icon-paragraph-after);
+}
+
+.ax-icon-thin {
+  --ax-sys-icon-weight: 100;
+}
+.ax-icon-light {
+  --ax-sys-icon-weight: 300;
+}
+.ax-icon-regular {
+  --ax-sys-icon-weight: 400;
+}
+.ax-icon-solid {
+  --ax-sys-icon-weight: 900;
+}

package/index.css

@@ -0,0 +1,25 @@
+/* @forward './base/index.scss';
+@forward './components/index.scss';
+@forward './mixins/index.scss';
+@forward './utils/index.scss';
+@forward './variables/index.scss'; */
+@import './components/index.css';
+
+@import '@angular/cdk/overlay-prebuilt.css';
+
+
+:root {
+    --ax-overlay-full-width: 93;
+    --ax-sys-transition-duration: 150ms;
+    --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+html {
+    background-color: rgba(var(--ax-sys-color-lightest-surface));
+    color: rgba(var(--ax-sys-color-on-lightest-surface));
+}
+
+html.dark {
+    background-color: rgba(var(--ax-sys-color-darkest-surface));
+    color: rgba(var(--ax-sys-color-on-darkest-surface));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.0-next.5",
+  "version": "21.0.0-next.7",
   "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",

package/tailwind-base.js

@@ -220,7 +220,6 @@ const UTILITY_CLASSES = {
 };
 
 module.exports = withAnimations({
-  prefix: 'ax-',
   content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
   darkMode: 'class',
   safelist: [
@@ -315,9 +314,6 @@ module.exports = withAnimations({
       },
     },
   },
-  corePlugins: {
-    preflight: false,
-  },
 
   plugins: [
     plugin(function ({ addUtilities }) {

package/themes/{default.scss → default copy.scss }

@@ -5,6 +5,7 @@ import path in your app must be like this:
 */
 @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.
@@ -13,17 +14,14 @@ it uses the first color for light mode and the second color for dark mode. For e
 */
 $theme-colors: (
   'primary': oklch(0.623 0.214 259.815),
-  'secondary': (
-    oklch(24.65% 0.0531 250.05),
+  'secondary': (oklch(24.65% 0.0531 250.05),
     oklch(47.03% 0.0531 250.05),
   ),
   'success': oklch(0.696 0.17 162.48),
-  'warning': (
-    oklch(81.17% 0.188 70.08),
+  'warning': (oklch(81.17% 0.188 70.08),
     oklch(86.5% 0.188 70.08),
   ),
-  'danger': (
-    oklch(0.645 0.246 16.439),
+  'danger': (oklch(0.645 0.246 16.439),
     oklch(0.712 0.194 13.428),
   ),
   'accent1': oklch(0.628 0.1579 104.82),
@@ -64,11 +62,10 @@ Importing default variables and overriding them with higher values
 */
 @forward '../variables/index.scss';
 
-:root,
-.ax-light {
+:root {
   --ax-sys-body-font-size: 1rem; // Body font size
   --ax-sys-size-base: 2.5rem; // Variable height of elements, such as inputs and buttons
   --ax-sys-border-radius: 0.5rem; // Default roundness value for corners
 }
 
-@include utils.generate-palette-variables($theme-colors, $theme-surfaces, $options);
+@include utils.generate-palette-variables($theme-colors, $theme-surfaces, $options);