fix: tokens for headings (#283)

* fix: update tokens for headings * refactor: update heading styles in data-grid to match token update
telekom · Apr 28, 2021 · 6175d2b · 6175d2b
1 parent ac469a5
commit 6175d2b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx
@@ -1234,8 +1234,9 @@ export class DataGrid {
         {this.styles && <style>{this.styles}</style>}
         <div class={this.getCssClassMap()}>
           <div class={`${name}__title-block`}>
+            {/* h4 tag + h5 styles feels weird, ideally one should be able to set the tag with an attribute */}
             {this.heading && (
-              <h4 class={`${name}__heading scl-h4`}>{this.heading}</h4>
+              <h4 class={`${name}__heading scl-h5`}>{this.heading}</h4>
             )}
             <div>
               <slot />

diff --git a/packages/components/src/html/theming.html b/packages/components/src/html/theming.html
@@ -109,6 +109,12 @@
       - this page
       - `modal` part naming exercise
     -->
+    <h1 class="scl-font-variant-heading-1">Heading 01</h1>
+    <h2 class="scl-font-variant-heading-2">Heading 02</h2>
+    <h3 class="scl-font-variant-heading-3">Heading 03</h3>
+    <h4 class="scl-font-variant-heading-4">Heading 04</h4>
+    <h5 class="scl-font-variant-heading-5">Heading 05</h5>
+    <h6 class="scl-font-variant-heading-6">Heading 06</h6>
 
     <a-heading>plain</a-heading>
     <scale-button>Click here</scale-button>

diff --git a/packages/design-tokens/src/tokens.js b/packages/design-tokens/src/tokens.js
@@ -124,36 +124,38 @@ tokens[TYPE_VARIANT] = {
   heading_6: {
     ...defaultVariant,
     weight: weight.bold,
-    lineHeight: lineHeight['133'],
+    lineHeight: lineHeight['150'],
   },
   heading_5: {
-    ...defaultVariant,
-    weight: weight.extrabold,
-  },
-  heading_4: {
     ...defaultVariant,
     size: size['20'],
-    lineHeight: lineHeight['120'],
+    lineHeight: lineHeight['125'],
     weight: weight.extrabold,
   },
-  heading_3: {
+  heading_4: {
     ...defaultVariant,
     size: size['24'],
     lineHeight: lineHeight['133'],
     weight: weight.extrabold,
   },
-  heading_2: {
+  heading_3: {
     ...defaultVariant,
     size: size['32'],
     lineHeight: lineHeight['125'],
     weight: weight.extrabold,
   },
-  heading_1: {
+  heading_2: {
     ...defaultVariant,
     size: size['40'],
     lineHeight: lineHeight['120'],
     weight: weight.extrabold,
   },
+  heading_1: {
+    ...defaultVariant,
+    size: size['56'],
+    lineHeight: lineHeight['114'],
+    weight: weight.extrabold,
+  },
 };
 
 /* COLOR */

diff --git a/packages/storybook-vue/stories/3_components/data-grid/DataGrid.stories.mdx b/packages/storybook-vue/stories/3_components/data-grid/DataGrid.stories.mdx
@@ -621,8 +621,8 @@ Expected format: unformatted `string`, eg `'this is a string'`
         dataGrid.fields = [
             {
                 type: 'text',
-                label: 'Title h4 + Prefix',
-                variant: 'h4',
+                label: 'Title h5 + Prefix',
+                variant: 'h5',
                 iconPrefix: 'action-logout',
             },
             {