From ffb477854005f3825cbcbc9500902015291a0e0c Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 17 Sep 2021 12:56:47 +0300
Subject: [PATCH] Issue #3154539 by bnjmnm, ckrina, kiran.kadam911, hansa11,
Meenakshi.g, paulocs, saschaeggi, jwilson3: Implement new Gray scale on Claro
---
core/themes/claro/css/base/elements.css | 2 +-
core/themes/claro/css/base/variables.css | 3 +-
core/themes/claro/css/base/variables.pcss.css | 62 ++++++++++---------
.../themes/claro/css/components/accordion.css | 4 +-
.../claro/css/components/accordion.pcss.css | 2 +-
.../claro/css/components/action-link.css | 2 +-
.../claro/css/components/action-link.pcss.css | 2 +-
.../claro/css/components/breadcrumb.css | 4 +-
core/themes/claro/css/components/button.css | 14 ++---
.../themes/claro/css/components/card.pcss.css | 2 +-
.../css/components/content-header.pcss.css | 2 +-
core/themes/claro/css/components/details.css | 10 +--
.../claro/css/components/details.pcss.css | 6 +-
core/themes/claro/css/components/dialog.css | 8 +--
.../claro/css/components/dialog.pcss.css | 2 +-
.../claro/css/components/dropbutton.css | 26 ++++----
.../claro/css/components/dropbutton.pcss.css | 8 +--
.../claro/css/components/entity-meta.css | 2 +-
core/themes/claro/css/components/fieldset.css | 10 +--
.../claro/css/components/fieldset.pcss.css | 2 +-
core/themes/claro/css/components/file.css | 2 +-
.../themes/claro/css/components/file.pcss.css | 2 +-
.../components/form--checkbox-radio--ie.css | 22 +++----
.../css/components/form--checkbox-radio.css | 18 +++---
.../css/components/form--password-confirm.css | 16 ++---
.../form--password-confirm.pcss.css | 2 +-
.../claro/css/components/form--text.css | 14 ++---
core/themes/claro/css/components/form.css | 14 ++---
.../themes/claro/css/components/icon-link.css | 2 +-
.../claro/css/components/icon-link.pcss.css | 4 +-
.../claro/css/components/image-preview.css | 10 +--
.../css/components/image-preview.pcss.css | 2 +-
.../claro/css/components/jquery.ui/theme.css | 4 +-
core/themes/claro/css/components/pager.css | 4 +-
.../claro/css/components/pager.pcss.css | 2 +-
core/themes/claro/css/components/progress.css | 6 +-
core/themes/claro/css/components/shortcut.css | 2 +-
.../claro/css/components/shortcut.pcss.css | 2 +-
.../components/system-admin--admin-list.css | 4 +-
.../system-admin--admin-list.pcss.css | 4 +-
.../css/components/system-admin--modules.css | 10 +--
.../components/system-admin--modules.pcss.css | 8 +--
.../css/components/system-admin--panel.css | 2 +-
.../components/system-admin--panel.pcss.css | 4 +-
.../system-admin--status-report.css | 2 +-
.../system-admin--status-report.pcss.css | 2 +-
.../components/system-status-report.pcss.css | 2 +-
.../table--file-multiple-widget.css | 2 +-
.../table--file-multiple-widget.pcss.css | 4 +-
.../themes/claro/css/components/tabledrag.css | 2 +-
.../claro/css/components/tabledrag.pcss.css | 2 +-
core/themes/claro/css/components/tables.css | 16 ++---
.../claro/css/components/tables.pcss.css | 6 +-
core/themes/claro/css/components/tabs.css | 18 +++---
.../themes/claro/css/components/tabs.pcss.css | 12 ++--
.../claro/css/components/vertical-tabs.css | 10 +--
.../css/components/vertical-tabs.pcss.css | 2 +-
core/themes/claro/css/components/views-ui.css | 16 ++---
.../claro/css/components/views-ui.pcss.css | 16 ++---
.../claro/css/theme/ckeditor-editor.css | 4 +-
core/themes/claro/css/theme/filter.theme.css | 2 +-
.../claro/css/theme/maintenance-page.css | 4 +-
.../claro/css/theme/maintenance-page.pcss.css | 6 +-
core/themes/claro/css/theme/media-library.css | 14 ++---
.../claro/css/theme/media-library.pcss.css | 6 +-
.../claro/css/theme/views_ui.admin.theme.css | 6 +-
.../css/theme/views_ui.admin.theme.pcss.css | 34 +++++-----
67 files changed, 263 insertions(+), 258 deletions(-)
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index e1ecf0e103f5..1b995d7fed94 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -18,7 +18,7 @@ html {
}
body {
- color: #222330;
+ color: #232429;
background: #fff;
}
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 0e1d9efb9a68..e6ff4efbd857 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -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.
*/
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 4e9f92785795..62163019d4d4 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -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));
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index 8caaa5bc98d1..872e33888c65 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/accordion.pcss.css b/core/themes/claro/css/components/accordion.pcss.css
index 4195c1cbe940..d7fcaa657405 100644
--- a/core/themes/claro/css/components/accordion.pcss.css
+++ b/core/themes/claro/css/components/accordion.pcss.css
@@ -36,6 +36,6 @@
.accordion__item .claro-details__summary .summary {
display: block;
- color: var(--color-davysgray);
+ color: var(--color-gray-800);
font-weight: normal;
}
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index adf2a4033ec9..0349f4627606 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -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;
diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css
index 4fd41de11175..389b88befde3 100644
--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -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);
diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css
index f61429151394..b687386f1944 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index 197e2018403d..ac64cb4ec3c0 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -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> */
diff --git a/core/themes/claro/css/components/card.pcss.css b/core/themes/claro/css/components/card.pcss.css
index 6a3b286dacb3..bb5440d6f42e 100644
--- a/core/themes/claro/css/components/card.pcss.css
+++ b/core/themes/claro/css/components/card.pcss.css
@@ -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);
diff --git a/core/themes/claro/css/components/content-header.pcss.css b/core/themes/claro/css/components/content-header.pcss.css
index f774132e993d..513f06faa12f 100644
--- a/core/themes/claro/css/components/content-header.pcss.css
+++ b/core/themes/claro/css/components/content-header.pcss.css
@@ -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);
}
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 26022ac6700a..cc0808bcd0b3 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 38fea6f4da80..d34e44d9075f 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index 2d7dd7659caa..3844591bfc84 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -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;
diff --git a/core/themes/claro/css/components/dialog.pcss.css b/core/themes/claro/css/components/dialog.pcss.css
index 2eac5980987e..b0be947e86bc 100644
--- a/core/themes/claro/css/components/dialog.pcss.css
+++ b/core/themes/claro/css/components/dialog.pcss.css
@@ -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 {
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 6d297e2f73a0..7556948a02dc 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index 2da904bd598c..9fd1754ecdd8 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -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) {
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index bb7fbcabb3f0..bdd1a97d143a 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -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;
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index d20f091b24c5..4f579e2990c2 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -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). */
diff --git a/core/themes/claro/css/components/fieldset.pcss.css b/core/themes/claro/css/components/fieldset.pcss.css
index ed46ca471953..87669f06171b 100644
--- a/core/themes/claro/css/components/fieldset.pcss.css
+++ b/core/themes/claro/css/components/fieldset.pcss.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index 1e83b71c8215..27bc76fb8acf 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -24,5 +24,5 @@
}
.file__size {
- color: #545560;
+ color: #55565b;
}
diff --git a/core/themes/claro/css/components/file.pcss.css b/core/themes/claro/css/components/file.pcss.css
index 5d713f11394b..0c277eb557f8 100644
--- a/core/themes/claro/css/components/file.pcss.css
+++ b/core/themes/claro/css/components/file.pcss.css
@@ -18,5 +18,5 @@
}
.file__size {
- color: var(--color-davysgray);
+ color: var(--color-gray-800);
}
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css
index 3f80d2210db3..44c46188de24 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -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;
}
/**
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index a01aaec55110..f31467fa0e0d 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -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;
}
/**
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index 3a4e2bcf2f1d..f6edac5e758c 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -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);
diff --git a/core/themes/claro/css/components/form--password-confirm.pcss.css b/core/themes/claro/css/components/form--password-confirm.pcss.css
index cf2cac451b1f..bdd5f816126b 100644
--- a/core/themes/claro/css/components/form--password-confirm.pcss.css
+++ b/core/themes/claro/css/components/form--password-confirm.pcss.css
@@ -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);
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index 9d1c43acc42f..2448b96675ff 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -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;
}
/**
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index 44655e73411d..827e7f745ca8 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -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. */
diff --git a/core/themes/claro/css/components/icon-link.css b/core/themes/claro/css/components/icon-link.css
index 0d1b84eade06..d7f5a1f3d892 100644
--- a/core/themes/claro/css/components/icon-link.css
+++ b/core/themes/claro/css/components/icon-link.css
@@ -19,7 +19,7 @@
.icon-link {
display: flex;
padding: 0;
- border: 1px solid #d4d4d8;
+ border: 1px solid #d3d4d9;
border-radius: 50%;
background-color: #fff;
}
diff --git a/core/themes/claro/css/components/icon-link.pcss.css b/core/themes/claro/css/components/icon-link.pcss.css
index cdbfc8e685dc..eb73ce4e7049 100644
--- a/core/themes/claro/css/components/icon-link.pcss.css
+++ b/core/themes/claro/css/components/icon-link.pcss.css
@@ -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 {
diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css
index 772b1e85849e..4d836c568e28 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -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,
diff --git a/core/themes/claro/css/components/image-preview.pcss.css b/core/themes/claro/css/components/image-preview.pcss.css
index 7ddbe1e8a204..2d65004aba09 100644
--- a/core/themes/claro/css/components/image-preview.pcss.css
+++ b/core/themes/claro/css/components/image-preview.pcss.css
@@ -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);
}
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index 29a06c2bbdaa..9db21952ce7c 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -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;
diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css
index 3fd0f09b5a4a..641275d53b27 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/pager.pcss.css b/core/themes/claro/css/components/pager.pcss.css
index 4e7b41a1b9d7..559cb3e24c91 100644
--- a/core/themes/claro/css/components/pager.pcss.css
+++ b/core/themes/claro/css/components/pager.pcss.css
@@ -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);
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index 38106bf38081..c11401e950b6 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index 7333d1779918..2fac89d5f69b 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -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;
diff --git a/core/themes/claro/css/components/shortcut.pcss.css b/core/themes/claro/css/components/shortcut.pcss.css
index 431d8b6ea596..bdc7ee6fb44b 100644
--- a/core/themes/claro/css/components/shortcut.pcss.css
+++ b/core/themes/claro/css/components/shortcut.pcss.css
@@ -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);
diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css
index c9c072afeaef..4a566870119d 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -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 {
diff --git a/core/themes/claro/css/components/system-admin--admin-list.pcss.css b/core/themes/claro/css/components/system-admin--admin-list.pcss.css
index 42f1d5c77205..fa5e225c6c64 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.pcss.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.pcss.css
@@ -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;
diff --git a/core/themes/claro/css/components/system-admin--modules.css b/core/themes/claro/css/components/system-admin--modules.css
index 9081d82917d4..622fe38b3dd8 100644
--- a/core/themes/claro/css/components/system-admin--modules.css
+++ b/core/themes/claro/css/components/system-admin--modules.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/system-admin--modules.pcss.css b/core/themes/claro/css/components/system-admin--modules.pcss.css
index e1f8aff08e7b..01c24cd65f17 100644
--- a/core/themes/claro/css/components/system-admin--modules.pcss.css
+++ b/core/themes/claro/css/components/system-admin--modules.pcss.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index d0cba306071a..4ca4e952cf0c 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -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 {
diff --git a/core/themes/claro/css/components/system-admin--panel.pcss.css b/core/themes/claro/css/components/system-admin--panel.pcss.css
index 79035daca264..947aff1c1f72 100644
--- a/core/themes/claro/css/components/system-admin--panel.pcss.css
+++ b/core/themes/claro/css/components/system-admin--panel.pcss.css
@@ -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);
}
diff --git a/core/themes/claro/css/components/system-admin--status-report.css b/core/themes/claro/css/components/system-admin--status-report.css
index b2aaf45b0bf2..6e16019bcc32 100644
--- a/core/themes/claro/css/components/system-admin--status-report.css
+++ b/core/themes/claro/css/components/system-admin--status-report.css
@@ -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 {
diff --git a/core/themes/claro/css/components/system-admin--status-report.pcss.css b/core/themes/claro/css/components/system-admin--status-report.pcss.css
index 5285aaa50239..f7317179eda5 100644
--- a/core/themes/claro/css/components/system-admin--status-report.pcss.css
+++ b/core/themes/claro/css/components/system-admin--status-report.pcss.css
@@ -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;
diff --git a/core/themes/claro/css/components/system-status-report.pcss.css b/core/themes/claro/css/components/system-status-report.pcss.css
index 46172528fea1..bb2099007304 100644
--- a/core/themes/claro/css/components/system-status-report.pcss.css
+++ b/core/themes/claro/css/components/system-status-report.pcss.css
@@ -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) {
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css
index 299640b97ee4..0759677fd5d6 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -63,7 +63,7 @@
.table-file-multiple-widget th {
height: 2rem;
- color: #545560;
+ color: #55565b;
background: #f3f4f9;
font-size: 0.889rem;
}
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.pcss.css b/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
index f6819bcd1b8a..e2dfb50803f6 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
@@ -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);
}
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index 197bbd6f6248..edc188d6eaff 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -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. */
diff --git a/core/themes/claro/css/components/tabledrag.pcss.css b/core/themes/claro/css/components/tabledrag.pcss.css
index 5522612d8def..7ffd6160316c 100644
--- a/core/themes/claro/css/components/tabledrag.pcss.css
+++ b/core/themes/claro/css/components/tabledrag.pcss.css
@@ -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 {
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index da617a597e55..7bdcf31352a6 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -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;
}
/**
diff --git a/core/themes/claro/css/components/tables.pcss.css b/core/themes/claro/css/components/tables.pcss.css
index 67af38b70274..5b70ab75c837 100644
--- a/core/themes/claro/css/components/tables.pcss.css
+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -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);
}
/**
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index 5730360361ff..189cf5bbebde 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -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;
diff --git a/core/themes/claro/css/components/tabs.pcss.css b/core/themes/claro/css/components/tabs.pcss.css
index cb814e833858..38248652d15c 100644
--- a/core/themes/claro/css/components/tabs.pcss.css
+++ b/core/themes/claro/css/components/tabs.pcss.css
@@ -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 {
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index a85e9483797b..44662185f08a 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -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;
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index 74d95f5c0e2c..08131f4f9c24 100644
--- a/core/themes/claro/css/components/vertical-tabs.pcss.css
+++ b/core/themes/claro/css/components/vertical-tabs.pcss.css
@@ -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;
}
diff --git a/core/themes/claro/css/components/views-ui.css b/core/themes/claro/css/components/views-ui.css
index 6fc7a1737587..d1cfe47438b7 100644
--- a/core/themes/claro/css/components/views-ui.css
+++ b/core/themes/claro/css/components/views-ui.css
@@ -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;
diff --git a/core/themes/claro/css/components/views-ui.pcss.css b/core/themes/claro/css/components/views-ui.pcss.css
index 9e8a723ab059..8f9a95b17949 100644
--- a/core/themes/claro/css/components/views-ui.pcss.css
+++ b/core/themes/claro/css/components/views-ui.pcss.css
@@ -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;
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index bb3dc4abe854..05fadc971b45 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -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 {
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index 656a64c81bc9..db62ffd5fee9 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -66,7 +66,7 @@
.filter-guidelines__item {
margin-top: 0.5em; /* (6 / 12) */
- color: #545560;
+ color: #55565b;
font-size: 0.75em; /* (12 / 16) */
}
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index 4896e0b360e9..e4602957de85 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -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,
diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css
index 1d7c97bb829f..9cffc0dc5824 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -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,
diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css
index bd9818ebead6..f48499892138 100644
--- a/core/themes/claro/css/theme/media-library.css
+++ b/core/themes/claro/css/theme/media-library.css
@@ -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;
diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css
index 8a88faf08a62..6db92daad1d8 100644
--- a/core/themes/claro/css/theme/media-library.pcss.css
+++ b/core/themes/claro/css/theme/media-library.pcss.css
@@ -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;
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css
index 76fd7b7de661..b68bb848f18c 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -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 {
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
index 3c0ff632501d..5c2215eb5fac 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
@@ -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 {
--
GitLab