@acorex/styles 22.1.0-next.0 → 22.1.0-next.10

package/components/_action-item.css

@@ -50,10 +50,6 @@
     width: 100%;
     cursor: pointer;
     padding-inline: var(--ax-comp-action-item-padding-inline, 0.875rem);
-    &.ax-state-disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
     &:hover:not(.ax-state-disabled, .ax-state-selected) {
       background-color: rgba(var(--ax-sys-color-surface));
       ax-prefix,

package/components/_actionsheet.css

@@ -1,4 +1,11 @@
 .ax-action-sheet-panel {
+  --ax-comp-action-sheet-shadow-rest: var(--ax-sys-effect-modal);
+  --ax-comp-action-sheet-inner-border-rest: var(--ax-sys-inner-border-surface);
+  --ax-comp-action-sheet-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);
+  --ax-comp-action-sheet-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);
+  --ax-comp-action-sheet-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);
+  --ax-comp-action-sheet-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);
+
   @apply fixed! top-auto! right-auto! bottom-0! left-1/2! block! h-auto! w-auto! max-w-none!;
   transform: translateX(-50%) !important;
   align-items: unset !important;
@@ -8,10 +15,20 @@
   border-top-left-radius: var(--ax-comp-action-sheet-border-radius-size);
   border-top-right-radius: var(--ax-comp-action-sheet-border-radius-size);
   background-color: rgba(var(--ax-sys-color-surface-lowest));
-  --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
+  background-image:
+    linear-gradient(
+      var(--ax-comp-action-sheet-contrast-surface-overlay-rest),
+      var(--ax-comp-action-sheet-contrast-surface-overlay-rest)
+    ),
+    linear-gradient(
+      var(--ax-comp-action-sheet-surface-overlay-rest),
+      var(--ax-comp-action-sheet-surface-overlay-rest)
+    );
   box-shadow:
-    var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
+    var(--ax-comp-action-sheet-contrast-inner-border-rest), var(--ax-comp-action-sheet-inner-border-rest),
+    var(--ax-comp-action-sheet-shadow-rest);
+  backdrop-filter: var(--ax-comp-action-sheet-backdrop-filter-rest);
+  -webkit-backdrop-filter: var(--ax-comp-action-sheet-backdrop-filter-rest);
   animation: 1s both ax-fadeInUp;
   animation-duration: var(--ax-sys-transition-duration);
 }

package/components/_drop-down.css

@@ -7,40 +7,57 @@
     overflow-x: auto;
     overflow-y: hidden;
     font-size: 0.875rem;
-    /* 14px */
     line-height: 1.25rem;
-    /* 20px */
     text-transform: capitalize;
-    &.ax-state-disabled {
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
   }
 }
 
 .ax-overlay-pane {
+  --ax-comp-dropdown-shadow-rest: var(--ax-sys-effect-overlay);
+  --ax-comp-dropdown-inner-border-rest: var(--ax-sys-inner-border-surface);
+  --ax-comp-dropdown-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);
+  --ax-comp-dropdown-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);
+  --ax-comp-dropdown-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);
+  --ax-comp-dropdown-surface-overlay-rest: var(--ax-sys-surface-overlay-overlay);
+
   margin: 0.25rem 0;
-  /* min-width: 10rem; */
   width: 100%;
   height: fit-content;
   overflow: hidden;
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-lightest-surface));
+  /* Resolve text against local theme tokens (overlays are portaled). */
+  color: rgba(var(--ax-sys-color-on-surface));
+  /*
+   * Use opaque rgba(channels) only.
+   * Do NOT use rgb(channels / alpha) or rgba(channels, alpha):
+   * LightningCSS rewrites those to slash-syntax which is invalid with
+   * comma-separated RGB tokens (255, 255, 255) and yields a transparent panel.
+   */
   background-color: rgba(var(--ax-sys-color-lightest-surface));
-  --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
+  background-image:
+    linear-gradient(
+      var(--ax-comp-dropdown-contrast-surface-overlay-rest),
+      var(--ax-comp-dropdown-contrast-surface-overlay-rest)
+    ),
+    linear-gradient(
+      var(--ax-comp-dropdown-surface-overlay-rest),
+      var(--ax-comp-dropdown-surface-overlay-rest)
+    );
   box-shadow:
-    var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
+    var(--ax-comp-dropdown-contrast-inner-border-rest), var(--ax-comp-dropdown-inner-border-rest),
+    var(--ax-comp-dropdown-shadow-rest);
+  backdrop-filter: var(--ax-comp-dropdown-backdrop-filter-rest);
+  -webkit-backdrop-filter: var(--ax-comp-dropdown-backdrop-filter-rest);
   border-top-left-radius: var(--ax-comp-drop-down-border-top-left-radius, var(--ax-sys-border-radius));
   border-top-right-radius: var(--ax-comp-drop-down-border-top-right-radius, var(--ax-sys-border-radius));
   border-bottom-left-radius: var(--ax-comp-drop-down-border-bottom-left-radius, var(--ax-sys-border-radius));
   border-bottom-right-radius: var(--ax-comp-drop-down-border-bottom-right-radius, var(--ax-sys-border-radius));
-  /* Replace the @include mixin with a normal media query */
+
   ax-header,
   ax-footer {
     background-color: rgba(var(--ax-sys-color-lightest-surface));
     padding: 0.75rem;
-    /* 12px */
   }
 
   &.ax-overlay-center {
@@ -58,9 +75,13 @@
   }
 }
 
-.dark {
+.ax-dark .ax-overlay-pane {
+  background-color: rgba(var(--ax-sys-color-darker-surface));
+  border-color: rgba(var(--ax-sys-color-border-darker-surface));
+}
+
+@supports not (backdrop-filter: blur(1px)) {
   .ax-overlay-pane {
-    background-color: rgba(var(--ax-sys-color-darker-surface));
-    border-color: rgba(var(--ax-sys-color-border-darker-surface));
+    --ax-comp-dropdown-backdrop-filter-rest: none;
   }
 }

package/components/_editor-container.css

@@ -2,7 +2,56 @@
 
 @layer base {
   .ax-editor-container {
+    --ax-comp-editor-shadow-rest: var(--ax-sys-effect-field-rest);
+    --ax-comp-editor-shadow-hover: var(--ax-sys-effect-field-hover);
+    --ax-comp-editor-shadow-focus: var(--ax-sys-effect-field-focus);
+    --ax-comp-editor-shadow-readonly: var(--ax-sys-effect-field-readonly);
+    --ax-comp-editor-shadow-disabled: var(--ax-sys-effect-field-disabled);
+    --ax-comp-editor-surface-overlay-rest: var(--ax-sys-surface-overlay-field-rest);
+    --ax-comp-editor-surface-overlay-hover: var(--ax-sys-surface-overlay-field-hover);
+    --ax-comp-editor-surface-overlay-focus: var(--ax-sys-surface-overlay-field-focus);
+    --ax-comp-editor-surface-overlay-readonly: var(--ax-sys-surface-overlay-field-readonly);
+    --ax-comp-editor-surface-overlay-disabled: var(--ax-sys-surface-overlay-field-disabled);
+    --ax-comp-editor-highlight-rest: var(--ax-sys-highlight-control-subtle);
+    --ax-comp-editor-inner-border-rest: var(--ax-sys-inner-border-control);
+    --ax-comp-editor-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-field);
+    --ax-comp-editor-contrast-inner-border-hover: var(--ax-sys-contrast-inner-border-field);
+    --ax-comp-editor-contrast-inner-border-focus: var(--ax-sys-contrast-inner-border-field);
+    --ax-comp-editor-contrast-inner-border-invalid: var(--ax-sys-contrast-inner-border-invalid);
+    --ax-comp-editor-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-field);
+    --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-rest);
+    --ax-comp-editor-transition-duration: var(--ax-sys-motion-duration);
+    --ax-comp-editor-transition-timing: var(--ax-sys-motion-timing);
+
     @apply rounded-default h-default min-h-default relative flex items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
+    /*
+     * Field inset/elevation only on the host. Contrast border is painted on ::after
+     * so native controls (textarea) cannot cover it.
+     */
+    box-shadow: var(--ax-comp-editor-shadow-rest);
+    background-image:
+      linear-gradient(
+        var(--ax-comp-editor-contrast-surface-overlay-rest),
+        var(--ax-comp-editor-contrast-surface-overlay-rest)
+      ),
+      linear-gradient(
+        var(--ax-comp-editor-surface-overlay-rest),
+        var(--ax-comp-editor-surface-overlay-rest)
+      );
+    transform: none;
+    transition-property: box-shadow, border-color, background-color, color;
+    transition-duration: var(--ax-comp-editor-transition-duration);
+    transition-timing-function: var(--ax-comp-editor-transition-timing);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: 1;
+      box-shadow: var(--ax-comp-editor-contrast-ring);
+    }
 
     .ax-content {
       @apply text-sm;
@@ -27,13 +76,16 @@
     }
 
     &.ax-state-error {
-      @apply border-danger-600!;
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-invalid);
+      border-color: var(--ax-sys-contrast-border-invalid);
+
       &:focus-within {
-        @apply outline-danger-light outline-2 outline-offset-0;
+        --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-invalid);
+        outline: var(--ax-sys-contrast-focus-ring-invalid);
+        outline-offset: 0;
       }
     }
 
-    /* Keep end padding for spin/clear controls, but not when a suffix button is attached */
     &:has(.ax-general-button-control, .ax-general-button-icon):not(:has(ax-suffix > ax-button)) {
       @apply pe-2;
     }
@@ -81,7 +133,6 @@
   }
 }
 
-/* Components layer so these beat button size utilities and spin-button pe-2 */
 @layer components {
   .ax-editor-container {
     &:has(ax-prefix > ax-button),
@@ -109,5 +160,99 @@
         @apply aspect-square size-auto! h-full w-auto!;
       }
     }
+
+    /* Field appearance — recessed inset for all looks; never outer elevation */
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank) {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-rest);
+      box-shadow: var(--ax-comp-editor-shadow-rest);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-rest),
+          var(--ax-comp-editor-surface-overlay-rest)
+        );
+      transform: none;
+    }
+
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank):hover:not(
+        .ax-state-disabled,
+        .ax-state-readonly,
+        .ax-state-error
+      ) {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-hover);
+      box-shadow: var(--ax-comp-editor-shadow-hover);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-hover),
+          var(--ax-comp-editor-surface-overlay-hover)
+        );
+    }
+
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank).ax-state-readonly {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-rest);
+      box-shadow: var(--ax-comp-editor-shadow-readonly);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-readonly),
+          var(--ax-comp-editor-surface-overlay-readonly)
+        );
+    }
+
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank).ax-state-disabled {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-rest);
+      box-shadow: var(--ax-comp-editor-shadow-disabled);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-disabled),
+          var(--ax-comp-editor-surface-overlay-disabled)
+        );
+      opacity: var(--ax-sys-contrast-disabled-opacity, 1);
+    }
+
+    &:is(.ax-solid, .ax-outline, .ax-twotone, .ax-fill, .ax-flat, .ax-blank):focus-within:not(
+        .ax-state-disabled,
+        .ax-state-readonly,
+        .ax-state-error
+      ) {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-focus);
+      box-shadow: var(--ax-comp-editor-shadow-focus);
+      background-image:
+        linear-gradient(
+          var(--ax-comp-editor-contrast-surface-overlay-rest),
+          var(--ax-comp-editor-contrast-surface-overlay-rest)
+        ),
+        linear-gradient(
+          var(--ax-comp-editor-surface-overlay-focus),
+          var(--ax-comp-editor-surface-overlay-focus)
+        );
+    }
+
+    &.ax-state-error {
+      --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-invalid);
+      border-color: var(--ax-sys-contrast-border-invalid);
+      box-shadow: var(--ax-comp-editor-shadow-rest);
+
+      &:focus-within {
+        --ax-comp-editor-contrast-ring: var(--ax-comp-editor-contrast-inner-border-invalid);
+        box-shadow: var(--ax-comp-editor-shadow-focus);
+        outline: var(--ax-sys-contrast-focus-ring-invalid);
+        outline-offset: 0;
+      }
+    }
   }
 }

package/components/_floating-surface.css

@@ -0,0 +1,24 @@
+/*
+ * Floating overlays opt out of Appearance + Contrast decorative boundaries.
+ * Theme (ax-light / ax-dark) and size still inherit from overlay visual context.
+ *
+ * Loaded after contrast/appearance theme sheets so these resets win on-pane.
+ */
+:is(.ax-popup, ax-toast, .ax-overlay-pane, .ax-dialog) {
+  --ax-sys-contrast-inner-border-surface: 0 0 #0000;
+  --ax-sys-contrast-surface-overlay-surface: transparent;
+
+  --ax-sys-inner-border-surface: 0 0 #0000;
+  --ax-sys-highlight-surface: 0 0 #0000;
+  --ax-sys-gradient-surface: none;
+  --ax-sys-backdrop-filter-surface: none;
+  --ax-sys-surface-overlay-surface: transparent;
+  --ax-sys-surface-overlay-floating: transparent;
+  --ax-sys-surface-overlay-overlay: transparent;
+  --ax-sys-surface-overlay-modal: transparent;
+
+  /* Flat elevation — ignore depth/translucent shadow stacks on floating shells */
+  --ax-sys-effect-floating: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ax-sys-effect-overlay: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ax-sys-effect-modal: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}

package/components/_list.css

@@ -1,4 +1,4 @@
-.dark {
+.ax-dark {
   .ax-list-item {
     &.ax-state-selected {
       background-color: rgba(var(--ax-sys-color-primary-800)) !important;
@@ -99,6 +99,7 @@
           padding-inline-start: 0.75rem;
           font-size: 1rem;
           line-height: 1.5rem;
+          color: rgba(var(--ax-sys-color-on-surface));
           &:focus,
           &:focus-visible {
             outline-width: 2px;
@@ -113,10 +114,6 @@
             background-color: rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;
             color: rgba(var(--ax-sys-color-on-primary), var(--tw-text-opacity)) !important;
           }
-          &.ax-state-disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-          }
           &:focus-visible,
           &:hover {
             background-color: rgba(var(--ax-sys-color-surface));

package/components/index.css

@@ -3,6 +3,7 @@
 @import './_check-box.css';
 @import './_drop-down.css';
 @import './_editor-container.css';
+@import './_floating-surface.css';
 @import './_general-button.css';
 @import './_list.css';
 @import './_radio.css';

package/package.json

@@ -1,9 +1,80 @@
 {
   "name": "@acorex/styles",
-  "version": "22.1.0-next.0",
+  "version": "22.1.0-next.10",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",
+  "exports": {
+    ".": {
+      "style": "./index.css",
+      "default": "./index.css"
+    },
+    "./index.css": {
+      "style": "./index.css",
+      "default": "./index.css"
+    },
+    "./package.json": "./package.json",
+    "./themes/default.css": {
+      "style": "./themes/default.css",
+      "default": "./themes/default.css"
+    },
+    "./themes/appearance.css": {
+      "style": "./themes/appearance.css",
+      "default": "./themes/appearance.css"
+    },
+    "./themes/appearances": {
+      "style": "./themes/appearances/index.css",
+      "default": "./themes/appearances/index.css"
+    },
+    "./themes/appearances/index.css": {
+      "style": "./themes/appearances/index.css",
+      "default": "./themes/appearances/index.css"
+    },
+    "./themes/appearances/flat.css": {
+      "style": "./themes/appearances/flat.css",
+      "default": "./themes/appearances/flat.css"
+    },
+    "./themes/appearances/depth.css": {
+      "style": "./themes/appearances/depth.css",
+      "default": "./themes/appearances/depth.css"
+    },
+    "./themes/appearances/translucent.css": {
+      "style": "./themes/appearances/translucent.css",
+      "default": "./themes/appearances/translucent.css"
+    },
+    "./themes/contrast": {
+      "style": "./themes/contrast/index.css",
+      "default": "./themes/contrast/index.css"
+    },
+    "./themes/contrast/index.css": {
+      "style": "./themes/contrast/index.css",
+      "default": "./themes/contrast/index.css"
+    },
+    "./themes/contrast/enhanced.css": {
+      "style": "./themes/contrast/enhanced.css",
+      "default": "./themes/contrast/enhanced.css"
+    },
+    "./themes/contrast/high.css": {
+      "style": "./themes/contrast/high.css",
+      "default": "./themes/contrast/high.css"
+    },
+    "./icons/fontawesome/index.css": {
+      "style": "./icons/fontawesome/index.css",
+      "default": "./icons/fontawesome/index.css"
+    },
+    "./icons/material/index.css": {
+      "style": "./icons/material/index.css",
+      "default": "./icons/material/index.css"
+    },
+    "./icons/lucide/index.css": {
+      "style": "./icons/lucide/index.css",
+      "default": "./icons/lucide/index.css"
+    },
+    "./components/index.css": {
+      "style": "./components/index.css",
+      "default": "./components/index.css"
+    }
+  },
   "peerDependencies": {
     "@angular/cdk": ">=21.0.0",
     "tailwindcss": ">=4.0.0",

package/themes/appearance.css

@@ -0,0 +1,15 @@
+/*
+ * ACoreX Appearance — backward-compatible aggregate entry point.
+ *
+ * Activation classes:
+ *   .ax-appearance-flat        — explicit flat (optional; flat is default)
+ *   .ax-appearance-depth       — dimensional depth
+ *   .ax-appearance-translucent — floating/modal surfaces only (subtree)
+ *
+ * Apply on <html> or any subtree. Independent from theme, look, size, and APIs.
+ * Component styles consume semantic tokens via component-level variables.
+ *
+ * Selective import: @import "@acorex/styles/themes/appearances/depth.css";
+ */
+
+@import './appearances/index.css';