Merge pull request #502 from aziontech/feat/update-overline

isaquebock · web-flow · commit a1e9ffd7032f · 2026-04-01T15:09:51.000-03:00
feat: improve overline and imports
diff --git a/.plans/storybook-foundations.md b/.plans/storybook-foundations.md
@@ -23,8 +23,8 @@ The webkit monorepo has 81 component stories but zero design system foundations
 apps/storybook/src/
 ├── foundations-data/
 │   ├── tokens.js          ← derives color data from @aziontech/theme/tokens
-│   ├── typography.js      ← mirrors semantic-texts-plugin.js values as JS array
-│   └── spacing.js         ← mirrors semantic-spacing-plugin.js values as JS array
+│   ├── typography.js      ← mirrors semantic-texts-plugin values as JS array
+│   └── spacing.js         ← mirrors semantic-spacing-plugin values as JS array
 ├── components/foundations/
 │   ├── ColorSwatch.vue    ← single color chip (inline style for bg)
 │   ├── ColorPalette.vue   ← grid of swatches under a heading
@@ -71,10 +71,10 @@ const { light, dark } = createCssVars()
 - **Semantic groups**: Walk `textSemantic.light` keys → look up `light['--text-' + key]` and `dark['--text-' + key]`
 
 ### Typography
-Static JS array in `typography.js` mirroring the CSS values from `packages/theme/src/tailwind/semantic-texts-plugin.js`. Class name strings must appear as literals (not dynamically constructed) so Tailwind's scanner includes them.
+Static JS array in `typography.js` mirroring the CSS values from `packages/theme/src/tailwind/semantic-texts-plugin`. Class name strings must appear as literals (not dynamically constructed) so Tailwind's scanner includes them.
 
 ### Spacing
-Same approach as Typography — static array mirroring `semantic-spacing-plugin.js`.
+Same approach as Typography — static array mirroring `semantic-spacing-plugin`.
 
 ### Icons
 ```js
@@ -217,6 +217,6 @@ Creates the entire infrastructure. All subsequent phases reuse it.
 - `apps/storybook/.storybook/preview.js` — modify `storySort.order`
 - `packages/theme/src/tokens/build/css-vars.js` — `createCssVars()` source
 - `packages/theme/src/tokens/index.js` — re-exports all token primitives and utilities
-- `packages/theme/src/tailwind/semantic-texts-plugin.js` — typography CSS values
-- `packages/theme/src/tailwind/semantic-spacing-plugin.js` — spacing CSS values
+- `packages/theme/src/tailwind/semantic-texts-plugin` — typography CSS values
+- `packages/theme/src/tailwind/semantic-spacing-plugin` — spacing CSS values
 - `packages/icons/dist/catalog.json` — icon manifest (87 ai + 315 pi)
diff --git a/apps/storybook/src/foundations/data/spacing.js b/apps/storybook/src/foundations/data/spacing.js
@@ -1,7 +1,7 @@
 /**
  * Foundations / Spacing — data layer
  *
- * Static JS array mirroring the CSS values from semantic-spacing-plugin.js.
+ * Static JS array mirroring the CSS values from semantic-spacing-plugin.
  * Class name strings appear as literals so Tailwind's scanner includes them.
  */
 
diff --git a/apps/storybook/src/foundations/data/typography.js b/apps/storybook/src/foundations/data/typography.js
@@ -1,7 +1,7 @@
 /**
  * Foundations / Typography — data layer
  *
- * Static JS array mirroring the CSS values from semantic-texts-plugin.js.
+ * Static JS array mirroring the CSS values from semantic-texts-plugin.
  * Class name strings appear as literals so Tailwind's scanner includes them.
  */
 
diff --git a/apps/storybook/src/stories/core/Overline.stories.js b/apps/storybook/src/stories/core/Overline.stories.js
@@ -44,7 +44,7 @@ Use Overline for:
     },
     size: {
       control: 'select',
-      options: ['xs', 'sm', 'lg'],
+      options: ['xs', 'sm', 'md'],
       description: 'Text size',
       defaultValue: 'xs',
       table: {
diff --git a/apps/storybook/src/stories/foundations/Spacing.stories.js b/apps/storybook/src/stories/foundations/Spacing.stories.js
@@ -20,7 +20,7 @@ export default {
       description: {
         component: [
           'Spacing system documentation — semantic spacing classes for Azion Design System.',
-          'All spacing classes are defined in `@aziontech/theme/tailwind/semantic-spacing-plugin.js`.',
+          'All spacing classes are defined in `@aziontech/theme/tailwind/semantic-spacing-plugin`.',
         ].join(' '),
       },
     },
@@ -83,7 +83,7 @@ export const Overview = {
         >
           <h3 class="text-heading-sm text-default m-0 mb-1">{{ group.label }}</h3>
           <p class="text-body-xs text-muted m-0 mb-4">{{ group.description }}</p>
-          
+
           <div class="border border-default rounded-lg px-5">
             <SpacingPreview
               v-for="token in group.tokens"
diff --git a/apps/storybook/src/stories/foundations/Typography.stories.js b/apps/storybook/src/stories/foundations/Typography.stories.js
@@ -20,7 +20,7 @@ export default {
       description: {
         component: [
           'Typography system documentation — semantic text styles for Azion Design System.',
-          'All typography classes are defined in `@aziontech/theme/tailwind/semantic-texts-plugin.js`.',
+          'All typography classes are defined in `@aziontech/theme/tailwind/semantic-texts-plugin`.',
         ].join(' '),
       },
     },
@@ -83,7 +83,7 @@ export const Overview = {
         >
           <h3 class="text-heading-sm text-default m-0 mb-1">{{ group.label }}</h3>
           <p class="text-body-xs text-muted m-0 mb-4">{{ group.description }}</p>
-          
+
           <div class="border border-default rounded-lg px-5">
             <TypographyPreview
               v-for="token in group.tokens"
diff --git a/apps/storybook/tailwind.config.js b/apps/storybook/tailwind.config.js
@@ -1,9 +1,9 @@
 import typography from '@tailwindcss/typography'
-import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js'
-import semanticColors from '@aziontech/theme/tailwind/semantic-colors-plugin.js'
-import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin.js'
-import semanticSpacing from '@aziontech/theme/tailwind/semantic-spacing-plugin.js'
-import semanticAnimations from '@aziontech/theme/tailwind/semantic-animations-plugin.js'
+import { theme } from '@aziontech/theme/tailwind/tailwind-theme'
+import semanticColors from '@aziontech/theme/tailwind/semantic-colors-plugin'
+import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin'
+import semanticSpacing from '@aziontech/theme/tailwind/semantic-spacing-plugin'
+import semanticAnimations from '@aziontech/theme/tailwind/semantic-animations-plugin'
 
 /** @type {import('tailwindcss').Config} */
 export default {
diff --git a/docs/repository-overview.md b/docs/repository-overview.md
@@ -119,7 +119,7 @@ src/tokens/
 │   └── borders.js    # Border colors for light/dark themes
 └── build/
     ├── preset.js         # Tailwind preset
-    ├── tailwind-plugin.js # Static utility classes plugin
+    ├── tailwind-plugin # Static utility classes plugin
     ├── css-vars.js       # CSS variable generation
     └── refs.js           # Token reference system
 ```
diff --git a/packages/theme/README.md b/packages/theme/README.md
@@ -364,7 +364,7 @@ export { tokenRef } from './build/refs.js';
 export { resolveRefsToCssVars } from './build/resolve.js';
 export { createCssVars, cssVarsString, injectCssVars } from './build/css-vars.js';
 export { preset } from './build/preset.js';
-export { tokenUtilities } from './build/tailwind-plugin.js';
+export { tokenUtilities } from './build/tailwind-plugin';
 ```
 
 ## Token Resolution
@@ -425,7 +425,7 @@ packages/theme/
 │       └── build/         # Build utilities
 │           ├── preset.js
 │           ├── css-vars.js
-│           └── tailwind-plugin.js
+│           └── tailwind-plugin
 └── package.json
 ```
 
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -58,12 +58,12 @@
     "./tokens/semantic/borders": "./tokens.js",
     "./tokens/build/preset": "./src/tokens/build/preset.js",
     "./tokens/build/tailwind-helper": "./src/tokens/build/tailwind-helper.js",
-    "./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin.js",
+    "./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin",
     "./tokens/build/css-vars.js": "./src/tokens/build/css-vars.js",
-    "./tailwind/tailwind-theme.js": "./src/tailwind/tailwind-theme.js",
-    "./tailwind/semantic-colors-plugin.js": "./src/tailwind/semantic-colors-plugin.js",
-    "./tailwind/semantic-texts-plugin.js": "./src/tailwind/semantic-texts-plugin.js",
-    "./tailwind/semantic-spacing-plugin.js": "./src/tailwind/semantic-spacing-plugin.js",
-    "./tailwind/semantic-animations-plugin.js": "./src/tailwind/semantic-animations-plugin.js"
+    "./tailwind/tailwind-theme": "./src/tailwind/tailwind-theme.js",
+    "./tailwind/semantic-colors-plugin": "./src/tailwind/semantic-colors-plugin.js",
+    "./tailwind/semantic-texts-plugin": "./src/tailwind/semantic-texts-plugin.js",
+    "./tailwind/semantic-spacing-plugin": "./src/tailwind/semantic-spacing-plugin.js",
+    "./tailwind/semantic-animations-plugin": "./src/tailwind/semantic-animations-plugin.js"
   }
 }
diff --git a/packages/theme/src/tailwind/semantic-animations-plugin.js b/packages/theme/src/tailwind/semantic-animations-plugin.js
@@ -6,7 +6,7 @@
  * Usage in tailwind.config.js:
  * ```javascript
  * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticAnimations from '@aziontech/theme/tailwind/semantic-animations-plugin.js';
+ * import semanticAnimations from '@aziontech/theme/tailwind/semantic-animations-plugin';
  *
  * export default {
  *   theme,
diff --git a/packages/theme/src/tailwind/semantic-colors-plugin.js b/packages/theme/src/tailwind/semantic-colors-plugin.js
@@ -6,7 +6,7 @@
  * Usage in tailwind.config.js:
  * ```javascript
  * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticColors from '@aziontech/theme/tailwind/semantic-colors-plugin.js';
+ * import semanticColors from '@aziontech/theme/tailwind/semantic-colors-plugin';
  *
  * export default {
  *   theme,
diff --git a/packages/theme/src/tailwind/semantic-spacing-plugin.js b/packages/theme/src/tailwind/semantic-spacing-plugin.js
@@ -6,7 +6,7 @@
  * Usage in tailwind.config.js:
  * ```javascript
  * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticSpacing from '@aziontech/theme/tailwind/semantic-spacing-plugin.js';
+ * import semanticSpacing from '@aziontech/theme/tailwind/semantic-spacing-plugin';
  *
  * export default {
  *   theme,
diff --git a/packages/theme/src/tailwind/semantic-texts-plugin.js b/packages/theme/src/tailwind/semantic-texts-plugin.js
@@ -6,7 +6,7 @@
  * Usage in tailwind.config.js:
  * ```javascript
  * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin.js';
+ * import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin';
  *
  * export default {
  *   theme,
diff --git a/packages/webkit/src/components/overline/overline.vue b/packages/webkit/src/components/overline/overline.vue
@@ -9,8 +9,8 @@ const props = defineProps({
   },
   size: {
     type: String,
-    default: 'xs',
-    validator: (value) => ['xs', 'sm', 'lg'].includes(value)
+    default: 'sm',
+    validator: (value) => ['xs', 'sm', 'md'].includes(value)
   },
   showCursor: {
     type: Boolean,
@@ -34,9 +34,9 @@ const colorClass = computed(() => {
 
 const sizeClass = computed(() => {
   const sizes = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    lg: 'text-lg'
+    xs: 'text-overline-xs',
+    sm: 'text-overline-sm',
+    md: 'text-overline-md'
   }
   return sizes[props.size] || 'text-xs'
 })
@@ -49,13 +49,13 @@ const sizeClass = computed(() => {
   >
     <span
       v-if="prefix"
-      class="font-proto-mono text-default font-medium leading-[1.2] tracking-[0.7px] whitespace-nowrap shrink-0 text-center not-italic"
+      class="font-proto-mono text-default font-medium leading-1 tracking-tightest whitespace-nowrap shrink-0 text-center not-italic"
       :class="[sizeClass]"
       >
       {{ prefix }}
     </span>
     <span
-      class="font-proto-mono text-sm font-medium leading-[1.2] tracking-[0.7px] whitespace-nowrap shrink-0 text-center not-italic uppercase"
+      class="font-proto-mono font-medium leading-1 tracking-tightest whitespace-nowrap shrink-0 text-center not-italic uppercase"
       :class="[colorClass, sizeClass]"
     >
       <slot />

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`/**`
`2`	`2`	`* Foundations / Spacing — data layer`
`3`	`3`	`*`
`4`		`- * Static JS array mirroring the CSS values from semantic-spacing-plugin.js.`
	`4`	`+ * Static JS array mirroring the CSS values from semantic-spacing-plugin.`
`5`	`5`	`* Class name strings appear as literals so Tailwind's scanner includes them.`
`6`	`6`	`*/`
`7`	`7`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`/**`
`2`	`2`	`* Foundations / Typography — data layer`
`3`	`3`	`*`
`4`		`- * Static JS array mirroring the CSS values from semantic-texts-plugin.js.`
	`4`	`+ * Static JS array mirroring the CSS values from semantic-texts-plugin.`
`5`	`5`	`* Class name strings appear as literals so Tailwind's scanner includes them.`
`6`	`6`	`*/`
`7`	`7`