Define letter spacing and fix typos in CSS variables usage. (#2210)

seedlet/assets/css/ie.css

@@ -1982,20 +1982,20 @@ blockquote {
 
 blockquote p {
 	font-size: 24px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 blockquote cite {
 	color: #444444;
 	font-size: 14px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 }
 
 blockquote footer {
 	color: #444444;
 	font-size: 14px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 }
 
 blockquote > * {
@@ -2029,22 +2029,22 @@ blockquote.alignright p {
 
 blockquote.alignleft cite {
 	font-size: 14px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 }
 
 blockquote.alignleft footer {
 	font-size: 14px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 }
 
 blockquote.alignright cite {
 	font-size: 14px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 }
 
 blockquote.alignright footer {
 	font-size: 14px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 }
 
 input[type="text"] {
@@ -2273,7 +2273,7 @@ input[type=checkbox] + label {
 figcaption {
 	color: #444444;
 	font-size: 14px;
-	line-height: undefined;
+	line-height: 1.7;
 	margin-top: 10px;
 	margin-bottom: 20px;
 	text-align: center;
@@ -2281,7 +2281,7 @@ figcaption {
 .wp-caption {
 	color: #444444;
 	font-size: 14px;
-	line-height: undefined;
+	line-height: 1.7;
 	margin-top: 10px;
 	margin-bottom: 20px;
 	text-align: center;
@@ -2289,7 +2289,7 @@ figcaption {
 .wp-caption-text {
 	color: #444444;
 	font-size: 14px;
-	line-height: undefined;
+	line-height: 1.7;
 	margin-top: 10px;
 	margin-bottom: 20px;
 	text-align: center;
@@ -2550,7 +2550,7 @@ object {
 
 .wp-block-cover h2 {
 	font-size: 32px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 	max-width: inherit;
 	text-align: inherit;
@@ -2559,7 +2559,7 @@ object {
 
 .wp-block-cover-image h2 {
 	font-size: 32px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 	max-width: inherit;
 	text-align: inherit;
@@ -2876,73 +2876,73 @@ h6 strong {
 
 h1 {
 	font-size: 48px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 .h1 {
 	font-size: 48px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 h2 {
 	font-size: 32px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 .h2 {
 	font-size: 32px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 h3 {
 	font-size: 28px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 .h3 {
 	font-size: 28px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 h4 {
 	font-size: 24px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 .h4 {
 	font-size: 24px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 h5 {
 	font-size: 18px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 .h5 {
 	font-size: 18px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 h6 {
 	font-size: 1em;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
 .h6 {
 	font-size: 1em;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 }
 
@@ -2953,7 +2953,7 @@ h6 {
 .wp-block-image figcaption {
 	color: #444444;
 	font-size: 14px;
-	line-height: undefined;
+	line-height: 1.7;
 	margin-top: 10px;
 	margin-bottom: 20px;
 	text-align: center;
@@ -3418,7 +3418,7 @@ p.has-background {
 	font-family: 'Playfair Display', Georgia, Times, serif;
 	font-size: 32px;
 	font-style: italic;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 	margin: 0;
 }
@@ -3821,7 +3821,7 @@ hr.wp-block-separator.is-style-dots:before {
 }
 
 .jetpack_subscription_widget input[type="text"] {
-	padding: undefined !important;
+	padding: 25px !important;
 	width: 100% !important;
 }
 
@@ -4467,11 +4467,11 @@ nav a {
 }
 
 .primary-navigation > .button:hover {
-	color: undefined;
+	color: #3C8067;
 }
 
 .woo-navigation > .button:hover {
-	color: undefined;
+	color: #3C8067;
 }
 
 .primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
@@ -5030,7 +5030,7 @@ nav a {
 .entry-title {
 	color: #000000;
 	font-size: 32px;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 	line-height: 1.3;
 	overflow-wrap: break-word;
 }
@@ -5402,12 +5402,12 @@ nav a {
 .comments-title {
 	font-size: 28px;
 	font-style: italic;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 }
 .comment-reply-title {
 	font-size: 28px;
 	font-style: italic;
-	letter-spacing: undefined;
+	letter-spacing: normal;
 }
 
 .comment-reply-title {
@@ -5487,7 +5487,7 @@ nav a {
 }
 
 .comment-meta .comment-author .avatar {
-	border: undefined;
+	border: 2px solid #EFEFEF;
 	border-radius: 50%;
 	position: absolute;
 	top: 5px;

seedlet/assets/css/style-editor.css

@@ -145,7 +145,7 @@ blockquote cite,
 blockquote footer {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	letter-spacing: var(--global--letter-spacing-xs);
+	letter-spacing: var(--global--letter-spacing);
 }
 
 blockquote > * {
@@ -175,7 +175,7 @@ blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
 	font-size: var(--global--font-size-xs);
-	letter-spacing: var(--global--letter-spacing-xs);
+	letter-spacing: var(--global--letter-spacing);
 }
 
 /* Media captions */
@@ -184,7 +184,7 @@ figcaption,
 .wp-caption-text {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	line-height: var(--global--font-line-height-xs);
+	line-height: var(--global--line-height-body);
 	margin-top: calc(0.5 * var(--global--spacing-unit));
 	margin-bottom: var(--global--spacing-unit);
 	text-align: center;

seedlet/assets/css/variables-editor.css

@@ -19,6 +19,7 @@ body {
 	--global--font-size-xl: 28px;
 	--global--font-size-xxl: 32px;
 	--global--font-size-xxxl: 48px;
+	--global--letter-spacing: normal;
 	/* Line Height */
 	--global--line-height-base: 1;
 	--global--line-height-body: 1.7;
@@ -58,7 +59,7 @@ body {
 	/* Elements */
 	--form--font-family: var(--global--font-secondary);
 	--form--font-size: var(--global--font-size-md);
-	--form--line-height: var(--global-line-height-body);
+	--form--line-height: var(--global--line-height-body);
 	--form--color-text: var(--global--color-foreground);
 	--form--border-color: var(--global--color-border);
 	--form--border-width: 2px;
@@ -90,12 +91,12 @@ body {
 	--heading--font-size-h3: var(--global--font-size-xl);
 	--heading--font-size-h2: var(--global--font-size-xxl);
 	--heading--font-size-h1: var(--global--font-size-xxxl);
-	--heading--letter-spacing-h6: var(--global--letter-spacing-md);
-	--heading--letter-spacing-h5: var(--global--letter-spacing-md);
-	--heading--letter-spacing-h4: var(--global--letter-spacing-lg);
-	--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
-	--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
-	--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
+	--heading--letter-spacing-h6: var(--global--letter-spacing);
+	--heading--letter-spacing-h5: var(--global--letter-spacing);
+	--heading--letter-spacing-h4: var(--global--letter-spacing);
+	--heading--letter-spacing-h3: var(--global--letter-spacing);
+	--heading--letter-spacing-h2: var(--global--letter-spacing);
+	--heading--letter-spacing-h1: var(--global--letter-spacing);
 	--heading--line-height-h6: 1.3;
 	--heading--line-height-h5: 1.3;
 	--heading--line-height-h4: 1.3;

seedlet/assets/sass/abstracts/_config.scss

@@ -24,6 +24,7 @@ $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-
 	--global--font-size-xl: 28px;
 	--global--font-size-xxl: 32px;
 	--global--font-size-xxxl: 48px;
+	--global--letter-spacing: normal;
 
 	/* Line Height */
 	--global--line-height-base: #{$typescale-base / ( $typescale-base * 0 + 1 )};

seedlet/assets/sass/blocks/heading/_config.scss

@@ -9,12 +9,12 @@
 	--heading--font-size-h2: var(--global--font-size-xxl);
 	--heading--font-size-h1: var(--global--font-size-xxxl);
 
-	--heading--letter-spacing-h6: var(--global--letter-spacing-md);
-	--heading--letter-spacing-h5: var(--global--letter-spacing-md);
-	--heading--letter-spacing-h4: var(--global--letter-spacing-lg);
-	--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
-	--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
-	--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
+	--heading--letter-spacing-h6: var(--global--letter-spacing);
+	--heading--letter-spacing-h5: var(--global--letter-spacing);
+	--heading--letter-spacing-h4: var(--global--letter-spacing);
+	--heading--letter-spacing-h3: var(--global--letter-spacing);
+	--heading--letter-spacing-h2: var(--global--letter-spacing);
+	--heading--letter-spacing-h1: var(--global--letter-spacing);
 
 	--heading--line-height-h6: 1.3;
 	--heading--line-height-h5: 1.3;

seedlet/assets/sass/blocks/image/_style.scss

@@ -4,7 +4,7 @@
 	figcaption {
 		color: var(--global--color-foreground-light);
 		font-size: var(--global--font-size-xs);
-		line-height: var(--global--line-height-xs);
+		line-height: var(--global--line-height-body);
 		margin-top: calc(0.5 * var(--global--spacing-unit));
 		margin-bottom: var(--global--spacing-unit);
 		text-align: center;

seedlet/assets/sass/blocks/subscription/style.scss

@@ -1,6 +1,6 @@
 .jetpack_subscription_widget {
   input[type="text"] {
-    padding: var(--elements--form-padding) !important;
+    padding: var(--global--spacing-horizontal) !important;
     width: 100% !important;
   }
 }

seedlet/assets/sass/components/comments/_comments.scss

@@ -107,7 +107,7 @@
 		}
 
 		.avatar {
-			border: 2px solid var(--global--border-color);
+			border: 2px solid var(--global--color-border);
 			border-radius: 50%;
 			position: absolute;
 			top: 5px;

seedlet/assets/sass/components/header/_primary-navigation.scss

@@ -47,7 +47,7 @@
 		color: var(--primary-nav--color-link);
 
 		&:hover {
-			color: var(--primary-nav--color-hover);
+			color: var(--primary-nav--color-link-hover);
 		}
 	}
 

seedlet/assets/sass/elements/_blockquote.scss

@@ -12,7 +12,7 @@ blockquote {
 	footer {
 		color: var(--global--color-foreground-light);
 		font-size: var(--global--font-size-xs);
-		letter-spacing: var(--global--letter-spacing-xs);
+		letter-spacing: var(--global--letter-spacing);
 	}
 
 	& > * {
@@ -42,7 +42,7 @@ blockquote {
 		cite,
 		footer {
 			font-size: var(--global--font-size-xs);
-			letter-spacing: var(--global--letter-spacing-xs);
+			letter-spacing: var(--global--letter-spacing);
 		}
 	}
 }

seedlet/assets/sass/elements/_config.scss

@@ -1,7 +1,7 @@
 @mixin form-variables() {
 	--form--font-family: var(--global--font-secondary);
 	--form--font-size: var(--global--font-size-md);
-	--form--line-height: var(--global-line-height-body);
+	--form--line-height: var(--global--line-height-body);
 
 	--form--color-text: var(--global--color-foreground);
 

seedlet/assets/sass/elements/_media.scss

@@ -4,7 +4,7 @@ figcaption,
 .wp-caption-text {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	line-height: var(--global--font-line-height-xs);
+	line-height: var(--global--line-height-body);
 	margin-top: calc(0.5 * var(--global--spacing-unit));
 	margin-bottom: var(--global--spacing-unit);
 	text-align: center;

seedlet/style-rtl.css

@@ -85,6 +85,7 @@ Included in theme screenshot.
 	--global--font-size-xl: 28px;
 	--global--font-size-xxl: 32px;
 	--global--font-size-xxxl: 48px;
+	--global--letter-spacing: normal;
 	/* Line Height */
 	--global--line-height-base: 1;
 	--global--line-height-body: 1.7;
@@ -123,7 +124,7 @@ Included in theme screenshot.
 	--global--border-radius-none: 0;
 	--form--font-family: var(--global--font-secondary);
 	--form--font-size: var(--global--font-size-md);
-	--form--line-height: var(--global-line-height-body);
+	--form--line-height: var(--global--line-height-body);
 	--form--color-text: var(--global--color-foreground);
 	--form--border-color: var(--global--color-border);
 	--form--border-width: 2px;
@@ -154,12 +155,12 @@ Included in theme screenshot.
 	--heading--font-size-h3: var(--global--font-size-xl);
 	--heading--font-size-h2: var(--global--font-size-xxl);
 	--heading--font-size-h1: var(--global--font-size-xxxl);
-	--heading--letter-spacing-h6: var(--global--letter-spacing-md);
-	--heading--letter-spacing-h5: var(--global--letter-spacing-md);
-	--heading--letter-spacing-h4: var(--global--letter-spacing-lg);
-	--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
-	--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
-	--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
+	--heading--letter-spacing-h6: var(--global--letter-spacing);
+	--heading--letter-spacing-h5: var(--global--letter-spacing);
+	--heading--letter-spacing-h4: var(--global--letter-spacing);
+	--heading--letter-spacing-h3: var(--global--letter-spacing);
+	--heading--letter-spacing-h2: var(--global--letter-spacing);
+	--heading--letter-spacing-h1: var(--global--letter-spacing);
 	--heading--line-height-h6: 1.3;
 	--heading--line-height-h5: 1.3;
 	--heading--line-height-h4: 1.3;
@@ -1110,7 +1111,7 @@ blockquote cite,
 blockquote footer {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	letter-spacing: var(--global--letter-spacing-xs);
+	letter-spacing: var(--global--letter-spacing);
 }
 
 blockquote > * {
@@ -1140,7 +1141,7 @@ blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
 	font-size: var(--global--font-size-xs);
-	letter-spacing: var(--global--letter-spacing-xs);
+	letter-spacing: var(--global--letter-spacing);
 }
 
 input[type="text"],
@@ -1206,7 +1207,7 @@ figcaption,
 .wp-caption-text {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	line-height: var(--global--font-line-height-xs);
+	line-height: var(--global--line-height-body);
 	margin-top: calc(0.5 * var(--global--spacing-unit));
 	margin-bottom: var(--global--spacing-unit);
 	text-align: center;
@@ -1600,7 +1601,7 @@ h6, .h6 {
 .wp-block-image figcaption {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	line-height: var(--global--line-height-xs);
+	line-height: var(--global--line-height-body);
 	margin-top: calc(0.5 * var(--global--spacing-unit));
 	margin-bottom: var(--global--spacing-unit);
 	text-align: center;
@@ -2291,7 +2292,7 @@ hr.wp-block-separator.is-style-dots:before {
 }
 
 .jetpack_subscription_widget input[type="text"] {
-	padding: var(--elements--form-padding) !important;
+	padding: var(--global--spacing-horizontal) !important;
 	width: 100% !important;
 }
 
@@ -2839,7 +2840,7 @@ nav a {
 
 .primary-navigation > .button:hover,
 .woo-navigation > .button:hover {
-	color: var(--primary-nav--color-hover);
+	color: var(--primary-nav--color-link-hover);
 }
 
 .primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
@@ -3675,7 +3676,7 @@ nav a {
 }
 
 .comment-meta .comment-author .avatar {
-	border: 2px solid var(--global--border-color);
+	border: 2px solid var(--global--color-border);
 	border-radius: 50%;
 	position: absolute;
 	top: 5px;

seedlet/style.css

@@ -85,6 +85,7 @@ Included in theme screenshot.
 	--global--font-size-xl: 28px;
 	--global--font-size-xxl: 32px;
 	--global--font-size-xxxl: 48px;
+	--global--letter-spacing: normal;
 	/* Line Height */
 	--global--line-height-base: 1;
 	--global--line-height-body: 1.7;
@@ -123,7 +124,7 @@ Included in theme screenshot.
 	--global--border-radius-none: 0;
 	--form--font-family: var(--global--font-secondary);
 	--form--font-size: var(--global--font-size-md);
-	--form--line-height: var(--global-line-height-body);
+	--form--line-height: var(--global--line-height-body);
 	--form--color-text: var(--global--color-foreground);
 	--form--border-color: var(--global--color-border);
 	--form--border-width: 2px;
@@ -154,12 +155,12 @@ Included in theme screenshot.
 	--heading--font-size-h3: var(--global--font-size-xl);
 	--heading--font-size-h2: var(--global--font-size-xxl);
 	--heading--font-size-h1: var(--global--font-size-xxxl);
-	--heading--letter-spacing-h6: var(--global--letter-spacing-md);
-	--heading--letter-spacing-h5: var(--global--letter-spacing-md);
-	--heading--letter-spacing-h4: var(--global--letter-spacing-lg);
-	--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
-	--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
-	--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
+	--heading--letter-spacing-h6: var(--global--letter-spacing);
+	--heading--letter-spacing-h5: var(--global--letter-spacing);
+	--heading--letter-spacing-h4: var(--global--letter-spacing);
+	--heading--letter-spacing-h3: var(--global--letter-spacing);
+	--heading--letter-spacing-h2: var(--global--letter-spacing);
+	--heading--letter-spacing-h1: var(--global--letter-spacing);
 	--heading--line-height-h6: 1.3;
 	--heading--line-height-h5: 1.3;
 	--heading--line-height-h4: 1.3;
@@ -1118,7 +1119,7 @@ blockquote cite,
 blockquote footer {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	letter-spacing: var(--global--letter-spacing-xs);
+	letter-spacing: var(--global--letter-spacing);
 }
 
 blockquote > * {
@@ -1148,7 +1149,7 @@ blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
 	font-size: var(--global--font-size-xs);
-	letter-spacing: var(--global--letter-spacing-xs);
+	letter-spacing: var(--global--letter-spacing);
 }
 
 input[type="text"],
@@ -1214,7 +1215,7 @@ figcaption,
 .wp-caption-text {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	line-height: var(--global--font-line-height-xs);
+	line-height: var(--global--line-height-body);
 	margin-top: calc(0.5 * var(--global--spacing-unit));
 	margin-bottom: var(--global--spacing-unit);
 	text-align: center;
@@ -1608,7 +1609,7 @@ h6, .h6 {
 .wp-block-image figcaption {
 	color: var(--global--color-foreground-light);
 	font-size: var(--global--font-size-xs);
-	line-height: var(--global--line-height-xs);
+	line-height: var(--global--line-height-body);
 	margin-top: calc(0.5 * var(--global--spacing-unit));
 	margin-bottom: var(--global--spacing-unit);
 	text-align: center;
@@ -2299,7 +2300,7 @@ hr.wp-block-separator.is-style-dots:before {
 }
 
 .jetpack_subscription_widget input[type="text"] {
-	padding: var(--elements--form-padding) !important;
+	padding: var(--global--spacing-horizontal) !important;
 	width: 100% !important;
 }
 
@@ -2864,7 +2865,7 @@ nav a {
 
 .primary-navigation > .button:hover,
 .woo-navigation > .button:hover {
-	color: var(--primary-nav--color-hover);
+	color: var(--primary-nav--color-link-hover);
 }
 
 .primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
@@ -3700,7 +3701,7 @@ nav a {
 }
 
 .comment-meta .comment-author .avatar {
-	border: 2px solid var(--global--border-color);
+	border: 2px solid var(--global--color-border);
 	border-radius: 50%;
 	position: absolute;
 	top: 5px;