@acorex/styles 21.0.2-next.29 → 21.0.2-next.30

package/components/_editor-container.scss

@@ -1,293 +0,0 @@
-@use '../mixins/index.scss' as mixin;
-
-:root,
-.ax-editor-container {
-  --ax-comp-editor-font-size: 0.875rem;
-  --ax-comp-editor-gap: 0.5rem;
-  --ax-comp-editor-space-start-size: 0.5rem;
-  --ax-comp-editor-space-end-size: 0.5rem;
-  --ax-comp-editor-space-block-size: 0.5rem;
-  --ax-comp-editor-height: var(--ax-sys-size-base);
-  --ax-comp-editor-placeholder-space-x: 0.75rem;
-
-  --ax-comp-editor-error-bg-color: var(--ax-sys-color-danger-light-surface);
-  --ax-comp-editor-error-text-color: var(--ax-sys-color-danger-surface);
-  --ax-comp-editor-error-border-color: var(--ax-sys-color-border-danger-surface);
-  --ax-comp-editor-error-box-shadow-color: var(--ax-sys-color-danger-surface);
-
-  --ax-comp-editor-text-color: var(--ax-sys-color-on-surface);
-  --ax-comp-editor-border-color: var(--ax-sys-color-border-surface);
-  --ax-comp-editor-border-radius: var(--ax-sys-border-radius);
-  --ax-comp-editor-box-outline-width: 1px;
-  --ax-comp-editor-box-outline-color: var(--ax-sys-color-primary-surface);
-  --ax-comp-editor-placeholder-opacity: 0.5;
-
-  --ax-comp-editor-focused-border-color: var(--ax-sys-color-border-primary-surface);
-  --ax-comp-editor-focused-box-shadow-color: var(--ax-sys-color-primary-surface);
-
-  --ax-comp-editor-border-width: 0px;
-}
-
-.ax-editor-container {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  width: 100%;
-  height: var(--ax-comp-editor-height);
-  font-size: var(--ax-comp-editor-font-size);
-  border-radius: var(--ax-comp-editor-border-radius);
-  border-width: var(--ax-comp-editor-border-width);
-  border-color: rgba(var(--ax-comp-editor-border-color));
-  background-color: rgba(var(--ax-comp-editor-bg-color));
-  color: rgba(var(--ax-comp-editor-text-color));
-  position: relative;
-  gap: var(--ax-comp-editor-gap);
-  padding-inline-end: var(--ax-comp-editor-space-end-size);
-  padding-inline-start: var(--ax-comp-editor-space-start-size);
-  justify-content: space-between;
-  .ax-icon {
-    font-size: var(--ax-comp-editor-icon-font-size);
-  }
-
-  &:has(> ax-prefix) {
-    padding-inline-start: 0;
-    > ax-prefix {
-      &:has(ax-button, .ax-editor-container) {
-        --ax-comp-editor-space-start-size: 0px;
-      }
-      padding-inline-start: var(--ax-comp-editor-space-start-size);
-    }
-  }
-
-  &:has(> ax-suffix) {
-    padding-inline-end: 0;
-    > ax-suffix {
-      &:has(ax-button, .ax-editor-container) {
-        --ax-comp-editor-space-end-size: 0px;
-      }
-      padding-inline-end: var(--ax-comp-editor-space-end-size);
-    }
-  }
-
-  &:not(.ax-state-disabled) {
-    &:focus-within {
-      border-color: rgba(var(--ax-comp-editor-focused-border-color));
-      outline-width: var(--ax-comp-editor-box-outline-width);
-      outline-style: solid;
-      outline-color: rgba(var(--ax-comp-editor-focused-border-color));
-    }
-  }
-
-  &.ax-state-error {
-    border-color: rgba(var(--ax-comp-editor-error-border-color));
-    outline-width: var(--ax-comp-editor-box-outline-width);
-    outline-color: rgba(var(--ax-comp-editor-error-border-color));
-    outline-style: solid;
-    &:focus-within {
-      border-color: rgba(var(--ax-comp-editor-error-border-color));
-    }
-    .ax-input {
-      .ax-placeholder,
-      &::placeholder {
-        color: rgba(var(--ax-comp-editor-error-text-color), var(--ax-comp-editor-placeholder-opacity));
-      }
-    }
-  }
-
-  &.ax-solid {
-    @include mixin.solid-look();
-  }
-  &.ax-outline {
-    @include mixin.outline-look();
-  }
-
-  &.ax-flat {
-    @include mixin.flat-look();
-  }
-
-  &.ax-fill {
-    @include mixin.fill-look();
-  }
-  &.ax-none {
-    @include mixin.none-look();
-  }
-
-  .ax-editor-input {
-    height: 100%;
-    flex: 1 1 0%;
-
-    .ax-input {
-      height: 100%;
-    }
-  }
-
-  // .ax-editor,
-  // .ax-input {
-  //   padding-inline-start: var(--ax-comp-editor-space-start-size);
-  //   padding-inline-end: var(--ax-comp-editor-space-end-size);
-  // }
-  .ax-input {
-    // padding: 0 calc(var(--ax-comp-editor-font-size) - 4px);
-    font-size: var(--ax-comp-editor-font-size);
-    line-height: var(--ax-comp-editor-font-size);
-    color: rgba(var(--ax-comp-editor-text-color));
-    cursor: inherit;
-    .ax-placeholder,
-    &::placeholder {
-      font-size: inherit;
-      font-weight: 400;
-      color: rgb(var(--ax-comp-editor-text-color), var(--ax-comp-editor-placeholder-opacity));
-    }
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-      outline: none;
-    }
-  }
-
-  &.ax-state-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .ax-editor-control {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    padding-inline-start: 0.5rem;
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-    color: rgba(var(--ax-comp-editor-text-color));
-  }
-
-  &.ax-button-icon {
-    padding: 0 0.5rem;
-  }
-
-  .ax-input,
-  .ax-text-area {
-    text-align: inherit;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    height: 100%;
-    width: 100%;
-    flex: 1 1 0%;
-    background-color: transparent;
-    font-weight: inherit;
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .ax-editor-button {
-    font-size: var(--ax-comp-editor-button-font-size, var(--ax-comp-editor-font-size));
-    height: var(--ax-comp-editor-button-height, 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.5rem;
-  }
-
-  // .ax-editor-button,
-  // .ax-clear-button {
-  //   padding-inline-end: var(--ax-comp-editor-space-end-size);
-  // }
-
-  & > ax-prefix,
-  & > ax-suffix {
-    height: 100%;
-    max-width: fit-content;
-
-    ax-button,
-    ax-text,
-    ax-icon,
-    .ax-editor-container {
-      display: flex;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      border-radius: 0px;
-    }
-
-    ax-title {
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-
-    & > ax-text {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .ax-button {
-    height: 100% !important;
-    border-radius: 0px !important;
-
-    &.ax-button-icon {
-      height: 100%;
-      width: var(--ax-comp-editor-height);
-    }
-  }
-
-  ax-popover {
-    position: absolute;
-  }
-}
-
-.ax-xs .ax-editor-container,
-.ax-editor-container.ax-xs {
-  --ax-comp-editor-font-size: 0.75rem;
-  --ax-comp-editor-space-start-size: 0.25rem;
-  --ax-comp-editor-space-end-size: 0.25rem;
-  --ax-comp-editor-button-font-size: 0.625rem;
-  --ax-comp-editor-gap: 0.25rem;
-  --ax-comp-editor-icon-font-size: 0.75rem;
-}
-.ax-sm .ax-editor-container,
-.ax-editor-container.ax-sm {
-  --ax-comp-editor-font-size: 0.875rem;
-  --ax-comp-editor-space-start-size: 0.5rem;
-  --ax-comp-editor-space-end-size: 0.5rem;
-  --ax-comp-editor-button-font-size: 0.75rem;
-  --ax-comp-editor-gap: 0.375rem;
-  --ax-comp-editor-icon-font-size: 0.875rem;
-}
-
-.ax-md .ax-editor-container,
-.ax-editor-container,
-.ax-editor-container.ax-md {
-  --ax-comp-editor-space-start-size: 0.75rem;
-  --ax-comp-editor-space-end-size: 0.75rem;
-  --ax-comp-editor-button-font-size: 0.875rem;
-  --ax-comp-editor-gap: 0.5rem;
-  --ax-comp-editor-icon-font-size: 1rem;
-}
-
-.ax-lg .ax-editor-container,
-.ax-editor-container.ax-lg {
-  --ax-comp-editor-font-size: 1.125rem;
-  --ax-comp-editor-space-start-size: 1.125rem;
-  --ax-comp-editor-space-end-size: 1.125rem;
-  --ax-comp-editor-button-font-size: 0.875rem;
-  --ax-comp-editor-gap: 0.625rem;
-  --ax-comp-editor-icon-font-size: 1.25rem;
-}
-
-.ax-xl .ax-editor-container,
-.ax-editor-container.ax-xl {
-  --ax-comp-editor-font-size: 1.5rem;
-  --ax-comp-editor-space-start-size: 1.5rem;
-  --ax-comp-editor-space-end-size: 1.5rem;
-  --ax-comp-editor-button-font-size: 1rem;
-  --ax-comp-editor-gap: 0.75rem;
-  --ax-comp-editor-icon-font-size: 1.5rem;
-}
-
-ax-validation-rule {
-  position: absolute;
-}

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,12 +0,0 @@
-@forward './action-item';
-@forward './actionsheet';
-@forward './conversation-picker-popup';
-@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;
-  }, {});
-}