Skip to content

Commit

Permalink
Derive grid tokens from common spacing tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
VincentSmedinga committed Feb 15, 2024
1 parent 7c2002e commit ae983a0
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 18 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
"fluid": {
"xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },
"sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" },
"md": { "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)" },
"md": {
"value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
"comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
},
"lg": { "value": "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)" },
"xl": { "value": "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)" }
},
Expand Down
5 changes: 4 additions & 1 deletion proprietary/tokens/src/common/amsterdam/spacing.tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
"fluid": {
"xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
"sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" },
"md": { "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)" },
"md": {
"value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
"comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
},
"lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" },
"xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" }
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
{
"amsterdam": {
"grid": {
"gap": {
"value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
"comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
},
"padding-inline": {
"value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
"comment": "Equals the gap."
}
"padding-inline": { "value": "var(--amsterdam-spacing-fluid-md)" }
}
}
}
10 changes: 2 additions & 8 deletions proprietary/tokens/src/components/amsterdam/grid.tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,8 @@
"amsterdam": {
"grid": {
"column-count": { "value": "4" },
"gap": {
"value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
"comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
},
"padding-inline": {
"value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
"comment": "Equals 1.5 times the gap."
},
"gap": { "value": "var(--amsterdam-spacing-fluid-md)" },
"padding-inline": { "value": "var(--amsterdam-spacing-fluid-lg)" },
"medium": {
"column-count": { "value": "8" }
},
Expand Down

0 comments on commit ae983a0

Please sign in to comment.