fix(button): update font styles to match RAC

launchdarkly · Oct 10, 2024 · 269b2b3 · 269b2b3
1 parent 037b114
commit 269b2b3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/.changeset/two-scissors-enjoy.md b/.changeset/two-scissors-enjoy.md
@@ -0,0 +1,6 @@
+---
+"@launchpad-ui/button": patch
+"@launchpad-ui/core": patch
+---
+
+Update font styles to match RAC
diff --git a/packages/button/src/styles/Button.module.css b/packages/button/src/styles/Button.module.css
@@ -35,13 +35,13 @@
 
 	/* End Remaining Legacy Tokens */
 
-	--Button-font-size-default: 0.875rem;
-	--Button-font-size-small: 0.875rem;
-	--Button-font-size-large: 1rem;
+	--Button-font-size-default: var(--lp-font-size-200);
+	--Button-font-size-small: var(--lp-font-size-100);
+	--Button-font-size-large: var(--lp-font-size-300);
 	--Button-font-weight: var(--lp-font-weight-medium);
-	--Button-line-height-default: 114%;
-	--Button-line-height-small: 114%;
-	--Button-line-height-large: 150%;
+	--Button-line-height-default: var(--lp-line-height-300);
+	--Button-line-height-small: var(--lp-line-height-200);
+	--Button-line-height-large: var(--lp-line-height-300);
 	--Button-border-radius-default: 0.375rem;
 	--Button-border-radius-small: var(--lp-border-radius-regular);
 	--Button-border-radius-link: 1px;
@@ -235,7 +235,7 @@
 	border-radius: var(--Button-border-radius-default);
 	font-size: var(--Button-font-size-default);
 	line-height: var(--Button-line-height-default);
-	padding: 0.4375rem 0.5rem;
+	padding: 3px var(--lp-spacing-300);
 	cursor: default;
 	user-select: none;
 	appearance: none;
@@ -245,7 +245,7 @@
 .Button--tiny {
 	border-radius: var(--Button-border-radius-small);
 	font-size: var(--lp-font-size-100);
-	line-height: var(--Button-line-height-small);
+	line-height: 114%;
 	padding: 0.0625rem 0.25rem;
 	min-height: 1.25rem;
 }
@@ -254,14 +254,14 @@
 	border-radius: var(--Button-border-radius-small);
 	font-size: var(--Button-font-size-small);
 	line-height: var(--Button-line-height-small);
-	padding: 0.1875rem 0.5rem;
+	padding: 1px var(--lp-spacing-300);
 	min-height: 1.5rem;
 }
 
 .Button--big {
 	font-size: var(--Button-font-size-large);
 	line-height: var(--Button-line-height-large);
-	padding: 0.4375rem 0.75rem;
+	padding: 7px var(--lp-spacing-400);
 	min-height: 2.5rem;
 }