@adia-ai/web-modules 0.7.28 → 0.8.0

package/shell/admin-shell/css/admin-shell.tokens.css

@@ -14,8 +14,8 @@
 
 :where(admin-shell) {
   /* Shell — root backgrounds and border shorthand */
-  --page-bg:                var(--a-canvas-dim);       /* shell chrome bg */
-  --page-border:            1px solid var(--a-border-subtle); /* chrome borders (killed by "borderless") */
+  --page-bg:                var(--md-sys-color-neutral-surface-dim);       /* shell chrome bg */
+  --page-border:            1px solid var(--md-sys-color-neutral-outline-variant); /* chrome borders (killed by "borderless") */
   --page-main-border:       var(--page-border);      /* main inline borders (separate so modes can override) */
 
   /* Header / footer bars — shared by topbar + bottombar */
@@ -31,9 +31,9 @@
   --page-sidebar-font:      var(--a-ui-size);
   --page-sidebar-min-width: 48px;                    /* collapsed icon-only width */
   --page-sidebar-max-width: 480px;                   /* drag resize upper bound */
-  --page-sidebar-resize-accent: var(--a-accent); /* resize handle color */
-  --page-sidebar-bg:        var(--a-canvas-dimmest); /* sidebar surface — distinct from the chrome (--page-bg) */
-  --page-sidebar-divider-bg: var(--a-border-subtle); /* hr divider inside sidebar */
+  --page-sidebar-resize-accent: var(--md-sys-color-primary); /* resize handle color */
+  --page-sidebar-bg:        var(--md-sys-color-neutral-surface-dimmest); /* sidebar surface — distinct from the chrome (--page-bg) */
+  --page-sidebar-divider-bg: var(--md-sys-color-neutral-outline-variant); /* hr divider inside sidebar */
   --page-sidebar-width-leading:  clamp(var(--page-sidebar-min-width), 200px, 240px);
   --page-sidebar-width-trailing: clamp(var(--page-sidebar-min-width), 200px, 240px);
 
@@ -43,7 +43,7 @@
   --page-content-radius:    var(--a-radius-lg);      /* used by "rounded" mode */
   --page-content-inset:     var(--a-space-10);       /* padding for header/body/footer */
   --page-content-max-width: 1540px;                   /* max-width for content children */
-  --page-content-border:    1px solid var(--a-border-subtle); /* content dividers (persists in "borderless") */
+  --page-content-border:    1px solid var(--md-sys-color-neutral-outline-variant); /* content dividers (persists in "borderless") */
   --page-content-shadow:    var(--a-shadow-sm);      /* soft lift on the content surface */
 
   /* Content breakpoint scale — `<admin-page>` is a `page-content`
@@ -110,11 +110,11 @@
   --nav-label-font-size:      var(--a-kicker-sm);
   --nav-label-weight:         var(--a-weight-medium);
   --nav-label-fg:             var(--a-fg-muted);
-  --nav-divider-bg:           var(--a-border-subtle);
+  --nav-divider-bg:           var(--md-sys-color-neutral-outline-variant);
   --nav-divider-my:           var(--a-space-1);
 
   /* Nav — group tokens */
-  --nav-group-indent-rail-bg: var(--a-border-subtle);
+  --nav-group-indent-rail-bg: var(--md-sys-color-neutral-outline-variant);
   --nav-group-icon-font-size: var(--a-ui-size);
   --nav-group-text-weight:    var(--a-weight-medium);
   --nav-group-badge-bg:       var(--a-bg-muted);
@@ -130,7 +130,7 @@
   --nav-item-badge-radius:    var(--a-radius-full);
   --nav-item-trailing-font:   var(--a-ui-sm);
   --nav-item-trailing-fg:     var(--a-fg-muted);
-  --nav-item-trailing-border: var(--a-border-subtle);
+  --nav-item-trailing-border: var(--md-sys-color-neutral-outline-variant);
   --nav-item-trailing-radius: var(--a-radius-sm);
   --nav-item-trailing-px:     var(--a-space-0-5);
 

package/shell/embed-shell/embed-shell.css

@@ -11,9 +11,9 @@ embed-shell {
   position: relative; /* containing block for <760px cover-sheet panels */
   box-sizing: border-box;
   overflow: hidden; /* clip columns + cover-sheets to the rounded frame */
-  background: var(--a-bg);
-  color: var(--a-fg);
-  border: 1px solid var(--a-border-subtle);
+  background: var(--md-sys-color-neutral-background);
+  color: var(--md-sys-color-neutral-on-surface);
+  border: 1px solid var(--md-sys-color-neutral-outline-variant);
   border-radius: var(--a-radius-lg, var(--a-radius-md));
   box-shadow: var(--a-shadow-lg);
   font-family: var(--a-font-family);
@@ -57,7 +57,7 @@ embed-shell > [panel] {
     flex: none;
     inline-size: 50%;
     block-size: 100%;
-    border-inline-start: 1px solid var(--a-border-subtle);
+    border-inline-start: 1px solid var(--md-sys-color-neutral-outline-variant);
   }
 }
 
@@ -68,7 +68,7 @@ embed-shell > [panel] {
     position: absolute;
     inset: 0;
     z-index: 5;
-    background: var(--a-bg);
+    background: var(--md-sys-color-neutral-background);
     transform: translateY(100%); /* parked below; identity at rest → popovers OK */
     transition: transform 260ms var(--a-easing-out, ease);
   }