From 2c9d29d0d69dd8bd38cb8655f66d4a9c71c007b9 Mon Sep 17 00:00:00 2001
From: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Date: Mon, 29 Jan 2024 13:52:45 +0100
Subject: [PATCH] chore: adjust docs part 2

---
 .../blocks/css-utils/CssElevation.tsx         |   9 +-
 .../blocks/css-utils/CssSpacingMargin.tsx     |  77 ++++++++------
 .../blocks/css-utils/CssSpacingPadding.tsx    |  76 +++++++------
 .../blocks/css-utils/CssTypography.tsx        |  35 ++----
 .../blocks/tokens/TokensFontSizes.tsx         |   2 +-
 .../blocks/tokens/TokensFontWeight.tsx        |   2 +-
 .../blocks/tokens/TokensSpacing.tsx           |  11 +-
 docs/public/assets/css/preview.css            |  34 +++---
 .../components/src/test/utils/background.html | 100 ------------------
 .../components/src/test/utils/border.html     |  17 ---
 .../components/src/test/utils/display.html    |  15 ---
 .../components/src/test/utils/elevation.html  |  17 ---
 packages/components/src/test/utils/flex.html  |  17 ---
 .../src/test/utils/interaction.html           |  17 ---
 .../components/src/test/utils/layout.html     |  17 ---
 .../components/src/test/utils/sizing.html     |  17 ---
 .../components/src/test/utils/spacing.html    |  17 ---
 .../components/src/test/utils/typography.html |  17 ---
 packages/styles/scripts/background.mjs        |  16 +--
 packages/styles/scripts/typography.mjs        |   2 +-
 packages/tokens/src/color/background.json     |  81 +++++++++++---
 packages/tokens/src/color/border.json         |   4 +-
 packages/tokens/src/color/color-base.json     |   4 +-
 packages/tokens/src/color/text-base.json      |  13 ++-
 packages/tokens/src/shadow.json               |  12 ++-
 packages/tokens/src/size/container.json       |  15 ++-
 packages/tokens/src/size/text.json            |  31 +++++-
 27 files changed, 255 insertions(+), 420 deletions(-)
 delete mode 100644 packages/components/src/test/utils/background.html
 delete mode 100644 packages/components/src/test/utils/border.html
 delete mode 100644 packages/components/src/test/utils/display.html
 delete mode 100644 packages/components/src/test/utils/elevation.html
 delete mode 100644 packages/components/src/test/utils/flex.html
 delete mode 100644 packages/components/src/test/utils/interaction.html
 delete mode 100644 packages/components/src/test/utils/layout.html
 delete mode 100644 packages/components/src/test/utils/sizing.html
 delete mode 100644 packages/components/src/test/utils/spacing.html
 delete mode 100644 packages/components/src/test/utils/typography.html

diff --git a/docs/.storybook/blocks/css-utils/CssElevation.tsx b/docs/.storybook/blocks/css-utils/CssElevation.tsx
index 02dc59eb59..c1022b9903 100644
--- a/docs/.storybook/blocks/css-utils/CssElevation.tsx
+++ b/docs/.storybook/blocks/css-utils/CssElevation.tsx
@@ -14,7 +14,12 @@ export const CssElevationShadow = () => (
   <CssUtilitiesTable
     list={json}
     search={['box-shadow', 'text-shadow']}
-    example={item => <div className={`bg-green ${item.class} p-small`}></div>}
+    example={item => {
+      if (item.property === 'box-shadow') {
+        return <div className={`bg-green ${item.class} p-small`}></div>
+      }
+      console.log(item)
+      return <div className={`font-weight-bold text-large ${item.class} px-small`}>Aa</div>
+    }}
   />
 )
-
diff --git a/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx b/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx
index b433f9c24d..ca163e6356 100644
--- a/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx
+++ b/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx
@@ -4,57 +4,64 @@ import tokens from '@baloise/design-system-tokens/dist/tokens.docs.json'
 
 export const CssSpacingMargin = ({}) => {
   const obj = tokens.size.space
-  const keys = Object.keys(obj).filter(k => obj[k] && obj[k].value)
+  const keys = Object.keys(obj).filter(k => obj[k] && obj[k].mobile.value)
+
+  const values = keys.map(key => ({
+    key,
+    valueMobile: obj[key].mobile.value,
+    valueTablet: obj[key].tablet.value,
+    valueDesktop: obj[key].desktop.value,
+  }))
 
   const list = [
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `-${key}`,
       property: 'margin',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `x-${key}`,
-      property: 'margin-left, margin-right',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `y-${key}`,
-      property: 'margin-top, margin-bottom',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `t-${key}`,
-      property: 'margin-top',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `r-${key}`,
-      property: 'margin-right',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `b-${key}`,
-      property: 'margin-bottom',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `l-${key}`,
-      property: 'margin-left',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
   ]
 
diff --git a/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx b/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx
index d792513822..1f38a50448 100644
--- a/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx
+++ b/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx
@@ -4,58 +4,64 @@ import tokens from '@baloise/design-system-tokens/dist/tokens.docs.json'
 
 export const CssSpacingPadding = ({}) => {
   const obj = tokens.size.space
-  const keys = Object.keys(obj).filter(k => obj[k] && obj[k].value)
+  const keys = Object.keys(obj).filter(k => obj[k] && obj[k].mobile.value)
 
+  const values = keys.map(key => ({
+    key,
+    valueMobile: obj[key].mobile.value,
+    valueTablet: obj[key].tablet.value,
+    valueDesktop: obj[key].desktop.value,
+  }))
 
   const list = [
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `-${key}`,
       property: 'padding',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `x-${key}`,
-      property: 'padding-left, padding-right',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `y-${key}`,
-      property: 'padding-top, padding-bottom',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `t-${key}`,
-      property: 'padding-top',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `r-${key}`,
-      property: 'padding-right',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `b-${key}`,
-      property: 'padding-bottom',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `l-${key}`,
-      property: 'padding-left',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
   ]
 
diff --git a/docs/.storybook/blocks/css-utils/CssTypography.tsx b/docs/.storybook/blocks/css-utils/CssTypography.tsx
index 96039dab10..02075476fe 100644
--- a/docs/.storybook/blocks/css-utils/CssTypography.tsx
+++ b/docs/.storybook/blocks/css-utils/CssTypography.tsx
@@ -8,7 +8,12 @@ export const CssTypographyColors = () => (
   <CssUtilitiesTable
     list={json}
     search="color"
-    example={item => <div className={`${item.class} p-small font-weight-bold text-medium`}>Aa</div>}
+    example={item => {
+      if (item.class.includes('inverted') || item.class.includes('white')) {
+        return <div className={`${item.class} bg-primary p-small font-weight-bold text-medium`}>Aa</div>
+      }
+      return <div className={`${item.class} p-small font-weight-bold text-medium`}>Aa</div>
+    }}
   />
 )
 
@@ -20,33 +25,13 @@ export const CssTypographyFamily = () => (
   />
 )
 
-export const CssTypographyTextAlign = () => (
-  <CssUtilitiesTable
-    list={json}
-    search="text-align"
-  />
-)
+export const CssTypographyTextAlign = () => <CssUtilitiesTable list={json} search="text-align" />
 
-export const CssTypographyTextTransform = () => (
-  <CssUtilitiesTable
-    list={json}
-    search="text-transform"
-  />
-)
+export const CssTypographyTextTransform = () => <CssUtilitiesTable list={json} search="text-transform" />
 
-export const CssTypographyWeight = () => (
-  <CssUtilitiesTable
-    list={json}
-    search="font-weight"
-  />
-)
+export const CssTypographyWeight = () => <CssUtilitiesTable list={json} search="font-weight" />
 
-export const CssTypographyWhiteSpace = () => (
-  <CssUtilitiesTable
-    list={json}
-    search="white-space"
-  />
-)
+export const CssTypographyWhiteSpace = () => <CssUtilitiesTable list={json} search="white-space" />
 
 export const CssTypographySize = ({}) => {
   return CssTable({
diff --git a/docs/.storybook/blocks/tokens/TokensFontSizes.tsx b/docs/.storybook/blocks/tokens/TokensFontSizes.tsx
index 681607801e..c7cd57d89a 100644
--- a/docs/.storybook/blocks/tokens/TokensFontSizes.tsx
+++ b/docs/.storybook/blocks/tokens/TokensFontSizes.tsx
@@ -22,7 +22,7 @@ export const TokensFontSize = ({ overview }) => {
           <tbody key={key}>
             <tr>
               <td style={{ verticalAlign: 'top' }} className="border-none">
-                <Clipboard label={`bal-size-${key}`} value={`var(--bal-size-${key})`} />
+                <Clipboard label={`bal-size-${key}`} value={`var(--bal-text-size-${key})`} />
               </td>
               <td style={{ verticalAlign: 'top' }} className="border-none">
                 <p className={`mt-none mb-none text-small font-weight-bold py-xx-small`}>
diff --git a/docs/.storybook/blocks/tokens/TokensFontWeight.tsx b/docs/.storybook/blocks/tokens/TokensFontWeight.tsx
index 58da8de2af..840bcf2af3 100644
--- a/docs/.storybook/blocks/tokens/TokensFontWeight.tsx
+++ b/docs/.storybook/blocks/tokens/TokensFontWeight.tsx
@@ -3,7 +3,7 @@ import tokens from '@baloise/design-system-tokens/dist/tokens.docs.json'
 import { Clipboard } from '../Clipboard'
 
 export const TokensFontWeight = ({ overview }) => {
-  const list = tokens.size.text.weight
+  const list = tokens.size.font.weight
 
   return (
     <table className="sb-unstyled my-x-large table tokens" style={{ width: '100%' }}>
diff --git a/docs/.storybook/blocks/tokens/TokensSpacing.tsx b/docs/.storybook/blocks/tokens/TokensSpacing.tsx
index c7568b73a3..85503fc704 100644
--- a/docs/.storybook/blocks/tokens/TokensSpacing.tsx
+++ b/docs/.storybook/blocks/tokens/TokensSpacing.tsx
@@ -4,8 +4,6 @@ import { Clipboard } from '../Clipboard'
 
 export const TokensSpacing = ({ overview }) => {
   const list = tokens.size.space
-  const listTablet = tokens.size.space.tablet
-  const listDesktop = tokens.size.space.desktop
   return (
     <table className="sb-unstyled my-x-large table tokens" style={{ width: '100%' }}>
       <thead>
@@ -17,12 +15,11 @@ export const TokensSpacing = ({ overview }) => {
       </thead>
 
       {Object.keys(list)
-        .filter(key => list[key].value)
+        .filter(key => list[key].mobile.value)
         .map(key => {
-          const item = list[key]
-          const itemTablet = listTablet[key]
-          const itemDesktop = listDesktop[key]
-
+          const item = list[key].mobile
+          const itemTablet = list[key].tablet
+          const itemDesktop = list[key].desktop
           return (
             <tbody key={key}>
               <tr>
diff --git a/docs/public/assets/css/preview.css b/docs/public/assets/css/preview.css
index 9aac69be7b..cddc672ca7 100644
--- a/docs/public/assets/css/preview.css
+++ b/docs/public/assets/css/preview.css
@@ -48,7 +48,7 @@
 .sbdocs-content > h1,
 .sbdocs-content > div:not(.sb-unstyled) > h1 {
   color: var(--bal-color-primary);
-  font-size: var(--bal-size-xxx-large);
+  font-size: var(--bal-text-size-xxx-large);
   line-height: 1.3;
   margin-top: 2.5rem !important;
 }
@@ -56,14 +56,14 @@
 @media screen and (min-width: 769px) {
   .sbdocs-content > h1,
   .sbdocs-content > div:not(.sb-unstyled) > h1 {
-    font-size: var(--bal-size-desktop-xxx-large);
+    font-size: var(--bal-text-size-xxx-large-desktop);
     margin-top: 3rem !important;
   }
 }
 
 .sbdocs-content > h2,
 .sbdocs-content > div:not(.sb-unstyled) > h2 {
-  font-size: var(--bal-size-xx-large);
+  font-size: var(--bal-text-size-xx-large);
   line-height: 1.3;
   margin-top: 3rem !important;
 }
@@ -71,14 +71,14 @@
 @media screen and (min-width: 769px) {
   .sbdocs-content > h2,
   .sbdocs-content > div:not(.sb-unstyled) > h2 {
-    font-size: var(--bal-size-desktop-xx-large);
+    font-size: var(--bal-text-size-xx-large-desktop);
     margin-top: 4rem !important;
   }
 }
 
 .sbdocs-content > h3,
 .sbdocs-content > div:not(.sb-unstyled) > h3 {
-  font-size: var(--bal-size-x-large);
+  font-size: var(--bal-text-size-x-large);
   line-height: 1.3;
   margin-top: 2rem !important;
 }
@@ -86,14 +86,14 @@
 @media screen and (min-width: 769px) {
   .sbdocs-content > h3,
   .sbdocs-content > div:not(.sb-unstyled) > h3 {
-    font-size: var(--bal-size-desktop-x-large);
+    font-size: var(--bal-text-size-x-large-desktop);
     margin-top: 4rem !important;
   }
 }
 
 .sbdocs-content > h4,
 .sbdocs-content > div:not(.sb-unstyled) > h4 {
-  font-size: var(--bal-size-large);
+  font-size: var(--bal-text-size-large);
   line-height: 1.3;
   margin-top: 1.5rem !important;
 }
@@ -101,20 +101,20 @@
 @media screen and (min-width: 769px) {
   .sbdocs-content > h4,
   .sbdocs-content > div:not(.sb-unstyled) > h4 {
-    font-size: var(--bal-size-desktop-large);
+    font-size: var(--bal-text-size-large:desktop);
     margin-top: 2rem !important;
   }
 }
 
 .sbdocs-content > h5,
 .sbdocs-content > div:not(.sb-unstyled) > h5 {
-  font-size: var(--bal-size-desktop-medium);
+  font-size: var(--bal-text-size-medium:desktop);
   line-height: 1.5;
 }
 
 .sbdocs-content > h6,
 .sbdocs-content > div:not(.sb-unstyled) > h6 {
-  font-size: var(--bal-size-normal);
+  font-size: var(--bal-text-size-normal);
   line-height: 1.5;
 }
 
@@ -123,7 +123,7 @@
   font-family: 'BaloiseCreateText';
   font-weight: 400;
   color: var(--bal-color-primary);
-  font-size: var(--bal-size-normal);
+  font-size: var(--bal-text-size-normal);
   line-height: 1.5;
 }
 
@@ -137,8 +137,8 @@ a.sbdocs-a:not(.button) {
 }
 
 .is-size-large a.sbdocs-a:not(.button) {
-  font-size: var(--bal-size-desktop-large);
-  line-height: var(--bal-line-height-desktop-large);
+  font-size: var(--bal-text-size-large-desktop);
+  line-height: var(--bal-line-height-large-desktop);
 }
 
 
@@ -179,7 +179,7 @@ a.sbdocs-a:not(.button) {
 
 blockquote {
   color: var(--bal-color-primary);
-  font-size: var(--bal-size-small) !important;
+  font-size: var(--bal-text-size-small) !important;
   line-height: var(--bal-line-height-small) !important;
   padding: 1rem !important;
   background: #f9f3ff !important;
@@ -191,8 +191,8 @@ blockquote {
 
 blockquote > p {
   color: var(--bal-color-primary);
-  font-size: var(--bal-size-desktop-small) !important;
-  line-height: var(--bal-line-height-desktop-small) !important;
+  font-size: var(--bal-text-size-small-desktop) !important;
+  line-height: var(--bal-line-height-small-desktop) !important;
 }
 
 /***************************************
@@ -394,7 +394,7 @@ a.sbdocs-a.text-decoration-none {
 
 .doc-table-pre code {
   padding: 2px;
-  font-size: var(--bal-size-small);
+  font-size: var(--bal-text-size-small);
   border-radius: var(--bal-radius-normal);
 }
 
diff --git a/packages/components/src/test/utils/background.html b/packages/components/src/test/utils/background.html
deleted file mode 100644
index 6569395c59..0000000000
--- a/packages/components/src/test/utils/background.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-        <div class="bg-primary p-normal mb-small">bg-primary</div>
-        <div class="bg-green-light p-normal mb-small">bg-green-light</div>
-        <div class="bg-green p-normal mb-small">bg-green</div>
-        <div class="bg-purple-light p-normal mb-small">bg-purple-light</div>
-        <div class="bg-purple p-normal mb-small">bg-purple</div>
-        <div class="bg-yellow-light p-normal mb-small">bg-yellow-light</div>
-        <div class="bg-yellow p-normal mb-small">bg-yellow</div>
-        <div class="bg-red-light p-normal mb-small">bg-red-light</div>
-        <div class="bg-red p-normal mb-small">bg-red</div>
-        <div class="bg-white p-normal mb-small">bg-white</div>
-        <div class="bg-grey-light p-normal mb-small">bg-grey-light</div>
-        <div class="bg-grey p-normal mb-small">bg-grey</div>
-        <div class="bg-disabled p-normal mb-small">bg-disabled</div>
-        <div class="bg-info p-normal mb-small">bg-info</div>
-        <div class="bg-success p-normal mb-small">bg-success</div>
-        <div class="bg-warning p-normal mb-small">bg-warning</div>
-        <div class="bg-danger p-normal mb-small">bg-danger</div>
-        <div class="bg-black p-normal mb-small">bg-black</div>
-        <div class="bg-primary-1 p-normal mb-small">bg-primary-1</div>
-        <div class="bg-primary-2 p-normal mb-small">bg-primary-2</div>
-        <div class="bg-primary-3 p-normal mb-small">bg-primary-3</div>
-        <div class="bg-primary-4 p-normal mb-small">bg-primary-4</div>
-        <div class="bg-primary-5 p-normal mb-small">bg-primary-5</div>
-        <div class="bg-primary-6 p-normal mb-small">bg-primary-6</div>
-        <div class="bg-green-1 p-normal mb-small">bg-green-1</div>
-        <div class="bg-green-2 p-normal mb-small">bg-green-2</div>
-        <div class="bg-green-3 p-normal mb-small">bg-green-3</div>
-        <div class="bg-green-4 p-normal mb-small">bg-green-4</div>
-        <div class="bg-green-5 p-normal mb-small">bg-green-5</div>
-        <div class="bg-green-6 p-normal mb-small">bg-green-6</div>
-        <div class="bg-purple-1 p-normal mb-small">bg-purple-1</div>
-        <div class="bg-purple-2 p-normal mb-small">bg-purple-2</div>
-        <div class="bg-purple-3 p-normal mb-small">bg-purple-3</div>
-        <div class="bg-purple-4 p-normal mb-small">bg-purple-4</div>
-        <div class="bg-purple-5 p-normal mb-small">bg-purple-5</div>
-        <div class="bg-purple-6 p-normal mb-small">bg-purple-6</div>
-        <div class="bg-yellow-1 p-normal mb-small">bg-yellow-1</div>
-        <div class="bg-yellow-2 p-normal mb-small">bg-yellow-2</div>
-        <div class="bg-yellow-3 p-normal mb-small">bg-yellow-3</div>
-        <div class="bg-yellow-4 p-normal mb-small">bg-yellow-4</div>
-        <div class="bg-yellow-5 p-normal mb-small">bg-yellow-5</div>
-        <div class="bg-yellow-6 p-normal mb-small">bg-yellow-6</div>
-        <div class="bg-red-1 p-normal mb-small">bg-red-1</div>
-        <div class="bg-red-2 p-normal mb-small">bg-red-2</div>
-        <div class="bg-red-3 p-normal mb-small">bg-red-3</div>
-        <div class="bg-red-4 p-normal mb-small">bg-red-4</div>
-        <div class="bg-red-5 p-normal mb-small">bg-red-5</div>
-        <div class="bg-red-6 p-normal mb-small">bg-red-6</div>
-        <div class="bg-grey-1 p-normal mb-small">bg-grey-1</div>
-        <div class="bg-grey-2 p-normal mb-small">bg-grey-2</div>
-        <div class="bg-grey-3 p-normal mb-small">bg-grey-3</div>
-        <div class="bg-grey-4 p-normal mb-small">bg-grey-4</div>
-        <div class="bg-grey-5 p-normal mb-small">bg-grey-5</div>
-        <div class="bg-grey-6 p-normal mb-small">bg-grey-6</div>
-        <div class="bg-light-blue-1 p-normal mb-small">bg-light-blue-1</div>
-        <div class="bg-light-blue-2 p-normal mb-small">bg-light-blue-2</div>
-        <div class="bg-light-blue-3 p-normal mb-small">bg-light-blue-3</div>
-        <div class="bg-light-blue-4 p-normal mb-small">bg-light-blue-4</div>
-        <div class="bg-light-blue-5 p-normal mb-small">bg-light-blue-5</div>
-        <div class="bg-light-blue-6 p-normal mb-small">bg-light-blue-6</div>
-        <div class="bg-info-1 p-normal mb-small">bg-info-1</div>
-        <div class="bg-info-2 p-normal mb-small">bg-info-2</div>
-        <div class="bg-info-3 p-normal mb-small">bg-info-3</div>
-        <div class="bg-info-4 p-normal mb-small">bg-info-4</div>
-        <div class="bg-info-5 p-normal mb-small">bg-info-5</div>
-        <div class="bg-info-6 p-normal mb-small">bg-info-6</div>
-        <div class="bg-success-1 p-normal mb-small">bg-success-1</div>
-        <div class="bg-success-2 p-normal mb-small">bg-success-2</div>
-        <div class="bg-success-3 p-normal mb-small">bg-success-3</div>
-        <div class="bg-success-4 p-normal mb-small">bg-success-4</div>
-        <div class="bg-success-5 p-normal mb-small">bg-success-5</div>
-        <div class="bg-success-6 p-normal mb-small">bg-success-6</div>
-        <div class="bg-warning-1 p-normal mb-small">bg-warning-1</div>
-        <div class="bg-warning-2 p-normal mb-small">bg-warning-2</div>
-        <div class="bg-warning-3 p-normal mb-small">bg-warning-3</div>
-        <div class="bg-warning-4 p-normal mb-small">bg-warning-4</div>
-        <div class="bg-warning-5 p-normal mb-small">bg-warning-5</div>
-        <div class="bg-warning-6 p-normal mb-small">bg-warning-6</div>
-        <div class="bg-danger-1 p-normal mb-small">bg-danger-1</div>
-        <div class="bg-danger-2 p-normal mb-small">bg-danger-2</div>
-        <div class="bg-danger-3 p-normal mb-small">bg-danger-3</div>
-        <div class="bg-danger-4 p-normal mb-small">bg-danger-4</div>
-        <div class="bg-danger-5 p-normal mb-small">bg-danger-5</div>
-        <div class="bg-danger-6 p-normal mb-small">bg-danger-6</div>
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/border.html b/packages/components/src/test/utils/border.html
deleted file mode 100644
index 6cbb918f2f..0000000000
--- a/packages/components/src/test/utils/border.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/display.html b/packages/components/src/test/utils/display.html
deleted file mode 100644
index 34b8417235..0000000000
--- a/packages/components/src/test/utils/display.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container"></main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/elevation.html b/packages/components/src/test/utils/elevation.html
deleted file mode 100644
index 6cbb918f2f..0000000000
--- a/packages/components/src/test/utils/elevation.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/flex.html b/packages/components/src/test/utils/flex.html
deleted file mode 100644
index 6cbb918f2f..0000000000
--- a/packages/components/src/test/utils/flex.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/interaction.html b/packages/components/src/test/utils/interaction.html
deleted file mode 100644
index 6cbb918f2f..0000000000
--- a/packages/components/src/test/utils/interaction.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/layout.html b/packages/components/src/test/utils/layout.html
deleted file mode 100644
index 6cbb918f2f..0000000000
--- a/packages/components/src/test/utils/layout.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/sizing.html b/packages/components/src/test/utils/sizing.html
deleted file mode 100644
index 6cbb918f2f..0000000000
--- a/packages/components/src/test/utils/sizing.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/spacing.html b/packages/components/src/test/utils/spacing.html
deleted file mode 100644
index 6cbb918f2f..0000000000
--- a/packages/components/src/test/utils/spacing.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/components/src/test/utils/typography.html b/packages/components/src/test/utils/typography.html
deleted file mode 100644
index 6cbb918f2f..0000000000
--- a/packages/components/src/test/utils/typography.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr" lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <script type="module" src="/build/design-system-components.esm.js"></script>
-    <script nomodule src="/build/design-system-components.js"></script>
-  </head>
-  <body>
-    <bal-doc-app>
-      <main class="container">
-
-      </main>
-    </bal-doc-app>
-  </body>
-</html>
diff --git a/packages/styles/scripts/background.mjs b/packages/styles/scripts/background.mjs
index aa18ad35d4..97995ec239 100644
--- a/packages/styles/scripts/background.mjs
+++ b/packages/styles/scripts/background.mjs
@@ -45,13 +45,13 @@ export const generateBackgroundColors = async () => {
     breakpoints: utils.minBreakpoints,
   })
 
-  const visualTest = utils.visualTest({
-    values: {
-      ...props,
-      ...propsBase,
-    },
-    template: className => `<div class="${className} p-normal mb-small">${className}</div>`,
-  })
+  // const visualTest = utils.visualTest({
+  //   values: {
+  //     ...props,
+  //     ...propsBase,
+  //   },
+  //   template: className => `<div class="${className} p-normal mb-small">${className}</div>`,
+  // })
 
   /**
    * EXPORT
@@ -63,7 +63,7 @@ export const generateBackgroundColors = async () => {
     utils.merge({
       docs: [docs],
       rules: [rules, rulesPrimary],
-      visualTest: [visualTest],
+      // visualTest: [visualTest],
     }),
   )
 }
diff --git a/packages/styles/scripts/typography.mjs b/packages/styles/scripts/typography.mjs
index 10af61ea23..1f514c724f 100644
--- a/packages/styles/scripts/typography.mjs
+++ b/packages/styles/scripts/typography.mjs
@@ -125,7 +125,7 @@ const generateTextAlign = () => {
       'text-align-center': 'center',
       'text-align-left': 'left',
       'text-align-right': 'right',
-      'text-align-justified': 'justified',
+      'text-align-justify': 'justify',
     },
   })
 }
diff --git a/packages/tokens/src/color/background.json b/packages/tokens/src/color/background.json
index 671c0a6a44..2c9c7b2f1f 100644
--- a/packages/tokens/src/color/background.json
+++ b/packages/tokens/src/color/background.json
@@ -5,25 +5,72 @@
         "value": "{color.base.primary.5}",
         "comment": "Blue is our accent color and it is present on every touchpoint. Our logo, text, buttons and links are blue."
       },
+      "green-light": {
+        "value": "{color.base.green.1}",
+        "comment": "Default brand background color to use"
+      },
+      "green": {
+        "value": "{color.base.green.3}",
+        "comment": "Use this background for call to action sections"
+      },
+      "purple-light": {
+        "value": "{color.base.purple.1}",
+        "comment": "Default brand background color to use"
+      },
+      "purple": {
+        "value": "{color.base.purple.3}",
+        "comment": "Use this background for call to action sections"
+      },
+      "yellow-light": {
+        "value": "{color.base.yellow.1}",
+        "comment": "Default brand background color to use"
+      },
+      "yellow": {
+        "value": "{color.base.yellow.3}",
+        "comment": "Use this background for call to action sections"
+      },
+      "red-light": {
+        "value": "{color.base.red.1}",
+        "comment": "Default brand background color to use"
+      },
+      "red": {
+        "value": "{color.base.red.3}",
+        "comment": "Use this background for call to action sections"
+      },
 
-      "green-light": { "value": "{color.base.green.1}" },
-      "green": { "value": "{color.base.green.3}" },
-      "purple-light": { "value": "{color.base.purple.1}" },
-      "purple": { "value": "{color.base.purple.3}" },
-      "yellow-light": { "value": "{color.base.yellow.1}" },
-      "yellow": { "value": "{color.base.yellow.3}" },
-      "red-light": { "value": "{color.base.red.1}" },
-      "red": { "value": "{color.base.red.3}" },
-
-      "white": { "value": "{color.base.white}" },
-      "grey-light": { "value": "{color.base.grey.2}" },
-      "grey": { "value": "{color.base.grey.3}" },
-      "disabled": { "value": "{color.base.grey.3}" },
+      "white": {
+        "value": "{color.base.white}",
+        "comment": ""
+      },
+      "grey-light": {
+        "value": "{color.base.grey.2}",
+        "comment": ""
+      },
+      "grey": {
+        "value": "{color.base.grey.3}",
+        "comment": ""
+      },
+      "disabled": {
+        "value": "{color.base.grey.3}",
+        "comment": ""
+      },
 
-      "info": { "value": "{color.base.info.3}" },
-      "success": { "value": "{color.base.success.3}" },
-      "warning": { "value": "{color.base.warning.3}" },
-      "danger": { "value": "{color.base.danger.3}" }
+      "info": {
+        "value": "{color.base.info.3}",
+        "comment": ""
+      },
+      "success": {
+        "value": "{color.base.success.3}",
+        "comment": ""
+      },
+      "warning": {
+        "value": "{color.base.warning.3}",
+        "comment": ""
+      },
+      "danger": {
+        "value": "{color.base.danger.3}",
+        "comment": ""
+      }
     }
   }
 }
diff --git a/packages/tokens/src/color/border.json b/packages/tokens/src/color/border.json
index 023d970e9f..a76c311bb7 100644
--- a/packages/tokens/src/color/border.json
+++ b/packages/tokens/src/color/border.json
@@ -1,7 +1,7 @@
 {
   "color": {
     "border": {
-      "default": { "value": "{color.base.grey.3}" },
+      "default": { "value": "{color.base.grey.3}", "comment": "Default border color" },
       "primary": { "value": "{color.base.primary.5}", "comment": "Use for focused or selected state." },
       "primary-light": {
         "value": "{color.base.primary.3}",
@@ -9,7 +9,7 @@
       },
 
       "grey-light": { "value": "{color.base.grey.2}", "comment": "Default input color or can be use for a divider" },
-      "grey": { "value": "{color.base.grey.3}" },
+      "grey": { "value": "{color.base.grey.3}", "comment": "Default border color" },
       "grey-dark": { "value": "{color.base.grey.4}", "comment": "Use for disabled state." },
 
       "white": { "value": "{color.base.white}", "comment": "Default color on dark backgrounds." },
diff --git a/packages/tokens/src/color/color-base.json b/packages/tokens/src/color/color-base.json
index 1244135c74..3df4b678db 100644
--- a/packages/tokens/src/color/color-base.json
+++ b/packages/tokens/src/color/color-base.json
@@ -1,8 +1,6 @@
 {
   "color": {
     "base": {
-      "white": { "value": "#FFFFFF" },
-      "black": { "value": "#000000", "noFigmaImport": true },
       "primary": {
         "1": { "value": "#e5e7f0" },
         "2": { "value": "#b3b6d4" },
@@ -11,6 +9,7 @@
         "5": { "value": "#000d6e" },
         "6": { "value": "#000739" }
       },
+      "white": { "value": "#FFFFFF" },
       "green": {
         "1": { "value": "#e9fbf7" },
         "2": { "value": "#cbf2ec" },
@@ -51,6 +50,7 @@
         "5": { "value": "#747474" },
         "6": { "value": "#313131" }
       },
+      "black": { "value": "#000000", "noFigmaImport": true },
       "light-blue": {
         "1": { "value": "#e5f1fe" },
         "2": { "value": "#a7d1fa" },
diff --git a/packages/tokens/src/color/text-base.json b/packages/tokens/src/color/text-base.json
index 051513b912..86c04856a0 100644
--- a/packages/tokens/src/color/text-base.json
+++ b/packages/tokens/src/color/text-base.json
@@ -13,20 +13,25 @@
         "value": "{color.base.white}",
         "comment": "Main font color for all headings and paragraphs on a dark background."
       },
-      "black": { "value": "{color.base.black}" },
-      "grey-dark": {
-        "value": "{color.base.grey.6}",
-        "comment": "Font color for disabled elements"
+
+      "grey-light": {
+        "value": "{color.base.grey.4}",
+        "comment": "Font color for disabled texts"
       },
       "grey": {
         "value": "{color.base.grey.5}",
         "comment": "Font color for placeholders"
       },
+      "grey-dark": {
+        "value": "{color.base.grey.6}",
+        "comment": "Font color for disabled elements"
+      },
 
       "info": { "value": "{color.base.info.4}" },
       "warning": { "value": "{color.base.warning.5}" },
       "success": { "value": "{color.base.success.4}" },
       "danger": { "value": "{color.base.danger.4}" },
+      "black": { "value": "{color.base.black}" },
 
       "primary-hovered": { "value": "{color.base.light-blue.5}" },
       "primary-pressed": { "value": "{color.base.primary.6}" },
diff --git a/packages/tokens/src/shadow.json b/packages/tokens/src/shadow.json
index 7f56d5a0e9..688038572f 100644
--- a/packages/tokens/src/shadow.json
+++ b/packages/tokens/src/shadow.json
@@ -3,17 +3,20 @@
     "small": {
       "value": "0px 2px 5px 1px rgba(0, 7, 57, 0.12)",
       "keepFormat": true,
-      "noFigmaImport": true
+      "noFigmaImport": true,
+      "comment": ""
     },
     "normal": {
       "value": "0 0 10px 0 rgba(0, 7, 57, 0.15)",
       "keepFormat": true,
-      "noFigmaImport": true
+      "noFigmaImport": true,
+      "comment": "Default shadow size to elevate an element."
     },
     "large": {
       "value": "0 0 30px 0 rgba(0, 7, 57, 0.15)",
       "keepFormat": true,
-      "noFigmaImport": true
+      "noFigmaImport": true,
+      "comment": "Large shadow are used for hover effects."
     }
   },
   "text": {
@@ -21,7 +24,8 @@
       "normal": {
         "value": "0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5)",
         "keepFormat": true,
-        "noFigmaImport": true
+        "noFigmaImport": true,
+        "comment": "Increases readability when used on a image background."
       }
     }
   }
diff --git a/packages/tokens/src/size/container.json b/packages/tokens/src/size/container.json
index e235c1cbbc..2dd74711e8 100644
--- a/packages/tokens/src/size/container.json
+++ b/packages/tokens/src/size/container.json
@@ -20,9 +20,18 @@
         }
       },
       "space": {
-        "mobile": { "value": "{size.space.normal.mobile}" },
-        "tablet": { "value": "{size.space.x-large.tablet}" },
-        "desktop": { "value": "{size.space.x-large.desktop}" }
+        "mobile": {
+          "value": "{size.space.normal.mobile}",
+          "comment": "Default space of a container to left and right side."
+        },
+        "tablet": {
+          "value": "{size.space.x-large.tablet}",
+          "comment": "Default space on tablets of a container to left and right side."
+        },
+        "desktop": {
+          "value": "{size.space.x-large.desktop}",
+          "comment": "Default space on desktops of a container to left and right side."
+        }
       }
     }
   }
diff --git a/packages/tokens/src/size/text.json b/packages/tokens/src/size/text.json
index ec41f80a45..04b410adab 100644
--- a/packages/tokens/src/size/text.json
+++ b/packages/tokens/src/size/text.json
@@ -2,13 +2,24 @@
   "size": {
     "font": {
       "weight": {
-        "bold": { "value": "700", "keepFormat": true, "noFigmaImport": true },
+        "bold": {
+          "value": "700",
+          "keepFormat": true,
+          "noFigmaImport": true,
+          "comment": "Bold is used for headings, links and buttons."
+        },
         "regular": {
           "value": "400",
           "keepFormat": true,
-          "noFigmaImport": true
+          "noFigmaImport": true,
+          "comment": "Default width of paragraphs. Only available with the font BaloiseCreateText."
         },
-        "light": { "value": "300", "keepFormat": true, "noFigmaImport": true }
+        "light": {
+          "value": "300",
+          "keepFormat": true,
+          "noFigmaImport": true,
+          "comment": "Can be used for secondary headings. Only available with the font BaloiseCreateHeadline."
+        }
       }
     },
     "text": {
@@ -165,8 +176,18 @@
         }
       },
       "line-height": {
-        "title": { "value": "1.3", "keepFormat": true, "noFigmaImport": true },
-        "text": { "value": "1.5", "keepFormat": true, "noFigmaImport": true }
+        "title": {
+          "value": "1.3",
+          "keepFormat": true,
+          "noFigmaImport": true,
+          "comment": "Standard line-height for the headings."
+        },
+        "text": {
+          "value": "1.5",
+          "keepFormat": true,
+          "noFigmaImport": true,
+          "comment": "Default line height for all text elements."
+        }
       }
     }
   }