@oxy.so/bloom 3.5.0 → 4.0.0

package/src/date-picker/TimeField.tsx

@@ -74,7 +74,8 @@ function TimeFieldComponent({
   // `"--:--"` names nothing, so the name is a prop — or, inside a `Field`, the
   // field's label. The density contract supplies the size the same way: a
   // container can ask for `small` once instead of on every control.
-  const size = useInheritedControl('density', sizeProp, 'medium');
+  const density = useInheritedControl('density', sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : undefined, 'md');
+  const size = density === 'sm' ? 'small' : 'medium';
   const field = useFieldMembership({ accessibilityLabel, disabled: disabledProp });
   const disabled = field.disabled;
   const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);

package/src/date-picker/palette.ts

@@ -1,24 +1,7 @@
-import { BUTTON_SHADOW, resolveButtonRamps } from '../button/shared';
+import { BUTTON_SHADOW } from '../button/shared';
 import type { Theme } from '../theme/types';
 
-/**
- * Date-picker tokens, resolved through the ramps `Button` builds from Bloom's
- * theme.
- *
- *                     light         dark
- *   popup surface     neutral-100   neutral-900
- *   month panel       card          neutral-800
- *   title, day        text          text
- *   weekday, chevron  neutral-500   neutral-500
- *   disabled day      neutral-400   neutral-600
- *   day / nav hover   neutral-200   neutral-800
- *   range band        accent-100    accent-950
- *   range edge        accent-300    accent-800
- *   focus ring        accent-500    accent-500
- *   chip border       neutral-200   neutral-700
- *   chip focused      neutral-400   neutral-600
- *   pill / preset on  neutral-200   neutral-800
- */
+/** Surface and text slots read canonical theme roles; fixed shadow geometry is unchanged. */
 export interface CalendarPalette {
   popup: string;
   panel: string;
@@ -39,40 +22,15 @@ export interface CalendarPalette {
 }
 
 export function resolveCalendarPalette(theme: Theme): CalendarPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
   const c = theme.colors;
-  return theme.isDark
-    ? {
-        popup: n[900],
-        panel: n[800],
-        text: c.text,
-        secondaryText: n[500],
-        disabledText: n[600],
-        hover: n[800],
-        rangeBand: accent[950],
-        rangeEdge: accent[800],
-        ring: accent[500],
-        chipBorder: n[700],
-        chipBorderFocused: n[600],
-        tertiary: n[800],
-        shadowXs: BUTTON_SHADOW.dark,
-        shadowDropdown: '0 1px 1px 0 rgb(0 0 0 / 0.14), 0 4px 4px 0 rgb(0 0 0 / 0.10)',
-      }
-    : {
-        popup: n[100],
-        panel: c.card,
-        text: c.text,
-        secondaryText: n[500],
-        disabledText: n[400],
-        hover: n[200],
-        rangeBand: accent[100],
-        rangeEdge: accent[300],
-        ring: accent[500],
-        chipBorder: n[200],
-        chipBorderFocused: n[400],
-        tertiary: n[200],
-        shadowXs: BUTTON_SHADOW.light,
-        shadowDropdown: '0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02)',
-      };
+  return {
+    popup: c.backgroundSecondary, panel: c.card, text: c.text,
+    secondaryText: c.textSecondary, disabledText: c.textTertiary,
+    hover: c.backgroundTertiary, rangeBand: c.primarySubtle,
+    rangeEdge: c.primarySubtle, ring: c.primary,
+    chipBorder: c.border, chipBorderFocused: c.primary, tertiary: c.backgroundTertiary,
+    shadowXs: theme.isDark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
+    shadowDropdown: theme.isDark ? '0 1px 1px 0 rgb(0 0 0 / 0.14), 0 4px 4px 0 rgb(0 0 0 / 0.10)' : '0 1px 1px 0 rgb(0 0 0 / 0.04), 0 4px 4px 0 rgb(0 0 0 / 0.02)',
+  };
 }
 

package/src/design-tokens/theme.css

@@ -57,6 +57,19 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-chart-9: var(--chart-9);
+  --color-chart-1-active: var(--chart-1-active);
+  --color-chart-2-active: var(--chart-2-active);
+  --color-chart-3-active: var(--chart-3-active);
+  --color-chart-4-active: var(--chart-4-active);
+  --color-chart-5-active: var(--chart-5-active);
+  --color-chart-6-active: var(--chart-6-active);
+  --color-chart-7-active: var(--chart-7-active);
+  --color-chart-8-active: var(--chart-8-active);
+  --color-chart-9-active: var(--chart-9-active);
   --color-content-area: var(--content-area);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);