From 2fa1878f74a605ed6ae6fff86394a067722bf13d Mon Sep 17 00:00:00 2001 From: madrilene Date: Fri, 29 Nov 2024 17:40:19 +0100 Subject: [PATCH] move border radius to tokens --- src/_data/designTokens/borderRadius.json | 15 +++++++++++++++ src/assets/css/bundle/custom-card.css | 2 +- src/assets/css/bundle/footnotes.css | 2 +- src/assets/css/bundle/gallery.css | 2 +- src/assets/css/bundle/pagination.css | 2 +- src/assets/css/bundle/post.css | 2 +- src/assets/css/global/base/variables.css | 1 - src/assets/css/global/blocks/code.css | 2 +- src/assets/css/global/blocks/main-nav.css | 2 +- src/assets/css/global/blocks/prose.css | 2 +- src/assets/css/global/blocks/skip-link.css | 2 +- tailwind.config.js | 4 ++++ 12 files changed, 28 insertions(+), 10 deletions(-) create mode 100644 src/_data/designTokens/borderRadius.json diff --git a/src/_data/designTokens/borderRadius.json b/src/_data/designTokens/borderRadius.json new file mode 100644 index 0000000..2f1c555 --- /dev/null +++ b/src/_data/designTokens/borderRadius.json @@ -0,0 +1,15 @@ +{ + "title": "Border Radius", + "description": "", + "meta": {}, + "items": [ + { + "name": "small", + "value": "0.1875rem" + }, + { + "name": "Medium", + "value": "0.3rem" + } + ] +} diff --git a/src/assets/css/bundle/custom-card.css b/src/assets/css/bundle/custom-card.css index d310aa8..2a31e78 100644 --- a/src/assets/css/bundle/custom-card.css +++ b/src/assets/css/bundle/custom-card.css @@ -4,7 +4,7 @@ custom-card { border: 4px solid var(--color-bg-accent); color: var(--color-text); padding: var(--space-s-m); - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); max-inline-size: unset; display: grid; grid-template-rows: [image] max-content [headline] max-content [meta] max-content [desc] auto [footer] max-content; diff --git a/src/assets/css/bundle/footnotes.css b/src/assets/css/bundle/footnotes.css index b844b41..5a577dc 100644 --- a/src/assets/css/bundle/footnotes.css +++ b/src/assets/css/bundle/footnotes.css @@ -17,7 +17,7 @@ .footnote-backref { text-decoration: none; background-color: var(--color-bg-accent); - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); padding-inline: var(--space-xs); } diff --git a/src/assets/css/bundle/gallery.css b/src/assets/css/bundle/gallery.css index d76cfcd..eb86d38 100644 --- a/src/assets/css/bundle/gallery.css +++ b/src/assets/css/bundle/gallery.css @@ -1,5 +1,5 @@ .gallery dialog { - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); inset: revert; } diff --git a/src/assets/css/bundle/pagination.css b/src/assets/css/bundle/pagination.css index 0b191b5..8edc420 100644 --- a/src/assets/css/bundle/pagination.css +++ b/src/assets/css/bundle/pagination.css @@ -6,7 +6,7 @@ color: var(--pagination-text, var(--color-text)); background-color: var(--pagination-bg, var(--color-bg)); border: 3px solid var(--pagination-border, var(--color-bg-accent)); - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); } .pagination li:not(:has(a)) { diff --git a/src/assets/css/bundle/post.css b/src/assets/css/bundle/post.css index 60fda56..2550087 100644 --- a/src/assets/css/bundle/post.css +++ b/src/assets/css/bundle/post.css @@ -29,7 +29,7 @@ color: var(--color-text-accent); background-color: var(--color-bg); padding: var(--space-xs) var(--space-s); - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); transform: translateY(-4ch) translateX(-0.5ch); max-inline-size: fit-content; } diff --git a/src/assets/css/global/base/variables.css b/src/assets/css/global/base/variables.css index c29ea16..80bb62b 100644 --- a/src/assets/css/global/base/variables.css +++ b/src/assets/css/global/base/variables.css @@ -5,7 +5,6 @@ Adjust fallbacks if modern color syntax not supported for text and bg variants. /* Basic variable definitions for color schemes */ :root { --gutter: var(--space-m-l); - --border-radius: 0.3rem; --transition-duration: 250ms; --transition-timing: ease; --wrapper-width: 85rem; diff --git a/src/assets/css/global/blocks/code.css b/src/assets/css/global/blocks/code.css index db95493..2953c1e 100644 --- a/src/assets/css/global/blocks/code.css +++ b/src/assets/css/global/blocks/code.css @@ -14,7 +14,7 @@ pre { font-size: var(--size-step-min-1); background-color: var(--color-code-bg); - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); } code[class*='language-'], diff --git a/src/assets/css/global/blocks/main-nav.css b/src/assets/css/global/blocks/main-nav.css index cf48d29..a00d27a 100644 --- a/src/assets/css/global/blocks/main-nav.css +++ b/src/assets/css/global/blocks/main-nav.css @@ -105,7 +105,7 @@ color: var(--nav-item-text-color); padding: var(--nav-item-padding); display: block; - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); text-decoration-line: underline; text-decoration-color: var(--nav-item-decoration-color); text-decoration-thickness: 3px; diff --git a/src/assets/css/global/blocks/prose.css b/src/assets/css/global/blocks/prose.css index 5c783a4..1659c4b 100644 --- a/src/assets/css/global/blocks/prose.css +++ b/src/assets/css/global/blocks/prose.css @@ -55,7 +55,7 @@ } .prose img { - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); } @media screen(ltsm) { diff --git a/src/assets/css/global/blocks/skip-link.css b/src/assets/css/global/blocks/skip-link.css index 96b327d..4bc8938 100644 --- a/src/assets/css/global/blocks/skip-link.css +++ b/src/assets/css/global/blocks/skip-link.css @@ -18,7 +18,7 @@ background-color: var(--color-text); color: var(--color-bg); padding: var(--space-xs) var(--space-s-m); - border-radius: var(--border-radius); + border-radius: var(--border-radius-medium); line-height: 1; } diff --git a/tailwind.config.js b/tailwind.config.js index 33b622b..59e3a12 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,6 +9,7 @@ import {tokensToTailwind} from './src/_config/utils/tokens-to-tailwind.js'; // Raw design tokens import colorTokens from './src/_data/designTokens/colors.json'; +import borderRadiusTokens from './src/_data/designTokens/borderRadius.json'; import fontTokens from './src/_data/designTokens/fonts.json'; import spacingTokens from './src/_data/designTokens/spacing.json'; import textSizeTokens from './src/_data/designTokens/textSizes.json'; @@ -18,6 +19,7 @@ import viewportTokens from './src/_data/designTokens/viewports.json'; // Process design tokens const colors = tokensToTailwind(colorTokens.items); +const borderRadius = tokensToTailwind(borderRadiusTokens.items); const fontFamily = tokensToTailwind(fontTokens.items); const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items)); const fontWeight = tokensToTailwind(textWeightTokens.items); @@ -35,6 +37,7 @@ export default { navigation: `${viewportTokens.navigation}px` }, colors, + borderRadius, spacing, fontFamily, fontSize, @@ -92,6 +95,7 @@ export default { const groups = [ {key: 'colors', prefix: 'color'}, + {key: 'borderRadius', prefix: 'border-radius'}, {key: 'spacing', prefix: 'space'}, {key: 'fontSize', prefix: 'size'}, {key: 'lineHeight', prefix: 'leading'},