Merge pull request #1354 from Automattic/update/balasana-colours

Balasana: Use new Primary and Secondary colours

balasana/functions.php

@@ -60,12 +60,12 @@ if ( ! function_exists( 'balasana_setup' ) ) :
 				array(
 					'name'  => __( 'Primary', 'balasana' ),
 					'slug'  => 'primary',
-					'color' => '#0877D8',
+					'color' => '#19744C',
 				),
 				array(
 					'name'  => __( 'Secondary', 'balasana' ),
 					'slug'  => 'secondary',
-					'color' => '#238751',
+					'color' => '#BC2213',
 				),
 				array(
 					'name'  => __( 'Dark Gray', 'balasana' ),

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

@@ -61,12 +61,12 @@ $config-global: (
 	/* Colors */
 	"color": (
 		"primary": (
-			"default": #0877D8,
-			"hover": darken(#0877D8, 10%),
+			"default": #19744C,
+			"hover": darken(#19744C, 5%),
 		),
 		"secondary": (
-			"default": #238751,
-			"hover": darken(#238751, 10%),
+			"default": #BC2213,
+			"hover": darken(#BC2213, 5%),
 		),
 		"foreground": (
 			"default": #303030,
@@ -83,7 +83,7 @@ $config-global: (
 			"light": #F0F0F0,
 			"dark": #B0B0B0,
 		),
-		"text-selection": lighten(#0877D8, 50%),
+		"text-selection": lighten(#19744C, 60%),
 		"black": black,
 		"white": white,
 	),

balasana/style-editor.css

@@ -180,11 +180,11 @@ p {
 }
 
 a {
-	color: #0877D8;
+	color: #19744C;
 }
 
 a:hover {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 button,
@@ -301,24 +301,24 @@ object {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333em;
 	line-height: 1;
-	background-color: #0877D8;
+	background-color: #19744C;
 	border-radius: 4px;
 	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: #065ca7;
+	background-color: #145f3e;
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: #0877D8;
+	color: #19744C;
 	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: #065ca7;
+	color: #145f3e;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -545,7 +545,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #0877D8;
+	background-color: #19744C;
 	color: white;
 }
 
@@ -575,7 +575,7 @@ p.has-background:not(.has-background-background-color) a {
 }
 
 .wp-block-quote {
-	border-left-color: #0877D8;
+	border-left-color: #19744C;
 	margin: 32px 0;
 	padding-left: 16px;
 }
@@ -651,11 +651,11 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: #0877D8 !important;
+	color: #19744C !important;
 }
 
 .has-secondary-color[class] {
-	color: #238751 !important;
+	color: #BC2213 !important;
 }
 
 .has-foreground-color[class] {
@@ -689,17 +689,17 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: #0877D8 !important;
+	background-color: #19744C !important;
 	color: white;
 }
 
 .has-primary-background-color[class] {
-	background-color: #0877D8 !important;
+	background-color: #19744C !important;
 	color: white;
 }
 
 .has-secondary-background-color[class] {
-	background-color: #238751 !important;
+	background-color: #BC2213 !important;
 	color: white;
 }
 

balasana/style-rtl.css

@@ -603,11 +603,11 @@ body {
  * Links styles
  */
 a {
-	color: #0877D8;
+	color: #19744C;
 }
 
 a:hover {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 button,
@@ -709,11 +709,11 @@ footer {
 }
 
 ::selection {
-	background-color: #e1f0fe;
+	background-color: #cbf4e2;
 }
 
 ::-moz-selection {
-	background-color: #e1f0fe;
+	background-color: #cbf4e2;
 }
 
 /**
@@ -995,7 +995,7 @@ input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
 	color: #303030;
-	border-color: #065ca7;
+	border-color: #145f3e;
 }
 
 select {
@@ -1082,7 +1082,7 @@ input[type="submit"],
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
-	background-color: #0877D8;
+	background-color: #19744C;
 	border-radius: 4px;
 	border-width: 0;
 	padding: 16px 16px;
@@ -1133,21 +1133,21 @@ input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
-	background-color: #065ca7;
+	background-color: #145f3e;
 }
 
 /**
  * Block Options
  */
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: #0877D8;
+	color: #19744C;
 	background: transparent;
 	border: 2px solid currentcolor;
 	padding: 14px 16px;
 }
 
 .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: #065ca7;
+	color: #145f3e;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -1325,7 +1325,7 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #0877D8;
+	background-color: #19744C;
 	color: white;
 	font-size: 0.83333rem;
 	margin-right: 16px;
@@ -1696,7 +1696,7 @@ p.has-background {
 
 .a8c-posts-list-item__featured span {
 	color: white;
-	background-color: #0877D8;
+	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-weight: bold;
 	font-size: 0.83333rem;
@@ -1743,7 +1743,7 @@ p.has-background {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -1802,7 +1802,7 @@ p.has-background {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #0877D8;
+	background-color: #19744C;
 	color: white;
 }
 
@@ -1827,7 +1827,7 @@ p.has-background {
 }
 
 .wp-block-quote {
-	border-right-color: #0877D8;
+	border-right-color: #19744C;
 	margin: 32px 0;
 	padding: 0 16px;
 	/**
@@ -1870,7 +1870,7 @@ p.has-background {
 }
 
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
-	border-left-color: #0877D8;
+	border-left-color: #19744C;
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -2049,11 +2049,11 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: #0877D8 !important;
+	color: #19744C !important;
 }
 
 .has-secondary-color[class] {
-	color: #238751 !important;
+	color: #BC2213 !important;
 }
 
 .has-foreground-color[class] {
@@ -2087,12 +2087,12 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: #0877D8 !important;
+	background-color: #19744C !important;
 	color: white;
 }
 
 .has-secondary-background-color[class] {
-	background-color: #238751 !important;
+	background-color: #BC2213 !important;
 	color: white;
 }
 
@@ -2314,7 +2314,7 @@ table th,
 }
 
 .site-title a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .site-description {
@@ -2341,7 +2341,7 @@ table th,
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #0877D8;
+	background-color: #19744C;
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2488,7 +2488,7 @@ table th,
 }
 
 .main-navigation a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .main-navigation .sub-menu {
@@ -2552,7 +2552,7 @@ table th,
 }
 
 .social-navigation a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .social-navigation svg {
@@ -2601,7 +2601,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .footer-navigation {
@@ -2661,7 +2661,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .entry-title {
@@ -2709,7 +2709,7 @@ table th,
 .entry-meta a:hover, .entry-meta a:active,
 .entry-footer a:hover,
 .entry-footer a:active {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 .entry-meta .svg-icon,
@@ -2953,7 +2953,7 @@ table th,
 }
 
 .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 @media only screen and (min-width: 560px) {
@@ -3123,7 +3123,7 @@ img#wpstats {
  */
 .sticky-post {
 	color: white;
-	background-color: #0877D8;
+	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-weight: bold;
 	font-size: 0.83333rem;
@@ -3554,7 +3554,7 @@ dt {
 	.main-navigation > div > ul > .menu-item-has-children > a::after {
 		border-right: 4px solid transparent;
 		border-left: 4px solid transparent;
-		border-top: 4px solid #0877D8;
+		border-top: 4px solid #19744C;
 		content: "";
 		margin: 0;
 		margin-right: 4px;
@@ -3697,7 +3697,7 @@ dt {
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
 .a8c-posts-list .a8c-posts-list-item__title a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .sticky-post,
@@ -3734,7 +3734,7 @@ dt {
 .post-navigation a:active .post-title,
 .post-navigation a:focus .post-title,
 .post-navigation a:hover .post-title {
-	color: #0877D8;
+	color: #19744C;
 	text-decoration: underline;
 }
 
@@ -3763,7 +3763,7 @@ dt {
 }
 
 .comment-meta .comment-author .fn a:active, .comment-meta .comment-author .fn a:focus, .comment-meta .comment-author .fn a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .comment-meta .comment-author .avatar {

balasana/style.css

@@ -603,11 +603,11 @@ body {
  * Links styles
  */
 a {
-	color: #0877D8;
+	color: #19744C;
 }
 
 a:hover {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 button,
@@ -709,11 +709,11 @@ footer {
 }
 
 ::selection {
-	background-color: #e1f0fe;
+	background-color: #cbf4e2;
 }
 
 ::-moz-selection {
-	background-color: #e1f0fe;
+	background-color: #cbf4e2;
 }
 
 /**
@@ -995,7 +995,7 @@ input[type="datetime-local"]:focus,
 input[type="color"]:focus,
 textarea:focus {
 	color: #303030;
-	border-color: #065ca7;
+	border-color: #145f3e;
 }
 
 select {
@@ -1082,7 +1082,7 @@ input[type="submit"],
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-size: 0.83333rem;
-	background-color: #0877D8;
+	background-color: #19744C;
 	border-radius: 4px;
 	border-width: 0;
 	padding: 16px 16px;
@@ -1133,21 +1133,21 @@ input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
 .has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
 	color: white;
-	background-color: #065ca7;
+	background-color: #145f3e;
 }
 
 /**
  * Block Options
  */
 .wp-block-button.is-style-outline .wp-block-button__link {
-	color: #0877D8;
+	color: #19744C;
 	background: transparent;
 	border: 2px solid currentcolor;
 	padding: 14px 16px;
 }
 
 .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: #065ca7;
+	color: #145f3e;
 }
 
 .wp-block-button.is-style-squared .wp-block-button__link {
@@ -1325,7 +1325,7 @@ input.has-focus[type="submit"],
 }
 
 .wp-block-file .wp-block-file__button {
-	background-color: #0877D8;
+	background-color: #19744C;
 	color: white;
 	font-size: 0.83333rem;
 	margin-left: 16px;
@@ -1696,7 +1696,7 @@ p.has-background {
 
 .a8c-posts-list-item__featured span {
 	color: white;
-	background-color: #0877D8;
+	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-weight: bold;
 	font-size: 0.83333rem;
@@ -1743,7 +1743,7 @@ p.has-background {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -1802,7 +1802,7 @@ p.has-background {
 }
 
 .wp-block-pullquote.is-style-solid-color {
-	background-color: #0877D8;
+	background-color: #19744C;
 	color: white;
 }
 
@@ -1827,7 +1827,7 @@ p.has-background {
 }
 
 .wp-block-quote {
-	border-left-color: #0877D8;
+	border-left-color: #19744C;
 	margin: 32px 0;
 	padding: 0 16px;
 	/**
@@ -1870,7 +1870,7 @@ p.has-background {
 }
 
 .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
-	border-right-color: #0877D8;
+	border-right-color: #19744C;
 }
 
 .wp-block-quote.is-style-large, .wp-block-quote.is-large {
@@ -2054,11 +2054,11 @@ table th,
 }
 
 .has-primary-color[class] {
-	color: #0877D8 !important;
+	color: #19744C !important;
 }
 
 .has-secondary-color[class] {
-	color: #238751 !important;
+	color: #BC2213 !important;
 }
 
 .has-foreground-color[class] {
@@ -2092,12 +2092,12 @@ table th,
 }
 
 .has-primary-background-color[class] {
-	background-color: #0877D8 !important;
+	background-color: #19744C !important;
 	color: white;
 }
 
 .has-secondary-background-color[class] {
-	background-color: #238751 !important;
+	background-color: #BC2213 !important;
 	color: white;
 }
 
@@ -2331,7 +2331,7 @@ table th,
 }
 
 .site-title a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .site-description {
@@ -2358,7 +2358,7 @@ table th,
 }
 
 .main-navigation #toggle:focus + #toggle-menu {
-	background-color: #0877D8;
+	background-color: #19744C;
 	outline: inherit;
 	text-decoration: underline;
 }
@@ -2505,7 +2505,7 @@ table th,
 }
 
 .main-navigation a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .main-navigation .sub-menu {
@@ -2569,7 +2569,7 @@ table th,
 }
 
 .social-navigation a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .social-navigation svg {
@@ -2618,7 +2618,7 @@ table th,
 }
 
 .site-info a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .footer-navigation {
@@ -2678,7 +2678,7 @@ table th,
 }
 
 .footer-navigation .footer-menu a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .entry-title {
@@ -2726,7 +2726,7 @@ table th,
 .entry-meta a:hover, .entry-meta a:active,
 .entry-footer a:hover,
 .entry-footer a:active {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 .entry-meta .svg-icon,
@@ -2970,7 +2970,7 @@ table th,
 }
 
 .comment-meta .comment-metadata a:hover, .comment-meta .comment-metadata a:active {
-	color: #065ca7;
+	color: #145f3e;
 }
 
 @media only screen and (min-width: 560px) {
@@ -3140,7 +3140,7 @@ img#wpstats {
  */
 .sticky-post {
 	color: white;
-	background-color: #0877D8;
+	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	font-weight: bold;
 	font-size: 0.83333rem;
@@ -3583,7 +3583,7 @@ dt {
 	.main-navigation > div > ul > .menu-item-has-children > a::after {
 		border-left: 4px solid transparent;
 		border-right: 4px solid transparent;
-		border-top: 4px solid #0877D8;
+		border-top: 4px solid #19744C;
 		content: "";
 		margin: 0;
 		margin-left: 4px;
@@ -3726,7 +3726,7 @@ dt {
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
 .a8c-posts-list .a8c-posts-list-item__title a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .sticky-post,
@@ -3763,7 +3763,7 @@ dt {
 .post-navigation a:active .post-title,
 .post-navigation a:focus .post-title,
 .post-navigation a:hover .post-title {
-	color: #0877D8;
+	color: #19744C;
 	text-decoration: underline;
 }
 
@@ -3792,7 +3792,7 @@ dt {
 }
 
 .comment-meta .comment-author .fn a:active, .comment-meta .comment-author .fn a:focus, .comment-meta .comment-author .fn a:hover {
-	color: #0877D8;
+	color: #19744C;
 }
 
 .comment-meta .comment-author .avatar {