From 6266ccd4778346c353c5cb07cfe3fce413ef2f29 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 31 Jan 2024 11:28:55 +1100 Subject: [PATCH 1/2] Creating --wp-admin-theme-color-lighter-* vars to replace rgba variations --- packages/base-styles/_mixins.scss | 8 ++++++++ .../src/components/block-content-overlay/content.scss | 2 +- packages/block-editor/src/components/list-view/style.scss | 6 +++--- packages/components/src/button/style.scss | 4 ++-- packages/dataviews/src/style.scss | 4 ++-- .../edit-site/src/components/add-new-template/style.scss | 6 +++--- .../components/global-styles/screen-revisions/style.scss | 4 ++-- 7 files changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index b988c0499f1fb8..7f5e7150b2970d 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -428,6 +428,14 @@ // Hexadecimal css vars do not work in the rgba function. --wp-admin-theme-color: #{$color-primary}; --wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)}; + + // Lighter shades. + --wp-admin-theme-color-lighter-120: #{lighten($color-primary, 62%)}; + --wp-admin-theme-color-lighter-120--rgb: #{hex-to-rgb(lighten($color-primary, 62%))}; + + --wp-admin-theme-color-lighter-125: #{lighten($color-primary, 63%)}; + --wp-admin-theme-color-lighter-125--rgb: #{hex-to-rgb(lighten($color-primary, 63%))}; + // Darker shades. --wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)}; --wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(darken($color-primary, 5%))}; diff --git a/packages/block-editor/src/components/block-content-overlay/content.scss b/packages/block-editor/src/components/block-content-overlay/content.scss index 41ed71e0b4c27c..fd665830266494 100644 --- a/packages/block-editor/src/components/block-content-overlay/content.scss +++ b/packages/block-editor/src/components/block-content-overlay/content.scss @@ -19,7 +19,7 @@ } &:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before { - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-125); box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset; } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 11cf1fafa0e14b..6b520f3f319492 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -110,7 +110,7 @@ border-bottom-right-radius: $radius-block-ui; } &.is-branch-selected:not(.is-selected):not(.is-synced-branch) { - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-125); } &.is-synced-branch.is-branch-selected { background: rgba(var(--wp-block-synced-color--rgb), 0.04); @@ -521,14 +521,14 @@ $block-navigation-max-indent: 8; } .block-editor-list-view-drop-indicator__line { - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-125); height: 36px; border-radius: 4px; overflow: hidden; } .block-editor-list-view-drop-indicator__line--darker { - background: rgba(var(--wp-admin-theme-color--rgb), 0.09); + background: var(--wp-admin-theme-color-lighter-120); } } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index aa7d9a5cc018ec..ad9b81b5a32ef8 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -165,13 +165,13 @@ &:hover:not(:disabled, [aria-disabled="true"]) { // TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724) /* stylelint-disable-next-line declaration-property-value-disallowed-list */ - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-125); } &:active:not(:disabled, [aria-disabled="true"]) { // TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724) /* stylelint-disable-next-line declaration-property-value-disallowed-list */ - background: rgba(var(--wp-admin-theme-color--rgb), 0.08); + background: var(--wp-admin-theme-color-lighter-120); } // Pull left if the tertiary button stands alone after a description, so as to vertically align with items above. diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index bbb9368d5a9598..bcaa8109131f77 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -147,11 +147,11 @@ } &.is-selected { - background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background-color: var(--wp-admin-theme-color-lighter-125); color: $gray-700; &:hover { - background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08); + background-color: var(--wp-admin-theme-color-lighter-120); } } } diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss index 4881745c92afae..1f02d7e0d6cbe0 100644 --- a/packages/edit-site/src/components/add-new-template/style.scss +++ b/packages/edit-site/src/components/add-new-template/style.scss @@ -58,7 +58,7 @@ } &:hover { - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-125); * { color: var(--wp-admin-theme-color); @@ -156,7 +156,7 @@ .edit-site-add-new-template__template-icon { padding: $grid-unit-10; - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-120); border-radius: 100%; max-height: $grid-unit-50; max-width: $grid-unit-50; @@ -186,7 +186,7 @@ &:hover { color: var(--wp-admin-theme-color-darker-10); - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-120); border-color: transparent; span { diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss index 06e47c8f1e5fda..7ebfeb1309fc52 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss +++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss @@ -15,7 +15,7 @@ flex-direction: column; &:hover { - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-125); .edit-site-global-styles-screen-revisions__date { color: var(--wp-admin-theme-color); } @@ -50,7 +50,7 @@ outline-offset: -2px; color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: var(--wp-admin-theme-color-lighter-120); .edit-site-global-styles-screen-revisions__revision-button { opacity: 1; From 1790cc361df69db082cacc5d900153ecad113d86 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 31 Jan 2024 11:46:17 +1100 Subject: [PATCH 2/2] Reducing lightness by 1% --- packages/base-styles/_mixins.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 7f5e7150b2970d..ad382df31fddb6 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -430,11 +430,11 @@ --wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)}; // Lighter shades. - --wp-admin-theme-color-lighter-120: #{lighten($color-primary, 62%)}; - --wp-admin-theme-color-lighter-120--rgb: #{hex-to-rgb(lighten($color-primary, 62%))}; + --wp-admin-theme-color-lighter-120: #{lighten($color-primary, 61%)}; + --wp-admin-theme-color-lighter-120--rgb: #{hex-to-rgb(lighten($color-primary, 61%))}; - --wp-admin-theme-color-lighter-125: #{lighten($color-primary, 63%)}; - --wp-admin-theme-color-lighter-125--rgb: #{hex-to-rgb(lighten($color-primary, 63%))}; + --wp-admin-theme-color-lighter-125: #{lighten($color-primary, 62%)}; + --wp-admin-theme-color-lighter-125--rgb: #{hex-to-rgb(lighten($color-primary, 62%))}; // Darker shades. --wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};