refactor(tokens)!: rework typography tokens (#1325)

* refactor(tokens)!: rework typography tokens * refactor: update sizes * fix: tweak styles * fix: tweak label line heights
launchdarkly · Jul 2, 2024 · 6ab5b77 · 6ab5b77
1 parent 5aba4bf
commit 6ab5b77
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 87 deletions.
diff --git a/.changeset/six-bananas-kick.md b/.changeset/six-bananas-kick.md
@@ -0,0 +1,17 @@
+---
+"@launchpad-ui/tokens": minor
+"@launchpad-ui/components": patch
+"@launchpad-ui/counter": patch
+"@launchpad-ui/core": patch
+"@launchpad-ui/modal": patch
+"@launchpad-ui/table": patch
+---
+
+Rework typography tokens:
+
+- Remove font-size-0
+- font-size-100: 12px -> 11px
+- font-size-200: 14px -> 13px
+- font-size-300: 16px -> 15px
+- Update line-height tokens
+- Remove small-2-*
diff --git a/packages/components/src/styles/Button.module.css b/packages/components/src/styles/Button.module.css
@@ -31,17 +31,17 @@
 }
 
 .small {
-	line-height: var(--lp-font-size-300);
-	padding: 3px var(--lp-spacing-300);
+	font: var(--lp-label-2-medium);
+	padding: 1px var(--lp-spacing-300);
 }
 
 .medium {
-	line-height: var(--lp-font-size-300);
-	padding: 7px var(--lp-spacing-300);
+	padding: 3px var(--lp-spacing-300);
 }
 
 .large {
 	font-size: var(--lp-font-size-300);
+	line-height: var(--lp-line-height-300);
 	padding: 7px var(--lp-spacing-400);
 }
 

diff --git a/packages/components/src/styles/Calendar.module.css b/packages/components/src/styles/Calendar.module.css
@@ -29,7 +29,6 @@
 }
 
 .cell {
-	padding: var(--lp-spacing-300);
 	cursor: default;
 	outline: none;
 	border: none;
@@ -51,7 +50,7 @@
 
 .range {
 	& td {
-		padding: 2px 0;
+		padding: 1px 0;
 	}
 
 	& .cell {

diff --git a/packages/components/src/styles/Group.module.css b/packages/components/src/styles/Group.module.css
@@ -5,6 +5,10 @@
 	overflow: hidden;
 	width: 100%;
 
+	&:has( button[data-rac]) {
+		padding-block: 3px;
+	}
+
 	&[data-focus-within] {
 		outline: 2px solid var(--lp-color-shadow-interactive-focus);
 		outline-offset: -2px;

diff --git a/packages/components/src/styles/Input.module.css b/packages/components/src/styles/Input.module.css
@@ -1,7 +1,7 @@
 .base {
 	font: var(--lp-body-2-regular);
 	color: var(--lp-color-text-ui-primary-base);
-	padding: 3px var(--lp-spacing-300);
+	padding: 5px var(--lp-spacing-300);
 	border-radius: var(--lp-border-radius-medium);
 	border-width: var(--lp-border-width-200);
 	border-style: solid;

diff --git a/packages/components/src/styles/SearchField.module.css b/packages/components/src/styles/SearchField.module.css
@@ -12,6 +12,6 @@
 	}
 
 	&[data-empty] button {
-		display: none;
+		visibility: hidden;
 	}
 }
diff --git a/packages/components/src/styles/TagGroup.module.css b/packages/components/src/styles/TagGroup.module.css
@@ -45,7 +45,7 @@
 }
 
 .small {
-	font: var(--lp-small-1-medium);
+	font: var(--lp-label-2-medium);
 }
 
 .medium {

diff --git a/packages/counter/src/styles/Counter.module.css b/packages/counter/src/styles/Counter.module.css
@@ -1,8 +1,9 @@
+/* stylelint-disable number-max-precision */
 .Counter {
 	display: inline-block;
 	font-size: 0.6875rem;
 	font-weight: var(--lp-font-weight-bold);
-	line-height: var(--lp-line-height-200);
+	line-height: 1.285714286;
 	padding: 2px 8px;
 	border-radius: 0.625rem;
 	color: var(--lp-color-text-ui-secondary);
@@ -16,3 +17,4 @@
 	color: var(--lp-color-text-ui-secondary);
 	background-color: var(--lp-color-bg-ui-secondary);
 }
+/* stylelint-enable number-max-precision */
diff --git a/packages/modal/src/styles/Modal.module.css b/packages/modal/src/styles/Modal.module.css
@@ -54,7 +54,7 @@
 
 .title {
 	display: block;
-	font-size: var(--lp-font-size-500);
+	font-size: var(--lp-font-size-400);
 	line-height: 1.2;
 	font-weight: var(--lp-font-weight-semibold);
 	margin: 0;

diff --git a/packages/table/src/styles/Table.module.css b/packages/table/src/styles/Table.module.css
@@ -72,7 +72,7 @@
 }
 
 .TableHeader-title {
-	font-size: var(--lp-font-size-500);
+	font-size: var(--lp-font-size-400);
 	font-weight: var(--lp-font-weight-regular);
 	line-height: 1.5;
 	display: flex;

diff --git a/packages/tokens/src/font.json b/packages/tokens/src/font.json
@@ -13,32 +13,29 @@
 	},
 	"fontSize": {
 		"$type": "dimension",
-		"0": {
-			"$value": "{size.10}"
-		},
 		"100": {
-			"$value": "{size.12}"
+			"$value": "{size.11}"
 		},
 		"200": {
-			"$value": "{size.14}"
+			"$value": "{size.13}"
 		},
 		"300": {
-			"$value": "{size.16}"
+			"$value": "{size.15}"
 		},
 		"400": {
-			"$value": "{size.18}"
+			"$value": "{size.20}"
 		},
 		"500": {
-			"$value": "{size.20}"
+			"$value": "{size.24}"
 		},
 		"600": {
-			"$value": "{size.24}"
+			"$value": "{size.32}"
 		},
 		"700": {
-			"$value": "{size.32}"
+			"$value": "{size.44}"
 		},
 		"800": {
-			"$value": "{size.44}"
+			"$value": "3.75rem"
 		}
 	},
 	"fontWeight": {

diff --git a/packages/tokens/src/line-height.json b/packages/tokens/src/line-height.json
@@ -2,16 +2,19 @@
 	"lineHeight": {
 		"$type": "number",
 		"100": {
-			"$value": 1.12
+			"$value": "{size.16}"
 		},
 		"200": {
-			"$value": 1.285714286
+			"$value": "{size.20}"
 		},
 		"300": {
-			"$value": 1.5
+			"$value": "{size.24}"
 		},
 		"400": {
-			"$value": 2
+			"$value": "{size.28}"
+		},
+		"500": {
+			"$value": "{size.72}"
 		}
 	}
 }
diff --git a/packages/tokens/src/size.json b/packages/tokens/src/size.json
@@ -25,12 +25,21 @@
 		"10": {
 			"$value": "0.625rem"
 		},
+		"11": {
+			"$value": "0.6875rem"
+		},
 		"12": {
 			"$value": "0.75rem"
 		},
+		"13": {
+			"$value": "0.8125rem"
+		},
 		"14": {
 			"$value": "0.875rem"
 		},
+		"15": {
+			"$value": "0.9375rem"
+		},
 		"16": {
 			"$value": "1rem"
 		},