@adia-ai/web-modules 0.0.4

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

@@ -0,0 +1,119 @@
+/* ═══════════════════════════════════════════════════════════════
+   App Shell — Design tokens
+
+   Declared on :where(admin-shell) for zero specificity.
+   All children (main + sidebars) inherit these.
+
+   Token groups:
+     --page-*          — shell, borders, backgrounds
+     --page-header-*   — topbar/footer bars
+     --page-sidebar-*  — sidebar geometry
+     --page-content-*  — scroll area, sticky header, typography
+     --page-section-*  — form section headings
+   ═══════════════════════════════════════════════════════════════ */
+
+:where(admin-shell) {
+  /* Shell — root backgrounds and border shorthand */
+  --page-bg:                var(--a-canvas-1);       /* chrome/sidebar bg */
+  --page-border:            1px solid var(--a-border-subtle); /* 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 */
+  --page-header-height:     var(--a-chrome-app-header-height);
+  --page-header-px:         var(--a-space-3);
+  --page-header-gap:        var(--a-space-3);
+  --page-header-font:       var(--a-ui-size);
+  --page-header-fg-muted:   var(--a-fg-muted);         /* footer text, section labels */
+
+  /* Sidebar — geometry and constraints */
+  --page-sidebar-px:        var(--a-space-1);        /* inner padding for header/footer/section */
+  --page-sidebar-gap:       var(--a-space-1);        /* gap between sidebar header/footer items */
+  --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-divider-bg: var(--a-border-subtle); /* 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);
+
+  /* Content area — scroll region inside main */
+  --page-content-bg:        var(--a-canvas-0);       /* content surface (lighter than chrome) */
+  --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-shadow:    var(--a-shadow-sm);      /* soft lift on the content surface */
+
+  /* Section labels (e.g. "WORKSPACE") — maps to "kicker" typography role */
+  --page-section-gap:             var(--a-space-6);
+  /* Within-section block rhythm (h2 / [data-note] / code-ui / artifact stack). */
+  --page-block-gap:               var(--a-space-4);
+  /* h2 → immediately-following deck/subtitle pair (auto-stamped <header>). */
+  --page-deck-gap:                var(--a-space-1);
+  --page-section-size:            var(--a-kicker-size);
+  --page-section-weight:          var(--a-kicker-weight);
+  --page-section-leading:         var(--a-kicker-leading);
+  --page-section-tracking:        var(--a-kicker-tracking);
+  --page-section-case:            var(--a-kicker-case);
+  --page-section-color:           var(--a-kicker-color);
+  --page-section-mb:              var(--a-space-3);
+  --page-section-pb:              var(--a-space-2);
+
+  /* Sub-section labels (e.g. "Details") — maps to "subsection" typography role */
+  --page-subsection-size:         var(--a-subsection-size);
+  --page-subsection-weight:       var(--a-subsection-weight);
+  --page-subsection-color:        var(--a-subsection-color);
+
+  /* Sidebar collapsed — icon/avatar sizes when sidebar is narrow */
+  --page-sidebar-collapsed-icon:   1.0625rem;   /* select leading icon */
+  --page-sidebar-collapsed-avatar: 1.5rem;      /* select leading avatar */
+
+  /* Helpers — layout utility spacing */
+  --page-actions-gap:       var(--a-space-2);    /* inline action group gap */
+  --page-grid-gap:          var(--a-space-3);    /* grid/col/row default gap */
+
+  /* Animation */
+  --page-duration:            var(--a-duration);
+  --page-duration-fast:       var(--a-duration-fast);
+  --page-easing:              var(--a-easing);
+
+  /* Shell typography */
+  --page-font-family:         var(--a-font-family);
+  --page-body-size:           var(--a-body-size);
+
+  /* Nav — root container tokens */
+  --nav-duration:             var(--a-duration);
+  --nav-duration-fast:        var(--a-duration-fast);
+  --nav-easing:               var(--a-easing);
+  --nav-label-px:             var(--a-space-2);
+  --nav-label-py:             var(--a-space-1);
+  --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-my:           var(--a-space-1);
+
+  /* Nav — group tokens */
+  --nav-group-indent-rail-bg: var(--a-border-subtle);
+  --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);
+  --nav-group-badge-px:       var(--a-space-1);
+  --nav-group-badge-radius:   var(--a-radius-full);
+
+  /* Nav — item tokens */
+  --nav-item-icon-font-size:  var(--a-ui-size);
+  --nav-item-selected-weight: var(--a-weight-medium);
+  --nav-item-badge-fg:        var(--a-fg-muted);
+  --nav-item-badge-bg:        var(--a-bg-muted);
+  --nav-item-badge-px:        var(--a-space-1);
+  --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-radius: var(--a-radius-sm);
+  --nav-item-trailing-px:     var(--a-space-0-5);
+
+  /* Global icon size bump */
+  --a-icon-size: 18px;
+}

package/shell/index.js

@@ -0,0 +1 @@
+export { AdminShell } from './admin-shell/admin-shell.js';