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

package/components/_general-button.scss

@@ -1,75 +0,0 @@
-.ax-general-button {
-  display: inline-flex;
-  height: var(--ax-sys-size-base);
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--ax-sys-border-radius);
-  padding-left: var(--ax-comp-general-button-padding-left, 1rem);
-  padding-right: var(--ax-comp-general-button-padding-right, 1rem);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: rgb(var(--ax-sys-color-on-surface), 0.75);
-
-  &:hover {
-    &:not(&:disabled, .ax-state-disabled) {
-      color: rgba(var(--ax-sys-color-primary-500), var(--tw-text-opacity));
-    }
-  }
-
-  &:focus,
-  &:focus-visible {
-    &:not(&:disabled, .ax-state-disabled) {
-      color: rgba(var(--ax-sys-color-primary-700), var(--tw-text-opacity));
-    }
-  }
-
-  &:active {
-    &:not(&:disabled, .ax-state-disabled) {
-      color: rgba(var(--ax-sys-color-primary-300), var(--tw-text-opacity));
-    }
-  }
-
-  &.ax-button-icon {
-    padding-left: var(--ax-comp-general-button-padding-left, 0.5rem);
-    padding-right: var(--ax-comp-general-button-padding-right, 0.5rem);
-    font-size: 100%;
-    > button {
-      display: flex;
-    }
-  }
-  &.ax-button-rounded {
-    border-radius: var(--ax-sys-border-radius);
-  }
-  &:disabled,
-  &.ax-state-disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-.ax-clear-button {
-  display: inline-flex;
-  height: var(--ax-sys-size-base);
-  align-items: center;
-  justify-content: center;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  font-size: 1rem /* 16px */;
-  line-height: 1.5rem /* 24px */;
-  color: rgb(var(--ax-sys-color-on-surface), 0.75);
-
-  > button {
-    display: flex;
-  }
-  &:hover {
-    &:not(&:disabled, .ax-state-disabled) {
-      color: rgb(var(--ax-sys-color-on-surface), 0.5);
-    }
-  }
-  &:focus,
-  &:focus-visible {
-    &:not(&:disabled, .ax-state-disabled) {
-      color: rgb(var(--ax-sys-color-on-surface));
-    }
-  }
-}

package/components/_radio.scss

@@ -1,51 +0,0 @@
-@use '../mixins/index.scss';
-
-.ax-radio {
-  margin: 0px;
-  height: 1rem /* 16px */;
-  min-height: 1rem /* 16px */;
-  min-width: 1rem /* 16px */;
-  width: 1rem /* 16px */;
-  cursor: pointer;
-  appearance: none;
-  border-radius: 9999px /* 4px */;
-  border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-border-surface));
-  background-color: rgba(var(--ax-sys-color-input-surface));
-  vertical-align: middle;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-
-  &:checked {
-    border-color: rgba(var(--ax-sys-color-primary-500)) !important;
-    background-color: rgba(var(--ax-sys-color-primary-500)) !important;
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-
-  &:checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-  }
-
-  &:focus-visible,
-  &:focus {
-    box-shadow:
-      0px 0px 0px 2px rgba(var(--ax-sys-color-surface)),
-      0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-}
-
-// @include darkMode() {
-//   .ax-checkbox {
-//     &:checked {
-//       border-color: rgba(var(--ax-sys-color-primary-200)) !important;
-//       background-color: rgba(var(--ax-sys-color-primary-200)) !important;
-//       background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-//     }
-//   }
-// }

package/components/index.scss

@@ -1,11 +0,0 @@
-@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

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

package/generators/tailwind-class-generator.js

@@ -1,68 +0,0 @@
-/**
- * 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

@@ -1,227 +0,0 @@
-$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: '';