Dalston: Adding font and color variables from Professional Business

dalston/functions.php

@@ -120,27 +120,18 @@ function dalston_fonts_url() {
 
 	$fonts_url = '';
 
-	/* Translators: If there are characters in your language that are not
-	* supported by Playfair Display, translate this to 'off'. Do not translate
-	* into your own language.
-	*/
-	$playfair = esc_html_x( 'on', 'Playfair Display font: on or off', 'dalston' );
-
-	/* Translators: If there are characters in your language that are not
-	* supported by Roboto Sans, translate this to 'off'. Do not translate
-	* into your own language.
-	*/
-	$roboto = esc_html_x( 'on', 'Roboto Sans font: on or off', 'dalston' );
-
-	if ( 'off' !== $playfair || 'off' !== $roboto ) {
-		$font_families = array();
+	/**
+	 * Translators: If there are characters in your language that are not
+	 * supported by Open Sans, translate this to 'off'. Do not translate
+	 * into your own language.
+	 */
+	$crimson_text = esc_html_x( 'on', 'Crimson Text font: on or off', 'dalston' );
 
-		if ( 'off' !== $playfair ) {
-			$font_families[] = 'Playfair+Display:400,400i';
-		}
+	if ( 'off' !== $crimson_text ) {
+		$font_families = array();
 
-		if ( 'off' !== $roboto ) {
-			$font_families[] = 'Roboto:300,300i,700';
+		if ( 'off' !== $crimson_text ) {
+			$font_families[] = 'Crimson Text:400,600,700,400italic,600italic';
 		}
 
 		$query_args = array(
@@ -160,7 +151,7 @@ function dalston_fonts_url() {
 function dalston_scripts() {
 
 	// enqueue Google fonts, if necessary
-	// wp_enqueue_style( 'dalston-fonts', dalston_fonts_url(), array(), null );
+	wp_enqueue_style( 'dalston-fonts', dalston_fonts_url(), array(), null );
 
 	// dequeue parent styles
 	wp_dequeue_style( 'varia-style' );

dalston/sass/_config-child-theme-deep.scss

@@ -10,9 +10,9 @@
 // Vertical Rhythm Multiplier
 $baseline-unit: 8px;
 
-$typescale-root: 18px; // Set 16px/1em default on html
+$typescale-root: 20px; // Set 16px/1em default on html
 $typescale-base: 1rem; // Set 1em default on body == $typescale-root;
-$typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-root;
+$typescale-ratio: 1.125; // Run ratio math on 1em == $typescale-base * $typescale-root;
 
 $config-global: (
 
@@ -20,9 +20,9 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "sans-serif",
-			"secondary": "serif",
-			"code": "monospace, monospace",
+			"primary": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
+			"secondary": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
+			"code": "Menlo\, monaco\, Consolas\, Lucida Console\, monospace",
 			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
 		),
 		/* Font Size */
@@ -53,37 +53,37 @@ $config-global: (
 		/* Line Height */
 		"line-height": (
 			"base": strip-unit($typescale-base),
-			"body": 1.78,
-			"heading": 1.125,
+			"body": 1.6,
+			"heading": 1.2,
 		),
 	),
 
 	/* Colors */
 	"color": (
 		"primary": (
-			"default": blue,
-			"hover": indigo,
+			"default": #0073AA,
+			"hover": darken( #0073AA, 10% ),
 		),
 		"secondary": (
-			"default": red,
-			"hover": darkred,
+			"default": #0073AA,
+			"hover": darken( #0073AA, 10% ),
 		),
 		"foreground": (
-			"default": #444444,
+			"default": #1e1e1e,
 			"light": #767676, // must be accessible against background
 			"dark": #111111, // must be accessible against background
 		),
 		"background": (
-			"default": white,
+			"default": #FFFFFF,
 			"light": #FAFAFA, // must be accessible against foreground-default
 			"dark": #DDDDDD, // must be accessible against foreground-default
 		),
 		"border": (
-			"default": #DDDDDD,
+			"default": #CCCCCC,
 			"light": #FAFAFA,
 			"dark": #AAAAAA,
 		),
-		"text-selection": lightblue,
+		"text-selection": lighten( #0073aa, 45% ),
 		"black": black,
 		"white": white,
 	),

dalston/style-editor.css

@@ -168,31 +168,31 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * - Reset the browser
  */
 body {
-	color: #444444;
-	background-color: white;
-	font-family: serif;
-	font-size: 18px;
+	color: #1e1e1e;
+	background-color: #FFFFFF;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-size: 20px;
 	font-weight: normal;
-	line-height: 1.78;
+	line-height: 1.6;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
 
 .editor-post-title__block {
-	font-size: 18px;
+	font-size: 20px;
 }
 
 p {
 	font-size: 1em;
-	line-height: 1.78;
+	line-height: 1.6;
 }
 
 a {
-	color: blue;
+	color: #0073AA;
 }
 
 a:hover {
-	color: indigo;
+	color: #005177;
 }
 
 button,
@@ -213,14 +213,14 @@ blockquote {
 }
 
 blockquote p {
-	font-size: 1.728rem;
+	font-size: 1.42383rem;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 blockquote cite,
 blockquote footer {
-	font-size: 0.83333rem;
+	font-size: 0.88889rem;
 	letter-spacing: normal;
 }
 
@@ -242,7 +242,7 @@ blockquote.alignleft, blockquote.alignright {
 }
 
 blockquote.alignleft p, blockquote.alignright p {
-	font-size: 1.44rem;
+	font-size: 1.26562rem;
 	max-width: inherit;
 	width: inherit;
 }
@@ -250,13 +250,13 @@ blockquote.alignleft p, blockquote.alignright p {
 blockquote.alignleft cite,
 blockquote.alignleft footer, blockquote.alignright cite,
 blockquote.alignright footer {
-	font-size: 0.69444rem;
+	font-size: 0.79012rem;
 	letter-spacing: normal;
 }
 
 figcaption {
 	color: #767676;
-	font-size: 0.69444rem;
+	font-size: 0.79012rem;
 	margin-top: calc(0.5 * 16px);
 	margin-bottom: 16px;
 	text-align: center;
@@ -304,29 +304,29 @@ object {
 }
 
 .wp-block-button .wp-block-button__link {
-	color: white;
+	color: #FFFFFF;
 	font-weight: 600;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.2em;
+	font-size: 1.125em;
 	line-height: 1;
-	background-color: blue;
-	border-radius: 9px;
+	background-color: #0073AA;
+	border-radius: 10px;
 	padding: 16px 16px;
 }
 
 .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus {
-	color: white;
-	background-color: indigo;
+	color: #FFFFFF;
+	background-color: #005177;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: blue;
+	color: #0073AA;
 	background: transparent;
 	border: 2px solid currentcolor;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
-	color: indigo;
+	color: #005177;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -335,7 +335,7 @@ object {
 
 .wp-block-cover,
 .wp-block-cover-image {
-	background-color: #444444;
+	background-color: #1e1e1e;
 	min-height: calc( 15 * 32px);
 	/* Treating H2 separately to account for legacy /core styles */
 }
@@ -346,7 +346,7 @@ object {
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover-image .wp-block-cover-image-text,
 .wp-block-cover-image .wp-block-cover-text {
-	color: white;
+	color: #FFFFFF;
 }
 
 .wp-block-cover .wp-block-cover__inner-container a,
@@ -360,9 +360,9 @@ object {
 
 .wp-block-cover h2,
 .wp-block-cover-image h2 {
-	font-size: 2.48832em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 	padding: 0;
 	max-width: inherit;
 	text-align: inherit;
@@ -389,45 +389,45 @@ object {
 .wp-block-heading h4, h4, .h4,
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
-	font-family: sans-serif;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	font-weight: normal;
 	clear: both;
 }
 
 .wp-block-heading h1, h1, .h1 {
-	font-size: 2.98598em;
+	font-size: 2.02729em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h2, h2, .h2 {
-	font-size: 2.48832em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h3, h3, .h3 {
-	font-size: 2.0736em;
+	font-size: 1.60181em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h4, h4, .h4 {
-	font-size: 1.728em;
+	font-size: 1.42383em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h5, h5, .h5 {
-	font-size: 1.44em;
+	font-size: 1.26562em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-heading h6, h6, .h6 {
-	font-size: 1.2em;
+	font-size: 1.125em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-gallery figcaption {
@@ -471,11 +471,11 @@ p.has-background:not(.has-background-background-color) a {
 	margin-left: 0;
 	margin-right: 0;
 	text-align: center;
-	border-top-color: #DDDDDD;
+	border-top-color: #CCCCCC;
 	border-top-width: 4px;
-	border-bottom-color: #DDDDDD;
+	border-bottom-color: #CCCCCC;
 	border-bottom-width: 4px;
-	color: #444444;
+	color: #1e1e1e;
 	/**
 	 * Block Options
 	 */
@@ -486,10 +486,10 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote p {
-	font-family: sans-serif;
-	font-size: 1.728em;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-size: 1.42383em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-pullquote a {
@@ -500,7 +500,7 @@ p.has-background:not(.has-background-background-color) a {
 .wp-block-pullquote cite,
 .wp-block-pullquote footer {
 	color: #767676;
-	font-size: 0.83333em;
+	font-size: 0.88889em;
 	letter-spacing: normal;
 }
 
@@ -509,8 +509,8 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: blue;
-	color: white;
+	background-color: #0073AA;
+	color: #FFFFFF;
 }
 
 .wp-block-pullquote.is-style-solid-color.alignleft blockquote,
@@ -539,14 +539,14 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-left-color: blue;
+	border-left-color: #0073AA;
 	margin: 32px 0;
 	padding-left: 16px;
 }
 
 .wp-block-quote p {
-	font-family: sans-serif;
-	font-size: 1.728em;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-size: 1.42383em;
 	letter-spacing: normal;
 }
 
@@ -556,22 +556,22 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
-	font-family: sans-serif;
-	font-size: 2.0736em;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-size: 1.60181em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .wp-block-separator,
 hr {
-	border-bottom: 2px solid #DDDDDD;
+	border-bottom: 2px solid #CCCCCC;
 	clear: both;
 }
 
 .wp-block-separator[style*="text-align:right"], .wp-block-separator[style*="text-align: right"],
 hr[style*="text-align:right"],
 hr[style*="text-align: right"] {
-	border-right-color: #DDDDDD;
+	border-right-color: #CCCCCC;
 }
 
 .wp-block-separator.is-style-wide,
@@ -586,12 +586,12 @@ hr.is-style-dots {
 
 .wp-block-separator.is-style-dots:before,
 hr.is-style-dots:before {
-	color: #DDDDDD;
+	color: #CCCCCC;
 }
 
 table th,
 .wp-block-table th {
-	font-family: sans-serif;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 }
 
 table td,
@@ -606,24 +606,24 @@ table th,
  * - Needs a special styles
  */
 .editor-post-title__block .editor-post-title__input {
-	color: #444444;
-	font-family: sans-serif;
+	color: #1e1e1e;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
 	font-weight: normal;
-	font-size: 2.48832em;
+	font-size: 1.80203em;
 	letter-spacing: normal;
-	line-height: 1.125;
+	line-height: 1.2;
 }
 
 .has-primary-color[class] {
-	color: blue !important;
+	color: #0073AA !important;
 }
 
 .has-secondary-color[class] {
-	color: red !important;
+	color: #0073AA !important;
 }
 
 .has-foreground-color[class] {
-	color: #444444 !important;
+	color: #1e1e1e !important;
 }
 
 .has-foreground-light-color[class] {
@@ -643,12 +643,12 @@ table th,
 }
 
 .has-background-color[class] {
-	color: white !important;
+	color: #FFFFFF !important;
 }
 
 .has-primary-background-color[class] {
-	background-color: blue !important;
-	color: white;
+	background-color: #0073AA !important;
+	color: #FFFFFF;
 }
 
 .has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
@@ -657,8 +657,8 @@ table th,
 }
 
 .has-secondary-background-color[class] {
-	background-color: red !important;
-	color: white;
+	background-color: #0073AA !important;
+	color: #FFFFFF;
 }
 
 .has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
@@ -667,8 +667,8 @@ table th,
 }
 
 .has-foreground-background-color[class] {
-	background-color: #444444 !important;
-	color: white;
+	background-color: #1e1e1e !important;
+	color: #FFFFFF;
 }
 
 .has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
@@ -678,7 +678,7 @@ table th,
 
 .has-foreground-light-background-color[class] {
 	background-color: #767676 !important;
-	color: white;
+	color: #FFFFFF;
 }
 
 .has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
@@ -688,7 +688,7 @@ table th,
 
 .has-foreground-dark-background-color[class] {
 	background-color: #111111 !important;
-	color: white;
+	color: #FFFFFF;
 }
 
 .has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
@@ -698,7 +698,7 @@ table th,
 
 .has-background-light-background-color[class] {
 	background-color: #FAFAFA !important;
-	color: #444444;
+	color: #1e1e1e;
 }
 
 .has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
@@ -708,7 +708,7 @@ table th,
 
 .has-background-dark-background-color[class] {
 	background-color: #DDDDDD !important;
-	color: #444444;
+	color: #1e1e1e;
 }
 
 .has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
@@ -717,8 +717,8 @@ table th,
 }
 
 .has-background-background-color[class] {
-	background-color: white !important;
-	color: #444444;
+	background-color: #FFFFFF !important;
+	color: #1e1e1e;
 }
 
 .has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
@@ -728,32 +728,32 @@ table th,
 
 .is-small-text,
 .has-small-font-size {
-	font-size: 0.83333em;
+	font-size: 0.88889em;
 }
 
 .is-regular-text,
 .has-regular-font-size,
 .has-normal-font-size,
 .has-medium-font-size {
-	font-size: 1.2em;
+	font-size: 1.125em;
 }
 
 .is-large-text,
 .has-large-font-size {
-	font-size: 1.44em;
-	line-height: 1.125;
+	font-size: 1.26562em;
+	line-height: 1.2;
 }
 
 .is-larger-text,
 .has-larger-font-size,
 .has-huge-font-size {
-	font-size: 1.728em;
-	line-height: 1.125;
+	font-size: 1.42383em;
+	line-height: 1.2;
 }
 
 .has-drop-cap:not(:focus)::first-letter {
-	font-family: sans-serif;
-	font-size: calc(2 * 2.98598em);
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-size: calc(2 * 2.02729em);
 	font-weight: normal;
 }