[patch][v16.20.1]Added H6Font (#131)

Toniq-Labs · Jul 6, 2024 · 09fde28 · 09fde28
1 parent d85c960
commit 09fde28
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.20.0",
+    "version": "16.20.1",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.20.0",
+    "version": "16.20.1",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/packages/design-system/src/elements/toniq-heading/toniq-heading.element.ts b/packages/design-system/src/elements/toniq-heading/toniq-heading.element.ts
@@ -9,6 +9,7 @@ export enum ToniqHeadingLevel {
     H3 = 'h3',
     H4 = 'h4',
     H5 = 'h5',
+    H6 = 'h6',
 }
 
 /** A replacement for the h* heading elements. */
@@ -20,6 +21,7 @@ export const ToniqHeading = defineToniqElement<{level: ToniqHeadingLevel}>()({
         'toniq-heading-h3': ({inputs}) => inputs.level === ToniqHeadingLevel.H3,
         'toniq-heading-h4': ({inputs}) => inputs.level === ToniqHeadingLevel.H4,
         'toniq-heading-h5': ({inputs}) => inputs.level === ToniqHeadingLevel.H5,
+        'toniq-heading-h6': ({inputs}) => inputs.level === ToniqHeadingLevel.H6,
     },
     styles: ({hostClasses}) => css`
         ${hostClasses['toniq-heading-h1'].selector} {
@@ -37,12 +39,16 @@ export const ToniqHeading = defineToniqElement<{level: ToniqHeadingLevel}>()({
         ${hostClasses['toniq-heading-h5'].selector} {
             ${toniqFontStyles.h5Font};
         }
+        ${hostClasses['toniq-heading-h6'].selector} {
+            ${toniqFontStyles.h5Font};
+        }
 
         h1,
         h2,
         h3,
         h4,
-        h5 {
+        h5,
+        h6 {
             ${noNativeSpacing};
             font: inherit;
             overflow: inherit;
@@ -70,6 +76,10 @@ export const ToniqHeading = defineToniqElement<{level: ToniqHeadingLevel}>()({
             return html`
                 <h5><slot></slot></h5>
             `;
+        } else if (inputs.level === ToniqHeadingLevel.H6) {
+            return html`
+                <h5><slot></slot></h5>
+            `;
         } else {
             return html`
                 <slot></slot>

diff --git a/packages/design-system/src/styles/fonts.ts b/packages/design-system/src/styles/fonts.ts
@@ -50,6 +50,10 @@ const fontStylesFallbacks = {
         'line-height': css`28px`,
         'font-size': css`20px`,
     },
+    h6Font: {
+        'line-height': css`24px`,
+        'font-size': css`16px`,
+    },
     monospaceFont: {
         'font-family': css`'Inconsolata', monospace`,
         'line-height': css`1.125em`,
@@ -157,6 +161,11 @@ export const toniqFontStyles = (() => {
         ${boldFont};
     `;
 
+    const h6Font = css`
+        ${combineFallbacksAndVars('h6Font')};
+        ${boldFont};
+    `;
+
     const monospaceFont = css`
         ${combineFallbacksAndVars('monospaceFont')}
     `;
@@ -179,6 +188,7 @@ export const toniqFontStyles = (() => {
         h3Font,
         h4Font,
         h5Font,
+        h6Font,
         monospaceFont,
         rubikFont,
     } as const satisfies Record<FontStyleKey, FontStyleDefinition>;

diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.20.0",
+    "version": "16.20.1",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.20.0",
+    "version": "16.20.1",
     "private": true,
     "scripts": {
         "compile": "virmator compile",