-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat/theme demo #544
base: next
Are you sure you want to change the base?
Feat/theme demo #544
Conversation
* feat(tabs): adding necessary css variables to theme tabs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you please add the global variables in the docs ?. Otherwise consumers will be totally unaware of the variables that needs to be used.
@@ -1,50 +1,58 @@ | |||
/** | |||
@prop --fw-button-min-width: minimum width for the button | |||
@prop --fw-button-label-vertical-padding: vertical padding for the button label | |||
@prop --fw-button-height: The height of the normal button. | |||
@prop --fw-button-small-height: The height of the small button. | |||
@prop --fw-button-border-radius: The height of the small button. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if this is for only small button, can we also add small
to the css variable ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Its a typo, modified it.
@prop --fw-button-border-radius: The height of the small button. | ||
@prop --fw-button-font-weight: The font weight of the button. | ||
@prop --fw-button-font-size: The font size of the normal button. | ||
@prop --fw-button-small-font-size: The font size of the small button. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we also provide customisation for other sizes of button like 'icon' , icon-small
also?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The icons are passed as slots so we can change the icon size from there.
styles/_utils.scss
Outdated
@@ -2,6 +2,7 @@ | |||
@import 'mixins/card'; | |||
@import 'mixins/spacing'; | |||
@import 'mixins/border'; | |||
@import './theme.base'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why we need this import here inside utils ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved the them.base code to the theme.scss file.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you please update the docs with all the css variables that can be used at the global level in the docs including font size etc.
Please do not merge to |
feat(theming): Update color, font-size & font-weight variables
feat(theming): update color codes of components
- Button - Primary & Secondary - Label - Input
- Button - Primary & Secondary - Label - Input
feat(theming): update components with css custom variables - CRM theme
feat(theming): update inline banner component
Description:
Moved the colors sass variables to a generic (from
azure-800
tocolor-info-800
) which can be overwritten by the css variable--fw-color-info-800
. Also exposed the typography and padding / height for button and tabs.Checklist:
How Has This Been Tested?