Skip to content

feat(react-theme): update color tokens#22238

Merged
miroslavstastny merged 3 commits into
microsoft:masterfrom
miroslavstastny:feat/update-color-tokens
Apr 1, 2022
Merged

feat(react-theme): update color tokens#22238
miroslavstastny merged 3 commits into
microsoft:masterfrom
miroslavstastny:feat/update-color-tokens

Conversation

@miroslavstastny

@miroslavstastny miroslavstastny commented Mar 29, 2022

Copy link
Copy Markdown
Member

Update existing alias color tokens

colorSubtleBackgroundLightAlphaHover
colorSubtleBackgroundLightAlphaPressed

Spec:
image
Storybook:
image

Add new alias color tokens

colorBackgroundOverlay
colorScrollbarOverlay

Spec:
image
Storybook:
image

This PR also adds a Grey14Alpha global color ramp which is used in the alias tokens.

Fixes #22239

@miroslavstastny

Copy link
Copy Markdown
Member Author

Pipeline PR: microsoft/fluentui-design-tokens/pull/2

@codesandbox-ci

codesandbox-ci Bot commented Mar 29, 2022

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8d27f94:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam

fabricteam commented Mar 29, 2022

Copy link
Copy Markdown
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: FluentProvider & webLightTheme
32.526 kB
10.645 kB
32.601 kB
10.668 kB
75 B
23 B
react-theme
Teams: all themes
29.426 kB
6.551 kB
29.676 kB
6.604 kB
250 B
53 B
react-theme
Teams: Light theme
18.42 kB
5.27 kB
18.492 kB
5.296 kB
72 B
26 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
74.792 kB
22.516 kB
react-avatar
Avatar
45.142 kB
13.111 kB
react-badge
Badge
20.895 kB
6.567 kB
react-badge
CounterBadge
21.848 kB
6.883 kB
react-badge
PresenceBadge
21.951 kB
6.565 kB
react-button
Button
28.013 kB
8.059 kB
react-button
CompoundButton
33.508 kB
9.092 kB
react-button
MenuButton
29.796 kB
8.665 kB
react-button
SplitButton
36.268 kB
9.863 kB
react-button
ToggleButton
37.395 kB
8.68 kB
react-card
Card - All
53.619 kB
15.372 kB
react-card
Card
48.904 kB
14.089 kB
react-card
CardFooter
7.686 kB
3.264 kB
react-card
CardHeader
9.251 kB
3.78 kB
react-card
CardPreview
7.658 kB
3.291 kB
react-combobox
Combobox
6.817 kB
2.901 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
176.089 kB
49.113 kB
react-divider
Divider
15.385 kB
5.539 kB
react-image
Image
10.109 kB
3.958 kB
react-input
Input
21.661 kB
7.18 kB
react-label
Label
8.371 kB
3.504 kB
react-link
Link
11.106 kB
4.507 kB
react-menu
Menu (including children components)
105.852 kB
32.433 kB
react-menu
Menu (including selectable components)
109.031 kB
32.897 kB
react-popover
Popover
96.787 kB
29.559 kB
react-portal
Portal
6.272 kB
2.17 kB
react-positioning
usePopper
23.21 kB
8.084 kB
react-priority-overflow
hooks only
10.606 kB
4.087 kB
react-provider
FluentProvider
14.009 kB
5.25 kB
react-select
Select
16.562 kB
6.264 kB
react-slider
Slider
25.549 kB
8.25 kB
react-spinner
Spinner
6.815 kB
2.9 kB
react-switch
Switch
24.279 kB
8.001 kB
react-text
Text - Default
10.797 kB
4.233 kB
react-text
Text - Wrappers
14.113 kB
4.576 kB
react-textarea
Textarea
20.602 kB
7.033 kB
react-theme
Single theme token import
69 B
89 B
react-tooltip
Tooltip
42.837 kB
14.727 kB
🤖 This report was generated against af38b775a98bfbcd214ef489ffb1cd6b941d9444

@size-auditor

size-auditor Bot commented Mar 29, 2022

Copy link
Copy Markdown

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: af38b775a98bfbcd214ef489ffb1cd6b941d9444 (build)

@fabricteam

fabricteam commented Mar 29, 2022

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 837 893 5000
Button mount 482 553 5000
FluentProvider mount 1731 1794 5000
FluentProviderWithTheme mount 258 332 10
FluentProviderWithTheme virtual-rerender 218 207 10
FluentProviderWithTheme virtual-rerender-with-unmount 296 310 10
MakeStyles mount 1418 1554 50000

'90': 'rgba(0, 0, 0, 0.9)',
};

export const grey14Alpha = {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
export const grey14Alpha = {
export const grey14Alpha: Record<AlphaColors, string> = {

?

@miroslavstastny miroslavstastny merged commit a91094d into microsoft:master Apr 1, 2022
@miroslavstastny miroslavstastny deleted the feat/update-color-tokens branch April 1, 2022 11:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update color tokens in react-theme

5 participants