boost/boostlook
2
0
Fork 0
mirror of https://github.com/boostorg/boostlook.git synced 2026-02-26 04:32:18 +00:00
Code Issues Projects Releases Wiki Activity

feat: align spacing, corner radius, and font-size tokens with Figma

Browse Source
This commit is contained in:
julioest
2026-02-25 13:44:50 -05:00
parent ddd6c64d37
commit e26182c1ad
2 changed files with 44 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
boostlook-v3.css
View File

@@ -305,7 +305,7 @@
--font-size-2xl: 1.75rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
--font-size-5xl: 3rem;
--font-size-5xl: 4rem;
--font-size-6xl: 4.5rem;
--font-line-height-xs: 0.75rem;
--font-line-height-sm: 1rem;
@@ -351,18 +351,18 @@
/* New Look Responsive Mobile First */
/* Spacing — Metalab 2.0 (mobile) */
/* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */
/* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20, avatar: 48/40 */
--spacing-xs: 0.125rem;
--spacing-s: 0.25rem;
--spacing-default: 0.375rem;
--spacing-medium: 0.5rem;
--spacing-large: 1rem;
--spacing-xl: 1.25rem;
--spacing-xxl: 3rem;
--spacing-large: 0.75rem;
--spacing-xl: 1rem;
--spacing-xxl: 1.25rem;
--spacing-avatar: 2.5rem;
/* Corner Radius — Metalab 2.0 (mobile) */
--radius-xs: var(--corner-radius-xs);
--radius-xs: 0.0625rem;
--radius-s: 0.1875rem;
--radius-m: var(--corner-radius-s);
--radius-l: var(--corner-radius-m);
@@ -394,16 +394,16 @@
/* Typography */
--typography-font-size-3xs: var(--font-size-3xs);
--typography-font-size-2xs: var(--font-size-2xs);
--typography-font-size-xs: var(--font-size-xs);
--typography-font-size-2xs: var(--font-size-3xs);
--typography-font-size-xs: var(--font-size-2xs);
--typography-font-size-sm: var(--font-size-xs);
--typography-font-size-md: var(--font-size-sm);
--typography-font-size-2md: var(--font-size-2sm);
--typography-font-size-lg: var(--font-size-md);
--typography-font-size-xl: var(--font-size-lg);
--typography-font-size-2xl: var(--font-size-xl);
--typography-font-size-3xl: var(--font-size-2xl);
--typography-font-size-4xl: var(--font-size-3xl);
--typography-font-size-lg: var(--font-size-lg);
--typography-font-size-xl: var(--font-size-xl);
--typography-font-size-2xl: var(--font-size-2xl);
--typography-font-size-3xl: var(--font-size-3xl);
--typography-font-size-4xl: var(--font-size-4xl);
--typography-font-size-5xl: var(--font-size-4xl);
/* Heading — Metalab 2.0 (mobile) */
@@ -431,9 +431,9 @@
--spacing-s: 0.25rem;
--spacing-default: var(--spacing-size-2xs);
--spacing-medium: var(--spacing-size-xs);
--spacing-large: var(--spacing-size-lg);
--spacing-xl: var(--spacing-size-xl);
--spacing-xxl: 3.75rem;
--spacing-large: 1rem;
--spacing-xl: 1.5rem;
--spacing-xxl: 2rem;
--spacing-avatar: var(--spacing-size-3xl);
/* Corner Radius — Metalab 2.0 (desktop) */
@@ -471,12 +471,12 @@
--typography-font-size-sm: var(--font-size-sm);
--typography-font-size-md: var(--font-size-md);
--typography-font-size-2md: var(--font-size-2md);
--typography-font-size-lg: var(--font-size-lg);
--typography-font-size-xl: var(--font-size-xl);
--typography-font-size-2xl: var(--font-size-2xl);
--typography-font-size-3xl: var(--font-size-3xl);
--typography-font-size-4xl: var(--font-size-4xl);
--typography-font-size-5xl: var(--font-size-5xl);
--typography-font-size-lg: var(--font-size-xl);
--typography-font-size-xl: var(--font-size-3xl);
--typography-font-size-2xl: var(--font-size-4xl);
--typography-font-size-3xl: var(--font-size-5xl);
--typography-font-size-4xl: var(--font-size-6xl);
--typography-font-size-5xl: var(--font-size-6xl);
--typography-line-height-xs: var(--font-line-height-xs);
--typography-line-height-sm: var(--font-line-height-sm);
--typography-line-height-md: var(--font-line-height-md);

44
src/css/01-variables.css
View File

@@ -190,7 +190,7 @@
--font-size-2xl: 1.75rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
--font-size-5xl: 3rem;
--font-size-5xl: 4rem;
--font-size-6xl: 4.5rem;
--font-line-height-xs: 0.75rem;
--font-line-height-sm: 1rem;
@@ -236,18 +236,18 @@
/* New Look Responsive Mobile First */
/* Spacing — Metalab 2.0 (mobile) */
/* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 24/16, xl: 32/20, xxl: 60/48, avatar: 48/40 */
/* xs: 2/2, s: 4/4, default: 8/6, medium: 12/8, large: 16/12, xl: 24/16, xxl: 32/20, avatar: 48/40 */
--spacing-xs: 0.125rem;
--spacing-s: 0.25rem;
--spacing-default: 0.375rem;
--spacing-medium: 0.5rem;
--spacing-large: 1rem;
--spacing-xl: 1.25rem;
--spacing-xxl: 3rem;
--spacing-large: 0.75rem;
--spacing-xl: 1rem;
--spacing-xxl: 1.25rem;
--spacing-avatar: 2.5rem;
/* Corner Radius — Metalab 2.0 (mobile) */
--radius-xs: var(--corner-radius-xs);
--radius-xs: 0.0625rem;
--radius-s: 0.1875rem;
--radius-m: var(--corner-radius-s);
--radius-l: var(--corner-radius-m);
@@ -279,16 +279,16 @@
/* Typography */
--typography-font-size-3xs: var(--font-size-3xs);
--typography-font-size-2xs: var(--font-size-2xs);
--typography-font-size-xs: var(--font-size-xs);
--typography-font-size-2xs: var(--font-size-3xs);
--typography-font-size-xs: var(--font-size-2xs);
--typography-font-size-sm: var(--font-size-xs);
--typography-font-size-md: var(--font-size-sm);
--typography-font-size-2md: var(--font-size-2sm);
--typography-font-size-lg: var(--font-size-md);
--typography-font-size-xl: var(--font-size-lg);
--typography-font-size-2xl: var(--font-size-xl);
--typography-font-size-3xl: var(--font-size-2xl);
--typography-font-size-4xl: var(--font-size-3xl);
--typography-font-size-lg: var(--font-size-lg);
--typography-font-size-xl: var(--font-size-xl);
--typography-font-size-2xl: var(--font-size-2xl);
--typography-font-size-3xl: var(--font-size-3xl);
--typography-font-size-4xl: var(--font-size-4xl);
--typography-font-size-5xl: var(--font-size-4xl);
/* Heading — Metalab 2.0 (mobile) */
@@ -316,9 +316,9 @@
--spacing-s: 0.25rem;
--spacing-default: var(--spacing-size-2xs);
--spacing-medium: var(--spacing-size-xs);
--spacing-large: var(--spacing-size-lg);
--spacing-xl: var(--spacing-size-xl);
--spacing-xxl: 3.75rem;
--spacing-large: 1rem;
--spacing-xl: 1.5rem;
--spacing-xxl: 2rem;
--spacing-avatar: var(--spacing-size-3xl);
/* Corner Radius — Metalab 2.0 (desktop) */
@@ -356,12 +356,12 @@
--typography-font-size-sm: var(--font-size-sm);
--typography-font-size-md: var(--font-size-md);
--typography-font-size-2md: var(--font-size-2md);
--typography-font-size-lg: var(--font-size-lg);
--typography-font-size-xl: var(--font-size-xl);
--typography-font-size-2xl: var(--font-size-2xl);
--typography-font-size-3xl: var(--font-size-3xl);
--typography-font-size-4xl: var(--font-size-4xl);
--typography-font-size-5xl: var(--font-size-5xl);
--typography-font-size-lg: var(--font-size-xl);
--typography-font-size-xl: var(--font-size-3xl);
--typography-font-size-2xl: var(--font-size-4xl);
--typography-font-size-3xl: var(--font-size-5xl);
--typography-font-size-4xl: var(--font-size-6xl);
--typography-font-size-5xl: var(--font-size-6xl);
--typography-line-height-xs: var(--font-line-height-xs);
--typography-line-height-sm: var(--font-line-height-sm);
--typography-line-height-md: var(--font-line-height-md);