@acorex/styles 5.7.0 → 6.0.0

package/index.js

@@ -0,0 +1,191 @@
+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))",
+        },
+        ".rtl": {
+          direction: "rtl",
+        },
+        ".ltr": {
+          direction: "ltr",
+        },
+      };
+      addUtilities(acorexClasses, ["responsive", "hover", "focus"]);
+    }),
+    require("postcss-import"),
+    require("tailwindcss/nesting")(require("postcss-nesting")),
+    require("tailwindcss"),
+    require("autoprefixer"),
+    require("tailwind-rtl-utilities"),
+  ],
+});

package/index.scss

@@ -8,4 +8,3 @@
 @import "./src/base/index.scss";
 @import "./src/components/index.scss";
 @import "./src/utility/index.scss";
-

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acorex/styles",
-    "version": "5.7.0",
+    "version": "6.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {

package/src/base/index.scss

@@ -6,11 +6,13 @@
 }
 
 :root {
-    --ax-base-size: 8px;
+    --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);
 }
 

package/src/components/_action-sheet.scss

@@ -1,8 +1,7 @@
 @layer components {
-    ax-action-sheet,
     .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-2xl  ax-overflow-hidden;
+            @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;
@@ -12,7 +11,7 @@
             }
             .ax-action-sheet-items {
                 @apply ax-flex ax-flex-col ax-pb-3 ax-overflow-x-hidden ax-overflow-y-auto;
-                    ax-button {
+                    .ax-button {
                         @apply ax-rounded-none ax-w-full ax-text-start ax-justify-start;
                     }
             }

package/src/components/_alert.scss

@@ -1,5 +1,5 @@
 @layer components {
-    ax-alert {
+    .ax-alert {
         @apply ax-relative ax-w-full ax-flex ax-flex-col ax-bg-light-100 ax-text-light-fore ax-rounded ax-overflow-hidden ax-text-sm;
         transition: visibility 0s, opacity 0.5s ease-in-out;
 
@@ -13,23 +13,24 @@
             opacity: 1;
         }
 
-        ax-header {
+        .ax-header {
             @apply ax-flex ax-px-3.5 ax-items-center ax-py-3 ax-bg-transparent ax-border-none ax-justify-start;
-
-            ax-icon {
+            .ax-icon {
                 @apply ax-text-2xl;
             }
         }
 
         .ax-alert-body {
             @apply ax-flex-1 ax-p-3.5;
-
-            ax-icon {
+            .ax-icon {
                 @apply ax-me-3 ax-text-2xl;
             }
-
-            ax-content {
-                @apply ax-flex ax-items-center ax-break-words;
+            .ax-button {
+                --ax-base-size: 6px;
+                @apply ax-ring-offset-0 #{!important};
+            }
+            .ax-content {
+                @apply ax-flex ax-items-center ax-break-words ax-whitespace-pre-wrap;
 
                 ul {
                     @apply ax-my-2 ax-ms-5 ax-list-disc;
@@ -44,22 +45,19 @@
                 }
             }
 
-            ax-suffix {
-                --ax-base-size: 6px;
+            .ax-suffix {
                 @apply ax-block;
 
-                ax-button {
-                    @apply ax-ring-offset-0 ax-ms-2 #{!important};
+                .ax-button {
+                    @apply ax-ms-2 #{!important};
                 }
             }
 
-            ax-footer {
+            .ax-footer {
                 @apply ax-bg-transparent ax-p-0 ax-mt-3;
 
-                ax-suffix {
-                    ax-button {
-                        --ax-base-size: 6px;
-
+                .ax-suffix {
+                    .ax-button {
                         @apply ax-ms-0 ax-me-2 #{!important};
                     }
 
@@ -68,45 +66,327 @@
             }
         }
 
-        &.ax-light-default {
-            ax-header {
-                @apply ax-bg-light-200;
-            }
+        .ax-alert-progress {
+            @apply ax-absolute ax-start-0 ax-bottom-0 ax-h-1.5 ax-w-0;
+            animation-duration: 4s;
+            animation-timing-function: linear;
+            animation-name: progressBar;
+            @keyframes progressBar {
+                0% {
+                    width: 100%;
+                }
 
-            .ax-alert-body {
-                @apply ax-bg-light-200;
+                100% {
+                    width: 0%;
+                }
             }
+        }
+
+        // @include button-on-colorful-bg();
 
+        // @include color-look-generator();
+
+        // primary
+        &.ax-primary-default {
+            @apply ax-bg-primary-500 ax-text-primary-fore dark:ax-bg-primary-800 dark:ax-text-primary-100;
+            .ax-header {
+                @apply ax-bg-primary-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-primary-800 dark:ax-bg-primary-500;
+            }
+        }
+        &.ax-primary-twotone {
+            @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-800 dark:ax-text-primary-100;
+            .ax-header {
+                @apply ax-bg-primary-200 dark:ax-bg-primary-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-primary-300 dark:ax-bg-primary-500;
+            }
+        }
+        &.ax-primary-outline {
+            @apply ax-bg-transparent ax-text-primary-500 ax-border ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
+            .ax-header {
+                @apply ax-bg-primary-100 dark:ax-bg-transparent;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-primary-500 ax-h-1 dark:ax-bg-primary-400;
+            }
+        }
+        &.ax-primary-blank {
+            @apply ax-bg-transparent ax-text-primary-500 dark:ax-text-primary-300 ax-rounded-none;
+            .ax-header {
+                @apply ax-border-b ax-border-solid ax-border-primary-200 dark:ax-border-primary-800;
+            }
             .ax-alert-progress {
-                @apply ax-absolute ax-bg-light-400;
+                @apply ax-bg-primary-200 dark:ax-bg-primary-800;
             }
         }
 
-        &[class*="dark"] {
+        // secondary
+        &.ax-secondary-default {
+            @apply ax-bg-secondary-500 ax-text-secondary-fore dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
+            .ax-header {
+                @apply ax-bg-secondary-600;
+            }
             .ax-alert-progress {
-                @apply ax-bg-white/50 #{!important};
+                @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
+            }
+        }
+        &.ax-secondary-twotone {
+            @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
+            .ax-header {
+                @apply ax-bg-secondary-200 dark:ax-bg-secondary-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-secondary-300 dark:ax-bg-secondary-500;
+            }
+        }
+        &.ax-secondary-outline {
+            @apply ax-bg-transparent ax-text-secondary-500 ax-border ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
+            .ax-header {
+                @apply ax-bg-secondary-100 dark:ax-bg-transparent;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-secondary-500 ax-h-1 dark:ax-bg-secondary-400;
+            }
+        }
+        &.ax-secondary-blank {
+            @apply ax-bg-transparent ax-text-secondary-500 dark:ax-text-secondary-300 ax-rounded-none;
+            .ax-header {
+                @apply ax-border-b ax-border-solid ax-border-secondary-200 dark:ax-border-secondary-800;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-secondary-200 dark:ax-bg-secondary-800;
             }
         }
 
-        .ax-alert-progress {
-            @apply ax-absolute ax-start-0 ax-bottom-0 ax-h-1.5 ax-w-0;
-            animation-duration: 4s;
-            animation-timing-function: linear;
-            animation-name: progressBar;
+        // success
+        &.ax-success-default {
+            @apply ax-bg-success-500 ax-text-success-fore dark:ax-bg-success-800 dark:ax-text-success-100;
+            .ax-header {
+                @apply ax-bg-success-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-success-800 dark:ax-bg-success-500;
+            }
+        }
+        &.ax-success-twotone {
+            @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-800 dark:ax-text-success-100;
+            .ax-header {
+                @apply ax-bg-success-200 dark:ax-bg-success-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-success-300 dark:ax-bg-success-500;
+            }
+        }
+        &.ax-success-outline {
+            @apply ax-bg-transparent ax-text-success-500 ax-border ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
+            .ax-header {
+                @apply ax-bg-success-100 dark:ax-bg-transparent;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-success-500 ax-h-1 dark:ax-bg-success-400;
+            }
+        }
+        &.ax-success-blank {
+            @apply ax-bg-transparent ax-text-success-500 dark:ax-text-success-300 ax-rounded-none;
+            .ax-header {
+                @apply ax-border-b ax-border-solid ax-border-success-200 dark:ax-border-success-800;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-success-200 dark:ax-bg-success-800;
+            }
         }
 
-        @keyframes progressBar {
-            0% {
-                width: 100%;
+        // warning
+        &.ax-warning-default {
+            @apply ax-bg-warning-800 ax-text-warning-fore dark:ax-bg-warning-800;
+            .ax-header {
+                @apply ax-bg-warning-600;
             }
+            .ax-alert-progress {
+                @apply ax-bg-warning-800 dark:ax-bg-warning-500;
+            }
+        }
+        &.ax-warning-twotone {
+            @apply ax-bg-warning-100 ax-text-warning-900 dark:ax-bg-warning-800 dark:ax-text-warning-fore;
+            .ax-header {
+                @apply ax-bg-warning-200 dark:ax-bg-warning-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-warning-300 dark:ax-bg-warning-500;
+            }
+        }
+        &.ax-warning-outline {
+            @apply ax-bg-transparent ax-text-warning-900 ax-border ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
+            .ax-header {
+                @apply ax-bg-warning-100 dark:ax-bg-transparent;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-warning-500 ax-h-1 dark:ax-bg-warning-400;
+            }
+        }
+        &.ax-warning-blank {
+            @apply ax-bg-transparent ax-text-warning-500 dark:ax-text-warning-300 ax-rounded-none;
+            .ax-header {
+                @apply ax-border-b ax-border-solid ax-border-warning-200 dark:ax-border-warning-800;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-warning-200 dark:ax-bg-warning-800;
+            }
+        }
 
-            100% {
-                width: 0%;
+        // danger
+        &.ax-danger-default {
+            @apply ax-bg-danger-500 ax-text-danger-fore dark:ax-bg-danger-800 dark:ax-text-danger-100;
+            .ax-header {
+                @apply ax-bg-danger-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-danger-800 dark:ax-bg-danger-500;
+            }
+        }
+        &.ax-danger-twotone {
+            @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-800 dark:ax-text-danger-100;
+            .ax-header {
+                @apply ax-bg-danger-200 dark:ax-bg-danger-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-danger-300 dark:ax-bg-danger-500;
+            }
+        }
+        &.ax-danger-outline {
+            @apply ax-bg-transparent ax-text-danger-500 ax-border ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
+            .ax-header {
+                @apply ax-bg-danger-100 dark:ax-bg-transparent;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-danger-500 ax-h-1 dark:ax-bg-danger-400;
+            }
+        }
+        &.ax-danger-blank {
+            @apply ax-bg-transparent ax-text-danger-500 dark:ax-text-danger-300 ax-rounded-none;
+            .ax-header {
+                @apply ax-border-b ax-border-solid ax-border-danger-200 dark:ax-border-danger-800;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-danger-200 dark:ax-bg-danger-800;
             }
         }
 
-        // @include button-on-colorful-bg();
+        // info
+        &.ax-info-default {
+            @apply ax-bg-info-500 ax-text-info-fore dark:ax-bg-info-800 dark:ax-text-info-100;
+            .ax-header {
+                @apply ax-bg-info-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-info-800 dark:ax-bg-info-500;
+            }
+        }
+        &.ax-info-twotone {
+            @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-800 dark:ax-text-info-100;
+            .ax-header {
+                @apply ax-bg-info-200 dark:ax-bg-info-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-info-300 dark:ax-bg-info-500;
+            }
+        }
+        &.ax-info-outline {
+            @apply ax-bg-transparent ax-text-info-500 ax-border ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
+            .ax-header {
+                @apply ax-bg-info-100 dark:ax-bg-transparent;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-info-500 ax-h-1 dark:ax-bg-info-400;
+            }
+        }
+        &.ax-info-blank {
+            @apply ax-bg-transparent ax-text-info-500 dark:ax-text-info-300 ax-rounded-none;
+            .ax-header {
+                @apply ax-border-b ax-border-solid ax-border-info-200 dark:ax-border-info-800;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-info-200 dark:ax-bg-info-800;
+            }
+        }
 
-        @include color-look-generator();
+        // light
+        &.ax-light-default {
+            @apply ax-bg-light-100 dark:ax-bg-light-800 ax-text-light-fore dark:ax-text-light-100 ax-border ax-border-light-200 dark:ax-border-light-900;
+            .ax-header {
+                @apply ax-bg-light-200 dark:ax-bg-light-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-light-300 dark:ax-bg-light-600;
+            }
+        }
+        &.ax-light-twotone {
+            @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-800 dark:ax-text-light-100;
+            .ax-header {
+                @apply ax-bg-light-200 dark:ax-bg-light-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-light-300 dark:ax-bg-light-600;
+            }
+        }
+        &.ax-light-outline {
+            @apply ax-bg-transparent ax-text-light-500 ax-border ax-border-light-200 dark:ax-border-light-400 dark:ax-text-light-300;
+            .ax-header {
+                @apply ax-bg-light-100;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-light-300;
+            }
+        }
+        &.ax-light-blank {
+            @apply ax-bg-transparent ax-text-light-500 dark:ax-text-light-300;
+            .ax-header {
+                @apply ax-border-b ax-border-solid ax-border-light-200 dark:ax-border-light-500;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-light-200 dark:ax-bg-light-500;
+            }
+        }
+        // dark
+        &.ax-dark-default {
+            @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-800 dark:ax-text-dark-100;
+            .ax-header {
+                @apply ax-bg-dark-600;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-dark-600;
+            }
+        }
+        &.ax-dark-twotone {
+            @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-800 dark:ax-text-dark-100;
+            .ax-header {
+                @apply ax-bg-dark-200;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-dark-100;
+            }
+        }
+        &.ax-dark-outline {
+            @apply ax-bg-transparent ax-text-dark-500 ax-border ax-border-dark-100 dark:ax-border-dark-400 dark:ax-text-dark-300;
+            .ax-header {
+                @apply ax-bg-dark-50;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-dark-100;
+            }
+        }
+        &.ax-dark-blank {
+            @apply ax-bg-transparent ax-text-dark-500 dark:ax-text-dark-100;
+            .ax-header {
+                @apply ax-border-b ax-border-solid ax-border-dark-200 dark:ax-border-dark-200;
+            }
+            .ax-alert-progress {
+                @apply ax-bg-dark-200 dark:ax-bg-dark-200;
+            }
+        }
     }
 }

package/src/components/_avatar.scss

@@ -1,12 +1,10 @@
 @layer components {
-    ax-avatar-group,
     .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,
     .ax-avatar {
         @apply ax-relative ax-flex ax-items-center ax-justify-center ax-w-16 ax-h-16;
         ax-badge {
@@ -14,7 +12,7 @@
             right: -6px;
         }
         .ax-avatar-container {
-            @apply ax-w-full ax-h-full ax-rounded-md;
+            @apply ax-w-full ax-h-full ax-rounded-default;
             .ax-default-avatar {
                 svg {
                     @apply ax-w-full;