Skip to content
This repository has been archived by the owner on Dec 1, 2019. It is now read-only.

Add a11y friendly default text-colors when selecting a background-color. #995

Merged
merged 7 commits into from
Nov 12, 2019
35 changes: 25 additions & 10 deletions assets/css/editor-style-block-rtl.css
Original file line number Diff line number Diff line change
Expand Up @@ -162,46 +162,61 @@ Inter variable font. Usage:

/* CUSTOM COLORS */

.has-accent-color {
:root .has-accent-color {
color: #cd2653;
}

.has-accent-background-color {
:root .has-accent-background-color {
background-color: #cd2653;
color: #fff;
}

:root .has-primary-color {
color: #000;
}

:root .has-primary-background-color {
background-color: #000;
color: #f5efe0;
}

.has-secondary-color {
:root .has-secondary-color {
color: #6d6d6d;
}

.has-secondary-background-color {
:root .has-secondary-background-color {
background-color: #6d6d6d;
color: #fff;
}

.has-subtle-background-color {
:root .has-subtle-background-color {
color: #dcd7ca;
}

.has-subtle-background-background-color {
:root .has-subtle-background-background-color {
background-color: #dcd7ca;
color: #000;
}

.has-background-color {
color: #6d6d6d;
:root .has-background-color {
color: #f5efe0;
}

.has-background-background-color {
background-color: #6d6d6d;
:root .has-background-background-color {
background-color: #f5efe0;
color: #000;
}

/* GENERAL COLORS */

.has-black-background-color {
background-color: #000;
color: #fff;
}

.has-white-background-color {
background-color: #fff;
color: #000;
}

.has-black-color {
Expand Down
35 changes: 25 additions & 10 deletions assets/css/editor-style-block.css
Original file line number Diff line number Diff line change
Expand Up @@ -162,46 +162,61 @@ Inter variable font. Usage:

/* CUSTOM COLORS */

.has-accent-color {
:root .has-accent-color {
color: #cd2653;
}

.has-accent-background-color {
:root .has-accent-background-color {
background-color: #cd2653;
color: #fff;
}

:root .has-primary-color {
color: #000;
}

:root .has-primary-background-color {
background-color: #000;
color: #f5efe0;
}

.has-secondary-color {
:root .has-secondary-color {
color: #6d6d6d;
}

.has-secondary-background-color {
:root .has-secondary-background-color {
background-color: #6d6d6d;
color: #fff;
}

.has-subtle-background-color {
:root .has-subtle-background-color {
color: #dcd7ca;
}

.has-subtle-background-background-color {
:root .has-subtle-background-background-color {
background-color: #dcd7ca;
color: #000;
}

.has-background-color {
color: #6d6d6d;
:root .has-background-color {
color: #f5efe0;
}

.has-background-background-color {
background-color: #6d6d6d;
:root .has-background-background-color {
background-color: #f5efe0;
color: #000;
}

/* GENERAL COLORS */

.has-black-background-color {
background-color: #000;
color: #fff;
}

.has-white-background-color {
background-color: #fff;
color: #000;
}

.has-black-color {
Expand Down
19 changes: 5 additions & 14 deletions style-rtl.css
Original file line number Diff line number Diff line change
Expand Up @@ -2648,6 +2648,7 @@ h2.entry-title {

:root .has-accent-background-color {
background-color: #cd2653;
color: #fff;
}

:root .has-primary-color {
Expand All @@ -2656,6 +2657,7 @@ h2.entry-title {

:root .has-primary-background-color {
background-color: #000;
color: #f5efe0;
}

:root .has-secondary-color {
Expand All @@ -2664,6 +2666,7 @@ h2.entry-title {

:root .has-secondary-background-color {
background-color: #6d6d6d;
color: #fff;
}

:root .has-subtle-background-color {
Expand All @@ -2672,6 +2675,7 @@ h2.entry-title {

:root .has-subtle-background-background-color {
background-color: #dcd7ca;
color: #000;
}

:root .has-background-color {
Expand All @@ -2680,6 +2684,7 @@ h2.entry-title {

:root .has-background-background-color {
background-color: #f5efe0;
color: #000;
}


Expand Down Expand Up @@ -5991,22 +5996,8 @@ a.to-the-top > * {

/* BLOCK: PULLQUOTE */

.wp-block-pullquote.alignleft::before,
.wp-block-pullquote.alignright::before {
position: absolute;
top: -0.4rem;
}

.wp-block-pullquote.is-style-solid-color.alignleft::before,
.wp-block-pullquote.is-style-solid-color.alignright::before {
top: 0;
}

.wp-block-pullquote.alignleft::before {
left: calc(100% + 1.5rem);
}

.wp-block-pullquote.alignright::before {
right: calc(100% + 1.5rem);
}
}
19 changes: 5 additions & 14 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -2660,6 +2660,7 @@ h2.entry-title {

:root .has-accent-background-color {
background-color: #cd2653;
color: #fff;
}

:root .has-primary-color {
Expand All @@ -2668,6 +2669,7 @@ h2.entry-title {

:root .has-primary-background-color {
background-color: #000;
color: #f5efe0;
}

:root .has-secondary-color {
Expand All @@ -2676,6 +2678,7 @@ h2.entry-title {

:root .has-secondary-background-color {
background-color: #6d6d6d;
color: #fff;
}

:root .has-subtle-background-color {
Expand All @@ -2684,6 +2687,7 @@ h2.entry-title {

:root .has-subtle-background-background-color {
background-color: #dcd7ca;
color: #000;
}

:root .has-background-color {
Expand All @@ -2692,6 +2696,7 @@ h2.entry-title {

:root .has-background-background-color {
background-color: #f5efe0;
color: #000;
}


Expand Down Expand Up @@ -6037,22 +6042,8 @@ a.to-the-top > * {

/* BLOCK: PULLQUOTE */

.wp-block-pullquote.alignleft::before,
.wp-block-pullquote.alignright::before {
position: absolute;
top: -0.4rem;
}

.wp-block-pullquote.is-style-solid-color.alignleft::before,
.wp-block-pullquote.is-style-solid-color.alignright::before {
top: 0;
}

.wp-block-pullquote.alignleft::before {
right: calc(100% + 1.5rem);
}

.wp-block-pullquote.alignright::before {
left: calc(100% + 1.5rem);
}
}