@acorex/styles 5.6.0 → 5.9.0

package/src/components/_badge.scss

@@ -15,31 +15,151 @@
                 @apply ax-m-0;
             }
         }
+        &.ax-badge-icon{
+            width: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
+            height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 15px);
+        }
+        &.ax-primary-default {
+            @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-primary-800;
+        }
+        &.ax-primary-twotone {
+            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-800 dark:ax-text-primary-100;
+        }
+        &.ax-primary-outline {
+            @apply ax-text-primary-500 ax-border ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
+        }
+        &.ax-primary-blank {
+            @apply ax-text-primary-500 ax-border-transparent dark:ax-text-primary-300;
+        }
+        &.ax-primary-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
+        }
+
+        // secondary
+        &.ax-secondary-default {
+            @apply ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent dark:ax-bg-secondary-800;
+        }
+        &.ax-secondary-twotone {
+            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
+        }
+        &.ax-secondary-outline {
+            @apply ax-text-secondary-500 ax-border ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
+        }
+        &.ax-secondary-blank {
+            @apply ax-text-secondary-500 ax-border-transparent dark:ax-text-secondary-300;
+        }
+        &.ax-secondary-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
+        }
+        // success
+        &.ax-success-default {
+            @apply ax-bg-success-500 ax-text-success-fore ax-border-transparent dark:ax-bg-success-800;
+        }
+        &.ax-success-twotone {
+            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-800 dark:ax-text-success-100;
+        }
+        &.ax-success-outline {
+            @apply ax-text-success-500 ax-border ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
+        }
+        &.ax-success-blank {
+            @apply ax-text-success-500 ax-border-transparent dark:ax-text-success-300;
+        }
+        &.ax-success-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-success-500 ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
+        }
+        // warning
+        &.ax-warning-default {
+            @apply ax-bg-warning-500 ax-text-warning-fore ax-border-transparent dark:ax-bg-warning-800;
+        }
+        &.ax-warning-twotone {
+            @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-800 dark:ax-text-warning-fore;
+        }
+        &.ax-warning-outline {
+            @apply ax-text-warning-500 ax-border ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
+        }
+        &.ax-warning-blank {
+            @apply ax-text-warning-500 ax-border-transparent dark:ax-text-warning-300;
+        }
+        &.ax-warning-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
+        }
+        // danger
+        &.ax-danger-default {
+            @apply ax-bg-danger-500 ax-text-danger-fore ax-border-transparent dark:ax-bg-danger-800;
+        }
+        &.ax-danger-twotone {
+            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-800 dark:ax-text-danger-100;
+        }
+        &.ax-danger-outline {
+            @apply ax-text-danger-500 ax-border ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
+        }
+        &.ax-danger-blank {
+            @apply ax-text-danger-500 ax-border-transparent dark:ax-text-danger-300;
+        }
+        &.ax-danger-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
+        }
+
+        // info
+        &.ax-info-default {
+            @apply ax-bg-info-500 ax-text-info-fore ax-border-transparent dark:ax-bg-info-800;
+        }
+        &.ax-info-twotone {
+            @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-800 dark:ax-text-info-100;
+        }
+        &.ax-info-outline {
+            @apply ax-text-info-500 ax-border ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
+        }
+        &.ax-info-blank {
+            @apply ax-text-info-500 ax-border-transparent dark:ax-text-info-300;
+        }
+        &.ax-info-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-info-500 ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
+        }
+
+        // dark
+        &.ax-dark-default {
+            @apply ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-600;
+
+        }
+        &.ax-dark-twotone {
+            @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
+
+        }
+        &.ax-dark-outline {
+            @apply ax-text-dark-500 ax-border-dark-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
+
+        }
+        &.ax-dark-blank {
+            @apply ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
+
+        }
+        &.ax-dark-link {
+            @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
+
+        }
+
+        // light
+        &.ax-light-default {
+            @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-light-800 dark:ax-border-light-800 dark:ax-text-light-100;
+
+        }
+        &.ax-light-twotone {
+            @apply ax-bg-light-200 ax-text-light-fore dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
+
+        }
+        &.ax-light-outline {
+            @apply ax-text-light-fore ax-border ax-border-light-300 dark:ax-border-light-500 dark:ax-text-light-100;
+
+        }
+        &.ax-light-link {
+            @apply ax-text-light-fore ax-border-b ax-rounded-none ax-border-light-300 dark:ax-text-light-100 dark:ax-border-light-500;
+
+        }
+        &.ax-light-blank {
+            @apply ax-text-light-fore dark:ax-border-light-600 dark:ax-text-light-100;
+        }
 
-        @include color-look-generator();
-        // &.ax-primary-default {
-        //     @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
-        // }
-        // &.ax-secondary-default {
-        //     @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-fore;
-        // }
-        // &.ax-success-default {
-        //     @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-fore;
-        // }
-        // &.ax-warning-default {
-        //     @apply ax-bg-warning-50 ax-text-warning-700 dark:ax-bg-warning-500 dark:ax-text-warning-fore;
-        // }
-        // &.ax-danger-default {
-        //     @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-fore;
-        // }
-        // &.ax-info-default {
-        //     @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-fore;
-        // }
-        // &.ax-light-default {
-        //     @apply ax-bg-light-200 ax-text-light-700;
-        // }
-        // &.ax-dark-default {
-        //     @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-500 dark:ax-text-dark-50;
-        // }
+        
     }
-}
+}

package/src/components/_breadcrumbs.scss

@@ -1,24 +1,28 @@
 @layer components {
     ax-breadcrumbs,
     .ax-breadcrumbs {
-        @apply ax-flex ax-items-center;
+        @apply ax-inline-flex ax-items-center ax-space-x-1 md:ax-space-x-3;
         ax-breadcrumbs-item,
         .ax-breadcrumbs-item {
+            @apply ax-inline-flex ax-items-center ax-text-sm ax-font-medium ax-text-light-500  dark:ax-text-light-400  ax-cursor-pointer ax-select-none;
+            .ax-breadcrumbs-item-text {
+                @apply ax-pe-2 hover:ax-text-light-900 dark:hover:ax-text-white;
+            }
             ax-prefix {
                 @apply ax-pe-2;
             }
             ax-suffix {
                 @apply ax-ps-2;
             }
-            @apply ax-relative ax-flex ax-items-center ax-ps-3 ax-pe-3.5 ax-text-sm ax-cursor-pointer first:ax-ps-0;
-
-            &:not(:last-child) {
-                &::after {
-                    @apply ax-absolute ax-text-light-300 dark:ax-opacity-30;
-                    inset-inline-end:0px;
-                    content: "/";
+            .ax-breadcrumb-divider {
+                @apply  dark:ax-text-white/30;
+            }
+            &:last-child{
+                .ax-breadcrumb-divider{
+                    @apply ax-hidden
                 }
             }
         }
+       
     }
 }