Skip to content

chore: update token colors in meter, illustrated message #7205

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.

Sign up for GitHub

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
yihuiliao merged 5 commits into from
Nov 6, 2024
+10 −7
Merged

chore: update token colors in meter, illustrated message #7205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d4dd814
chore: update token colors in meter, illustrated message
yihuiliao Oct 17, 2024
64cbf00
Merge branch 'main' into meter-progress-bar-tokens
yihuiliao Oct 30, 2024
b1f4b6d
illustration should have same color in IM and DropZone
yihuiliao Oct 30, 2024
2bcb551
Merge branch 'main' into meter-progress-bar-tokens
yihuiliao Oct 31, 2024
08246b3
Merge branch 'main' into meter-progress-bar-tokens
yihuiliao Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/@react-spectrum/s2/src/IllustratedMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,7 @@ const illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolea
'--iconPrimary': {
type: 'color',
value: {
// TODO: ask design about what the color should be. Says gray-800 in the designs file, neutral in token spec, but different neutral in dropzone spec
default: 'gray-800',
isInDropZone: 'gray-500', // neutral doesn't seem to match the color in designs, opted for gray-500 instead
default: 'neutral',
Copy link
Copy Markdown
Member Author

@yihuiliao yihuiliao Oct 30, 2024

Choose a reason for hiding this comment

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

according to design, the illustration should have the same color both in an IllustratedMessage and in a DropZone. the design files do not currently reflect this but there are tickets to update them

isDropTarget: 'accent'
}
}
Expand Down
8 changes: 4 additions & 4 deletions packages/@react-spectrum/s2/src/Meter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,11 @@ const fillStyles = style<MeterStyleProps>({
borderStyle: 'none',
borderRadius: 'full',
backgroundColor: {
default: 'informative',
default: 'informative-visual',
Copy link
Copy Markdown
Member Author

@yihuiliao yihuiliao Oct 30, 2024

Choose a reason for hiding this comment

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

matches what is in the design file. confirmed that the token accent-content-color-default which is listed in the token file is not correct with spectrum.

variant: {
positive: 'positive',
notice: 'notice',
negative: 'negative'
positive: 'positive-visual',
notice: 'notice-visual',
negative: 'negative-visual'
},
staticColor: {
white: {
Expand Down
5 changes: 5 additions & 0 deletions packages/@react-spectrum/s2/style/spectrum-theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,7 @@ export const style = createTheme({
isPressed: colorToken('neutral-subdued-content-color-down')
// isSelected: colorToken('neutral-subdued-content-color-selected'),
},
'neutral-visual': weirdColorToken('neutral-visual-color'),
negative: {
default: colorToken('negative-content-color-default'),
isHovered: colorToken('negative-content-color-hover'),
Expand Down Expand Up @@ -495,22 +496,26 @@ export const style = createTheme({
isFocusVisible: weirdColorToken('negative-background-color-key-focus'),
isPressed: weirdColorToken('negative-background-color-down')
},
'negative-visual': weirdColorToken('negative-visual-color'),
'negative-subtle': weirdColorToken('negative-subtle-background-color-default'),
informative: {
default: weirdColorToken('informative-background-color-default'),
isHovered: weirdColorToken('informative-background-color-hover'),
isFocusVisible: weirdColorToken('informative-background-color-key-focus'),
isPressed: weirdColorToken('informative-background-color-down')
},
'informative-visual': weirdColorToken('informative-visual-color'),
'informative-subtle': weirdColorToken('informative-subtle-background-color-default'),
positive: {
default: weirdColorToken('positive-background-color-default'),
isHovered: weirdColorToken('positive-background-color-hover'),
isFocusVisible: weirdColorToken('positive-background-color-key-focus'),
isPressed: weirdColorToken('positive-background-color-down')
},
'positive-visual': weirdColorToken('positive-visual-color'),
'positive-subtle': weirdColorToken('positive-subtle-background-color-default'),
notice: weirdColorToken('notice-background-color-default'),
'notice-visual': weirdColorToken('notice-visual-color'),
'notice-subtle': weirdColorToken('notice-subtle-background-color-default'),
gray: weirdColorToken('gray-background-color-default'),
'gray-subtle': weirdColorToken('gray-subtle-background-color-default'),
Expand Down