Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3284912 by mherchel, javi-er: Abstract and refactor Olivero's text color styles with new "text-color" custom properties

merge-requests/2612/head
Lauri Eskola 2022-07-01 16:00:13 +03:00
parent a9e73a8124
commit 5b89b5353b
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
58 changed files with 125 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/themes/olivero/css/base/base.css
View File

@ -39,7 +39,7 @@ html {
body { body {
margin: 0; margin: 0;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
background-color: var(--color--gray-100); background-color: var(--color--gray-100);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e"); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
background-position: top left /* LTR */ background-position: top left /* LTR */
@ -56,7 +56,7 @@ body.is-fixed {
} }
a { a {
color: var(--color--primary-40) color: var(--color-text-primary-medium)
} }
a:hover { a:hover {
@ -148,7 +148,7 @@ h5,
h6 { h6 {
margin-top: var(--sp); margin-top: var(--sp);
margin-bottom: var(--sp); margin-bottom: var(--sp);
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: bold font-weight: bold
} }

6
core/themes/olivero/css/base/base.pcss.css
View File

@ -21,7 +21,7 @@ html {
body { body {
margin: 0; margin: 0;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
background-color: var(--color--gray-100); background-color: var(--color--gray-100);
background-image: url("../../images/background.svg"); background-image: url("../../images/background.svg");
background-position: top left; /* LTR */ background-position: top left; /* LTR */
@ -38,7 +38,7 @@ body {
} }
a { a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
&:hover { &:hover {
color: var(--color--primary-50); color: var(--color--primary-50);
@ -120,7 +120,7 @@ h4,
h5, h5,
h6 { h6 {
margin-block: var(--sp); margin-block: var(--sp);
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: bold; font-weight: bold;

10
core/themes/olivero/css/base/variables.css
View File

@ -155,6 +155,16 @@
--color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*var(--color--primary-lightness))); /* Blue medium */ --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*var(--color--primary-lightness))); /* Blue medium */
--color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) + 24 - var(--color--primary-lightness)*0.24))); /* Blue bright */ --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) + 24 - var(--color--primary-lightness)*0.24))); /* Blue bright */
/**
* Variables specific to text.
*/
--color-text-neutral-soft: var(--color--gray-45);
--color-text-neutral-medium: var(--color--gray-20);
--color-text-neutral-loud: var(--color--gray-5);
--color-text-primary-medium: var(--color--primary-40);
--color-text-primary-loud: var(--color--primary-30);
/** /**
* Named Colors. * Named Colors.
*/ */

10
core/themes/olivero/css/base/variables.pcss.css
View File

@ -116,6 +116,16 @@
--color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */ --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */
--color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */ --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */
/**
* Variables specific to text.
*/
--color-text-neutral-soft: var(--color--gray-45);
--color-text-neutral-medium: var(--color--gray-20);
--color-text-neutral-loud: var(--color--gray-5);
--color-text-primary-medium: var(--color--primary-40);
--color-text-primary-loud: var(--color--primary-30);
/** /**
* Named Colors. * Named Colors.
*/ */

2
core/themes/olivero/css/components/action-links.css
View File

@ -51,7 +51,7 @@
display: inline-block display: inline-block
} }
.action-links li a { .action-links li a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
} }
.action-links-item { .action-links-item {
display: inline-block; display: inline-block;

2
core/themes/olivero/css/components/action-links.pcss.css
View File

@ -17,7 +17,7 @@
display: inline-block; display: inline-block;
& a { & a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
} }
} }
} }

2
core/themes/olivero/css/components/block.css
View File

@ -27,7 +27,7 @@
margin-top: 0; margin-top: 0;
margin-bottom: var(--sp); margin-bottom: var(--sp);
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-size: var(--font-size-s); font-size: var(--font-size-s);
line-height: var(--sp); line-height: var(--sp);
} }

2
core/themes/olivero/css/components/block.pcss.css
View File

@ -8,7 +8,7 @@
.block__title { .block__title {
margin-block: 0 var(--sp); margin-block: 0 var(--sp);
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-size: var(--font-size-s); font-size: var(--font-size-s);
line-height: var(--sp); line-height: var(--sp);
} }

2
core/themes/olivero/css/components/book.css
View File

@ -106,7 +106,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;

2
core/themes/olivero/css/components/book.pcss.css
View File

@ -43,7 +43,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;

2
core/themes/olivero/css/components/breadcrumb.css
View File

@ -243,7 +243,7 @@
.breadcrumb__link { .breadcrumb__link {
text-decoration: none; text-decoration: none;
color: var(--color--primary-40) color: var(--color-text-primary-medium)
} }
.breadcrumb__link:hover, .breadcrumb__link:hover,

2
core/themes/olivero/css/components/breadcrumb.pcss.css
View File

@ -102,7 +102,7 @@
.breadcrumb__link { .breadcrumb__link {
text-decoration: none; text-decoration: none;
color: var(--color--primary-40); color: var(--color-text-primary-medium);
&:hover, &:hover,
&:focus { &:focus {

12
core/themes/olivero/css/components/button.css
View File

@ -51,8 +51,8 @@
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
color: var(--color--primary-40); color: var(--color-text-primary-medium);
border: solid 2px var(--color--primary-40); border: solid 2px currentColor;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color--white); background-color: var(--color--white);
font-family: var(--font-sans); font-family: var(--font-sans);
@ -66,8 +66,8 @@
.button:hover, .button:hover,
.button:focus { .button:focus {
text-decoration: none; text-decoration: none;
color: var(--color--primary-30); color: var(--color-text-primary-loud);
border: solid 2px var(--color--primary-30); border: solid 2px currentColor;
background: none; background: none;
font-weight: 700; font-weight: 700;
} }
@ -78,8 +78,8 @@
} }
.button:active { .button:active {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
border-color: var(--color--primary-40); border-color: currentColor;
} }
.button:disabled, .button:disabled,

12
core/themes/olivero/css/components/button.pcss.css
View File

@ -16,8 +16,8 @@
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
color: var(--color--primary-40); color: var(--color-text-primary-medium);
border: solid 2px var(--color--primary-40); border: solid 2px currentColor;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color--white); background-color: var(--color--white);
font-family: var(--font-sans); font-family: var(--font-sans);
@ -29,8 +29,8 @@
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
color: var(--color--primary-30); color: var(--color-text-primary-loud);
border: solid 2px var(--color--primary-30); border: solid 2px currentColor;
background: none; background: none;
font-weight: 700; font-weight: 700;
} }
@ -41,8 +41,8 @@
} }
&:active { &:active {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
border-color: var(--color--primary-40); border-color: currentColor;
} }
&:disabled, &:disabled,

4
core/themes/olivero/css/components/comments.css
View File

@ -297,7 +297,7 @@
.comment__time { .comment__time {
margin: 0; margin: 0;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.875rem; font-size: 0.875rem;
line-height: var(--sp); line-height: var(--sp);
@ -395,7 +395,7 @@
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
cursor: pointer; cursor: pointer;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
border: 0; border: 0;
background: none; background: none;
font-size: 0.875rem; font-size: 0.875rem;

4
core/themes/olivero/css/components/comments.pcss.css
View File

@ -174,7 +174,7 @@
.comment__time { .comment__time {
margin: 0; margin: 0;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 14px; font-size: 14px;
line-height: var(--sp); line-height: var(--sp);
@ -211,7 +211,7 @@
padding-inline-start: 0; padding-inline-start: 0;
padding-inline-end: 0; padding-inline-end: 0;
cursor: pointer; cursor: pointer;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
border: 0; border: 0;
background: none; background: none;
font-size: 14px; font-size: 14px;

2
core/themes/olivero/css/components/details.css
View File

@ -265,7 +265,7 @@
.olivero-details__description { .olivero-details__description {
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
line-height: var(--line-height-s); line-height: var(--line-height-s);
} }

2
core/themes/olivero/css/components/details.pcss.css
View File

@ -159,7 +159,7 @@
/* Description */ /* Description */
.olivero-details__description { .olivero-details__description {
margin-block-end: var(--sp1); margin-block-end: var(--sp1);
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
line-height: var(--line-height-s); line-height: var(--line-height-s);
} }

2
core/themes/olivero/css/components/dropbutton.css
View File

@ -151,7 +151,7 @@
margin-bottom: -2px; /* Account for borders. */ margin-bottom: -2px; /* Account for borders. */
padding: 0 0.5625rem; padding: 0 0.5625rem;
text-decoration: none; text-decoration: none;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
font-weight: 600 font-weight: 600
} }

2
core/themes/olivero/css/components/dropbutton.pcss.css
View File

@ -91,7 +91,7 @@
margin-bottom: -2px; /* Account for borders. */ margin-bottom: -2px; /* Account for borders. */
padding: 0 9px; padding: 0 9px;
text-decoration: none; text-decoration: none;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
font-weight: 600; font-weight: 600;
&:focus { &:focus {

2
core/themes/olivero/css/components/embedded-media.css
View File

@ -46,7 +46,7 @@ figure {
figcaption { figcaption {
padding-top: var(--sp0-5); padding-top: var(--sp0-5);
padding-bottom: var(--sp0-5); padding-bottom: var(--sp0-5);
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
background: var(--color--gray-100); background: var(--color--gray-100);
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 0.875rem; font-size: 0.875rem;

2
core/themes/olivero/css/components/embedded-media.pcss.css
View File

@ -13,7 +13,7 @@ figcaption {
padding-block: var(--sp0-5); padding-block: var(--sp0-5);
padding-inline-start: var(--sp0-5); padding-inline-start: var(--sp0-5);
padding-inline-end: var(--sp0-5); padding-inline-end: var(--sp0-5);
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
background: var(--color--gray-100); background: var(--color--gray-100);
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 14px; font-size: 14px;

2
core/themes/olivero/css/components/feed.css
View File

@ -27,7 +27,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: var(--color--gray-45) color: var(--color-text-neutral-soft)
} }
.feed-icon:hover { .feed-icon:hover {

2
core/themes/olivero/css/components/feed.pcss.css
View File

@ -9,7 +9,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
&:hover { &:hover {
color: var(--color--primary-50); color: var(--color--primary-50);

2
core/themes/olivero/css/components/fieldset.css
View File

@ -143,7 +143,7 @@ _:-ms-fullscreen,
} }
.fieldset__label.is-disabled { .fieldset__label.is-disabled {
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
} }
.fieldset__description { .fieldset__description {

2
core/themes/olivero/css/components/fieldset.pcss.css
View File

@ -83,7 +83,7 @@ _:-ms-fullscreen,
} }
.fieldset__label.is-disabled { .fieldset__label.is-disabled {
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
} }
.fieldset__description { .fieldset__description {

2
core/themes/olivero/css/components/form-select.css
View File

@ -48,7 +48,7 @@ select {
height: var(--sp3); height: var(--sp3);
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60); border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color--white); background-color: var(--color--white);

2
core/themes/olivero/css/components/form-select.pcss.css
View File

@ -15,7 +15,7 @@ select {
padding-block: 0; padding-block: 0;
padding-inline-start: var(--sp); padding-inline-start: var(--sp);
padding-inline-end: var(--sp3); padding-inline-end: var(--sp3);
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60); border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color--white); background-color: var(--color--white);

2
core/themes/olivero/css/components/form-text.css
View File

@ -42,7 +42,7 @@ textarea {
max-width: 100%; max-width: 100%;
min-height: var(--sp3); min-height: var(--sp3);
padding: 0 var(--sp); padding: 0 var(--sp);
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60); border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color--white); background-color: var(--color--white);

2
core/themes/olivero/css/components/form-text.pcss.css
View File

@ -24,7 +24,7 @@ textarea {
max-width: 100%; max-width: 100%;
min-height: var(--sp3); min-height: var(--sp3);
padding: 0 var(--sp); padding: 0 var(--sp);
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
border: 1px solid var(--color--gray-60); border: 1px solid var(--color--gray-60);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: var(--color--white); background-color: var(--color--white);

2
core/themes/olivero/css/components/forum.css
View File

@ -30,6 +30,6 @@
.forum__name--link, .forum__name--link,
.forum__last-reply a, .forum__last-reply a,
.forum__title a { .forum__title a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-weight: bold; font-weight: bold;
} }

2
core/themes/olivero/css/components/forum.pcss.css
View File

@ -14,6 +14,6 @@
.forum__name--link, .forum__name--link,
.forum__last-reply a, .forum__last-reply a,
.forum__title a { .forum__title a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-weight: bold; font-weight: bold;
} }

2
core/themes/olivero/css/components/header-search-wide.css
View File

@ -339,7 +339,7 @@
width: var(--sp3); width: var(--sp3);
height: var(--sp6); height: var(--sp6);
cursor: pointer; cursor: pointer;
color: var(--color--gray-5); /* Affects SVG search icon. */ color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
border: 0; border: 0;
background: transparent; background: transparent;
-webkit-appearance: none -webkit-appearance: none

2
core/themes/olivero/css/components/header-search-wide.pcss.css
View File

@ -197,7 +197,7 @@
width: var(--sp3); width: var(--sp3);
height: var(--sp6); height: var(--sp6);
cursor: pointer; cursor: pointer;
color: var(--color--gray-5); /* Affects SVG search icon. */ color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
border: 0; border: 0;
background: transparent; background: transparent;
-webkit-appearance: none; -webkit-appearance: none;

2
core/themes/olivero/css/components/navigation/menu-sidebar.css
View File

@ -81,7 +81,7 @@
.menu--sidebar .menu__link--link { .menu--sidebar .menu__link--link {
text-decoration: none; text-decoration: none;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-weight: 600 font-weight: 600
} }

2
core/themes/olivero/css/components/navigation/menu-sidebar.pcss.css
View File

@ -39,7 +39,7 @@
& .menu__link--link { & .menu__link--link {
text-decoration: none; text-decoration: none;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-weight: 600; font-weight: 600;
&:hover { &:hover {

4
core/themes/olivero/css/components/navigation/nav-primary.css
View File

@ -51,7 +51,7 @@
.primary-nav__menu-link { .primary-nav__menu-link {
flex-grow: 1; flex-grow: 1;
text-decoration: none; text-decoration: none;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-size: 1.75rem; font-size: 1.75rem;
font-weight: bold; font-weight: bold;
line-height: var(--sp2) line-height: var(--sp2)
@ -85,7 +85,7 @@
.primary-nav__menu-link--nolink { .primary-nav__menu-link--nolink {
padding-top: var(--sp0-5); padding-top: var(--sp0-5);
padding-bottom: var(--sp0-5); padding-bottom: var(--sp0-5);
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-weight: normal; font-weight: normal;
} }

4
core/themes/olivero/css/components/navigation/nav-primary.pcss.css
View File

@ -33,7 +33,7 @@
.primary-nav__menu-link { .primary-nav__menu-link {
flex-grow: 1; flex-grow: 1;
text-decoration: none; text-decoration: none;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
line-height: var(--sp2); line-height: var(--sp2);
@ -52,7 +52,7 @@
padding-block: var(--sp0-5); padding-block: var(--sp0-5);
padding-inline-start: 0; padding-inline-start: 0;
padding-inline-end: 0; padding-inline-end: 0;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-weight: normal; font-weight: normal;
} }

4
core/themes/olivero/css/components/node-teaser.css
View File

@ -43,7 +43,7 @@
} }
.node--view-mode-teaser .node__meta a { .node--view-mode-teaser .node__meta a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-weight: bold; font-weight: bold;
} }
@ -127,7 +127,7 @@
.node--view-mode-teaser .node__title { .node--view-mode-teaser .node__title {
margin: 0; margin: 0;
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-size: 1.5rem; font-size: 1.5rem;
line-height: var(--line-height-base) line-height: var(--line-height-base)
} }

4
core/themes/olivero/css/components/node-teaser.pcss.css
View File

@ -23,7 +23,7 @@
margin-block-end: var(--sp); margin-block-end: var(--sp);
& a { & a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-weight: bold; font-weight: bold;
} }
} }
@ -81,7 +81,7 @@
& .node__title { & .node__title {
margin: 0; margin: 0;
margin-block-end: var(--sp1); margin-block-end: var(--sp1);
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-size: 24px; font-size: 24px;
line-height: var(--line-height-base); line-height: var(--line-height-base);

6
core/themes/olivero/css/components/node.css
View File

@ -27,7 +27,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-size: 0.875rem; font-size: 0.875rem;
line-height: var(--sp) line-height: var(--sp)
} }
@ -62,7 +62,7 @@
padding-bottom: 0.1875rem; padding-bottom: 0.1875rem;
transition: background-size 0.2s, color 0.2s; transition: background-size 0.2s, color 0.2s;
text-decoration: none; text-decoration: none;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
background-color: transparent; background-color: transparent;
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat; background-repeat: no-repeat;
@ -72,7 +72,7 @@
.node__title a:hover, .node__title a:hover,
.node__title a:focus { .node__title a:focus {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
} }
[dir="rtl"] .node__title { [dir="rtl"] .node__title {

6
core/themes/olivero/css/components/node.pcss.css
View File

@ -9,7 +9,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-block-end: var(--sp1); margin-block-end: var(--sp1);
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-size: 14px; font-size: 14px;
line-height: var(--sp); line-height: var(--sp);
@ -35,7 +35,7 @@
padding-block-end: 3px; padding-block-end: 3px;
transition: background-size 0.2s, color 0.2s; transition: background-size 0.2s, color 0.2s;
text-decoration: none; text-decoration: none;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
background-color: transparent; background-color: transparent;
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
background-repeat: no-repeat; background-repeat: no-repeat;
@ -44,7 +44,7 @@
&:hover, &:hover,
&:focus { &:focus {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
} }
} }
} }

8
core/themes/olivero/css/components/pager.css
View File

@ -66,7 +66,7 @@
width: var(--sp2-5); width: var(--sp2-5);
height: var(--sp2-5); height: var(--sp2-5);
cursor: default; cursor: default;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
background-color: var(--color--white) background-color: var(--color--white)
} }
@ -100,7 +100,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
text-decoration: none; text-decoration: none;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
} }
.pager__link:hover { .pager__link:hover {
@ -108,8 +108,8 @@
} }
.pager__link:focus { .pager__link:focus {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
outline: solid 2px var(--color--primary-40); outline: solid 2px currentColor;
outline-offset: -2px; outline-offset: -2px;
} }

8
core/themes/olivero/css/components/pager.pcss.css
View File

@ -25,7 +25,7 @@
width: var(--sp2-5); width: var(--sp2-5);
height: var(--sp2-5); height: var(--sp2-5);
cursor: default; cursor: default;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
background-color: var(--color--white); background-color: var(--color--white);
@media (--sm) { @media (--sm) {
@ -58,7 +58,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
text-decoration: none; text-decoration: none;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
} }
.pager__link:hover { .pager__link:hover {
@ -66,8 +66,8 @@
} }
.pager__link:focus { .pager__link:focus {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
outline: solid 2px var(--color--primary-40); outline: solid 2px currentColor;
outline-offset: -2px; outline-offset: -2px;
} }

8
core/themes/olivero/css/components/search-results.css
View File

@ -72,7 +72,7 @@
.search-result__title { .search-result__title {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-size: 1.25rem; font-size: 1.25rem;
line-height: var(--line-height-base) line-height: var(--line-height-base)
} }
@ -89,7 +89,7 @@
} }
.search-result__title a:hover { .search-result__title a:hover {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
} }
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
@ -120,13 +120,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-size: 0.875rem; font-size: 0.875rem;
line-height: var(--sp) line-height: var(--sp)
} }
.search-result__meta a { .search-result__meta a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-weight: bold; font-weight: bold;
} }

8
core/themes/olivero/css/components/search-results.pcss.css
View File

@ -21,7 +21,7 @@
margin-block: 0; margin-block: 0;
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: 0; margin-inline-end: 0;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
font-size: 20px; font-size: 20px;
line-height: var(--line-height-base); line-height: var(--line-height-base);
@ -36,7 +36,7 @@
background-size: 0 3px; background-size: 0 3px;
&:hover { &:hover {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
} }
} }
@ -63,12 +63,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-block-end: var(--sp1); margin-block-end: var(--sp1);
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-size: 14px; font-size: 14px;
line-height: var(--sp); line-height: var(--sp);
& a { & a {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-weight: bold; font-weight: bold;
} }
} }

6
core/themes/olivero/css/components/table.css
View File

@ -30,7 +30,7 @@
margin-top: var(--sp2); margin-top: var(--sp2);
margin-bottom: var(--sp2); margin-bottom: var(--sp2);
border-spacing: 0; border-spacing: 0;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
border: 0; border: 0;
border-collapse: collapse; border-collapse: collapse;
font-family: var(--font-sans); font-family: var(--font-sans);
@ -48,7 +48,7 @@
.forum table caption, .text-content table caption, .views-table caption, .draggable-table caption { .forum table caption, .text-content table caption, .views-table caption, .draggable-table caption {
margin-bottom: var(--sp1); margin-bottom: var(--sp1);
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 0.875rem; font-size: 0.875rem;
font-style: italic; font-style: italic;
@ -144,7 +144,7 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
border-bottom: 2px solid var(--color--primary-50); border-bottom: 2px solid var(--color--primary-50);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 0.875rem; font-size: 0.875rem;

6
core/themes/olivero/css/components/table.pcss.css
View File

@ -12,7 +12,7 @@
margin-block-start: var(--sp2); margin-block-start: var(--sp2);
margin-block-end: var(--sp2); margin-block-end: var(--sp2);
border-spacing: 0; border-spacing: 0;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
border: 0; border: 0;
border-collapse: collapse; border-collapse: collapse;
font-family: var(--font-sans); font-family: var(--font-sans);
@ -22,7 +22,7 @@
& caption { & caption {
margin-block-end: var(--sp1); margin-block-end: var(--sp1);
text-align: start; text-align: start;
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
font-family: var(--font-serif); font-family: var(--font-serif);
font-size: 14px; font-size: 14px;
font-style: italic; font-style: italic;
@ -51,7 +51,7 @@
margin-inline-end: 0; margin-inline-end: 0;
text-align: start; text-align: start;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color--gray-5); color: var(--color-text-neutral-loud);
border-block-end: 2px solid var(--color--primary-50); border-block-end: 2px solid var(--color--primary-50);
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 14px; font-size: 14px;

2
core/themes/olivero/css/components/tabledrag.css
View File

@ -36,7 +36,7 @@
} }
.drag-previous a { .drag-previous a {
color: var(--color--gray-20); /* Ensure proper contrast. */ color: var(--color-text-neutral-medium); /* Ensure proper contrast. */
} }
a.tabledrag-handle, a.tabledrag-handle,

2
core/themes/olivero/css/components/tabledrag.pcss.css
View File

@ -18,7 +18,7 @@
} }
.drag-previous a { .drag-previous a {
color: var(--color--gray-20); /* Ensure proper contrast. */ color: var(--color-text-neutral-medium); /* Ensure proper contrast. */
} }
a.tabledrag-handle, a.tabledrag-handle,

2
core/themes/olivero/css/components/tabs.css
View File

@ -33,7 +33,7 @@
--tabs-padding-inline: var(--sp1-5); --tabs-padding-inline: var(--sp1-5);
--tabs-active-border-size: 0.375rem; --tabs-active-border-size: 0.375rem;
--tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ --tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
--tabs-text-color: var(--color--gray-45); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ --tabs-text-color: var(--color-text-neutral-soft); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
--tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ --tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
--tabs-letter-spacing: 1px; --tabs-letter-spacing: 1px;
--tabs-font-size: var(--font-size-s); --tabs-font-size: var(--font-size-s);

2
core/themes/olivero/css/components/tabs.pcss.css
View File

@ -8,7 +8,7 @@
--tabs-padding-inline: var(--sp1-5); --tabs-padding-inline: var(--sp1-5);
--tabs-active-border-size: 6px; --tabs-active-border-size: 6px;
--tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ --tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
--tabs-text-color: var(--color--gray-45); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ --tabs-text-color: var(--color-text-neutral-soft); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
--tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ --tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */
--tabs-letter-spacing: 1px; --tabs-letter-spacing: 1px;
--tabs-font-size: var(--font-size-s); --tabs-font-size: var(--font-size-s);

4
core/themes/olivero/css/components/tags.css
View File

@ -39,7 +39,7 @@
.field--tags__label { .field--tags__label {
margin: 0; margin: 0;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-size: var(--font-size-s); font-size: var(--font-size-s);
font-weight: 600; font-weight: 600;
line-height: 1.6 line-height: 1.6
@ -153,7 +153,7 @@
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 1.5; line-height: 1.5;

4
core/themes/olivero/css/components/tags.pcss.css
View File

@ -14,7 +14,7 @@
margin: 0; margin: 0;
margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2)); margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2));
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
font-size: var(--font-size-s); font-size: var(--font-size-s);
font-weight: 600; font-weight: 600;
line-height: 1.6; line-height: 1.6;
@ -65,7 +65,7 @@
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color--primary-40); color: var(--color-text-primary-medium);
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: 700; font-weight: 700;
line-height: 1.5; line-height: 1.5;

10
core/themes/olivero/css/components/text-content.css
View File

@ -25,7 +25,7 @@
.text-content, .text-content,
.cke_editable { .cke_editable {
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
font-family: var(--font-serif); font-family: var(--font-serif);
line-height: var(--sp1-5) line-height: var(--sp1-5)
@ -40,9 +40,9 @@
} }
.text-content a:where(:not(.button)), .cke_editable a:where(:not(.button)) { .text-content a:where(:not(.button)), .cke_editable a:where(:not(.button)) {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
-webkit-text-decoration-color: var(--color--primary-40); -webkit-text-decoration-color: currentColor;
text-decoration-color: var(--color--primary-40); text-decoration-color: currentColor;
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
overflow-wrap: break-word overflow-wrap: break-word
} }
@ -112,7 +112,7 @@
overflow: auto; overflow: auto;
padding-top: var(--sp); padding-top: var(--sp);
padding-bottom: var(--sp); padding-bottom: var(--sp);
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
} }
[dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote { [dir="ltr"] .text-content blockquote,[dir="ltr"] .cke_editable blockquote {

8
core/themes/olivero/css/components/text-content.pcss.css
View File

@ -7,7 +7,7 @@
.text-content, .text-content,
.cke_editable { .cke_editable {
color: var(--color--gray-20); color: var(--color-text-neutral-medium);
font-family: var(--font-serif); font-family: var(--font-serif);
line-height: var(--sp1-5); line-height: var(--sp1-5);
@ -21,8 +21,8 @@
*/ */
& a:where(:not(.button)) { & a:where(:not(.button)) {
color: var(--color--primary-40); color: var(--color-text-primary-medium);
text-decoration-color: var(--color--primary-40); text-decoration-color: currentColor;
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -70,7 +70,7 @@
padding-block: var(--sp); padding-block: var(--sp);
padding-inline-start: var(--sp); padding-inline-start: var(--sp);
padding-inline-end: var(--sp); padding-inline-end: var(--sp);
color: var(--color--gray-45); color: var(--color-text-neutral-soft);
} }
& blockquote { & blockquote {

2
core/themes/olivero/css/components/vertical-tabs.css
View File

@ -123,7 +123,7 @@
padding-top: var(--sp0-5); padding-top: var(--sp0-5);
padding-bottom: var(--sp0-5); padding-bottom: var(--sp0-5);
text-decoration: none; text-decoration: none;
color: var(--color--primary-30); color: var(--color-text-primary-loud);
background-color: var(--color--gray-95) background-color: var(--color--gray-95)
} }

2
core/themes/olivero/css/components/vertical-tabs.pcss.css
View File

@ -68,7 +68,7 @@
padding-inline-start: var(--sp0-75); padding-inline-start: var(--sp0-75);
padding-inline-end: var(--sp0-75); padding-inline-end: var(--sp0-75);
text-decoration: none; text-decoration: none;
color: var(--color--primary-30); color: var(--color-text-primary-loud);
background-color: var(--color--gray-95); background-color: var(--color--gray-95);
&:focus, &:focus,