Update legacy JavaScript typography tokens (#2782)

sumup-oss · Nov 18, 2024 · 0a6ec4e · 0a6ec4e
1 parent 27525c1
commit 0a6ec4e
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 37 deletions.
diff --git a/.changeset/angry-pots-care.md b/.changeset/angry-pots-care.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/design-tokens": patch
+---
+
+Updated the legacy JavaScript theme to the latest typography token values to match the modern CSS custom variables.
diff --git a/packages/circuit-ui/styles/style-mixins.spec.tsx b/packages/circuit-ui/styles/style-mixins.spec.tsx
@@ -163,7 +163,7 @@ describe('Style helpers', () => {
     it('should match the snapshot for size one', () => {
       const { styles } = typography('one')(light);
       expect(styles).toMatchInlineSnapshot(
-        '"font-size:1rem;line-height:1.5rem;"',
+        `"font-size:1rem;line-height:1.375rem;"`,
       );
     });
 

diff --git a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap
@@ -32,8 +32,8 @@ exports[`Themes > light > should match the snapshot 1`] = `
     "mono": "Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace",
   },
   "fontWeight": {
-    "bold": "700",
-    "regular": "400",
+    "bold": "630",
+    "regular": "375",
   },
   "grid": {
     "default": {
@@ -117,7 +117,7 @@ exports[`Themes > light > should match the snapshot 1`] = `
     "body": {
       "one": {
         "fontSize": "1rem",
-        "lineHeight": "1.5rem",
+        "lineHeight": "1.375rem",
       },
       "two": {
         "fontSize": "0.875rem",
@@ -126,46 +126,46 @@ exports[`Themes > light > should match the snapshot 1`] = `
     },
     "bodyLarge": {
       "fontSize": "1.25rem",
-      "lineHeight": "1.75rem",
+      "lineHeight": "1.5rem",
     },
     "headline": {
       "four": {
         "fontSize": "1.125rem",
-        "lineHeight": "1.5rem",
+        "lineHeight": "1.375rem",
       },
       "one": {
         "fontSize": "2rem",
         "lineHeight": "2.25rem",
       },
       "three": {
-        "fontSize": "1.25rem",
-        "lineHeight": "1.5rem",
+        "fontSize": "1.125rem",
+        "lineHeight": "1.375rem",
       },
       "two": {
         "fontSize": "1.5rem",
-        "lineHeight": "1.75rem",
+        "lineHeight": "1.625rem",
       },
     },
     "subHeadline": {
-      "fontSize": "0.875rem",
-      "lineHeight": "1.25rem",
+      "fontSize": "1.125rem",
+      "lineHeight": "1.375rem",
     },
     "title": {
       "four": {
-        "fontSize": "3.5rem",
-        "lineHeight": "3.5rem",
+        "fontSize": "2.5rem",
+        "lineHeight": "2.875rem",
       },
       "one": {
-        "fontSize": "7.5rem",
-        "lineHeight": "7.5rem",
+        "fontSize": "4rem",
+        "lineHeight": "4.5rem",
       },
       "three": {
-        "fontSize": "4rem",
-        "lineHeight": "4rem",
+        "fontSize": "3rem",
+        "lineHeight": "3.5rem",
       },
       "two": {
-        "fontSize": "6rem",
-        "lineHeight": "6rem",
+        "fontSize": "3rem",
+        "lineHeight": "3.5rem",
       },
     },
   },

diff --git a/packages/design-tokens/themes/legacy/light.ts b/packages/design-tokens/themes/legacy/light.ts
@@ -67,43 +67,43 @@ export const typography = {
     },
     two: {
       fontSize: '1.5rem',
-      lineHeight: '1.75rem',
+      lineHeight: '1.625rem',
     },
     three: {
-      fontSize: '1.25rem',
-      lineHeight: '1.5rem',
+      fontSize: '1.125rem',
+      lineHeight: '1.375rem',
     },
     four: {
       fontSize: '1.125rem',
-      lineHeight: '1.5rem',
+      lineHeight: '1.375rem',
     },
   },
   title: {
     one: {
-      fontSize: '7.5rem',
-      lineHeight: '7.5rem',
+      fontSize: '4rem',
+      lineHeight: '4.5rem',
     },
     two: {
-      fontSize: '6rem',
-      lineHeight: '6rem',
+      fontSize: '3rem',
+      lineHeight: '3.5rem',
     },
     three: {
-      fontSize: '4rem',
-      lineHeight: '4rem',
+      fontSize: '3rem',
+      lineHeight: '3.5rem',
     },
     four: {
-      fontSize: '3.5rem',
-      lineHeight: '3.5rem',
+      fontSize: '2.5rem',
+      lineHeight: '2.875rem',
     },
   },
   subHeadline: {
-    fontSize: '0.875rem',
-    lineHeight: '1.25rem',
+    fontSize: '1.125rem',
+    lineHeight: '1.375rem',
   },
   body: {
     one: {
       fontSize: '1rem',
-      lineHeight: '1.5rem',
+      lineHeight: '1.375rem',
     },
     two: {
       fontSize: '0.875rem',
@@ -112,7 +112,7 @@ export const typography = {
   },
   bodyLarge: {
     fontSize: '1.25rem',
-    lineHeight: '1.75rem',
+    lineHeight: '1.5rem',
   },
 };
 
@@ -123,8 +123,8 @@ export const fontStack: FontStack = {
 };
 
 export const fontWeight: FontWeight = {
-  regular: '400',
-  bold: '700',
+  regular: '375',
+  bold: '630',
 };
 
 export const grid: Grid = {