@acorex/styles 6.1.12 → 6.5.0

package/index.js

@@ -1,185 +0,0 @@
-const plugin = require("tailwindcss/plugin");
-const withAnimations = require("animated-tailwindcss");
-
-function withOpacityValue(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`;
-    }
-    return `rgb(var(${variable}) / ${opacityValue})`;
-  };
-}
-
-module.exports = withAnimations({
-  prefix: "ax-",
-  content: [
-    "./src/**/*.{html,ts,scss}",
-    "./projects/**/*.{html,ts,scss}",
-    "./dist/acorex/**/*.{html,ts,scss}",
-    "./node_modules/@acorex/**/*.{html,ts,js,mjs,scss}",
-  ],
-  darkMode: "class", // or 'media' or 'class'
-  theme: {
-    extend: {
-      colors: {
-        black: withOpacityValue("--ax-color-black"),
-        white: withOpacityValue("--ax-color-white"),
-        "default-background": withOpacityValue("--ax-color-default-background"),
-        "default-color": withOpacityValue("--ax-color-default-color"),
-        primary: {
-          fore: withOpacityValue("--ax-color-primary-fore"),
-          50: withOpacityValue("--ax-color-primary-50"),
-          100: withOpacityValue("--ax-color-primary-100"),
-          200: withOpacityValue("--ax-color-primary-200"),
-          300: withOpacityValue("--ax-color-primary-300"),
-          400: withOpacityValue("--ax-color-primary-400"),
-          500: withOpacityValue("--ax-color-primary-500"),
-          600: withOpacityValue("--ax-color-primary-600"),
-          700: withOpacityValue("--ax-color-primary-700"),
-          800: withOpacityValue("--ax-color-primary-800"),
-          900: withOpacityValue("--ax-color-primary-900"),
-        },
-        secondary: {
-          fore: withOpacityValue("--ax-color-secondary-fore"),
-          50: withOpacityValue("--ax-color-secondary-50"),
-          100: withOpacityValue("--ax-color-secondary-100"),
-          200: withOpacityValue("--ax-color-secondary-200"),
-          300: withOpacityValue("--ax-color-secondary-300"),
-          400: withOpacityValue("--ax-color-secondary-400"),
-          500: withOpacityValue("--ax-color-secondary-500"),
-          600: withOpacityValue("--ax-color-secondary-600"),
-          700: withOpacityValue("--ax-color-secondary-700"),
-          800: withOpacityValue("--ax-color-secondary-800"),
-          900: withOpacityValue("--ax-color-secondary-900"),
-        },
-        success: {
-          fore: withOpacityValue("--ax-color-success-fore"),
-          50: withOpacityValue("--ax-color-success-50"),
-          100: withOpacityValue("--ax-color-success-100"),
-          200: withOpacityValue("--ax-color-success-200"),
-          300: withOpacityValue("--ax-color-success-300"),
-          400: withOpacityValue("--ax-color-success-400"),
-          500: withOpacityValue("--ax-color-success-500"),
-          600: withOpacityValue("--ax-color-success-600"),
-          700: withOpacityValue("--ax-color-success-700"),
-          800: withOpacityValue("--ax-color-success-800"),
-          900: withOpacityValue("--ax-color-success-900"),
-        },
-        danger: {
-          fore: withOpacityValue("--ax-color-danger-fore"),
-          50: withOpacityValue("--ax-color-danger-50"),
-          100: withOpacityValue("--ax-color-danger-100"),
-          200: withOpacityValue("--ax-color-danger-200"),
-          300: withOpacityValue("--ax-color-danger-300"),
-          400: withOpacityValue("--ax-color-danger-400"),
-          500: withOpacityValue("--ax-color-danger-500"),
-          600: withOpacityValue("--ax-color-danger-600"),
-          700: withOpacityValue("--ax-color-danger-700"),
-          800: withOpacityValue("--ax-color-danger-800"),
-          900: withOpacityValue("--ax-color-danger-900"),
-        },
-        warning: {
-          fore: withOpacityValue("--ax-color-warning-fore"),
-          50: withOpacityValue("--ax-color-warning-50"),
-          100: withOpacityValue("--ax-color-warning-100"),
-          200: withOpacityValue("--ax-color-warning-200"),
-          300: withOpacityValue("--ax-color-warning-300"),
-          400: withOpacityValue("--ax-color-warning-400"),
-          500: withOpacityValue("--ax-color-warning-500"),
-          600: withOpacityValue("--ax-color-warning-600"),
-          700: withOpacityValue("--ax-color-warning-700"),
-          800: withOpacityValue("--ax-color-warning-800"),
-          900: withOpacityValue("--ax-color-warning-900"),
-        },
-        info: {
-          fore: withOpacityValue("--ax-color-info-fore"),
-          50: withOpacityValue("--ax-color-info-50"),
-          100: withOpacityValue("--ax-color-info-100"),
-          200: withOpacityValue("--ax-color-info-200"),
-          300: withOpacityValue("--ax-color-info-300"),
-          400: withOpacityValue("--ax-color-info-400"),
-          500: withOpacityValue("--ax-color-info-500"),
-          600: withOpacityValue("--ax-color-info-600"),
-          700: withOpacityValue("--ax-color-info-700"),
-          800: withOpacityValue("--ax-color-info-800"),
-          900: withOpacityValue("--ax-color-info-900"),
-        },
-        light: {
-          fore: withOpacityValue("--ax-color-light-fore"),
-          50: withOpacityValue("--ax-color-light-50"),
-          100: withOpacityValue("--ax-color-light-100"),
-          200: withOpacityValue("--ax-color-light-200"),
-          300: withOpacityValue("--ax-color-light-300"),
-          400: withOpacityValue("--ax-color-light-400"),
-          500: withOpacityValue("--ax-color-light-500"),
-          600: withOpacityValue("--ax-color-light-600"),
-          700: withOpacityValue("--ax-color-light-700"),
-          800: withOpacityValue("--ax-color-light-800"),
-          900: withOpacityValue("--ax-color-light-900"),
-        },
-        dark: {
-          fore: withOpacityValue("--ax-color-dark-fore"),
-          50: withOpacityValue("--ax-color-dark-50"),
-          100: withOpacityValue("--ax-color-dark-100"),
-          200: withOpacityValue("--ax-color-dark-200"),
-          300: withOpacityValue("--ax-color-dark-300"),
-          400: withOpacityValue("--ax-color-dark-400"),
-          500: withOpacityValue("--ax-color-dark-500"),
-          600: withOpacityValue("--ax-color-dark-600"),
-          700: withOpacityValue("--ax-color-dark-700"),
-          800: withOpacityValue("--ax-color-dark-800"),
-          900: withOpacityValue("--ax-color-dark-900"),
-        },
-      },
-      width: {
-        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
-      },
-      minWidth: {
-        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
-      },
-      maxWidth: {
-        "8xl": "90rem",
-        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
-      },
-      height: {
-        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
-      },
-      minHeight: {
-        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
-      },
-      maxHeight: {
-        base: "calc((var(--ax-base-size) * var(--ax-base-ratio)))",
-      },
-      borderRadius: {
-        default: "var(--ax-border-rounded-default)",
-      },
-    },
-  },
- 
-  plugins: [
-    plugin(function ({ addUtilities }) {
-      const acorexClasses = {
-        ".animate-fast": {
-          animationDuration: "800ms",
-        },
-        ".animate-faster": {
-          animationDuration: "500ms",
-        },
-        ".bg-default": {
-          backgroundColor:
-            "rgb(var(--ax-color-default-background) / var(--tw-bg-opacity))",
-        },
-        ".text-default": {
-          backgroundColor:
-            "rgb(var(--ax-color-default-color) / var(--tw-text-opacity))",
-        },
-      };
-      addUtilities(acorexClasses, ["responsive", "hover", "focus"]);
-    }),
-    require("postcss-import"),
-    require("tailwindcss/nesting")(require("postcss-nesting")),
-    require("tailwindcss"),
-    require("autoprefixer"),
-    require("tailwind-auto-directions"),
-  ],
-});

package/index.scss

@@ -1,10 +0,0 @@
-@import "./src/variables/colors";
-@import "./src/icons/style.scss";
-
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "./src/base/index.scss";
-@import "./src/components/index.scss";
-@import "./src/utility/index.scss";

package/src/base/index.scss

@@ -1,45 +0,0 @@
-@import "../utility/mixins";
-
-[class*=" ax-ic-"],
-[class^="ax-ic-"] {
-    vertical-align: middle;
-}
-
-:root {
-    --ax-size: 8px;
-    --ax-base-size: var(--ax-size);
-    --ax-base-ratio: 6;
-    --ax-color-default-background: 255, 255, 255;
-    --ax-color-default-color: 107, 114, 128;
-    --ax-overlay-full-width: 93;
-    --ax-border-rounded-default: 6px;
-    @include colors($theme-colors);
-}
-
-html,
-body {
-    background-color: rgb(var(--ax-color-default-background));
-    color: rgba(var(--ax-color-default-color));
-    height: 100%;
-    font-size: 16px;
-}
-
-html.ax-dark,
-html.ax-dark * {
-    --tw-ring-offset-color: #151b24;
-    --ax-color-default-background: 21 27 36;
-    --ax-color-default-color: 255 255 255;
-    --ax-color-border: 55 65 81;
-    --ax-color-placeholder: 161 161 161;
-    .ax-skeleton {
-        &.ax-skeleton-animate {
-            &::before {
-                content: "";
-                background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
-            }
-        }
-    }
-    .cdk-overlay-dark-backdrop {
-        background: rgba(0, 0, 0, 0.5) !important;
-    }
-}

package/src/components/_action-sheet.scss

@@ -1,24 +0,0 @@
-@layer components {
-    .ax-action-sheet {
-        .ax-action-sheet-container {
-            @apply ax-fixed ax-bottom-0 ax-left-1/2 -ax-translate-x-1/2 ax-z-[9999] ax-w-1/3 ax-rounded-t-default ax-overflow-hidden;
-
-            @include screen(mobile) {
-                @apply ax-w-full;
-            }
-            .ax-action-sheet-caption {
-                @apply ax-text-sm ax-p-4;
-            }
-            .ax-action-sheet-items {
-                @apply ax-flex ax-flex-col ax-pb-3 ax-overflow-x-hidden ax-overflow-y-auto;
-                    .ax-button {
-                        @apply ax-rounded-none ax-w-full ax-text-start ax-justify-start;
-                    }
-            }
-        }
-    }
-
-    .ax-action-sheet-backdrop {
-        @apply ax-bg-black/75 ax-left-0 ax-right-0 ax-top-0 ax-bottom-0 ax-fixed ax-z-[9998];
-    }
-}

package/src/components/_alert.scss

@@ -1,276 +0,0 @@
-@layer components {
-  .ax-alert {
-    @apply ax-relative ax-p-4 ax-rounded-default ax-border ax-text-sm ax-flex ax-gap-4 ax-overflow-hidden;
-    transition: visibility 0s, opacity 0.5s ease-in-out;
-
-    &.ax-state-hidden {
-      visibility: hidden;
-      opacity: 0;
-    }
-
-    &.ax-state-visible {
-      visibility: visible;
-      opacity: 1;
-    }
-
-    .ax-alert-inline-middle {
-      @apply ax-flex ax-flex-col ax-justify-center ax-flex-1;
-    }
-
-    .ax-alert-inline-start,
-    .ax-alert-inline-end {
-      @apply ax-flex;
-    }
-
-    .ax-alert-inline-start {
-      @apply ax-items-center;
-      & > ax-icon {
-        @apply ax-w-9 ax-h-9 ax-rounded-full ax-grid ax-place-items-center ax-text-2xl;
-      }
-    }
-
-    .ax-alert-inline-end {
-      @apply ax-items-center;
-    }
-
-    .ax-alert-block-start {
-      @apply ax-flex ax-items-center ax-justify-center;
-
-      .ax-alert-title {
-        @apply ax-flex ax-flex-col ax-flex-1;
-      }
-    }
-
-    .ax-alert-block-end {
-      @apply ax-flex ax-flex-col ax-gap-4 ax-pt-2;
-      ax-content {
-        @apply ax-block ax-text-black/[0.87];
-      }
-
-      ax-footer {
-        @apply ax-bg-transparent;
-      }
-    }
-
-    .ax-alert-progress {
-      @apply ax-absolute ax-start-0 ax-bottom-0 ax-h-1 ax-w-0;
-      animation-duration: 4s;
-      animation-timing-function: linear;
-      animation-name: progressBar;
-
-      @keyframes progressBar {
-        0% {
-          width: 100%;
-        }
-
-        100% {
-          width: 0%;
-        }
-      }
-    }
-
-    &.ax-primary-default {
-      @apply ax-bg-primary-50 dark:ax-bg-primary-900 ax-border-primary-500;
-
-      .ax-alert-inline-start {
-        & > ax-icon {
-          @apply ax-bg-primary-500 ax-text-primary-50;
-        }
-      }
-      .ax-alert-block-start {
-        ax-title,
-        ax-sub-title {
-          @apply dark:ax-text-primary-50;
-        }
-      }
-      .ax-alert-block-end {
-        ax-content {
-          @apply dark:ax-text-primary-50;
-        }
-      }
-
-      .ax-alert-progress {
-        @apply ax-bg-primary-800 dark:ax-bg-primary-500;
-      }
-    }
-
-    &.ax-secondary-default {
-      @apply ax-bg-secondary-50 dark:ax-bg-secondary-900 ax-border-secondary-500;
-
-      .ax-alert-inline-start {
-        & > ax-icon {
-          @apply ax-bg-secondary-500 ax-text-secondary-50;
-        }
-      }
-      .ax-alert-block-start {
-        ax-title,
-        ax-sub-title {
-          @apply dark:ax-text-secondary-50;
-        }
-      }
-      .ax-alert-block-end {
-        ax-content {
-          @apply dark:ax-text-secondary-50;
-        }
-      }
-
-      .ax-alert-progress {
-        @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
-      }
-    }
-
-    &.ax-success-default {
-      @apply ax-bg-success-50 dark:ax-bg-success-900 ax-border-success-500;
-
-      .ax-alert-inline-start {
-        & > ax-icon {
-          @apply ax-bg-success-500 ax-text-success-50;
-        }
-      }
-      .ax-alert-block-start {
-        ax-title,
-        ax-sub-title {
-          @apply dark:ax-text-success-50;
-        }
-      }
-      .ax-alert-block-end {
-        ax-content {
-          @apply dark:ax-text-success-50;
-        }
-      }
-
-      .ax-alert-progress {
-        @apply ax-bg-success-800 dark:ax-bg-success-500;
-      }
-    }
-
-    &.ax-warning-default {
-      @apply ax-bg-warning-50 dark:ax-bg-warning-900 dark:ax-text-black ax-border-warning-500 #{!important};
-
-      .ax-alert-inline-start {
-        & > ax-icon {
-          @apply ax-bg-warning-500 ax-text-warning-50;
-        }
-      }
-      .ax-alert-block-start {
-        ax-title,
-        ax-sub-title {
-          @apply dark:ax-text-black;
-        }
-      }
-      .ax-alert-block-end {
-        ax-content {
-          @apply dark:ax-text-black;
-        }
-      }
-
-      .ax-alert-progress {
-        @apply ax-bg-warning-800 dark:ax-bg-warning-500;
-      }
-    }
-
-    &.ax-danger-default {
-      @apply ax-bg-danger-50 dark:ax-bg-danger-900 ax-border-danger-500;
-
-      .ax-alert-inline-start {
-        & > ax-icon {
-          @apply ax-bg-danger-500 ax-text-danger-50;
-        }
-      }
-
-      .ax-alert-block-start {
-        ax-title,
-        ax-sub-title {
-          @apply dark:ax-text-danger-50;
-        }
-      }
-      .ax-alert-block-end {
-        ax-content {
-          @apply dark:ax-text-danger-50;
-        }
-      }
-
-      .ax-alert-progress {
-        @apply ax-bg-danger-800 dark:ax-bg-danger-500;
-      }
-    }
-
-    &.ax-info-default {
-      @apply ax-bg-info-50 dark:ax-bg-info-900 ax-border-info-500;
-
-      .ax-alert-inline-start {
-        & > ax-icon {
-          @apply ax-bg-info-500 ax-text-info-50;
-        }
-      }
-
-      .ax-alert-block-start {
-        ax-title,
-        ax-sub-title {
-          @apply dark:ax-text-info-50;
-        }
-      }
-      .ax-alert-block-end {
-        ax-content {
-          @apply dark:ax-text-info-50;
-        }
-      }
-
-      .ax-alert-progress {
-        @apply ax-bg-info-800 dark:ax-bg-info-500;
-      }
-    }
-
-    &.ax-light-default {
-      @apply ax-bg-light-50 dark:ax-bg-light-900 ax-border-light-500;
-
-      .ax-alert-inline-start {
-        & > ax-icon {
-          @apply ax-bg-light-500 ax-text-light-50;
-        }
-      }
-
-      .ax-alert-block-start {
-        ax-title,
-        ax-sub-title {
-          @apply dark:ax-text-light-50;
-        }
-      }
-      .ax-alert-block-end {
-        ax-content {
-          @apply dark:ax-text-light-50;
-        }
-      }
-
-      .ax-alert-progress {
-        @apply ax-bg-light-300 dark:ax-bg-light-600;
-      }
-    }
-
-    &.ax-dark-default {
-      @apply ax-bg-dark-50 dark:ax-bg-dark-900 ax-border-dark-500;
-
-      .ax-alert-inline-start {
-        & > ax-icon {
-          @apply ax-bg-dark-500 ax-text-dark-50;
-        }
-      }
-
-      .ax-alert-block-start {
-        ax-title,
-        ax-sub-title {
-          @apply dark:ax-text-dark-50;
-        }
-      }
-      .ax-alert-block-end {
-        ax-content {
-          @apply dark:ax-text-dark-50;
-        }
-      }
-    }
-
-    .ax-alert-progress {
-      @apply ax-bg-dark-200 dark:ax-bg-dark-200;
-    }
-  }
-}

package/src/components/_avatar.scss

@@ -1,124 +0,0 @@
-@layer components {
-    .ax-avatar-group {
-        @apply ax-flex;
-        ax-avatar {
-            @apply ax-border-2 ax-border-white -ax-m-1 dark:ax-border-dark-500;
-        }
-    }
-    ax-avatar {
-        @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16 ax-overflow-hidden;
-        ax-badge {
-            @apply ax-absolute -ax-top-1.5;
-            right: -6px;
-        }
-        ax-text{
-            @apply ax-text-xl;
-        }
-        ax-icon,
-        ax-text {
-            @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center;
-        }
-        .ax-avatar-container {
-            @apply ax-w-full ax-h-full ax-rounded-default;
-            .ax-default-avatar {
-                svg {
-                    @apply ax-w-full;
-                }
-            }
-            .ax-default-avatar,
-            .ax-text-avatar,
-            .ax-icon-avatar,
-            .ax-image-avatar {
-                @apply ax-w-full ax-h-full ax-flex ax-items-center ax-justify-center ax-bg-light-200 dark:ax-bg-dark-500 ax-overflow-hidden;
-            }
-        }
-        &.ax-primary-default {
-            .ax-default {
-                @apply ax-fill-primary-500;
-            }
-            ax-text {
-                @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-            }
-            ax-icon {
-                @apply ax-bg-primary-500;
-            }
-        }
-        &.ax-secondary-default {
-            .ax-default {
-                @apply ax-fill-secondary-500;
-            }
-            ax-text {
-                @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
-            }
-            ax-icon {
-                @apply ax-bg-secondary-500;
-            }
-        }
-        &.ax-success-default {
-            .ax-default {
-                @apply ax-fill-success-500;
-            }
-            ax-text {
-                @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
-            }
-            ax-icon {
-                @apply ax-bg-success-500;
-            }
-        }
-        &.ax-warning-default {
-            .ax-default {
-                @apply ax-fill-warning-500;
-            }
-            ax-text {
-                @apply ax-bg-warning-100 ax-text-warning-500 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
-            }
-            ax-icon {
-                @apply ax-bg-warning-500;
-            }
-        }
-        &.ax-danger-default {
-            .ax-default {
-                @apply ax-fill-danger-500;
-            }
-            ax-text {
-                @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
-            }
-            ax-icon {
-                @apply ax-bg-danger-500;
-            }
-        }
-        &.ax-info-default {
-            .ax-default {
-                @apply ax-fill-info-500;
-            }
-            ax-text {
-                @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
-            }
-            ax-icon {
-                @apply ax-bg-info-500;
-            }
-        }
-        &.ax-light-default {
-            .ax-default {
-                @apply ax-fill-light-400;
-            }
-            ax-text {
-                @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-500 dark:ax-text-light-fore;
-            }
-            ax-icon {
-                @apply ax-bg-light-500;
-            }
-        }
-        &.ax-dark-default {
-            .ax-default {
-                @apply ax-fill-dark-500;
-            }
-            ax-text {
-                @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-500 dark:ax-text-dark-fore;
-            }
-            ax-icon {
-                @apply ax-bg-dark-500;
-            }
-        }
-    }
-}