fix(tokens): add missing icon sizes

.changeset/few-berries-pretend.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Change vertical alignment of icons to sub.

.changeset/polite-donuts-design.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Add missing icon size tokens for header presets.

src/icons/Icon.tsx

@@ -17,7 +17,7 @@ const IconElement = tasty({
   styles: {
     display: 'inline-grid',
     placeContent: 'center',
-    verticalAlign: 'middle',
+    verticalAlign: 'sub',
     width: '1em 1em',
     height: 'min 1em',
     fontSize: 'var(--icon-size, var(--font-size))',

src/stories/Typography.stories.tsx

@@ -5,6 +5,7 @@ import {
   Flow,
   Space,
   Block,
+  CubeIcon,
 } from '../index';
 
 export default {
@@ -15,61 +16,61 @@ export const Presets = {
   render: () => (
     <Flow gap="1x" color="#dark">
       <Block preset="h1">
-        The quick brown fox jumps over the lazy dog - h1
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h1
       </Block>
       <Block preset="h2">
-        The quick brown fox jumps over the lazy dog - h2
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h2
       </Block>
       <Block preset="h3">
-        The quick brown fox jumps over the lazy dog - h3
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h3
       </Block>
       <Block preset="h4">
-        The quick brown fox jumps over the lazy dog - h4
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h4
       </Block>
       <Block preset="h5">
-        The quick brown fox jumps over the lazy dog - h5
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h5
       </Block>
       <Block preset="h6">
-        The quick brown fox jumps over the lazy dog - h6
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - h6
       </Block>
       <Block preset="t1">
-        The quick brown fox jumps over the lazy dog - t1
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t1
       </Block>
       <Block preset="t2">
-        The quick brown fox jumps over the lazy dog - t2
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t2
       </Block>
       <Block preset="t2m">
-        The quick brown fox jumps over the lazy dog - t2m
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t2m
       </Block>
       <Block preset="t3">
-        The quick brown fox jumps over the lazy dog - t3
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t3
       </Block>
       <Block preset="t3m">
-        The quick brown fox jumps over the lazy dog - t3m
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t3m
       </Block>
       <Block preset="t4">
-        The quick brown fox jumps over the lazy dog - t4
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - t4
       </Block>
       <Block preset="p1">
-        The quick brown fox jumps over the lazy dog - p1
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - p1
       </Block>
       <Block preset="p2">
-        The quick brown fox jumps over the lazy dog - p2
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - p2
       </Block>
       <Block preset="p3">
-        The quick brown fox jumps over the lazy dog - p3
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - p3
       </Block>
       <Block preset="p4">
-        The quick brown fox jumps over the lazy dog - p4
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - p4
       </Block>
       <Block preset="c1">
-        The quick brown fox jumps over the lazy dog - c1
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - c1
       </Block>
       <Block preset="c2">
-        The quick brown fox jumps over the lazy dog - c2
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - c2
       </Block>
       <Block preset="tag">
-        The quick brown fox jumps over the lazy dog - tag
+        <CubeIcon /> The quick brown fox jumps over the lazy dog - tag
       </Block>
     </Flow>
   ),

src/tokens.ts

@@ -94,21 +94,25 @@ const TOKENS = {
   'h1-line-height': '44px',
   'h1-letter-spacing': '-0.01em',
   'h1-font-weight': '700',
+  'h1-icon-size': '38px',
   // h2
   'h2-font-size': '24px',
   'h2-line-height': '36px',
   'h2-letter-spacing': '0em',
   'h2-font-weight': '700',
+  'h2-icon-size': '26px',
   // h3
   'h3-font-size': '20px',
   'h3-line-height': '28px',
   'h3-letter-spacing': '0em',
   'h3-font-weight': '700',
+  'h3-icon-size': '22px',
   // h4
   'h4-font-size': '18px',
   'h4-line-height': '24px',
   'h4-letter-spacing': '0',
   'h4-font-weight': '700',
+  'h4-icon-size': '20px',
   // h5
   'h5-font-size': '16px',
   'h5-line-height': '22px',