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

css-library: add source-sans normalize token, rename base to root #1399

Merged
merged 6 commits into from
Nov 14, 2024
Merged

css-library: add source-sans normalize token, rename base to root #1399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3643807
css-library: add source-sans normalize token, rename base to root
powellkerry Nov 12, 2024
195cc35
remove duplicate root variable
powellkerry Nov 13, 2024
24abb26
keep base utility class
powellkerry Nov 13, 2024
506d020
revert changes to re-add base and remove vads-font-size-root variable
powellkerry Nov 13, 2024
3892788
keep font-size-base token
powellkerry Nov 13, 2024
9883387
Merge branch 'main' into 3452-update-font-tokens
powellkerry Nov 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
22 changes: 22 additions & 0 deletions packages/css-library/dist/stylesheets/utilities.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/css-library/dist/stylesheets/utilities.css.map
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions packages/css-library/dist/tokens/css/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Fri, 01 Nov 2024 17:33:49 GMT
* Generated on Wed, 13 Nov 2024 20:34:23 GMT
*/

:root {
Expand Down Expand Up @@ -120,7 +120,7 @@
--font-style-normal: normal;
--font-style-italic: italic;
--font-size-sm: 0.938rem;
--font-size-base: 1rem;
--font-size-root: 1rem;
--font-size-md: 1.063rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.875rem;
Expand All @@ -135,6 +135,8 @@
--vads-font-line-height-body-lead: 1.75;
--vads-font-line-height-default: 1.5;
--vads-font-line-height-heading: 1.2;
--vads-font-size-source-sans-normalized: 1.06rem;
--vads-font-size-root: 1rem;
Copy link
Contributor

Choose a reason for hiding this comment

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

@powellkerry @micahchiang If we're renaming font-size-base to font-size-root, then anywhere we use this token will need to be updated for the name change. If that's the case, why wouldn't we point to the newly added vads-font-size-root instead? They both have the same value/meaning, right? What are the reasons we need to have both these tokens?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was wondering about that but thought I would leave it until someone validated my thoughts :) The --vads--font-size-root should be removed now.

Copy link
Contributor

Choose a reason for hiding this comment

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

@powellkerry @danbrady - I added a comment below. We can keep the css custom property that gets generated - font-size-root - because the original, font-size-base, wasn't being used anywhere in vets-website.

--vads-font-size-body-large: 20px;
--vads-font-size-body-lead: 20px;
--vads-font-size-body-medium: 17px;
Expand Down
46 changes: 42 additions & 4 deletions packages/css-library/dist/tokens/json/variables.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2169,23 +2169,23 @@
"sm"
]
},
"base": {
"root": {
"value": "1rem",
"filePath": "tokens/fonts.json",
"isSource": true,
"original": {
"value": "1rem"
},
"name": "font-size-base",
"name": "font-size-root",
"attributes": {
"category": "font",
"type": "size",
"item": "base"
"item": "root"
},
"path": [
"font",
"size",
"base"
"root"
]
},
"md": {
Expand Down Expand Up @@ -2464,6 +2464,44 @@
}
},
"size": {
"source-sans-normalized": {
"value": "1.06rem",
"filePath": "tokens/fonts.json",
"isSource": true,
"original": {
"value": "1.06rem"
},
"name": "vads-font-size-source-sans-normalized",
"attributes": {
"category": "vads-font",
"type": "size",
"item": "source-sans-normalized"
},
"path": [
"vads-font",
"size",
"source-sans-normalized"
]
},
"root": {
"value": "1rem",
"filePath": "tokens/fonts.json",
"isSource": true,
"original": {
"value": "1rem"
},
"name": "vads-font-size-root",
"attributes": {
"category": "vads-font",
"type": "size",
"item": "root"
},
"path": [
"vads-font",
"size",
"root"
]
},
"body": {
"large": {
"value": "20px",
Expand Down
6 changes: 4 additions & 2 deletions packages/css-library/dist/tokens/scss/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Do not edit directly
// Generated on Fri, 01 Nov 2024 17:33:49 GMT
// Generated on Wed, 13 Nov 2024 20:34:23 GMT

$xsmall-screen: 320px;
$small-screen: 481px;
Expand Down Expand Up @@ -118,7 +118,7 @@ $font-weight-bold: 700;
$font-style-normal: normal;
$font-style-italic: italic;
$font-size-sm: 0.938rem;
$font-size-base: 1rem;
$font-size-root: 1rem;
$font-size-md: 1.063rem;
$font-size-lg: 1.25rem;
$font-size-xl: 1.875rem;
Expand All @@ -133,6 +133,8 @@ $v3-font-base-size: 16px;
$vads-font-line-height-body-lead: 1.75;
$vads-font-line-height-default: 1.5;
$vads-font-line-height-heading: 1.2;
$vads-font-size-source-sans-normalized: 1.06rem;
$vads-font-size-root: 1rem;
$vads-font-size-body-large: 20px;
$vads-font-size-body-lead: 20px;
$vads-font-size-body-medium: 17px;
Expand Down
3 changes: 2 additions & 1 deletion packages/css-library/src/tokens/font.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ $tokens-font-family: (
);

$tokens-font-size: (
'source-sans-normalized': $font-size-md,
'sm': $font-size-sm,
'base': $font-size-base,
'base': $vads-font-size-root,
'md': $font-size-md,
'lg': $font-size-lg,
'xl': $font-size-xl,
Expand Down
4 changes: 3 additions & 1 deletion packages/css-library/tokens/fonts.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
},
"size": {
"sm": { "value": "0.938rem" },
"base": { "value": "1rem" },
"root": { "value": "1rem" },
"md": { "value": "1.063rem" },
"lg": { "value": "1.25rem" },
"xl": { "value": "1.875rem" },
Expand All @@ -43,6 +43,8 @@
"heading": { "value": "1.2" }
},
"size": {
"source-sans-normalized": { "value": "1.06rem" },
Copy link
Contributor

Choose a reason for hiding this comment

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

@powellkerry I looked back at our original slack conversation.

Currently in this PR we're just generating a font-size-root token, given your changes above on line 21. If we want to additionally add a vads-font-size-root token, then another entry needs to be added here in the vads-font.size object, similar to what you've added above for source-sans-normalized. Adding a "root": {"value": "1rem"} entry here should generate a token named vads-font-size-root.

"root": { "value": "1rem" },
"body": {
"large": { "value": "20px" },
"lead": { "value": "20px" },
Expand Down
Loading