@acorex/styles 21.0.3-next.32 → 21.0.3-next.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.3-next.32",
+  "version": "21.0.3-next.35",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",
@@ -11,4 +11,4 @@
     "postcss": "^8.5.6",
     "tw-animate": "^1.0.3"
   }
-}
+}

package/themes/default.css

@@ -3225,28 +3225,89 @@ html.ax-dark {
 }
 
 @utility ax-fill {
+  @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
   &.ax-default {
     @apply light-surface dark:dark-surface;
   }
+  &.ax-state-selected {
+    @apply bg-(--ax-comp-bg-lighter,var(--color-light)) text-(--ax-comp-text-lighter,var(--color-on-light)) dark:bg-(--ax-comp-bg-lighter,var(--color-dark)) dark:text-(--ax-comp-text-lighter,var(--color-on-dark));
+  }
   &.ax-editor-container {
     @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
   }
 }
 
+@utility ax-fill-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
+  }
+  @apply ax-fill transition-colors outline-none;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible,
+    &.ax-state-focus {
+      background-color: var(--ax-comp-bg-lighter, var(--color-light));
+      color: var(--ax-comp-text-lighter, var(--color-on-light));
+      @variant dark {
+        background-color: var(--ax-comp-bg-lighter, var(--color-dark));
+        color: var(--ax-comp-text-lighter, var(--color-on-dark));
+      }
+    }
+    &:focus-visible,
+    &.ax-state-focus {
+      @apply ring-primary/30 ring-3;
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    background-color: var(--ax-comp-bg-light, var(--color-surface));
+    color: var(--ax-comp-text-light, var(--color-on-surface));
+  }
+}
+
 @utility ax-flat {
-  @apply rounded-none;
+  @apply rounded-none border-b border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
   &.ax-default {
-    @apply border-border-lightest dark:border-border-darkest border-b bg-transparent;
+    @apply border-border-lightest dark:border-border-darkest border-b bg-transparent text-(--color-on-surface);
+  }
+  &.ax-state-selected {
+    @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
   }
   &.ax-editor-container {
     @apply focus-within:border-primary!;
   }
 }
 
+@utility ax-flat-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
+  }
+  @apply ax-flat transition-colors outline-none;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible,
+    &.ax-state-focus {
+      border-color: var(--ax-comp-bg-dark, var(--color-border-lighter));
+      color: var(--ax-comp-bg-dark, var(--color-on-lighter));
+    }
+    &:focus-visible,
+    &.ax-state-focus {
+      @apply ring-primary/30 ring-3;
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    border-color: var(--ax-comp-bg-darker, var(--color-border-light));
+    color: var(--ax-comp-bg-darker, var(--color-on-light));
+  }
+}
+
 @utility ax-solid {
   @apply bg-(--ax-comp-bg,var(--color-lightest)) text-(--ax-comp-text,var(--color-on-lightest)) dark:bg-(--ax-comp-bg,var(--color-darkest)) dark:text-(--ax-comp-text,var(--color-on-darkest));
   &.ax-default {
-    @apply lightest-surface dark:darkest-surface border;
+    @apply border-border-surface border;
   }
   &.ax-state-selected {
     @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
@@ -3260,17 +3321,34 @@ html.ax-dark {
   @supports (color: color-mix(in lab, red, red)) {
     --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
   }
-  @apply ax-solid transition-colors;
+  @apply ax-solid transition-colors outline-none;
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
     &:hover,
     &:focus,
     &:focus-within,
-    &:focus-visible {
-      @apply bg-(--ax-comp-bg-dark,var(--color-lighter)) text-(--ax-comp-text-dark,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-dark,var(--color-darker)) dark:text-(--ax-comp-text-dark,var(--color-on-darker));
+    &:focus-visible,
+    &.ax-state-focus {
+      background-color: var(--ax-comp-bg-dark, var(--color-lighter));
+      color: var(--ax-comp-text-dark, var(--color-on-lighter));
+      @variant dark {
+        background-color: var(--ax-comp-bg-dark, var(--color-darker));
+        color: var(--ax-comp-text-dark, var(--color-on-darker));
+      }
+    }
+    &:focus-visible,
+    &.ax-state-focus {
+      @apply ring-primary/30 ring-3;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
-    @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) ring-1 ring-(--ax-comp-bg-dark) ring-offset-1 dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
+    background-color: var(--ax-comp-bg-darker, var(--color-light));
+    color: var(--ax-comp-text-darker, var(--color-on-light));
+    @apply ring-1 ring-offset-1;
+    --tw-ring-color: var(--ax-comp-bg-dark, var(--color-primary-dark));
+    @variant dark {
+      background-color: var(--ax-comp-bg-darker, var(--color-dark));
+      color: var(--ax-comp-text-darker, var(--color-on-dark));
+    }
   }
 }
 
@@ -3291,17 +3369,24 @@ html.ax-dark {
   @supports (color: color-mix(in lab, red, red)) {
     --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
   }
-  @apply ax-outline transition-colors;
+  @apply ax-outline transition-colors outline-none;
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
     &:hover,
     &:focus,
     &:focus-within,
-    &:focus-visible {
-      @apply border-(--ax-comp-bg-dark,var(--color-border-lighter)) text-(--ax-comp-bg-dark,var(--color-on-lighter));
+    &:focus-visible,
+    &.ax-state-focus {
+      border-color: var(--ax-comp-bg-dark, var(--color-border-lighter));
+      color: var(--ax-comp-bg-dark, var(--color-on-lighter));
+    }
+    &:focus-visible,
+    &.ax-state-focus {
+      @apply ring-primary/30 ring-3;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
-    @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
+    border-color: var(--ax-comp-bg-darker, var(--color-border-light));
+    color: var(--ax-comp-bg-darker, var(--color-on-light));
   }
 }
 
@@ -3316,17 +3401,28 @@ html.ax-dark {
   @supports (color: color-mix(in lab, red, red)) {
     --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
   }
-  @apply ax-twotone transition-colors;
+  @apply ax-twotone transition-colors outline-none;
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
     &:hover,
     &:focus,
     &:focus-within,
-    &:focus-visible {
-      @apply bg-(--ax-comp-bg-lighter,var(--color-light)) text-(--ax-comp-text-lighter,var(--color-on-light)) dark:bg-(--ax-comp-bg-lighter,var(--color-dark)) dark:text-(--ax-comp-text-lighter,var(--color-on-dark));
+    &:focus-visible,
+    &.ax-state-focus {
+      background-color: var(--ax-comp-bg-lighter, var(--color-light));
+      color: var(--ax-comp-text-lighter, var(--color-on-light));
+      @variant dark {
+        background-color: var(--ax-comp-bg-lighter, var(--color-dark));
+        color: var(--ax-comp-text-lighter, var(--color-on-dark));
+      }
+    }
+    &:focus-visible,
+    &.ax-state-focus {
+      @apply ring-primary/30 ring-3;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
-    @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
+    background-color: var(--ax-comp-bg-light, var(--color-surface));
+    color: var(--ax-comp-text-light, var(--color-on-surface));
   }
 }
 
@@ -3341,44 +3437,72 @@ html.ax-dark {
   @supports (color: color-mix(in lab, red, red)) {
     --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
   }
-  @apply ax-blank transition-colors;
+  @apply ax-blank transition-colors outline-none;
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
     &:hover,
     &:focus,
     &:focus-within,
-    &:focus-visible {
-      @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
+    &:focus-visible,
+    &.ax-state-focus {
+      background-color: var(--ax-comp-bg-lightest, var(--color-lighter));
+      color: var(--ax-comp-text-lightest, var(--color-on-lighter));
+      @variant dark {
+        background-color: var(--ax-comp-bg-lightest, var(--color-darker));
+        color: var(--ax-comp-text-lightest, var(--color-on-darker));
+      }
+    }
+    &:focus-visible,
+    &.ax-state-focus {
+      @apply ring-primary/30 ring-3;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
-    @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
+    background-color: var(--ax-comp-bg-lighter, var(--color-surface));
+    color: var(--ax-comp-text-lighter, var(--color-on-surface));
   }
 }
 
-@utility links {
+@utility ax-link {
   @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
   &.ax-state-selected {
     @apply text-(--ax-comp-bg-darker,var(--color-on-surface));
   }
 }
 
-@utility links-interactive {
+@utility ax-link-interactive {
   @supports (color: color-mix(in lab, red, red)) {
     --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
   }
-  @apply links transition-colors;
+  @apply ax-link transition-colors outline-none;
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
     &:hover,
     &:focus,
     &:focus-within,
-    &:focus-visible {
-      @apply text-(--ax-comp-bg-dark,var(--color-on-surface));
+    &:focus-visible,
+    &.ax-state-focus {
+      color: var(--ax-comp-bg-dark, var(--color-on-surface));
+    }
+    &:focus-visible,
+    &.ax-state-focus {
+      @apply ring-primary/30 ring-3;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
-    @apply text-(--ax-comp-bg-darker,var(--color-on-surface));
+    color: var(--ax-comp-bg-darker, var(--color-on-surface));
   }
 }
+
+/* Backwards-compatible aliases */
+@utility links {
+  @apply ax-link;
+}
+@utility links-interactive {
+  @apply ax-link-interactive;
+}
+@utility ax-links {
+  @apply ax-link;
+}
+
 @utility h1 {
   font-size: 2.5rem;
   font-weight: 500;