move border radius to tokens

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"
+    }
+  ]
+}

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;

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);
 }
 

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;
 }
 

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)) {

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;
 }

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;

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-'],

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;

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) {

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;
 }
 

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'},