fix: typography in empty-state

Author: lskramarov

packages/design-tokens/web/components/empty-state.json5

@@ -4,18 +4,18 @@
             big: {
                 'max-width': { value: '480px'},
                 padding: {
-                    horizontal: { value: '{size.6xl}' }, 
-                    top: { value: '{size.5xl}' }, 
-                    bottom: { value: '{size.5xl}' }, 
+                    horizontal: { value: '{size.6xl}' },
+                    top: { value: '{size.5xl}' },
+                    bottom: { value: '{size.5xl}' },
                 },
                 actions: {
                     'margin-top': { value: '{size.xl}' }
                 },
                 image: {
-                    'margin-bottom': { value: '{size.3xl}' }  
+                    'margin-bottom': { value: '{size.3xl}' }
                 },
-                'image-addon': { 
-                    height: { value: '{size.6xl}' } 
+                'image-addon': {
+                    height: { value: '{size.6xl}' }
                 },
                 title: {
                     'margin-bottom': { value: '{size.xl}' },
@@ -24,18 +24,18 @@
             normal: {
                 'max-width': { value: '320px'},
                 padding: {
-                    horizontal: { value: '{size.3xl}' }, 
-                    top: { value: '{size.3xl}' }, 
-                    bottom: { value: '{size.3xl}' }, 
+                    horizontal: { value: '{size.3xl}' },
+                    top: { value: '{size.3xl}' },
+                    bottom: { value: '{size.3xl}' },
                 },
                 actions: {
                     'margin-top': { value: '{size.s}' }
                 },
                 image: {
-                    'margin-bottom': { value: '{size.3xl}' }  
+                    'margin-bottom': { value: '{size.3xl}' }
                 },
-                'image-addon': { 
-                    height: { value: '{size.xxl}' } 
+                'image-addon': {
+                    height: { value: '{size.xxl}' }
                 },
                 title: {
                     'margin-bottom': { value: '{size.s}' },
@@ -44,12 +44,44 @@
         },
         font: {
             big: {
-                title: { value: 'headline' },
-                text: { value: 'text-normal' },
+                title: {
+                    "font-size": { value: '{typography.headline.font-size}' },
+                    "line-height": { value: '{typography.headline.line-height}' },
+                    "letter-spacing": { value: '{typography.headline.letter-spacing}' },
+                    "font-weight": { value: '{typography.headline.font-weight}' },
+                    "font-family": { value: '{typography.headline.font-family}' },
+                    "text-transform": { value: '{typography.headline.text-transform}' },
+                    "font-feature-settings": { value: '{typography.headline.font-feature-settings}' }
+                },
+                text: {
+                    "font-size": { value: '{typography.text-normal.font-size}' },
+                    "line-height": { value: '{typography.text-normal.line-height}' },
+                    "letter-spacing": { value: '{typography.text-normal.letter-spacing}' },
+                    "font-weight": { value: '{typography.text-normal.font-weight}' },
+                    "font-family": { value: '{typography.text-normal.font-family}' },
+                    "text-transform": { value: '{typography.text-normal.text-transform}' },
+                    "font-feature-settings": { value: '{typography.text-normal.font-feature-settings}' }
+                }
             },
             normal: {
-                title: { value: 'subheading' },
-                text: { value: 'text-normal' },
+                title: {
+                    "font-size": { value: '{typography.subheading.font-size}' },
+                    "line-height": { value: '{typography.subheading.line-height}' },
+                    "letter-spacing": { value: '{typography.subheading.letter-spacing}' },
+                    "font-weight": { value: '{typography.subheading.font-weight}' },
+                    "font-family": { value: '{typography.subheading.font-family}' },
+                    "text-transform": { value: '{typography.subheading.text-transform}' },
+                    "font-feature-settings": { value: '{typography.subheading.font-feature-settings}' }
+                },
+                text: {
+                    "font-size": { value: '{typography.text-normal.font-size}' },
+                    "line-height": { value: '{typography.text-normal.line-height}' },
+                    "letter-spacing": { value: '{typography.text-normal.letter-spacing}' },
+                    "font-weight": { value: '{typography.text-normal.font-weight}' },
+                    "font-family": { value: '{typography.text-normal.font-family}' },
+                    "text-transform": { value: '{typography.text-normal.text-transform}' },
+                    "font-feature-settings": { value: '{typography.text-normal.font-feature-settings}' }
+                }
             }
         },
         light: {
@@ -61,4 +93,4 @@
             color: { value: '{dark.foreground.contrast}'}
         }
     }
-}
+}