Updates style-dictionary build config to generate themes and cleans up exports. See `dist/\ folder in npm code tab to view output:
Generates themes.js file which exports a themes object that contains both dark and light themes
These themes are filtered to have all of the primitive and "mode-less" semantic tokens and the addition of any tokens with either the OnLight or OnDark mode suffixes
The OnLight/OnDark suffixes have been removed in the token names of each of the themes so that in the app, components can reference the token without the suffix, removing the need for if (isDarkMode) conditionals (i.e. Referencing theme.vadsColorFeedbackSurfaceInfo instead of Colors.vadsColorFeedbackSurfaceInfoOnLight. This will be made clearer in the follow-up PR (#361)
Moved Colors var from index.js into its own file colors.js
Updated index.js to import/export both Colors and themes
Refactor typing generations:
New types/ folder contains colors.d.ts and theme.d.ts
All types are imported/exported in index.d.ts
Add Prettier formatting that runs post build to clean up file formatting
Testing Packages
0.12.1-alpha.0
0.12.1-alpha.1
0.12.1-alpha.2
0.12.1-alpha.3
0.12.1-alpha.4
Screenshots/Video
Testing
[x] Tested on iOS
[x] Tested on Android
[x] Tested on Web
PR Checklist
Code reviewer validation:
General
[x] PR is linked to ticket(s)
[x] PR has changelog label applied if it's to be included in the changelog
[x] Acceptance criteria:
All satisfied or
Documented reason for not being performed or
Split to separate ticket and ticket is linked by relevant AC(s)
[x] Above PR sections adequately filled out
[x] If any breaking changes, in accordance with the pre-1.0.0 versioning guidelines: a CU ticket has been created for the VA Mobile App detailing necessary adjustments with the package version that will be published by this ticket
Code
[x] Tests are included if appropriate (or split to separate ticket)
Description of Change
Updates style-dictionary build config to generate themes and cleans up exports. See `dist/\ folder in npm code tab to view output:
themes.js
file which exports athemes
object that contains both dark and light themesOnLight
orOnDark
mode suffixesOnLight
/OnDark
suffixes have been removed in the token names of each of the themes so that in the app, components can reference the token without the suffix, removing the need forif (isDarkMode)
conditionals (i.e. Referencingtheme.vadsColorFeedbackSurfaceInfo
instead ofColors.vadsColorFeedbackSurfaceInfoOnLight
. This will be made clearer in the follow-up PR (#361)Colors
var fromindex.js
into its own filecolors.js
index.js
to import/export bothColors
andthemes
types/
folder containscolors.d.ts
andtheme.d.ts
index.d.ts
Testing Packages
Screenshots/Video
Testing
PR Checklist
Code reviewer validation:
changelog
label applied if it's to be included in the changelogPublish
If changes warrant a new version per the versioning guidelines and the PR is approved and ready to merge:
main
into branchmain