@portel/photon-core 2.5.4 → 2.6.1

package/src/design-system/tokens.ts

@@ -122,6 +122,16 @@ const colorPalette = {
     100: '#ffffff',
   },
 
+  // Light-theme neutrals (cool blue-gray undertone, higher contrast)
+  neutralLight: {
+    85: '#BCC5CF',   // heavy borders / dividers
+    88: '#C4CDD5',   // surface-container-highest
+    91: '#D5DBE1',   // surface-container-high
+    94: '#E5E9EE',   // bg-app — visible structure
+    96: '#EBEEF2',   // surface-container
+    98: '#F6F7F9',   // surface — slightly off-white panels
+  },
+
   // Primary (blue - trust, action)
   primary: {
     10: '#001d36',
@@ -225,19 +235,19 @@ export const colorsDark = {
   scrim: 'rgba(0, 0, 0, 0.5)',
 } as const;
 
-// System colors - Light Theme
+// System colors - Light Theme (cool blue-gray, WCAG compliant)
 export const colorsLight = {
-  // Surfaces (inverted - light backgrounds)
-  surface: colorPalette.neutral[100], // white
-  surfaceContainer: colorPalette.neutral[95],
-  surfaceContainerHigh: colorPalette.neutral[90],
-  surfaceContainerHighest: colorPalette.neutral[80],
-  surfaceBright: colorPalette.neutral[100],
-
-  // Text on surfaces (dark text on light)
-  onSurface: colorPalette.neutral[10],
-  onSurfaceVariant: colorPalette.neutral[30],
-  onSurfaceMuted: colorPalette.neutral[50],
+  // Surfaces (cool blue-gray, higher contrast between levels)
+  surface: colorPalette.neutralLight[98],             // #F6F7F9 — panels
+  surfaceContainer: colorPalette.neutralLight[96],    // #EBEEF2 — containers
+  surfaceContainerHigh: colorPalette.neutralLight[91], // #D5DBE1
+  surfaceContainerHighest: colorPalette.neutralLight[88], // #C4CDD5
+  surfaceBright: colorPalette.neutral[100],           // #FFFFFF — overlays/modals
+
+  // Text on surfaces (deep charcoal, high contrast)
+  onSurface: '#1A2332',         // 12.3:1 on #E5E9EE — WCAG AAA
+  onSurfaceVariant: '#3D4C5C',  // darker variant for readability
+  onSurfaceMuted: '#556270',    // 5.1:1 on #E5E9EE — WCAG AA
 
   // Primary (darker for light theme)
   primary: colorPalette.primary[40],
@@ -263,12 +273,12 @@ export const colorsLight = {
   onError: colorPalette.neutral[100], // white text
   onErrorContainer: colorPalette.error[10],
 
-  // Outline (darker for light theme)
-  outline: colorPalette.neutral[50],
-  outlineVariant: colorPalette.neutral[80],
+  // Outline (visible but not harsh)
+  outline: '#8B95A3',          // stronger than before for visibility
+  outlineVariant: '#D1D5DB',   // visible border, not washed out
 
-  // Scrim (overlay)
-  scrim: 'rgba(0, 0, 0, 0.3)' as const,
+  // Scrim (overlay — lighter than dark theme's 0.5)
+  scrim: 'rgba(0, 0, 0, 0.2)' as const,
 };
 
 // Default export (dark theme for backwards compatibility)
@@ -298,6 +308,16 @@ export const elevation = {
   '5': '0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)',
 } as const;
 
+// Light theme elevation — visible but not harsh
+export const elevationLight = {
+  '0': 'none',
+  '1': '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.08)',
+  '2': '0px 2px 6px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.06)',
+  '3': '0px 4px 8px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.06)',
+  '4': '0px 10px 15px rgba(0, 0, 0, 0.09), 0px 20px 25px rgba(0, 0, 0, 0.05)',
+  '5': '0px 20px 25px rgba(0, 0, 0, 0.07), 0px 25px 50px rgba(0, 0, 0, 0.05)',
+} as const;
+
 // =============================================================================
 // BORDER RADIUS - Apple HIG inspired
 // =============================================================================
@@ -522,12 +542,28 @@ export function generateTokensCSS(): string {
 [data-theme="light"],
 .light {
   ${generateColorVars(colorsLight)}
+
+  /* Light-mode elevation (softer shadows) */
+  --elevation-0: ${elevationLight['0']};
+  --elevation-1: ${elevationLight['1']};
+  --elevation-2: ${elevationLight['2']};
+  --elevation-3: ${elevationLight['3']};
+  --elevation-4: ${elevationLight['4']};
+  --elevation-5: ${elevationLight['5']};
 }
 
 /* System Preference: Light Mode */
 @media (prefers-color-scheme: light) {
   [data-theme="system"] {
     ${generateColorVars(colorsLight)}
+
+    /* Light-mode elevation (softer shadows) */
+    --elevation-0: ${elevationLight['0']};
+    --elevation-1: ${elevationLight['1']};
+    --elevation-2: ${elevationLight['2']};
+    --elevation-3: ${elevationLight['3']};
+    --elevation-4: ${elevationLight['4']};
+    --elevation-5: ${elevationLight['5']};
   }
 }
 `;
@@ -764,9 +800,9 @@ export function getThemeTokens(theme: 'light' | 'dark'): Record<string, string>
 
     // --- Shadows ---
     '--shadow-hairline': `0 0 0 1px ${themeColors.outlineVariant}`,
-    '--shadow-sm': elevation['1'],
-    '--shadow-md': elevation['2'],
-    '--shadow-lg': elevation['3'],
+    '--shadow-sm': theme === 'light' ? elevationLight['1'] : elevation['1'],
+    '--shadow-md': theme === 'light' ? elevationLight['2'] : elevation['2'],
+    '--shadow-lg': theme === 'light' ? elevationLight['3'] : elevation['3'],
 
     // --- Border Width ---
     '--border-width-regular': '1px',

package/src/index.ts

@@ -453,6 +453,11 @@ export {
   ReactiveMap,
   ReactiveSet,
   type Emitter,
+  // Level 2+: Rich queryable collection with rendering hints
+  Collection,
+  type RenderHint,
+  type RenderFormat,
+  type CompareOp,
 } from './collections/index.js';
 
 // ===== PURPOSE-DRIVEN UI TYPES =====