From a5af8c95ccb3fca3ef943bc462fa03b5cdfba879 Mon Sep 17 00:00:00 2001 From: julioest Date: Tue, 24 Feb 2026 06:09:49 -0500 Subject: [PATCH] fix: align spacing tokens with Figma and prevent link-row word break --- boostlook-v3.css | 20 +++++++++----- preview/_/css/boostlook.css | 20 +++++++++----- preview/charconv/index.html | 20 +++++++++----- preview/index.html | 3 ++- preview/style-guide/index.html | 48 ++++++++++++++++++++++++++++++++++ src/css/01-variables.css | 20 +++++++++----- 6 files changed, 102 insertions(+), 29 deletions(-) diff --git a/boostlook-v3.css b/boostlook-v3.css index e86977c..35bc010 100644 --- a/boostlook-v3.css +++ b/boostlook-v3.css @@ -352,12 +352,15 @@ /* New Look Responsive Mobile First */ /* Spacing — Metalab 2.0 (mobile) */ - /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20 */ + /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; --spacing-default: 0.375rem; --spacing-medium: 0.5rem; - --spacing-large: 0.75rem; - --spacing-xl: 1rem; - --spacing-xxl: 1.25rem; + --spacing-large: 1rem; + --spacing-xl: 1.25rem; + --spacing-xxl: 3rem; + --spacing-avatar: 2.5rem; /* Corner Radius — Metalab 2.0 (mobile) */ --radius-xs: var(--corner-radius-xs); @@ -425,11 +428,14 @@ @media (min-width: 768px) { :root { /* Spacing — Metalab 2.0 (desktop) */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; --spacing-default: var(--spacing-size-2xs); --spacing-medium: var(--spacing-size-xs); - --spacing-large: var(--spacing-size-sm); - --spacing-xl: var(--spacing-size-lg); - --spacing-xxl: var(--spacing-size-xl); + --spacing-large: var(--spacing-size-lg); + --spacing-xl: var(--spacing-size-xl); + --spacing-xxl: 3.75rem; + --spacing-avatar: var(--spacing-size-3xl); /* Corner Radius — Metalab 2.0 (desktop) */ --radius-xs: var(--corner-radius-xs); diff --git a/preview/_/css/boostlook.css b/preview/_/css/boostlook.css index e86977c..35bc010 100644 --- a/preview/_/css/boostlook.css +++ b/preview/_/css/boostlook.css @@ -352,12 +352,15 @@ /* New Look Responsive Mobile First */ /* Spacing — Metalab 2.0 (mobile) */ - /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20 */ + /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; --spacing-default: 0.375rem; --spacing-medium: 0.5rem; - --spacing-large: 0.75rem; - --spacing-xl: 1rem; - --spacing-xxl: 1.25rem; + --spacing-large: 1rem; + --spacing-xl: 1.25rem; + --spacing-xxl: 3rem; + --spacing-avatar: 2.5rem; /* Corner Radius — Metalab 2.0 (mobile) */ --radius-xs: var(--corner-radius-xs); @@ -425,11 +428,14 @@ @media (min-width: 768px) { :root { /* Spacing — Metalab 2.0 (desktop) */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; --spacing-default: var(--spacing-size-2xs); --spacing-medium: var(--spacing-size-xs); - --spacing-large: var(--spacing-size-sm); - --spacing-xl: var(--spacing-size-lg); - --spacing-xxl: var(--spacing-size-xl); + --spacing-large: var(--spacing-size-lg); + --spacing-xl: var(--spacing-size-xl); + --spacing-xxl: 3.75rem; + --spacing-avatar: var(--spacing-size-3xl); /* Corner Radius — Metalab 2.0 (desktop) */ --radius-xs: var(--corner-radius-xs); diff --git a/preview/charconv/index.html b/preview/charconv/index.html index 11c9701..722d39d 100644 --- a/preview/charconv/index.html +++ b/preview/charconv/index.html @@ -362,12 +362,15 @@ /* New Look Responsive Mobile First */ /* Spacing — Metalab 2.0 (mobile) */ - /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20 */ + /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; --spacing-default: 0.375rem; --spacing-medium: 0.5rem; - --spacing-large: 0.75rem; - --spacing-xl: 1rem; - --spacing-xxl: 1.25rem; + --spacing-large: 1rem; + --spacing-xl: 1.25rem; + --spacing-xxl: 3rem; + --spacing-avatar: 2.5rem; /* Corner Radius — Metalab 2.0 (mobile) */ --radius-xs: var(--corner-radius-xs); @@ -435,11 +438,14 @@ @media (min-width: 768px) { :root { /* Spacing — Metalab 2.0 (desktop) */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; --spacing-default: var(--spacing-size-2xs); --spacing-medium: var(--spacing-size-xs); - --spacing-large: var(--spacing-size-sm); - --spacing-xl: var(--spacing-size-lg); - --spacing-xxl: var(--spacing-size-xl); + --spacing-large: var(--spacing-size-lg); + --spacing-xl: var(--spacing-size-xl); + --spacing-xxl: 3.75rem; + --spacing-avatar: var(--spacing-size-3xl); /* Corner Radius — Metalab 2.0 (desktop) */ --radius-xs: var(--corner-radius-xs); diff --git a/preview/index.html b/preview/index.html index 7a10f33..24b6542 100644 --- a/preview/index.html +++ b/preview/index.html @@ -60,7 +60,8 @@ .subtitle { color: var(--muted); margin-bottom: 2.5rem; font-size: 0.9375rem; } h2 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.5rem; margin-top: 1.75rem; } .links { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; } - .link-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.375rem 0; } + .link-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.375rem 0; flex-wrap: wrap; } + .link-row a { white-space: nowrap; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } .tag { font-size: 0.75rem; color: var(--muted); } diff --git a/preview/style-guide/index.html b/preview/style-guide/index.html index 38babe2..457dc8b 100644 --- a/preview/style-guide/index.html +++ b/preview/style-guide/index.html @@ -654,6 +654,53 @@

Spacing & Sizing Scale

+
+

Responsive Spacing (Figma Tokens)

+

These tokens are responsive (mobile → desktop). Resize the browser to see the shift.

+
+ --spacing-xs +
+ 2px / 2px +
+
+ --spacing-s +
+ 4px / 4px +
+
+ --spacing-default +
+ 6px → 8px +
+
+ --spacing-medium +
+ 8px → 12px +
+
+ --spacing-large +
+ 16px → 24px +
+
+ --spacing-xl +
+ 20px → 32px +
+
+ --spacing-xxl +
+ 48px → 60px +
+
+ --spacing-avatar +
+ 40px → 48px +
+
+ +
+

Primitive Spacing

--spacing-size-4xs
@@ -704,6 +751,7 @@
3rem / 48px
+
diff --git a/src/css/01-variables.css b/src/css/01-variables.css index 3ed06f6..a98fde2 100644 --- a/src/css/01-variables.css +++ b/src/css/01-variables.css @@ -237,12 +237,15 @@ /* New Look Responsive Mobile First */ /* Spacing — Metalab 2.0 (mobile) */ - /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20 */ + /* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; --spacing-default: 0.375rem; --spacing-medium: 0.5rem; - --spacing-large: 0.75rem; - --spacing-xl: 1rem; - --spacing-xxl: 1.25rem; + --spacing-large: 1rem; + --spacing-xl: 1.25rem; + --spacing-xxl: 3rem; + --spacing-avatar: 2.5rem; /* Corner Radius — Metalab 2.0 (mobile) */ --radius-xs: var(--corner-radius-xs); @@ -310,11 +313,14 @@ @media (min-width: 768px) { :root { /* Spacing — Metalab 2.0 (desktop) */ + --spacing-xs: 0.125rem; + --spacing-s: 0.25rem; --spacing-default: var(--spacing-size-2xs); --spacing-medium: var(--spacing-size-xs); - --spacing-large: var(--spacing-size-sm); - --spacing-xl: var(--spacing-size-lg); - --spacing-xxl: var(--spacing-size-xl); + --spacing-large: var(--spacing-size-lg); + --spacing-xl: var(--spacing-size-xl); + --spacing-xxl: 3.75rem; + --spacing-avatar: var(--spacing-size-3xl); /* Corner Radius — Metalab 2.0 (desktop) */ --radius-xs: var(--corner-radius-xs);