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

fix: Update mappings to system tokens instead of theme tokens #1314

Merged
merged 1 commit into from
Dec 17, 2024
Merged

fix: Update mappings to system tokens instead of theme tokens #1314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 3 additions & 1 deletion app/scripts/styles/_uswds-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,7 @@
'desktop': false
),
$theme-font-type-serif: baseFontFamily,
$theme-font-type-sans: baseFontFamily
$theme-font-type-sans: baseFontFamily,
$theme-color-base-darkest: 'gray-cool-80',
$theme-color-base-ink: 'gray-cool-90'
);
14 changes: 7 additions & 7 deletions app/scripts/styles/_veda-ui-theme-vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@use 'uswds-core/src/styles/functions/units' as spacing;

/*********** VEDAUI THEME PALETTE ***********/
// These map to the veda defined styles between https://www.figma.com/design/5mclPTReHcRIzKbJm8YA6a/VEDA---USWDS?node-id=139-14&node-type=canvas&t=7Qa02mMKUgBy5Qho-0
// These references map to the veda defined styles between https://www.figma.com/design/5mclPTReHcRIzKbJm8YA6a/VEDA---USWDS?node-id=139-14&node-type=canvas&t=7Qa02mMKUgBy5Qho-0
// and uswds found at https://designsystem.digital.gov/design-tokens/

// TYPOGRAPHY
Expand All @@ -20,12 +20,12 @@ $veda-uswds-fontweight-bold: utils.font-weight('bold');
$veda-uswds-fontweight-semibold: utils.font-weight('semibold');

// COLORS
$veda-uswds-color-primary-darker: utils.color('primary-darker');
$veda-uswds-color-secondary: utils.color('secondary');
$veda-uswds-color-base-dark: utils.color('base-dark');
$veda-uswds-color-base-darkest: utils.color('base-darkest');
$veda-uswds-color-base-light: utils.color('base-light');
$veda-uswds-color-base-ink: utils.color('ink');
$veda-uswds-color-primary-darker: utils.color('blue-warm-80v');
$veda-uswds-color-secondary: utils.color('red-50');
$veda-uswds-color-base-dark: utils.color('gray-cool-60');
$veda-uswds-color-base-darkest: utils.color('gray-cool-80'); // re-mapped, theme-token 'base-darkest' originally mapped to 'gray-90'
Copy link
Member

Choose a reason for hiding this comment

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

'originally' as in 'the uswds default', right?

With the introduction of our $veda-uswds- variables we already decided leave the system, hence I agree, it does not matter what value we map that to.
Whenever we use one of the $veda-uswds- variables it indicates that we deviate from uswds, doesn't it? Do we need to keep track of what exactly the default was in the comments? 🤔
How do we make sure, that when we introduce a new USWDS component, it has the same colors etc. as the existing ones?

Just thinking out loud here.

Copy link

@faustoperez faustoperez Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Following the USWDS default (to some extent) was an intentional choice for this first template instance, but that could not be the case in the future.

I'm thinking about the earth.gov work or any customization for, let's say, the Air Quality instance.

To me, it would make sense that we override all default values for colors, typographies, etc. (even if they point the same default system values) so we don't have to keep track of the changes and have a single configuration file for each instance.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@AliceR not necessarily are we deviating from uswds, we are mostly sticking to it with just a very few looking like they are being re-mapped. This file is just us creating references to uswds tokens so we dont have to import uswds-core in each component sass file when we want to use their tokens (also nicely organized so you can see all the tokens we use from uswds in one file). if we need to overwrite a specific style in a uswds component but not across uswds components that use the same token, we can just use these vars to make that change inside that specific component's sass file like here.

When introducing a new uswds component - if they use something we have already re-mapped in the settings file, it should just get that change. Hopefully that helps answer your thoughts.

$veda-uswds-color-base-light: utils.color('gray-cool-30');
$veda-uswds-color-base-ink: utils.color('gray-cool-90'); // re-mapped, theme-token 'ink' originally mapped to 'gray-90'

// SPACING
$veda-uswds-spacing-5: spacing.units(0.5);
Expand Down
Loading