@adea-ai/ui 0.63.4 → 0.65.0

package/src/lib/tokens.ts

@@ -434,6 +434,9 @@ export const typographyTokens: TokenDefinition[] = [
   },
 ]
 
+/** Height tokens also size both axes of icon controls through Tailwind's --size
+ * namespace. Padding has its own --spacing mapping. Nominal pixel descriptions
+ * use a 16px rem; rendered dimensions follow the consumer's root font size. */
 export const densityTokens: TokenDefinition[] = [
   { name: 'control-height-2xs', kind: 'dimension', description: '20px — an inline chip control.' },
   { name: 'control-height-xs', kind: 'dimension', description: '24px — a dense table row action.' },

package/src/styles/theme.css

@@ -826,6 +826,15 @@
   --height-control-md: var(--control-height-md);
   --height-control-lg: var(--control-height-lg);
   --height-control-xl: var(--control-height-xl);
+  /* Tailwind `size-*` prefers --size-* and then --spacing-*. Without this
+     bridge, square icon controls use the padding ladder below for both axes.
+     Height, square size and inline padding remain distinct semantic contracts. */
+  --size-control-2xs: var(--control-height-2xs);
+  --size-control-xs: var(--control-height-xs);
+  --size-control-sm: var(--control-height-sm);
+  --size-control-md: var(--control-height-md);
+  --size-control-lg: var(--control-height-lg);
+  --size-control-xl: var(--control-height-xl);
   --height-row-sm: var(--row-height-sm);
   --height-row-md: var(--row-height-md);
   --height-row-lg: var(--row-height-lg);