From a1443ab165c9ed98f692bfa8a6dae1dd573fb084 Mon Sep 17 00:00:00 2001 From: James Mockett <1166188+jamesmockett@users.noreply.github.com> Date: Tue, 12 Mar 2024 17:28:46 +0000 Subject: [PATCH] Add text decoration style to preset CSS --- .../scripts/build-type-presets.ts | 14 +- .../source-foundations/src/tokens.test.ts | 289 ++++++++++++------ .../src/typography/presets.ts | 97 ++++++ 3 files changed, 301 insertions(+), 99 deletions(-) diff --git a/libs/@guardian/source-foundations/scripts/build-type-presets.ts b/libs/@guardian/source-foundations/scripts/build-type-presets.ts index 290ade40f..a34e3d43d 100644 --- a/libs/@guardian/source-foundations/scripts/build-type-presets.ts +++ b/libs/@guardian/source-foundations/scripts/build-type-presets.ts @@ -2,12 +2,19 @@ import fs from 'node:fs'; import { tokens } from '@guardian/design-tokens'; import { fontArrayToString, pxStringToRem } from '../src/utils/convert-value'; -console.log('Building typography presets…'); - const STRIP_WHITESPACE = /^\s+/gm; const STRIP_TABS = /^\t{3}|\t{2}/gm; -const { presets } = tokens.typography; +const { presets, fontSize, textDecorationThicknessForFontSize } = + tokens.typography; + +type FontSize = keyof typeof fontSize; + +const textDecorationThickness = (size: string) => + textDecorationThicknessForFontSize[size.slice(0, -2) as FontSize]; + +console.log('Building typography presets…'); + const presetTotal = Object.keys(presets).length; const outputPath = `${process.cwd()}/src/typography/presets.ts`; @@ -26,6 +33,7 @@ const css = Object.entries(presets) line-height: ${properties.lineHeight}; font-weight: ${properties.fontWeight}; font-style: ${properties.fontStyle}; + --source-text-decoration-thickness: ${textDecorationThickness(properties.fontSize)}; \`; `, ) diff --git a/libs/@guardian/source-foundations/src/tokens.test.ts b/libs/@guardian/source-foundations/src/tokens.test.ts index f7f4a5cd0..1334153c7 100644 --- a/libs/@guardian/source-foundations/src/tokens.test.ts +++ b/libs/@guardian/source-foundations/src/tokens.test.ts @@ -913,7 +913,8 @@ describe('Typography preset CSS output', () => { line-height: 1.4; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.article17).toMatchCSS( @@ -923,7 +924,8 @@ describe('Typography preset CSS output', () => { line-height: 1.4; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.articleBold15).toMatchCSS( @@ -933,7 +935,8 @@ describe('Typography preset CSS output', () => { line-height: 1.4; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.articleBold17).toMatchCSS( @@ -943,7 +946,8 @@ describe('Typography preset CSS output', () => { line-height: 1.4; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.articleBoldItalic15).toMatchCSS( @@ -953,7 +957,8 @@ describe('Typography preset CSS output', () => { line-height: 1.4; font-weight: 700; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.articleBoldItalic17).toMatchCSS( @@ -963,7 +968,8 @@ describe('Typography preset CSS output', () => { line-height: 1.4; font-weight: 700; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.articleItalic15).toMatchCSS( @@ -973,7 +979,8 @@ describe('Typography preset CSS output', () => { line-height: 1.4; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.articleItalic17).toMatchCSS( @@ -983,7 +990,8 @@ describe('Typography preset CSS output', () => { line-height: 1.4; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineBold14).toMatchCSS( @@ -993,7 +1001,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineBold17).toMatchCSS( @@ -1003,7 +1012,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineBold20).toMatchCSS( @@ -1013,7 +1023,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineBold24).toMatchCSS( @@ -1023,7 +1034,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineBold28).toMatchCSS( @@ -1033,7 +1045,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineBold34).toMatchCSS( @@ -1043,7 +1056,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.headlineBold42).toMatchCSS( @@ -1053,7 +1067,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 5px; + `, { isFragment: true }, ); expect(presets.headlineBold50).toMatchCSS( @@ -1063,7 +1078,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineBold70).toMatchCSS( @@ -1073,7 +1089,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineLight14).toMatchCSS( @@ -1083,7 +1100,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineLight17).toMatchCSS( @@ -1093,7 +1111,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineLight20).toMatchCSS( @@ -1103,7 +1122,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineLight24).toMatchCSS( @@ -1113,7 +1133,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineLight28).toMatchCSS( @@ -1123,7 +1144,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineLight34).toMatchCSS( @@ -1133,7 +1155,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.headlineLight42).toMatchCSS( @@ -1143,7 +1166,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 5px; + `, { isFragment: true }, ); expect(presets.headlineLight50).toMatchCSS( @@ -1153,7 +1177,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineLight70).toMatchCSS( @@ -1163,7 +1188,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: normal; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic14).toMatchCSS( @@ -1173,7 +1199,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic17).toMatchCSS( @@ -1183,7 +1210,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic20).toMatchCSS( @@ -1193,7 +1221,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic24).toMatchCSS( @@ -1203,7 +1232,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic28).toMatchCSS( @@ -1213,7 +1243,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic34).toMatchCSS( @@ -1223,7 +1254,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic42).toMatchCSS( @@ -1233,7 +1265,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 5px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic50).toMatchCSS( @@ -1243,7 +1276,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineLightItalic70).toMatchCSS( @@ -1253,7 +1287,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 300; font-style: italic; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineMedium14).toMatchCSS( @@ -1263,7 +1298,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineMedium17).toMatchCSS( @@ -1273,7 +1309,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineMedium20).toMatchCSS( @@ -1283,7 +1320,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineMedium24).toMatchCSS( @@ -1293,7 +1331,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineMedium28).toMatchCSS( @@ -1303,7 +1342,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineMedium34).toMatchCSS( @@ -1313,7 +1353,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.headlineMedium42).toMatchCSS( @@ -1323,7 +1364,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 5px; + `, { isFragment: true }, ); expect(presets.headlineMedium50).toMatchCSS( @@ -1333,7 +1375,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineMedium70).toMatchCSS( @@ -1343,7 +1386,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: normal; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic14).toMatchCSS( @@ -1353,7 +1397,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic17).toMatchCSS( @@ -1363,7 +1408,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic20).toMatchCSS( @@ -1373,7 +1419,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic24).toMatchCSS( @@ -1383,7 +1430,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic28).toMatchCSS( @@ -1393,7 +1441,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic34).toMatchCSS( @@ -1403,7 +1452,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: italic; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic42).toMatchCSS( @@ -1413,7 +1463,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: italic; - `, + --source-text-decoration-thickness: 5px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic50).toMatchCSS( @@ -1423,7 +1474,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 500; font-style: italic; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.headlineMediumItalic70).toMatchCSS( @@ -1433,7 +1485,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: italic; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.kicker14).toMatchCSS( @@ -1443,7 +1496,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.kicker17).toMatchCSS( @@ -1453,7 +1507,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.kicker20).toMatchCSS( @@ -1463,7 +1518,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.kicker24).toMatchCSS( @@ -1473,7 +1529,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.kicker34).toMatchCSS( @@ -1483,7 +1540,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.textEgyptian14).toMatchCSS( @@ -1493,7 +1551,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptian15).toMatchCSS( @@ -1503,7 +1562,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptian17).toMatchCSS( @@ -1513,7 +1573,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptianBold14).toMatchCSS( @@ -1523,7 +1584,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptianBold15).toMatchCSS( @@ -1533,7 +1595,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptianBold17).toMatchCSS( @@ -1543,7 +1606,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptianBoldItalic14).toMatchCSS( @@ -1553,7 +1617,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptianBoldItalic15).toMatchCSS( @@ -1563,7 +1628,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptianBoldItalic17).toMatchCSS( @@ -1573,7 +1639,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptianItalic14).toMatchCSS( @@ -1583,6 +1650,7 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `, { isFragment: true }, ); @@ -1593,7 +1661,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textEgyptianItalic17).toMatchCSS( @@ -1603,7 +1672,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSans12).toMatchCSS( @@ -1613,7 +1683,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSans14).toMatchCSS( @@ -1623,7 +1694,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSans15).toMatchCSS( @@ -1633,7 +1705,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSans17).toMatchCSS( @@ -1643,7 +1716,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSans20).toMatchCSS( @@ -1653,7 +1727,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSans24).toMatchCSS( @@ -1663,7 +1738,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSans28).toMatchCSS( @@ -1673,7 +1749,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSans34).toMatchCSS( @@ -1683,7 +1760,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: normal; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.textSansBold12).toMatchCSS( @@ -1693,7 +1771,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSansBold14).toMatchCSS( @@ -1703,7 +1782,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSansBold15).toMatchCSS( @@ -1713,7 +1793,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSansBold17).toMatchCSS( @@ -1723,7 +1804,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSansBold20).toMatchCSS( @@ -1733,7 +1815,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSansBold24).toMatchCSS( @@ -1743,7 +1826,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSansBold28).toMatchCSS( @@ -1753,7 +1837,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSansBold34).toMatchCSS( @@ -1763,7 +1848,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.textSansItalic12).toMatchCSS( @@ -1773,7 +1859,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSansItalic14).toMatchCSS( @@ -1783,7 +1870,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: Italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSansItalic15).toMatchCSS( @@ -1793,7 +1881,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSansItalic17).toMatchCSS( @@ -1803,7 +1892,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 2px; + `, { isFragment: true }, ); expect(presets.textSansItalic20).toMatchCSS( @@ -1813,7 +1903,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSansItalic24).toMatchCSS( @@ -1823,7 +1914,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSansItalic28).toMatchCSS( @@ -1833,7 +1925,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 3px; + `, { isFragment: true }, ); expect(presets.textSansItalic34).toMatchCSS( @@ -1843,7 +1936,8 @@ describe('Typography preset CSS output', () => { line-height: 1.3; font-weight: 400; font-style: italic; - `, + --source-text-decoration-thickness: 4px; + `, { isFragment: true }, ); expect(presets.titlepiece42).toMatchCSS( @@ -1853,7 +1947,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 5px; + `, { isFragment: true }, ); expect(presets.titlepiece50).toMatchCSS( @@ -1863,7 +1958,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); expect(presets.titlepiece70).toMatchCSS( @@ -1873,7 +1969,8 @@ describe('Typography preset CSS output', () => { line-height: 1.15; font-weight: 700; font-style: normal; - `, + --source-text-decoration-thickness: 6px; + `, { isFragment: true }, ); }); diff --git a/libs/@guardian/source-foundations/src/typography/presets.ts b/libs/@guardian/source-foundations/src/typography/presets.ts index 8e16f321f..1a9532a45 100644 --- a/libs/@guardian/source-foundations/src/typography/presets.ts +++ b/libs/@guardian/source-foundations/src/typography/presets.ts @@ -8,6 +8,7 @@ export const article15 = ` line-height: 1.4; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const article17 = ` @@ -16,6 +17,7 @@ export const article17 = ` line-height: 1.4; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const articleBold15 = ` @@ -24,6 +26,7 @@ export const articleBold15 = ` line-height: 1.4; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const articleBold17 = ` @@ -32,6 +35,7 @@ export const articleBold17 = ` line-height: 1.4; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const articleBoldItalic15 = ` @@ -40,6 +44,7 @@ export const articleBoldItalic15 = ` line-height: 1.4; font-weight: 700; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const articleBoldItalic17 = ` @@ -48,6 +53,7 @@ export const articleBoldItalic17 = ` line-height: 1.4; font-weight: 700; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const articleItalic15 = ` @@ -56,6 +62,7 @@ export const articleItalic15 = ` line-height: 1.4; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const articleItalic17 = ` @@ -64,6 +71,7 @@ export const articleItalic17 = ` line-height: 1.4; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const headlineBold14 = ` @@ -72,6 +80,7 @@ export const headlineBold14 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const headlineBold17 = ` @@ -80,6 +89,7 @@ export const headlineBold17 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const headlineBold20 = ` @@ -88,6 +98,7 @@ export const headlineBold20 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineBold24 = ` @@ -96,6 +107,7 @@ export const headlineBold24 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineBold28 = ` @@ -104,6 +116,7 @@ export const headlineBold28 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineBold34 = ` @@ -112,6 +125,7 @@ export const headlineBold34 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 4px; `; export const headlineBold42 = ` @@ -120,6 +134,7 @@ export const headlineBold42 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 5px; `; export const headlineBold50 = ` @@ -128,6 +143,7 @@ export const headlineBold50 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 6px; `; export const headlineBold70 = ` @@ -136,6 +152,7 @@ export const headlineBold70 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 6px; `; export const headlineLight14 = ` @@ -144,6 +161,7 @@ export const headlineLight14 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const headlineLight17 = ` @@ -152,6 +170,7 @@ export const headlineLight17 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const headlineLight20 = ` @@ -160,6 +179,7 @@ export const headlineLight20 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineLight24 = ` @@ -168,6 +188,7 @@ export const headlineLight24 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineLight28 = ` @@ -176,6 +197,7 @@ export const headlineLight28 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineLight34 = ` @@ -184,6 +206,7 @@ export const headlineLight34 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 4px; `; export const headlineLight42 = ` @@ -192,6 +215,7 @@ export const headlineLight42 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 5px; `; export const headlineLight50 = ` @@ -200,6 +224,7 @@ export const headlineLight50 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 6px; `; export const headlineLight70 = ` @@ -208,6 +233,7 @@ export const headlineLight70 = ` line-height: 1.15; font-weight: 300; font-style: normal; + --source-text-decoration-thickness: 6px; `; export const headlineLightItalic14 = ` @@ -216,6 +242,7 @@ export const headlineLightItalic14 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const headlineLightItalic17 = ` @@ -224,6 +251,7 @@ export const headlineLightItalic17 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const headlineLightItalic20 = ` @@ -232,6 +260,7 @@ export const headlineLightItalic20 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const headlineLightItalic24 = ` @@ -240,6 +269,7 @@ export const headlineLightItalic24 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const headlineLightItalic28 = ` @@ -248,6 +278,7 @@ export const headlineLightItalic28 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const headlineLightItalic34 = ` @@ -256,6 +287,7 @@ export const headlineLightItalic34 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 4px; `; export const headlineLightItalic42 = ` @@ -264,6 +296,7 @@ export const headlineLightItalic42 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 5px; `; export const headlineLightItalic50 = ` @@ -272,6 +305,7 @@ export const headlineLightItalic50 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 6px; `; export const headlineLightItalic70 = ` @@ -280,6 +314,7 @@ export const headlineLightItalic70 = ` line-height: 1.15; font-weight: 300; font-style: italic; + --source-text-decoration-thickness: 6px; `; export const headlineMedium14 = ` @@ -288,6 +323,7 @@ export const headlineMedium14 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const headlineMedium17 = ` @@ -296,6 +332,7 @@ export const headlineMedium17 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const headlineMedium20 = ` @@ -304,6 +341,7 @@ export const headlineMedium20 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineMedium24 = ` @@ -312,6 +350,7 @@ export const headlineMedium24 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineMedium28 = ` @@ -320,6 +359,7 @@ export const headlineMedium28 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const headlineMedium34 = ` @@ -328,6 +368,7 @@ export const headlineMedium34 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 4px; `; export const headlineMedium42 = ` @@ -336,6 +377,7 @@ export const headlineMedium42 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 5px; `; export const headlineMedium50 = ` @@ -344,6 +386,7 @@ export const headlineMedium50 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 6px; `; export const headlineMedium70 = ` @@ -352,6 +395,7 @@ export const headlineMedium70 = ` line-height: 1.15; font-weight: 500; font-style: normal; + --source-text-decoration-thickness: 6px; `; export const headlineMediumItalic14 = ` @@ -360,6 +404,7 @@ export const headlineMediumItalic14 = ` line-height: 1.15; font-weight: 500; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const headlineMediumItalic17 = ` @@ -368,6 +413,7 @@ export const headlineMediumItalic17 = ` line-height: 1.15; font-weight: 500; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const headlineMediumItalic20 = ` @@ -376,6 +422,7 @@ export const headlineMediumItalic20 = ` line-height: 1.15; font-weight: 500; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const headlineMediumItalic24 = ` @@ -384,6 +431,7 @@ export const headlineMediumItalic24 = ` line-height: 1.15; font-weight: 500; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const headlineMediumItalic28 = ` @@ -392,6 +440,7 @@ export const headlineMediumItalic28 = ` line-height: 1.15; font-weight: 500; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const headlineMediumItalic34 = ` @@ -400,6 +449,7 @@ export const headlineMediumItalic34 = ` line-height: 1.15; font-weight: 500; font-style: italic; + --source-text-decoration-thickness: 4px; `; export const headlineMediumItalic42 = ` @@ -408,6 +458,7 @@ export const headlineMediumItalic42 = ` line-height: 1.15; font-weight: 500; font-style: italic; + --source-text-decoration-thickness: 5px; `; export const headlineMediumItalic50 = ` @@ -416,6 +467,7 @@ export const headlineMediumItalic50 = ` line-height: 1.15; font-weight: 500; font-style: italic; + --source-text-decoration-thickness: 6px; `; export const headlineMediumItalic70 = ` @@ -424,6 +476,7 @@ export const headlineMediumItalic70 = ` line-height: 1.15; font-weight: 700; font-style: italic; + --source-text-decoration-thickness: 6px; `; export const kicker14 = ` @@ -432,6 +485,7 @@ export const kicker14 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const kicker17 = ` @@ -440,6 +494,7 @@ export const kicker17 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const kicker20 = ` @@ -448,6 +503,7 @@ export const kicker20 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const kicker24 = ` @@ -456,6 +512,7 @@ export const kicker24 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const kicker34 = ` @@ -464,6 +521,7 @@ export const kicker34 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 4px; `; export const textEgyptian14 = ` @@ -472,6 +530,7 @@ export const textEgyptian14 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textEgyptian15 = ` @@ -480,6 +539,7 @@ export const textEgyptian15 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textEgyptian17 = ` @@ -488,6 +548,7 @@ export const textEgyptian17 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textEgyptianBold14 = ` @@ -496,6 +557,7 @@ export const textEgyptianBold14 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textEgyptianBold15 = ` @@ -504,6 +566,7 @@ export const textEgyptianBold15 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textEgyptianBold17 = ` @@ -512,6 +575,7 @@ export const textEgyptianBold17 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textEgyptianBoldItalic14 = ` @@ -520,6 +584,7 @@ export const textEgyptianBoldItalic14 = ` line-height: 1.3; font-weight: 700; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textEgyptianBoldItalic15 = ` @@ -528,6 +593,7 @@ export const textEgyptianBoldItalic15 = ` line-height: 1.3; font-weight: 700; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textEgyptianBoldItalic17 = ` @@ -536,6 +602,7 @@ export const textEgyptianBoldItalic17 = ` line-height: 1.3; font-weight: 700; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textEgyptianItalic14 = ` @@ -544,6 +611,7 @@ export const textEgyptianItalic14 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textEgyptianItalic15 = ` @@ -552,6 +620,7 @@ export const textEgyptianItalic15 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textEgyptianItalic17 = ` @@ -560,6 +629,7 @@ export const textEgyptianItalic17 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textSans12 = ` @@ -568,6 +638,7 @@ export const textSans12 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textSans14 = ` @@ -576,6 +647,7 @@ export const textSans14 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textSans15 = ` @@ -584,6 +656,7 @@ export const textSans15 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textSans17 = ` @@ -592,6 +665,7 @@ export const textSans17 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textSans20 = ` @@ -600,6 +674,7 @@ export const textSans20 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const textSans24 = ` @@ -608,6 +683,7 @@ export const textSans24 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const textSans28 = ` @@ -616,6 +692,7 @@ export const textSans28 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const textSans34 = ` @@ -624,6 +701,7 @@ export const textSans34 = ` line-height: 1.3; font-weight: 400; font-style: normal; + --source-text-decoration-thickness: 4px; `; export const textSansBold12 = ` @@ -632,6 +710,7 @@ export const textSansBold12 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textSansBold14 = ` @@ -640,6 +719,7 @@ export const textSansBold14 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textSansBold15 = ` @@ -648,6 +728,7 @@ export const textSansBold15 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textSansBold17 = ` @@ -656,6 +737,7 @@ export const textSansBold17 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 2px; `; export const textSansBold20 = ` @@ -664,6 +746,7 @@ export const textSansBold20 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const textSansBold24 = ` @@ -672,6 +755,7 @@ export const textSansBold24 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const textSansBold28 = ` @@ -680,6 +764,7 @@ export const textSansBold28 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 3px; `; export const textSansBold34 = ` @@ -688,6 +773,7 @@ export const textSansBold34 = ` line-height: 1.3; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 4px; `; export const textSansItalic12 = ` @@ -696,6 +782,7 @@ export const textSansItalic12 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textSansItalic14 = ` @@ -704,6 +791,7 @@ export const textSansItalic14 = ` line-height: 1.3; font-weight: 400; font-style: Italic; + --source-text-decoration-thickness: 2px; `; export const textSansItalic15 = ` @@ -712,6 +800,7 @@ export const textSansItalic15 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textSansItalic17 = ` @@ -720,6 +809,7 @@ export const textSansItalic17 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 2px; `; export const textSansItalic20 = ` @@ -728,6 +818,7 @@ export const textSansItalic20 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const textSansItalic24 = ` @@ -736,6 +827,7 @@ export const textSansItalic24 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const textSansItalic28 = ` @@ -744,6 +836,7 @@ export const textSansItalic28 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 3px; `; export const textSansItalic34 = ` @@ -752,6 +845,7 @@ export const textSansItalic34 = ` line-height: 1.3; font-weight: 400; font-style: italic; + --source-text-decoration-thickness: 4px; `; export const titlepiece42 = ` @@ -760,6 +854,7 @@ export const titlepiece42 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 5px; `; export const titlepiece50 = ` @@ -768,6 +863,7 @@ export const titlepiece50 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 6px; `; export const titlepiece70 = ` @@ -776,4 +872,5 @@ export const titlepiece70 = ` line-height: 1.15; font-weight: 700; font-style: normal; + --source-text-decoration-thickness: 6px; `;