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

fix: align spacing tokens with Figma and prevent link-row word break

Browse Source
This commit is contained in:
julioest
2026-02-24 06:09:49 -05:00
parent 485978d7e0
commit a5af8c95cc
6 changed files with 102 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
boostlook-v3.css
View File

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

20
preview/_/css/boostlook.css
View File

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

20
preview/charconv/index.html
View File

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

3
preview/index.html
View File

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

48
preview/style-guide/index.html
View File

@@ -654,6 +654,53 @@
<h2 id="_spacing_scale"><a class="anchor" href="#_spacing_scale"></a>Spacing &amp; Sizing Scale</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="_responsive_spacing"><a class="anchor" href="#_responsive_spacing"></a>Responsive Spacing (Figma Tokens)</h3>
<div class="paragraph"><p>These tokens are responsive (mobile &rarr; desktop). Resize the browser to see the shift.</p></div>
<div class="spacing-row">
<span class="spacing-label">--spacing-xs</span>
<div class="spacing-bar" style="width: var(--spacing-xs)"></div>
<span class="spacing-value">2px / 2px</span>
</div>
<div class="spacing-row">
<span class="spacing-label">--spacing-s</span>
<div class="spacing-bar" style="width: var(--spacing-s)"></div>
<span class="spacing-value">4px / 4px</span>
</div>
<div class="spacing-row">
<span class="spacing-label">--spacing-default</span>
<div class="spacing-bar" style="width: var(--spacing-default)"></div>
<span class="spacing-value">6px &rarr; 8px</span>
</div>
<div class="spacing-row">
<span class="spacing-label">--spacing-medium</span>
<div class="spacing-bar" style="width: var(--spacing-medium)"></div>
<span class="spacing-value">8px &rarr; 12px</span>
</div>
<div class="spacing-row">
<span class="spacing-label">--spacing-large</span>
<div class="spacing-bar" style="width: var(--spacing-large)"></div>
<span class="spacing-value">16px &rarr; 24px</span>
</div>
<div class="spacing-row">
<span class="spacing-label">--spacing-xl</span>
<div class="spacing-bar" style="width: var(--spacing-xl)"></div>
<span class="spacing-value">20px &rarr; 32px</span>
</div>
<div class="spacing-row">
<span class="spacing-label">--spacing-xxl</span>
<div class="spacing-bar" style="width: var(--spacing-xxl)"></div>
<span class="spacing-value">48px &rarr; 60px</span>
</div>
<div class="spacing-row">
<span class="spacing-label">--spacing-avatar</span>
<div class="spacing-bar" style="width: var(--spacing-avatar)"></div>
<span class="spacing-value">40px &rarr; 48px</span>
</div>
</div>
<div class="sect2">
<h3 id="_primitive_spacing"><a class="anchor" href="#_primitive_spacing"></a>Primitive Spacing</h3>
<div class="spacing-row">
<span class="spacing-label">--spacing-size-4xs</span>
<div class="spacing-bar" style="width: 0.125rem"></div>
@@ -704,6 +751,7 @@
<div class="spacing-bar" style="width: 3rem"></div>
<span class="spacing-value">3rem / 48px</span>
</div>
</div>
</div>
</div>

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

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