@aleph-alpha/ui-library 1.13.0 → 1.14.0

package/README.md

@@ -1,6 +1,6 @@
 # UI Library
 
-📘 **[View Storybook](https://urban-broccoli-l1okew7.pages.github.io/ui-library)**
+📘 **[View Storybook](https://dev.aleph-alpha.de/ui-library)**
 
 ## Installation
 

package/config.js

@@ -204,6 +204,11 @@ const resolveTokenValue = (tokenSetName, path) => {
   return typeof resolved === 'string' ? resolved : null;
 };
 
+const resolveAnyTokenValue = (path) => {
+  const resolved = resolveReferences(`{${path}}`, new Set([`any:${path}`]));
+  return typeof resolved === 'string' ? resolved : null;
+};
+
 // Collect all color token paths from a mode set
 const collectColorTokenPaths = (obj, prefix = '') => {
   const paths = [];
@@ -278,8 +283,16 @@ const buildShadcnVarsFromModeSet = (modeSetName) => {
   const input = resolve('border.input.default') ?? border;
   const ring = resolve('border.surface.focus-ring') ?? resolve('background.accent.default');
 
+  // Surface tokens
+  const modal = resolve('background.surface.modal') ?? background;
+  const floating =
+    resolve('background.surface.floating') ??
+    resolveAnyTokenValue('aa.colors.sand.0') ??
+    resolve('background.surface.secondary') ??
+    background;
+
   // Popover/Card surfaces
-  const popover = resolve('background.surface.secondary') ?? background;
+  const popover = floating;
   const card = resolve('background.surface.primary') ?? background;
 
   // Input background
@@ -301,9 +314,20 @@ const buildShadcnVarsFromModeSet = (modeSetName) => {
   // Secondary content color (for calendar unselected dates)
   const secondaryContent = resolve('content.on-surface.secondary') ?? foreground;
 
+  // Sidebar tokens (overrides unocss-preset-shadcn defaults with design-system colors)
+  const sidebar = resolve('background.surface.primary') ?? background;
+  const sidebarForeground = foreground;
+  const sidebarPrimary = primary;
+  const sidebarPrimaryForeground = primaryForeground;
+  const sidebarAccent = muted;
+  const sidebarAccentForeground = foreground;
+  const sidebarBorder = border;
+  const sidebarRing = ring;
+
   return {
     background,
     foreground,
+    modal,
     card,
     'card-foreground': foreground,
     popover,
@@ -331,6 +355,15 @@ const buildShadcnVarsFromModeSet = (modeSetName) => {
     inverse,
     'inverse-foreground': inverseForeground,
     'secondary-content': secondaryContent,
+    sidebar,
+    'sidebar-background': sidebar,
+    'sidebar-foreground': sidebarForeground,
+    'sidebar-primary': sidebarPrimary,
+    'sidebar-primary-foreground': sidebarPrimaryForeground,
+    'sidebar-accent': sidebarAccent,
+    'sidebar-accent-foreground': sidebarAccentForeground,
+    'sidebar-border': sidebarBorder,
+    'sidebar-ring': sidebarRing,
   };
 };