@s3pweb/shell-ui 0.1.0 → 0.1.2

package/dist/themes/s3pweb.css

@@ -14,7 +14,7 @@
  * Per-module icon chip colours: set `slug` on NavGroup (shell-ui) or
  * `basePath` on SidebarNavGroup (shared-layouts). Recognised values:
  * 'ecodriving' | 'maintenance' | 'incidents' | 'pre-shift' | 'social' |
- * 'mileages-fuel'. Other slugs fall back to a neutral grey chip.
+ * 'mileages-fuel' | 'settings'. Other slugs fall back to a neutral grey chip.
  */
 
 [data-shell-theme='s3pweb'] {
@@ -125,60 +125,131 @@
 }
 
 /* ============================================================================
-   Per-module palettes — currently EMPTY.
+   Per-module palettes — coloured icon chip per slug.
 
-   Every module inherits the neutral chip styling above (`--shell-chip-bg` /
-   `--shell-chip-fg`) so the sidebar reads as one calm grey palette. Re-introduce
-   per-slug rules below when a brighter, module-specific palette is wanted.
-
-   Adding a palette for a slug requires THREE selectors (they share the same
-   declarations, so list them in one rule). Sample for slug='foo':
-
-     [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='foo'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
-     [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='foo']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon],
-     [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='foo'] {
-       background: var(--color-emerald-100);
-       color:      var(--color-emerald-700);
-     }
-     .dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='foo'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
-     .dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='foo']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon],
-     .dark [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='foo'] {
-       background: color-mix(in oklab, var(--color-emerald-700) 28%, transparent);
-       color:      var(--color-emerald-300);
-     }
-
-   Selector roles:
-     - 1st  = sidebar group icon chip (slug lives on the wrapping `nav-group`).
-     - 2nd  = sidebar flat (top-level) leaf chip; the `:not(…)` excludes
-              sub-items rendered inside an expanded group so only the top-level
-              item gets painted.
-     - 3rd  = horizontal top-bar button.
+   Each slug needs two selectors for the sidebar (grouped: slug on the wrapping
+   `nav-group`; flat leaf: slug on the `nav-item`, `:not(…)` excludes sub-items)
+   plus one for the top-bar button. `nav-slug` defaults to the nav `id` with the
+   leading `/` stripped (e.g. basePath '/social' -> slug 'social').
+   ============================================================================ */
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='ecodriving'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='ecodriving']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: #d6efe2;
+  color: #10876a;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='maintenance'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='maintenance']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: #f5e2b7;
+  color: #8a5806;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='incidents'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='incidents']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: #f7cdd0;
+  color: #b5364b;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='pre-shift'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='social'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='pre-shift']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon],
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='social']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: #ddd1f3;
+  color: #6a47bd;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='mileages-fuel'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='mileages-fuel']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: #c5dbf0;
+  color: #2e6fb5;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='settings'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+[data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='settings']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: #dde3ec;
+  color: #4b5d76;
+}
 
-   Slug source:
-     `nav-slug` defaults to `id` when omitted on a NavItem / NavGroup. Set it
-     explicitly only when `id` isn't a CSS-friendly string (e.g. it's a route
-     path like `/incidents` or a UUID).
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='ecodriving'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='ecodriving']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: rgba(16, 135, 106, 0.22);
+  color: #6ed3ad;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='maintenance'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='maintenance']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: rgba(247, 190, 40, 0.22);
+  color: #f7be28;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='incidents'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='incidents']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: rgba(181, 54, 75, 0.28);
+  color: #f7a5af;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='pre-shift'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='social'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='pre-shift']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='social']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: rgba(106, 71, 189, 0.32);
+  color: #bfa9f0;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='mileages-fuel'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='mileages-fuel']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: rgba(46, 111, 181, 0.32);
+  color: #9bc1e6;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-slug='settings'] [data-shell-ui-nav-group-button] [data-shell-ui-nav-icon],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-nav-item][data-shell-ui-nav-slug='settings']:not([data-shell-ui-nav-children] *) [data-shell-ui-nav-icon] {
+  background: rgba(75, 93, 118, 0.32);
+  color: #a9b8cc;
+}
 
-   Shade-tier guidance (pick ONE per slug, then reuse the pair for dark mode):
-     - SATURATED families (red, orange, amber, yellow, lime, green, emerald,
-       teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose):
-         light: bg=*-100  fg=*-700
-         dark:  bg=color-mix(in oklab, *-700 28%, transparent)  fg=*-300
-     - DESATURATED families (slate, gray, zinc, neutral, stone, olive):
-         light: bg=*-200  fg=*-500
-         dark:  bg=color-mix(in oklab, *-500 30%, transparent)  fg=*-300
-       (the *-700 of these families reads almost black; *-500 keeps contrast
-       with the *-200 bg without darkening the icon to mud.)
-     - One-step DARKER variant (e.g. when two slugs share a hue family and
-       you want them distinct, like social=violet vs pre-shift=purple-darker):
-         light: bg=*-300  fg=*-800
-         dark:  bg=color-mix(in oklab, *-800 36%, transparent)  fg=*-300
+/* Top-bar — per-module coloured chip (baseline neutral styling is above). */
+[data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='ecodriving'] {
+  background: #d6efe2;
+  color: #10876a;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='maintenance'] {
+  background: #f5e2b7;
+  color: #8a5806;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='incidents'] {
+  background: #f7cdd0;
+  color: #b5364b;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='pre-shift'],
+[data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='social'] {
+  background: #ddd1f3;
+  color: #6a47bd;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='mileages-fuel'] {
+  background: #c5dbf0;
+  color: #2e6fb5;
+}
+[data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='settings'] {
+  background: #dde3ec;
+  color: #4b5d76;
+}
 
-   Tailwind 4.2.1 ships every family above as `--color-{family}-{shade}` so
-   `var(--color-emerald-700)` etc. resolves without any extra setup. Skip the
-   shell-ui preset's @theme block when picking — these are global Tailwind
-   tokens, not s3pweb-specific.
-   ============================================================================ */
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='ecodriving'] {
+  background: rgba(16, 135, 106, 0.22);
+  color: #6ed3ad;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='maintenance'] {
+  background: rgba(247, 190, 40, 0.22);
+  color: #f7be28;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='incidents'] {
+  background: rgba(181, 54, 75, 0.28);
+  color: #f7a5af;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='pre-shift'],
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='social'] {
+  background: rgba(106, 71, 189, 0.32);
+  color: #bfa9f0;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='mileages-fuel'] {
+  background: rgba(46, 111, 181, 0.32);
+  color: #9bc1e6;
+}
+.dark [data-shell-theme='s3pweb'] [data-shell-ui-top-bar-button][data-shell-ui-nav-slug='settings'] {
+  background: rgba(75, 93, 118, 0.32);
+  color: #a9b8cc;
+}
 
 /* ============================================================================
    Sub-item hover — light yellow tint. Mirrors the original SaaS shell rule

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@s3pweb/shell-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Stateless sidebar / top-nav components for the s3pweb white-label shell. Consumer owns router, i18n, and active state.",
   "license": "ISC",
   "type": "module",
@@ -27,7 +27,7 @@
   "dependencies": {
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "lucide-react": "0.487.0",
+    "lucide-react": "1.17.0",
     "radix-ui": "1.4.3",
     "tailwind-merge": "3.5.0",
     "tw-animate-css": "1.4.0"
@@ -37,18 +37,21 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@babel/core": "7.29.7",
+    "@rolldown/plugin-babel": "0.2.3",
     "@storybook/react-vite": "10.4.1",
-    "@tailwindcss/vite": "4.2.1",
+    "@tailwindcss/vite": "4.3.0",
+    "@types/babel__core": "7.20.5",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.4",
+    "@vitejs/plugin-react": "6.0.2",
     "babel-plugin-react-compiler": "1.0.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "storybook": "10.4.1",
     "tailwindcss": "4.2.1",
     "typescript": "5.9.3",
-    "vite": "7.3.3",
+    "vite": "8.0.16",
     "vite-plugin-dts": "5.0.1"
   },
   "publishConfig": {