Update colors and typography of default Learning Mode template (#7008)

* Update colors and typography of default Learning Mode template

* Style course title

* Use CSS variable for font size since it's equivalent

* Update pagination

* Don't include colors in theme.json because it doesn't work with global styles

* Fix global styles for module title and "Quiz" link in course navigation

* Fix global styles for lessons in course navigation

* Fix global styles not working with course progress counter

* Keep links in sidebar their original color

* Fix global styles for pagination

course/learning-mode.css

@@ -14,11 +14,6 @@ body {
 	margin-block-start: 0;
 }
 
-.sensei-lms-course-navigation-lesson {
-	padding-top: 20px;
-	padding-bottom: 0;
-}
-
 .sensei-course-theme__sidebar {
 	--sensei-lm-sidebar-width: 290px;
 }
@@ -27,57 +22,64 @@ body {
 	padding-top: 45px;
 }
 
-.sensei-lms-course-navigation-lesson__title {
-	font-family: var(--wp--preset--font-family--system);
-	font-size: 1rem;
-	font-weight: normal;
+/* Course Navigation */
+.sensei-lms-course-navigation-module:not(:first-of-type) {
+	margin-top: 18px;
+}
+
+.sensei-lms-course-navigation-module__header{
+	padding-top: 0;
 }
 
 .sensei-lms-course-navigation-module__title {
 	font-family: var(--wp--preset--font-family--heading);
-	font-size: var(--wp--preset--font-size--medium);
+	font-size: 1.75rem;
+	font-weight: 400;
 	line-height: 100%;
 	letter-spacing: 0.01em;
 	text-transform: uppercase;
-	text-decoration: none;
-}
-
-.sensei-lms-course-navigation-lesson__extra {
-	font-size: 1rem;
-	font-family: var(--wp--preset--font-family--system);
-	line-height: 100%;
-	font-weight: normal;
-	opacity: 1;
-	letter-spacing: 0.02em;
 }
 
 .sensei-lms-course-navigation-module__summary {
 	font-family: var(--wp--preset--font-family--system);
-	font-size: 11px;
 	font-weight: 400;
 	margin-top: 4px;
 	line-height: 16px;
 	opacity: 1;
-	text-transform: uppercase;
 }
 
-.sensei-lms-course-navigation-module__header{
-	padding-top: 0;
+.sensei-lms-course-navigation-lesson {
+	align-items: baseline;
+	padding-top: 20px;
+	padding-bottom: 0;
 }
 
-.sensei-lms-course-navigation-module:not(:first-of-type) {
-	margin-top: 18px;
+.sensei-lms-course-navigation-lesson__link {
+	align-items: baseline;
+}
+
+.sensei-lms-course-navigation-lesson__title {
+	font-family: var(--wp--preset--font-family--system);
+}
+
+.sensei-lms-course-navigation-lesson__extra {
+	font-family: var(--wp--preset--font-family--system);
+	line-height: 1.23;
+	font-weight: normal;
+	opacity: 1;
+	letter-spacing: 0.02em;
 }
 
+/* Lesson Actions */
 .wp-block-sensei-button:where(:not(.is-style-link)) a:hover{
 	text-decoration: none;
 }
 
-.sensei-course-theme-lesson-actions .is-link {
-	font-weight: 600;
-	text-decoration: underline !important;
-	background: none !important;
-	color: inherit !important;
+.sensei-course-theme-lesson-actions__next-lesson {
+	font-family: var(--wp--preset--font-family--heading);
+	font-size: var(--wp--custom--typography--font-sizes--button);
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
 }
 
 .sensei-course-theme-lesson-actions .is-link:hover {
@@ -118,10 +120,6 @@ body {
 	height: 20px;
 }
 
-.sensei-lms-course-navigation-lesson__link {
-	align-items: baseline;
-}
-
 .sensei-course-theme .sensei-course-theme__video-container::after {
 	--sensei-lm-sidebar-width: 290px;
 }
@@ -150,6 +148,10 @@ body {
 	height: 8px;
 }
 
+.sensei-course-theme__frame .sensei-course-theme-course-progress-bar-inner {
+	background-color: var(--sensei-primary-color);
+}
+
 .sensei-course-theme .sensei-course-theme__video-container {
 	border-radius: 4px;
 }
@@ -197,19 +199,10 @@ body {
 	color: var(--sensei-text-color);
 }
 
-.sensei-lms-course-navigation + .wp-block-spacer {
-	display: none;
-}
-
 .learning-mode-full-width .wp-block-sensei-lms-course-theme-course-progress-counter {
-	font-size: var(--wp--preset--font-size--x-small);
 	opacity: 1;
 }
 
-.sensei-lms-course-navigation-lesson {
-	align-items: baseline;
-}
-
 .wp-block-sensei-lms-exit-course:hover {
 	text-decoration: none;
 }

course/theme.json

@@ -657,9 +657,12 @@
 			},
 			"sensei-lms/course-title" : {
 				"typography": {
-					"textTransform": "uppercase",
 					"fontFamily": "var(--wp--preset--font-family--heading)",
-					"fontSize": "var(--wp--preset--font-size--medium)"
+					"fontSize": "clamp(1.5rem, 1.5rem + 0vw, 1.5rem)",
+					"fontWeight": "400",
+					"letterSpacing": "0.01em",
+					"lineHeight": "1",
+					"textTransform": "uppercase"
 				}
 			},
 			"sensei-lms/course-navigation" : {
@@ -677,21 +680,30 @@
 			"sensei-lms/course-theme-course-progress-counter" : {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--system)",
-					"fontSize": "calc(0.7*var(--wp--preset--font-size-x-small))",
-					"letterSpacing": "0.02em"
+					"fontSize": "clamp(0.875rem, 0.696rem + 0.476vw, 1.125rem)",
+					"letterSpacing": "0.02em",
+					"lineHeight": "1"
 				}
 			},
 			"sensei-lms/course-theme-lesson-module": {
 				"typography": {
-					"fontSize": "0px"
+					"fontFamily": "var(--wp--preset--font-family--system)"
 				}
 			},
-			"sensei-lms/exit-course" : {
+			"sensei-lms/exit-course": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--system)",
 					"fontSize": "var(--wp--preset--font-size--x-small)",
 					"textDecoration": "underline",
-					"letterSpacing": "0.02em"
+					"letterSpacing": "0.02em",
+					"lineHeight": "1"
+				}
+			},
+			"sensei-lms/page-actions": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--heading)",
+					"fontSize": "var(--wp--custom--typography--font-sizes--button)",
+					"letterSpacing": "0.05em"
 				}
 			},
 			"core/quote": {
@@ -910,7 +922,8 @@
 		},
 		"typography": {
 			"fontFamily": "var(--wp--preset--font-family--body)",
-			"fontSize": "var(--wp--custom--typography--font-sizes--normal)"
+			"fontSize": "var(--wp--custom--typography--font-sizes--normal)",
+			"lineHeight": "1.3"
 		}
 	},
 	"templateParts": [