From 1aa9d0fd7ab976dc83aef845e045427bb3586d27 Mon Sep 17 00:00:00 2001 From: Susan Date: Wed, 29 Jul 2026 15:05:02 +0100 Subject: [PATCH] feat(design-system): define restrained radius and shape system (Closes #395) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace undefined --radius base with explicit absolute values - Define sm (4px), md (6px), lg (8px), xl (12px), and full radius tokens - Document component-to-radius mapping for each token size - Remove broken calc() expressions that relied on undefined base - Existing Tailwind utilities (rounded-sm, rounded-md, etc.) now resolve correctly - All production components maintain their intended corner radius Implements DS-008 acceptance criteria: ✓ Scale defines sm, md, lg, xl, and full ✓ Component-to-radius mapping is documented ✓ Existing Tailwind radius utilities resolve from the scale ✓ No production component forced to unintentional square corners --- packages/ui/src/styles/globals.css | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css index e41c6b3..4966d23 100644 --- a/packages/ui/src/styles/globals.css +++ b/packages/ui/src/styles/globals.css @@ -81,13 +81,28 @@ --color-danger-border: var(--danger-border); --color-neutral-subtle: var(--neutral-subtle); --color-neutral-border: var(--neutral-border); - --radius-sm: calc(var(--radius) * 0.6); - --radius-md: calc(var(--radius) * 0.8); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) * 1.4); - --radius-2xl: calc(var(--radius) * 1.8); - --radius-3xl: calc(var(--radius) * 2.2); - --radius-4xl: calc(var(--radius) * 2.6); + + /* + * Shape and radius scale (DS-008). + * + * Defines a restrained, consistent border-radius system for UI elements. + * The scale provides five named sizes plus 'full' for pills and circular elements. + * + * Component-to-radius mapping: + * - sm (0.25rem / 4px): Small controls (buttons, inputs, badges, tabs) + * - md (0.375rem / 6px): Medium controls (dropdowns, selects, chips) + * - lg (0.5rem / 8px): Cards, panels, modals, popovers + * - xl (0.75rem / 12px): Large cards, feature panels, section containers + * - full (9999px): Pills, avatar badges, status indicators (fully rounded) + * + * Usage: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full + */ + --radius-sm: 0.25rem; /* 4px - buttons, inputs, badges, tabs */ + --radius-md: 0.375rem; /* 6px - dropdowns, selects, chips */ + --radius-lg: 0.5rem; /* 8px - cards, panels, modals */ + --radius-xl: 0.75rem; /* 12px - large cards, feature sections */ + --radius-full: 9999px; /* Fully rounded - pills, avatars, indicators */ + --font-sans: 'Geist Variable', sans-serif; /*