From 1fbc1b310b335525355ba46597ee42bf9eb8f77b Mon Sep 17 00:00:00 2001 From: madrilene Date: Tue, 20 Feb 2024 08:46:14 +0100 Subject: [PATCH] add new design tokens --- src/_data/designTokens/textLeading.json | 18 ++++++++++++++ src/_data/designTokens/textWeights.json | 23 +++++++++++++++++ src/_data/designTokens/viewports.json | 2 ++ src/assets/css/blocks/button.css | 2 +- src/assets/css/blocks/code.css | 5 ++-- src/assets/css/blocks/details.css | 4 +-- src/assets/css/blocks/section.css | 2 +- src/assets/css/blocks/site-logo.css | 2 +- src/assets/css/blocks/site-nav-drawer.css | 2 +- src/assets/css/blocks/table.css | 2 +- src/assets/css/blocks/tag.css | 2 +- src/assets/css/blocks/theme-switch.css | 2 +- src/assets/css/global/fonts.css | 30 ++++++++++++++++------- src/assets/css/global/global-styles.css | 6 ++--- tailwind.config.js | 26 +++++++++++--------- 15 files changed, 93 insertions(+), 35 deletions(-) create mode 100644 src/_data/designTokens/textLeading.json create mode 100644 src/_data/designTokens/textWeights.json diff --git a/src/_data/designTokens/textLeading.json b/src/_data/designTokens/textLeading.json new file mode 100644 index 0000000..c221a97 --- /dev/null +++ b/src/_data/designTokens/textLeading.json @@ -0,0 +1,18 @@ +{ + "title": "Leading", + "description": "Ratio-based leading/line-height values", + "items": [ + { + "name": "Flat", + "value": 1 + }, + { + "name": "Fine", + "value": 1.2 + }, + { + "name": "Standard", + "value": 1.5 + } + ] +} diff --git a/src/_data/designTokens/textWeights.json b/src/_data/designTokens/textWeights.json new file mode 100644 index 0000000..9bee3be --- /dev/null +++ b/src/_data/designTokens/textWeights.json @@ -0,0 +1,23 @@ +{ + "title": "Text Weights", + "description": "Helper classes and custom properties for common font weights", + "meta": {}, + "items": [ + { + "name": "Regular", + "value": 400 + }, + { + "name": "Medium", + "value": 500 + }, + { + "name": "Bold", + "value": 700 + }, + { + "name": "Extra Bold", + "value": 800 + } + ] +} diff --git a/src/_data/designTokens/viewports.json b/src/_data/designTokens/viewports.json index 8f0da5f..74d9927 100644 --- a/src/_data/designTokens/viewports.json +++ b/src/_data/designTokens/viewports.json @@ -2,5 +2,7 @@ "title": "Viewports", "description": "The min and maximum viewports used to generate fluid type and space scales.", "min": 320, + "sm": 640, + "md": 1000, "max": 1350 } diff --git a/src/assets/css/blocks/button.css b/src/assets/css/blocks/button.css index 194fc6c..5c864fd 100644 --- a/src/assets/css/blocks/button.css +++ b/src/assets/css/blocks/button.css @@ -6,7 +6,7 @@ display: inline-block; font: inherit; padding: 0.3rem var(--space-s); - font-weight: 700; + font-weight: var(--font-bold); text-decoration: none; text-align: center; } diff --git a/src/assets/css/blocks/code.css b/src/assets/css/blocks/code.css index e33c913..188497a 100644 --- a/src/assets/css/blocks/code.css +++ b/src/assets/css/blocks/code.css @@ -39,7 +39,6 @@ pre[class*='language-'] { word-wrap: normal; color: var(--color-text-accent); background: var(--color-bg); - line-height: 1.5; border-radius: var(--border-radius); hyphens: none; } @@ -165,12 +164,12 @@ pre[class*='language-'] { .token.id { color: var(--color-code-pink); - font-weight: bold; + font-weight: var(--font-bold); } .token.important { color: var(--color-code-pink); - font-weight: bold; + font-weight: var(--font-bold); } .token.inserted { diff --git a/src/assets/css/blocks/details.css b/src/assets/css/blocks/details.css index cbdb3bf..5fffd63 100644 --- a/src/assets/css/blocks/details.css +++ b/src/assets/css/blocks/details.css @@ -24,7 +24,7 @@ summary { gap: 0 1ch; cursor: pointer; list-style: none; - font-weight: bold; + font-weight: var(--font-bold); font-size: var(--size-step-1); } @@ -40,7 +40,7 @@ summary::before { color: var(--color-primary); font-family: var(--font-mono); font-size: var(--size-step-0); - font-weight: normal; + font-weight: var(--font-regular); line-height: 0.5; transform: scale(1.4); transform-origin: right bottom; diff --git a/src/assets/css/blocks/section.css b/src/assets/css/blocks/section.css index 1f68912..50e53db 100644 --- a/src/assets/css/blocks/section.css +++ b/src/assets/css/blocks/section.css @@ -8,7 +8,7 @@ } .section blockquote { - font-weight: 700; + font-weight: var(--font-bold); line-height: 1; font-size: var(--size-step-4); letter-spacing: var(--tracking-s); diff --git a/src/assets/css/blocks/site-logo.css b/src/assets/css/blocks/site-logo.css index da3948d..5d1097e 100644 --- a/src/assets/css/blocks/site-logo.css +++ b/src/assets/css/blocks/site-logo.css @@ -2,7 +2,7 @@ --gutter: var(--space-xs); padding: var(--space-s) 0; font-size: var(--size-step-0); - font-weight: bold; + font-weight: var(--font-bold); text-transform: uppercase; text-decoration: none; } diff --git a/src/assets/css/blocks/site-nav-drawer.css b/src/assets/css/blocks/site-nav-drawer.css index 6a85945..2c74bb4 100644 --- a/src/assets/css/blocks/site-nav-drawer.css +++ b/src/assets/css/blocks/site-nav-drawer.css @@ -86,7 +86,7 @@ .site-nav-drawer span { font-size: var(--size-step-min-1); - font-weight: bold; + font-weight: var(--font-bold); text-transform: uppercase; padding-inline-end: var(--space-2xs); } diff --git a/src/assets/css/blocks/table.css b/src/assets/css/blocks/table.css index 156e03b..7202e48 100644 --- a/src/assets/css/blocks/table.css +++ b/src/assets/css/blocks/table.css @@ -37,7 +37,7 @@ td { td::before { content: attr(data-label); float: start; - font-weight: bold; + font-weight: var(--font-bold); } td:last-child { border-block-end: 0; diff --git a/src/assets/css/blocks/tag.css b/src/assets/css/blocks/tag.css index a795d44..c51a9a5 100644 --- a/src/assets/css/blocks/tag.css +++ b/src/assets/css/blocks/tag.css @@ -11,7 +11,7 @@ font-size: var(--size-step-min-2); text-transform: uppercase; padding: 0.1rem 0.625rem; - font-weight: 700; + font-weight: var(--font-bold); } .card .post-tag { diff --git a/src/assets/css/blocks/theme-switch.css b/src/assets/css/blocks/theme-switch.css index 1fae4fe..dcb284c 100644 --- a/src/assets/css/blocks/theme-switch.css +++ b/src/assets/css/blocks/theme-switch.css @@ -8,7 +8,7 @@ border-radius: var(--border-radius); font-size: var(--size-step-min-2); padding: 0.1rem 0.625rem; - font-weight: 700; + font-weight: var(--font-bold); min-block-size: 1.5em; text-transform: uppercase; } diff --git a/src/assets/css/global/fonts.css b/src/assets/css/global/fonts.css index 00655e7..c3b0067 100644 --- a/src/assets/css/global/fonts.css +++ b/src/assets/css/global/fonts.css @@ -5,15 +5,19 @@ font-style: normal; font-display: swap; font-weight: 800; - src: local(''), url('/assets/fonts/figtree/figtree-extrabold.woff2') format('woff2'); + src: + local(''), + url('/assets/fonts/figtree/figtree-extrabold.woff2') format('woff2'); } @font-face { font-family: Figtree; font-style: normal; font-display: swap; - font-weight: 600; - src: local(''), url('/assets/fonts/figtree/figtree-semibold.woff2') format('woff2'); + font-weight: 700; + src: + local(''), + url('/assets/fonts/figtree/figtree-bold.woff2') format('woff2'); } @font-face { @@ -21,7 +25,9 @@ font-style: normal; font-display: swap; font-weight: 500; - src: local(''), url('/assets/fonts/figtree/figtree-medium.woff2') format('woff2'); + src: + local(''), + url('/assets/fonts/figtree/figtree-medium.woff2') format('woff2'); } @font-face { @@ -29,7 +35,8 @@ font-style: italic; font-display: swap; font-weight: 500; - src: local(''), + src: + local(''), url('/assets/fonts/figtree/figtree-mediumitalic.woff2') format('woff2'); } } @@ -38,7 +45,8 @@ @supports (font-variation-settings: normal) { @font-face { font-family: 'Figtree'; - src: url('/assets/fonts/figtree/figtree-variable[wght].woff2') + src: + url('/assets/fonts/figtree/figtree-variable[wght].woff2') format('woff2 supports variations'), url('/assets/fonts/figtree/figtree-variable[wght].woff2') format('woff2-variations'); font-weight: 300 900; @@ -48,7 +56,8 @@ @font-face { font-family: 'Figtree'; - src: url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2') + src: + url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2') format('woff2 supports variations'), url('/assets/fonts/figtree/figtree-variable-italic[wght].woff2') format('woff2-variations'); @@ -64,7 +73,8 @@ font-style: normal; font-display: swap; font-weight: 700; - src: local(''), + src: + local(''), url(/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2) format('woff2'); } @@ -73,5 +83,7 @@ font-style: normal; font-display: swap; font-weight: normal; - src: local(''), url(/assets/fonts/robotomono/robotomono-regular.woff2) format('woff2'); + src: + local(''), + url(/assets/fonts/robotomono/robotomono-regular.woff2) format('woff2'); } diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/global-styles.css index fd866c2..d5f4e86 100644 --- a/src/assets/css/global/global-styles.css +++ b/src/assets/css/global/global-styles.css @@ -14,7 +14,7 @@ body { letter-spacing: var(--tracking); display: flex; flex-direction: column; - font-weight: 500; + font-weight: var(--font-medium); accent-color: var(--color-primary); } @@ -28,7 +28,7 @@ h2, h3 { line-height: 1.2; letter-spacing: var(--tracking-s); - font-weight: 700; + font-weight: var(--font-bold); font-family: var(--font-display); } @@ -74,7 +74,7 @@ svg { } strong { - font-weight: 800; + font-weight: var(--font-extra-bold); } hr { diff --git a/tailwind.config.js b/tailwind.config.js index 62fe7d6..4dfbd5d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,12 +11,17 @@ const tokensToTailwind = require('./src/utilities/tokens-to-tailwind.js'); const colorTokens = require('./src/_data/designTokens/colors.json'); const fontTokens = require('./src/_data/designTokens/fonts.json'); const spacingTokens = require('./src/_data/designTokens/spacing.json'); -const textSizeTokens = require('./src/_data/designTokens/sizes.json'); +const textSizeTokens = require('./src/_data/designTokens/textSizes.json'); +const textLeadingTokens = require('./src/_data/designTokens/textLeading.json'); +const textWeightTokens = require('./src/_data/designTokens/textWeights.json'); +const viewportTokens = require('./src/_data/designTokens/viewports.json'); // Process design tokens const colors = tokensToTailwind(colorTokens.items); const fontFamily = tokensToTailwind(fontTokens.items); const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items)); +const fontWeight = tokensToTailwind(textWeightTokens.items); +const fontLeading = tokensToTailwind(textLeadingTokens.items); const spacing = tokensToTailwind(clampGenerator(spacingTokens.items)); module.exports = { @@ -24,19 +29,16 @@ module.exports = { presets: [], theme: { screens: { - ltsm: {max: '39em'}, - sm: '40em', - md: '63em' + ltsm: {max: `${viewportTokens.sm}px`}, + sm: `${viewportTokens.sm}px`, + md: `${viewportTokens.md}px` }, colors, spacing, - fontSize, fontFamily, - fontWeight: { - normal: 500, - semi: 600, - bold: 800 - }, + fontSize, + fontWeight, + fontLeading, backgroundColor: ({theme}) => theme('colors'), textColor: ({theme}) => theme('colors'), margin: ({theme}) => ({ @@ -91,7 +93,9 @@ module.exports = { {key: 'colors', prefix: 'color'}, {key: 'spacing', prefix: 'space'}, {key: 'fontSize', prefix: 'size'}, - {key: 'fontFamily', prefix: 'font'} + {key: 'fontLeading', prefix: 'leading'}, + {key: 'fontFamily', prefix: 'font'}, + {key: 'fontWeight', prefix: 'font'} ]; groups.forEach(({key, prefix}) => {