diff --git a/projects/js-packages/shared-extension-utils/changelog/fix-sass-import-color-studio b/projects/js-packages/shared-extension-utils/changelog/fix-sass-import-color-studio new file mode 100644 index 0000000000000..d32fc6f93e7fb --- /dev/null +++ b/projects/js-packages/shared-extension-utils/changelog/fix-sass-import-color-studio @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`. + + diff --git a/projects/js-packages/shared-extension-utils/src/components/upgrade-nudge/style.scss b/projects/js-packages/shared-extension-utils/src/components/upgrade-nudge/style.scss index 1d250088ce2cd..b8611a94a9989 100644 --- a/projects/js-packages/shared-extension-utils/src/components/upgrade-nudge/style.scss +++ b/projects/js-packages/shared-extension-utils/src/components/upgrade-nudge/style.scss @@ -1,18 +1,18 @@ -@import "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper { display: flex; justify-content: space-between; align-items: center; font-size: 14px; - background: $studio-black; + background: studio.$studio-black; padding: 0 20px; border-radius: 2px; - box-shadow: 0 0 1px inset $studio-white; } + box-shadow: 0 0 1px inset studio.$studio-white; } .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .banner-title, .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .banner-description { - color: $studio-white; } + color: studio.$studio-white; } .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .jetpack-upgrade-plan-banner__title, .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .jetpack-upgrade-plan-banner__description { @@ -25,15 +25,15 @@ height: 28px; } .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary { - background: $studio-pink-40; - color: $studio-white; } + background: studio.$studio-pink-40; + color: studio.$studio-white; } .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary:hover { - background: $studio-pink-30; } + background: studio.$studio-pink-30; } .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper .components-button.is-primary.is-busy { background-size: 100px 100%; - background-image: linear-gradient(-45deg, $studio-pink-40 28%, $studio-pink-60 28%, $studio-pink-60 72%, $studio-pink-40 72%); } + 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%); } .jetpack-upgrade-plan-banner.block-editor-block-list__block { margin-top: 0; diff --git a/projects/packages/masterbar/changelog/fix-sass-import-color-studio b/projects/packages/masterbar/changelog/fix-sass-import-color-studio new file mode 100644 index 0000000000000..d32fc6f93e7fb --- /dev/null +++ b/projects/packages/masterbar/changelog/fix-sass-import-color-studio @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`. + + diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss index f1194709fa065..fe4d4c82db290 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/_overrides.scss @@ -2,6 +2,7 @@ // This file contains overrides to _admin.scss necessary to match Calypso color schemes // Make wpadminbar colors differ from submenu colors +@use "@automattic/color-studio/dist/color-variables" as studio; .admin-color-aquatic, .admin-color-classic-blue, @@ -101,5 +102,5 @@ .admin-color-contrast.folded #adminmenu .toplevel_page_site-notices .wp-menu-image, .admin-color-classic-bright.folded #adminmenu .toplevel_page_site-notices .wp-menu-image { - background-color: $studio-gray-80 !important; + background-color: studio.$studio-gray-80 !important; } diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss index c55de78230cf6..e5d85358ab191 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/aquatic/_variables.scss @@ -1,29 +1,30 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; @import '../deprecated-color-variables'; // core variables (core _variables.scss) $base-color: $deprecated-studio-blue-80; // Calypso --color-masterbar-background $icon-color: $deprecated-studio-blue-5; // Calypso --color-sidebar-gridicon-fill -$highlight-color: $studio-celadon-50; // Calypso --color-accent -$notification-color: $studio-celadon-30; // Calypso --color-masterbar-unread-dot-background +$highlight-color: studio.$studio-celadon-50; // Calypso --color-accent +$notification-color: studio.$studio-celadon-30; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: $studio-gray-0; // Calypso --color-surface-backdrop +$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: $studio-white; // Calypso --color-sidebar-text +$menu-text: studio.$studio-white; // Calypso --color-sidebar-text $menu-background: $deprecated-studio-blue-60; // Calypso --color-sidebar-background -$menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $studio-white; +$menu-highlight-text: studio.$studio-white; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: studio.$studio-white; $menu-highlight-background: $deprecated-studio-blue-50; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $deprecated-studio-blue-90; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; -$menu-current-background: $studio-yellow-20; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-current-background: studio.$studio-yellow-20; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: studio.$studio-gray-10; // Calypso --color-sidebar-submenu-text $menu-submenu-background: $deprecated-studio-blue-90; // Calypso --color-sidebar-submenu-background -$menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text +$menu-submenu-focus-text: studio.$studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-text $adminbar-avatar-frame: $deprecated-studio-blue-80; // masterbar overrides @@ -39,11 +40,11 @@ $nav-unification-sidebar-text-alternative: $deprecated-studio-blue-5; // Calypso $color-primary: $deprecated-studio-blue-50; // Calypso --color-primary $color-primary-dark: $deprecated-studio-blue-70; // Calypso --color-primary-dark $color-primary-light: $deprecated-studio-blue-30; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-surface: studio.$studio-white; // Calypso --color-surface // Calypso Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-celadon-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-celadon-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/blue/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/blue/_variables.scss index 4edbd89f0bf2e..aab80d2cb8996 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/blue/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/blue/_variables.scss @@ -1,11 +1,12 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; $highlight-color: #096484; // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-blue-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-blue-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss index 6ded156721e24..9256cc400d5bd 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-blue/_variables.scss @@ -1,29 +1,30 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; @import '../deprecated-color-variables'; // core variables (core _variables.scss) $base-color: $deprecated-studio-blue-60; // Calypso --color-masterbar-background -$icon-color: $studio-gray-50; // Calypso --color-sidebar-gridicon-fill -$highlight-color: $studio-orange-50; // Calypso --color-accent -$notification-color: $studio-orange-30; // Calypso --color-masterbar-unread-dot-background +$icon-color: studio.$studio-gray-50; // Calypso --color-sidebar-gridicon-fill +$highlight-color: studio.$studio-orange-50; // Calypso --color-accent +$notification-color: studio.$studio-orange-30; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: $studio-gray-0; // Calypso --color-surface-backdrop +$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: $studio-gray-80; // Calypso --color-sidebar-text -$menu-background: $studio-gray-5; // Calypso --color-sidebar-background +$menu-text: studio.$studio-gray-80; // Calypso --color-sidebar-text +$menu-background: studio.$studio-gray-5; // Calypso --color-sidebar-background $menu-highlight-text: $deprecated-studio-blue-50; // Calypso --color-sidebar-menu-hover-text $menu-highlight-icon: $deprecated-studio-blue-50; -$menu-highlight-background: $studio-white; // Calypso --color-sidebar-menu-hover-background -$menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text +$menu-highlight-background: studio.$studio-white; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: studio.$studio-white; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; -$menu-current-background: $studio-gray-60; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text +$menu-current-background: studio.$studio-gray-60; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: studio.$studio-white; // Calypso --color-sidebar-submenu-text $menu-submenu-background: $deprecated-studio-blue-60; // Calypso --color-sidebar-submenu-background -$menu-submenu-focus-text: $studio-orange-30; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text +$menu-submenu-focus-text: studio.$studio-orange-30; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-text $adminbar-avatar-frame: $deprecated-studio-blue-70; // masterbar overrides @@ -34,18 +35,18 @@ $masterbar-submenu-background: $deprecated-studio-blue-70; $masterbar-submenu-background-alt: $deprecated-studio-blue-80; // nav unification overrides -$nav-unification-sidebar-border: $studio-gray-10; // Calypso --color-sidebar-border -$nav-unification-sidebar-text-alternative: $studio-gray-50; // Calypso --color-sidebar-text-alternative +$nav-unification-sidebar-border: studio.$studio-gray-10; // Calypso --color-sidebar-border +$nav-unification-sidebar-text-alternative: studio.$studio-gray-50; // Calypso --color-sidebar-text-alternative // Calypso color variables used in e.g. inline help $color-primary: $deprecated-studio-blue-50; // Calypso --color-primary $color-primary-dark: $deprecated-studio-blue-70; // Calypso --color-primary-dark $color-primary-light: $deprecated-studio-blue-30; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-surface: studio.$studio-white; // Calypso --color-surface // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-orange-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-orange-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss index 6a1b5ade4116f..c306956323908 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-bright/_variables.scss @@ -1,29 +1,30 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; @import '../deprecated-color-variables'; // core variables (core _variables.scss) $base-color: $deprecated-studio-blue-60; // Calypso --color-masterbar-background -$icon-color: $studio-gray-50; // Calypso --color-sidebar-gridicon-fill -$highlight-color: $studio-pink-50; // Calypso --color-accent -$notification-color: $studio-pink-20; // Calypso --color-masterbar-unread-dot-background +$icon-color: studio.$studio-gray-50; // Calypso --color-sidebar-gridicon-fill +$highlight-color: studio.$studio-pink-50; // Calypso --color-accent +$notification-color: studio.$studio-pink-20; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: $studio-gray-0; // Calypso --color-surface-backdrop +$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: $studio-gray-80; // Calypso --color-sidebar-text -$menu-background: $studio-white; // Calypso --color-sidebar-background -$menu-highlight-text: $studio-gray-90; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $studio-gray-90; -$menu-highlight-background: $studio-gray-5; // Calypso --color-sidebar-menu-hover-background +$menu-text: studio.$studio-gray-80; // Calypso --color-sidebar-text +$menu-background: studio.$studio-white; // Calypso --color-sidebar-background +$menu-highlight-text: studio.$studio-gray-90; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: studio.$studio-gray-90; +$menu-highlight-background: studio.$studio-gray-5; // Calypso --color-sidebar-menu-hover-background $menu-current-text: $deprecated-studio-blue-70; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: $deprecated-studio-blue-5; // Calypso --color-sidebar-menu-selected-background $menu-submenu-text: $deprecated-studio-blue-70; // Calypso --color-sidebar-submenu-text $menu-submenu-background: $deprecated-studio-blue-0; // Calypso --color-sidebar-submenu-background -$menu-submenu-focus-text: $studio-gray-90; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-pink-50; // Calypso --color-sidebar-submenu-selected-text +$menu-submenu-focus-text: studio.$studio-gray-90; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: studio.$studio-pink-50; // Calypso --color-sidebar-submenu-selected-text $adminbar-avatar-frame: $deprecated-studio-blue-70; // masterbar overrides @@ -34,18 +35,18 @@ $masterbar-submenu-background: $deprecated-studio-blue-70; $masterbar-submenu-background-alt: $deprecated-studio-blue-80; // nav unification overrides -$nav-unification-sidebar-border: $studio-gray-5; // Calypso --color-sidebar-border -$nav-unification-sidebar-text-alternative: $studio-gray-50; // Calypso --color-sidebar-text-alternative +$nav-unification-sidebar-border: studio.$studio-gray-5; // Calypso --color-sidebar-border +$nav-unification-sidebar-text-alternative: studio.$studio-gray-50; // Calypso --color-sidebar-text-alternative // Calypso color variables used in e.g. inline help $color-primary: $deprecated-studio-blue-50; // Calypso --color-primary $color-primary-dark: $deprecated-studio-blue-70; // Calypso --color-primary-dark $color-primary-light: $deprecated-studio-blue-30; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-surface: studio.$studio-white; // Calypso --color-surface // Sidebar Nudges -$menu-nudge-background: $studio-gray-80; -$menu-nudge-text-color: $studio-white; +$menu-nudge-background: studio.$studio-gray-80; +$menu-nudge-text-color: studio.$studio-white; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-pink-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-pink-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss index 79ff4f70e7475..ae81c9553c802 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/classic-dark/_variables.scss @@ -1,14 +1,15 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; // core variables (core _variables.scss) $base-color: #101517; // Calypso --color-masterbar-background $icon-color: #a2aab2; // Calypso --color-sidebar-gridicon-fill -$highlight-color: $studio-pink-50;// Calypso --color-accent +$highlight-color: studio.$studio-pink-50;// Calypso --color-accent $notification-color: $highlight-color; // global (core _variables.scss) -$body-background: $studio-gray-0; // Calypso --color-surface-backdrop +$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) $menu-text: #eee; // Calypso --color-sidebar-text @@ -22,7 +23,7 @@ $menu-current-background: #0073aa; // Calypso --color-sidebar-menu-selected-back $menu-submenu-text: #b4b9be; // Calypso --color-sidebar-submenu-text $menu-submenu-background: #333; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: #00b9eb; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text +$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-selected-text $adminbar-avatar-frame: #333; // masterbar overrides @@ -35,14 +36,14 @@ $nav-unification-sidebar-border: #333; // Calypso --color-sidebar-border $nav-unification-sidebar-text-alternative: #a2aab2; // Calypso --color-sidebar-text-alternative // Calypso color variables used in e.g. inline help -$color-primary: $studio-gray-90; // Calypso --color-primary -$color-primary-dark: $studio-gray-70; // Calypso --color-primary-dark -$color-primary-light: $studio-gray-30; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-primary: studio.$studio-gray-90; // Calypso --color-primary +$color-primary-dark: studio.$studio-gray-70; // Calypso --color-primary-dark +$color-primary-light: studio.$studio-gray-30; // Calypso --color-primary-light +$color-surface: studio.$studio-white; // Calypso --color-surface // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-pink-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-pink-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/_variables.scss index 1c05b9511cd8c..54ccd2c4b8c15 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/coffee/_variables.scss @@ -1,11 +1,12 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; $highlight-color: #c7a589; // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-orange-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-orange-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss index 60921d0091e2e..8f1863d3f2248 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/contrast/_variables.scss @@ -1,49 +1,50 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; @import '../deprecated-color-variables'; // core variables (core _variables.scss) -$base-color: $studio-gray-100; // Calypso --color-masterbar-background -$icon-color: $studio-gray-90; // Calypso --color-sidebar-gridicon-fill +$base-color: studio.$studio-gray-100; // Calypso --color-masterbar-background +$icon-color: studio.$studio-gray-90; // Calypso --color-sidebar-gridicon-fill $highlight-color: $deprecated-studio-blue-70;// Calypso --color-accent -$notification-color: $studio-yellow-20; // Calypso --color-masterbar-unread-dot-background +$notification-color: studio.$studio-yellow-20; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: $studio-white; // Calypso --color-surface-backdrop +$body-background: studio.$studio-white; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: $studio-gray-90; // Calypso --color-sidebar-text -$menu-background: $studio-white; // Calypso --color-sidebar-background -$menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $studio-white; -$menu-highlight-background: $studio-gray-60; // Calypso --color-sidebar-menu-hover-background -$menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text +$menu-text: studio.$studio-gray-90; // Calypso --color-sidebar-text +$menu-background: studio.$studio-white; // Calypso --color-sidebar-background +$menu-highlight-text: studio.$studio-white; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: studio.$studio-white; +$menu-highlight-background: studio.$studio-gray-60; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: studio.$studio-white; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; -$menu-current-background: $studio-gray-100; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-gray-90; // Calypso --color-sidebar-submenu-background -$menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text -$adminbar-avatar-frame: $studio-gray-90; +$menu-current-background: studio.$studio-gray-100; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: studio.$studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: studio.$studio-gray-90; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: studio.$studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: studio.$studio-gray-90; // masterbar overrides $masterbar-background: $base-color; // Calypso --color-masterbar-background -$masterbar-highlight-background: $studio-gray-90; // Calypso --color-masterbar-item-hover-background -$masterbar-active-background: $studio-gray-60; // Calypso --color-masterbar-item-active-background +$masterbar-highlight-background: studio.$studio-gray-90; // Calypso --color-masterbar-item-hover-background +$masterbar-active-background: studio.$studio-gray-60; // Calypso --color-masterbar-item-active-background // nav unification overrides -$nav-unification-sidebar-border: $studio-gray-5; // Calypso --color-sidebar-border -$nav-unification-sidebar-text-alternative: $studio-gray-90; // Calypso --color-sidebar-text-alternative +$nav-unification-sidebar-border: studio.$studio-gray-5; // Calypso --color-sidebar-border +$nav-unification-sidebar-text-alternative: studio.$studio-gray-90; // Calypso --color-sidebar-text-alternative // Calypso color variables used in e.g. inline help -$color-primary: $studio-gray-80; // Calypso --color-primary -$color-primary-dark: $studio-gray-100; // Calypso --color-primary-dark -$color-primary-light: $studio-gray-60; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-primary: studio.$studio-gray-80; // Calypso --color-primary +$color-primary-dark: studio.$studio-gray-100; // Calypso --color-primary-dark +$color-primary-light: studio.$studio-gray-60; // Calypso --color-primary-light +$color-surface: studio.$studio-white; // Calypso --color-surface // Sidebar Nudges -$menu-nudge-background: $studio-gray-80; -$menu-nudge-text-color: $studio-white; +$menu-nudge-background: studio.$studio-gray-80; +$menu-nudge-text-color: studio.$studio-white; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; +$menu-nudge-cta-color: studio.$studio-white; $menu-nudge-cta-background-hover: $deprecated-studio-blue-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/_variables.scss index d861c91cc12d9..3794bbf191d60 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/ectoplasm/_variables.scss @@ -1,11 +1,12 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; $highlight-color: #a3b745; // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; +$menu-nudge-cta-color: studio.$studio-white; $menu-nudge-cta-background-hover: rgb(100, 125, 0); diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/_variables.scss index d9cf677081f9b..8ce999a90f5da 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/fresh/_variables.scss @@ -1,9 +1,10 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: #2271b1; -$menu-nudge-cta-color: $studio-white; +$menu-nudge-cta-color: studio.$studio-white; $menu-nudge-cta-background-hover: #135e96; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/light/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/light/_variables.scss index db5ec758c3fef..f896bc085bc85 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/light/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/light/_variables.scss @@ -1,11 +1,12 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; $color-primary: #04a4cc; // Calypso --color-primary // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $color-primary; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-blue-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-blue-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/_variables.scss index c7dbd1ef6629a..aeea1fe9068ab 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/midnight/_variables.scss @@ -1,11 +1,12 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; $highlight-color: #e14d43; // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; +$menu-nudge-cta-color: studio.$studio-white; $menu-nudge-cta-background-hover: #00417d; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/modern/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/modern/_variables.scss index bd0d323a784ce..c0608acdf65d6 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/modern/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/modern/_variables.scss @@ -1,11 +1,12 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; $highlight-color: #3858e9; // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; +$menu-nudge-cta-color: studio.$studio-white; $menu-nudge-cta-background-hover: #2145e6; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss index 5baba9e048c83..f5ff1252040ba 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/nightfall/_variables.scss @@ -1,5 +1,6 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; @import '../deprecated-color-variables'; // core variables (core _variables.scss) @@ -9,21 +10,21 @@ $highlight-color: $deprecated-studio-blue-50;// Calypso --color-accent $notification-color: $deprecated-studio-blue-30; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: $studio-gray-0; // Calypso --color-surface-backdrop +$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) $menu-text: $deprecated-studio-blue-5; // Calypso --color-sidebar-text $menu-background: $deprecated-studio-blue-80; // Calypso --color-sidebar-background -$menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $studio-white; +$menu-highlight-text: studio.$studio-white; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: studio.$studio-white; $menu-highlight-background: $deprecated-studio-blue-70; // Calypso --color-sidebar-menu-hover-background -$menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text +$menu-current-text: studio.$studio-white; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; $menu-current-background: $deprecated-studio-blue-100; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-gray-10; // Calypso --color-sidebar-submenu-text +$menu-submenu-text: studio.$studio-gray-10; // Calypso --color-sidebar-submenu-text $menu-submenu-background: $deprecated-studio-blue-90; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: $deprecated-studio-blue-20; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-text +$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-text $adminbar-avatar-frame: $deprecated-studio-blue-100; // masterbar overrides @@ -36,14 +37,14 @@ $nav-unification-sidebar-border: $deprecated-studio-blue-90; // Calypso --color- $nav-unification-sidebar-text-alternative: $deprecated-studio-blue-20; // Calypso --color-sidebar-text-alternative // Calypso color variables used in e.g. inline help -$color-primary: $studio-gray-90; // Calypso --color-primary -$color-primary-dark: $studio-gray-70; // Calypso --color-primary-dark -$color-primary-light: $studio-gray-30; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-primary: studio.$studio-gray-90; // Calypso --color-primary +$color-primary-dark: studio.$studio-gray-70; // Calypso --color-primary-dark +$color-primary-light: studio.$studio-gray-30; // Calypso --color-primary-light +$color-surface: studio.$studio-white; // Calypso --color-surface // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; +$menu-nudge-cta-color: studio.$studio-white; $menu-nudge-cta-background-hover: $deprecated-studio-blue-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/_variables.scss index 686cf7c6a0cce..6cbbf10edcd70 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/ocean/_variables.scss @@ -1,11 +1,12 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; $highlight-color: #9ebaa0; // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-celadon-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-celadon-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss index 87413b6eeff44..44195210c32fa 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/powder-snow/_variables.scss @@ -1,51 +1,52 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; @import '../deprecated-color-variables'; // core variables (core _variables.scss) -$base-color: $studio-gray-100; // Calypso --color-masterbar-background -$icon-color: $studio-gray-50; // Calypso --color-sidebar-gridicon-fill +$base-color: studio.$studio-gray-100; // Calypso --color-masterbar-background +$icon-color: studio.$studio-gray-50; // Calypso --color-sidebar-gridicon-fill $highlight-color: $deprecated-studio-blue-50; // Calypso --color-accent $notification-color: $deprecated-studio-blue-30; // Calypso --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: $studio-gray-0; // Calypso --color-surface-backdrop +$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: $studio-gray-80; // Calypso --color-sidebar-text -$menu-background: $studio-gray-5; // Calypso --color-sidebar-background +$menu-text: studio.$studio-gray-80; // Calypso --color-sidebar-text +$menu-background: studio.$studio-gray-5; // Calypso --color-sidebar-background $menu-highlight-text: $deprecated-studio-blue-60; // Calypso --color-sidebar-menu-hover-text $menu-highlight-icon: $deprecated-studio-blue-60; -$menu-highlight-background: $studio-white; // Calypso --color-sidebar-menu-hover-background -$menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text +$menu-highlight-background: studio.$studio-white; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: studio.$studio-white; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; -$menu-current-background: $studio-gray-60; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-gray-80; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-gray-10; // Calypso --color-sidebar-submenu-background +$menu-current-background: studio.$studio-gray-60; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: studio.$studio-gray-80; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: studio.$studio-gray-10; // Calypso --color-sidebar-submenu-background $menu-submenu-focus-text: $deprecated-studio-blue-60; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-gray-80; // Calypso --color-sidebar-submenu-selected-text -$adminbar-avatar-frame: $studio-gray-90; +$menu-submenu-current-text: studio.$studio-gray-80; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: studio.$studio-gray-90; // masterbar overrides -$masterbar-background: $studio-gray-100; // Calypso --color-masterbar-background -$masterbar-highlight-background: $studio-gray-80; // Calypso --color-masterbar-item-hover-background -$masterbar-active-background: $studio-gray-70; // Calypso --color-masterbar-item-active-background -$masterbar-submenu-background: $studio-gray-80; -$masterbar-submenu-background-alt: $studio-gray-70; +$masterbar-background: studio.$studio-gray-100; // Calypso --color-masterbar-background +$masterbar-highlight-background: studio.$studio-gray-80; // Calypso --color-masterbar-item-hover-background +$masterbar-active-background: studio.$studio-gray-70; // Calypso --color-masterbar-item-active-background +$masterbar-submenu-background: studio.$studio-gray-80; +$masterbar-submenu-background-alt: studio.$studio-gray-70; // nav unification overrides -$nav-unification-sidebar-border: $studio-gray-10; // Calypso --color-sidebar-border -$nav-unification-sidebar-text-alternative: $studio-gray-60; // Calypso --color-sidebar-text-alternative +$nav-unification-sidebar-border: studio.$studio-gray-10; // Calypso --color-sidebar-border +$nav-unification-sidebar-text-alternative: studio.$studio-gray-60; // Calypso --color-sidebar-text-alternative // Calypso color variables used in e.g. inline help -$color-primary: $studio-gray-90; // Calypso --color-primary -$color-primary-dark: $studio-gray-70; // Calypso --color-primary-dark -$color-primary-light: $studio-gray-30; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-primary: studio.$studio-gray-90; // Calypso --color-primary +$color-primary-dark: studio.$studio-gray-70; // Calypso --color-primary-dark +$color-primary-light: studio.$studio-gray-30; // Calypso --color-primary-light +$color-surface: studio.$studio-white; // Calypso --color-surface // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; +$menu-nudge-cta-color: studio.$studio-white; $menu-nudge-cta-background-hover: $deprecated-studio-blue-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss index 88f16a53c5951..2ea5e15938a4c 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sakura/_variables.scss @@ -1,52 +1,53 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; @import '../deprecated-color-variables'; // core variables (core _variables.scss) -$base-color: $studio-celadon-70; // Calypso --color-masterbar-background -$icon-color: $studio-pink-70; // Calypso --color-sidebar-gridicon-fill +$base-color: studio.$studio-celadon-70; // Calypso --color-masterbar-background +$icon-color: studio.$studio-pink-70; // Calypso --color-sidebar-gridicon-fill $highlight-color: $deprecated-studio-blue-50; // Calypso --color-accent -$notification-color: $studio-pink-20; // Calypso Classic Bright (!) --color-masterbar-unread-dot-background +$notification-color: studio.$studio-pink-20; // Calypso Classic Bright (!) --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: $studio-gray-0; // Calypso --color-surface-backdrop +$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: $studio-pink-80; // Calypso --color-sidebar-text -$menu-background: $studio-pink-5; // Calypso --color-sidebar-background -$menu-highlight-text: $studio-pink-90; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $studio-pink-90; -$menu-highlight-background: $studio-pink-10; // Calypso --color-sidebar-menu-hover-background -$menu-current-text: $studio-white; // Calypso --color-sidebar-menu-selected-text -$menu-current-icon: $studio-white; +$menu-text: studio.$studio-pink-80; // Calypso --color-sidebar-text +$menu-background: studio.$studio-pink-5; // Calypso --color-sidebar-background +$menu-highlight-text: studio.$studio-pink-90; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: studio.$studio-pink-90; +$menu-highlight-background: studio.$studio-pink-10; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: studio.$studio-white; // Calypso --color-sidebar-menu-selected-text +$menu-current-icon: studio.$studio-white; $menu-current-background: $deprecated-studio-blue-50; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-pink-0; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-pink-90; // Calypso --color-sidebar-submenu-background -$menu-submenu-background-alt: $studio-pink-70; // Calypso --color-sidebar-submenu-background-alt +$menu-submenu-text: studio.$studio-pink-0; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: studio.$studio-pink-90; // Calypso --color-sidebar-submenu-background +$menu-submenu-background-alt: studio.$studio-pink-70; // Calypso --color-sidebar-submenu-background-alt $menu-submenu-focus-text: $deprecated-studio-blue-20; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-pink-0; // Calypso --color-sidebar-submenu-selected-text -$adminbar-avatar-frame: $studio-celadon-80; +$menu-submenu-current-text: studio.$studio-pink-0; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: studio.$studio-celadon-80; // masterbar overrides -$masterbar-background: $studio-celadon-70; // Calypso --color-masterbar-background -$masterbar-highlight-background: $studio-celadon-80; // Calypso --color-masterbar-item-hover-background -$masterbar-active-background: $studio-celadon-90; // Calypso --color-masterbar-item-active-background -$masterbar-submenu-background: $studio-celadon-80; -$masterbar-submenu-background-alt: $studio-celadon-70; +$masterbar-background: studio.$studio-celadon-70; // Calypso --color-masterbar-background +$masterbar-highlight-background: studio.$studio-celadon-80; // Calypso --color-masterbar-item-hover-background +$masterbar-active-background: studio.$studio-celadon-90; // Calypso --color-masterbar-item-active-background +$masterbar-submenu-background: studio.$studio-celadon-80; +$masterbar-submenu-background-alt: studio.$studio-celadon-70; // nav unification overrides -$nav-unification-sidebar-border: $studio-pink-10; // Calypso --color-sidebar-border -$nav-unification-sidebar-text-alternative: $studio-pink-60; // Calypso --color-sidebar-text-alternative +$nav-unification-sidebar-border: studio.$studio-pink-10; // Calypso --color-sidebar-border +$nav-unification-sidebar-text-alternative: studio.$studio-pink-60; // Calypso --color-sidebar-text-alternative // Calypso color variables used in e.g. inline help -$color-primary: $studio-celadon-50; // Calypso --color-primary -$color-primary-dark: $studio-celadon-70; // Calypso --color-primary-dark -$color-primary-light: $studio-celadon-30; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-primary: studio.$studio-celadon-50; // Calypso --color-primary +$color-primary-dark: studio.$studio-celadon-70; // Calypso --color-primary-dark +$color-primary-light: studio.$studio-celadon-30; // Calypso --color-primary-light +$color-surface: studio.$studio-white; // Calypso --color-surface // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; +$menu-nudge-cta-color: studio.$studio-white; $menu-nudge-cta-background-hover: $deprecated-studio-blue-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/_variables.scss index 0bae9d0b40a00..56301734e6acf 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunrise/_variables.scss @@ -1,11 +1,12 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; $highlight-color: #dd823b; // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-orange-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-orange-60; diff --git a/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss index 67a8eb7e4542c..340c56c9f7dbc 100644 --- a/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss +++ b/projects/packages/masterbar/src/admin-color-schemes/colors/sunset/_variables.scss @@ -1,50 +1,51 @@ // make use of color studio variables for consistency across products -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; // core variables (core _variables.scss) -$base-color: $studio-red-80; // Calypso --color-masterbar-background -$icon-color: $studio-red-5; // Calypso --color-sidebar-gridicon-fill -$highlight-color: $studio-orange-50; // Calypso --color-accent -$notification-color: $studio-pink-20; // Calypso Classic Bright (!) --color-masterbar-unread-dot-background +$base-color: studio.$studio-red-80; // Calypso --color-masterbar-background +$icon-color: studio.$studio-red-5; // Calypso --color-sidebar-gridicon-fill +$highlight-color: studio.$studio-orange-50; // Calypso --color-accent +$notification-color: studio.$studio-pink-20; // Calypso Classic Bright (!) --color-masterbar-unread-dot-background // global (core _variables.scss) -$body-background: $studio-gray-0; // Calypso --color-surface-backdrop +$body-background: studio.$studio-gray-0; // Calypso --color-surface-backdrop // admin menu & admin-bar (core _variables.scss) -$menu-text: $studio-white; // Calypso --color-sidebar-text -$menu-background: $studio-red-70; // Calypso --color-sidebar-background -$menu-highlight-text: $studio-white; // Calypso --color-sidebar-menu-hover-text -$menu-highlight-icon: $studio-white; -$menu-highlight-background: $studio-red-80; // Calypso --color-sidebar-menu-hover-background -$menu-current-text: $studio-yellow-80; // Calypso --color-sidebar-menu-selected-text +$menu-text: studio.$studio-white; // Calypso --color-sidebar-text +$menu-background: studio.$studio-red-70; // Calypso --color-sidebar-background +$menu-highlight-text: studio.$studio-white; // Calypso --color-sidebar-menu-hover-text +$menu-highlight-icon: studio.$studio-white; +$menu-highlight-background: studio.$studio-red-80; // Calypso --color-sidebar-menu-hover-background +$menu-current-text: studio.$studio-yellow-80; // Calypso --color-sidebar-menu-selected-text $menu-current-icon: $menu-current-text; -$menu-current-background: $studio-yellow-20; // Calypso --color-sidebar-menu-selected-background -$menu-submenu-text: $studio-white; // Calypso --color-sidebar-submenu-text -$menu-submenu-background: $studio-red-60; // Calypso --color-sidebar-submenu-background -$menu-submenu-focus-text: $studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text -$menu-submenu-current-text: $studio-white; // Calypso --color-sidebar-submenu-selected-text -$adminbar-avatar-frame: $studio-red-80; +$menu-current-background: studio.$studio-yellow-20; // Calypso --color-sidebar-menu-selected-background +$menu-submenu-text: studio.$studio-white; // Calypso --color-sidebar-submenu-text +$menu-submenu-background: studio.$studio-red-60; // Calypso --color-sidebar-submenu-background +$menu-submenu-focus-text: studio.$studio-yellow-20; // Calypso --color-sidebar-submenu-hover-text +$menu-submenu-current-text: studio.$studio-white; // Calypso --color-sidebar-submenu-selected-text +$adminbar-avatar-frame: studio.$studio-red-80; // masterbar overrides -$masterbar-background: $studio-red-80; // Calypso --color-masterbar-background -$masterbar-highlight-background: $studio-red-90; // Calypso --color-masterbar-item-hover-background -$masterbar-active-background: $studio-red-100; // Calypso --color-masterbar-item-active-background -$masterbar-submenu-background: $studio-red-90; -$masterbar-submenu-background-alt: $studio-red-80; +$masterbar-background: studio.$studio-red-80; // Calypso --color-masterbar-background +$masterbar-highlight-background: studio.$studio-red-90; // Calypso --color-masterbar-item-hover-background +$masterbar-active-background: studio.$studio-red-100; // Calypso --color-masterbar-item-active-background +$masterbar-submenu-background: studio.$studio-red-90; +$masterbar-submenu-background-alt: studio.$studio-red-80; // nav unification overrides -$nav-unification-sidebar-border: $studio-red-80; // Calypso --color-sidebar-border -$nav-unification-sidebar-text-alternative: $studio-red-10; // Calypso --color-sidebar-text-alternative +$nav-unification-sidebar-border: studio.$studio-red-80; // Calypso --color-sidebar-border +$nav-unification-sidebar-text-alternative: studio.$studio-red-10; // Calypso --color-sidebar-text-alternative // Calypso color variables used in e.g. inline help -$color-primary: $studio-red-50; // Calypso --color-primary -$color-primary-dark: $studio-red-70; // Calypso --color-primary-dark -$color-primary-light: $studio-red-30; // Calypso --color-primary-light -$color-surface: $studio-white; // Calypso --color-surface +$color-primary: studio.$studio-red-50; // Calypso --color-primary +$color-primary-dark: studio.$studio-red-70; // Calypso --color-primary-dark +$color-primary-light: studio.$studio-red-30; // Calypso --color-primary-light +$color-surface: studio.$studio-white; // Calypso --color-surface // Sidebar Nudges -$menu-nudge-background: $studio-white; -$menu-nudge-text-color: $studio-black; +$menu-nudge-background: studio.$studio-white; +$menu-nudge-text-color: studio.$studio-black; $menu-nudge-cta-background: $highlight-color; -$menu-nudge-cta-color: $studio-white; -$menu-nudge-cta-background-hover: $studio-orange-60; +$menu-nudge-cta-color: studio.$studio-white; +$menu-nudge-cta-background-hover: studio.$studio-orange-60; diff --git a/projects/packages/search/changelog/fix-sass-import-color-studio b/projects/packages/search/changelog/fix-sass-import-color-studio new file mode 100644 index 0000000000000..d32fc6f93e7fb --- /dev/null +++ b/projects/packages/search/changelog/fix-sass-import-color-studio @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`. + + diff --git a/projects/packages/search/src/dashboard/components/record-meter/notice-box.scss b/projects/packages/search/src/dashboard/components/record-meter/notice-box.scss index df8448f0ad7a2..e0b6df646b723 100644 --- a/projects/packages/search/src/dashboard/components/record-meter/notice-box.scss +++ b/projects/packages/search/src/dashboard/components/record-meter/notice-box.scss @@ -1,10 +1,10 @@ // Variables -@import '@automattic/color-studio/dist/color-variables'; +@use "@automattic/color-studio/dist/color-variables" as studio; .jp-search-notice-box { background-color: #fff; color: #000; - border: $studio-gray-5 0.5px solid; + border: studio.$studio-gray-5 0.5px solid; border-radius: 5px; padding: 24px; } @@ -33,7 +33,7 @@ } .jp-search-notice-box__important { - border: $studio-red-50 0.5px solid; + border: studio.$studio-red-50 0.5px solid; } .jp-search-notice-box__important .dops-notice__content .dops-notice__header { @@ -71,7 +71,7 @@ .jp-search-notice-box__important .dops-notice__icon-wrapper, .jp-search-notice-box__important, .jp-search-notice-box__important .dops-notice__header { - color: $studio-red-50; + color: studio.$studio-red-50; } .jp-search-notice-box > .dops-notice__icon-wrapper > svg { diff --git a/projects/packages/search/src/dashboard/components/record-meter/style.scss b/projects/packages/search/src/dashboard/components/record-meter/style.scss index c4e2a72fb263e..b07e25c279b49 100644 --- a/projects/packages/search/src/dashboard/components/record-meter/style.scss +++ b/projects/packages/search/src/dashboard/components/record-meter/style.scss @@ -1,5 +1,5 @@ // Variables -@import '@automattic/color-studio/dist/color-variables'; +@use "@automattic/color-studio/dist/color-variables" as studio; .jp-search-bar-chart__container { max-height: 40px; @@ -45,7 +45,7 @@ ul.jp-search-chart-legend { } .jp-search-record-meter { - border-bottom: $studio-gray-5 1px solid; + border-bottom: studio.$studio-gray-5 1px solid; padding: 64px 0; } diff --git a/projects/packages/search/src/dashboard/scss/_variables.scss b/projects/packages/search/src/dashboard/scss/_variables.scss index e5723a33fd0a5..249958b32e44c 100644 --- a/projects/packages/search/src/dashboard/scss/_variables.scss +++ b/projects/packages/search/src/dashboard/scss/_variables.scss @@ -1,5 +1,5 @@ // Variables -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; /********* RNA styles *********/ // Copied from plugins/backup/src/js/components diff --git a/projects/packages/search/src/instant-search/lib/styles/_variables.scss b/projects/packages/search/src/instant-search/lib/styles/_variables.scss index 19111e1fc99a4..a9720c08f8cac 100644 --- a/projects/packages/search/src/instant-search/lib/styles/_variables.scss +++ b/projects/packages/search/src/instant-search/lib/styles/_variables.scss @@ -1,5 +1,6 @@ // Variables -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; // Breakpoints $break-sm: 576px; @@ -33,24 +34,24 @@ $results-margin-lg: 56px; $sidebar-width: 320px; // Colors -$color-text: $studio-wordpress-blue-100; -$color-text-light: $studio-gray-70; -$color-text-lighter: $studio-gray-50; -$color-link: $studio-blue-100; -$color-link-alt: $studio-blue-70; -$color-layout-borders: $studio-wordpress-blue-0; +$color-text: studio.$studio-wordpress-blue-100; +$color-text-light: studio.$studio-gray-70; +$color-text-lighter: studio.$studio-gray-50; +$color-link: studio.$studio-blue-100; +$color-link-alt: studio.$studio-blue-70; +$color-layout-borders: studio.$studio-wordpress-blue-0; $color-mark-background-default: #ffc; -$color-modal-background: $studio-white; -$color-modal-backdrop-background: rgba( $studio-gray-90, 0.7 ); +$color-modal-background: studio.$studio-white; +$color-modal-backdrop-background: rgba( studio.$studio-gray-90, 0.7 ); -$color-dark-text: $studio-wordpress-blue-0; -$color-dark-text-light: $studio-gray-20; -$color-dark-text-lighter: $studio-gray-30; -$color-dark-link: $studio-gray-0; -$color-dark-link-alt: $studio-blue-40; -$color-dark-layout-borders: $studio-gray-70; -$color-dark-modal-background: $studio-black; -$color-dark-modal-backdrop-background: rgba( $studio-gray-90, 0.7 ); +$color-dark-text: studio.$studio-wordpress-blue-0; +$color-dark-text-light: studio.$studio-gray-20; +$color-dark-text-lighter: studio.$studio-gray-30; +$color-dark-link: studio.$studio-gray-0; +$color-dark-link-alt: studio.$studio-blue-40; +$color-dark-layout-borders: studio.$studio-gray-70; +$color-dark-modal-background: studio.$studio-black; +$color-dark-modal-backdrop-background: rgba( studio.$studio-gray-90, 0.7 ); -$color-checkmark-background: $studio-green-5; -$color-checkmark: $studio-green-80; +$color-checkmark-background: studio.$studio-green-5; +$color-checkmark: studio.$studio-green-80; diff --git a/projects/packages/wordads/changelog/fix-sass-import-color-studio b/projects/packages/wordads/changelog/fix-sass-import-color-studio new file mode 100644 index 0000000000000..d32fc6f93e7fb --- /dev/null +++ b/projects/packages/wordads/changelog/fix-sass-import-color-studio @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`. + + diff --git a/projects/packages/wordads/src/dashboard/scss/_variables.scss b/projects/packages/wordads/src/dashboard/scss/_variables.scss index e5723a33fd0a5..249958b32e44c 100644 --- a/projects/packages/wordads/src/dashboard/scss/_variables.scss +++ b/projects/packages/wordads/src/dashboard/scss/_variables.scss @@ -1,5 +1,5 @@ // Variables -@import '@automattic/color-studio/dist/color-variables'; +@forward "@automattic/color-studio/dist/color-variables"; /********* RNA styles *********/ // Copied from plugins/backup/src/js/components diff --git a/projects/plugins/automattic-for-agencies-client/changelog/fix-sass-import-color-studio b/projects/plugins/automattic-for-agencies-client/changelog/fix-sass-import-color-studio new file mode 100644 index 0000000000000..d32fc6f93e7fb --- /dev/null +++ b/projects/plugins/automattic-for-agencies-client/changelog/fix-sass-import-color-studio @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`. + + diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/branded-card/styles.module.scss b/projects/plugins/automattic-for-agencies-client/src/js/components/branded-card/styles.module.scss index 2ad8d9b8ca051..1276a45edf164 100644 --- a/projects/plugins/automattic-for-agencies-client/src/js/components/branded-card/styles.module.scss +++ b/projects/plugins/automattic-for-agencies-client/src/js/components/branded-card/styles.module.scss @@ -1,7 +1,7 @@ -@import '@automattic/color-studio/dist/color-variables'; +@use "@automattic/color-studio/dist/color-variables" as studio; .card { - background-color: $studio-automattic-blue-100; + background-color: studio.$studio-automattic-blue-100; border-radius: 14px; display: flex; padding: 8px; @@ -49,16 +49,16 @@ :global { .components-button.is-primary { - background-color: $studio-automattic-blue; + background-color: studio.$studio-automattic-blue; min-width: 178px; } .components-button.is-primary:hover { - background-color: $studio-automattic-blue-60; + background-color: studio.$studio-automattic-blue-60; } .components-button.is-link { - color: $studio-automattic-blue; + color: studio.$studio-automattic-blue; white-space: nowrap; text-decoration: underline; } diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/styles.module.scss b/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/styles.module.scss index ff5c9380436b8..999f0a0a8ddb5 100644 --- a/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/styles.module.scss +++ b/projects/plugins/automattic-for-agencies-client/src/js/components/connection-card/styles.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/color-studio/dist/color-variables'; +@use "@automattic/color-studio/dist/color-variables" as studio; .card { display: flex; @@ -103,14 +103,14 @@ } .terms-of-service__link { - color: $studio-automattic-blue; + color: studio.$studio-automattic-blue; white-space: nowrap; } :global { .components-button.is-link { - color: $studio-automattic-blue; + color: studio.$studio-automattic-blue; white-space: nowrap; text-decoration: underline; } @@ -123,7 +123,7 @@ :global { .components-button { - background-color: $studio-automattic-blue; + background-color: studio.$studio-automattic-blue; min-width: 178px; } } @@ -133,7 +133,7 @@ .components-button.is-link.components-button--back { font-size: 14px; - color: $studio-black; + color: studio.$studio-black; text-decoration: none; &:hover { diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/disconnect-site-link/styles.module.scss b/projects/plugins/automattic-for-agencies-client/src/js/components/disconnect-site-link/styles.module.scss index 0213c0a8120af..3a2b287eb8e2e 100644 --- a/projects/plugins/automattic-for-agencies-client/src/js/components/disconnect-site-link/styles.module.scss +++ b/projects/plugins/automattic-for-agencies-client/src/js/components/disconnect-site-link/styles.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/color-studio/dist/color-variables'; +@use "@automattic/color-studio/dist/color-variables" as studio; .disconnect_site_trigger { display: flex; @@ -44,7 +44,7 @@ } .components-button.is-secondary { - box-shadow: inset 0 0 0 1px $studio-gray-5; + box-shadow: inset 0 0 0 1px studio.$studio-gray-5; } } } diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/disconnected-card/styles.module.scss b/projects/plugins/automattic-for-agencies-client/src/js/components/disconnected-card/styles.module.scss index 86ad0a4cc934b..ec689373dfdc6 100644 --- a/projects/plugins/automattic-for-agencies-client/src/js/components/disconnected-card/styles.module.scss +++ b/projects/plugins/automattic-for-agencies-client/src/js/components/disconnected-card/styles.module.scss @@ -1,5 +1,3 @@ -@import '@automattic/color-studio/dist/color-variables'; - .card { padding: 160px 48px 48px; display: flex; diff --git a/projects/plugins/crm/changelog/fix-sass-import-color-studio b/projects/plugins/crm/changelog/fix-sass-import-color-studio new file mode 100644 index 0000000000000..d32fc6f93e7fb --- /dev/null +++ b/projects/plugins/crm/changelog/fix-sass-import-color-studio @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`. + + diff --git a/projects/plugins/crm/sass/_ZeroBSCRM.prevadmincore.scss b/projects/plugins/crm/sass/_ZeroBSCRM.prevadmincore.scss index 3bfd1fb7562f7..367a456137afd 100644 --- a/projects/plugins/crm/sass/_ZeroBSCRM.prevadmincore.scss +++ b/projects/plugins/crm/sass/_ZeroBSCRM.prevadmincore.scss @@ -4,6 +4,7 @@ * * This was copied from previous CSS :) */ +@use "@automattic/color-studio/dist/color-variables" as studio; html { font-family:sans-serif; @@ -777,20 +778,20 @@ output { } .form-control:-moz-placeholder { - color: $studio-gray-5; + color: studio.$studio-gray-5; } .form-control::-moz-placeholder { - color: $studio-gray-5; + color: studio.$studio-gray-5; opacity:1 } .form-control:-ms-input-placeholder { - color: $studio-gray-5; + color: studio.$studio-gray-5; } .form-control::-webkit-input-placeholder { - color: $studio-gray-5; + color: studio.$studio-gray-5; } .form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control { diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-product-card/style.scss b/projects/plugins/jetpack/_inc/client/components/jetpack-product-card/style.scss index 7ac0524079e9f..e20c51100c5f3 100644 --- a/projects/plugins/jetpack/_inc/client/components/jetpack-product-card/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/jetpack-product-card/style.scss @@ -3,7 +3,6 @@ @import '../../scss/mixin_breakpoint'; @import '../../scss/typography'; @import '../../scss/variables/colors'; -@import '@automattic/color-studio/dist/color-variables'; .jp-product-card { position: relative; diff --git a/projects/plugins/jetpack/_inc/client/recommendations/summary/style.scss b/projects/plugins/jetpack/_inc/client/recommendations/summary/style.scss index 47753c89aab97..17eabce0d929d 100644 --- a/projects/plugins/jetpack/_inc/client/recommendations/summary/style.scss +++ b/projects/plugins/jetpack/_inc/client/recommendations/summary/style.scss @@ -1,4 +1,3 @@ -@import '@automattic/color-studio/dist/color-variables'; @import '../mixin'; @import '../../scss/mixin_breakpoint'; @import '../../scss/calypso-colors'; diff --git a/projects/plugins/jetpack/_inc/client/scss/style.scss b/projects/plugins/jetpack/_inc/client/scss/style.scss index 588a1aa7ce1bc..4d6060200f440 100644 --- a/projects/plugins/jetpack/_inc/client/scss/style.scss +++ b/projects/plugins/jetpack/_inc/client/scss/style.scss @@ -9,7 +9,7 @@ */ // Variables -@import '@automattic/color-studio/dist/color-variables'; +@forward '@automattic/color-studio/dist/color-variables'; @import 'variables/colors'; @import 'variables/layout'; diff --git a/projects/plugins/jetpack/changelog/fix-sass-import-color-studio b/projects/plugins/jetpack/changelog/fix-sass-import-color-studio new file mode 100644 index 0000000000000..ca58942a6a160 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-sass-import-color-studio @@ -0,0 +1,5 @@ +Significance: patch +Type: other +Comment: sass: `@use`/`@forward` rather than `@import` for `@automattic/color-studio`. + + diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss index d8521097ffa0b..775cdf708753d 100644 --- a/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss +++ b/projects/plugins/jetpack/extensions/blocks/subscriptions/email-preview.scss @@ -1,10 +1,10 @@ -@import "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; .jetpack-newsletter-test-email-modal__email-sent { - color: $studio-jetpack-green-30; + color: studio.$studio-jetpack-green-30; svg { - fill: $studio-jetpack-green-30; + fill: studio.$studio-jetpack-green-30; } } diff --git a/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/editor.scss b/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/editor.scss index 10b3ddcd4cebe..fff05785f917b 100644 --- a/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/editor.scss +++ b/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/editor.scss @@ -1,5 +1,5 @@ @use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; -@import "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; // Upgrade Banner. .jetpack-upgrade-plan-banner { @@ -14,12 +14,12 @@ background: #000; padding: 0 20px; border-radius: 2px; - box-shadow: 0 0 1px inset $studio-white; + box-shadow: 0 0 1px inset studio.$studio-white; flex-wrap: wrap; .banner-title, .banner-description { - color: $studio-white; + color: studio.$studio-white; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; @@ -40,16 +40,16 @@ &.is-primary { text-decoration: none; - background: $studio-pink-40; - color: $studio-white; + background: studio.$studio-pink-40; + color: studio.$studio-white; &:hover { - background: $studio-pink-30; + background: studio.$studio-pink-30; } &.is-busy { background-size: 100px 100%; - background-image: linear-gradient(-45deg, $studio-pink-40 28%, $studio-pink-60 28%, $studio-pink-60 72%, $studio-pink-40 72%); + 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%); } } } diff --git a/projects/plugins/jetpack/extensions/plugins/seo/components/upsell.scss b/projects/plugins/jetpack/extensions/plugins/seo/components/upsell.scss index afdbd4d047fb2..b07123219820a 100644 --- a/projects/plugins/jetpack/extensions/plugins/seo/components/upsell.scss +++ b/projects/plugins/jetpack/extensions/plugins/seo/components/upsell.scss @@ -1,4 +1,4 @@ -@import "@automattic/color-studio/dist/color-variables"; +@use "@automattic/color-studio/dist/color-variables" as studio; .components-seo-upsell__learn-more { margin: 1em 0; @@ -7,17 +7,17 @@ .components-seo-upsell__button { &.is-primary { - background: $studio-wordpress-blue-50; - color: $studio-white; + background: studio.$studio-wordpress-blue-50; + color: studio.$studio-white; padding-right: 10px; &:hover { - background: $studio-pink-30; + background: studio.$studio-pink-30; } &.is-busy { background-size: 100px 100%; - background-image: linear-gradient(-45deg, $studio-pink-40 28%, $studio-pink-60 28%, $studio-pink-60 72%, $studio-pink-40 72%); + 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%); } } }