Skip to content

Commit 6d504b6

Browse files
authored
sass: Use @automattic/color-studio as a module (#43650)
Sass has deprecated `@import` in favor of `@use`. In this PR, we convert uses of the `@automattic/color-studio` package to `@use` and/or `@forward`.
1 parent ae7889e commit 6d504b6

File tree

43 files changed

+365
-313
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+365
-313
lines changed
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Significance: patch
2+
Type: changed
3+
Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`.
4+
5+

projects/js-packages/shared-extension-utils/src/components/upgrade-nudge/style.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
@import "@automattic/color-studio/dist/color-variables";
1+
@use "@automattic/color-studio/dist/color-variables" as studio;
22

33
.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper {
44
display: flex;
55
justify-content: space-between;
66
align-items: center;
77
font-size: 14px;
8-
background: $studio-black;
8+
background: studio.$studio-black;
99
padding: 0 20px;
1010
border-radius: 2px;
11-
box-shadow: 0 0 1px inset $studio-white; }
11+
box-shadow: 0 0 1px inset studio.$studio-white; }
1212

1313
.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .banner-title,
1414
.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .banner-description {
15-
color: $studio-white; }
15+
color: studio.$studio-white; }
1616

1717
.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .jetpack-upgrade-plan-banner__title,
1818
.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .jetpack-upgrade-plan-banner__description {
@@ -25,15 +25,15 @@
2525
height: 28px; }
2626

2727
.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary {
28-
background: $studio-pink-40;
29-
color: $studio-white; }
28+
background: studio.$studio-pink-40;
29+
color: studio.$studio-white; }
3030

3131
.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary:hover {
32-
background: $studio-pink-30; }
32+
background: studio.$studio-pink-30; }
3333

3434
.jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary.is-busy {
3535
background-size: 100px 100%;
36-
background-image: linear-gradient(-45deg, $studio-pink-40 28%, $studio-pink-60 28%, $studio-pink-60 72%, $studio-pink-40 72%); }
36+
background-image: linear-gradient(-45deg, studio.$studio-pink-40 28%, studio.$studio-pink-60 28%, studio.$studio-pink-60 72%, studio.$studio-pink-40 72%); }
3737

3838
.jetpack-upgrade-plan-banner.block-editor-block-list__block {
3939
margin-top: 0;
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Significance: patch
2+
Type: changed
3+
Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`.
4+
5+

projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// This file contains overrides to _admin.scss necessary to match Calypso color schemes
33

44
// Make wpadminbar colors differ from submenu colors
5+
@use "@automattic/color-studio/dist/color-variables" as studio;
56

67
.admin-color-aquatic,
78
.admin-color-classic-blue,
@@ -101,5 +102,5 @@
101102

102103
.admin-color-contrast.folded #adminmenu .toplevel_page_site-notices .wp-menu-image,
103104
.admin-color-classic-bright.folded #adminmenu .toplevel_page_site-notices .wp-menu-image {
104-
background-color: $studio-gray-80 !important;
105+
background-color: studio.$studio-gray-80 !important;
105106
}
Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
// make use of color studio variables for consistency across products
2-
@import '@automattic/color-studio/dist/color-variables';
2+
@forward "@automattic/color-studio/dist/color-variables";
3+
@use "@automattic/color-studio/dist/color-variables" as studio;
34
@import '../deprecated-color-variables';
45

56
// core variables (core _variables.scss)
67
$base-color: $deprecated-studio-blue-80; // Calypso --color-masterbar-background
78
$icon-color: $deprecated-studio-blue-5; // Calypso --color-sidebar-gridicon-fill
8-
$highlight-color: $studio-celadon-50; // Calypso --color-accent
9-
$notification-color: $studio-celadon-30; // Calypso --color-masterbar-unread-dot-background
9+
$highlight-color: studio.$studio-celadon-50; // Calypso --color-accent
10+
$notification-color: studio.$studio-celadon-30; // Calypso --color-masterbar-unread-dot-background
1011

1112
// global (core _variables.scss)
12-
$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
13+
$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop
1314

1415
// admin menu & admin-bar (core _variables.scss)
15-
$menu-text: $studio-white; // Calypso --color-sidebar-text
16+
$menu-text: studio.$studio-white; // Calypso --color-sidebar-text
1617
$menu-background: $deprecated-studio-blue-60; // Calypso --color-sidebar-background
17-
$menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text
18-
$menu-highlight-icon: $studio-white;
18+
$menu-highlight-text: studio.$studio-white; // Calypso --color-sidebar-menu-hover-text
19+
$menu-highlight-icon: studio.$studio-white;
1920
$menu-highlight-background: $deprecated-studio-blue-50; // Calypso --color-sidebar-menu-hover-background
2021
$menu-current-text: $deprecated-studio-blue-90; // Calypso --color-sidebar-menu-selected-text
2122
$menu-current-icon: $menu-current-text;
22-
$menu-current-background: $studio-yellow-20; // Calypso --color-sidebar-menu-selected-background
23-
$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text
23+
$menu-current-background: studio.$studio-yellow-20; // Calypso --color-sidebar-menu-selected-background
24+
$menu-submenu-text: studio.$studio-gray-10; // Calypso --color-sidebar-submenu-text
2425
$menu-submenu-background: $deprecated-studio-blue-90; // Calypso --color-sidebar-submenu-background
25-
$menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text
26-
$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text
26+
$menu-submenu-focus-text: studio.$studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text
27+
$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-text
2728
$adminbar-avatar-frame: $deprecated-studio-blue-80;
2829

2930
// masterbar overrides
@@ -39,11 +40,11 @@ $nav-unification-sidebar-text-alternative: $deprecated-studio-blue-5; // Calypso
3940
$color-primary: $deprecated-studio-blue-50; // Calypso --color-primary
4041
$color-primary-dark: $deprecated-studio-blue-70; // Calypso --color-primary-dark
4142
$color-primary-light: $deprecated-studio-blue-30; // Calypso --color-primary-light
42-
$color-surface: $studio-white; // Calypso --color-surface
43+
$color-surface: studio.$studio-white; // Calypso --color-surface
4344

4445
// Calypso Sidebar Nudges
45-
$menu-nudge-background: $studio-white;
46-
$menu-nudge-text-color: $studio-black;
46+
$menu-nudge-background: studio.$studio-white;
47+
$menu-nudge-text-color: studio.$studio-black;
4748
$menu-nudge-cta-background: $highlight-color;
48-
$menu-nudge-cta-color: $studio-white;
49-
$menu-nudge-cta-background-hover: $studio-celadon-60;
49+
$menu-nudge-cta-color: studio.$studio-white;
50+
$menu-nudge-cta-background-hover: studio.$studio-celadon-60;
Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
// make use of color studio variables for consistency across products
2-
@import '@automattic/color-studio/dist/color-variables';
2+
@forward "@automattic/color-studio/dist/color-variables";
3+
@use "@automattic/color-studio/dist/color-variables" as studio;
34

45
$highlight-color: #096484;
56

67
// Sidebar Nudges
7-
$menu-nudge-background: $studio-white;
8-
$menu-nudge-text-color: $studio-black;
8+
$menu-nudge-background: studio.$studio-white;
9+
$menu-nudge-text-color: studio.$studio-black;
910
$menu-nudge-cta-background: $highlight-color;
10-
$menu-nudge-cta-color: $studio-white;
11-
$menu-nudge-cta-background-hover: $studio-blue-60;
11+
$menu-nudge-cta-color: studio.$studio-white;
12+
$menu-nudge-cta-background-hover: studio.$studio-blue-60;
Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
// make use of color studio variables for consistency across products
2-
@import '@automattic/color-studio/dist/color-variables';
2+
@forward "@automattic/color-studio/dist/color-variables";
3+
@use "@automattic/color-studio/dist/color-variables" as studio;
34
@import '../deprecated-color-variables';
45

56
// core variables (core _variables.scss)
67
$base-color: $deprecated-studio-blue-60; // Calypso --color-masterbar-background
7-
$icon-color: $studio-gray-50; // Calypso --color-sidebar-gridicon-fill
8-
$highlight-color: $studio-orange-50; // Calypso --color-accent
9-
$notification-color: $studio-orange-30; // Calypso --color-masterbar-unread-dot-background
8+
$icon-color: studio.$studio-gray-50; // Calypso --color-sidebar-gridicon-fill
9+
$highlight-color: studio.$studio-orange-50; // Calypso --color-accent
10+
$notification-color: studio.$studio-orange-30; // Calypso --color-masterbar-unread-dot-background
1011

1112
// global (core _variables.scss)
12-
$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
13+
$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop
1314

1415
// admin menu & admin-bar (core _variables.scss)
15-
$menu-text: $studio-gray-80; // Calypso --color-sidebar-text
16-
$menu-background: $studio-gray-5; // Calypso --color-sidebar-background
16+
$menu-text: studio.$studio-gray-80; // Calypso --color-sidebar-text
17+
$menu-background: studio.$studio-gray-5; // Calypso --color-sidebar-background
1718
$menu-highlight-text: $deprecated-studio-blue-50; // Calypso --color-sidebar-menu-hover-text
1819
$menu-highlight-icon: $deprecated-studio-blue-50;
19-
$menu-highlight-background: $studio-white; // Calypso --color-sidebar-menu-hover-background
20-
$menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text
20+
$menu-highlight-background: studio.$studio-white; // Calypso --color-sidebar-menu-hover-background
21+
$menu-current-text: studio.$studio-white; // Calypso --color-sidebar-menu-selected-text
2122
$menu-current-icon: $menu-current-text;
22-
$menu-current-background: $studio-gray-60; // Calypso --color-sidebar-menu-selected-background
23-
$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text
23+
$menu-current-background: studio.$studio-gray-60; // Calypso --color-sidebar-menu-selected-background
24+
$menu-submenu-text: studio.$studio-white; // Calypso --color-sidebar-submenu-text
2425
$menu-submenu-background: $deprecated-studio-blue-60; // Calypso --color-sidebar-submenu-background
25-
$menu-submenu-focus-text: $studio-orange-30; // Calypso --color-sidebar-submenu-hover-text
26-
$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text
26+
$menu-submenu-focus-text: studio.$studio-orange-30; // Calypso --color-sidebar-submenu-hover-text
27+
$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-text
2728
$adminbar-avatar-frame: $deprecated-studio-blue-70;
2829

2930
// masterbar overrides
@@ -34,18 +35,18 @@ $masterbar-submenu-background: $deprecated-studio-blue-70;
3435
$masterbar-submenu-background-alt: $deprecated-studio-blue-80;
3536

3637
// nav unification overrides
37-
$nav-unification-sidebar-border: $studio-gray-10; // Calypso --color-sidebar-border
38-
$nav-unification-sidebar-text-alternative: $studio-gray-50; // Calypso --color-sidebar-text-alternative
38+
$nav-unification-sidebar-border: studio.$studio-gray-10; // Calypso --color-sidebar-border
39+
$nav-unification-sidebar-text-alternative: studio.$studio-gray-50; // Calypso --color-sidebar-text-alternative
3940

4041
// Calypso color variables used in e.g. inline help
4142
$color-primary: $deprecated-studio-blue-50; // Calypso --color-primary
4243
$color-primary-dark: $deprecated-studio-blue-70; // Calypso --color-primary-dark
4344
$color-primary-light: $deprecated-studio-blue-30; // Calypso --color-primary-light
44-
$color-surface: $studio-white; // Calypso --color-surface
45+
$color-surface: studio.$studio-white; // Calypso --color-surface
4546

4647
// Sidebar Nudges
47-
$menu-nudge-background: $studio-white;
48-
$menu-nudge-text-color: $studio-black;
48+
$menu-nudge-background: studio.$studio-white;
49+
$menu-nudge-text-color: studio.$studio-black;
4950
$menu-nudge-cta-background: $highlight-color;
50-
$menu-nudge-cta-color: $studio-white;
51-
$menu-nudge-cta-background-hover: $studio-orange-60;
51+
$menu-nudge-cta-color: studio.$studio-white;
52+
$menu-nudge-cta-background-hover: studio.$studio-orange-60;
Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
// make use of color studio variables for consistency across products
2-
@import '@automattic/color-studio/dist/color-variables';
2+
@forward "@automattic/color-studio/dist/color-variables";
3+
@use "@automattic/color-studio/dist/color-variables" as studio;
34
@import '../deprecated-color-variables';
45

56
// core variables (core _variables.scss)
67
$base-color: $deprecated-studio-blue-60; // Calypso --color-masterbar-background
7-
$icon-color: $studio-gray-50; // Calypso --color-sidebar-gridicon-fill
8-
$highlight-color: $studio-pink-50; // Calypso --color-accent
9-
$notification-color: $studio-pink-20; // Calypso --color-masterbar-unread-dot-background
8+
$icon-color: studio.$studio-gray-50; // Calypso --color-sidebar-gridicon-fill
9+
$highlight-color: studio.$studio-pink-50; // Calypso --color-accent
10+
$notification-color: studio.$studio-pink-20; // Calypso --color-masterbar-unread-dot-background
1011

1112
// global (core _variables.scss)
12-
$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
13+
$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop
1314

1415
// admin menu & admin-bar (core _variables.scss)
15-
$menu-text: $studio-gray-80; // Calypso --color-sidebar-text
16-
$menu-background: $studio-white; // Calypso --color-sidebar-background
17-
$menu-highlight-text: $studio-gray-90; // Calypso --color-sidebar-menu-hover-text
18-
$menu-highlight-icon: $studio-gray-90;
19-
$menu-highlight-background: $studio-gray-5; // Calypso --color-sidebar-menu-hover-background
16+
$menu-text: studio.$studio-gray-80; // Calypso --color-sidebar-text
17+
$menu-background: studio.$studio-white; // Calypso --color-sidebar-background
18+
$menu-highlight-text: studio.$studio-gray-90; // Calypso --color-sidebar-menu-hover-text
19+
$menu-highlight-icon: studio.$studio-gray-90;
20+
$menu-highlight-background: studio.$studio-gray-5; // Calypso --color-sidebar-menu-hover-background
2021
$menu-current-text: $deprecated-studio-blue-70; // Calypso --color-sidebar-menu-selected-text
2122
$menu-current-icon: $menu-current-text;
2223
$menu-current-background: $deprecated-studio-blue-5; // Calypso --color-sidebar-menu-selected-background
2324
$menu-submenu-text: $deprecated-studio-blue-70; // Calypso --color-sidebar-submenu-text
2425
$menu-submenu-background: $deprecated-studio-blue-0; // Calypso --color-sidebar-submenu-background
25-
$menu-submenu-focus-text: $studio-gray-90; // Calypso --color-sidebar-submenu-hover-text
26-
$menu-submenu-current-text: $studio-pink-50; // Calypso --color-sidebar-submenu-selected-text
26+
$menu-submenu-focus-text: studio.$studio-gray-90; // Calypso --color-sidebar-submenu-hover-text
27+
$menu-submenu-current-text: studio.$studio-pink-50; // Calypso --color-sidebar-submenu-selected-text
2728
$adminbar-avatar-frame: $deprecated-studio-blue-70;
2829

2930
// masterbar overrides
@@ -34,18 +35,18 @@ $masterbar-submenu-background: $deprecated-studio-blue-70;
3435
$masterbar-submenu-background-alt: $deprecated-studio-blue-80;
3536

3637
// nav unification overrides
37-
$nav-unification-sidebar-border: $studio-gray-5; // Calypso --color-sidebar-border
38-
$nav-unification-sidebar-text-alternative: $studio-gray-50; // Calypso --color-sidebar-text-alternative
38+
$nav-unification-sidebar-border: studio.$studio-gray-5; // Calypso --color-sidebar-border
39+
$nav-unification-sidebar-text-alternative: studio.$studio-gray-50; // Calypso --color-sidebar-text-alternative
3940

4041
// Calypso color variables used in e.g. inline help
4142
$color-primary: $deprecated-studio-blue-50; // Calypso --color-primary
4243
$color-primary-dark: $deprecated-studio-blue-70; // Calypso --color-primary-dark
4344
$color-primary-light: $deprecated-studio-blue-30; // Calypso --color-primary-light
44-
$color-surface: $studio-white; // Calypso --color-surface
45+
$color-surface: studio.$studio-white; // Calypso --color-surface
4546

4647
// Sidebar Nudges
47-
$menu-nudge-background: $studio-gray-80;
48-
$menu-nudge-text-color: $studio-white;
48+
$menu-nudge-background: studio.$studio-gray-80;
49+
$menu-nudge-text-color: studio.$studio-white;
4950
$menu-nudge-cta-background: $highlight-color;
50-
$menu-nudge-cta-color: $studio-white;
51-
$menu-nudge-cta-background-hover: $studio-pink-60;
51+
$menu-nudge-cta-color: studio.$studio-white;
52+
$menu-nudge-cta-background-hover: studio.$studio-pink-60;
Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
// make use of color studio variables for consistency across products
2-
@import '@automattic/color-studio/dist/color-variables';
2+
@forward "@automattic/color-studio/dist/color-variables";
3+
@use "@automattic/color-studio/dist/color-variables" as studio;
34

45
// core variables (core _variables.scss)
56
$base-color: #101517; // Calypso --color-masterbar-background
67
$icon-color: #a2aab2; // Calypso --color-sidebar-gridicon-fill
7-
$highlight-color: $studio-pink-50;// Calypso --color-accent
8+
$highlight-color: studio.$studio-pink-50;// Calypso --color-accent
89
$notification-color: $highlight-color;
910

1011
// global (core _variables.scss)
11-
$body-background: $studio-gray-0; // Calypso --color-surface-backdrop
12+
$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop
1213

1314
// admin menu & admin-bar (core _variables.scss)
1415
$menu-text: #eee; // Calypso --color-sidebar-text
@@ -22,7 +23,7 @@ $menu-current-background: #0073aa; // Calypso --color-sidebar-menu-selected-back
2223
$menu-submenu-text: #b4b9be; // Calypso --color-sidebar-submenu-text
2324
$menu-submenu-background: #333; // Calypso --color-sidebar-submenu-background
2425
$menu-submenu-focus-text: #00b9eb; // Calypso --color-sidebar-submenu-hover-text
25-
$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text
26+
$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-selected-text
2627
$adminbar-avatar-frame: #333;
2728

2829
// masterbar overrides
@@ -35,14 +36,14 @@ $nav-unification-sidebar-border: #333; // Calypso --color-sidebar-border
3536
$nav-unification-sidebar-text-alternative: #a2aab2; // Calypso --color-sidebar-text-alternative
3637

3738
// Calypso color variables used in e.g. inline help
38-
$color-primary: $studio-gray-90; // Calypso --color-primary
39-
$color-primary-dark: $studio-gray-70; // Calypso --color-primary-dark
40-
$color-primary-light: $studio-gray-30; // Calypso --color-primary-light
41-
$color-surface: $studio-white; // Calypso --color-surface
39+
$color-primary: studio.$studio-gray-90; // Calypso --color-primary
40+
$color-primary-dark: studio.$studio-gray-70; // Calypso --color-primary-dark
41+
$color-primary-light: studio.$studio-gray-30; // Calypso --color-primary-light
42+
$color-surface: studio.$studio-white; // Calypso --color-surface
4243

4344
// Sidebar Nudges
44-
$menu-nudge-background: $studio-white;
45-
$menu-nudge-text-color: $studio-black;
45+
$menu-nudge-background: studio.$studio-white;
46+
$menu-nudge-text-color: studio.$studio-black;
4647
$menu-nudge-cta-background: $highlight-color;
47-
$menu-nudge-cta-color: $studio-white;
48-
$menu-nudge-cta-background-hover: $studio-pink-60;
48+
$menu-nudge-cta-color: studio.$studio-white;
49+
$menu-nudge-cta-background-hover: studio.$studio-pink-60;
Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
// make use of color studio variables for consistency across products
2-
@import '@automattic/color-studio/dist/color-variables';
2+
@forward "@automattic/color-studio/dist/color-variables";
3+
@use "@automattic/color-studio/dist/color-variables" as studio;
34

45
$highlight-color: #c7a589;
56

67
// Sidebar Nudges
7-
$menu-nudge-background: $studio-white;
8-
$menu-nudge-text-color: $studio-black;
8+
$menu-nudge-background: studio.$studio-white;
9+
$menu-nudge-text-color: studio.$studio-black;
910
$menu-nudge-cta-background: $highlight-color;
10-
$menu-nudge-cta-color: $studio-white;
11-
$menu-nudge-cta-background-hover: $studio-orange-60;
11+
$menu-nudge-cta-color: studio.$studio-white;
12+
$menu-nudge-cta-background-hover: studio.$studio-orange-60;

0 commit comments

Comments
 (0)