feat: add support to define component
level overrides from the Theme
#113
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
components
inThemeConfig
to define style overrides, default properties, and variants for specific components likeButton
andField
. ([[1]](https://github.com/asgardeo/javascript/pull/113/files#diff-a1f5614ca9519ec291c8191c45b409f396ab60acdfedc76a3a78387afdd5952cR104-R144)
,[[2]](https://github.com/asgardeo/javascript/pull/113/files#diff-a1f5614ca9519ec291c8191c45b409f396ab60acdfedc76a3a78387afdd5952cR192-R217)
)ThemeComponentVars
and updatedThemeVars
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)
)toCssVariables
andtoThemeVars
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)
)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:
Button
,DatePicker
,OtpField
,Select
, andTextField
styles to use component-specific overrides forborderRadius
, 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:
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
@asgardeo/react
&@asgardeo/nextjs
#81Related PRs
Checklist
Security checks