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

Issue #3154539 by bnjmnm, ckrina, kiran.kadam911, hansa11, Meenakshi.g, paulocs, saschaeggi, jwilson3: Implement new Gray scale on Claro

merge-requests/841/head
Lauri Eskola 2021-09-17 12:56:47 +03:00
parent 5c01c2007e
commit ffb4778540
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
67 changed files with 263 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/themes/claro/css/base/elements.css
View File

@ -18,7 +18,7 @@ html {
}
body {
color: #222330;
color: #232429;
background: #fff;
}

3
core/themes/claro/css/base/variables.css
View File

@ -9,7 +9,8 @@
* Color Palette.
*/
/* Secondary. */
/* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
/* Variations. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
/* Gray variations. */
/*
* Base.
*/

62
core/themes/claro/css/base/variables.pcss.css
View File

@ -4,26 +4,17 @@
*/
--color-absolutezero: #003cc5;
--color-white: #fff;
--color-text: #222330;
--color-text-light: var(--color-grayblue);
--color-whitesmoke: #f3f4f9;
--color-whitesmoke-light: #fafbfd;
--color-whitesmoke-o-40: rgba(243, 244, 249, 0.4);
--color-text: var(--color-gray);
--color-text-light: var(--color-gray-500);
--color-gray-050-o-40: rgba(243, 244, 249, 0.4);
/* Secondary. */
--color-lightdiamond: #dedfe4;
--color-lightgray: #d4d4d8;
--color-lightgray-o-80: rgba(212, 212, 218, 0.8);
--color-grayblue: #8e929c;
--color-oldsilver: #82828c;
--color-davysgray: #545560;
--color-gray-200-o-80: rgba(212, 212, 218, 0.8);
--color-maximumred: #d72222;
--color-sunglow: #ffd23f;
--color-sunglow-shaded: #977405;
--color-lightninggreen: #26a769;
--color-focus: var(--color-lightninggreen);
/* Variations. */
--color-lightgray-hover: #c2c3ca; /* 5% darker than base. */
--color-lightgray-active: #adaeb3; /* 10% darker than base. */
--color-absolutezero-hover: #0036b1; /* 10% darker than base. */
--color-absolutezero-active: #00339a; /* 20% darker than base. */
--color-maximumred-hover: #c11f1f; /* 5% darker than base. */
@ -32,6 +23,19 @@
--color-bgblue-active: #e6ecf8; /* 10% darker than base. */
--color-bgred-hover: #fdf5f5; /* 5% darker than base. */
--color-bgred-active: #fceded; /* 10% darker than base. */
/* Gray variations. */
--color-gray: #232429;
--color-gray-900: #393a3f;
--color-gray-800: #55565b;
--color-gray-700: #75767b;
--color-gray-600: #828388;
--color-gray-500: #919297;
--color-gray-400: #adaeb3;
--color-gray-300: #c1c2c7;
--color-gray-200: #d3d4d9;
--color-gray-100: #dedfe4;
--color-gray-050: #f3f4f9;
--color-gray-025: #f9faff;
/*
* Base.
*/
@ -88,16 +92,16 @@
*/
--input-fg-color: var(--color-fg);
--input-bg-color: var(--color-bg);
--input-fg-color--description: var(--color-davysgray);
--input-fg-color--placeholder: var(--color-grayblue);
--input-border-color: var(--color-grayblue);
--input-fg-color--description: var(--color-gray-800);
--input-fg-color--placeholder: var(--color-gray-500);
--input-border-color: var(--color-gray-500);
--input--hover-border-color: var(--color-text);
--input--focus-border-color: var(--color-absolutezero);
--input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */
--input--error-color: var(--color-maximumred);
--input--error-border-color: var(--color-maximumred);
--input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
--input--disabled-fg-color: var(--color-oldsilver);
--input--disabled-fg-color: var(--color-gray-600);
--input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
--input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
--input--disabled-border-opacity: 0.5;
@ -122,7 +126,7 @@
* Details.
*/
--details-bg-color: rgba(243, 244, 249, 0.4);
--details-border-color: var(--color-lightdiamond);
--details-border-color: var(--color-gray-100);
--details-summary-shadow-color: var(--color-focus);
--details-summary-focus-border-size: var(--focus-border-size);
--details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
@ -141,18 +145,18 @@
--button--focus-border-color: #5a8bed;
--button-border-radius-size: var(--base-border-radius);
--button-fg-color: var(--color-text);
--button-bg-color: var(--color-lightgray);
--button--hover-bg-color: var(--color-lightgray-hover);
--button--active-bg-color: var(--color-lightgray-active);
--button-bg-color: var(--color-gray-200);
--button--hover-bg-color: var(--color-gray-300);
--button--active-bg-color: var(--color-gray-400);
--button--disabled-bg-color: #ebebed;
--button--disabled-fg-color: var(--color-grayblue);
--button--disabled-fg-color: var(--color-gray-500);
--button-fg-color--primary: var(--color-white);
--button-bg-color--primary: var(--color-absolutezero);
--button--hover-bg-color--primary: var(--color-absolutezero-hover);
--button--active-bg-color--primary: var(--color-absolutezero-active);
--button--focus-bg-color--primary: var(--button-bg-color--primary);
--button--disabled-bg-color--primary: var(--color-lightgray);
--button--disabled-fg-color--primary: var(--color-oldsilver);
--button--disabled-bg-color--primary: var(--color-gray-200);
--button--disabled-fg-color--primary: var(--color-gray-600);
--button-fg-color--danger: var(--color-white);
--button-bg-color--danger: var(--color-maximumred);
--button--hover-bg-color--danger: var(--color-maximumred-hover);
@ -160,7 +164,7 @@
/**
* jQuery.UI dropdown.
*/
--jui-dropdown-fg-color: var(--color-davysgray);
--jui-dropdown-fg-color: var(--color-gray-800);
--jui-dropdown-bg-color: var(--color-white);
--jui-dropdown--active-fg-color: var(--color-white);
--jui-dropdown--active-bg-color: var(--color-absolutezero);
@ -191,10 +195,10 @@
--progress-bar-spacing-size: var(--space-xs);
--progress-bar-transition: width 0.5s ease-out;
--progress-bar-label-color: var(--color-text);
--progress-bar-description-color: var(--color-davysgray);
--progress-bar-description-color: var(--color-gray-800);
--progress-bar-description-font-size: var(--font-size-xs);
--progress-track-border-color: var(--color-grayblue);
--progress-track-bg-color: var(--color-lightgray);
--progress-track-border-color: var(--color-gray-500);
--progress-track-bg-color: var(--color-gray-200);
/**
* Tabledrag icon size.
*/
@ -221,7 +225,7 @@
--vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
--vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
--vertical-tabs-menu-separator-color: var(--color-lightgray);
--vertical-tabs-menu-separator-color: var(--color-gray-200);
--vertical-tabs-menu-separator-size: 1px;
--vertical-tabs-menu-width: 20em;
--vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));

4
core/themes/claro/css/components/accordion.css
View File

@ -11,7 +11,7 @@
*/
.accordion {
color: #222330;
color: #232429;
border: 1px solid #dedfe4;
border-radius: 2px;
background-color: #fff;
@ -41,6 +41,6 @@
.accordion__item .claro-details__summary .summary {
display: block;
color: #545560;
color: #55565b;
font-weight: normal;
}

2
core/themes/claro/css/components/accordion.pcss.css
View File

@ -36,6 +36,6 @@
.accordion__item .claro-details__summary .summary {
display: block;
color: var(--color-davysgray);
color: var(--color-gray-800);
font-weight: normal;
}

2
core/themes/claro/css/components/action-link.css
View File

@ -53,7 +53,7 @@
padding: 0.75rem 1rem;
cursor: pointer;
text-decoration: none;
color: #545560;
color: #55565b;
border-radius: 2px;
background-color: #fff;
font-size: 1rem;

2
core/themes/claro/css/components/action-link.pcss.css
View File

@ -44,7 +44,7 @@
padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
cursor: pointer;
text-decoration: none;
color: var(--color-davysgray);
color: var(--color-gray-800);
border-radius: var(--button-border-radius-size);
background-color: var(--color-bg);
font-size: var(--font-size-base);

4
core/themes/claro/css/components/breadcrumb.css
View File

@ -12,7 +12,7 @@
.breadcrumb {
padding: 0;
color: #222330;
color: #232429;
font-size: 0.79rem;
}
@ -27,7 +27,7 @@
.breadcrumb__link {
display: inline;
text-decoration: none;
color: #222330;
color: #232429;
font-weight: bold;
}

14
core/themes/claro/css/components/button.css
View File

@ -42,10 +42,10 @@
cursor: pointer;
text-align: center;
text-decoration: none;
color: #222330;
color: #232429;
border: 1px solid transparent !important; /* 2 */
border-radius: 2px;
background-color: #d4d4d8;
background-color: #d3d4d9;
font-size: 1rem;
font-weight: 700;
line-height: 1rem;
@ -65,7 +65,7 @@
.button:hover {
text-decoration: none;
background-color: #c2c3ca;
background-color: #c1c2c7;
}
.button:focus {
@ -120,7 +120,7 @@
a.button:hover,
a.button:active {
color: #222330;
color: #232429;
}
/* Primary button styles */
@ -173,14 +173,14 @@ a.button--danger:active {
.button:disabled,
.button.is-disabled {
color: #8e929c;
color: #919297;
background-color: #ebebed;
}
.button--primary:disabled,
.button--primary.is-disabled {
color: #82828c;
background-color: #d4d4d8;
color: #828388;
background-color: #d3d4d9;
}
/* Make disabled <link> behave like a [disabled] <input> or <button> */

2
core/themes/claro/css/components/card.pcss.css
View File

@ -8,7 +8,7 @@
:root {
--card-bg-color: var(--color-white);
--card-border-size: 1px;
--card-border-color: var(--color-lightgray-o-80);
--card-border-color: var(--color-gray-200-o-80);
--card-border-radius-size: var(--base-border-radius);
--card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
--card-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

2
core/themes/claro/css/components/content-header.pcss.css
View File

@ -8,5 +8,5 @@
overflow: hidden;
margin-bottom: var(--space-s);
padding: var(--space-l) 0 0;
background-color: var(--color-whitesmoke);
background-color: var(--color-gray-050);
}

10
core/themes/claro/css/components/details.css
View File

@ -39,7 +39,7 @@
display: block;
margin-top: 1rem;
margin-bottom: 1rem;
color: #222330;
color: #232429;
border: 1px solid #dedfe4;
border-radius: 2px;
background-color: #fff;
@ -79,7 +79,7 @@
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #545560;
color: #55565b;
border-radius: 1px;
background-color: transparent;
line-height: 1rem;
@ -445,13 +445,13 @@
.claro-details__description {
margin-bottom: 1rem;
color: #545560;
color: #55565b;
font-size: 0.79rem; /* ~13px */
line-height: 1.0625rem; /* 17px */
}
.claro-details__description.is-disabled {
color: #82828c;
color: #828388;
}
/**
@ -549,7 +549,7 @@
.claro-details__summary-summary {
display: block;
color: #545560;
color: #55565b;
font-size: 0.889rem;
font-weight: normal;
}

6
core/themes/claro/css/components/details.pcss.css
View File

@ -78,7 +78,7 @@
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
word-wrap: break-word;
hyphens: auto;
color: var(--color-davysgray);
color: var(--color-gray-800);
border-radius: var(--size-summary-border-radius);
background-color: transparent;
line-height: var(--space-m);
@ -388,7 +388,7 @@
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
border-top: var(--details-border-size) solid var(--details-border-color);
background-color: var(--color-whitesmoke-o-40);
background-color: var(--color-gray-050-o-40);
}
@media screen and (min-width: 48em) {
@ -525,7 +525,7 @@
.claro-details__summary-summary {
display: block;
color: var(--color-davysgray);
color: var(--color-gray-800);
font-size: var(--font-size-s);
font-weight: normal;
}

8
core/themes/claro/css/components/dialog.css
View File

@ -15,7 +15,7 @@
border: 0;
border-radius: 0.25rem;
background: transparent;
box-shadow: 0 0 1rem -0.25rem #222330;
box-shadow: 0 0 1rem -0.25rem #232429;
}
.ui-dialog:focus {
@ -37,7 +37,7 @@
color: #fff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: #222330;
background: #232429;
line-height: 2rem;
}
@ -94,12 +94,12 @@
.ui-dialog > .ui-dialog-content {
overflow: auto;
padding: 1rem 1.5rem;
color: #222330;
color: #232429;
background: #fff;
}
.ui-dialog > .ui-dialog-buttonpane {
color: #222330;
color: #232429;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background: #f3f4f9;

2
core/themes/claro/css/components/dialog.pcss.css
View File

@ -95,7 +95,7 @@
color: var(--color-text);
border-bottom-right-radius: var(--jui-dialog-border-radius);
border-bottom-left-radius: var(--jui-dialog-border-radius);
background: var(--color-whitesmoke);
background: var(--color-gray-050);
}
.ui-dialog-buttonpane .ui-dialog-buttonset {

26
core/themes/claro/css/components/dropbutton.css
View File

@ -122,7 +122,7 @@
height: 3rem;
border: 1px solid transparent !important; /* 1 */
border-radius: 0 2px 2px 0; /* LTR */
background: #d4d4d8;
background: #d3d4d9;
font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
-webkit-appearance: none;
-moz-appearance: none;
@ -150,8 +150,8 @@
/* Toggler states. */
.dropbutton__toggle:hover {
color: #222330;
background-color: #c2c3ca;
color: #232429;
background-color: #c1c2c7;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
@ -160,7 +160,7 @@
}
.dropbutton__toggle:active {
color: #222330;
color: #232429;
background-color: #adaeb3;
}
@ -238,10 +238,10 @@
cursor: pointer;
text-align: center;
text-decoration: none;
color: #222330;
color: #232429;
border: 1px solid transparent !important; /* 1 */
border-radius: 2px;
background-color: #d4d4d8;
background-color: #d3d4d9;
font-size: 1rem;
font-weight: 700;
line-height: 1rem;
@ -275,8 +275,8 @@
.dropbutton__item:first-of-type > *:hover,
.dropbutton__item:first-of-type > .button:hover {
text-decoration: none;
color: #222330;
background-color: #c2c3ca;
color: #232429;
background-color: #c1c2c7;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
@ -290,7 +290,7 @@
}
.dropbutton__item:first-of-type > *:active {
color: #222330;
color: #232429;
background-color: #adaeb3;
}
@ -334,7 +334,7 @@
*/
.dropbutton__item:first-of-type ~ .dropbutton__item {
border: 1px solid #d4d4d8;
border: 1px solid #d3d4d9;
border-bottom: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
@ -344,7 +344,7 @@
}
.dropbutton__item ~ .dropbutton__item:last-child {
border-bottom: 1px solid #d4d4d8;
border-bottom: 1px solid #d3d4d9;
border-radius: 0 0 2px 2px;
}
@ -357,7 +357,7 @@
position: relative;
padding: calc(1rem - 1px);
text-decoration: none;
color: #545560;
color: #55565b;
border: 1px solid transparent !important; /* 1 */
border-radius: 2px;
background: #fff;
@ -411,7 +411,7 @@
}
.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
color: #222330;
color: #232429;
background: #f3f4f9;
}

8
core/themes/claro/css/components/dropbutton.pcss.css
View File

@ -319,7 +319,7 @@
* Non-first dropbutton list elements.
*/
.dropbutton__item:first-of-type ~ .dropbutton__item {
border: var(--dropbutton-border-size) solid var(--color-lightgray);
border: var(--dropbutton-border-size) solid var(--color-gray-200);
border-bottom: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
@ -329,7 +329,7 @@
}
.dropbutton__item ~ .dropbutton__item:last-child {
border-bottom: var(--dropbutton-border-size) solid var(--color-lightgray);
border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);
}
@ -341,7 +341,7 @@
position: relative;
padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
text-decoration: none;
color: var(--color-davysgray);
color: var(--color-gray-800);
border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
border-radius: var(--dropbutton-border-radius-size);
background: var(--color-white);
@ -393,7 +393,7 @@
.dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
color: var(--color-text);
background: var(--color-whitesmoke);
background: var(--color-gray-050);
}
.dropbutton__item > .button:not(:focus) {

2
core/themes/claro/css/components/entity-meta.css
View File

@ -12,7 +12,7 @@
.entity-meta__header {
padding: 0.5rem 1rem 1rem;
color: #222330;
color: #232429;
border: 1px solid #dedfe4;
border-radius: 2px;
background-color: #fff;

10
core/themes/claro/css/components/fieldset.css
View File

@ -14,7 +14,7 @@
min-width: 0;
margin: 1rem 0;
padding: 0;
color: #222330;
color: #232429;
border: 1px solid #dedfe4;
border-radius: 2px;
background-color: #fff;
@ -49,7 +49,7 @@ _:-ms-fullscreen,
float: left; /* iOS Safari, Android Chrome, Edge. */
width: 100%; /* iOS Safari, Android Chrome, Edge. */
margin-bottom: 1rem;
color: #545560;
color: #55565b;
font-weight: bold;
}
@ -95,7 +95,7 @@ _:-ms-fullscreen,
}
.fieldset__label.is-disabled {
color: #82828c;
color: #828388;
}
.fieldset__label.has-error {
@ -105,13 +105,13 @@ _:-ms-fullscreen,
.fieldset__description {
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
color: #545560;
color: #55565b;
font-size: 0.79rem; /* ~13px */
line-height: 1.0625rem; /* 17px */
}
.fieldset__description.is-disabled {
color: #82828c;
color: #828388;
}
/* Error message (Inline form errors). */

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

@ -41,7 +41,7 @@ _:-ms-fullscreen,
float: left; /* iOS Safari, Android Chrome, Edge. */
width: 100%; /* iOS Safari, Android Chrome, Edge. */
margin-bottom: var(--space-m);
color: var(--color-davysgray);
color: var(--color-gray-800);
font-weight: bold;
}

2
core/themes/claro/css/components/file.css
View File

@ -24,5 +24,5 @@
}
.file__size {
color: #545560;
color: #55565b;
}

2
core/themes/claro/css/components/file.pcss.css
View File

@ -18,5 +18,5 @@
}
.file__size {
color: var(--color-davysgray);
color: var(--color-gray-800);
}

22
core/themes/claro/css/components/form--checkbox-radio--ie.css
View File

@ -17,7 +17,7 @@
height: 1.125rem;
vertical-align: text-bottom;
color: transparent; /* IE */
border: 1px solid #8e929c;
border: 1px solid #919297;
border-radius: 2px;
background: #fff no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
@ -37,13 +37,13 @@
.form-boolean:active::-ms-check,
.form-boolean:hover::-ms-check {
border-color: #222330;
box-shadow: inset 0 0 0 1px #222330;
border-color: #232429;
box-shadow: inset 0 0 0 1px #232429;
}
.form-boolean:focus:active::-ms-check,
.form-boolean:focus:hover::-ms-check {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
}
.form-boolean--type-checkbox:checked::-ms-check {
@ -55,8 +55,8 @@
.form-boolean--type-checkbox:checked:active::-ms-check,
.form-boolean--type-checkbox:checked:hover::-ms-check {
border-color: #222330;
background-color: #222330;
border-color: #232429;
background-color: #232429;
}
.form-boolean--type-radio:checked::-ms-check {
@ -68,8 +68,8 @@
.form-boolean--type-checkbox:checked:active::-ms-check,
.form-boolean--type-checkbox:checked:hover::-ms-check {
border-color: #222330;
background-color: #222330;
border-color: #232429;
background-color: #232429;
}
.form-boolean--type-radio:checked::-ms-check {
@ -84,14 +84,14 @@
.form-boolean--type-radio:checked:active::-ms-check,
.form-boolean--type-radio:checked:hover::-ms-check {
border-color: #222330;
border-color: #232429;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #222330;
box-shadow: inset 0 0 0 1px #232429;
}
.form-boolean--type-radio:checked:focus:active::-ms-check,
.form-boolean--type-radio:checked:focus:hover::-ms-check {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
}
/**

18
core/themes/claro/css/components/form--checkbox-radio.css
View File

@ -79,7 +79,7 @@
width: 1.125rem;
height: 1.125rem;
vertical-align: text-bottom;
border: 1px solid #8e929c;
border: 1px solid #919297;
border-radius: 2px;
background: #fff no-repeat 50% 50%;
background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
@ -98,13 +98,13 @@
.form-boolean:active,
.form-boolean:hover {
border-color: #222330;
box-shadow: inset 0 0 0 1px #222330;
border-color: #232429;
box-shadow: inset 0 0 0 1px #232429;
}
.form-boolean:focus:active,
.form-boolean:focus:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
}
.form-boolean--type-checkbox:checked {
@ -115,8 +115,8 @@
.form-boolean--type-checkbox:checked:active,
.form-boolean--type-checkbox:checked:hover {
border-color: #222330;
background-color: #222330;
border-color: #232429;
background-color: #232429;
}
.form-boolean--type-radio:checked {
@ -131,14 +131,14 @@
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: #222330;
border-color: #232429;
background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #222330;
box-shadow: inset 0 0 0 1px #232429;
}
.form-boolean--type-radio:checked:focus:active,
.form-boolean--type-radio:checked:focus:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
}
/**

16
core/themes/claro/css/components/form--password-confirm.css
View File

@ -71,9 +71,9 @@
height: calc(0.5rem - 2px);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid #8e929c;
border: 1px solid #919297;
border-radius: 0.5rem;
background-color: #d4d4d8;
background-color: #d3d4d9;
}
.password-strength__track::after {
@ -113,13 +113,13 @@
overflow: hidden;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
color: #545560;
color: #55565b;
font-size: 0.79rem;
line-height: 1rem;
}
.password-strength__text {
color: #222330;
color: #232429;
font-weight: bold;
}
@ -160,12 +160,12 @@
.password-match-message {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
color: #545560;
color: #55565b;
font-size: 0.79rem;
}
.password-match-message__text {
color: #222330;
color: #232429;
font-weight: bold;
}
@ -183,8 +183,8 @@
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding: 1rem;
color: #545560;
border: 1px solid #d4d4d8;
color: #55565b;
border: 1px solid #d3d4d9;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

2
core/themes/claro/css/components/form--password-confirm.pcss.css
View File

@ -181,7 +181,7 @@
margin-bottom: var(--space-xs);
padding: var(--space-m);
color: var(--progress-bar-description-color);
border: 1px solid var(--color-lightgray);
border: 1px solid var(--color-gray-200);
border-radius: var(--base-border-radius);
background-color: var(--color-white);
box-shadow: var(--details-box-shadow);

14
core/themes/claro/css/components/form--text.css
View File

@ -15,8 +15,8 @@
max-width: 100%;
min-height: 3rem; /* iOS. */
padding: calc(0.75rem - 1px) calc(1rem - 1px);
color: #222330;
border: 1px solid #8e929c;
color: #232429;
border: 1px solid #919297;
border-radius: 0.125rem;
background: #fff;
font-size: 1rem;
@ -109,8 +109,8 @@ _:-ms-fullscreen,
}
.form-element:hover {
border-color: #222330;
box-shadow: inset 0 0 0 1px #222330;
border-color: #232429;
box-shadow: inset 0 0 0 1px #232429;
}
.form-element:focus {
@ -118,7 +118,7 @@ _:-ms-fullscreen,
}
.form-element:hover:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
}
.form-element.error {
@ -139,12 +139,12 @@ _:-ms-fullscreen,
}
.form-element[disabled] {
color: #82828c;
color: #828388;
border-color: #bababf;
background-color: #f2f2f3;
box-shadow: none;
/* https://stackoverflow.com/q/262158#answer-23511280 */
-webkit-text-fill-color: #82828c;
-webkit-text-fill-color: #828388;
}
/**

14
core/themes/claro/css/components/form.css
View File

@ -11,17 +11,17 @@
*/
:-ms-input-placeholder {
color: #8e929c;
color: #919297;
}
::placeholder {
color: #8e929c;
color: #919297;
}
/* IE 10 and 11 needs this set as important. */
:-ms-input-placeholder {
color: #8e929c !important;
color: #919297 !important;
}
/**
@ -87,7 +87,7 @@ tr .form-item,
.form-item__label.is-disabled {
cursor: default; /* @todo ...or auto? */
color: #82828c;
color: #828388;
}
.form-item__label.form-required::after,
@ -107,7 +107,7 @@ tr .form-item,
.form-item__description {
margin-top: 0.375rem; /* 6px */
margin-bottom: 0.375rem; /* 6px */
color: #545560;
color: #55565b;
font-size: 0.79rem; /* ~13px */
line-height: 1.0625rem; /* 17px */
}
@ -115,7 +115,7 @@ tr .form-item,
/* Description states. */
.form-item__description.is-disabled {
color: #82828c;
color: #828388;
}
/**
@ -133,7 +133,7 @@ tr .form-item,
.form-item__prefix.is-disabled,
.form-item__suffix.is-disabled {
color: #82828c;
color: #828388;
}
/* Add some spacing so that the focus ring and suffix don't overlap. */

2
core/themes/claro/css/components/icon-link.css
View File

@ -19,7 +19,7 @@
.icon-link {
display: flex;
padding: 0;
border: 1px solid #d4d4d8;
border: 1px solid #d3d4d9;
border-radius: 50%;
background-color: #fff;
}

4
core/themes/claro/css/components/icon-link.pcss.css
View File

@ -8,13 +8,13 @@
:root {
/* default */
--icon-link-bg-color: var(--color-white);
--icon-link-border-color: var(--color-lightgray);
--icon-link-border-color: var(--color-gray-200);
/* active */
--icon-link--active-bg-color: var(--color-absolutezero);
--icon-link--active-border-color: var(--color-absolutezero);
/* hover */
--icon-link--hover-bg-color: var(--color-bgblue-hover);
--icon-link--hover-border-color: var(--color-lightgray-o-80);
--icon-link--hover-border-color: var(--color-gray-200-o-80);
}
.icon-link {

10
core/themes/claro/css/components/image-preview.css
View File

@ -22,15 +22,15 @@
display: inline-block;
max-width: 100%;
background-color: #fff;
box-shadow: inset 0 0 0.4375rem #d4d4d8;
box-shadow: inset 0 0 0.4375rem #d3d4d9;
}
.image-preview img {
background-image:
linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
linear-gradient(135deg, #d4d4d8 25%, transparent 26%);
linear-gradient(-45deg, #d3d4d9 25%, transparent 26%),
linear-gradient(-45deg, #d3d4d9 25%, transparent 26%),
linear-gradient(135deg, #d3d4d9 25%, transparent 26%),
linear-gradient(135deg, #d3d4d9 25%, transparent 26%);
background-position:
0 0,
0.4375rem 0.4375rem,

2
core/themes/claro/css/components/image-preview.pcss.css
View File

@ -6,7 +6,7 @@
@import "../base/variables.pcss.css";
:root {
--color-pattern: var(--color-lightgray);
--color-pattern: var(--color-gray-200);
--size-pattern-square: calc(7rem / 16);
}

4
core/themes/claro/css/components/jquery.ui/theme.css
View File

@ -546,7 +546,7 @@
.ui-widget-overlay {
z-index: 1259;
opacity: 0.7;
background: #222330;
background: #232429;
}
/**
@ -597,7 +597,7 @@
.ui-autocomplete {
overflow: hidden;
color: #545560;
color: #55565b;
border: 1px solid rgba(216, 217, 224, 0.8);
border-top: 0;
border-radius: 0 0 0.125rem 0.125rem;

4
core/themes/claro/css/components/pager.css
View File

@ -54,7 +54,7 @@
padding-right: 0.5rem;
padding-left: 0.5rem;
text-decoration: none;
color: #545560;
color: #55565b;
border-radius: 1rem; /* Pager size ÷ 2 */
background: #fff; /* Make sure that the text is visible on dark background. */
line-height: 1;
@ -68,7 +68,7 @@
.pager__link:hover,
.pager__link.is-active:hover {
color: #545560;
color: #55565b;
background: #e6ecf8;
}

2
core/themes/claro/css/components/pager.pcss.css
View File

@ -11,7 +11,7 @@
*/
--pager-size: 2rem; /* --space-m × 2 */
--pager-border-width: 0.125rem; /* 2px */
--pager-fg-color: var(--color-davysgray);
--pager-fg-color: var(--color-gray-800);
--pager-bg-color: var(--color-white);
--pager--hover-bg-color: var(--color-bgblue-active);
--pager--focus-bg-color: var(--color-focus);

6
core/themes/claro/css/components/progress.css
View File

@ -35,9 +35,9 @@
.progress__track {
height: calc(1rem - 2px);
margin-top: 0;
border: 1px #8e929c solid;
border: 1px #919297 solid;
border-radius: 1rem;
background-color: #d4d4d8;
background-color: #d3d4d9;
}
.progress__bar {
@ -73,7 +73,7 @@
.progress__percentage {
overflow: hidden;
margin-top: 0.5rem;
color: #545560;
color: #55565b;
font-size: 0.79rem;
}

2
core/themes/claro/css/components/shortcut.css
View File

@ -39,7 +39,7 @@
opacity: 0;
color: #fff;
border-radius: 2px;
background: #545560;
background: #55565b;
font-size: 0.889rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

2
core/themes/claro/css/components/shortcut.pcss.css
View File

@ -10,7 +10,7 @@
/**
* Shortcut action.
*/
--shortcut-bg-color: var(--color-davysgray);
--shortcut-bg-color: var(--color-gray-800);
--shortcut-border-radius-size: var(--base-border-radius);
--shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);
--shortcut-icon-size: var(--space-l);

4
core/themes/claro/css/components/system-admin--admin-list.css
View File

@ -38,7 +38,7 @@
}
.admin-item:not(:last-child) {
border-bottom: 0.0625em solid #d4d4d8;
border-bottom: 0.0625em solid #d3d4d9;
}
.admin-item__title {
@ -80,7 +80,7 @@
.admin-item__description {
margin: 0.5em 0 0.25em;
color: #82828c;
color: #828388;
}
[dir="rtl"] .admin-item__description {

4
core/themes/claro/css/components/system-admin--admin-list.pcss.css
View File

@ -28,7 +28,7 @@
padding-left: 1.5em;
}
.admin-item:not(:last-child) {
border-bottom: calc(1em / 16) solid var(--color-lightgray);
border-bottom: calc(1em / 16) solid var(--color-gray-200);
}
.admin-item__title {
font-weight: bold;
@ -64,7 +64,7 @@
}
.admin-item__description {
margin: 0.5em 0 0.25em;
color: var(--color-oldsilver);
color: var(--color-gray-600);
}
[dir="rtl"] .admin-item__description {
margin-right: 0;

10
core/themes/claro/css/components/system-admin--modules.css
View File

@ -12,7 +12,7 @@
.modules-table-filter {
padding: 0.25rem 1.5rem;
border: 1px solid #d4d4d8;
border: 1px solid #d3d4d9;
border-radius: 2px 2px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@ -41,7 +41,7 @@
}
.claro-details__summary.claro-details__summary--package-listing {
color: #222330;
color: #232429;
border-radius: 0.25rem;
background: #f3f4f9;
font-size: 1.125rem; /* 18px */
@ -53,8 +53,8 @@
}
.module-list__module {
color: #222330;
border-bottom: 1px solid #d4d4d8;
color: #232429;
border-bottom: 1px solid #d3d4d9;
background: none;
}
@ -185,6 +185,6 @@ td.module-list__description {
.claro-details .tableresponsive-toggle-columns button {
margin-top: 0.5rem;
text-decoration: none;
color: #545560;
color: #55565b;
font-weight: bold;
}

8
core/themes/claro/css/components/system-admin--modules.pcss.css
View File

@ -12,7 +12,7 @@
.modules-table-filter {
padding: 0.25rem var(--space-l);
border: 1px solid var(--color-lightgray);
border: 1px solid var(--color-gray-200);
border-radius: 2px 2px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@ -42,7 +42,7 @@
.claro-details__summary.claro-details__summary--package-listing {
color: var(--color-text);
border-radius: 4px;
background: var(--color-whitesmoke);
background: var(--color-gray-050);
font-size: 1.125rem; /* 18px */
line-height: 1.424rem; /* 23px */
}
@ -53,7 +53,7 @@
.module-list__module {
color: var(--color-text);
border-bottom: 1px solid var(--color-lightgray);
border-bottom: 1px solid var(--color-gray-200);
background: none;
}
@ -179,6 +179,6 @@ td.module-list__description {
.claro-details .tableresponsive-toggle-columns button {
margin-top: var(--space-xs);
text-decoration: none;
color: var(--color-davysgray);
color: var(--color-gray-800);
font-weight: bold;
}

2
core/themes/claro/css/components/system-admin--panel.css
View File

@ -14,7 +14,7 @@
margin-top: 1em;
margin-bottom: 3em;
padding: 0;
border-bottom: 0.0625em solid #d4d4d8;
border-bottom: 0.0625em solid #d3d4d9;
}
.panel__title {

4
core/themes/claro/css/components/system-admin--panel.pcss.css
View File

@ -9,12 +9,12 @@
margin-top: 1em;
margin-bottom: 3em;
padding: 0;
border-bottom: calc(1em / 16) solid var(--color-lightgray);
border-bottom: calc(1em / 16) solid var(--color-gray-200);
}
.panel__title {
margin: 0;
padding: calc(12em / 18) calc(24em / 18);
background: var(--color-whitesmoke);
background: var(--color-gray-050);
font-size: calc(18em / 16);
line-height: calc(24em / 18);
}

2
core/themes/claro/css/components/system-admin--status-report.css
View File

@ -80,7 +80,7 @@
.system-status-report__row {
display: flex;
border-bottom: 1px solid #d4d4d8;
border-bottom: 1px solid #d3d4d9;
}
.system-status-report__row:last-of-type {

2
core/themes/claro/css/components/system-admin--status-report.pcss.css
View File

@ -69,7 +69,7 @@
.system-status-report__row {
display: flex;
border-bottom: 1px solid #d4d4d8;
border-bottom: 1px solid #d3d4d9;
}
.system-status-report__row:last-of-type {
border-bottom: none;

2
core/themes/claro/css/components/system-status-report.pcss.css
View File

@ -98,7 +98,7 @@
}
.claro-details__summary--system-status-report {
background: var(--color-whitesmoke);
background: var(--color-gray-050);
}
@media screen and (max-width: 48em) {

2
core/themes/claro/css/components/table--file-multiple-widget.css
View File

@ -63,7 +63,7 @@
.table-file-multiple-widget th {
height: 2rem;
color: #545560;
color: #55565b;
background: #f3f4f9;
font-size: 0.889rem;
}

4
core/themes/claro/css/components/table--file-multiple-widget.pcss.css
View File

@ -55,8 +55,8 @@
.table-file-multiple-widget th {
height: calc(var(--space-m) * 2);
color: var(--color-davysgray);
background: var(--color-whitesmoke);
color: var(--color-gray-800);
background: var(--color-gray-050);
font-size: var(--font-size-s);
}

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

@ -27,7 +27,7 @@ body.drag {
/* Empty region message row in table. */
.region-message {
color: #82828c;
color: #828388;
}
/* If the region is populated, we shouldn't display the empty message. */

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

@ -23,7 +23,7 @@ body.drag {
}
/* Empty region message row in table. */
.region-message {
color: var(--color-oldsilver);
color: var(--color-gray-600);
}
/* If the region is populated, we shouldn't display the empty message. */
.region-message.region-populated {

16
core/themes/claro/css/components/tables.css
View File

@ -35,7 +35,7 @@ th {
height: 3rem;
padding: 0.5rem 1rem;
text-align: left; /* LTR */
color: #222330;
color: #232429;
background: #f3f4f9;
line-height: 1.25rem; /* 20px */
}
@ -158,12 +158,12 @@ _:-ms-fullscreen, /* Only IE 11 */
}
tr {
border-bottom: 0.0625rem solid #d4d4d8;
border-bottom: 0.0625rem solid #d3d4d9;
}
tr,
.draggable-table.tabledrag-disabled tr {
color: #222330;
color: #232429;
background: #fff;
}
@ -173,19 +173,19 @@ thead tr {
tr:hover,
tr:focus {
color: #222330;
color: #232429;
background: #f0f5fd;
}
tr.color-warning:hover,
tr.color-warning:focus {
color: #222330;
color: #232429;
background: #fdf8ed;
}
tr.color-error:hover,
tr.color-error:focus {
color: #222330;
color: #232429;
background: #fcf4f2;
}
@ -227,7 +227,7 @@ td > .ajax-new-content > .form-item > .form-element {
/* Win over table-file-multiple-widget. */
th.is-disabled.is-disabled {
color: #82828c;
color: #828388;
}
/* Force browsers to calculate the width of a 'select all' <th> element. */
@ -253,7 +253,7 @@ tfoot tr:last-child {
}
tfoot tr:first-child td {
border-top: 0.0625rem solid #8e929c;
border-top: 0.0625rem solid #919297;
}
/**

6
core/themes/claro/css/components/tables.pcss.css
View File

@ -29,7 +29,7 @@ th {
padding: var(--space-xs) var(--space-m);
text-align: left; /* LTR */
color: var(--color-text);
background: var(--color-whitesmoke);
background: var(--color-gray-050);
line-height: 1.25rem; /* 20px */
}
[dir="rtl"] th {
@ -128,7 +128,7 @@ _:-ms-fullscreen, /* Only IE 11 */
}
tr {
border-bottom: 0.0625rem solid var(--color-lightgray);
border-bottom: 0.0625rem solid var(--color-gray-200);
}
tr,
.draggable-table.tabledrag-disabled tr {
@ -207,7 +207,7 @@ tfoot tr:last-child {
border-bottom: 0;
}
tfoot tr:first-child td {
border-top: 0.0625rem solid var(--color-grayblue);
border-top: 0.0625rem solid var(--color-gray-500);
}
/**

18
core/themes/claro/css/components/tabs.css
View File

@ -24,7 +24,7 @@
flex-direction: column;
width: 100%;
margin: 0 0 1.5rem 0;
border: 1px solid #d4d4d8;
border: 1px solid #d3d4d9;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@ -35,8 +35,8 @@
.tabs__tab {
position: relative;
border-bottom: 1px solid #d4d4d8;
background-color: #fafbfd;
border-bottom: 1px solid #d3d4d9;
background-color: #f9faff;
font-size: 0.889rem;
font-weight: bold;
}
@ -62,7 +62,7 @@
min-height: 3rem;
padding: 0.75rem 1.5rem;
text-decoration: none;
color: #545560;
color: #55565b;
line-height: 1.2rem;
}
@ -71,7 +71,7 @@
margin: -1px;
padding-left: calc(1.5rem - 2px); /* LTR */
text-decoration: none;
color: #545560;
color: #55565b;
border: 3px solid #26a769;
border-radius: 2px;
outline: none;
@ -85,7 +85,7 @@
.tabs__link:hover {
text-decoration: none;
color: #222330;
color: #232429;
}
.tabs__link.is-active {
@ -112,7 +112,7 @@
}
.tabs__link.is-active:hover {
color: #222330;
color: #232429;
}
/* Active and hover indicator. */
@ -230,7 +230,7 @@
display: block;
width: 100%;
content: "";
border-bottom: 1px solid #d4d4d8;
border-bottom: 1px solid #d3d4d9;
}
.is-horizontal .tabs__tab {
@ -268,7 +268,7 @@
margin: 0;
padding-right: 2rem;
padding-left: 2rem;
color: #222330;
color: #232429;
border: none;
border-radius: 2px 2px 0 0;
outline: 2px dotted transparent;

12
core/themes/claro/css/components/tabs.pcss.css
View File

@ -14,7 +14,7 @@
--tabs--active-height: 3px;
--tabs-link-height: 3rem; /* 48px */
--tabs-secondary-link-height: 2.5rem; /* 40px */
--tabs-base-border: 1px solid var(--color-lightgray);
--tabs-base-border: 1px solid var(--color-gray-200);
--tabs-base-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
--tabs-trigger-border: 1px solid rgba(216, 217, 224, 0.8);
--tabs--hover-bg-color: #e6ecf8;
@ -39,7 +39,7 @@
.tabs__tab {
position: relative;
border-bottom: var(--tabs-base-border);
background-color: var(--color-whitesmoke-light);
background-color: var(--color-gray-025);
font-size: var(--font-size-s);
font-weight: bold;
}
@ -63,7 +63,7 @@
min-height: var(--tabs-link-height);
padding: var(--space-s) var(--space-l);
text-decoration: none;
color: var(--color-davysgray);
color: var(--color-gray-800);
line-height: 1.2rem;
}
.tabs__link:focus {
@ -71,7 +71,7 @@
margin: -1px;
padding-left: calc(var(--space-l) - var(--tabs--focus-height) + 1px); /* LTR */
text-decoration: none;
color: var(--color-davysgray);
color: var(--color-gray-800);
border: var(--tabs--focus-height) solid var(--color-focus);
border-radius: var(--tabs-border-radius-size);
outline: none;
@ -212,7 +212,7 @@
display: block;
width: 100%;
content: "";
border-bottom: 1px solid var(--color-lightgray);
border-bottom: 1px solid var(--color-gray-200);
}
.is-horizontal .tabs__tab {
@ -260,7 +260,7 @@
border: none;
}
.is-horizontal .tabs--primary .tabs__link:focus {
box-shadow: 0 0 0 2px var(--color-whitesmoke), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
}
.is-horizontal .tabs__link:hover {

10
core/themes/claro/css/components/vertical-tabs.css
View File

@ -41,7 +41,7 @@
margin: 0;
padding-top: 0.5rem;
list-style: none;
color: #222330;
color: #232429;
}
[dir="rtl"] .vertical-tabs__menu {
@ -85,7 +85,7 @@
display: block;
width: 100%;
margin-top: -1px;
border-top: 1px solid #d4d4d8;
border-top: 1px solid #d3d4d9;
}
/**
@ -143,7 +143,7 @@
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #222330;
color: #232429;
border: 1px solid transparent;
border-width: 1px 0 1px 4px; /* LTR */
border-radius: 2px 0 0 2px; /* LTR */
@ -265,7 +265,7 @@
.vertical-tabs__menu-link-summary {
display: block;
color: #545560;
color: #55565b;
font-size: 0.889rem;
font-weight: normal;
}
@ -278,7 +278,7 @@
box-sizing: border-box;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
color: #222330;
color: #232429;
border: 1px solid #dedfe4;
border-radius: 2px;
background-color: #fff;

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

@ -241,7 +241,7 @@
*/
.vertical-tabs__menu-link-summary {
display: block;
color: var(--color-davysgray);
color: var(--color-gray-800);
font-size: var(--font-size-s);
font-weight: normal;
}

16
core/themes/claro/css/components/views-ui.css
View File

@ -87,7 +87,7 @@ details.fieldset-no-legend {
.views-ui-dialog .form-item:first-of-type.description {
margin: 0 0 1.5rem 0;
padding-bottom: 0.75rem;
border-bottom: 0.0625rem solid #d4d4d8;
border-bottom: 0.0625rem solid #d3d4d9;
font-weight: bold;
}
@ -309,7 +309,7 @@ details.fieldset-no-legend {
.views-tabs .add a {
padding: 0.5625rem 0.8125rem 0.5625rem 0.5625rem;
color: #545560;
color: #55565b;
border: none;
border-radius: 2px;
background-color: transparent;
@ -456,7 +456,7 @@ details.fieldset-no-legend {
}
.views-ui-rearrange-filter-form tr:first-of-type {
border-top: 0.0625rem solid #d4d4d8;
border-top: 0.0625rem solid #d3d4d9;
}
.views-ui-rearrange-filter-form tr:not(.draggable):hover {
@ -577,7 +577,7 @@ details.fieldset-no-legend {
.views-config-group-region {
display: table;
margin: 1.5rem 0;
border: 0.0625rem solid #d4d4d8;
border: 0.0625rem solid #d3d4d9;
border-collapse: collapse;
}
@ -585,7 +585,7 @@ details.fieldset-no-legend {
position: relative;
display: table-cell;
padding: 1.5rem;
border: 0.0625rem solid #d4d4d8;
border: 0.0625rem solid #d3d4d9;
}
.views-config-group-region .views-group-box--operator {
@ -627,7 +627,7 @@ details.fieldset-no-legend {
width: 0.0625rem;
height: 100%;
content: "";
border-left: 0.0625rem solid #d4d4d8;
border-left: 0.0625rem solid #d3d4d9;
}
[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::before {
@ -641,8 +641,8 @@ details.fieldset-no-legend {
left: -1rem; /* LTR */
padding: 0 0.3rem 0.3rem 0.4rem; /* LTR */
content: ">";
color: #82828c;
border: 0.0625rem solid #d4d4d8;
color: #828388;
border: 0.0625rem solid #d3d4d9;
background: #fff;
font-size: 2.027rem;
font-weight: bold;

16
core/themes/claro/css/components/views-ui.pcss.css
View File

@ -75,7 +75,7 @@ details.fieldset-no-legend {
.views-ui-dialog .form-item:first-of-type.description {
margin: 0 0 var(--space-l) 0;
padding-bottom: var(--space-s);
border-bottom: 0.0625rem solid var(--color-lightgray);
border-bottom: 0.0625rem solid var(--color-gray-200);
font-weight: bold;
}
@ -273,7 +273,7 @@ details.fieldset-no-legend {
}
.views-tabs .add a {
padding: 9px 13px 9px 9px;
color: var(--color-davysgray);
color: var(--color-gray-800);
border: none;
border-radius: var(--base-border-radius);
background-color: transparent;
@ -397,7 +397,7 @@ details.fieldset-no-legend {
border-bottom: 0;
}
.views-ui-rearrange-filter-form tr:first-of-type {
border-top: 0.0625rem solid var(--color-lightgray);
border-top: 0.0625rem solid var(--color-gray-200);
}
.views-ui-rearrange-filter-form tr:not(.draggable):hover {
background: inherit;
@ -509,14 +509,14 @@ details.fieldset-no-legend {
.views-config-group-region {
display: table;
margin: var(--space-l) 0;
border: 0.0625rem solid var(--color-lightgray);
border: 0.0625rem solid var(--color-gray-200);
border-collapse: collapse;
}
.views-config-group-region .views-group-box {
position: relative;
display: table-cell;
padding: var(--space-l);
border: 0.0625rem solid var(--color-lightgray);
border: 0.0625rem solid var(--color-gray-200);
}
.views-config-group-region .views-group-box--operator {
padding-right: var(--space-xl);
@ -551,7 +551,7 @@ details.fieldset-no-legend {
width: 0.0625rem;
height: 100%;
content: "";
border-left: 0.0625rem solid var(--color-lightgray);
border-left: 0.0625rem solid var(--color-gray-200);
}
[dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::before {
right: 0;
@ -563,8 +563,8 @@ details.fieldset-no-legend {
left: calc(0 - var(--space-m)); /* LTR */
padding: 0 0.3rem 0.3rem 0.4rem; /* LTR */
content: ">";
color: var(--color-oldsilver);
border: 0.0625rem solid var(--color-lightgray);
color: var(--color-gray-600);
border: 0.0625rem solid var(--color-gray-200);
background: #fff;
font-size: var(--font-size-h1);
font-weight: bold;

4
core/themes/claro/css/theme/ckeditor-editor.css
View File

@ -45,14 +45,14 @@
}
/* Default */
.cke.cke_chrome {
border-color: #8e929c;
border-color: #919297;
}
/* Hover. */
.cke.cke_chrome:hover,
.cke:hover .cke_contents,
.cke:hover .cke_top,
.cke:hover .cke_bottom {
border-color: #222330;
border-color: #232429;
}
/* Focus. */
.cke.cke_chrome.cke_focus {

2
core/themes/claro/css/theme/filter.theme.css
View File

@ -66,7 +66,7 @@
.filter-guidelines__item {
margin-top: 0.5em; /* (6 / 12) */
color: #545560;
color: #55565b;
font-size: 0.75em; /* (12 / 16) */
}

4
core/themes/claro/css/theme/maintenance-page.css
View File

@ -18,7 +18,7 @@
.site-name {
margin-top: 1rem;
word-wrap: break-word;
color: #545560;
color: #55565b;
font-size: 1.424rem;
}
@ -29,7 +29,7 @@
.content {
margin-bottom: 1rem;
color: #545560;
color: #55565b;
}
.site-name,

6
core/themes/claro/css/theme/maintenance-page.pcss.css
View File

@ -7,13 +7,13 @@
.maintenance-page {
min-height: 100%;
background-color: var(--color-lightdiamond);
background-color: var(--color-gray-100);
}
.site-name {
margin-top: var(--space-m);
word-wrap: break-word;
color: var(--color-davysgray);
color: var(--color-gray-800);
font-size: var(--font-size-h4);
}
@ -24,7 +24,7 @@
.content {
margin-bottom: var(--space-m);
color: var(--color-davysgray);
color: var(--color-gray-800);
}
.site-name,

14
core/themes/claro/css/theme/media-library.css
View File

@ -39,7 +39,7 @@
margin: 0;
padding-top: 0.5rem;
list-style: none;
color: #222330;
color: #232429;
}
[dir="rtl"] .media-library-menu {
@ -63,7 +63,7 @@
width: 100%;
margin-top: -1px;
content: "";
border-top: 1px solid #d4d4d8;
border-top: 1px solid #d3d4d9;
}
.media-library-menu__link {
@ -76,7 +76,7 @@
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #222330;
color: #232429;
border: 1px solid transparent;
border-width: 1px 0 1px 4px; /* LTR */
border-radius: 2px 0 0 2px; /* LTR */
@ -107,8 +107,8 @@
text-decoration: none;
color: #003cc5;
/* These borders are necessary to replace the dividing lines while in the hover state. */
border-top: 1px solid #d4d4d8;
border-bottom: 1px solid #d4d4d8;
border-top: 1px solid #d3d4d9;
border-bottom: 1px solid #d3d4d9;
background: #f0f5fd;
}
@ -803,7 +803,7 @@
.media-library-item__edit {
/* !important to override button class border. */
border: 1px solid #d4d4d8 !important;
border: 1px solid #d3d4d9 !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;
@ -822,7 +822,7 @@
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
/* !important to override button class border. */
border: 1px solid #d4d4d8 !important;
border: 1px solid #d3d4d9 !important;
background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center;

6
core/themes/claro/css/theme/media-library.pcss.css
View File

@ -750,7 +750,7 @@
.media-library-item__edit {
/* !important to override button class border. */
border: 1px solid var(--color-lightgray) !important;
border: 1px solid var(--color-gray-200) !important;
background-image: url("../../images/icons/545560/pencil.svg");
background-repeat: no-repeat;
background-position: center;
@ -767,7 +767,7 @@
.media-library-item__remove.button:hover,
.media-library-item__remove.button:focus {
/* !important to override button class border. */
border: 1px solid var(--color-lightgray) !important;
border: 1px solid var(--color-gray-200) !important;
background-image: url("../../../../misc/icons/545560/ex.svg");
background-repeat: no-repeat;
background-position: center;
@ -801,7 +801,7 @@
justify-content: center;
width: 220px;
margin-right: 20px; /* LTR */
background: var(--color-whitesmoke-o-40);
background: var(--color-gray-050-o-40);
}
[dir="rtl"] .media-library-add-form__preview {
margin-right: 0;

6
core/themes/claro/css/theme/views_ui.admin.theme.css
View File

@ -292,7 +292,7 @@ td.group-title {
bottom: -0.8125rem;
padding: 0.5px 0.375rem;
text-transform: uppercase;
border: 1px solid #d4d4d8;
border: 1px solid #d3d4d9;
background: #fff;
font-weight: bold;
font-style: italic;
@ -641,7 +641,7 @@ td.group-title {
}
.views-ui-rearrange-filter-form tr td[rowspan] {
border: 1px solid #d4d4d8;
border: 1px solid #d3d4d9;
}
.views-ui-rearrange-filter-form tr[id^="views-row"] {
@ -654,7 +654,7 @@ td.group-title {
}
.views-ui-rearrange-filter-form .draggable td {
border-bottom: 0.0625rem solid #d4d4d8;
border-bottom: 0.0625rem solid #d3d4d9;
}
.views-ui-rearrange-filter-form .group-empty {

34
core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
View File

@ -233,7 +233,7 @@ td.group-title {
bottom: -13px;
padding: 0.5px 6px;
text-transform: uppercase;
border: 1px solid var(--color-lightgray);
border: 1px solid var(--color-gray-200);
background: #fff;
font-weight: bold;
font-style: italic;
@ -252,9 +252,9 @@ td.group-title {
}
.views-displays {
padding-bottom: 36px;
border-top: 1px solid var(--color-lightgray-o-80);
border-right: 1px solid var(--color-lightgray-o-80);
border-left: 1px solid var(--color-lightgray-o-80);
border-top: 1px solid var(--color-gray-200-o-80);
border-right: 1px solid var(--color-gray-200-o-80);
border-left: 1px solid var(--color-gray-200-o-80);
}
.views-display-top {
position: relative;
@ -262,16 +262,16 @@ td.group-title {
flex-wrap: wrap;
justify-content: space-between;
padding: var(--space-s) var(--space-s) calc(var(--space-s) - 5px);
border-bottom: 1px solid var(--color-lightgray-o-80);
background-color: var(--color-whitesmoke);
border-bottom: 1px solid var(--color-gray-200-o-80);
background-color: var(--color-gray-050);
}
.form-edit .form-actions {
margin-top: 0;
padding: var(--space-s) var(--space-m);
border-right: 1px solid var(--color-lightgray-o-80);
border-bottom: 1px solid var(--color-lightgray-o-80);
border-left: 1px solid var(--color-lightgray-o-80);
background-color: var(--color-whitesmoke);
border-right: 1px solid var(--color-gray-200-o-80);
border-bottom: 1px solid var(--color-gray-200-o-80);
border-left: 1px solid var(--color-gray-200-o-80);
background-color: var(--color-gray-050);
}
.edit-display-settings {
margin: var(--space-l) var(--space-l) 0 var(--space-l);
@ -290,7 +290,7 @@ td.group-title {
padding: 0.125rem 0 0;
}
.views-display-column {
border: 1px solid var(--color-lightgray-o-80);
border: 1px solid var(--color-gray-200-o-80);
border-radius: var(--base-border-radius);
box-shadow: var(--details-box-shadow);
}
@ -332,7 +332,7 @@ td.group-title {
margin: 0 0 var(--space-xs);
padding-top: var(--space-xs);
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--color-lightgray-o-80);
border-bottom: 1px solid var(--color-gray-200-o-80);
line-height: 20px;
}
.views-ui-display-tab-bucket:last-of-type {
@ -469,7 +469,7 @@ td.group-title {
.views-ui-dialog .views-offset-top:not(:empty) {
position: relative;
padding: var(--space-s) var(--space-m) var(--space-xs);
background-color: var(--color-whitesmoke);
background-color: var(--color-gray-050);
}
.views-ui-dialog .views-offset-top:not(:empty):after {
position: absolute;
@ -529,7 +529,7 @@ td.group-title {
border-collapse: collapse;
}
.views-ui-rearrange-filter-form tr td[rowspan] {
border: 1px solid var(--color-lightgray);
border: 1px solid var(--color-gray-200);
}
.views-ui-rearrange-filter-form tr[id^="views-row"] {
border-right: 1px solid #cdcdcd; /* LTR */
@ -539,7 +539,7 @@ td.group-title {
border-left: 1px solid #cdcdcd;
}
.views-ui-rearrange-filter-form .draggable td {
border-bottom: 0.0625rem solid var(--color-lightgray);
border-bottom: 0.0625rem solid var(--color-gray-200);
}
.views-ui-rearrange-filter-form .group-empty {
border-bottom: 1px solid #cdcdcd;
@ -569,7 +569,7 @@ td.group-title {
margin-top: 0;
padding: 8px 12px;
border-bottom: 1px solid #ccc;
background-color: var(--color-whitesmoke);
background-color: var(--color-gray-050);
}
.view-preview-form .form-item--live-preview {
position: absolute;
@ -622,7 +622,7 @@ td.group-title {
border-color: var(--color-bg);
}
.views-query-info table tr {
background-color: var(--color-whitesmoke);
background-color: var(--color-gray-050);
}
.views-query-info table th,
.views-query-info table td {