Skip to content

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

Merged
merged 6 commits into from
Apr 4, 2025
Merged

feat(fab): add component tokens #11838

merged 6 commits into from
Apr 4, 2025

Conversation

Elijbet
Copy link
Contributor

@Elijbet Elijbet commented Mar 31, 2025

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.

@Elijbet Elijbet changed the title Elijbet/7180 fab design tokens feat(fab): add component tokens Mar 31, 2025
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Mar 31, 2025
@Elijbet Elijbet added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Mar 31, 2025
@Elijbet Elijbet marked this pull request as ready for review March 31, 2025 23:24
@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;
Copy link
Contributor

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

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 shadow for hover and active is going away and designers advised not to add tokens for these in the time being.

Copy link
Member

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

Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥 👍

@Elijbet Elijbet added skip visual snapshots Pull requests that do not need visual regression testing. pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed skip visual snapshots Pull requests that do not need visual regression testing. pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 4, 2025
@Elijbet Elijbet force-pushed the elijbet/7180-fab-design-tokens branch from e8c39dc to d8f8ff4 Compare April 4, 2025 21:25
@Elijbet Elijbet added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 4, 2025
@Elijbet Elijbet merged commit e1a8444 into dev Apr 4, 2025
28 checks passed
@Elijbet Elijbet deleted the elijbet/7180-fab-design-tokens branch April 4, 2025 22:04
@github-actions github-actions bot added this to the 2025-04-29 - Apr Milestone milestone Apr 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issues tied to a new feature or request. skip visual snapshots Pull requests that do not need visual regression testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants