diff --git a/src/css/common/_badges.scss b/src/css/common/_badges.scss index b00ea2f6c..132cdc99b 100644 --- a/src/css/common/_badges.scss +++ b/src/css/common/_badges.scss @@ -1,6 +1,5 @@ @use 'sass:map'; @use 'sass:list'; -@use 'sass:color'; @use 'theme'; // Badges are wrapped in links that filter by type. The white ring separates the @@ -14,7 +13,7 @@ &:focus, &:focus-visible { outline: none; - box-shadow: 0 0 0 2px #fff, 0 0 0 4px theme.$accent; + box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cs-color-accent); } } @@ -50,7 +49,7 @@ } .network-shared { - color: theme.$accent; + color: var(--cs-color-accent); font-size: 22px; inline-size: 100%; cursor: help; @@ -100,7 +99,7 @@ a.badge.#{$name}-badge:hover, button.badge.#{$name}-badge:hover { color: $text-color; - background-color: color.adjust($background-color, $lightness: -5%); + background-color: color-mix(in srgb, $background-color 95%, #000 5%); } } @@ -158,7 +157,7 @@ .badge.pro-badge, .inverted-badges .badge.pro-badge, .nav-tab-inactive .badge.pro-badge { - color: theme.$accent; + color: var(--cs-color-accent); background-color: #eff5f9; border: 1px solid rgb(34 113 177 / 10%) !important; border-radius: 999px; diff --git a/src/css/common/_cards.scss b/src/css/common/_cards.scss index 055bea08a..282445459 100644 --- a/src/css/common/_cards.scss +++ b/src/css/common/_cards.scss @@ -10,7 +10,7 @@ .code-snippets-card { background: #fff; - border: 1px solid theme.$control-border; + border: 1px solid var(--cs-color-border); border-radius: 5px; margin: 0; display: flex; @@ -19,7 +19,7 @@ a { text-decoration: none; - color: theme.$accent; + color: var(--cs-color-accent); } .card-inner { @@ -33,7 +33,7 @@ gap: 8px; background: #f7f7f8; margin-block-start: auto; - border-block-start: 1px solid theme.$control-border; + border-block-start: 1px solid var(--cs-color-border); padding-inline: 24px; padding-block: 12px; border-end-start-radius: 5px; @@ -93,7 +93,7 @@ } &.is-selected { - border-color: theme.$accent; - box-shadow: 0 0 0 1px theme.$accent; + border-color: var(--cs-color-accent); + box-shadow: 0 0 0 1px var(--cs-color-accent); } } diff --git a/src/css/common/_checkbox.scss b/src/css/common/_checkbox.scss index 91d507b6f..6145877d2 100644 --- a/src/css/common/_checkbox.scss +++ b/src/css/common/_checkbox.scss @@ -11,7 +11,7 @@ margin: 0; box-sizing: border-box; background: #fff; - border: 1.5px solid theme.$control-border; + border: 1.5px solid var(--cs-color-border); border-radius: 5px; box-shadow: 0 2px 2px rgb(0 0 0 / 5%); cursor: pointer; @@ -25,8 +25,8 @@ } &:checked { - background: theme.$accent; - border-color: theme.$accent; + background: var(--cs-color-accent); + border-color: var(--cs-color-accent); &::before { content: ''; diff --git a/src/css/common/_kebab-menu.scss b/src/css/common/_kebab-menu.scss index 83f225eac..4affd00b3 100644 --- a/src/css/common/_kebab-menu.scss +++ b/src/css/common/_kebab-menu.scss @@ -17,8 +17,8 @@ box-sizing: border-box; padding: 0; background: #fff; - color: theme.$accent; - border: 1px solid theme.$accent; + color: var(--cs-color-accent); + border: 1px solid var(--cs-color-accent); border-radius: 5px; cursor: pointer; diff --git a/src/css/common/_page-header.scss b/src/css/common/_page-header.scss index 60d07f53d..8353fd653 100644 --- a/src/css/common/_page-header.scss +++ b/src/css/common/_page-header.scss @@ -25,7 +25,7 @@ } h2 { - color: theme.$control-text; + color: var(--cs-color-text); } } @@ -46,7 +46,7 @@ color: #646970; a { - color: theme.$accent; + color: var(--cs-color-accent); text-decoration: underline; } } diff --git a/src/css/common/_subnav.scss b/src/css/common/_subnav.scss index 014c7aa96..da2028ccb 100644 --- a/src/css/common/_subnav.scss +++ b/src/css/common/_subnav.scss @@ -137,18 +137,18 @@ &:hover, &:focus, &:active { - color: theme.$accent; + color: var(--cs-color-accent); } &.active-type { background: #f0f0f1; - color: theme.$accent; + color: var(--cs-color-accent); } // Suppress the persistent focus ring left behind after a mouse click; // keyboard navigation still gets a visible outline via :focus-visible. &:focus-visible { - outline: 2px solid theme.$accent; + outline: 2px solid var(--cs-color-accent); outline-offset: -2px; box-shadow: none; } @@ -197,7 +197,7 @@ } &.active-view { - background: theme.$accent; + background: var(--cs-color-accent); color: #fff; &:hover, diff --git a/src/css/common/_switch.scss b/src/css/common/_switch.scss index 32e5f2145..01996a124 100644 --- a/src/css/common/_switch.scss +++ b/src/css/common/_switch.scss @@ -19,7 +19,7 @@ input[type='checkbox'].switch { block-size: 19px; border-radius: 34px; text-align: start; - border: 1px solid theme.$accent; + border: 1px solid var(--cs-color-accent); box-sizing: border-box; &::before { @@ -28,7 +28,7 @@ input[type='checkbox'].switch { block-size: 13px; inline-size: 13px; display: inline-block; - background-color: theme.$accent; + background-color: var(--cs-color-accent); border-radius: 50%; margin: 2px; @@ -40,7 +40,7 @@ input[type='checkbox'].switch { .active-snippet .snippet-activation-switch, input[type='checkbox'].switch:checked { - background-color: theme.$accent; + background-color: var(--cs-color-accent); // Travel distance: pill width minus the knob, its margins and the borders. &::before { @@ -74,7 +74,7 @@ a.snippet-condition-count { .active-snippet & { font-weight: bold; - color: theme.$accent; + color: var(--cs-color-accent); } } @@ -96,11 +96,11 @@ a.snippet-condition-count { } &:hover { - border-inline-start-color: theme.$accent; + border-inline-start-color: var(--cs-color-accent); transition: border-inline-start-color 0.6s; &::before { - border-color: theme.$accent; + border-color: var(--cs-color-accent); transition: border-color 0.6s; } diff --git a/src/css/common/_theme.scss b/src/css/common/_theme.scss index f0009a661..f46ab9887 100644 --- a/src/css/common/_theme.scss +++ b/src/css/common/_theme.scss @@ -1,5 +1,6 @@ @use 'sass:color'; +// TODO: delete when we verify Pro doesn't use theme variables anymore. $accent: #2271b1; $primary: #03c7d2; $secondary: #d46f4d; @@ -8,9 +9,6 @@ $brand-discord: #5865f2; $brand-facebook: #3b5998; $cloud: #00bcd4; $cloud-update: #ff9800; - -// Plugin admin control tokens, applied to native form controls on all plugin -// screens regardless of WordPress version (see common/_wp-admin.scss). $accent-hover: #0a4b78; $control-border: #c3c4c7; $control-text: #2c3337; @@ -22,6 +20,13 @@ $control-radius: 5px; :root { --cs-color-accent: #2271b1; --cs-color-accent-hover: #0a4b78; + --cs-color-primary: #03c7d2; + --cs-color-secondary: #d46f4d; + --cs-color-outline: #9e9e9e; + --cs-color-brand-discord: #5865f2; + --cs-color-brand-facebook: #3b5998; + --cs-color-cloud: #00bcd4; + --cs-color-cloud-update: #ff9800; --cs-color-text: #2c3337; --cs-color-text-muted: #646970; --cs-color-surface: #fff; @@ -37,8 +42,8 @@ $control-radius: 5px; /* format: background-color [color] */ $badges: ( // php/html/cond darkened for WCAG AA — at least 4.5:1 against white 12px - // bold text; php reuses $accent, html/cond keep hue at reduced lightness. - php: $accent, + // bold text; php reuses the accent token, html/cond keep hue at reduced lightness. + php: #2271b1, html: #cd4510, css: #9b59b6, js: #f7d67a #1c1f20, @@ -49,7 +54,7 @@ $badges: ( bundles: #50575e, cloud_search: #d27c00, private: #f7e6be #a27813, - public: #dbebf7 $accent, + public: #dbebf7 #2271b1, success: #d3e8d1 #447340, failure: #fad7c1 #a24b16, info: #d2e6f4 #2b71a3, diff --git a/src/css/common/_toolbar.scss b/src/css/common/_toolbar.scss index d3a16967a..c6838a1ae 100644 --- a/src/css/common/_toolbar.scss +++ b/src/css/common/_toolbar.scss @@ -129,7 +129,7 @@ $wpcontent-inline-start-indent: 20px; } &.active-link, &:hover, &:focus, &:active { - color: theme.$accent; + color: var(--cs-color-accent); z-index: 1; } } @@ -195,13 +195,13 @@ $wpcontent-inline-start-indent: 20px; .code-snippets-toolbar-upper li a:hover, .code-snippets-toolbar-upper li a:focus, .code-snippets-toolbar-upper li a:active { - color: theme.$accent; + color: var(--cs-color-accent); } .code-snippets-toolbar-lower .pro-chip, .nav-tab .pro-chip, .snippet-type-link .pro-chip { - color: theme.$accent; + color: var(--cs-color-accent); background: #eff5f9; border: 1px solid rgb(34 113 177 / 10%); text-transform: uppercase; @@ -261,7 +261,7 @@ $wpcontent-inline-start-indent: 20px; margin: 0; padding: 8px; background: #fff; - border: 1px solid theme.$control-border; + border: 1px solid var(--cs-color-border); box-shadow: 0 3px 8px rgb(0 0 0 / 15%); } diff --git a/src/css/common/_upsell.scss b/src/css/common/_upsell.scss index afa61420c..844cbb53b 100644 --- a/src/css/common/_upsell.scss +++ b/src/css/common/_upsell.scss @@ -19,7 +19,7 @@ } .button-primary { - background-color: theme.$secondary; + background-color: var(--cs-color-secondary); border: 0; font-weight: bold; margin-inline-start: auto; diff --git a/src/css/common/list-table/_layout.scss b/src/css/common/list-table/_layout.scss index 713742696..4a66e02de 100644 --- a/src/css/common/list-table/_layout.scss +++ b/src/css/common/list-table/_layout.scss @@ -105,7 +105,7 @@ border: none; background: none; font: inherit; - color: theme.$accent; + color: var(--cs-color-accent); cursor: pointer; text-align: start; overflow: hidden; @@ -115,7 +115,7 @@ th.sortable .list-table-sort-button:focus-visible, th.sorted .list-table-sort-button:focus-visible { - outline: 2px solid theme.$accent; + outline: 2px solid var(--cs-color-accent); outline-offset: 2px; border-radius: 2px; } @@ -133,11 +133,11 @@ inset-inline-start: 0; a:not(.delete) { - color: theme.$accent; + color: var(--cs-color-accent); &:hover, &:focus { - color: theme.$accent-hover; + color: var(--cs-color-accent-hover); } } @@ -155,7 +155,7 @@ box-shadow: none; line-height: inherit; font-weight: 400; - color: theme.$accent; + color: var(--cs-color-accent); &:hover:not(:disabled), &:focus:not(:disabled) { @@ -166,7 +166,7 @@ &:hover:not(:disabled, .delete, .snippet-cloud-update), &:focus:not(:disabled, .delete, .snippet-cloud-update) { - color: theme.$accent-hover; + color: var(--cs-color-accent-hover); } &.delete { @@ -329,7 +329,7 @@ content: ''; inline-size: 1px; block-size: 13px; - background: theme.$control-border; + background: var(--cs-color-border); } } } diff --git a/src/css/common/list-table/_navigation.scss b/src/css/common/list-table/_navigation.scss index ffd19344e..03836f57a 100644 --- a/src/css/common/list-table/_navigation.scss +++ b/src/css/common/list-table/_navigation.scss @@ -16,11 +16,11 @@ row-action links) so links keep their original colour; inactive rows are handled by the muted link-colors mixin, and the trash button keeps its dark red from the `.delete` rules. */ .wp-list-table .active-snippet a { - color: theme.$accent; + color: var(--cs-color-accent); &:hover, &:focus { - color: theme.$accent-hover; + color: var(--cs-color-accent-hover); } } @@ -33,11 +33,11 @@ } .subsubsub a:not(.current) { - color: theme.$accent; + color: var(--cs-color-accent); &:hover, &:focus { - color: theme.$accent-hover; + color: var(--cs-color-accent-hover); } } diff --git a/src/css/common/list-table/_pagination.scss b/src/css/common/list-table/_pagination.scss index 137f791fb..6226cf01b 100644 --- a/src/css/common/list-table/_pagination.scss +++ b/src/css/common/list-table/_pagination.scss @@ -66,7 +66,7 @@ } .wrap .snippets-search-area input[type='search'] { - border-color: theme.$control-border; + border-color: var(--cs-color-border); } // Tablet widths: let the search area grow to fill the remainder of its row diff --git a/src/css/common/list-table/_responsive.scss b/src/css/common/list-table/_responsive.scss index 245159842..3d522bab3 100644 --- a/src/css/common/list-table/_responsive.scss +++ b/src/css/common/list-table/_responsive.scss @@ -90,7 +90,7 @@ } a.button { - color: theme.$accent; + color: var(--cs-color-accent); } .paging-input { diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss index a9b1bbcee..b40c42edf 100644 --- a/src/css/edit/_form.scss +++ b/src/css/edit/_form.scss @@ -4,7 +4,7 @@ $sidebar-width: 321px; $sidebar-gap: 30px; .snippet-form #titlediv #title { - border-color: theme.$control-border; + border-color: var(--cs-color-border); block-size: 45px } @@ -17,7 +17,7 @@ $sidebar-gap: 30px; // Target the control box only (:first-of-type). The open menu is a later // sibling div; matching it here would clamp and flex-row the option list. > div:first-of-type { - border-color: theme.$control-border; + border-color: var(--cs-color-border); min-block-size: 45px; block-size: 45px; max-block-size: 45px; @@ -69,7 +69,7 @@ $sidebar-gap: 30px; align-items: center; gap: 8px; inline-size: 100%; - border-color: theme.$control-border; + border-color: var(--cs-color-border); background: transparent; padding: 6px 12px; @@ -87,8 +87,8 @@ $sidebar-gap: 30px; &.no-condition:hover :not([disabled]) .cond-badge { color: #fff; - background: theme.$accent; - border-color: theme.$accent; + background: var(--cs-color-accent); + border-color: var(--cs-color-accent); } } diff --git a/src/css/edit/_sidebar.scss b/src/css/edit/_sidebar.scss index 3685abf51..cfd0a7d87 100644 --- a/src/css/edit/_sidebar.scss +++ b/src/css/edit/_sidebar.scss @@ -57,7 +57,7 @@ .box { background-color: #fff; - border: 1px solid theme.$control-border; + border: 1px solid var(--cs-color-border); border-radius: 4px; padding: 1.5em; display: flex; @@ -103,7 +103,7 @@ // the wp-admin layer at equal specificity, so it wins. Export/Download inherit the accent. .button { block-size: auto; - min-block-size: theme.$control-height; + min-block-size: var(--cs-control-height); padding-block: 0; padding-inline: 8px; font-weight: 400; @@ -172,7 +172,7 @@ } .beta-badge { - color: theme.$accent; + color: var(--cs-color-accent); border: 1px solid currentcolor; margin-inline-start: auto; } diff --git a/src/css/insights.scss b/src/css/insights.scss index e2542c5ea..3c90a647b 100644 --- a/src/css/insights.scss +++ b/src/css/insights.scss @@ -93,7 +93,7 @@ } &:focus-visible { - outline: 2px solid theme.$accent; + outline: 2px solid var(--cs-color-accent); outline-offset: -2px; } @@ -102,7 +102,7 @@ } &.active-view { - background: theme.$accent; + background: var(--cs-color-accent); color: #fff; &:hover, diff --git a/src/css/manage/_cloud-community-cards.scss b/src/css/manage/_cloud-community-cards.scss index 82ead781a..c88ca6ee5 100644 --- a/src/css/manage/_cloud-community-cards.scss +++ b/src/css/manage/_cloud-community-cards.scss @@ -36,7 +36,7 @@ border: none; background: none; font: inherit; - color: theme.$accent; + color: var(--cs-color-accent); cursor: pointer; text-align: start; overflow: hidden; @@ -48,7 +48,7 @@ } &:focus-visible { - outline: 2px solid theme.$accent; + outline: 2px solid var(--cs-color-accent); outline-offset: 2px; border-radius: 2px; } @@ -64,7 +64,7 @@ line-height: 1.5; .cloud-snippet-tags { - color: theme.$accent; + color: var(--cs-color-accent); } .snippet-card-modified { @@ -93,7 +93,7 @@ color: #646970; a { - color: theme.$accent; + color: var(--cs-color-accent); } } @@ -125,14 +125,14 @@ // Pro-only actions use the same quiet outline treatment in card and table views. .cloud-pro-button.button { background-color: transparent; - border-color: theme.$accent; - color: theme.$accent; + border-color: var(--cs-color-accent); + color: var(--cs-color-accent); &:hover, &:focus { background-color: #eff5f9; - border-color: theme.$accent; - color: theme.$accent; + border-color: var(--cs-color-accent); + color: var(--cs-color-accent); } } diff --git a/src/css/manage/_cloud-community.scss b/src/css/manage/_cloud-community.scss index 686c52088..ba03a48c8 100644 --- a/src/css/manage/_cloud-community.scss +++ b/src/css/manage/_cloud-community.scss @@ -150,7 +150,7 @@ $status-colors: ( margin: 0; font-size: inherit; font-weight: 600; - color: theme.$accent; + color: var(--cs-color-accent); text-decoration: none; cursor: pointer; text-align: start; diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss index 5a8e23f28..ea567d637 100644 --- a/src/css/manage/_snippets-table.scss +++ b/src/css/manage/_snippets-table.scss @@ -22,7 +22,7 @@ .wp-list-table .priority-column input { appearance: none; background: #fff; - border: 1px solid theme.$control-border; + border: 1px solid var(--cs-color-border); border-radius: 5px; box-shadow: none; box-sizing: border-box; @@ -137,7 +137,7 @@ .snippet-name { display: block; - color: theme.$accent; + color: var(--cs-color-accent); text-decoration: none; white-space: nowrap; overflow: hidden; @@ -169,7 +169,7 @@ } .snippet-card-tags a { - color: theme.$accent; + color: var(--cs-color-accent); text-decoration: none; } diff --git a/src/css/settings.scss b/src/css/settings.scss index c117ee2a1..0b86b79c5 100644 --- a/src/css/settings.scss +++ b/src/css/settings.scss @@ -170,7 +170,7 @@ body.js { background: #f0f6fc; padding: 2px 8px; border-radius: 3px; - border: 1px solid theme.$control-border; + border: 1px solid var(--cs-color-border); } #target_version { @@ -273,13 +273,13 @@ body.js { &:hover, &:focus, &:active { - color: theme.$accent; + color: var(--cs-color-accent); } &.active-type, &.active-type:hover, &.active-type:focus { - color: theme.$accent; + color: var(--cs-color-accent); background: #f0f0f1; } } diff --git a/src/css/welcome.scss b/src/css/welcome.scss index 591d3a6e8..c1bcb011c 100644 --- a/src/css/welcome.scss +++ b/src/css/welcome.scss @@ -1,4 +1,3 @@ -@use 'sass:color'; @use 'common/theme'; @use 'common/badges'; @use 'common/toolbar'; @@ -137,7 +136,7 @@ $breakpoint: 1060px; .item-category { color: white; - background: color.adjust(theme.$secondary, $lightness: -15%); + background: color-mix(in srgb, var(--cs-color-secondary) 85%, #000 15%); display: block; font-size: 12px; letter-spacing: 1px; @@ -212,7 +211,7 @@ $breakpoint: 1060px; inline-size: 0; padding: 15px; border: 6px solid #e7c0b3; - border-inline-end-color: theme.$secondary; + border-inline-end-color: var(--cs-color-secondary); border-radius: 22px; animation: loading-rotate 1s infinite linear; position: absolute;