Skip to content

Conversation

brionmario
Copy link
Member

@brionmario brionmario commented Jul 28, 2025

Purpose

This pull request introduces support for component-specific style overrides in the theme configuration, enabling more granular customization of UI components. The changes include updates to the theme system, new interfaces for component overrides, and modifications to existing components to respect these overrides.

Theme System Enhancements:

  • Added support for components in ThemeConfig to define style overrides, default properties, and variants for specific components like Button and Field. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-a1f5614ca9519ec291c8191c45b409f396ab60acdfedc76a3a78387afdd5952cR104-R144), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-a1f5614ca9519ec291c8191c45b409f396ab60acdfedc76a3a78387afdd5952cR192-R217))
  • Introduced ThemeComponentVars and updated ThemeVars to include component-specific CSS variable references. ([packages/javascript/src/theme/types.tsR336-R339](https://github.com/asgardeo/javascript/pull/113/files#diff-a1f5614ca9519ec291c8191c45b409f396ab60acdfedc76a3a78387afdd5952cR336-R339))
  • Updated toCssVariables and toThemeVars functions to generate and apply CSS variables for component overrides. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-b3844e950cb1696bb93462fc5b6e2e28001768d13abaa7922c3900a97ea489f7R452-R488), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-b3844e950cb1696bb93462fc5b6e2e28001768d13abaa7922c3900a97ea489f7R592-R595))
  • Enhanced transformThemeVariant to extract and map component-specific styles (e.g., borderRadius) into the theme configuration. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-e6ca36501cf434eb255aa7e60b16bc2a9b4de10cc00ede5074fb542e0856c7baL52-R52), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-e6ca36501cf434eb255aa7e60b16bc2a9b4de10cc00ede5074fb542e0856c7baL114-L120), [[3]](https://github.com/asgardeo/javascript/pull/113/files#diff-e6ca36501cf434eb255aa7e60b16bc2a9b4de10cc00ede5074fb542e0856c7baR131-R162))

Component Updates:

  • Modified Button, DatePicker, OtpField, Select, and TextField styles to use component-specific overrides for borderRadius, falling back to the default theme values if overrides are not provided. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-800ef45a7ab9ed1fdf0bf9e7f68700c429fb52f6a240f53b2cd240de39cef535L56-R58), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-308e84f9bd524abee5980e6d17bcd505aedcbed0f8ab57c6a0f24ae0a72affafL37-R37), [[3]](https://github.com/asgardeo/javascript/pull/113/files#diff-2da598feef7df689e3a2bf8303fb67d69ae570d3594e83d3695b99d441c990b4L57-R57), [[4]](https://github.com/asgardeo/javascript/pull/113/files#diff-cfbe8f2a9e57cc0f2130a64edd049377ad65542b8950634f15e4900a7645e191L40-R40), [[5]](https://github.com/asgardeo/javascript/pull/113/files#diff-976ee22094dd6b89f63c0eed7a4a38bfd712c1226ca4bc48c50cf2c76176d26cL57-R57))

Theme Context Integration:

  • Updated ThemeProvider to merge component-specific overrides from branding themes and user-provided configurations. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-259c20b7ce08682110d92b5042a6709ff90ba0dcb422c4e861cd3d15fe46eb19R178), [[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-259c20b7ce08682110d92b5042a6709ff90ba0dcb422c4e861cd3d15fe46eb19R206-R209))

Related Issues

Related PRs

  • N/A

Checklist

  • e2e cypress tests locally verified.
  • Manual test round performed and verified.
  • UX/UI review done on the final implementation.
  • Documentation provided. (Add links if there are any)
  • Unit tests provided. (Add links if there are any)
  • Integration tests provided. (Add links if there are any)

Security checks

@brionmario brionmario changed the title Next fixes july 28 feat: add support to define component level overrides from the Theme Jul 28, 2025
@brionmario brionmario merged commit 0139cfc into asgardeo:main Jul 28, 2025
2 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants