feat: adjust font sizes, line heights, input styles

Automattic · Apr 18, 2024 · 495781e · 495781e
1 parent d714dac
commit 495781e
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 29 deletions.
diff --git a/assets/newspack-ui/scss/_modals.scss b/assets/newspack-ui/scss/_modals.scss
@@ -47,7 +47,7 @@
 				&__content {
 					padding: var( --newspack-ui-spacer-5 );
 					overflow: auto;
-					border-radius: var( --newspack-ui-border-radius-s );
+					border-radius: var( --newspack-ui-border-radius-m );
 					h3 {
 						font-size: var( --newspack-ui-font-size-s );
 						margin: 0;
@@ -166,7 +166,7 @@
 			background: var( --newspack-ui-color-neutral-5 );
 			color: var( --newspack-ui-color-neutral-60 );
 			font-size: var( --newspack-ui-font-size-xs );
-			line-height: var( --newspack-ui-line-height-s );
+			line-height: var( --newspack-ui-line-height-xs );
 			a {
 				text-decoration: underline;
 			}

diff --git a/assets/newspack-ui/scss/elements/_tables.scss b/assets/newspack-ui/scss/elements/_tables.scss
@@ -2,7 +2,7 @@
 	table {
 		border: 0;
 		font-size: var( --newspack-ui-font-size-xs ); // Prevent relative font size
-		line-height: var( --newspack-ui-line-height-l );
+		line-height: var( --newspack-ui-line-height-xs );
 		margin: calc( var( --newspack-ui-spacer-base ) / -2 ) 0; // Offset cell padding.
 		th,
 		td {

diff --git a/assets/newspack-ui/scss/elements/_typography.scss b/assets/newspack-ui/scss/elements/_typography.scss
@@ -22,31 +22,56 @@
 
 	&__font--2xs {
 		font-size: var( --newspack-ui-font-size-2xs );
-		line-height: 1.3333;
+		line-height: var( --newspack-ui-line-height-2xs );
 	}
 
 	&__font--xs {
 		font-size: var( --newspack-ui-font-size-xs );
-		line-height: 1.4286;
+		line-height: var( --newspack-ui-line-height-xs );
 	}
 
 	&__font--s {
 		font-size: var( --newspack-ui-font-size-s );
-		line-height: 1.5;
+		line-height: var( --newspack-ui-line-height-s );
 	}
 
 	&__font--m {
 		font-size: var( --newspack-ui-font-size-m );
-		line-height: 1.6;
+		line-height: var( --newspack-ui-line-height-m );
 	}
 
 	&__font--l {
 		font-size: var( --newspack-ui-font-size-l );
-		line-height: 1.5;
+		line-height: var( --newspack-ui-line-height-l );
 	}
 
 	&__font--xl {
 		font-size: var( --newspack-ui-font-size-xl );
-		line-height: 1.375;
+		line-height: var( --newspack-ui-line-height-xl );
+	}
+
+	&__font--2xl {
+		font-size: var( --newspack-ui-font-size-2xl );
+		line-height: var( --newspack-ui-line-height-2xl );
+	}
+
+	&__font--3xl {
+		font-size: var( --newspack-ui-font-size-3xl );
+		line-height: var( --newspack-ui-line-height-3xl );
+	}
+
+	&__font--4xl {
+		font-size: var( --newspack-ui-font-size-4xl );
+		line-height: var( --newspack-ui-line-height-4xl );
+	}
+
+	&__font--5xl {
+		font-size: var( --newspack-ui-font-size-5xl );
+		line-height: var( --newspack-ui-line-height-5xl );
+	}
+
+	&__font--6xl {
+		font-size: var( --newspack-ui-font-size-6xl );
+		line-height: var( --newspack-ui-line-height-6xl );
 	}
 }
diff --git a/assets/newspack-ui/scss/elements/forms/_buttons.scss b/assets/newspack-ui/scss/elements/forms/_buttons.scss
@@ -1,6 +1,6 @@
 .newspack-ui {
-	// TODO: define some kind of size hierachy for buttons eg. small, medium, large;
-	// not needed for RAS, but likely for My Account.
+	// TODO: define some kind of size hierachy for buttons eg. small, medium, large.
+	// Buttons in modals are already set to font-size-s and border-radius-m.
 	&__button {
 		align-items: center;
 		border: 0;
@@ -11,8 +11,8 @@
 		font-weight: 600;
 		gap: var( --newspack-ui-spacer-2 );
 		justify-content: center;
-		line-height: var( --newspack-ui-line-height-l );
-		padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-3 ); // TODO: correct this
+		line-height: var( --newspack-ui-line-height-s );
+		padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-4 );
 		transition: background-color 150ms ease-in-out;
 
 		&:not( :last-child ) {

diff --git a/assets/newspack-ui/scss/elements/forms/_text-inputs.scss b/assets/newspack-ui/scss/elements/forms/_text-inputs.scss
@@ -25,6 +25,7 @@
 		font-size: var( --newspack-ui-font-size-s );
 		line-height: var( --newspack-ui-line-height-l );
 		padding: calc( var( --newspack-ui-spacer-2 ) - 1px ) calc( var( --newspack-ui-spacer-3 ) - 1px );
+		transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out, outline 125ms ease-in-out;
 		width: 100%;
 
 		&:focus {

diff --git a/assets/newspack-ui/scss/variables/_fonts.scss b/assets/newspack-ui/scss/variables/_fonts.scss
@@ -4,20 +4,29 @@
 	--newspack-ui-font-weight-strong: 600;
 
 	// Fonts - sizes
-	--newspack-ui-font-size-2xs: 12px; // line-height: 1.3333
-	--newspack-ui-font-size-xs: 14px; // line-height: 1.4286
-	--newspack-ui-font-size-s: 16px; // line-height: 1.5
-	--newspack-ui-font-size-m: clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem); // line-height: 1.6
-	--newspack-ui-font-size-l: clamp( 1.25rem, 0.857rem + 0.803vw, 1.5rem ); // line-height: 1.5
-	--newspack-ui-font-size-xl: clamp( 1.375rem, 0.394rem + 2.008vw, 2rem ); // line-height: 1.375
-	--newspack-ui-font-size-2xl: clamp( 1.625rem, 0.055rem + 3.213vw, 2.625rem ); // line-height: 1.3333
-	--newspack-ui-font-size-3xl: clamp( 1.75rem, -0.213rem + 4.016vw, 3rem ); // line-height: 1.25
-	--newspack-ui-font-size-4xl: clamp( 2rem, -1.141rem + 6.426vw, 4rem ); // line-height: 1.125
-	--newspack-ui-font-size-5xl: clamp( 2.125rem, -2.39rem + 9.237vw, 5rem ); // line-height: 1.1
-	--newspack-ui-font-size-6xl: clamp( 2.25rem, -3.639rem + 12.048vw, 6rem ); // line-height: 1.0833
+	--newspack-ui-font-size-2xs: 12px;
+	--newspack-ui-font-size-xs: 14px;
+	--newspack-ui-font-size-s: 16px;
+	--newspack-ui-font-size-m: clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem);
+	--newspack-ui-font-size-l: clamp( 1.25rem, 0.857rem + 0.803vw, 1.5rem );
+	--newspack-ui-font-size-xl: clamp( 1.375rem, 0.394rem + 2.008vw, 2rem );
+	--newspack-ui-font-size-2xl: clamp( 1.625rem, 0.055rem + 3.213vw, 2.625rem );
+	--newspack-ui-font-size-3xl: clamp( 1.75rem, -0.213rem + 4.016vw, 3rem );
+	--newspack-ui-font-size-4xl: clamp( 2rem, -1.141rem + 6.426vw, 4rem );
+	--newspack-ui-font-size-5xl: clamp( 2.125rem, -2.39rem + 9.237vw, 5rem );
+	--newspack-ui-font-size-6xl: clamp( 2.25rem, -3.639rem + 12.048vw, 6rem );
 
-	// Fonts - line heights. TODO: sort this out:
-	--newspack-ui-line-height-l: 1.7143; // inputs, buttons
-	--newspack-ui-line-height-m: 1.5; // 16px font size
-	--newspack-ui-line-height-s: 1.4286; // 14px font sizes
+	// Fonts - line heights
+	// TODO: would this make more sense as mixins with the accompanying font sizes?
+	--newspack-ui-line-height-2xs: 1.3333;
+	--newspack-ui-line-height-xs: 1.4286;
+	--newspack-ui-line-height-s: 1.5;
+	--newspack-ui-line-height-m: 1.6;
+	--newspack-ui-line-height-l: 1.5;
+	--newspack-ui-line-height-xl: 1.375;
+	--newspack-ui-line-height-2xl: 1.3333;
+	--newspack-ui-line-height-3xl: 1.25;
+	--newspack-ui-line-height-4xl: 1.125;
+	--newspack-ui-line-height-5xl: 1.1;
+	--newspack-ui-line-height-6xl: 1.0833;
 }
diff --git a/assets/newspack-ui/scss/variables/_index.scss b/assets/newspack-ui/scss/variables/_index.scss
@@ -11,6 +11,6 @@
 
 	// Border radius - not ems because the font size of the element itself caused a cascade.
 	--newspack-ui-border-radius-m: 6px;
-	--newspack-ui-border-radius-s: 5px;
+	--newspack-ui-border-radius-s: 4px;
 	--newspack-ui-border-radius-xs: 2px;
 }