From dc8d2148044cbf40da08564708a5fbba0835373e Mon Sep 17 00:00:00 2001 From: Gab Date: Mon, 10 Aug 2026 17:27:39 -0300 Subject: [PATCH 1/3] feat(theme): lighten heading and body type, normalize tag weight MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Headings (2xl → xxs) and every body step now render at 300 instead of 400, and the body steps tighten from 1.5 to 1.375 leading. The four `text-body-*` steps plus `text-body-xxs` gain a `--text-*-font-weight` custom property that did not exist before, so the utilities emit a weight rather than inheriting one. Tag steps drop from 600 to 400. `text-body-xxs` moves next to its siblings so the generated block reads in order; `dist/v4` and the webkit token catalog are regenerated. --- packages/theme/dist/v4/globals.css | 52 +++++++++++-------- packages/theme/dist/v4/globals.scss | 52 +++++++++++-------- .../theme/src/tokens/semantic/texts.data.js | 37 +++++++------ packages/webkit/catalog.json | 10 ++++ 4 files changed, 93 insertions(+), 58 deletions(-) diff --git a/packages/theme/dist/v4/globals.css b/packages/theme/dist/v4/globals.css index e07c0dd1d..b956f6ee0 100644 --- a/packages/theme/dist/v4/globals.css +++ b/packages/theme/dist/v4/globals.css @@ -173,7 +173,7 @@ /* - * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that + * `@aziontech/webkit` components use arbitrary values (`bg-(--x)`) that * Tailwind v4 only picks up when the source files are inside the scan. * Auto-detect scans the CWD only, so we point `@source` at the webkit * package via a monorepo-relative path (this file is under @@ -701,25 +701,25 @@ --text-big-number-lg-font-family: Proto Mono; --text-heading-2xl-font-size: 1.875rem; --text-heading-2xl-line-height: 1.25; - --text-heading-2xl-font-weight: 400; + --text-heading-2xl-font-weight: 300; --text-heading-xl-font-size: 1.25rem; --text-heading-xl-line-height: 1.25; - --text-heading-xl-font-weight: 400; + --text-heading-xl-font-weight: 300; --text-heading-lg-font-size: 1.125rem; --text-heading-lg-line-height: 1.25; - --text-heading-lg-font-weight: 400; + --text-heading-lg-font-weight: 300; --text-heading-md-font-size: 1rem; --text-heading-md-line-height: 1.25; - --text-heading-md-font-weight: 400; + --text-heading-md-font-weight: 300; --text-heading-sm-font-size: 0.875rem; --text-heading-sm-line-height: 1.375; - --text-heading-sm-font-weight: 400; + --text-heading-sm-font-weight: 300; --text-heading-xs-font-size: 1rem; --text-heading-xs-line-height: 1.375; - --text-heading-xs-font-weight: 400; + --text-heading-xs-font-weight: 300; --text-heading-xxs-font-size: 0.875rem; --text-heading-xxs-line-height: 1.375; - --text-heading-xxs-font-weight: 400; + --text-heading-xxs-font-weight: 300; --text-label-lg-font-size: 1rem; --text-label-lg-line-height: 1.5; --text-label-lg-font-weight: 400; @@ -745,21 +745,26 @@ --text-label-code-lg-font-weight: 400; --text-label-code-lg-letter-spacing: 0; --text-body-lg-font-size: 1rem; - --text-body-lg-line-height: 1.5; + --text-body-lg-font-weight: 300; + --text-body-lg-line-height: 1.375; --text-body-md-font-size: 1rem; - --text-body-md-line-height: 1.5; + --text-body-md-font-weight: 300; + --text-body-md-line-height: 1.375; --text-body-sm-font-size: 0.875rem; - --text-body-sm-line-height: 1.5; + --text-body-sm-font-weight: 300; + --text-body-sm-line-height: 1.375; --text-body-xs-font-size: 0.75rem; - --text-body-xs-line-height: 1.5; + --text-body-xs-font-weight: 300; + --text-body-xs-line-height: 1.375; + --text-body-xxs-font-size: 0.75rem; + --text-body-xxs-font-weight: 300; + --text-body-xxs-line-height: 1.5; --text-tag-sm-font-size: 0.75rem; --text-tag-sm-line-height: 1.25; - --text-tag-sm-font-weight: 600; + --text-tag-sm-font-weight: 400; --text-tag-md-font-size: 0.75rem; --text-tag-md-line-height: 1.25; - --text-tag-md-font-weight: 600; - --text-body-xxs-font-size: 0.75rem; - --text-body-xxs-line-height: 1.5; + --text-tag-md-font-weight: 400; --text-overline-md-font-family: Proto Mono; --text-overline-md-font-size: 0.75rem; --text-overline-md-line-height: 1.375; @@ -1182,24 +1187,34 @@ @utility text-body-lg { font-size: var(--text-body-lg-font-size); + font-weight: var(--text-body-lg-font-weight); line-height: var(--text-body-lg-line-height); } @utility text-body-md { font-size: var(--text-body-md-font-size); + font-weight: var(--text-body-md-font-weight); line-height: var(--text-body-md-line-height); } @utility text-body-sm { font-size: var(--text-body-sm-font-size); + font-weight: var(--text-body-sm-font-weight); line-height: var(--text-body-sm-line-height); } @utility text-body-xs { font-size: var(--text-body-xs-font-size); + font-weight: var(--text-body-xs-font-weight); line-height: var(--text-body-xs-line-height); } +@utility text-body-xxs { + font-size: var(--text-body-xxs-font-size); + font-weight: var(--text-body-xxs-font-weight); + line-height: var(--text-body-xxs-line-height); +} + @utility text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); @@ -1212,11 +1227,6 @@ font-weight: var(--text-tag-md-font-weight); } -@utility text-body-xxs { - font-size: var(--text-body-xxs-font-size); - line-height: var(--text-body-xxs-line-height); -} - @utility text-overline-md { font-family: var(--text-overline-md-font-family); font-size: var(--text-overline-md-font-size); diff --git a/packages/theme/dist/v4/globals.scss b/packages/theme/dist/v4/globals.scss index e07c0dd1d..b956f6ee0 100644 --- a/packages/theme/dist/v4/globals.scss +++ b/packages/theme/dist/v4/globals.scss @@ -173,7 +173,7 @@ /* - * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that + * `@aziontech/webkit` components use arbitrary values (`bg-(--x)`) that * Tailwind v4 only picks up when the source files are inside the scan. * Auto-detect scans the CWD only, so we point `@source` at the webkit * package via a monorepo-relative path (this file is under @@ -701,25 +701,25 @@ --text-big-number-lg-font-family: Proto Mono; --text-heading-2xl-font-size: 1.875rem; --text-heading-2xl-line-height: 1.25; - --text-heading-2xl-font-weight: 400; + --text-heading-2xl-font-weight: 300; --text-heading-xl-font-size: 1.25rem; --text-heading-xl-line-height: 1.25; - --text-heading-xl-font-weight: 400; + --text-heading-xl-font-weight: 300; --text-heading-lg-font-size: 1.125rem; --text-heading-lg-line-height: 1.25; - --text-heading-lg-font-weight: 400; + --text-heading-lg-font-weight: 300; --text-heading-md-font-size: 1rem; --text-heading-md-line-height: 1.25; - --text-heading-md-font-weight: 400; + --text-heading-md-font-weight: 300; --text-heading-sm-font-size: 0.875rem; --text-heading-sm-line-height: 1.375; - --text-heading-sm-font-weight: 400; + --text-heading-sm-font-weight: 300; --text-heading-xs-font-size: 1rem; --text-heading-xs-line-height: 1.375; - --text-heading-xs-font-weight: 400; + --text-heading-xs-font-weight: 300; --text-heading-xxs-font-size: 0.875rem; --text-heading-xxs-line-height: 1.375; - --text-heading-xxs-font-weight: 400; + --text-heading-xxs-font-weight: 300; --text-label-lg-font-size: 1rem; --text-label-lg-line-height: 1.5; --text-label-lg-font-weight: 400; @@ -745,21 +745,26 @@ --text-label-code-lg-font-weight: 400; --text-label-code-lg-letter-spacing: 0; --text-body-lg-font-size: 1rem; - --text-body-lg-line-height: 1.5; + --text-body-lg-font-weight: 300; + --text-body-lg-line-height: 1.375; --text-body-md-font-size: 1rem; - --text-body-md-line-height: 1.5; + --text-body-md-font-weight: 300; + --text-body-md-line-height: 1.375; --text-body-sm-font-size: 0.875rem; - --text-body-sm-line-height: 1.5; + --text-body-sm-font-weight: 300; + --text-body-sm-line-height: 1.375; --text-body-xs-font-size: 0.75rem; - --text-body-xs-line-height: 1.5; + --text-body-xs-font-weight: 300; + --text-body-xs-line-height: 1.375; + --text-body-xxs-font-size: 0.75rem; + --text-body-xxs-font-weight: 300; + --text-body-xxs-line-height: 1.5; --text-tag-sm-font-size: 0.75rem; --text-tag-sm-line-height: 1.25; - --text-tag-sm-font-weight: 600; + --text-tag-sm-font-weight: 400; --text-tag-md-font-size: 0.75rem; --text-tag-md-line-height: 1.25; - --text-tag-md-font-weight: 600; - --text-body-xxs-font-size: 0.75rem; - --text-body-xxs-line-height: 1.5; + --text-tag-md-font-weight: 400; --text-overline-md-font-family: Proto Mono; --text-overline-md-font-size: 0.75rem; --text-overline-md-line-height: 1.375; @@ -1182,24 +1187,34 @@ @utility text-body-lg { font-size: var(--text-body-lg-font-size); + font-weight: var(--text-body-lg-font-weight); line-height: var(--text-body-lg-line-height); } @utility text-body-md { font-size: var(--text-body-md-font-size); + font-weight: var(--text-body-md-font-weight); line-height: var(--text-body-md-line-height); } @utility text-body-sm { font-size: var(--text-body-sm-font-size); + font-weight: var(--text-body-sm-font-weight); line-height: var(--text-body-sm-line-height); } @utility text-body-xs { font-size: var(--text-body-xs-font-size); + font-weight: var(--text-body-xs-font-weight); line-height: var(--text-body-xs-line-height); } +@utility text-body-xxs { + font-size: var(--text-body-xxs-font-size); + font-weight: var(--text-body-xxs-font-weight); + line-height: var(--text-body-xxs-line-height); +} + @utility text-tag-sm { font-size: var(--text-tag-sm-font-size); line-height: var(--text-tag-sm-line-height); @@ -1212,11 +1227,6 @@ font-weight: var(--text-tag-md-font-weight); } -@utility text-body-xxs { - font-size: var(--text-body-xxs-font-size); - line-height: var(--text-body-xxs-line-height); -} - @utility text-overline-md { font-family: var(--text-overline-md-font-family); font-size: var(--text-overline-md-font-size); diff --git a/packages/theme/src/tokens/semantic/texts.data.js b/packages/theme/src/tokens/semantic/texts.data.js index a8b12d985..fe7aeb56e 100644 --- a/packages/theme/src/tokens/semantic/texts.data.js +++ b/packages/theme/src/tokens/semantic/texts.data.js @@ -44,37 +44,37 @@ export const textsData = { 'text-heading-2xl': { fontSize: { _: fontSize['3xl'], sm: fontSize['5xl'], md: fontSize['6xl'] }, lineHeight: leading.tight, - fontWeight: fontWeight.normal + fontWeight: fontWeight.light }, 'text-heading-xl': { fontSize: { _: fontSize.xl, sm: fontSize['3xl'], md: fontSize['4xl'] }, lineHeight: leading.tight, - fontWeight: fontWeight.normal + fontWeight: fontWeight.light }, 'text-heading-lg': { fontSize: { _: fontSize.lg, md: fontSize['3xl'] }, lineHeight: leading.tight, - fontWeight: fontWeight.normal + fontWeight: fontWeight.light }, 'text-heading-md': { fontSize: { _: fontSize.base, sm: fontSize.xl, md: fontSize['2xl'] }, lineHeight: leading.tight, - fontWeight: fontWeight.normal + fontWeight: fontWeight.light }, 'text-heading-sm': { fontSize: { _: fontSize.sm, sm: fontSize.base, md: fontSize.lg }, lineHeight: leading.snug, - fontWeight: fontWeight.normal + fontWeight: fontWeight.light }, 'text-heading-xs': { fontSize: fontSize.base, lineHeight: leading.snug, - fontWeight: fontWeight.normal + fontWeight: fontWeight.light }, 'text-heading-xxs': { fontSize: fontSize.sm, lineHeight: leading.snug, - fontWeight: fontWeight.normal + fontWeight: fontWeight.light }, 'text-label-lg': { fontSize: fontSize.base, @@ -114,33 +114,38 @@ export const textsData = { }, 'text-body-lg': { fontSize: { _: fontSize.base, md: fontSize.lg }, - lineHeight: leading.normal + fontWeight: fontWeight.light, + lineHeight: leading.snug }, 'text-body-md': { fontSize: fontSize.base, - lineHeight: leading.normal + fontWeight: fontWeight.light, + lineHeight: leading.snug }, 'text-body-sm': { fontSize: fontSize.sm, - lineHeight: leading.normal + fontWeight: fontWeight.light, + lineHeight: leading.snug }, 'text-body-xs': { fontSize: fontSize.xs, + fontWeight: fontWeight.light, + lineHeight: leading.snug + }, + 'text-body-xxs': { + fontSize: fontSize.xs, + fontWeight: fontWeight.light, lineHeight: leading.normal }, 'text-tag-sm': { fontSize: fontSize.xs, lineHeight: leading.tight, - fontWeight: fontWeight.semibold + fontWeight: fontWeight.normal }, 'text-tag-md': { fontSize: fontSize.xs, lineHeight: leading.tight, - fontWeight: fontWeight.semibold - }, - 'text-body-xxs': { - fontSize: fontSize.xs, - lineHeight: leading.normal + fontWeight: fontWeight.normal }, 'text-overline-md': { fontFamily: fontFamily.display, diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json index 57c775d9f..4c3fbc626 100644 --- a/packages/webkit/catalog.json +++ b/packages/webkit/catalog.json @@ -555,14 +555,19 @@ "--text-big-number-sm-font-weight", "--text-big-number-sm-line-height", "--text-body-lg-font-size", + "--text-body-lg-font-weight", "--text-body-lg-line-height", "--text-body-md-font-size", + "--text-body-md-font-weight", "--text-body-md-line-height", "--text-body-sm-font-size", + "--text-body-sm-font-weight", "--text-body-sm-line-height", "--text-body-xs-font-size", + "--text-body-xs-font-weight", "--text-body-xs-line-height", "--text-body-xxs-font-size", + "--text-body-xxs-font-weight", "--text-body-xxs-line-height", "--text-button-lg-font-family", "--text-button-lg-font-size", @@ -1305,14 +1310,19 @@ "--text-big-number-sm-font-weight", "--text-big-number-sm-line-height", "--text-body-lg-font-size", + "--text-body-lg-font-weight", "--text-body-lg-line-height", "--text-body-md-font-size", + "--text-body-md-font-weight", "--text-body-md-line-height", "--text-body-sm-font-size", + "--text-body-sm-font-weight", "--text-body-sm-line-height", "--text-body-xs-font-size", + "--text-body-xs-font-weight", "--text-body-xs-line-height", "--text-body-xxs-font-size", + "--text-body-xxs-font-weight", "--text-body-xxs-line-height", "--text-button-lg-font-family", "--text-button-lg-font-size", From e02a6fbc70578b6b5e3e3fb2f16902f05680dd87 Mon Sep 17 00:00:00 2001 From: Gab Date: Mon, 10 Aug 2026 17:27:51 -0300 Subject: [PATCH 2/3] fix(webkit): keep the Message icon on the first line when the copy wraps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The icon and the copy were siblings of the root's `items-center` row, so a message whose text wrapped to two or more lines drifted the icon to the vertical middle of the block instead of leaving it beside the first line. The icon and the copy now share an `items-start` block, and the icon rides an alignment box the height of the copy's line box — `h-5.25` (21px) at medium, `h-4.5` (18px) at small — so it centers on the first line and stays there at any wrap depth. --- .specs/message.md | 5 +-- .../components/feedback/message/message.vue | 35 +++++++++++-------- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/.specs/message.md b/.specs/message.md index 39351e8c1..a96b388e7 100644 --- a/.specs/message.md +++ b/.specs/message.md @@ -7,9 +7,9 @@ spec_version: 1 figma: url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=478-892 node_id: 478:892 -checksum: 7eb084f26d57f6a7e176936035f2f2871d6b15a536ec376a60da89d1a989e712 +checksum: 8ca61e4ceb1c1714a37ed3723f8d642264cbe06ca309f7d37b95f4bdbea54724 created: 2026-05-22 -last_updated: 2026-07-29 +last_updated: 2026-08-10 --- # Message — Component Spec @@ -85,6 +85,7 @@ import Message from '@aziontech/webkit/message' | inline link (anchor inside the message) | `.text-link` | | leading icon glyph | `.text-label-md` — 14px at both sizes; the icon does not scale with the banner | | leading icon box | `size-3.5` — 14px, matching the glyph so the row height is stable | +| leading icon alignment | the icon and the copy share an `items-start` block, and the icon rides an alignment box the height of the copy's line box (`h-5.25` medium / `h-4.5` small) — so it centers on the **first** line and stays there when the copy wraps, instead of drifting to the middle of the block | | action typography | `.text-button-md` — both Button sizes use this step | | action size | tracks `size`: `small` → Button `small` (28px), `medium` → Button `medium` (32px) | | action surface | `var(--secondary)` — the built-in action is a `secondary` Button, so it reads as a control against every severity surface rather than as body copy | diff --git a/packages/webkit/src/components/feedback/message/message.vue b/packages/webkit/src/components/feedback/message/message.vue index 925a898ce..6aea53845 100644 --- a/packages/webkit/src/components/feedback/message/message.vue +++ b/packages/webkit/src/components/feedback/message/message.vue @@ -173,20 +173,27 @@ class="relative box-border flex w-full flex-wrap items-center gap-(--spacing-sm) break-words rounded-(--shape-button) border border-[length:var(--border-width-default,1px)] py-1.5 shadow-(--shadow-xs) data-[size=small]:min-h-8 data-[size=small]:px-(--spacing-xs) data-[size=medium]:min-h-9 data-[size=medium]:px-(--spacing-sm) data-[trailing]:pr-(--spacing-xs) data-[severity=info]:border-(--info-border) data-[severity=info]:bg-(--info) data-[severity=success]:border-(--success-border) data-[severity=success]:bg-(--success) data-[severity=warning]:border-(--warning-border) data-[severity=warning]:bg-(--warning) data-[severity=danger]:border-(--danger-border) data-[severity=danger]:bg-(--danger)" @keydown="handleEscape" > -