From f68666d2cadfc99589a811e36378a24b62bac93e Mon Sep 17 00:00:00 2001 From: Isaque Santos Date: Thu, 20 Aug 2026 20:57:59 -0300 Subject: [PATCH 1/6] feat(styles): register @aziontech/webkit sources with Tailwind The webkit components paint themselves with Tailwind utilities, and node_modules sits outside Tailwind's automatic content detection -- so without this import every one of them renders unstyled. The package ships the `@source` directive itself, hence importing it by name instead of hardcoding a ../node_modules path, which keeps it immune to pnpm's symlink layout. Co-Authored-By: Claude Opus 5 --- src/styles/main.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/styles/main.css b/src/styles/main.css index 9dabf1ad78..a13c61d46a 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -5,6 +5,15 @@ is no tailwind.config.js / preset step. */ @import 'tailwindcss' important; +/* + Registers @aziontech/webkit's own sources with Tailwind so the utility + classes its components emit are compiled here. node_modules is outside + Tailwind's automatic content detection, so without this every webkit + component (Button, IconButton, ...) renders unstyled. The package ships + the `@source` for us, hence the import by name instead of a hardcoded + ../node_modules path (immune to pnpm's symlink layout). +*/ +@import '@aziontech/webkit/styles'; @import './base.css'; @plugin '@tailwindcss/typography'; From 99a863ee10193cd4aaf1749262253345b8bcf0b1 Mon Sep 17 00:00:00 2001 From: Isaque Santos Date: Thu, 20 Aug 2026 20:58:19 -0300 Subject: [PATCH 2/6] feat(components): replace hand-rolled buttons with the webkit Button family Every button in the docs was a local re-implementation of a component the design system already ships -- mostly ports of PrimeVue's `.p-button` box model repainted with theme tokens. They now come from @aziontech/webkit: - LinkButton delegates to Button / IconButton with its prop surface untouched, so the ~1.5k content call sites are unchanged. Variants collapse onto webkit's kinds; `severity="secondary"` maps to webkit `secondary`, the same kind HeroButton now uses for that value, so one authored prop no longer renders as two different buttons. - Header's CTAs, the drawer's open/close triggers and bottom CTAs, the search trigger, the `esc` keycap and the Ask AI split button all move over. The split button is composed the way webkit builds its own SplitButton (Button + IconButton inside a Dropdown), which also retires its hand-written outside-click and Escape handling. - HeroButton keeps its link variants: `link`, `linkExternal` and `linkSecondary` are text links with an animated underline and a trailing arrow, which webkit's Button has no variant for. Controls that only look like buttons stay put: the menubar triggers, the combobox triggers in SelectLang / DropdownThemeSwitcher, and the Algolia tab strip are not buttons, and webkit's label-only Button cannot host their content or their ARIA. Two things worth knowing for the next migration. webkit's Button and IconButton declare `inheritAttrs: false` and forward only `class` and `data-testid`, so the `title` tooltips those anchors carried cannot reach the DOM -- the visible label is the accessible name either way. And because Tailwind runs in important mode, `.hidden` is emitted before `.inline-flex` at equal specificity: a visibility class sitting next to webkit's own display utility loses the cascade, so it has to go on a wrapper. That is why the header's `destak` entry is wrapped. Also fixes two pieces of prop plumbing that the migration made visible. HeroHome dropped the `outlined` / `severity` keys its content authors actually write, so both home CTAs fell through to one variant; and its size ternary only produced `large` for `size: 'medium'`, which nothing sets, so every hero CTA rendered at the smallest size. That went unnoticed while HeroButton drew its own box from `customClass`. Removes the inline scroll script in BaseLayout that swapped the header CTA's variant classes: the element it mutated ships `hidden` with no breakpoint that reveals it, so it was never displayed. Co-Authored-By: Claude Opus 5 --- src/components/Header.vue | 151 ++++----- src/components/webkit/AskAISplitButton.vue | 148 ++++---- src/components/webkit/HeaderRightSidebar.vue | 155 +++------ src/components/webkit/HeaderSearchDialog.vue | 20 +- src/components/webkit/HeroButton.vue | 142 ++++---- src/components/webkit/HeroHome.vue | 41 ++- src/components/webkit/KeyboardKey.vue | 22 +- src/components/webkit/LinkButton.vue | 337 ++++++------------- src/layouts/BaseLayout.astro | 34 -- 9 files changed, 425 insertions(+), 625 deletions(-) diff --git a/src/components/Header.vue b/src/components/Header.vue index 9348e6b59d..0aa17b694f 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -9,27 +9,38 @@
- + - - {{ menu.text }} - - + + /> - + /* + The old CSS drew a compact box (spacing-xxs/xs padding) with the *large* + type token (--text-button-lg-font-size). webkit ties the two together: + `large` keeps that typography (h-10), `medium` would shrink the label to + text-button-md. Preserving the type scale is what keeps these buttons + legible in body copy, so legacy `medium` maps to webkit `large` and only + `small` stays small. + */ + const webkitSize = computed(() => (props.size === 'small' ? 'small' : 'large')) + diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 715c241de4..ed73124bc5 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -273,40 +273,6 @@ const translatedPages = await (async (c) => { - - -