Skip to content
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

Open
wants to merge 52 commits into
base: next
Choose a base branch
from
Open

Feat/theme demo #544

wants to merge 52 commits into from

Conversation

kishore-kumar-E3682
Copy link
Contributor

@kishore-kumar-E3682 kishore-kumar-E3682 commented Apr 5, 2022

Description:

Moved the colors sass variables to a generic (from azure-800 to color-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:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • My commits have standard messages as mentioned in Contributing Guidelines

How Has This Been Tested?

Copy link
Collaborator

@arvindanta arvindanta left a 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.
Copy link
Collaborator

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 ?

Copy link
Contributor Author

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.
Copy link
Collaborator

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?

Copy link
Contributor Author

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.

@@ -2,6 +2,7 @@
@import 'mixins/card';
@import 'mixins/spacing';
@import 'mixins/border';
@import './theme.base';
Copy link
Collaborator

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 ?

Copy link
Contributor Author

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.

Copy link
Collaborator

@arvindanta arvindanta left a 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.

styles/_theme.scss Outdated Show resolved Hide resolved
styles/_theme.scss Outdated Show resolved Hide resolved
styles/_theme.scss Outdated Show resolved Hide resolved
@arvindanta
Copy link
Collaborator

Please do not merge to next branch until E2E testing is done with the docs site

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
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.

4 participants