@fragments-sdk/ui 0.3.0 → 0.5.0

package/src/recipes/DashboardNav.recipe.ts

@@ -0,0 +1,183 @@
+import { defineRecipe } from '@fragments/core';
+
+export default defineRecipe({
+  name: 'Dashboard Navigation',
+  description: 'Sidebar navigation pattern for dashboard applications with user profile, sections, and nested menus',
+  category: 'navigation',
+  components: ['Sidebar', 'Avatar'],
+  tags: ['navigation', 'sidebar', 'dashboard', 'admin', 'menu'],
+  code: `
+// Dashboard Navigation with User Profile
+// A complete sidebar navigation for admin/dashboard interfaces
+
+function DashboardNav({ user, currentPath }) {
+  const [collapsed, setCollapsed] = React.useState(false);
+  const [projectsExpanded, setProjectsExpanded] = React.useState(false);
+
+  return (
+    <Sidebar
+      collapsed={collapsed}
+      onCollapsedChange={setCollapsed}
+    >
+      {/* Brand header */}
+      <Sidebar.Header>
+        <svg width="32" height="32" viewBox="0 0 256 256" fill="var(--fui-color-accent)">
+          <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z" />
+        </svg>
+        {!collapsed && (
+          <span style={{ fontWeight: 600, fontSize: '16px' }}>Dashboard</span>
+        )}
+        <Sidebar.CollapseToggle />
+      </Sidebar.Header>
+
+      {/* Main navigation */}
+      <Sidebar.Nav aria-label="Dashboard navigation">
+        {/* Primary section */}
+        <Sidebar.Section>
+          <Sidebar.Item
+            icon={<HomeIcon />}
+            href="/dashboard"
+            active={currentPath === '/dashboard'}
+          >
+            Overview
+          </Sidebar.Item>
+          <Sidebar.Item
+            icon={<ChartIcon />}
+            href="/analytics"
+            active={currentPath === '/analytics'}
+            badge="New"
+          >
+            Analytics
+          </Sidebar.Item>
+          <Sidebar.Item
+            icon={<InboxIcon />}
+            href="/inbox"
+            active={currentPath === '/inbox'}
+            badge="5"
+          >
+            Inbox
+          </Sidebar.Item>
+        </Sidebar.Section>
+
+        {/* Projects section with nested items */}
+        <Sidebar.Section label="Workspace">
+          <Sidebar.Item
+            icon={<FolderIcon />}
+            hasSubmenu
+            expanded={projectsExpanded}
+            onExpandedChange={setProjectsExpanded}
+          >
+            Projects
+          </Sidebar.Item>
+          <Sidebar.Submenu>
+            <Sidebar.SubItem
+              href="/projects/website"
+              active={currentPath === '/projects/website'}
+            >
+              Website Redesign
+            </Sidebar.SubItem>
+            <Sidebar.SubItem
+              href="/projects/mobile"
+              active={currentPath === '/projects/mobile'}
+            >
+              Mobile App
+            </Sidebar.SubItem>
+            <Sidebar.SubItem
+              href="/projects/api"
+              active={currentPath === '/projects/api'}
+            >
+              API Integration
+            </Sidebar.SubItem>
+          </Sidebar.Submenu>
+          <Sidebar.Item
+            icon={<UsersIcon />}
+            href="/team"
+            active={currentPath === '/team'}
+          >
+            Team Members
+          </Sidebar.Item>
+          <Sidebar.Item
+            icon={<CalendarIcon />}
+            href="/calendar"
+            active={currentPath === '/calendar'}
+          >
+            Calendar
+          </Sidebar.Item>
+        </Sidebar.Section>
+
+        {/* Settings section */}
+        <Sidebar.Section label="Account">
+          <Sidebar.Item
+            icon={<GearIcon />}
+            href="/settings"
+            active={currentPath === '/settings'}
+          >
+            Settings
+          </Sidebar.Item>
+          <Sidebar.Item
+            icon={<HelpIcon />}
+            href="/help"
+            active={currentPath === '/help'}
+          >
+            Help & Support
+          </Sidebar.Item>
+        </Sidebar.Section>
+      </Sidebar.Nav>
+
+      {/* Footer with user profile */}
+      <Sidebar.Footer>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+          padding: collapsed ? '0' : '8px',
+          borderRadius: '8px',
+          cursor: 'pointer',
+        }}>
+          <Avatar
+            src={user.avatar}
+            name={user.name}
+            size="sm"
+          />
+          {!collapsed && (
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{
+                fontWeight: 500,
+                fontSize: '14px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}>
+                {user.name}
+              </div>
+              <div style={{
+                fontSize: '12px',
+                color: 'var(--fui-text-secondary)',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}>
+                {user.email}
+              </div>
+            </div>
+          )}
+        </div>
+      </Sidebar.Footer>
+    </Sidebar>
+  );
+}
+
+// Usage example:
+// <DashboardNav
+//   user={{ name: 'Jane Doe', email: 'jane@example.com', avatar: '/avatar.jpg' }}
+//   currentPath="/dashboard"
+// />
+
+// Icon components (use your preferred icon library)
+const HomeIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
+    <path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8H96a8,8,0,0,0,8-8V160h48v56a8,8,0,0,0,8,8h56a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68Z" />
+  </svg>
+);
+`.trim(),
+});

package/src/recipes/LoginForm.recipe.ts

@@ -14,6 +14,13 @@ export default defineRecipe({
   <Input type="password" />
 </FormField>
 <Button type="submit" variant="primary">Sign in</Button>
-{error && <Alert variant="danger">{error}</Alert>}
+{error && (
+  <Alert severity="error">
+    <Alert.Icon />
+    <Alert.Body>
+      <Alert.Content>{error}</Alert.Content>
+    </Alert.Body>
+  </Alert>
+)}
 `.trim(),
 });

package/src/recipes/SettingsPage.recipe.ts

@@ -8,30 +8,47 @@ export default defineRecipe({
   tags: ['settings', 'preferences', 'form', 'toggle', 'layout'],
   code: `
 <Grid columns={1} gap="lg">
-  <Card title="Profile" description="Your public profile information">
-    <Grid columns={2} gap="md">
-      <Input label="Display Name" defaultValue={user.name} />
-      <Input label="Email" type="email" defaultValue={user.email} />
-      <Grid.Item colSpan="full">
-        <Input label="Website" type="url" defaultValue={user.website} />
-      </Grid.Item>
-    </Grid>
+  <Card>
+    <Card.Header>
+      <Card.Title>Profile</Card.Title>
+      <Card.Description>Your public profile information</Card.Description>
+    </Card.Header>
+    <Card.Body>
+      <Grid columns={2} gap="md">
+        <Input label="Display Name" defaultValue={user.name} />
+        <Input label="Email" type="email" defaultValue={user.email} />
+        <Grid.Item colSpan="full">
+          <Input label="Website" type="url" defaultValue={user.website} />
+        </Grid.Item>
+      </Grid>
+    </Card.Body>
   </Card>
 
-  <Card title="Notifications" description="Choose what you get notified about">
-    <Grid columns={1} gap="sm">
-      <Toggle label="Email notifications" checked={prefs.emailNotifs} onChange={onToggle('emailNotifs')} />
-      <Toggle label="Push notifications" checked={prefs.pushNotifs} onChange={onToggle('pushNotifs')} />
-      <Toggle label="Weekly digest" checked={prefs.digest} onChange={onToggle('digest')} />
-    </Grid>
+  <Card>
+    <Card.Header>
+      <Card.Title>Notifications</Card.Title>
+      <Card.Description>Choose what you get notified about</Card.Description>
+    </Card.Header>
+    <Card.Body>
+      <Grid columns={1} gap="sm">
+        <Toggle label="Email notifications" checked={prefs.emailNotifs} onChange={onToggle('emailNotifs')} />
+        <Toggle label="Push notifications" checked={prefs.pushNotifs} onChange={onToggle('pushNotifs')} />
+        <Toggle label="Weekly digest" checked={prefs.digest} onChange={onToggle('digest')} />
+      </Grid>
+    </Card.Body>
   </Card>
 
-  <Card title="Appearance">
-    <Select label="Theme" value={prefs.theme} onChange={onThemeChange}>
-      <Select.Item value="light">Light</Select.Item>
-      <Select.Item value="dark">Dark</Select.Item>
-      <Select.Item value="system">System</Select.Item>
-    </Select>
+  <Card>
+    <Card.Header>
+      <Card.Title>Appearance</Card.Title>
+    </Card.Header>
+    <Card.Body>
+      <Select label="Theme" value={prefs.theme} onChange={onThemeChange}>
+        <Select.Item value="light">Light</Select.Item>
+        <Select.Item value="dark">Dark</Select.Item>
+        <Select.Item value="system">System</Select.Item>
+      </Select>
+    </Card.Body>
   </Card>
 
   <Separator />

package/src/styles/globals.scss

@@ -15,3 +15,34 @@
 
 // Output all CSS custom properties
 @include fui-css-variables;
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+// Respects user's system preference for reduced motion.
+// Disables animations and transitions globally when enabled.
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+// ============================================
+// Accessibility: Focus Visible
+// ============================================
+// Ensures focus indicators are only shown for keyboard navigation
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  outline: var(--fui-focus-ring-width, 2px) solid var(--fui-focus-ring-color, #18181b);
+  outline-offset: var(--fui-focus-ring-offset, 2px);
+}

package/src/tokens/_computed.scss

@@ -0,0 +1,212 @@
+// ============================================
+// @fragments/ui Computed Tokens
+// ============================================
+//
+// This module imports seed values and derivation functions,
+// then computes all token values. These computed values are
+// used as fallbacks in _variables.scss for backward compatibility.
+//
+// ============================================
+
+@use 'sass:map';
+@use 'seeds' as seeds;
+@use 'palettes' as palettes;
+@use 'density' as density;
+@use 'radius' as radius;
+@use 'derive' as derive;
+
+// --------------------------------------------
+// Resolve Seed Values
+// --------------------------------------------
+
+// Get the selected configurations
+$_palette: palettes.get-palette(seeds.$fui-neutral);
+$_density: density.get-density(seeds.$fui-density);
+$_radius: radius.get-radius-style(seeds.$fui-radius-style);
+
+// Derive spacing and padding from density
+$_spacing: density.derive-spacing($_density);
+$_padding: density.derive-padding($_density);
+
+// --------------------------------------------
+// Computed: Base Configuration
+// --------------------------------------------
+
+$computed-base-font-size: map.get($_density, base-font-size);
+$computed-base-unit: map.get($_density, base-unit);
+
+// --------------------------------------------
+// Computed: Spacing
+// --------------------------------------------
+
+$computed-space-px: map.get($_spacing, px);
+$computed-space-0-5: map.get($_spacing, 0-5);
+$computed-space-0-75: map.get($_spacing, 0-75);
+$computed-space-1: map.get($_spacing, 1);
+$computed-space-2: map.get($_spacing, 2);
+$computed-space-3: map.get($_spacing, 3);
+$computed-space-4: map.get($_spacing, 4);
+$computed-space-5: map.get($_spacing, 5);
+$computed-space-6: map.get($_spacing, 6);
+$computed-space-8: map.get($_spacing, 8);
+$computed-space-10: map.get($_spacing, 10);
+$computed-space-12: map.get($_spacing, 12);
+
+// --------------------------------------------
+// Computed: Density Padding
+// --------------------------------------------
+
+$computed-padding-container-sm: map.get($_padding, container-sm);
+$computed-padding-container-md: map.get($_padding, container-md);
+$computed-padding-container-lg: map.get($_padding, container-lg);
+$computed-padding-inline-sm: map.get($_padding, inline-sm);
+$computed-padding-inline-md: map.get($_padding, inline-md);
+$computed-padding-inline-lg: map.get($_padding, inline-lg);
+$computed-padding-item-sm: map.get($_padding, item-sm);
+$computed-padding-item-md: map.get($_padding, item-md);
+$computed-padding-item-lg: map.get($_padding, item-lg);
+
+// --------------------------------------------
+// Computed: Border Radius
+// --------------------------------------------
+
+$computed-radius-sm: radius.radius-value($_radius, sm);
+$computed-radius-md: radius.radius-value($_radius, md);
+$computed-radius-lg: radius.radius-value($_radius, lg);
+$computed-radius-xl: radius.radius-value($_radius, xl);
+$computed-radius-full: radius.radius-full();
+
+// --------------------------------------------
+// Computed: Component Heights (from density)
+// --------------------------------------------
+
+$computed-button-height-sm: density.px-to-rem($_density, map.get($_density, button-height-sm));
+$computed-button-height-md: density.px-to-rem($_density, map.get($_density, button-height-md));
+$computed-button-height-lg: density.px-to-rem($_density, map.get($_density, button-height-lg));
+
+$computed-input-height: density.px-to-rem($_density, map.get($_density, input-height));
+$computed-input-height-sm: density.px-to-rem($_density, map.get($_density, input-height-sm));
+$computed-input-height-lg: density.px-to-rem($_density, map.get($_density, input-height-lg));
+
+$computed-touch-sm: density.px-to-rem($_density, map.get($_density, touch-sm));
+$computed-touch-md: density.px-to-rem($_density, map.get($_density, touch-md));
+$computed-touch-lg: density.px-to-rem($_density, map.get($_density, touch-lg));
+
+// --------------------------------------------
+// Computed: Colors - Light Mode
+// --------------------------------------------
+
+// Accent colors (from brand seed)
+$computed-color-accent: seeds.$fui-brand;
+$computed-color-accent-hover: derive.derive-accent-hover(seeds.$fui-brand, false);
+$computed-color-accent-active: derive.derive-accent-active(seeds.$fui-brand, false);
+
+// Semantic colors (from seeds or defaults)
+$computed-color-danger: seeds.$fui-danger;
+$computed-color-danger-hover: derive.derive-semantic-hover(seeds.$fui-danger);
+$computed-color-success: seeds.$fui-success;
+$computed-color-warning: seeds.$fui-warning;
+$computed-color-info: seeds.$fui-info;
+
+// Semantic backgrounds
+$computed-color-danger-bg: derive.derive-semantic-bg(seeds.$fui-danger, false);
+$computed-color-success-bg: derive.derive-semantic-bg(seeds.$fui-success, false);
+$computed-color-warning-bg: derive.derive-semantic-bg(seeds.$fui-warning, false);
+$computed-color-info-bg: derive.derive-semantic-bg(seeds.$fui-info, false);
+
+// Surfaces (from neutral palette)
+$_surfaces-light: derive.derive-surfaces($_palette, false);
+$computed-bg-primary: map.get($_surfaces-light, primary);
+$computed-bg-secondary: map.get($_surfaces-light, secondary);
+$computed-bg-tertiary: map.get($_surfaces-light, tertiary);
+$computed-bg-elevated: map.get($_surfaces-light, elevated);
+$computed-bg-subtle: map.get($_surfaces-light, subtle);
+$computed-bg-hover: map.get($_surfaces-light, hover);
+$computed-bg-active: map.get($_surfaces-light, active);
+
+// Text (from neutral palette)
+$_text-light: derive.derive-text($_palette, false);
+$computed-text-primary: map.get($_text-light, primary);
+$computed-text-secondary: map.get($_text-light, secondary);
+$computed-text-tertiary: map.get($_text-light, tertiary);
+$computed-text-inverse: map.get($_text-light, inverse);
+
+// Borders (from neutral palette)
+$_borders-light: derive.derive-borders($_palette, false);
+$computed-border: map.get($_borders-light, default);
+$computed-border-default: map.get($_borders-light, default);
+$computed-border-strong: map.get($_borders-light, strong);
+
+// Shadows
+$_shadows-light: derive.derive-shadows(false);
+$computed-shadow-sm: map.get($_shadows-light, sm);
+$computed-shadow-md: map.get($_shadows-light, md);
+$computed-shadow-lg: map.get($_shadows-light, lg);
+
+// Focus ring
+$computed-focus-ring-color: derive.derive-focus-ring(seeds.$fui-brand, false);
+
+// Scrollbar
+$_scrollbar-light: derive.derive-scrollbar($_palette, false);
+$computed-scrollbar-track: map.get($_scrollbar-light, track);
+$computed-scrollbar-thumb: map.get($_scrollbar-light, thumb);
+$computed-scrollbar-thumb-hover: map.get($_scrollbar-light, thumb-hover);
+
+// Backdrop
+$computed-backdrop: derive.derive-backdrop(false);
+
+// --------------------------------------------
+// Computed: Colors - Dark Mode
+// --------------------------------------------
+
+// Accent colors (derive light version for dark mode)
+$computed-dark-color-accent: derive.derive-dark-accent(seeds.$fui-brand);
+$computed-dark-color-accent-hover: derive.derive-accent-hover($computed-dark-color-accent, true);
+$computed-dark-color-accent-active: derive.derive-accent-active($computed-dark-color-accent, true);
+
+// Semantic backgrounds (dark mode)
+$computed-dark-color-danger-bg: derive.derive-semantic-bg(seeds.$fui-danger, true);
+$computed-dark-color-success-bg: derive.derive-semantic-bg(seeds.$fui-success, true);
+$computed-dark-color-warning-bg: derive.derive-semantic-bg(seeds.$fui-warning, true);
+$computed-dark-color-info-bg: derive.derive-semantic-bg(seeds.$fui-info, true);
+
+// Surfaces (dark mode)
+$_surfaces-dark: derive.derive-surfaces($_palette, true);
+$computed-dark-bg-primary: map.get($_surfaces-dark, primary);
+$computed-dark-bg-secondary: map.get($_surfaces-dark, secondary);
+$computed-dark-bg-tertiary: map.get($_surfaces-dark, tertiary);
+$computed-dark-bg-elevated: map.get($_surfaces-dark, elevated);
+$computed-dark-bg-subtle: map.get($_surfaces-dark, subtle);
+$computed-dark-bg-hover: map.get($_surfaces-dark, hover);
+$computed-dark-bg-active: map.get($_surfaces-dark, active);
+
+// Text (dark mode)
+$_text-dark: derive.derive-text($_palette, true);
+$computed-dark-text-primary: map.get($_text-dark, primary);
+$computed-dark-text-secondary: map.get($_text-dark, secondary);
+$computed-dark-text-tertiary: map.get($_text-dark, tertiary);
+$computed-dark-text-inverse: map.get($_text-dark, inverse);
+
+// Borders (dark mode)
+$_borders-dark: derive.derive-borders($_palette, true);
+$computed-dark-border: map.get($_borders-dark, default);
+$computed-dark-border-default: map.get($_borders-dark, default);
+$computed-dark-border-strong: map.get($_borders-dark, strong);
+
+// Shadows (dark mode)
+$_shadows-dark: derive.derive-shadows(true);
+$computed-dark-shadow-sm: map.get($_shadows-dark, sm);
+$computed-dark-shadow-md: map.get($_shadows-dark, md);
+$computed-dark-shadow-lg: map.get($_shadows-dark, lg);
+
+// Focus ring (dark mode)
+$computed-dark-focus-ring-color: derive.derive-focus-ring(seeds.$fui-brand, true);
+
+// Scrollbar (dark mode)
+$_scrollbar-dark: derive.derive-scrollbar($_palette, true);
+$computed-dark-scrollbar-track: map.get($_scrollbar-dark, track);
+$computed-dark-scrollbar-thumb: map.get($_scrollbar-dark, thumb);
+$computed-dark-scrollbar-thumb-hover: map.get($_scrollbar-dark, thumb-hover);
+
+// Backdrop (dark mode)
+$computed-dark-backdrop: derive.derive-backdrop(true);

package/src/tokens/_density.scss

@@ -0,0 +1,171 @@
+// ============================================
+// @fragments/ui Density Scales
+// ============================================
+//
+// Defines 3 density presets that control spacing and sizing.
+// Each preset uses a different base unit to scale all spacing.
+//
+// ============================================
+
+@use 'sass:math';
+@use 'sass:map';
+
+// --------------------------------------------
+// Density Definitions
+// --------------------------------------------
+// Each density includes:
+// - base-unit: The fundamental spacing unit
+// - multipliers: Scale factors for spacing tokens
+
+$density-compact: (
+  base-unit: 6px,
+  base-font-size: 14px,
+  // Button heights (more compact)
+  button-height-sm: 24px,   // ~4 units
+  button-height-md: 30px,   // 5 units
+  button-height-lg: 36px,   // 6 units
+  // Input height
+  input-height: 32px,       // ~5.3 units
+  input-height-sm: 24px,    // 4 units
+  input-height-lg: 36px,    // 6 units
+  // Touch targets (minimum for accessibility)
+  touch-sm: 24px,
+  touch-md: 30px,
+  touch-lg: 36px
+);
+
+$density-default: (
+  base-unit: 7px,
+  base-font-size: 14px,
+  // Button heights (current values)
+  button-height-sm: 28px,   // 4 units
+  button-height-md: 36px,   // ~5 units
+  button-height-lg: 44px,   // ~6 units
+  // Input height
+  input-height: 40px,       // ~6 units
+  input-height-sm: 28px,    // 4 units
+  input-height-lg: 44px,    // ~6 units
+  // Touch targets
+  touch-sm: 24px,
+  touch-md: 32px,
+  touch-lg: 44px
+);
+
+$density-relaxed: (
+  base-unit: 8px,
+  base-font-size: 14px,
+  // Button heights (more spacious)
+  button-height-sm: 32px,   // 4 units
+  button-height-md: 40px,   // 5 units
+  button-height-lg: 48px,   // 6 units
+  // Input height
+  input-height: 44px,       // ~5.5 units
+  input-height-sm: 32px,    // 4 units
+  input-height-lg: 48px,    // 6 units
+  // Touch targets
+  touch-sm: 32px,
+  touch-md: 40px,
+  touch-lg: 48px
+);
+
+// --------------------------------------------
+// Density Map for Dynamic Access
+// --------------------------------------------
+$densities: (
+  "compact": $density-compact,
+  "default": $density-default,
+  "relaxed": $density-relaxed
+);
+
+// --------------------------------------------
+// Helper Functions
+// --------------------------------------------
+
+/// Get a density configuration by name
+/// @param {String} $name - Density name (compact, default, relaxed)
+/// @return {Map} The density configuration map
+@function get-density($name) {
+  @if not map.has-key($densities, $name) {
+    @warn "Unknown density '#{$name}'. Using 'default' as fallback.";
+    @return $density-default;
+  }
+  @return map.get($densities, $name);
+}
+
+/// Get a specific value from a density configuration
+/// @param {Map} $density - A density configuration map
+/// @param {String} $key - The key to retrieve
+/// @return {*} The value
+@function density-value($density, $key) {
+  @if not map.has-key($density, $key) {
+    @warn "Unknown density key '#{$key}'.";
+    @return null;
+  }
+  @return map.get($density, $key);
+}
+
+/// Derive spacing scale from base unit
+/// Returns a map with spacing tokens
+/// @param {Map} $density - A density configuration map
+/// @return {Map} Spacing tokens
+@function derive-spacing($density) {
+  $base: map.get($density, base-unit);
+  $font-size: map.get($density, base-font-size);
+
+  // Convert to rem based on font size
+  // 1 unit = base-unit / font-size * 1rem
+  $unit-rem: math.div($base, $font-size) * 1rem;
+
+  @return (
+    // Micro spacing (pixel-precise for tiny alignments)
+    px: 1px,
+    0-5: $unit-rem * 0.3,     // ~2px for 7px base
+    0-75: $unit-rem * 0.43,   // ~3px for 7px base
+
+    // Standard spacing scale
+    1: $unit-rem,             // 1 unit
+    2: $unit-rem * 2,         // 2 units
+    3: $unit-rem * 3,         // 3 units
+    4: $unit-rem * 4,         // 4 units
+    5: $unit-rem * 5,         // 5 units
+    6: $unit-rem * 6,         // 6 units
+    8: $unit-rem * 8,         // 8 units
+    10: $unit-rem * 10,       // 10 units
+    12: $unit-rem * 12        // 12 units
+  );
+}
+
+/// Derive container padding from density
+/// @param {Map} $density - A density configuration map
+/// @return {Map} Padding tokens
+@function derive-padding($density) {
+  $base: map.get($density, base-unit);
+  $font-size: map.get($density, base-font-size);
+  $unit-rem: math.div($base, $font-size) * 1rem;
+
+  @return (
+    // Container padding: Cards, Dialogs, Popovers
+    container-sm: $unit-rem * 3,   // 3 units
+    container-md: $unit-rem * 4,   // 4 units
+    container-lg: $unit-rem * 6,   // 6 units
+
+    // Inline padding: Alerts, Toasts
+    inline-sm: $unit-rem * 2,      // 2 units
+    inline-md: $unit-rem * 3,      // 3 units
+    inline-lg: $unit-rem * 4,      // 4 units
+
+    // Item padding: Accordion, Tabs, Menu items
+    item-sm: $unit-rem * 2,        // 2 units
+    item-md: $unit-rem * 3,        // 3 units
+    item-lg: $unit-rem * 4         // 4 units
+  );
+}
+
+/// Convert pixel value to rem based on density
+/// @param {Map} $density - A density configuration map
+/// @param {Number} $px - Pixel value to convert
+/// @return {Number} Value in rem
+@function px-to-rem($density, $px) {
+  $font-size: map.get($density, base-font-size);
+  @return math.div($px, $font-size) * 1rem;
+}