BBj 26 DWC Design System Changes

What Changed?

BBj 26.00 introduces a refreshed DWC design system. The update is incremental. Most 25 CSS custom properties remain available, the theme engine API is unchanged, and existing customizations keep working. Palettes are now generated in OKLCH, dark mode is switched with one variable (–dwc-dark-mode), every color step gets an automatic on-text companion for contrast, and shadows, surfaces, focus ring, and press feedback were returned.

Field sizing also changed: form controls now honor the height they’re given, including height inherited from a stretching Grid or Flexbox parent, rather than always sizing to their content.

User Impact

Applications that use default styling see a visual refresh and need no code change. Applications with custom CSS should check the following:

• Overrides –dwc-color-{name}-h and -s: Nothing to do; the HSL seed path is preserved.
• Wraps input components in Flexbox or CSS Grid: default stretching behavior may force controls to occupy the full container height. Apply align-items: start to ensure elements maintain their intrinsic dimensions.
• Uses –dwc-color-{name}-c. Remove it, the light and dark text flip is computed automatically.
• References palette steps such as –dwc-color-primary-40. Steps may resolve to different colors, prefer variation tokens (–dwc-color-{name}, -dark, -light).
• Uses named font sizes (–dwc-font-size-m, -l): The scale moved down one bucket; m is now 14px instead of 16px. Step up one bucket to keep the 25 size.
• Uses –dwc-font-weight-semibold for weight 500: semibold is now 600, use –dwc-font-weight-medium for 500.
• Reserves padding with –dwc-focus-ring-width: The ring now has a gap, add –dwc-focus-ring-gap to that padding.
• Customizes button ripples. Ripples are gone, press feedback is a small scale-down.

The new system relies on the OKLCH color space and color-mix(), both available in current Chrome, Edge, Firefox, and Safari.

Additional Resources

The upgrade guide lists every change with the tokens to use and a step-by-step checklist:

https://dwc.style/docs/#/theme-engine/upgrading-to-v26

Themes and the expanse attribute from the BBj developer’s perspective:

https://dwc.style/docs/#/dwc/guide/themes