-
Notifications
You must be signed in to change notification settings - Fork 80
feat(fab): add component tokens #11838
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
Conversation
@apply shadow-2; | ||
--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08); | ||
box-shadow: var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal)); | ||
|
||
&:hover { | ||
@apply shadow-2-lg; |
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.
Q: can the user customize the shadow when hovered/active using --calcite-fab-shadow
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 shadow for hover
and active
is going away and designers advised not to add tokens for these in the time being.
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.
Looks good besides some feedback on the e2e tests.
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.
🔥 👍
e8c39dc
to
d8f8ff4
Compare
Related Issue: #7180
Adds the following tokens for
fab
component.--calcite-fab-background-color
: Specifies the component's background color.--calcite-fab-border-color
: Specifies the component's border color.--calcite-fab-corner-radius
: Specifies the component's corner radius.--calcite-fab-text-color
: Specifies the component's text color.--calcite-fab-loader-color
: Specifies the component's loader color.--calcite-fab-shadow
: Specifies the component's shadow.