Skip to content
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

[Tokens] Update components to use tokens package 0.21.0. Update Storybook color docs #605

Merged
merged 4 commits into from
Dec 13, 2024
Merged

[Tokens] Update components to use tokens package 0.21.0. Update Storybook color docs #605

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f3adeff
Update to latest tokens package. Add feedback tokens to colors doc
narin Dec 9, 2024
cf7eb7f
Add uswds colors to docs
narin Dec 9, 2024
287e557
Group uswds gold under yellow
narin Dec 10, 2024
2c8c25f
Merge branch 'main' into feature/541-narin-update-to-tokens-0.21.0
narin Dec 13, 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: 2 additions & 2 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
},
"peerDependencies": {
"@department-of-veterans-affairs/mobile-assets": "^0.14.0",
"@department-of-veterans-affairs/mobile-tokens": "^0.20.0",
"@department-of-veterans-affairs/mobile-tokens": "^0.21.0",
"react": "^18.2.0",
"react-native": ">=0.71.7",
"react-native-gesture-handler": "^2.12.0",
Expand All @@ -59,7 +59,7 @@
"@babel/preset-env": "^7.24.8",
"@babel/preset-typescript": "^7.24.7",
"@department-of-veterans-affairs/mobile-assets": "0.14.0",
"@department-of-veterans-affairs/mobile-tokens": "0.20.0",
"@department-of-veterans-affairs/mobile-tokens": "0.21.0",
"@expo/metro-runtime": "~4.0.0",
"@expo/webpack-config": "~19.0.1",
"@react-native-async-storage/async-storage": "1.23.1",
Expand Down
31 changes: 30 additions & 1 deletion packages/components/storybook/colors.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,19 @@ Our color palette is organized into semantic color tokens, which have specific m
subtitle="uswdsSystemColor"
colors={{
YellowVivid80: colors.uswdsSystemColorYellowVivid80,
YellwoVivid20: colors.uswdsSystemColorYellowVivid20,
YellowVivid20: colors.uswdsSystemColorYellowVivid20,
}}
/>
</ColorPalette>

### Gold
Copy link
Contributor

@TimRoe TimRoe Dec 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I wonder if the "Gold" titled ColorItem within "Yellow" ColorPalette above should be pulled down into being paired with this one now that it's here?

Edit:
Or if this should be lumped into the Yellow section instead of having Gold at all.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Got rid of the Gold section and moved the gold uswds color under Yellow after checking with Jessica.

image


<ColorPalette>
<ColorItem
title="USWDS"
subtitle="uswdsSystemColor"
colors={{
GoldVivid40: colors.uswdsSystemColorGoldVivid40,
}}
/>
</ColorPalette>
Expand All @@ -162,6 +174,7 @@ Our color palette is organized into semantic color tokens, which have specific m
title="USWDS"
subtitle="uswdsSystemColor"
colors={{
GreenCoolVivid30: colors.uswdsSystemColorGreenCoolVivid30,
GreenCoolVivid80: colors.uswdsSystemColorGreenCoolVivid80,
}}
/>
Expand Down Expand Up @@ -451,6 +464,14 @@ Our color palette is organized into semantic color tokens, which have specific m
OnDark: colors.vadsColorFeedbackBorderSuccessOnDark,
}}
/>
<ColorItem
title="Foreground"
subtitle="vadsColorFeedbackForegroundSuccess"
colors={{
OnLight: colors.vadsColorFeedbackForegroundSuccessOnLight,
OnDark: colors.vadsColorFeedbackForegroundSuccessOnDark,
}}
/>
<ColorItem
title="Surface"
subtitle="vadsColorFeedbackSurfaceSuccess"
Expand All @@ -472,6 +493,14 @@ Our color palette is organized into semantic color tokens, which have specific m
OnDark: colors.vadsColorFeedbackBorderWarningOnDark,
}}
/>
<ColorItem
title="Foreground"
subtitle="vadsColorFeedbackForegroundWarning"
colors={{
OnLight: colors.vadsColorFeedbackForegroundWarningOnLight,
OnDark: colors.vadsColorFeedbackForegroundWarningOnDark,
}}
/>
<ColorItem
title="Surface"
subtitle="vadsColorFeedbackSurfaceWarning"
Expand Down
12 changes: 6 additions & 6 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3617,7 +3617,7 @@ __metadata:
"@babel/preset-env": "npm:^7.24.8"
"@babel/preset-typescript": "npm:^7.24.7"
"@department-of-veterans-affairs/mobile-assets": "npm:0.14.0"
"@department-of-veterans-affairs/mobile-tokens": "npm:0.20.0"
"@department-of-veterans-affairs/mobile-tokens": "npm:0.21.0"
"@expo/metro-runtime": "npm:~4.0.0"
"@expo/webpack-config": "npm:~19.0.1"
"@react-native-async-storage/async-storage": "npm:1.23.1"
Expand Down Expand Up @@ -3679,18 +3679,18 @@ __metadata:
typescript: "npm:~5.3.3"
peerDependencies:
"@department-of-veterans-affairs/mobile-assets": ^0.14.0
"@department-of-veterans-affairs/mobile-tokens": ^0.20.0
"@department-of-veterans-affairs/mobile-tokens": ^0.21.0
react: ^18.2.0
react-native: ">=0.71.7"
react-native-gesture-handler: ^2.12.0
react-native-safe-area-context: ^4.10.5
languageName: unknown
linkType: soft

"@department-of-veterans-affairs/mobile-tokens@npm:0.20.0":
version: 0.20.0
resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.20.0"
checksum: dab73c152a771b3b89ebcee1bdeb43781770c793c463a953eb507c1dc2001ee257bc54efd36b639e1b02ce1986831f112f5cb9e31fff40a8e512bdd1c0f67397
"@department-of-veterans-affairs/mobile-tokens@npm:0.21.0":
version: 0.21.0
resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.21.0"
checksum: ee67987582ab306ed012d8153ea97f2a19bcd1dd2cfd63c27f3713aefe372c3f28b078ac2e9298b6ffc415e7fb955c1b9f2e8efbace14f3df8fdf347f5e152e1
languageName: node
linkType: hard

Expand Down
Loading