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

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,9 +7,7 @@
     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;
@@ -19,28 +17,51 @@
 }
 
 .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 +79,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;

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.2",
   "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.contract.mjs

@@ -0,0 +1,81 @@
+/**
+ * Contract checks for the optional Depth appearance layer.
+ * Run: node packages/styles/themes/appearance.contract.mjs
+ */
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, '../../..');
+
+const defaultCss = readFileSync(join(__dirname, 'default.css'), 'utf8');
+const appearanceCss = readFileSync(join(__dirname, 'appearance.css'), 'utf8');
+
+let failed = 0;
+
+function assert(condition, message) {
+  if (!condition) {
+    failed += 1;
+    console.error(`FAIL: ${message}`);
+  } else {
+    console.log(`PASS: ${message}`);
+  }
+}
+
+assert(defaultCss.includes('--ax-sys-elevation-control-rest:'), 'Flat elevation tokens exist');
+assert(defaultCss.includes('--ax-sys-effect-control-rest:'), 'Combined effect tokens exist');
+assert(!defaultCss.includes('--ax-sys-press-offset'), 'Press offset token removed from Flat defaults');
+assert(defaultCss.includes('@utility ax-effect-control'), 'ax-effect-control utility exists');
+assert(defaultCss.includes('@utility ax-effect-input'), 'ax-effect-input utility exists');
+assert(defaultCss.includes('@utility ax-focus-ring'), 'Focus ring utility preserved');
+assert(/@utility ax-effect-control-active \{[\s\S]*?transform: none/.test(defaultCss), 'Active utility keeps transform none');
+assert(
+  /@utility ax-effect-transition \{[\s\S]*?transition-property: box-shadow, background-image, border-color/.test(
+    defaultCss,
+  ),
+  'Button effect transition excludes transform',
+);
+assert(/@utility ax-solid \{[\s\S]*?ax-effect-control/.test(defaultCss), 'Solid uses control effect');
+assert(/@utility ax-outline \{[\s\S]*?ax-effect-control-subtle/.test(defaultCss), 'Outline uses subtle effect');
+assert(/@utility ax-link \{[\s\S]*?ax-effect-control/.test(defaultCss) === false, 'Link has no control elevation');
+assert(defaultCss.includes('box-shadow: var(--ax-sys-effect-input)'), 'Editors use inset effect');
+assert(!defaultCss.includes('translateY(var(--ax-sys-press-offset))'), 'No press-offset translateY remains');
+
+assert(appearanceCss.includes('.ax-appearance-depth'), 'Depth activator class exists');
+assert(appearanceCss.includes('0 1px 1px rgb(15 23 42 / 0.08)'), 'Solid rest uses tight contact shadow');
+assert(appearanceCss.includes('0 1px 2px rgb(15 23 42 / 0.1)'), 'Solid hover stays close to control');
+assert(appearanceCss.includes('0 1px 1px rgb(15 23 42 / 0.05)'), 'Subtle rest is weaker than Solid');
+assert(appearanceCss.includes('--ax-sys-elevation-control-subtle-rest:'), 'Subtle control elevation exists');
+assert(appearanceCss.includes('--ax-sys-gradient-control-subtle: none'), 'Outline/Twotone keep no gradient');
+assert(appearanceCss.includes('rgb(255 255 255 / 0.06)'), 'Solid gradient is nearly imperceptible');
+assert(!appearanceCss.includes('--ax-sys-press-offset'), 'Press offset token removed from Depth');
+assert(!appearanceCss.includes('translateY'), 'Depth sheet has no translateY');
+assert(
+  appearanceCss.includes('--ax-sys-effect-control-active: var(--ax-sys-inset-pressed)'),
+  'Active uses inset pressed',
+);
+assert(appearanceCss.includes('.ax-dark.ax-appearance-depth'), 'Dark depth selector exists');
+assert(appearanceCss.includes('.ax-dark.ax-appearance-depth .ax-light'), 'Nested light depth reset exists');
+assert(!/(^|[^a-z-])\.dark(\s|,|\{)/.test(appearanceCss), 'No non-ax .dark selector');
+assert(appearanceCss.includes('@media (forced-colors: active)'), 'Forced colors support');
+
+const entries = [
+  join(root, 'apps/showcase/src/styles.css'),
+  join(root, 'apps/documentation/src/styles.css'),
+  join(root, 'packages/components/.storybook/styles.css'),
+];
+
+for (const entry of entries) {
+  const css = readFileSync(entry, 'utf8');
+  const defaultIndex = css.indexOf('themes/default.css');
+  const appearanceIndex = css.indexOf('themes/appearance.css');
+  assert(defaultIndex >= 0 && appearanceIndex > defaultIndex, `Import order OK: ${entry}`);
+}
+
+if (failed > 0) {
+  console.error(`\n${failed} assertion(s) failed`);
+  process.exit(1);
+}
+
+console.log('\nAll appearance contract checks passed.');