@aleph-alpha/ui-library 1.13.0 → 1.15.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.d.ts

@@ -60,7 +60,7 @@ export interface UiLibraryThemeConfig {
   /**
    * Include all token-based CSS variables in addition to shadcn variables.
    * This enables classes like bg-background-surface-secondary, text-content-on-surface-primary, etc.
-   * @default false
+   * @default true
    */
   includeAllTokens?: boolean;
 }
@@ -145,24 +145,37 @@ export declare const presetUiLibraryTheme: (
  *
  * **Important:** Place this preset AFTER `presetShadcn()` to override its CSS variables.
  *
+ * This preset bundles everything needed for the UI library:
+ * - CSS variables for all design tokens (light/dark mode)
+ * - Token-based theme colors (bg-background-surface-secondary, text-content-on-surface-primary, etc.)
+ * - Semantic color overrides (background, foreground, modal, link, etc.)
+ * - Typography classes from design tokens (heading-48-bold, body-14-normal, label-12-medium, etc.)
+ * - Custom rules for Tailwind v4 CSS variable syntax (w-(--var), h-(--var), etc.)
+ *
  * @example
  * ```ts
- * // Use defaults
- * presetUiLibraryThemeFromTokens({ darkSelector: 'html.dark' })
+ * // Use defaults (recommended — includes everything)
+ * presetUiLibraryThemeFromTokens()
  *
  * // Extend defaults
  * presetUiLibraryThemeFromTokens({
- *   darkSelector: 'html.dark',
  *   extend: { light: { primary: '#ff5500' } },
  * })
  *
  * // With external config file
  * import themeConfig from './tokens.config';
- * presetUiLibraryThemeFromTokens({ ...themeConfig, darkSelector: 'html.dark' })
+ * presetUiLibraryThemeFromTokens(themeConfig)
  * ```
  */
 export declare const presetUiLibraryThemeFromTokens: (options?: UiLibraryPresetOptions) => Preset;
 
+/**
+ * UnoCSS preset with utility rules required by the UI library's components.
+ * Adds Tailwind v4 CSS variable syntax (w-(--var), h-(--var), etc.)
+ * that preset-wind4 does not yet support.
+ */
+export declare const presetUiLibraryUtils: () => Preset;
+
 /**
  * Typography shortcut tuple: [className, cssProperties]
  */

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,
   };
 };
 
@@ -436,9 +469,9 @@ export const presetUiLibraryTheme = (theme, options = {}) => {
 };
 
 export const presetUiLibraryThemeFromTokens = (options = {}) => {
-  const { theme, extend, includeAllTokens = false, ...presetOptions } = options;
+  const { theme, extend, includeAllTokens = true, ...presetOptions } = options;
 
-  // If full theme override provided, use it directly
+  // If full theme override provided, use basic preset (no batteries)
   if (theme) {
     return presetUiLibraryTheme(theme, presetOptions);
   }
@@ -446,7 +479,7 @@ export const presetUiLibraryThemeFromTokens = (options = {}) => {
   // Get base shadcn theme from tokens
   const baseTheme = getUiLibraryThemeFromTokens();
 
-  // Optionally include all token-based variables
+  // Include all token-based variables (default: true)
   let finalTheme = baseTheme;
   if (includeAllTokens) {
     const tokenVars = getUiLibraryTokenVars();
@@ -459,9 +492,66 @@ export const presetUiLibraryThemeFromTokens = (options = {}) => {
   // Merge with extend overrides
   finalTheme = mergeThemes(finalTheme, extend);
 
-  return presetUiLibraryTheme(finalTheme, presetOptions);
+  // Get base preset with preflights (CSS variables)
+  const basePreset = presetUiLibraryTheme(finalTheme, presetOptions);
+
+  // Token colors for utility classes (bg-background-surface-secondary, etc.)
+  const tokenColors = getUiLibraryTokenColors();
+
+  // Semantic color overrides used by components
+  const semanticColors = {
+    background: 'oklch(var(--background))',
+    foreground: 'oklch(var(--foreground))',
+    modal: 'oklch(var(--modal))',
+    link: 'oklch(var(--link))',
+    'hover-default': 'oklch(var(--hover-default))',
+    'modal-overlay': 'oklch(var(--modal-overlay))',
+    inverse: 'oklch(var(--inverse))',
+    'inverse-foreground': 'oklch(var(--inverse-foreground))',
+    'secondary-content': 'oklch(var(--secondary-content))',
+    'input-background': 'oklch(var(--input-background))',
+    'accent-default': 'oklch(var(--accent-default))',
+    'accent-default-foreground': 'oklch(var(--accent-default-foreground))',
+  };
+
+  // Typography shortcuts from design tokens
+  const typographyShortcuts = getUiLibraryTypographyShortcuts();
+
+  // Return preset with token-related config: CSS variables, token colors, semantic overrides, typography
+  return {
+    ...basePreset,
+    theme: {
+      colors: {
+        ...tokenColors,
+        ...semanticColors,
+      },
+    },
+    rules: [
+      // Typography classes from design tokens (heading-48-bold, body-14-normal, label-12-medium, etc.)
+      ...typographyShortcuts.map(([name, css]) => [
+        new RegExp(`^${name}$`),
+        () => Object.fromEntries(css.split(';').map((p) => p.split(':').map((s) => s.trim()))),
+      ]),
+    ],
+  };
 };
 
+/**
+ * UnoCSS preset with utility rules required by the UI library's components.
+ * Adds Tailwind v4 CSS variable syntax (w-(--var), h-(--var), etc.)
+ * that preset-wind4 does not yet support.
+ */
+export const presetUiLibraryUtils = () =>
+  definePreset(() => ({
+    name: '@aleph-alpha/ui-library-utils',
+    rules: [
+      [/^w-\(--(.+)\)$/, ([, name]) => ({ width: `var(--${name})` })],
+      [/^max-w-\(--(.+)\)$/, ([, name]) => ({ 'max-width': `var(--${name})` })],
+      [/^h-\(--(.+)\)$/, ([, name]) => ({ height: `var(--${name})` })],
+      [/^origin-\(--(.+)\)$/, ([, name]) => ({ 'transform-origin': `var(--${name})` })],
+    ],
+  }))();
+
 // Typography utilities
 const fontWeightMap = {
   Regular: '400',