From 067c91fbdeb7897fc2381f4a382abc4f24cb9a3f Mon Sep 17 00:00:00 2001 From: Isaque Santos Date: Thu, 20 Aug 2026 21:53:06 -0300 Subject: [PATCH 1/2] fix(styles): compile the design system's button typography webkit's Button and IconButton emit `text-button-lg` / `text-button-md` on their root, but neither class existed in the build, so every button label fell back to *inheriting* the surrounding font size: 16px in the chrome and 18px inside the article's prose, against the 14px / 12px the tokens prescribe. A label 2-4px too large inside a fixed-height box is why the buttons read as oversized -- "Contato" measured 91px wide against 75px. The cause is where @aziontech/theme is loaded. It comes in through a JS-side `import '@aziontech/theme'` in BaseLayout.astro, i.e. as a standalone stylesheet, and Tailwind only compiles `@utility` declarations that are part of the stylesheet graph it processes. The `:root` tokens still resolve -- which is why colour and spacing always worked -- but none of the design system's generated typography classes are emitted. Verified by injecting `
`: 16px/24px, no rule applied, while `--text-button-lg-font-size` resolves to 0.875rem. The two blocks added here are copied verbatim from the theme's own globals.css and reference the same tokens, so this is not a fork of the values. Defining the canonical class names -- rather than passing `text-[length:var(--...)]` at each call site -- means the fix reaches every webkit component that already references them without touching a single component. Marked as a shim: once the theme is imported through this entry, its own definitions take over and these become redundant. The rest of the scale (`text-body-*`, `text-heading-*`, `text-label-*`, `text-tag-*`) is still uncompiled -- the article's typography rides on @tailwindcss/typography because of it, which is a separate change. Co-Authored-By: Claude Opus 5 --- src/styles/main.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/styles/main.css b/src/styles/main.css index a13c61d46a..b634e8541d 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -18,6 +18,48 @@ @plugin '@tailwindcss/typography'; +/* + SHIM -- remover quando o import do @aziontech/theme mudar de lugar. + + These two blocks are copied verbatim from @aziontech/theme's own globals.css. + They exist here because the theme is loaded as a standalone stylesheet (a JS + `import '@aziontech/theme'` in BaseLayout.astro), so Tailwind never sees its + `@utility` declarations and none of the design system's typography classes are + compiled into the build. The `:root` tokens still resolve -- only the classes + are missing. + + Consequence for buttons specifically: webkit's Button and IconButton emit + `text-button-lg` / `text-button-md` on their root, so with the class absent + every button label fell back to *inheriting* the surrounding font size -- + 16px in the chrome and 18px inside the article's prose, against the 14px / + 12px the tokens prescribe. That is why the buttons read as oversized: a label + 2-4px too large inside a fixed-height box. + + Defining the utilities here (rather than passing `text-[length:var(--…)]` at + each call site) keeps the canonical class name working, so the fix reaches + every webkit component that already references it without touching a single + component. Same tokens, same values: when the theme is imported through this + entry, its own definitions take over and these become redundant. + + The rest of the scale (`text-body-*`, `text-heading-*`, `text-label-*`, + `text-tag-*`) is still uncompiled -- see the typography plan. +*/ +@utility text-button-lg { + font-family: var(--text-button-lg-font-family); + font-size: var(--text-button-lg-font-size); + font-weight: var(--text-button-lg-font-weight); + line-height: var(--text-button-lg-line-height); + letter-spacing: var(--text-button-lg-letter-spacing); +} + +@utility text-button-md { + font-family: var(--text-button-md-font-family); + font-size: var(--text-button-md-font-size); + font-weight: var(--text-button-md-font-weight); + line-height: var(--text-button-md-line-height); + letter-spacing: var(--text-button-md-letter-spacing); +} + /* Dark mode is driven by the `.dark` class on (set by DropdownThemeSwitcher, alongside @aziontech/theme's own `.azion-dark`), not by the OS preference that Tailwind v4 defaults to. */ From b98bc1a33ec59c343417a7561adb4d820945365b Mon Sep 17 00:00:00 2001 From: Isaque Santos Date: Thu, 20 Aug 2026 21:53:22 -0300 Subject: [PATCH 2/2] feat(header): rebuild the primary navigation on webkit's NavigationMenu 417 lines -> 117. The header's nav hand-rolled a mega-menu: open/close state, an outside-click listener, an Escape handler, hover intent, rotating chevrons, panel positioning and a `.wk-nav-button*` CSS block ported from azion-theme's PrimeVue button. @aziontech/webkit ships NavigationMenu, which owns every one of those concerns, so all of it is gone. The composition follows the design system's own reference usage (apps/webkit-sample, SiteNav.vue): a List is the bar, each entry is an Item, and an entry renders either a plain Trigger with an `href` or a Trigger + Content panel whose columns are nested Lists of `layout="entry"` items. Both shapes are kept even though this repo's header data only ever takes the first: `src/i18n/*/header.ts` ships three entries with `items: []`, i.e. three plain links. The whole panel apparatus was unreachable -- and so were the `rightBlock`, `overline`, `external` and `icon` keys its template read, none of which appear in any header data file. Keeping the panel branch is what makes adding a submenu a data change rather than a component change. `@aziontech/webkit` joins the two `noExternal` lists in astro.config.ts, alongside the entry that was already there for `@aziontech/theme`. The `navigation-menu` export is an `index.js` that imports `.vue` files, and Node cannot load those during SSR ("Unknown file extension .vue" -- Astro's own hint names this fix). Components whose entry is itself a `.vue` or a `.ts` happen to work either way, which is why this only surfaced now, after Button, Tag, Brand and Dropdown had already been adopted. Visibility classes stay on the Item wrapper rather than the Trigger: a control's base `inline-flex` outranks a `hidden` passed in as a class, so an element told to hide itself would stay visible. Same cascade trap the header CTAs hit, and the design system's own sample carries a note about it. Co-Authored-By: Claude Opus 5 --- astro.config.ts | 10 +- src/components/HeaderMenuNav.vue | 524 +++++++------------------------ 2 files changed, 120 insertions(+), 414 deletions(-) diff --git a/astro.config.ts b/astro.config.ts index 802ecdc8e2..356cebb0df 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -90,7 +90,13 @@ export default defineConfig({ if (name === 'client') return null; return { resolve: { - noExternal: ['@astrojs/vue', '@aziontech/theme'], + // `@aziontech/webkit` has to be bundled, not externalised: + // its `navigation-menu` entry is an `index.js` that imports + // `.vue` files, and Node cannot load those on its own + // ("Unknown file extension .vue"). Components whose entry is + // itself a `.vue` or a `.ts` happen to work either way, which + // is why this only surfaced when NavigationMenu was adopted. + noExternal: ['@astrojs/vue', '@aziontech/theme', '@aziontech/webkit'], external: ['vue'] } }; @@ -106,7 +112,7 @@ export default defineConfig({ }) ], ssr: { - noExternal: ['@astrojs/vue', '@aziontech/theme'], + noExternal: ['@astrojs/vue', '@aziontech/theme', '@aziontech/webkit'], external: ['vue'] }, optimizeDeps: { diff --git a/src/components/HeaderMenuNav.vue b/src/components/HeaderMenuNav.vue index 8f50837408..df436a867a 100644 --- a/src/components/HeaderMenuNav.vue +++ b/src/components/HeaderMenuNav.vue @@ -1,417 +1,117 @@ - -