From 95c877471b648c39fb13f8b9ac2f04b6ea50dc01 Mon Sep 17 00:00:00 2001 From: Drew Powers Date: Sun, 8 Dec 2024 22:08:13 -0700 Subject: [PATCH 1/3] Fix responsive issues, typography tokens --- .changeset/healthy-icons-design.md | 7 + .changeset/quiet-files-change.md | 7 + packages/parser/package.json | 1 + packages/parser/src/parse/index.ts | 4 +- packages/parser/src/parse/normalize.ts | 10 +- packages/parser/test/parse.test.ts | 52 +- .../test/fixtures/type-typography/tokens.json | 2 +- .../test/fixtures/type-typography/want.css | 2 +- .../src/components/ColorPicker.css | 6 +- packages/storybook/.storybook/global.css | 10 +- .../src/components/StickerSheet.module.css | 10 +- packages/tiles/src/Button/Button.css | 12 +- packages/tiles/src/Fieldset/Fieldset.css | 8 +- packages/tiles/src/Kbd/Kbd.css | 6 +- packages/tiles/src/OmniBar/OmniBar.css | 20 +- packages/tiles/src/Select/Select.css | 22 +- packages/tiles/src/Slider/Slider.css | 2 +- .../tiles/src/SubtleInput/SubtleInput.css | 12 +- packages/tiles/src/Switch/Switch.css | 8 +- packages/tiles/src/TokenType/TokenType.css | 8 +- packages/tiles/src/Tooltip/Tooltip.css | 10 +- packages/tiles/src/TreeGrid/TreeGrid.css | 12 +- .../EditableToken/EditableToken.module.css | 14 +- .../TokensEditor/TokensEditor.module.css | 24 +- .../components/TokensNav/TokensNav.module.css | 12 +- packages/token-lab/src/styles/global.css | 8 +- packages/token-tools/src/css/typography.ts | 17 +- packages/token-tools/test/css.test.ts | 49 ++ packages/tokens/dist/index.css | 216 ++------ packages/tokens/tokens.json | 503 ++++++------------ www/astro.config.ts | 3 + www/src/components/SearchBox.css | 21 +- www/src/components/docs-header-nav.astro | 9 +- www/src/components/docs-sidenav.astro | 11 +- www/src/components/illo/home.astro | 12 +- www/src/components/main-footer.astro | 29 +- www/src/components/main-nav.astro | 24 +- www/src/pages/index.astro | 66 ++- www/src/styles/app.css | 96 ++-- www/src/styles/docs.css | 86 +-- 40 files changed, 677 insertions(+), 754 deletions(-) create mode 100644 .changeset/healthy-icons-design.md create mode 100644 .changeset/quiet-files-change.md diff --git a/.changeset/healthy-icons-design.md b/.changeset/healthy-icons-design.md new file mode 100644 index 00000000..8a02d7ea --- /dev/null +++ b/.changeset/healthy-icons-design.md @@ -0,0 +1,7 @@ +--- +"@terrazzo/cli": patch +"@terrazzo/parser": patch +"@terrazzo/token-tools": patch +--- + +Fix incorrect parsing of typography tokens’ lineHeight when it’s a dimension value. diff --git a/.changeset/quiet-files-change.md b/.changeset/quiet-files-change.md new file mode 100644 index 00000000..8d08d3c4 --- /dev/null +++ b/.changeset/quiet-files-change.md @@ -0,0 +1,7 @@ +--- +"@terrazzo/parser": patch +"@terrazzo/cli": patch +"@terrazzo/token-tools": patch +--- + +Fix warning on parsing dimension tokens in typography tokens diff --git a/packages/parser/package.json b/packages/parser/package.json index bc45280a..0a830bd8 100644 --- a/packages/parser/package.json +++ b/packages/parser/package.json @@ -31,6 +31,7 @@ "license": "MIT", "scripts": { "build": "tsc -p tsconfig.build.json", + "dev": "pnpm run build --watch", "lint": "biome check .", "test": "vitest run" }, diff --git a/packages/parser/src/parse/index.ts b/packages/parser/src/parse/index.ts index c4d9e676..7a853f9c 100644 --- a/packages/parser/src/parse/index.ts +++ b/packages/parser/src/parse/index.ts @@ -253,7 +253,7 @@ async function parseSingle( const $typeInheritance: Record = {}; traverse(document, { enter(node, parent, path) { - if (node.type === 'Member' && node.value.type === 'Object' && node.value.members) { + if (node.type === 'Member' && node.value.type === 'Object' && node.value.members && !path.includes('$value')) { const members = getObjMembers(node.value); // keep track of $types @@ -370,7 +370,7 @@ async function parseSingle( } tokens[id] = token; - } else if (!id.includes('.$value') && members.value) { + } else if (!path.includes('.$value') && members.value) { logger.warn({ message: `Group ${id} has "value". Did you mean "$value"?`, filename, node, src }); } } diff --git a/packages/parser/src/parse/normalize.ts b/packages/parser/src/parse/normalize.ts index 600a6f5e..bdfaad58 100644 --- a/packages/parser/src/parse/normalize.ts +++ b/packages/parser/src/parse/normalize.ts @@ -168,10 +168,18 @@ export default function normalizeValue(token: T): T['$value'] { const output: TypographyValueNormalized = {}; for (const k in token.$value) { switch (k) { - case 'letterSpacing': case 'fontSize': + case 'letterSpacing': { output[k] = normalizeValue({ $type: 'dimension', $value: token.$value[k] as DimensionValue }); break; + } + case 'lineHeight': { + output[k] = normalizeValue({ + $type: typeof token.$value === 'number' ? 'number' : 'dimension', + $value: token.$value[k] as any, + }); + break; + } default: output[k] = token.$value[k]; } diff --git a/packages/parser/test/parse.test.ts b/packages/parser/test/parse.test.ts index 80420a12..f155ee4c 100644 --- a/packages/parser/test/parse.test.ts +++ b/packages/parser/test/parse.test.ts @@ -2219,7 +2219,7 @@ font: fontVariant: 'small-caps', fontWeight: 400, letterSpacing: { value: 0.125, unit: 'em' }, - lineHeight: 1.5, + lineHeight: { value: 24, unit: 'px' }, textDecoration: 'underline', textTransform: 'uppercase', }, @@ -2236,7 +2236,7 @@ font: fontVariant: 'small-caps', fontWeight: 400, letterSpacing: { value: 0.125, unit: 'em' }, - lineHeight: 1.5, + lineHeight: { value: 24, unit: 'px' }, textDecoration: 'underline', textTransform: 'uppercase', }, @@ -2244,6 +2244,54 @@ font: }, }, ], + [ + 'lineHeight: number', + { + given: [ + { + filename: DEFAULT_FILENAME, + src: { + typography: { + $type: 'typography', + $value: { + lineHeight: 1.5, + }, + }, + }, + }, + ], + want: { tokens: { typography: { lineHeight: 1.5 } } }, + }, + ], + [ + 'dimension (legacy format)', + { + given: [ + { + filename: DEFAULT_FILENAME, + src: { + typography: { + $type: 'typography', + $value: { + fontSize: '16px', + letterSpacing: '0.001em', + lineHeight: '24px', + }, + }, + }, + }, + ], + want: { + tokens: { + typography: { + fontSize: { value: 16, unit: 'px' }, + letterSpacing: { value: 0.001, unit: 'em' }, + lineHeight: { value: 24, unit: 'px' }, + }, + }, + }, + }, + ], ]; it.each(tests)('%s', (_, testCase) => runTest(testCase)); diff --git a/packages/plugin-css/test/fixtures/type-typography/tokens.json b/packages/plugin-css/test/fixtures/type-typography/tokens.json index 552a03d5..a86e6d04 100644 --- a/packages/plugin-css/test/fixtures/type-typography/tokens.json +++ b/packages/plugin-css/test/fixtures/type-typography/tokens.json @@ -23,7 +23,7 @@ "fontSize": { "value": 18, "unit": "px" }, "fontVariationSettings": "\"wght\" 130, \"opsz\" 100, \"wdth\" 50", "fontWeight": 500, - "lineHeight": 1.375, + "lineHeight": { "value": 24, "unit": "px" }, "letterSpacing": { "value": 0.25, "unit": "em" }, "textTransform": "uppercase" } diff --git a/packages/plugin-css/test/fixtures/type-typography/want.css b/packages/plugin-css/test/fixtures/type-typography/want.css index a2197c33..39e20458 100644 --- a/packages/plugin-css/test/fixtures/type-typography/want.css +++ b/packages/plugin-css/test/fixtures/type-typography/want.css @@ -16,7 +16,7 @@ --ds-typography-subheading-font-size: 18px; --ds-typography-subheading-font-variation-settings: "wght" 130, "opsz" 100, "wdth" 50; --ds-typography-subheading-font-weight: 500; - --ds-typography-subheading-line-height: 1.375; + --ds-typography-subheading-line-height: 24px; --ds-typography-subheading-letter-spacing: 0.25em; --ds-typography-subheading-text-transform: uppercase; --ds-typography-callout-font-family: var(--ds-typography-family-body); diff --git a/packages/react-color-picker/src/components/ColorPicker.css b/packages/react-color-picker/src/components/ColorPicker.css index 03d0f268..545a75ae 100644 --- a/packages/react-color-picker/src/components/ColorPicker.css +++ b/packages/react-color-picker/src/components/ColorPicker.css @@ -24,10 +24,10 @@ border-radius: var(--tz-radius-300); color: var(--tz-color-picker-input); flex: 1 0 auto; - font-family: var(--tz-typography-family-mono); - font-size: var(--tz-typography-100-regular-font-size); + font-family: var(--tz-font-mono); + font-size: var(--tz-font-label-small-font-size); font-variant-ligatures: none; - font-weight: var(--tz-typography-100-regular-font-weight); + font-weight: var(--tz-font-label-small-font-weight); height: var(--tz-space-control-m); letter-spacing: 0; line-height: var(--tz-space-control-m); diff --git a/packages/storybook/.storybook/global.css b/packages/storybook/.storybook/global.css index 3973592d..e15efc82 100644 --- a/packages/storybook/.storybook/global.css +++ b/packages/storybook/.storybook/global.css @@ -1,10 +1,8 @@ body { - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); - font-variation-settings: var( - --tz-typography-200-regular-font-variation-settings - ); - font-weight: var(--tz-typography-200-regular-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-variation-settings: var(--tz-font-body-font-variation-settings); + font-weight: var(--tz-font-body-font-weight); line-height: 1; margin: 0; } diff --git a/packages/storybook/src/components/StickerSheet.module.css b/packages/storybook/src/components/StickerSheet.module.css index cb88b9df..9a77c142 100644 --- a/packages/storybook/src/components/StickerSheet.module.css +++ b/packages/storybook/src/components/StickerSheet.module.css @@ -9,11 +9,11 @@ .th { color: var(--tz-text-secondary); - font-family: var(--tz-typography-family-mono); - font-size: var(--tz-typography-100-regular-font-size); - font-weight: var(--tz-typography-100-regular-font-weight); - letter-spacing: var(--tz-typography-100-regular-letter-spacing); - line-height: var(--tz-typography-100-regular-line-height); + font-family: var(--tz-font-mono); + font-size: var(--tz-font-label-small-font-size); + font-weight: var(--tz-font-label-small-font-weight); + letter-spacing: var(--tz-font-label-small-letter-spacing); + line-height: var(--tz-font-label-small-line-height); padding: var(--tz-space-100) var(--tz-space-200); &[scope="row"] { diff --git a/packages/tiles/src/Button/Button.css b/packages/tiles/src/Button/Button.css index 65dac836..351c9230 100644 --- a/packages/tiles/src/Button/Button.css +++ b/packages/tiles/src/Button/Button.css @@ -15,13 +15,13 @@ color: var(--tz-button-text); cursor: pointer; display: inline-flex; - font-family: var(--tz-typography-200-medium-font-family); - font-size: var(--tz-typography-200-medium-font-size); - font-weight: var(--tz-typography-200-medium-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-strong-font-size); + font-weight: var(--tz-font-body-strong-font-weight); gap: var(--tz-button-gap); height: var(--tz-button-height); justify-content: center; - letter-spacing: var(--tz-typography-200-medium-letter-spacing); + letter-spacing: var(--tz-font-body-strong-letter-spacing); line-height: 1; outline-color: transparent; outline-offset: 2px; @@ -40,8 +40,8 @@ &[data-size="s"] { --tz-button-height: var(--tz-space-control-s); - font-size: var(--tz-typography-200-medium-font-size); - letter-spacing: var(--tz-typography-200-medium-letter-spacing); + font-size: var(--tz-font-body-strong-font-size); + letter-spacing: var(--tz-font-body-strong-letter-spacing); } &[data-variant="lime"] { diff --git a/packages/tiles/src/Fieldset/Fieldset.css b/packages/tiles/src/Fieldset/Fieldset.css index 5fe3cec9..8987c0c1 100644 --- a/packages/tiles/src/Fieldset/Fieldset.css +++ b/packages/tiles/src/Fieldset/Fieldset.css @@ -9,10 +9,10 @@ .tz-fieldset-legend { color: var(--tz-text-secondary); display: flex; - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); - letter-spacing: var(--tz-typography-200-regular-letter-spacing); - line-height: var(--tz-typography-200-regular-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); margin-bottom: var(--tz-space-300); position: static; width: 100%; diff --git a/packages/tiles/src/Kbd/Kbd.css b/packages/tiles/src/Kbd/Kbd.css index aae6aecc..02a69292 100644 --- a/packages/tiles/src/Kbd/Kbd.css +++ b/packages/tiles/src/Kbd/Kbd.css @@ -6,12 +6,12 @@ color: var(--tz-text-primary); cursor: default; display: inline-flex; - font-family: var(--tz-typography-family-mono); + font-family: var(--tz-font-mono); font-size: inherit; - font-weight: var(--tz-typography-300-regular-font-weight); + font-weight: var(--tz-font-body-font-weight); height: 1.5em; justify-content: center; - letter-spacing: var(--tz-typography-300-regular-letter-spacing); + letter-spacing: var(--tz-font-body-letter-spacing); line-height: inherit; padding: 0; user-select: none; diff --git a/packages/tiles/src/OmniBar/OmniBar.css b/packages/tiles/src/OmniBar/OmniBar.css index b529ee7e..0887f33d 100644 --- a/packages/tiles/src/OmniBar/OmniBar.css +++ b/packages/tiles/src/OmniBar/OmniBar.css @@ -19,11 +19,11 @@ border: 1px solid var(--tz-omnibar-input-border); border-radius: var(--tz-radius-200); color: var(--tz-omnibar-input-text); - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); - font-weight: var(--tz-typography-200-regular-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-weight: var(--tz-font-body-font-weight); height: 2rem; - letter-spacing: var(--tz-typography-200-regular-letter-spacing); + letter-spacing: var(--tz-font-body-letter-spacing); line-height: 1; min-width: 5rem; outline: none; @@ -109,12 +109,12 @@ .tz-omnibar-resultdesc { border-bottom: 1px solid var(--tz-color-content-border); color: var(--tz-text-secondary); - font-family: var(--tz-typography-100-regular-font-family); - font-size: var(--tz-typography-100-regular-font-size); - font-style: var(--tz-typography-100-regular-font-style); - font-weight: var(--tz-typography-100-regular-font-weight); - letter-spacing: var(--tz-typography-100-regular-letter-spacing); - line-height: var(--tz-typography-100-regular-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-label-small-font-size); + font-style: var(--tz-font-label-small-font-style); + font-weight: var(--tz-font-label-small-font-weight); + letter-spacing: var(--tz-font-label-small-letter-spacing); + line-height: var(--tz-font-label-small-line-height); padding-block-end: var(--tz-space-200); padding-inline: var(--tz-space-300); } diff --git a/packages/tiles/src/Select/Select.css b/packages/tiles/src/Select/Select.css index 2f42f302..e0295b13 100644 --- a/packages/tiles/src/Select/Select.css +++ b/packages/tiles/src/Select/Select.css @@ -4,10 +4,10 @@ --tz-select-bg: var(--tz-color-base); color: var(--tz-select-text); - font-family: var(--tz-typography-300-regular-family); - font-size: var(--tz-typography-300-regular-font-size); - letter-spacing: var(--tz-typography-300-regular-letter-spacing); - line-height: var(--tz-typography-300-regular-line-height); + font-family: var(--tz-font-body-family); + font-size: var(--tz-font-body-font-size); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); position: relative; z-index: var(--tz-layer-menu); } @@ -17,10 +17,10 @@ border-radius: 3px; color: var(--tz-color-text-2); display: flex; - font-family: var(--tz-typography-300-regular-family); - font-size: var(--tz-typography-300-regular-font-size); + font-family: var(--tz-font-body-family); + font-size: var(--tz-font-body-font-size); height: var(--tz-space-control-m); - letter-spacing: var(--tz-typography-300-regular-letter-spacing); + letter-spacing: var(--tz-font-body-letter-spacing); line-height: 1; padding: 0 var(--tz-space-200); position: relative; @@ -102,13 +102,13 @@ color: var(--tz-color-text-1); cursor: pointer; display: inline-flex; - font-family: var(--tz-typography-300-regular-font-family); - font-size: var(--tz-typography-300-regular-font-size); - font-weight: var(--tz-typography-300-regular-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-weight: var(--tz-font-body-font-weight); gap: var(--tz-space-200); height: var(--tz-space-control-m); justify-content: center; - letter-spacing: var(--tz-typography-300-regular-letter-spacing); + letter-spacing: var(--tz-font-body-letter-spacing); line-height: 1; outline: 1px solid transparent; padding: 0 var(--tz-space-200); diff --git a/packages/tiles/src/Slider/Slider.css b/packages/tiles/src/Slider/Slider.css index 911d465f..ab50102e 100644 --- a/packages/tiles/src/Slider/Slider.css +++ b/packages/tiles/src/Slider/Slider.css @@ -89,7 +89,7 @@ } .tz-slider-label { - font-size: var(--tz-typography-200-regular-font-size); + font-size: var(--tz-font-body-font-size); grid-area: label; user-select: none; white-space: nowrap; diff --git a/packages/tiles/src/SubtleInput/SubtleInput.css b/packages/tiles/src/SubtleInput/SubtleInput.css index 859ff163..e01502e4 100644 --- a/packages/tiles/src/SubtleInput/SubtleInput.css +++ b/packages/tiles/src/SubtleInput/SubtleInput.css @@ -6,9 +6,9 @@ border-radius: var(--tz-radius-200); color: var(--tz-subtle-input-text); display: flex; - font-family: var(--tz-typography-family-mono); - font-size: var(--tz-typography-200-regular-font-size); - font-weight: var(--tz-typography-200-regular-font-weight); + font-family: var(--tz-font-mono); + font-size: var(--tz-font-body-font-size); + font-weight: var(--tz-font-body-font-weight); gap: var(--tz-space-200); letter-spacing: 0; outline: 1px solid var(--tz-subtle-input-border); @@ -31,10 +31,10 @@ border: none; color: inherit; flex: 1 0 auto; - font-family: var(--tz-typography-family-mono); - font-size: var(--tz-typography-200-regular-font-size); + font-family: var(--tz-font-mono); + font-size: var(--tz-font-body-font-size); font-variant-ligatures: none; - font-weight: var(--tz-typography-200-regular-font-weight); + font-weight: var(--tz-font-body-font-weight); line-height: var(--height); min-width: calc(4 * var(--height)); outline: none; diff --git a/packages/tiles/src/Switch/Switch.css b/packages/tiles/src/Switch/Switch.css index 70ebace4..fd107c5d 100644 --- a/packages/tiles/src/Switch/Switch.css +++ b/packages/tiles/src/Switch/Switch.css @@ -29,11 +29,11 @@ cursor: pointer; display: flex; flex: 1 0 auto; - font-family: var(--tz-typography-300-regular-font-family); - font-size: var(--tz-typography-300-regular-font-size); - font-weight: var(--tz-typography-300-regular-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-weight: var(--tz-font-body-font-weight); gap: var(--tz-space-300); - letter-spacing: var(--tz-typography-300-regular-letter-spacing); + letter-spacing: var(--tz-font-body-letter-spacing); line-height: 1; &::before { diff --git a/packages/tiles/src/TokenType/TokenType.css b/packages/tiles/src/TokenType/TokenType.css index 30a246ad..88aa23db 100644 --- a/packages/tiles/src/TokenType/TokenType.css +++ b/packages/tiles/src/TokenType/TokenType.css @@ -1,11 +1,11 @@ .tz-tokentype { align-items: center; display: flex; - font-family: var(--tz-typography-300-regular-font-family); - font-size: var(--tz-typography-300-regular-font-size); - font-weight: var(--tz-typography-300-regular-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-weight: var(--tz-font-body-font-weight); gap: var(--tz-space-300); - letter-spacing: var(--tz-typography-300-regular-letter-spacing); + letter-spacing: var(--tz-font-body-letter-spacing); line-height: 1; } diff --git a/packages/tiles/src/Tooltip/Tooltip.css b/packages/tiles/src/Tooltip/Tooltip.css index b6eac5c2..6b025a9f 100644 --- a/packages/tiles/src/Tooltip/Tooltip.css +++ b/packages/tiles/src/Tooltip/Tooltip.css @@ -5,11 +5,11 @@ border-radius: var(--tz-radius-2); box-shadow: var(--tz-shadow-300); color: var(--tz-text-secondary); - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); - font-weight: var(--tz-typography-200-regular-font-weight); - letter-spacing: var(--tz-typography-200-regular-letter-spacing); - line-height: var(--tz-typography-200-regular-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-weight: var(--tz-font-body-font-weight); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); padding: var(--tz-space-300); user-select: none; will-change: transform, opacity; diff --git a/packages/tiles/src/TreeGrid/TreeGrid.css b/packages/tiles/src/TreeGrid/TreeGrid.css index b3984d21..9125f284 100644 --- a/packages/tiles/src/TreeGrid/TreeGrid.css +++ b/packages/tiles/src/TreeGrid/TreeGrid.css @@ -29,12 +29,12 @@ display: flex; flex-grow: 1; flex-shrink: 1; - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); - font-variation-settings: var(--tz-typography-200-regular-font-variation-settings); - font-weight: var(--tz-typography-200-regular-font-weight); - letter-spacing: var(--tz-typography-200-regular-letter-spacing); - line-height: var(--tz-typography-200-regular-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-variation-settings: var(--tz-font-body-font-variation-settings); + font-weight: var(--tz-font-body-font-weight); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); &:focus-visible { outline: var(--tz-border-focus); diff --git a/packages/token-lab/src/components/EditableToken/EditableToken.module.css b/packages/token-lab/src/components/EditableToken/EditableToken.module.css index 386a760e..f26e82ba 100644 --- a/packages/token-lab/src/components/EditableToken/EditableToken.module.css +++ b/packages/token-lab/src/components/EditableToken/EditableToken.module.css @@ -1,16 +1,16 @@ .cell { border-bottom: var(--tz-border-3); border-right: var(--tz-border-3); - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); - font-variation-settings: var(--tz-typography-200-regular-font-variation-settings); - font-weight: var(--tz-typography-200-regular-font-weight); - letter-spacing: var(--tz-typography-200-regular-letter-spacing); - line-height: var(--tz-typography-200-regular-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-variation-settings: var(--tz-font-body-font-variation-settings); + font-weight: var(--tz-font-body-font-weight); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); padding: 0.5rem; } .code { - font-family: var(--tz-typography-family-mono); + font-family: var(--tz-font-mono); font-size: 0.75rem; } diff --git a/packages/token-lab/src/components/TokensEditor/TokensEditor.module.css b/packages/token-lab/src/components/TokensEditor/TokensEditor.module.css index 3b4d20de..3a3b2b18 100644 --- a/packages/token-lab/src/components/TokensEditor/TokensEditor.module.css +++ b/packages/token-lab/src/components/TokensEditor/TokensEditor.module.css @@ -8,12 +8,12 @@ } .groupTitle { - font-family: var(--tz-typography-400-medium-font-family); - font-size: var(--tz-typography-400-medium-font-size); - font-variation-settings: var(--tz-typography-400-medium-font-variation-settings); - font-weight: var(--tz-typography-400-medium-font-weight); - letter-spacing: var(--tz-typography-400-medium-letter-spacing); - line-height: var(--tz-typography-400-medium-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-heading-4-font-size); + font-variation-settings: var(--tz-font-heading-4-font-variation-settings); + font-weight: var(--tz-font-heading-4-font-weight); + letter-spacing: var(--tz-font-heading-4-letter-spacing); + line-height: var(--tz-font-heading-4-line-height); } .tokenGrid { @@ -27,11 +27,11 @@ .colheader { border-bottom: var(--tz-border-3); border-right: var(--tz-border-3); - font-family: var(--tz-typography-200-medium-font-family); - font-size: var(--tz-typography-200-medium-font-size); - font-variation-settings: var(--tz-typography-200-medium-font-variation-settings); - font-weight: var(--tz-typography-200-medium-font-weight); - letter-spacing: var(--tz-typography-200-medium-letter-spacing); - line-height: var(--tz-typography-200-medium-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-strong-font-size); + font-variation-settings: var(--tz-font-body-strong-font-variation-settings); + font-weight: var(--tz-font-body-strong-font-weight); + letter-spacing: var(--tz-font-body-strong-letter-spacing); + line-height: var(--tz-font-body-strong-line-height); padding: 0.5rem; } diff --git a/packages/token-lab/src/components/TokensNav/TokensNav.module.css b/packages/token-lab/src/components/TokensNav/TokensNav.module.css index 0beb2811..fae0b6b0 100644 --- a/packages/token-lab/src/components/TokensNav/TokensNav.module.css +++ b/packages/token-lab/src/components/TokensNav/TokensNav.module.css @@ -16,7 +16,7 @@ .error { background: var(--tz-color-bg-error); color: var(--tz-color-text-error); - font-family: var(--tz-typography-family-mono); + font-family: var(--tz-font-mono); font-size: 0.875rem; padding: 1rem; } @@ -29,12 +29,12 @@ border-right: 0; border-top: 0; color: var(--tz-color-text-2); - font-family: var(--tz-typography-100-regular-font-family); - font-size: var(--tz-typography-100-regular-font-size); - font-variation-settings: var(--tz-typography-100-regular-font-variation-settings); - font-weight: var(--tz-typography-100-regular-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-label-small-font-size); + font-variation-settings: var(--tz-font-label-small-font-variation-settings); + font-weight: var(--tz-font-label-small-font-weight); height: var(--search-height); - letter-spacing: var(--tz-typography-100-regular-letter-spacing); + letter-spacing: var(--tz-font-label-small-letter-spacing); line-height: var(--search-height); padding: 0; text-indent: var(--search-height); diff --git a/packages/token-lab/src/styles/global.css b/packages/token-lab/src/styles/global.css index 7d85ed49..d0e563b8 100644 --- a/packages/token-lab/src/styles/global.css +++ b/packages/token-lab/src/styles/global.css @@ -5,11 +5,11 @@ html { body { background-color: var(--tz-color-bg-1); color: var(--tz-color-text-1); - font-family: var(--tz-typography-family-sans); + font-family: var(--tz-font-sans); font-size: 100%; font-variant-numeric: tabular-nums; - font-variation-settings: var(--tz-typography-200-regular-font-variation-settings); - font-weight: var(--tz-typography-200-regular-font-weight); + font-variation-settings: var(--tz-font-body-font-variation-settings); + font-weight: var(--tz-font-body-font-weight); line-height: 1; margin: 0; } @@ -32,5 +32,5 @@ body { code, pre { - font-family: var(--tz-typography-family-monospace); + font-family: var(--tz-font-monospace); } diff --git a/packages/token-tools/src/css/typography.ts b/packages/token-tools/src/css/typography.ts index d8389353..79cd383b 100644 --- a/packages/token-tools/src/css/typography.ts +++ b/packages/token-tools/src/css/typography.ts @@ -1,14 +1,15 @@ import { kebabCase } from 'scule'; -import type { AliasValue, DimensionValue } from '../types.js'; +import type { AliasValue, DimensionValue, TypographyValue } from '../types.js'; import { transformDimensionValue } from './dimension.js'; import { transformFontFamilyValue } from './font-family.js'; import { transformFontWeightValue } from './font-weight.js'; import { type IDGenerator, defaultAliasTransform, transformCompositeAlias } from './lib.js'; +import { transformNumberValue } from './number.js'; import { transformStringValue } from './string.js'; /** Convert typography value to multiple CSS values */ export function transformTypographyValue( - value: Record, + value: TypographyValue, { aliasOf, partialAliasOf, @@ -29,8 +30,8 @@ export function transformTypographyValue( transformedValue = transformFontFamilyValue(subvalue as string[], { transformAlias }); break; } - case 'letterSpacing': - case 'fontSize': { + case 'fontSize': + case 'letterSpacing': { transformedValue = transformDimensionValue(subvalue as DimensionValue | AliasValue, { transformAlias }); break; } @@ -38,6 +39,14 @@ export function transformTypographyValue( transformedValue = transformFontWeightValue(subvalue as string, { transformAlias }); break; } + case 'lineHeight': { + if (typeof subvalue === 'number') { + transformedValue = transformNumberValue(subvalue as number, { transformAlias }); + } else { + transformedValue = transformDimensionValue(subvalue as DimensionValue | AliasValue, { transformAlias }); + } + break; + } default: { transformedValue = transformStringValue(subvalue as string, { transformAlias }); break; diff --git a/packages/token-tools/test/css.test.ts b/packages/token-tools/test/css.test.ts index 60278b55..e1aef974 100644 --- a/packages/token-tools/test/css.test.ts +++ b/packages/token-tools/test/css.test.ts @@ -10,6 +10,7 @@ import { transformGradientValue, transformNumberValue, transformShadowValue, + transformTypographyValue, } from '../src/css/index.js'; type Test = [ @@ -262,3 +263,51 @@ describe('transformShadowValue', () => { expect(result).toEqual(want.success); }); }); + +describe('transformTypography', () => { + const tests: Test, ReturnType>[] = [ + [ + 'basic', + { + given: [ + { + fontFamily: ['Helvetica'], + fontSize: { value: 16, unit: 'px' }, + fontStyle: 'italic', + fontVariant: 'small-caps', + fontVariationSettings: '"wght" 600', + fontWeight: 400, + letterSpacing: { value: 0.125, unit: 'em' }, + lineHeight: { value: 24, unit: 'px' }, + textDecoration: 'underline', + textTransform: 'uppercase', + }, + ], + want: { + success: { + 'font-family': '"Helvetica"', + 'font-size': '16px', + 'font-style': 'italic', + 'font-variant': 'small-caps', + 'font-variation-settings': '"wght" 600', + 'font-weight': '400', + 'letter-spacing': '0.125em', + 'line-height': '24px', + 'text-decoration': 'underline', + 'text-transform': 'uppercase', + }, + }, + }, + ], + ]; + + it.each(tests)('%s', (_, { given, want }) => { + let result: typeof want.success; + try { + result = transformTypographyValue(...given); + } catch (err) { + expect((err as Error).message).toBe(want.error); + } + expect(result).toEqual(want.success); + }); +}); diff --git a/packages/tokens/dist/index.css b/packages/tokens/dist/index.css index 0c3252a5..6234f8ba 100644 --- a/packages/tokens/dist/index.css +++ b/packages/tokens/dist/index.css @@ -63,6 +63,64 @@ --tz-border-2: 1px solid var(--tz-color-border-2); --tz-border-3: 1px solid var(--tz-color-border-3); --tz-border-focus: 2px solid var(--tz-color-border-focus); + --tz-font-sans: "Instrument Sans", system-ui, -apple-system, "Aptos", "Helvetica Neue", "Helvetica", "Arial", "Noto Sans", sans-serif, "Helvetica", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; + --tz-font-mono: "Fragment Mono", ui-monospace, monospace; + --tz-font-body-font-family: var(--tz-font-sans); + --tz-font-body-font-variation-settings: "wght" 400; + --tz-font-body-font-weight: 400; + --tz-font-body-font-size: 0.875rem; + --tz-font-body-line-height: 1.4375; + --tz-font-body-strong-font-family: var(--tz-font-sans); + --tz-font-body-strong-font-variation-settings: "wght" 500; + --tz-font-body-strong-font-weight: 400; + --tz-font-body-strong-font-size: 0.875rem; + --tz-font-body-strong-line-height: 1.4375; + --tz-font-body-longform-font-family: var(--tz-font-sans); + --tz-font-body-longform-font-variation-settings: "wght" 400; + --tz-font-body-longform-font-weight: 400; + --tz-font-body-longform-font-size: 1.125rem; + --tz-font-body-longform-line-height: 1.4375; + --tz-font-body-longform-letter-spacing: -0.0025em; + --tz-font-label-small-font-family: var(--tz-font-sans); + --tz-font-label-small-font-variation-settings: "wght" 500; + --tz-font-label-small-font-weight: 400; + --tz-font-label-small-font-size: 0.75rem; + --tz-font-label-small-line-height: 1.25; + --tz-font-label-small-letter-spacing: 0.0025rem; + --tz-font-heading-1-font-family: var(--tz-font-sans); + --tz-font-heading-1-font-variation-settings: "wght" 600; + --tz-font-heading-1-font-weight: 400; + --tz-font-heading-1-font-size: 1.75rem; + --tz-font-heading-1-line-height: 1.5; + --tz-font-heading-1-letter-spacing: -0.0075rem; + --tz-font-heading-2-font-family: var(--tz-font-sans); + --tz-font-heading-2-font-variation-settings: "wght" 600; + --tz-font-heading-2-font-weight: 400; + --tz-font-heading-2-font-size: 1.5rem; + --tz-font-heading-2-line-height: 1.875rem; + --tz-font-heading-2-letter-spacing: -0.00625rem; + --tz-font-heading-3-font-family: var(--tz-font-sans); + --tz-font-heading-3-font-variation-settings: "wght" 500; + --tz-font-heading-3-font-weight: 400; + --tz-font-heading-3-font-size: 1.25rem; + --tz-font-heading-3-line-height: 1.4; + --tz-font-heading-3-letter-spacing: -0.005rem; + --tz-font-heading-4-font-family: var(--tz-font-sans); + --tz-font-heading-4-font-variation-settings: "wght" 500; + --tz-font-heading-4-font-weight: 400; + --tz-font-heading-4-font-size: 1.125rem; + --tz-font-heading-4-line-height: 1.4375; + --tz-font-heading-4-letter-spacing: -0.0025rem; + --tz-font-heading-5-font-family: var(--tz-font-sans); + --tz-font-heading-5-font-variation-settings: "wght" 500; + --tz-font-heading-5-font-weight: 400; + --tz-font-heading-5-font-size: 1rem; + --tz-font-heading-5-line-height: 1.4375; + --tz-font-heading-6-font-family: var(--tz-font-body-strong-font-family); + --tz-font-heading-6-font-variation-settings: var(--tz-font-body-strong-font-variation-settings); + --tz-font-heading-6-font-weight: var(--tz-font-body-strong-font-weight); + --tz-font-heading-6-font-size: var(--tz-font-body-strong-font-size); + --tz-font-heading-6-line-height: var(--tz-font-body-strong-line-height); --tz-ease-linear: cubic-bezier(0, 0, 1, 1); --tz-ease-quint-out: cubic-bezier(0.22, 1, 0.36, 1); --tz-ease-quint-in: cubic-bezier(0.64, 0, 0.78, 0); @@ -81,164 +139,6 @@ --tz-timing-moderate: 225ms; --tz-timing-deliberate: 500ms; --tz-timing-slow: 1000ms; - --tz-typography-family-sans: "Instrument Sans", system-ui, -apple-system, "Aptos", "Helvetica Neue", "Helvetica", "Arial", "Noto Sans", sans-serif, "Helvetica", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; - --tz-typography-family-mono: "Fragment Mono", ui-monospace, monospace; - --tz-typography-100-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-100-regular-font-variation-settings: "wght" 400; - --tz-typography-100-regular-font-weight: 400; - --tz-typography-100-regular-font-size: 0.75rem; - --tz-typography-100-regular-line-height: 1.25; - --tz-typography-100-regular-letter-spacing: 0.0024999999rem; - --tz-typography-100-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-100-medium-font-variation-settings: "wght" 500; - --tz-typography-100-medium-font-weight: 400; - --tz-typography-100-medium-font-size: 0.75rem; - --tz-typography-100-medium-line-height: 1.25; - --tz-typography-100-medium-letter-spacing: 0.0024999999rem; - --tz-typography-100-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-100-bold-font-variation-settings: "wght" 600; - --tz-typography-100-bold-font-weight: 400; - --tz-typography-100-bold-font-size: 0.75rem; - --tz-typography-100-bold-line-height: 1.25; - --tz-typography-100-bold-letter-spacing: 0.0024999999rem; - --tz-typography-200-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-200-regular-font-variation-settings: "wght" 400; - --tz-typography-200-regular-font-weight: 400; - --tz-typography-200-regular-font-size: 0.875rem; - --tz-typography-200-regular-line-height: 1.4375; - --tz-typography-200-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-200-medium-font-variation-settings: "wght" 500; - --tz-typography-200-medium-font-weight: 400; - --tz-typography-200-medium-font-size: 0.875rem; - --tz-typography-200-medium-line-height: 1.4375; - --tz-typography-200-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-200-bold-font-variation-settings: "wght" 600; - --tz-typography-200-bold-font-weight: 400; - --tz-typography-200-bold-font-size: 0.875rem; - --tz-typography-200-bold-line-height: 1.4375; - --tz-typography-300-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-300-regular-font-variation-settings: "wght" 400; - --tz-typography-300-regular-font-weight: 400; - --tz-typography-300-regular-font-size: 1rem; - --tz-typography-300-regular-line-height: 1.5; - --tz-typography-300-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-300-medium-font-variation-settings: "wght" 500; - --tz-typography-300-medium-font-weight: 400; - --tz-typography-300-medium-font-size: 1rem; - --tz-typography-300-medium-line-height: 1.5; - --tz-typography-300-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-300-bold-font-variation-settings: "wght" 600; - --tz-typography-300-bold-font-weight: 400; - --tz-typography-300-bold-font-size: 1rem; - --tz-typography-300-bold-line-height: 1.5; - --tz-typography-400-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-400-regular-font-variation-settings: "wght" 400; - --tz-typography-400-regular-font-weight: 400; - --tz-typography-400-regular-font-size: 1.125rem; - --tz-typography-400-regular-line-height: 1.4375; - --tz-typography-400-regular-letter-spacing: -0.0024999999rem; - --tz-typography-400-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-400-medium-font-variation-settings: "wght" 500; - --tz-typography-400-medium-font-weight: 400; - --tz-typography-400-medium-font-size: 1.125rem; - --tz-typography-400-medium-line-height: 1.4375; - --tz-typography-400-medium-letter-spacing: -0.0024999999rem; - --tz-typography-400-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-400-bold-font-variation-settings: "wght" 600; - --tz-typography-400-bold-font-weight: 400; - --tz-typography-400-bold-font-size: 1.125rem; - --tz-typography-400-bold-line-height: 1.4375; - --tz-typography-400-bold-letter-spacing: -0.0024999999rem; - --tz-typography-500-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-500-regular-font-variation-settings: "wght" 400; - --tz-typography-500-regular-font-weight: 400; - --tz-typography-500-regular-font-size: 1.25rem; - --tz-typography-500-regular-line-height: 1.4; - --tz-typography-500-regular-letter-spacing: -0.0049999999rem; - --tz-typography-500-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-500-medium-font-variation-settings: "wght" 500; - --tz-typography-500-medium-font-weight: 400; - --tz-typography-500-medium-font-size: 1.25rem; - --tz-typography-500-medium-line-height: 1.4; - --tz-typography-500-medium-letter-spacing: -0.0049999999rem; - --tz-typography-500-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-500-bold-font-variation-settings: "wght" 600; - --tz-typography-500-bold-font-weight: 400; - --tz-typography-500-bold-font-size: 1.25rem; - --tz-typography-500-bold-line-height: 1.4; - --tz-typography-500-bold-letter-spacing: -0.0049999999rem; - --tz-typography-600-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-600-regular-font-variation-settings: "wght" 400; - --tz-typography-600-regular-font-weight: 400; - --tz-typography-600-regular-font-size: 1.5rem; - --tz-typography-600-regular-line-height: 1.875rem; - --tz-typography-600-regular-letter-spacing: -0.0062500001rem; - --tz-typography-600-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-600-medium-font-variation-settings: "wght" 500; - --tz-typography-600-medium-font-weight: 400; - --tz-typography-600-medium-font-size: 1.5rem; - --tz-typography-600-medium-line-height: 1.875rem; - --tz-typography-600-medium-letter-spacing: -0.0062500001rem; - --tz-typography-600-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-600-bold-font-variation-settings: "wght" 600; - --tz-typography-600-bold-font-weight: 400; - --tz-typography-600-bold-font-size: 1.5rem; - --tz-typography-600-bold-line-height: 1.875rem; - --tz-typography-600-bold-letter-spacing: -0.0062500001rem; - --tz-typography-700-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-700-regular-font-variation-settings: "wght" 400; - --tz-typography-700-regular-font-weight: 400; - --tz-typography-700-regular-font-size: 1.75rem; - --tz-typography-700-regular-line-height: 1.5; - --tz-typography-700-regular-letter-spacing: -0.0074999998rem; - --tz-typography-700-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-700-medium-font-variation-settings: "wght" 500; - --tz-typography-700-medium-font-weight: 400; - --tz-typography-700-medium-font-size: 1.75rem; - --tz-typography-700-medium-line-height: 1.5; - --tz-typography-700-medium-letter-spacing: -0.0074999998rem; - --tz-typography-700-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-700-bold-font-variation-settings: "wght" 600; - --tz-typography-700-bold-font-weight: 400; - --tz-typography-700-bold-font-size: 1.75rem; - --tz-typography-700-bold-line-height: 1.5; - --tz-typography-700-bold-letter-spacing: -0.0074999998rem; - --tz-typography-800-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-800-regular-font-variation-settings: "wght" 400; - --tz-typography-800-regular-font-weight: 400; - --tz-typography-800-regular-font-size: 2.1875rem; - --tz-typography-800-regular-line-height: 2.5; - --tz-typography-800-regular-letter-spacing: -0.0099999998rem; - --tz-typography-800-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-800-medium-font-variation-settings: "wght" 500; - --tz-typography-800-medium-font-weight: 400; - --tz-typography-800-medium-font-size: 2.1875rem; - --tz-typography-800-medium-line-height: 2.5; - --tz-typography-800-medium-letter-spacing: -0.0099999998rem; - --tz-typography-800-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-800-bold-font-variation-settings: "wght" 600; - --tz-typography-800-bold-font-weight: 400; - --tz-typography-800-bold-font-size: 2.1875rem; - --tz-typography-800-bold-line-height: 2.5; - --tz-typography-800-bold-letter-spacing: -0.0099999998rem; - --tz-typography-900-regular-font-family: var(--tz-typography-family-sans); - --tz-typography-900-regular-font-variation-settings: "wght" 400; - --tz-typography-900-regular-font-weight: 400; - --tz-typography-900-regular-font-size: 3.75rem; - --tz-typography-900-regular-line-height: 1; - --tz-typography-900-regular-letter-spacing: -0.0250000004rem; - --tz-typography-900-medium-font-family: var(--tz-typography-family-sans); - --tz-typography-900-medium-font-variation-settings: "wght" 500; - --tz-typography-900-medium-font-weight: 400; - --tz-typography-900-medium-font-size: 3.75rem; - --tz-typography-900-medium-line-height: 1; - --tz-typography-900-medium-letter-spacing: -0.0250000004rem; - --tz-typography-900-bold-font-family: var(--tz-typography-family-sans); - --tz-typography-900-bold-font-variation-settings: "wght" 600; - --tz-typography-900-bold-font-weight: 400; - --tz-typography-900-bold-font-size: 3.75rem; - --tz-typography-900-bold-line-height: 1; - --tz-typography-900-bold-letter-spacing: -0.0250000004rem; --tz-layer-base: 10; --tz-layer-tooltip: 20; --tz-layer-nav: 30; diff --git a/packages/tokens/tokens.json b/packages/tokens/tokens.json index 73d350c3..344244dc 100644 --- a/packages/tokens/tokens.json +++ b/packages/tokens/tokens.json @@ -123,10 +123,147 @@ }, "border": { "$type": "border", - "1": { "$value": { "width": "1px", "style": "solid", "color": "{color.border.1}" } }, - "2": { "$value": { "width": "1px", "style": "solid", "color": "{color.border.2}" } }, - "3": { "$value": { "width": "1px", "style": "solid", "color": "{color.border.3}" } }, - "focus": { "$value": { "width": "2px", "style": "solid", "color": "{color.border.focus}" } } + "1": { + "$value": { + "width": { "value": 1, "unit": "px" }, + "style": "solid", + "color": "{color.border.1}" + } + }, + "2": { + "$value": { + "width": { "value": 1, "unit": "px" }, + "style": "solid", + "color": "{color.border.2}" + } + }, + "3": { + "$value": { + "width": { "value": 1, "unit": "px" }, + "style": "solid", + "color": "{color.border.3}" + } + }, + "focus": { + "$value": { + "width": { "value": 2, "unit": "px" }, + "style": "solid", + "color": "{color.border.focus}" + } + } + }, + "font": { + "$type": "typography", + "sans": { + "$type": "fontFamily", + "$value": [ + "Instrument Sans", + "system-ui", + "-apple-system", + "Aptos", + "Helvetica Neue", + "Helvetica", + "Arial", + "Noto Sans", + "sans-serif", + "Helvetica", + "Apple Color Emoji", + "Segoe UI Emoji", + "Noto Color Emoji" + ] + }, + "mono": { + "$type": "fontFamily", + "$value": ["Fragment Mono", "ui-monospace", "monospace"] + }, + "body": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 400", + "fontWeight": 400, + "fontSize": { "value": 0.875, "unit": "rem" }, + "lineHeight": 1.4375 + } + }, + "bodyStrong": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 500", + "fontWeight": 400, + "fontSize": { "value": 0.875, "unit": "rem" }, + "lineHeight": 1.4375 + } + }, + "bodyLongform": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 400", + "fontWeight": 400, + "fontSize": { "value": 1.125, "unit": "rem" }, + "lineHeight": 1.4375, + "letterSpacing": "-0.0025em" + } + }, + "labelSmall": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 500", + "fontWeight": 400, + "fontSize": { "value": 0.75, "unit": "rem" }, + "lineHeight": 1.25, + "letterSpacing": { "value": 0.0025, "unit": "rem" } + } + }, + "heading1": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 600", + "fontWeight": 400, + "fontSize": { "value": 1.75, "unit": "rem" }, + "lineHeight": 1.5, + "letterSpacing": { "value": -0.0075, "unit": "rem" } + } + }, + "heading2": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 600", + "fontWeight": 400, + "fontSize": { "value": 1.5, "unit": "rem" }, + "lineHeight": { "value": 1.875, "unit": "rem" }, + "letterSpacing": { "value": -0.00625, "unit": "rem" } + } + }, + "heading3": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 500", + "fontWeight": 400, + "fontSize": { "value": 1.25, "unit": "rem" }, + "lineHeight": 1.4, + "letterSpacing": { "value": -0.005, "unit": "rem" } + } + }, + "heading4": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 500", + "fontWeight": 400, + "fontSize": { "value": 1.125, "unit": "rem" }, + "lineHeight": 1.4375, + "letterSpacing": { "value": -0.0025, "unit": "rem" } + } + }, + "heading5": { + "$value": { + "fontFamily": "{font.sans}", + "fontVariationSettings": "\"wght\" 500", + "fontWeight": 400, + "fontSize": { "value": 1, "unit": "rem" }, + "lineHeight": 1.4375 + } + }, + "heading6": { "$value": "{font.bodyStrong}" } }, "ease": { "$type": "cubicBezier", @@ -137,21 +274,33 @@ }, "radius": { "$type": "dimension", - "000": { "$value": "1px" }, - "100": { "$value": "0.125rem" }, - "200": { "$value": "0.25rem" }, - "300": { "$value": "6px" }, - "400": { "$value": "0.5rem" }, - "500": { "$value": "0.75rem" }, - "1000": { "$value": "999px" } + "000": { "$value": { "value": 1, "unit": "px" } }, + "100": { "$value": { "value": 0.125, "unit": "rem" } }, + "200": { "$value": { "value": 0.25, "unit": "rem" } }, + "300": { "$value": { "value": 6, "unit": "px" } }, + "400": { "$value": { "value": 0.5, "unit": "rem" } }, + "500": { "$value": { "value": 0.75, "unit": "rem" } }, + "1000": { "$value": { "value": 999, "unit": "px" } } }, "shadow": { "$type": "shadow", "100": { - "$value": { "offsetX": 0, "offsetY": "1px", "blur": "1px", "spread": 0, "color": "color(srgb 0 0 0 / 0.10)" } + "$value": { + "offsetX": 0, + "offsetY": { "value": 1, "unit": "px" }, + "blur": { "value": 1, "unit": "px" }, + "spread": 0, + "color": "color(srgb 0 0 0 / 0.10)" + } }, "300": { - "$value": { "offsetX": 0, "offsetY": "0.5rem", "blur": "1rem", "spread": 0, "color": "color(srgb 0 0 0 / 0.10)" } + "$value": { + "offsetX": 0, + "offsetY": { "value": 0.5, "unit": "rem" }, + "blur": { "value": 1, "unit": "rem" }, + "spread": 0, + "color": "color(srgb 0 0 0 / 0.10)" + } } }, "timing": { @@ -162,312 +311,6 @@ "deliberate": { "$value": "500ms" }, "slow": { "$value": "1000ms" } }, - "typography": { - "$type": "typography", - "family": { - "$type": "fontFamily", - "sans": { - "$value": [ - "Instrument Sans", - "system-ui", - "-apple-system", - "Aptos", - "Helvetica Neue", - "Helvetica", - "Arial", - "Noto Sans", - "sans-serif", - "Helvetica", - "Apple Color Emoji", - "Segoe UI Emoji", - "Noto Color Emoji" - ] - }, - "mono": { "$value": ["Fragment Mono", "ui-monospace", "monospace"] } - }, - "100": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "0.75rem", - "lineHeight": 1.25, - "letterSpacing": "0.0024999999rem" - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "0.75rem", - "lineHeight": 1.25, - "letterSpacing": "0.0024999999rem" - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "0.75rem", - "lineHeight": 1.25, - "letterSpacing": "0.0024999999rem" - } - } - }, - "200": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "0.875rem", - "lineHeight": 1.4375 - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "0.875rem", - "lineHeight": 1.4375 - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "0.875rem", - "lineHeight": 1.4375 - } - } - }, - "300": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "1rem", - "lineHeight": 1.5 - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "1rem", - "lineHeight": 1.5 - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "1rem", - "lineHeight": 1.5 - } - } - }, - "400": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "1.125rem", - "lineHeight": 1.4375, - "letterSpacing": "-0.0024999999rem" - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "1.125rem", - "lineHeight": 1.4375, - "letterSpacing": "-0.0024999999rem" - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "1.125rem", - "lineHeight": 1.4375, - "letterSpacing": "-0.0024999999rem" - } - } - }, - "500": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "1.25rem", - "lineHeight": 1.4, - "letterSpacing": "-0.0049999999rem" - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "1.25rem", - "lineHeight": 1.4, - "letterSpacing": "-0.0049999999rem" - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "1.25rem", - "lineHeight": 1.4, - "letterSpacing": "-0.0049999999rem" - } - } - }, - "600": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "1.5rem", - "lineHeight": "1.875rem", - "letterSpacing": "-0.0062500001rem" - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "1.5rem", - "lineHeight": "1.875rem", - "letterSpacing": "-0.0062500001rem" - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "1.5rem", - "lineHeight": "1.875rem", - "letterSpacing": "-0.0062500001rem" - } - } - }, - "700": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "1.75rem", - "lineHeight": 1.5, - "letterSpacing": "-0.0074999998rem" - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "1.75rem", - "lineHeight": 1.5, - "letterSpacing": "-0.0074999998rem" - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "1.75rem", - "lineHeight": 1.5, - "letterSpacing": "-0.0074999998rem" - } - } - }, - "800": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "2.1875rem", - "lineHeight": 2.5, - "letterSpacing": "-0.0099999998rem" - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "2.1875rem", - "lineHeight": 2.5, - "letterSpacing": "-0.0099999998rem" - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "2.1875rem", - "lineHeight": 2.5, - "letterSpacing": "-0.0099999998rem" - } - } - }, - "900": { - "regular": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 400", - "fontWeight": 400, - "fontSize": "3.75rem", - "lineHeight": 1, - "letterSpacing": "-0.0250000004rem" - } - }, - "medium": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 500", - "fontWeight": 400, - "fontSize": "3.75rem", - "lineHeight": 1, - "letterSpacing": "-0.0250000004rem" - } - }, - "bold": { - "$value": { - "fontFamily": "{typography.family.sans}", - "fontVariationSettings": "\"wght\" 600", - "fontWeight": 400, - "fontSize": "3.75rem", - "lineHeight": 1, - "letterSpacing": "-0.0250000004rem" - } - } - } - }, "layer": { "$type": "number", "base": { "$value": 10 }, @@ -479,17 +322,17 @@ }, "space": { "$type": "dimension", - "000": { "$value": "0.125rem" }, - "100": { "$value": "0.25rem" }, - "200": { "$value": "0.5rem" }, - "300": { "$value": "0.75rem" }, - "400": { "$value": "1rem" }, - "500": { "$value": "1.5rem" }, - "600": { "$value": "2rem" }, - "700": { "$value": "2.5rem" }, - "800": { "$value": "3rem" }, - "900": { "$value": "4rem" }, - "control-s": { "$value": "1.75rem" }, + "000": { "$value": { "value": 0.125, "unit": "rem" } }, + "100": { "$value": { "value": 0.25, "unit": "rem" } }, + "200": { "$value": { "value": 0.5, "unit": "rem" } }, + "300": { "$value": { "value": 0.75, "unit": "rem" } }, + "400": { "$value": { "value": 1, "unit": "rem" } }, + "500": { "$value": { "value": 1.5, "unit": "rem" } }, + "600": { "$value": { "value": 2, "unit": "rem" } }, + "700": { "$value": { "value": 2.5, "unit": "rem" } }, + "800": { "$value": { "value": 3, "unit": "rem" } }, + "900": { "$value": { "value": 4, "unit": "rem" } }, + "control-s": { "$value": { "value": 1.75, "unit": "rem" } }, "control-m": { "$value": "{space.600}" } } } diff --git a/www/astro.config.ts b/www/astro.config.ts index 1eb3d00f..b38736ae 100644 --- a/www/astro.config.ts +++ b/www/astro.config.ts @@ -11,6 +11,9 @@ import remarkVitepress from './src/plugins/remark-vitepress.js'; export default defineConfig({ integrations: [react(), mdx()], site: 'https://terrazzo.app', + devToolbar: { + enabled: false, + }, markdown: { shikiConfig: { theme: 'ayu-dark', diff --git a/www/src/components/SearchBox.css b/www/src/components/SearchBox.css index 21dc0c4d..5f6a91cd 100644 --- a/www/src/components/SearchBox.css +++ b/www/src/components/SearchBox.css @@ -21,11 +21,12 @@ .tz-searchbox-result-title { color: var(--tz-color-content-text); display: block; - font-family: var(--tz-typography-300-medium-font-family); - font-size: var(--tz-typography-300-medium-font-size); - font-weight: var(--tz-typography-300-medium-font-weight); - letter-spacing: var(--tz-typography-300-medium-letter-spacing); - line-height: var(--tz-typography-300-medium-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-strong-font-size); + font-variation-settings: var(--tz-font-body-strong-font-variation-settings); + font-weight: var(--tz-font-body-strong-font-weight); + letter-spacing: var(--tz-font-body-strong-letter-spacing); + line-height: var(--tz-font-body-strong-line-height); text-overflow: ellipsis; white-space: nowrap; width: 100%; @@ -34,11 +35,11 @@ .tz-searchbox-result-desc { color: var(--tz-color-content-text-aside); display: block; - font-family: var(--tz-typography-100-regular-font-family); - font-size: var(--tz-typography-100-regular-font-size); - font-weight: var(--tz-typography-100-regular-font-weight); - letter-spacing: var(--tz-typography-100-regular-letter-spacing); - line-height: var(--tz-typography-100-regular-line-height); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-label-small-font-size); + font-weight: var(--tz-font-label-small-font-weight); + letter-spacing: var(--tz-font-label-small-letter-spacing); + line-height: var(--tz-font-label-small-line-height); text-overflow: ellipsis; white-space: nowrap; width: 100%; diff --git a/www/src/components/docs-header-nav.astro b/www/src/components/docs-header-nav.astro index 57bc75a4..71647f7e 100644 --- a/www/src/components/docs-header-nav.astro +++ b/www/src/components/docs-header-nav.astro @@ -72,8 +72,9 @@ import ThemeSwitcher from './ThemeSwitcher.tsx'; a { align-items: center; display: flex; - font-size: var(--tz-typography-300-regular-font-size); - font-weight: var(--tz-typography-300-regular-font-weight); + font-size: var(--tz-font-body-font-size); + font-weight: var(--tz-font-body-font-weight); + font-variation-settings: var(--tz-font-body-font-variation-settings); gap: var(--tz-space-200); height: var(--tz-space-900); line-height: 1; @@ -82,7 +83,9 @@ import ThemeSwitcher from './ThemeSwitcher.tsx'; &[aria-current] { color: var(--tz-color-control-text-selected); - font-weight: var(--tz-typography-300-medium-font-weight); + font-variation-settings: var( + --tz-font-body-strong-font-variation-settings + ); } svg { diff --git a/www/src/components/docs-sidenav.astro b/www/src/components/docs-sidenav.astro index 8c66c8e5..2170a32e 100644 --- a/www/src/components/docs-sidenav.astro +++ b/www/src/components/docs-sidenav.astro @@ -173,9 +173,10 @@ const NAV_ITEMS = [ .section-title { color: var(--tz-color-text-2); - font-size: var(--tz-typography-300-medium-font-size); - font-weight: var(--tz-typography-300-medium-font-weight); - line-height: var(--tz-typography-300-medium-line-height); + font-size: var(--tz-font-body-font-size); + font-variation-settings: var(--tz-font-body-variation-settings); + font-weight: var(--tz-font-body-font-weight); + line-height: var(--tz-font-body-line-height); margin: 0 var(--grid) var(--tz-space-200); } @@ -184,7 +185,7 @@ const NAV_ITEMS = [ align-items: center; color: var(--tz-color-text-1); display: flex; - font-size: var(--tz-typography-200-regular-font-size); + font-size: var(--tz-font-body-font-size); height: var(--tz-space-control-s); text-decoration: none; padding-inline: var(--grid); @@ -221,7 +222,7 @@ const NAV_ITEMS = [ } .nav-sublink { - font-size: var(--tz-typography-200-regular-font-size); + font-size: var(--tz-font-body-font-size); opacity: 0.8; padding-inline-start: var(--grid); diff --git a/www/src/components/illo/home.astro b/www/src/components/illo/home.astro index f10b4de2..c73a024f 100644 --- a/www/src/components/illo/home.astro +++ b/www/src/components/illo/home.astro @@ -37,9 +37,9 @@ import Tri from '../tri.astro'; background-color: var(--tz-color-base-orange-600); border: 2px solid var(--tz-color-base-blue-600); height: calc(3 * var(--grid-size)); - left: 0; + left: calc(1 * var(--grid-size)); position: absolute; - top: 0; + top: calc(1 * var(--grid-size)); width: calc(5 * var(--grid-size)); } @@ -79,9 +79,9 @@ import Tri from '../tri.astro'; .square { background: var(--tz-color-base-blue-800); height: calc(4 * var(--grid-size)); - left: calc(2 * var(--grid-size)); + left: calc(3 * var(--grid-size)); position: absolute; - top: calc(1 * var(--grid-size)); + top: calc(2 * var(--grid-size)); width: calc(4 * var(--grid-size)); } @@ -90,8 +90,8 @@ import Tri from '../tri.astro'; border-radius: 50%; height: calc(3 * var(--grid-size)); position: absolute; - right: calc(2 * var(--grid-size)); - top: 0; + right: calc(3 * var(--grid-size)); + top: calc(1 * var(--grid-size)); width: calc(3 * var(--grid-size)); } diff --git a/www/src/components/main-footer.astro b/www/src/components/main-footer.astro index 87a6fed7..6cde7d6c 100644 --- a/www/src/components/main-footer.astro +++ b/www/src/components/main-footer.astro @@ -1,5 +1,5 @@ --- -import { GitHubLogo } from '@terrazzo/icons'; +import { DiscordLogo, GitHubLogo } from '@terrazzo/icons'; import Terrazzo from './terrazzo.astro'; --- @@ -42,6 +42,14 @@ import Terrazzo from './terrazzo.astro'; aria-label="Terrazzo on GitHub"> +
  • + +
    • @@ -75,7 +83,7 @@ import Terrazzo from './terrazzo.astro'; .cat { color: var(--tz-color-text-3); - font-size: var(--tz-typography-200-regular-font-size); + font-size: var(--tz-font-body-font-size); list-style: none; margin-block: 1.5rem; margin-inline: 0; @@ -92,22 +100,23 @@ import Terrazzo from './terrazzo.astro'; } li { - font-size: var(--tz-typography-200-regular-font-size); + font-size: var(--tz-font-body-font-size); margin-block: 0.5rem; } } .cat-heading { - font-family: var(--tz-typography-family-mono); - font-size: var(--tz-typography-200-regular-font-size); - font-weight: var(--tz-typography-200-regular-font-weight); + font-family: var(--tz-font-mono); + font-size: var(--tz-font-body-font-size); + font-weight: var(--tz-font-body-font-weight); letter-spacing: calc(1 / 8 * 1em); margin: 0; opacity: 0.7; text-transform: uppercase; } - .github-link { + .github-link, + .discord-link { align-items: center; display: flex; height: var(--grid-size); @@ -118,8 +127,12 @@ import Terrazzo from './terrazzo.astro'; width: var(--grid-size); } + .discord-link { + top: calc(0.5 * var(--grid-size)); + } + .colophon { - font-size: var(--tz-typography-200-regular-font-size); + font-size: var(--tz-font-body-font-size); opacity: 0.6; } diff --git a/www/src/components/main-nav.astro b/www/src/components/main-nav.astro index abe389f6..a18bb502 100644 --- a/www/src/components/main-nav.astro +++ b/www/src/components/main-nav.astro @@ -18,9 +18,13 @@ const { version } = pkgInfo; Get Started
  • - v{version} + v{version}
    • -
  • +
    • -
  • +
  • = 600px) { + display: flex; + } + } + .nav-item .tz-button { height: var(--grid-size); width: calc(2.5 * var(--grid-size)); @@ -91,8 +103,6 @@ const { version } = pkgInfo; text-align: center; padding-inline: 0.25rem; white-space: nowrap; - - } .nav a:has(.version):hover { @@ -104,7 +114,7 @@ const { version } = pkgInfo; margin-left: auto; } - .icon-link {; + .icon-link { padding-inline: 0.25rem; text-align: center; width: var(--grid-size); @@ -126,8 +136,6 @@ const { version } = pkgInfo; padding-inline-start: 1.5rem; } - - .logo-link { align-items: center; display: flex; diff --git a/www/src/pages/index.astro b/www/src/pages/index.astro index 33a7fcee..143a5ee8 100644 --- a/www/src/pages/index.astro +++ b/www/src/pages/index.astro @@ -12,7 +12,7 @@ import DefaultLayout from '../layouts/default.astro';

    Design systems for everyone

    -
    +

    Used by

    -
    +

    terrazzo is a collection of MIT licensed open source tools to help you create and manage your design system. It’s free to use, forever. Keep full @@ -260,36 +260,43 @@ import DefaultLayout from '../layouts/default.astro'; } .w11 { + max-width: 100%; width: calc(9 * var(--grid-size)); - @media (width >= 900px) { + + @media (width >= 750px) { width: calc(11 * var(--grid-size)); } } .w13 { + max-width: 100%; width: calc(9 * var(--grid-size)); - @media (width >= 900px) { + @media (width >= 750px) { width: calc(13 * var(--grid-size)); } } .w15 { + max-width: 100%; width: calc(11 * var(--grid-size)); - @media (width >= 900px) { + @media (width >= 750px) { width: calc(15 * var(--grid-size)); } } .illo { - position: absolute; + height: 100vh; left: 50%; + max-width: 100vw; + overflow: hidden; + position: absolute; + top: calc(2 * var(--grid-size)); transform: translate3d(-50%, 0, 0); - top: calc(3 * var(--grid-size)); - width: calc(11 * var(--grid-size)); + width: calc(13 * var(--grid-size)); z-index: 0; - @media (width >= 900px) { - width: calc(13 * var(--grid-size)); + @media (width >= 750px) { + width: calc(15 * var(--grid-size)); } } @@ -297,20 +304,21 @@ import DefaultLayout from '../layouts/default.astro'; display: flex; gap: calc(0.25 * var(--grid-size)); flex-direction: column; - font-family: var(--tz-typography-900-bold-font-family); - font-size: var(--tz-typography-800-bold-font-size); - font-weight: var(--tz-typography-900-bold-font-weight); - letter-spacing: var(--tz-typography-900-bold-letter-spacing); + font-family: var(--tz-font-sans); + font-size: 2.1875rem; + font-weight: var(--tz-font-heading-1-font-weight); + font-variation-settings: var(--tz-font-heading-1-font-variation-settings); + letter-spacing: var(--tz-font-heading-1-letter-spacing); line-height: 1; margin: 0; - @media (width >= 900px) { - font-size: var(--tz-typography-900-bold-font-size); + @media (width >= 750px) { + font-size: 3.75rem; } small { display: block; - font-family: var(--tz-typography-family-mono); + font-family: var(--tz-font-mono); font-size: 0.375em; font-weight: 400; letter-spacing: calc(1 / 4 * 1em); @@ -320,10 +328,11 @@ import DefaultLayout from '../layouts/default.astro'; } .subheading { - font-family: var(--tz-typography-family-mono); - font-size: var(--tz-typography-400-regular-font-size); - font-weight: var(--tz-typography-400-regular-font-weight); - letter-spacing: var(--tz-typography-400-regular-letter-spacing); + font-family: var(--tz-font-mono); + font-size: var(--tz-font-heading-4-font-size); + font-variation-settings: var(--tz-font-heading-4-font-variation-settings); + font-weight: var(--tz-font-heading-4-font-weight); + letter-spacing: var(--tz-font-heading-4-letter-spacing); line-height: 1; margin: 0; opacity: 0.7; @@ -335,9 +344,10 @@ import DefaultLayout from '../layouts/default.astro'; .logos { align-items: center; display: flex; + flex-wrap: wrap; gap: 2rem; justify-content: center; - margin: 1.5rem 0 0 0; + margin: 1rem 0 0 0; text-align: center; } @@ -362,10 +372,18 @@ import DefaultLayout from '../layouts/default.astro'; } .explainer { - font-size: var(--tz-typography-400-regular-font-size); + font-size: var(--tz-font-heading-4-font-size); margin: 0; } + .has-cta { + padding-bottom: calc(2 * var(--grid-size)); + + @media (width >= 750px) { + padding-bottom: 0; + } + } + .cta { bottom: -1px; display: flex; @@ -374,8 +392,10 @@ import DefaultLayout from '../layouts/default.astro'; padding: 0; position: absolute; right: -1px; + width: 100%; .tz-button { + white-space: nowrap; width: calc(3 * var(--grid-size)); } } diff --git a/www/src/styles/app.css b/www/src/styles/app.css index 367e0a65..5401366a 100644 --- a/www/src/styles/app.css +++ b/www/src/styles/app.css @@ -18,13 +18,13 @@ body { background-repeat: repeat; background-size: var(--grid-size) var(--grid-size); color: var(--tz-color-text-1); - font-family: var(--tz-typography-family-sans); + font-family: var(--tz-font-sans); font-size: 100%; line-height: 1; margin: 0; } -@media (width >= 900px) { +@media (width >= 600px) { body { --grid-size: 3rem; } @@ -51,76 +51,76 @@ body { } h1 { - font-size: var(--tz-typography-700-bold-font-size); - font-style: var(--tz-typography-700-bold-font-style); - font-variation-settings: var(--tz-typography-700-bold-font-variation-settings); - font-weight: var(--tz-typography-700-bold-font-weight); - letter-spacing: var(--tz-typography-700-bold-letter-spacing); - line-height: var(--tz-typography-700-bold-line-height); + font-size: var(--tz-font-heading-1-font-size); + font-style: var(--tz-font-heading-1-font-style); + font-variation-settings: var(--tz-font-heading-1-font-variation-settings); + font-weight: var(--tz-font-heading-1-font-weight); + letter-spacing: var(--tz-font-heading-1-letter-spacing); + line-height: var(--tz-font-heading-1-line-height); } h2 { - font-size: var(--tz-typography-600-bold-font-size); - font-style: var(--tz-typography-600-bold-font-style); - font-variation-settings: var(--tz-typography-800-bold-font-variation-settings); - font-weight: var(--tz-typography-600-bold-font-weight); - letter-spacing: var(--tz-typography-600-bold-letter-spacing); - line-height: var(--tz-typography-600-bold-line-height); + font-size: var(--tz-font-heading-2-font-size); + font-style: var(--tz-font-heading-2-font-style); + font-variation-settings: var(--tz-font-heading-2-font-variation-settings); + font-weight: var(--tz-font-heading-2-font-weight); + letter-spacing: var(--tz-font-heading-2-letter-spacing); + line-height: var(--tz-font-heading-2-line-height); } h3 { - font-size: var(--tz-typography-500-medium-font-size); - font-style: var(--tz-typography-500-medium-font-style); - font-variation-settings: var(--tz-typography-500-medium-font-variation-settings); - font-weight: var(--tz-typography-500-medium-font-weight); - letter-spacing: var(--tz-typography-500-medium-letter-spacing); - line-height: var(--tz-typography-500-medium-line-height); + font-size: var(--tz-font-heading-3-font-size); + font-style: var(--tz-font-heading-3-font-style); + font-variation-settings: var(--tz-font-heading-3-font-variation-settings); + font-weight: var(--tz-font-heading-3-font-weight); + letter-spacing: var(--tz-font-heading-3-letter-spacing); + line-height: var(--tz-font-heading-3-line-height); } h4 { - font-size: var(--tz-typography-400-medium-font-size); - font-style: var(--tz-typography-400-medium-font-style); - font-variation-settings: var(--tz-typography-400-medium-font-variation-settings); - font-weight: var(--tz-typography-400-medium-font-weight); - letter-spacing: var(--tz-typography-400-medium-letter-spacing); - line-height: var(--tz-typography-400-medium-line-height); + font-size: var(--tz-font-heading-4-font-size); + font-style: var(--tz-font-heading-4-font-style); + font-variation-settings: var(--tz-font-heading-4-font-variation-settings); + font-weight: var(--tz-font-heading-4-font-weight); + letter-spacing: var(--tz-font-heading-4-letter-spacing); + line-height: var(--tz-font-heading-4-line-height); } h5 { - font-size: var(--tz-typography-300-medium-font-size); - font-style: var(--tz-typography-300-medium-font-style); - font-variation-settings: var(--tz-typography-300-medium-font-variation-settings); - font-weight: var(--tz-typography-300-medium-font-weight); - letter-spacing: var(--tz-typography-300-medium-letter-spacing); - line-height: var(--tz-typography-300-medium-line-height); + font-size: var(--tz-font-heading-5-font-size); + font-style: var(--tz-font-heading-5-font-style); + font-variation-settings: var(--tz-font-heading-5-font-variation-settings); + font-weight: var(--tz-font-heading-5-font-weight); + letter-spacing: var(--tz-font-heading-5-letter-spacing); + line-height: var(--tz-font-heading-5-line-height); } h6 { - font-size: var(--tz-typography-200-medium-font-size); - font-style: var(--tz-typography-200-medium-font-style); - font-variation-settings: var(--tz-typography-200-medium-font-variation-settings); - font-weight: var(--tz-typography-200-medium-font-weight); - letter-spacing: var(--tz-typography-200-medium-letter-spacing); - line-height: var(--tz-typography-200-medium-line-height); + font-size: var(--tz-font-heading-6-font-size); + font-style: var(--tz-font-heading-6-font-style); + font-variation-settings: var(--tz-font-heading-6-font-variation-settings); + font-weight: var(--tz-font-heading-6-font-weight); + letter-spacing: var(--tz-font-heading-6-letter-spacing); + line-height: var(--tz-font-heading-6-line-height); } p, li, blockquote { - font-size: var(--tz-typography-300-regular-font-size); - font-style: var(--tz-typography-300-regular-font-style); - letter-spacing: var(--tz-typography-300-regular-letter-spacing); - line-height: var(--tz-typography-300-regular-line-height); + font-size: var(--tz-font-body-font-size); + font-style: var(--tz-font-body-font-style); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); } pre, code { - font-family: var(--tz-typography-family-mono); - font-size: var(--tz-typography-100-regular-font-size); - font-style: var(--tz-typography-100-regular-font-style); + font-family: var(--tz-font-mono); + font-size: var(--tz-font-label-small-font-size); + font-style: var(--tz-font-label-small-font-style); font-variant-ligatures: none; - line-height: var(--tz-typography-100-regular-line-height); - text-decoration: var(--tz-typography-100-regular-text-decoration); + line-height: var(--tz-font-label-small-line-height); + text-decoration: var(--tz-font-label-small-text-decoration); } a { @@ -142,7 +142,7 @@ strong { align-items: center; border-radius: 4rem; display: inline-flex; - font-weight: var(--tz-typography-300-medium-font-weight); + font-variation-settings: var(--tz-font-body-strong-font-variation-settings); gap: 0.375em; vertical-align: -8.75%; } diff --git a/www/src/styles/docs.css b/www/src/styles/docs.css index 94aae08a..4728f56f 100644 --- a/www/src/styles/docs.css +++ b/www/src/styles/docs.css @@ -14,7 +14,7 @@ --padding: 2em; cursor: pointer; - font-family: var(--tz-typography-family-sans); + font-family: var(--tz-font-sans); letter-spacing: -0.03125em; margin-block-end: 0; margin-block-start: 2em; @@ -65,16 +65,17 @@ } li { - font-size: var(--tz-typography-300-regular-font-size); - letter-spacing: var(--tz-typography-300-regular-letter-spacing); - line-height: var(--tz-typography-300-regular-line-height); + font-size: var(--tz-font-body-font-size); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); margin-block: var(--tz-space-400); padding-inline-start: var(--tz-space-200); @media (width >= 1600px) { - font-size: var(--tz-typography-400-regular-font-size); - letter-spacing: var(--tz-typography-400-regular-letter-spacing); - line-height: var(--tz-typography-400-regular-line-height); + font-size: var(--tz-font-body-longform-font-size); + font-variation-settings: var(--tz-font-body-longform-font-variation-settings); + letter-spacing: var(--tz-font-body-longform-letter-spacing); + line-height: var(--tz-font-body-longform-line-height); } } @@ -90,8 +91,8 @@ strong, b { - font-variation-settings: var(--tz-typography-300-bold-font-variation-settings); - font-weight: var(--tz-typography-300-bold-font-weight); + font-variation-settings: "wght" 600; + font-weight: var(--tz-font-body-font-weight); } p > code, @@ -121,9 +122,9 @@ figcaption, figcaption p { - font-size: var(--tz-typography-200-regular-font-size); - letter-spacing: var(--tz-typography-200-regular-letter-spacing); - line-height: var(--tz-typography-200-regular-line-height); + font-size: var(--tz-font-body-font-size); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); margin-top: var(--tz-space-200); opacity: 0.75; text-align: center; @@ -140,13 +141,16 @@ } p { - font-size: var(--tz-typography-300-regular-font-size); - letter-spacing: var(--tz-typography-300-regular-letter-spacing); + font-size: var(--tz-font-body-font-size); + font-variation-settings: var(--tz-font-body-font-variation-settings); + font-weight: var(--tz-font-body-font-weight); + letter-spacing: var(--tz-font-body-letter-spacing); line-height: 1.75; @media (width >= 1600px) { - font-size: var(--tz-typography-400-regular-font-size); - letter-spacing: var(--tz-typography-400-regular-letter-spacing); + font-size: var(--tz-font-body-longform-font-size); + font-variation-settings: var(--tz-font-body-longform-font-variation-settings); + letter-spacing: var(--tz-font-body-longform-letter-spacing); } } @@ -155,8 +159,8 @@ border-bottom: 1px solid transparent; cursor: pointer; display: flex; - font-variation-settings: var(--tz-typography-300-medium-font-variation-settings); - font-weight: var(--tz-typography-300-medium-font-weight); + font-variation-settings: var(--tz-body-strong-font-variation-settings); + font-weight: var(--tz-body-strong-font-weight); min-height: var(--tz-space-800); position: relative; @@ -201,16 +205,16 @@ th { border-bottom: var(--tz-border-2); - font-variation-settings: var(--tz-typography-200-medium-font-variation-settings); - font-weight: var(--tz-typography-200-medium-font-weight); + font-variation-settings: var(--tz-font-body-strong-font-variation-settings); + font-weight: var(--tz-font-body-strong-font-weight); } th, td { border: var(--tz-border-2); - font-size: var(--tz-typography-200-regular-font-size); - letter-spacing: var(--tz-typography-200-regular-letter-spacing); - line-height: var(--tz-typography-200-regular-line-height); + font-size: var(--tz-font-body-font-size); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); padding: var(--tz-space-300); } @@ -272,13 +276,13 @@ .callout-indicator { align-items: center; display: flex; - font-family: var(--tz-typography-200-bold-font-family); - font-size: var(--tz-typography-200-bold-font-size); - font-variation-settings: var(--tz-typography-200-bold-font-variation-settings); - font-weight: var(--tz-typography-200-bold-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-strong-font-size); + font-variation-settings: "wght" 600; + font-weight: var(--tz-font-body-strong-font-weight); gap: var(--tz-space-200); - letter-spacing: var(--tz-typography-200-bold-letter-spacing); - line-height: var(--tz-typography-200-bold-line-height); + letter-spacing: var(--tz-font-body-strong-letter-spacing); + line-height: var(--tz-font-body-strong-line-height); margin-bottom: var(--tz-space-200); text-transform: capitalize; } @@ -311,12 +315,12 @@ border-width: 3px 0; color: color(srgb 0.9 0.9 0.9); cursor: pointer; - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); - font-variation-settings: var(--tz-typography-200-regular-font-variation-settings); - font-weight: var(--tz-typography-200-regular-font-weight); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); + font-variation-settings: var(--tz-font-body-font-variation-settings); + font-weight: var(--tz-font-body-font-weight); height: var(--tz-space-control-m); - letter-spacing: var(--tz-typography-200-regular-letter-spacing); + letter-spacing: var(--tz-font-body-letter-spacing); line-height: var(--tz-space-control-m); outline: 2px solid transparent; padding: 0 var(--code-padding); @@ -434,11 +438,11 @@ .toc { background: var(--tz-color-bg-1); - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); height: min-content; - letter-spacing: var(--tz-typography-200-regular-letter-spacing); - line-height: var(--tz-typography-200-regular-line-height); + letter-spacing: var(--tz-font-body-letter-spacing); + line-height: var(--tz-font-body-line-height); margin: 0; order: 1; @@ -462,8 +466,8 @@ } li { - font-family: var(--tz-typography-200-regular-font-family); - font-size: var(--tz-typography-200-regular-font-size); + font-family: var(--tz-font-sans); + font-size: var(--tz-font-body-font-size); list-style: none; margin: 0; padding: 0; @@ -488,7 +492,7 @@ } ol a { - font-size: var(--tz-typography-100-regular-font-size); + font-size: var(--tz-font-label-small-font-size); } } From 581595f46c7aa4d5696585439dc3d36de7499c8f Mon Sep 17 00:00:00 2001 From: Drew Powers Date: Sun, 8 Dec 2024 22:13:59 -0700 Subject: [PATCH 2/3] Ignore .turbo from publishing --- packages/cli/.npmignore | 1 + packages/icons/.npmignore | 1 + packages/parser/.npmignore | 1 + packages/plugin-css/.npmignore | 1 + packages/plugin-js/.npmignore | 1 + packages/plugin-sass/.npmignore | 1 + packages/plugin-swift/.npmignore | 1 + packages/plugin-tailwind/.npmignore | 1 + packages/react-color-picker/.npmignore | 1 + packages/tiles/.npmignore | 1 + packages/token-lab/.npmignore | 1 + packages/token-tools/.npmignore | 1 + packages/use-color/.npmignore | 1 + 13 files changed, 13 insertions(+) diff --git a/packages/cli/.npmignore b/packages/cli/.npmignore index 5b4c14ab..34db3e36 100644 --- a/packages/cli/.npmignore +++ b/packages/cli/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json src/** test/** diff --git a/packages/icons/.npmignore b/packages/icons/.npmignore index a7b007bc..e0b460fd 100644 --- a/packages/icons/.npmignore +++ b/packages/icons/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json src/** rollup.* diff --git a/packages/parser/.npmignore b/packages/parser/.npmignore index 1b683ffd..a06ea275 100644 --- a/packages/parser/.npmignore +++ b/packages/parser/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json test/ tsconfig.* diff --git a/packages/plugin-css/.npmignore b/packages/plugin-css/.npmignore index 5b4c14ab..34db3e36 100644 --- a/packages/plugin-css/.npmignore +++ b/packages/plugin-css/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json src/** test/** diff --git a/packages/plugin-js/.npmignore b/packages/plugin-js/.npmignore index 5b4c14ab..34db3e36 100644 --- a/packages/plugin-js/.npmignore +++ b/packages/plugin-js/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json src/** test/** diff --git a/packages/plugin-sass/.npmignore b/packages/plugin-sass/.npmignore index 5b4c14ab..34db3e36 100644 --- a/packages/plugin-sass/.npmignore +++ b/packages/plugin-sass/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json src/** test/** diff --git a/packages/plugin-swift/.npmignore b/packages/plugin-swift/.npmignore index 5b4c14ab..34db3e36 100644 --- a/packages/plugin-swift/.npmignore +++ b/packages/plugin-swift/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json src/** test/** diff --git a/packages/plugin-tailwind/.npmignore b/packages/plugin-tailwind/.npmignore index 5b4c14ab..34db3e36 100644 --- a/packages/plugin-tailwind/.npmignore +++ b/packages/plugin-tailwind/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json src/** test/** diff --git a/packages/react-color-picker/.npmignore b/packages/react-color-picker/.npmignore index 9239ebf4..d0d0b02a 100644 --- a/packages/react-color-picker/.npmignore +++ b/packages/react-color-picker/.npmignore @@ -1,5 +1,6 @@ *.test.* .size-limit.js +.turbo biome.* rollup.* src/** diff --git a/packages/tiles/.npmignore b/packages/tiles/.npmignore index 3100a9a8..6415a123 100644 --- a/packages/tiles/.npmignore +++ b/packages/tiles/.npmignore @@ -1,5 +1,6 @@ *.test.* .size-limit.js +.turbo biome.* rollup.* stylelint.* diff --git a/packages/token-lab/.npmignore b/packages/token-lab/.npmignore index 3100a9a8..6415a123 100644 --- a/packages/token-lab/.npmignore +++ b/packages/token-lab/.npmignore @@ -1,5 +1,6 @@ *.test.* .size-limit.js +.turbo biome.* rollup.* stylelint.* diff --git a/packages/token-tools/.npmignore b/packages/token-tools/.npmignore index 5b4c14ab..34db3e36 100644 --- a/packages/token-tools/.npmignore +++ b/packages/token-tools/.npmignore @@ -1,3 +1,4 @@ +.turbo biome.json src/** test/** diff --git a/packages/use-color/.npmignore b/packages/use-color/.npmignore index c54f94f7..9e847846 100644 --- a/packages/use-color/.npmignore +++ b/packages/use-color/.npmignore @@ -1,5 +1,6 @@ *.test.* .size-limit.js +.turbo biome.* vite.* vitest.* From 48ce2644e1e75e3ca17faae40cceef28fa62b6ab Mon Sep 17 00:00:00 2001 From: Drew Powers Date: Sun, 8 Dec 2024 22:16:20 -0700 Subject: [PATCH 3/3] Update test fixture --- packages/plugin-js/test/typography/want.js | 80 +++++++++++++++++----- 1 file changed, 64 insertions(+), 16 deletions(-) diff --git a/packages/plugin-js/test/typography/want.js b/packages/plugin-js/test/typography/want.js index ee774d4e..3f97b83f 100644 --- a/packages/plugin-js/test/typography/want.js +++ b/packages/plugin-js/test/typography/want.js @@ -25,56 +25,80 @@ export const tokens = { "unit": "px" }, "fontWeight": 400, - "lineHeight": "41px" + "lineHeight": { + "value": 41, + "unit": "px" + } }, "xs": { "fontSize": { "value": 31, "unit": "px" }, - "lineHeight": "38px" + "lineHeight": { + "value": 38, + "unit": "px" + } }, "s": { "fontSize": { "value": 32, "unit": "px" }, - "lineHeight": "39px" + "lineHeight": { + "value": 39, + "unit": "px" + } }, "m": { "fontSize": { "value": 33, "unit": "px" }, - "lineHeight": "40px" + "lineHeight": { + "value": 40, + "unit": "px" + } }, "l": { "fontSize": { "value": 34, "unit": "px" }, - "lineHeight": "41px" + "lineHeight": { + "value": 41, + "unit": "px" + } }, "xl": { "fontSize": { "value": 36, "unit": "px" }, - "lineHeight": "43px" + "lineHeight": { + "value": 43, + "unit": "px" + } }, "2xl": { "fontSize": { "value": 38, "unit": "px" }, - "lineHeight": "46px" + "lineHeight": { + "value": 46, + "unit": "px" + } }, "3xl": { "fontSize": { "value": 40, "unit": "px" }, - "lineHeight": "48px" + "lineHeight": { + "value": 48, + "unit": "px" + } }, }, "typography.body": { @@ -87,56 +111,80 @@ export const tokens = { "unit": "px" }, "fontWeight": 400, - "lineHeight": "22px" + "lineHeight": { + "value": 22, + "unit": "px" + } }, "xs": { "fontSize": { "value": 14, "unit": "px" }, - "lineHeight": "19px" + "lineHeight": { + "value": 19, + "unit": "px" + } }, "s": { "fontSize": { "value": 15, "unit": "px" }, - "lineHeight": "20px" + "lineHeight": { + "value": 20, + "unit": "px" + } }, "m": { "fontSize": { "value": 16, "unit": "px" }, - "lineHeight": "21px" + "lineHeight": { + "value": 21, + "unit": "px" + } }, "l": { "fontSize": { "value": 17, "unit": "px" }, - "lineHeight": "22px" + "lineHeight": { + "value": 22, + "unit": "px" + } }, "xl": { "fontSize": { "value": 19, "unit": "px" }, - "lineHeight": "24px" + "lineHeight": { + "value": 24, + "unit": "px" + } }, "2xl": { "fontSize": { "value": 21, "unit": "px" }, - "lineHeight": "26px" + "lineHeight": { + "value": 26, + "unit": "px" + } }, "3xl": { "fontSize": { "value": 23, "unit": "px" }, - "lineHeight": "29px" + "lineHeight": { + "value": 29, + "unit": "px" + } }, }, };