Skip to content

chore: migrate from sass variables to css variables #453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ramiy merged 2 commits into from
Aug 21, 2026
Merged

chore: migrate from sass variables to css variables #453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5da5c11
chore: migrate from sass variables to css variables
ramiy Aug 21, 2026
04c814b
Merge branch 'core-beta' into sass-css-variables/core
ramiy Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/css/common/_badges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -50,7 +49,7 @@
}

.network-shared {
color: theme.$accent;
color: var(--cs-color-accent);
font-size: 22px;
inline-size: 100%;
cursor: help;
Expand Down Expand Up @@ -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%);
}
}

Expand Down Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions src/css/common/_cards.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -19,7 +19,7 @@

a {
text-decoration: none;
color: theme.$accent;
color: var(--cs-color-accent);
}

.card-inner {
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}
6 changes: 3 additions & 3 deletions src/css/common/_checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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: '';
Expand Down
4 changes: 2 additions & 2 deletions src/css/common/_kebab-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
4 changes: 2 additions & 2 deletions src/css/common/_page-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
}

h2 {
color: theme.$control-text;
color: var(--cs-color-text);
}
}

Expand All @@ -46,7 +46,7 @@
color: #646970;

a {
color: theme.$accent;
color: var(--cs-color-accent);
text-decoration: underline;
}
}
8 changes: 4 additions & 4 deletions src/css/common/_subnav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -197,7 +197,7 @@
}

&.active-view {
background: theme.$accent;
background: var(--cs-color-accent);
color: #fff;

&:hover,
Expand Down
12 changes: 6 additions & 6 deletions src/css/common/_switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;

Expand All @@ -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 {
Expand Down Expand Up @@ -74,7 +74,7 @@ a.snippet-condition-count {

.active-snippet & {
font-weight: bold;
color: theme.$accent;
color: var(--cs-color-accent);
}
}

Expand All @@ -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;
}

Expand Down
17 changes: 11 additions & 6 deletions src/css/common/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions src/css/common/_toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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%);
}

Expand Down
2 changes: 1 addition & 1 deletion src/css/common/_upsell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
14 changes: 7 additions & 7 deletions src/css/common/list-table/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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);
}
}

Expand All @@ -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) {
Expand All @@ -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 {
Expand Down Expand Up @@ -329,7 +329,7 @@
content: '';
inline-size: 1px;
block-size: 13px;
background: theme.$control-border;
background: var(--cs-color-border);
}
}
}
8 changes: 4 additions & 4 deletions src/css/common/list-table/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/css/common/list-table/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading
Loading