feat(button, fab): add component tokens #8922
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
alisonailea
requested review from
benelan,
jcfranco,
driskull,
geospatialem and
a team
as code owners
alisonailea
force-pushed
the
astump/7180-button-fab
branch
from
be9e669 to
832ad82
Compare
alisonailea
added
the
pr ready for visual snapshots
macandcheese
approved these changes
Mar 11, 2024
packages/calcite-components/src/components/color-picker/color-picker.scss
Show resolved
Hide resolved
…components into astump/7180-button-fab
alisonailea
added
pr ready for visual snapshots
alisonailea
removed
the
pr ready for visual snapshots
alisonailea
added
the
pr ready for visual snapshots
jcfranco
approved these changes
Mar 13, 2024
| @@ -3,6 +3,18 @@ | |||
| * | |||
| * These properties can be overridden using the component's tag as selector. | |||
| * | |||
| * @prop --calcite-color-picker-save-buttons-background-color-active: defines the background color of the button when in a active state in the component. | |||
There was a problem hiding this comment.
Not critical for this PR since it can be tackled when color-picker gets updated, but save-buttons in the name could be misleading. Is there another name we could use to describe the saved color section, which contains both add/remove color buttons?
There was a problem hiding this comment.
I previously had it named --calcite-color-picker-button-background-color-active but was told that sounded to generic but I think that might be the right option here since add/remove are the only buttons in the component.
| * @prop --calcite-tab-nav-button-icon-color: Specifies the color of the scroll buttons' icon. | ||
| * @prop --calcite-tab-nav-button-background-color-active: defines the scroll button's background color in an active state. | ||
| * @prop --calcite-tab-nav-button-background-color-hover: defines the scroll button's background color in a hover state. | ||
| * @prop --calcite-tab-nav-button-background-color: defines the scroll button's background color. |
There was a problem hiding this comment.
Does this need --calcite-tab-nav-button-background-color-focus?
| @@ -5,6 +5,12 @@ | |||
| * | |||
| * @prop --calcite-inline-editable-background-color: Specifies the background color of the component. | |||
| * @prop --calcite-inline-editable-border-color: Specifies the border color of the component. | |||
| * @prop --calcite-inline-editable-button-corner-radius: defines the button's corner radius. | |||
alisonailea
added
pr ready for visual snapshots
alisonailea
added
pr ready for visual snapshots
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Related Issue: #7180
Summary
Button
--calcite-button-background-color: defines the component's background color.
--calcite-button-border-color: defines the component's border color.
--calcite-button-corner-radius: defines the component's corner radius.
--calcite-button-loader-color: defines the component's loader color.
--calcite-button-shadow: defines the component's shadow.
--calcite-button-text-color: defines the component's text color.
--calcite-button-icon-color: defines the color of an icon in the component.
FAB
--calcite-fab-background-color: defines the component's background color.
--calcite-fab-border-color: defines the component's border color.
--calcite-fab-corner-radius: defines the component's corner radius.
--calcite-fab-loader-color: defines the component's loader color.
--calcite-fab-shadow: defines the component's shadow.
--calcite-fab-text-color: defines the component's text color.
--calcite-fab-icon-color: defines the color of an icon in the component.