diff --git a/projects/js-packages/ai-client/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/ai-client/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..765902f7f6276 --- /dev/null +++ b/projects/js-packages/ai-client/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +sass: Remove unnecessary `@import` of `@wordpress/base-styles`. diff --git a/projects/js-packages/ai-client/src/components/ai-feedback/style.scss b/projects/js-packages/ai-client/src/components/ai-feedback/style.scss index d6da8cc83b8a5..386941368fc94 100644 --- a/projects/js-packages/ai-client/src/components/ai-feedback/style.scss +++ b/projects/js-packages/ai-client/src/components/ai-feedback/style.scss @@ -1,5 +1,3 @@ -@import "@wordpress/base-styles/colors"; - .ai-assistant-feedback { &__selection { diff --git a/projects/js-packages/base-styles/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/base-styles/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..3a48e8f8ae7f2 --- /dev/null +++ b/projects/js-packages/base-styles/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +sass: Convert `@automattic/jetpack-base-styles/gutenberg-base-styles` to modules format. diff --git a/projects/js-packages/base-styles/gutenberg-base-styles.scss b/projects/js-packages/base-styles/gutenberg-base-styles.scss index f20cbffa7d728..933e957043241 100644 --- a/projects/js-packages/base-styles/gutenberg-base-styles.scss +++ b/projects/js-packages/base-styles/gutenberg-base-styles.scss @@ -1,6 +1,6 @@ -@import '@wordpress/base-styles/z-index'; -@import '@wordpress/base-styles/colors'; -@import '@wordpress/base-styles/variables'; -@import '@wordpress/base-styles/breakpoints'; -@import '@wordpress/base-styles/mixins'; -@import '@wordpress/base-styles/animations'; +@forward '@wordpress/base-styles/z-index'; +@forward '@wordpress/base-styles/colors'; +@forward '@wordpress/base-styles/variables'; +@forward '@wordpress/base-styles/breakpoints'; +@forward '@wordpress/base-styles/mixins'; +@forward '@wordpress/base-styles/animations'; diff --git a/projects/js-packages/components/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/components/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..4e926b396a04c --- /dev/null +++ b/projects/js-packages/components/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +sass: `@use` rather than `@import` for `@automattic/jetpack-base-styles/gutenberg-base-styles`. diff --git a/projects/js-packages/components/components/dot-pager/style.scss b/projects/js-packages/components/components/dot-pager/style.scss index 2a420e05027e3..d4e29d45cbff3 100644 --- a/projects/js-packages/components/components/dot-pager/style.scss +++ b/projects/js-packages/components/components/dot-pager/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '@automattic/jetpack-base-styles/root-variables'; .dot-pager { @@ -13,7 +13,7 @@ opacity: 1; visibility: visible; - @include reduce-motion( "transition" ); + @include gb.reduce-motion( "transition" ); } .dot-pager__controls { diff --git a/projects/js-packages/components/components/global-notices/styles.module.scss b/projects/js-packages/components/components/global-notices/styles.module.scss index b666e52c893f7..1f6965800292e 100644 --- a/projects/js-packages/components/components/global-notices/styles.module.scss +++ b/projects/js-packages/components/components/global-notices/styles.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .global-notices { @@ -10,14 +10,14 @@ // Modals have 100000, so this needs to be above them z-index: 100001; - @include break-small { + @include gb.break-small { width: auto; inset-inline: unset; // left and right inset-block-start: 4rem; inset-inline-end: 1rem; } - @include break-medium { + @include gb.break-medium { inset-block-start: 3rem; } } diff --git a/projects/js-packages/components/components/icons/style.module.scss b/projects/js-packages/components/components/icons/style.module.scss index db4ba603fbbd6..a859fb7da7103 100644 --- a/projects/js-packages/components/components/icons/style.module.scss +++ b/projects/js-packages/components/components/icons/style.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .star-icon { fill: #000; @@ -10,7 +10,7 @@ } .socialIcon { - fill: $gray-700; + fill: gb.$gray-700; &.bluesky { fill: var( --color-bluesky ); diff --git a/projects/js-packages/components/components/swipeable/style.scss b/projects/js-packages/components/components/swipeable/style.scss index 4d898b5975c18..e1eac2be934a1 100644 --- a/projects/js-packages/components/components/swipeable/style.scss +++ b/projects/js-packages/components/components/swipeable/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .swipeable__container { width: 100%; @@ -19,7 +19,7 @@ transition: all 0.5s ease-in-out; transition-property: transform, height; - @include reduce-motion( "transition" ); + @include gb.reduce-motion( "transition" ); } .swipeable__page { diff --git a/projects/js-packages/connection/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/connection/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..12336049c9833 --- /dev/null +++ b/projects/js-packages/connection/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +sass: `@use` rather than `@import` for `@wordpress/base-styles`. diff --git a/projects/js-packages/connection/components/connect-screen/basic/style.scss b/projects/js-packages/connection/components/connect-screen/basic/style.scss index 61a89276e89b2..c831f7c697ec1 100644 --- a/projects/js-packages/connection/components/connect-screen/basic/style.scss +++ b/projects/js-packages/connection/components/connect-screen/basic/style.scss @@ -1,5 +1,4 @@ -@import '@wordpress/base-styles/breakpoints'; -@import '@wordpress/base-styles/mixins'; +@use '@wordpress/base-styles/breakpoints'; .jp-connection__connect-screen { --spacing-base: 8px; @@ -33,7 +32,7 @@ color: hsla( 0, 0%, 100%, 0.4 ); } - @media ( max-width: $break-medium ) { + @media ( max-width: breakpoints.$break-medium ) { max-width: none; width: 100%; } diff --git a/projects/js-packages/connection/components/connect-screen/layout/style.scss b/projects/js-packages/connection/components/connect-screen/layout/style.scss index 194088f559414..82a28207c9b38 100644 --- a/projects/js-packages/connection/components/connect-screen/layout/style.scss +++ b/projects/js-packages/connection/components/connect-screen/layout/style.scss @@ -1,5 +1,4 @@ -@import '@wordpress/base-styles/breakpoints'; -@import '@wordpress/base-styles/mixins'; +@use '@wordpress/base-styles/mixins'; @import '@automattic/jetpack-base-styles/style'; .jp-connection__connect-screen-layout { @@ -18,7 +17,7 @@ &__left { padding: calc(var(--spacing-base) * 3); - @include break-small { + @include mixins.break-small { padding: 64px 96px; } @@ -106,7 +105,7 @@ flex-grow: 1; flex-basis: 100%; - @include break-xlarge { + @include mixins.break-xlarge { flex-basis: 52%; } } @@ -117,7 +116,7 @@ background: #F9F9F6; display: none; - @include break-xlarge { + @include mixins.break-xlarge { display: block; } } @@ -140,7 +139,7 @@ margin-top: 24px; } - @include break-small { + @include mixins.break-small { padding: 4rem 6rem 4rem 4rem; } } @@ -151,7 +150,7 @@ * and mirror 96px horizontal padding seen in * .jp-connection__connect-screen-layout__left */ - @include break-xlarge { + @include mixins.break-xlarge { position: absolute; top: calc(var(--spacing-base) * 9.25); right: calc(var(--spacing-base) * -45); @@ -166,7 +165,7 @@ margin-top: 0.625rem; } - @include break-large { + @include mixins.break-large { padding: 3rem; } } diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/style.scss b/projects/js-packages/connection/components/connect-screen/required-plan/style.scss index 8358032eae208..271b25e242c61 100644 --- a/projects/js-packages/connection/components/connect-screen/required-plan/style.scss +++ b/projects/js-packages/connection/components/connect-screen/required-plan/style.scss @@ -1,5 +1,4 @@ -@import '@wordpress/base-styles/breakpoints'; -@import '@wordpress/base-styles/mixins'; +@use '@wordpress/base-styles/mixins'; .jp-connection__connect-screen-layout__left { @@ -8,14 +7,14 @@ * then account for a 384px pricing card that floats to the right; * finally give 32px of padding between content and the pricing card */ - @include break-xlarge { + @include mixins.break-xlarge { width: calc(100% - 384px - var(--spacing-base) * 4); } } .jp-connection__connect-screen-required-plan { - @include break-xlarge { + @include mixins.break-xlarge { position: relative; background: linear-gradient(to right, #fff 70%, #f9f9f6 30%); } @@ -38,7 +37,7 @@ * and mirror 96px horizontal padding seen in * .jp-connection__connect-screen-layout__left */ - @include break-xlarge { + @include mixins.break-xlarge { position: absolute; top: calc(var(--spacing-base) * 8); right: calc(var(--spacing-base) * 12); diff --git a/projects/js-packages/idc/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/idc/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..12336049c9833 --- /dev/null +++ b/projects/js-packages/idc/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +sass: `@use` rather than `@import` for `@wordpress/base-styles`. diff --git a/projects/js-packages/idc/components/idc-screen/style.scss b/projects/js-packages/idc/components/idc-screen/style.scss index 61690d746657c..7ba1abbbbd3d5 100644 --- a/projects/js-packages/idc/components/idc-screen/style.scss +++ b/projects/js-packages/idc/components/idc-screen/style.scss @@ -1,5 +1,4 @@ -@import '@wordpress/base-styles/breakpoints'; -@import '@wordpress/base-styles/mixins'; +@use '@wordpress/base-styles/mixins'; .jp-idc__idc-screen { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; @@ -16,7 +15,7 @@ border-color: #069e08; } - @include break-small { + @include mixins.break-small { padding: 48px; } @@ -101,7 +100,7 @@ margin: 24px 0; box-sizing: border-box; - @include break-small { + @include mixins.break-small { padding: 24px; } diff --git a/projects/js-packages/partner-coupon/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/partner-coupon/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..12336049c9833 --- /dev/null +++ b/projects/js-packages/partner-coupon/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +sass: `@use` rather than `@import` for `@wordpress/base-styles`. diff --git a/projects/js-packages/partner-coupon/components/redeem-partner-coupon-post-connection/style.scss b/projects/js-packages/partner-coupon/components/redeem-partner-coupon-post-connection/style.scss index 51e354b9da975..958c696aaf961 100644 --- a/projects/js-packages/partner-coupon/components/redeem-partner-coupon-post-connection/style.scss +++ b/projects/js-packages/partner-coupon/components/redeem-partner-coupon-post-connection/style.scss @@ -1,5 +1,4 @@ -@import '@wordpress/base-styles/breakpoints'; -@import '@wordpress/base-styles/mixins'; +@use '@wordpress/base-styles/mixins'; @import '@automattic/jetpack-base-styles/style'; .jetpack-redeem-partner-coupon-post-connection { @@ -21,7 +20,7 @@ &__layout { - @include break-medium { + @include mixins.break-medium { display: grid; grid-template-columns: auto 34%; grid-template-areas: @@ -33,7 +32,7 @@ &__content { padding: 32px 24px 24px 24px; - @include break-medium { + @include mixins.break-medium { padding: 48px 48px 0 48px; } } @@ -41,14 +40,14 @@ &__subcontent { padding: 24px; - @include break-medium { + @include mixins.break-medium { padding: 0 48px 48px 48px; } > p:first-child { margin-top: 0; - @include break-medium { + @include mixins.break-medium { margin-top: 1em; } } @@ -63,7 +62,7 @@ background-size: cover; background-position: center; - @include break-medium { + @include mixins.break-medium { grid-area: aside; padding: 0; } @@ -71,7 +70,7 @@ img { width: 90px; - @include break-medium { + @include mixins.break-medium { width: auto; } } @@ -87,7 +86,7 @@ > * + * { margin-left: 8px; - @include break-mobile { + @include mixins.break-mobile { margin-left: 16px; } } @@ -128,7 +127,7 @@ button { width: 100%; - @include break-medium { + @include mixins.break-medium { width: auto; } } @@ -141,11 +140,11 @@ align-items: center; margin-top: 32px; - @include break-medium { + @include mixins.break-medium { justify-content: left; } - @include break-xlarge { + @include mixins.break-xlarge { flex-wrap: nowrap; } @@ -153,11 +152,11 @@ flex: 1 0 100%; text-align: center; - @include break-medium { + @include mixins.break-medium { text-align: left; } - @include break-xlarge { + @include mixins.break-xlarge { flex: 0 0 auto; } } @@ -178,7 +177,7 @@ text-decoration: none; } - @include break-xlarge { + @include mixins.break-xlarge { margin: 0 0 0 24px; } } diff --git a/projects/js-packages/publicize-components/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/publicize-components/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..4e926b396a04c --- /dev/null +++ b/projects/js-packages/publicize-components/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +sass: `@use` rather than `@import` for `@automattic/jetpack-base-styles/gutenberg-base-styles`. diff --git a/projects/js-packages/publicize-components/src/components/connection-management/style.module.scss b/projects/js-packages/publicize-components/src/components/connection-management/style.module.scss index c3819537e78e9..fd5145e490672 100644 --- a/projects/js-packages/publicize-components/src/components/connection-management/style.module.scss +++ b/projects/js-packages/publicize-components/src/components/connection-management/style.module.scss @@ -1,5 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; - .wrapper { display: flex; flex-direction: column; @@ -131,4 +129,4 @@ flex-direction: column; gap: 0.5rem; flex: 1; -} \ No newline at end of file +} diff --git a/projects/js-packages/publicize-components/src/components/connection-toggle/style.scss b/projects/js-packages/publicize-components/src/components/connection-toggle/style.scss index 64388f48fdb2d..88fb5d3722707 100644 --- a/projects/js-packages/publicize-components/src/components/connection-toggle/style.scss +++ b/projects/js-packages/publicize-components/src/components/connection-toggle/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .components-connection-toggle { position: relative; @@ -14,7 +14,7 @@ } .jetpack-publicize-gutenberg-social-icon { - fill: $gray-600; + fill: gb.$gray-600; filter: saturate(0); } } diff --git a/projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss b/projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss index ca5787f9ba375..2026e61e90a99 100644 --- a/projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/media-picker/styles.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .preview-wrapper { position: relative; @@ -56,7 +56,7 @@ } .subtitle { - color: $gray-700; + color: gb.$gray-700; font-size: 12px; font-weight: 400; line-height: 16px; diff --git a/projects/js-packages/publicize-components/src/components/media-section/styles.module.scss b/projects/js-packages/publicize-components/src/components/media-section/styles.module.scss index d2de5887ee44e..f3597ed6756f7 100644 --- a/projects/js-packages/publicize-components/src/components/media-section/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/media-section/styles.module.scss @@ -1,5 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; - .wrapper { margin-bottom: 16px; diff --git a/projects/js-packages/publicize-components/src/components/notice/styles.module.scss b/projects/js-packages/publicize-components/src/components/notice/styles.module.scss index 520ba63f81803..6f931cc276130 100644 --- a/projects/js-packages/publicize-components/src/components/notice/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/notice/styles.module.scss @@ -1,5 +1,5 @@ @use 'sass:color'; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .notice { font-size: 13px; @@ -9,7 +9,7 @@ } .notice--default { - color: $gray-700; + color: gb.$gray-700; } .notice--highlight, @@ -23,13 +23,13 @@ } .notice--warning { - background-color: color.adjust( $alert-yellow, $lightness: 35% ); - border-left: 2px solid $alert-yellow; + background-color: color.adjust( gb.$alert-yellow, $lightness: 35% ); + border-left: 2px solid gb.$alert-yellow; } .notice--error { - background-color: color.adjust( $alert-red, $lightness: 35% ); - border-left: 2px solid $alert-red; + background-color: color.adjust( gb.$alert-red, $lightness: 35% ); + border-left: 2px solid gb.$alert-red; } .notice--highlight { diff --git a/projects/js-packages/publicize-components/src/components/services/style.module.scss b/projects/js-packages/publicize-components/src/components/services/style.module.scss index 74431828df3fb..be3ec30ba0017 100644 --- a/projects/js-packages/publicize-components/src/components/services/style.module.scss +++ b/projects/js-packages/publicize-components/src/components/services/style.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .services { outline: 1px solid var(--jp-gray-5); @@ -15,7 +15,7 @@ .service-item { padding: 0.75rem; - @include break-small { + @include gb.break-small { padding: 1rem; } } @@ -211,7 +211,7 @@ justify-content: flex-start; } - @include break-medium { + @include gb.break-medium { flex-direction: row; } } @@ -222,11 +222,11 @@ gap: 0.5rem; flex-basis: 100%; - @include break-medium { + @include gb.break-medium { flex-basis: 50%; } - @include break-small { + @include gb.break-small { button { align-self: flex-end; @@ -246,7 +246,7 @@ padding: var(--spacing-base) calc(var(--spacing-base) * 3); // To make the inputs of the same size as the Connect button // Override the default input styles for small screens - @media (max-width: #{ ($break-medium) }) { + @media (max-width: #{ (gb.$break-medium) }) { padding: 0 8px; font-size: 14px; } diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/styles.module.scss b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/styles.module.scss index c11e4f1e3715b..d94086bd22bdb 100644 --- a/projects/js-packages/publicize-components/src/components/social-image-generator/panel/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/social-image-generator/panel/styles.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .templateControl { padding-top: 1rem; @@ -24,7 +24,7 @@ .modal { - @include break-small { + @include gb.break-small { max-height: 90%; } } diff --git a/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/modal/styles.module.scss b/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/modal/styles.module.scss index 89dc4d65142fb..db817f875f634 100644 --- a/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/modal/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/social-image-generator/template-picker/modal/styles.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .footer { display: flex; @@ -17,7 +17,7 @@ .modal { - @include break-small { + @include gb.break-small { max-height: 90%; } } diff --git a/projects/js-packages/publicize-components/src/components/social-post-modal/styles.module.scss b/projects/js-packages/publicize-components/src/components/social-post-modal/styles.module.scss index e83e8999c657b..ac38511addf5d 100644 --- a/projects/js-packages/publicize-components/src/components/social-post-modal/styles.module.scss +++ b/projects/js-packages/publicize-components/src/components/social-post-modal/styles.module.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .panel { margin-block: 1rem; @@ -10,12 +10,12 @@ .modal { - @include break-small { + @include gb.break-small { width: calc(100vw - 40px); } - @include break-large { - width: calc(#{$break-large} - 40px); + @include gb.break-large { + width: calc(#{gb.$break-large} - 40px); max-height: calc(100% - 120px); } @@ -27,7 +27,7 @@ .modal-content { display: flex; - @media (max-width: $break-medium ) { + @media (max-width: gb.$break-medium ) { flex-direction: column; } } @@ -47,7 +47,7 @@ border-bottom: 1px solid var(--studio-gray-5); - @include break-medium { + @include gb.break-medium { border-inline-end: 1px solid var(--studio-gray-5); } @@ -61,7 +61,7 @@ .settings-section { - @include break-medium { + @include gb.break-medium { flex: 1 } } @@ -71,7 +71,7 @@ flex-direction: column; padding: 1rem 2rem; - @include break-medium { + @include gb.break-medium { border-inline-end: 1px solid var(--studio-gray-5); } } @@ -80,7 +80,7 @@ flex: 1; background: var(--jp-gray-0); // closest to #F0F2F5; - @include break-medium { + @include gb.break-medium { flex: 2; } diff --git a/projects/js-packages/publicize-components/src/components/social-previews/modal.scss b/projects/js-packages/publicize-components/src/components/social-previews/modal.scss index 813d3084b0ea8..5fd4901fdb51d 100644 --- a/projects/js-packages/publicize-components/src/components/social-previews/modal.scss +++ b/projects/js-packages/publicize-components/src/components/social-previews/modal.scss @@ -2,8 +2,8 @@ * Modal styles for Social Previews */ +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '@automattic/jetpack-base-styles/root-variables'; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; // Styles shared between modals .jetpack-social-previews__modal { @@ -70,7 +70,7 @@ .components-tab-panel__tab-content { padding: 10px; - background-color: $white; + background-color: gb.$white; flex: 1; overflow: auto; @@ -85,12 +85,12 @@ } } - @media ( min-width: $break-small ) { + @media ( min-width: gb.$break-small ) { width: calc( 100vw - 40px ); } - @media ( min-width: $break-large ) { - width: calc( #{$break-large} - 40px ); + @media ( min-width: gb.$break-large ) { + width: calc( #{gb.$break-large} - 40px ); .components-tab-panel__tabs { @@ -144,12 +144,12 @@ content: '\2713 '; position: absolute; left: -20px; - color: $alert-green; + color: gb.$alert-green; } } } - @media ( min-width: $break-small ) { + @media ( min-width: gb.$break-small ) { width: 80vw; max-width: 870px; display: grid; @@ -180,7 +180,7 @@ } } - @media ( min-width: $break-medium ) { + @media ( min-width: gb.$break-medium ) { .jetpack-social-previews__upgrade-description { padding: 0 2em 2em; diff --git a/projects/js-packages/publicize-components/src/components/tabbed-modal/style.module.scss b/projects/js-packages/publicize-components/src/components/tabbed-modal/style.module.scss index 1950d48f4e959..21af1635f1944 100644 --- a/projects/js-packages/publicize-components/src/components/tabbed-modal/style.module.scss +++ b/projects/js-packages/publicize-components/src/components/tabbed-modal/style.module.scss @@ -1,5 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; - .modal { :global(.components-modal__header-heading) { diff --git a/projects/js-packages/shared-extension-utils/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/shared-extension-utils/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..4e926b396a04c --- /dev/null +++ b/projects/js-packages/shared-extension-utils/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +sass: `@use` rather than `@import` for `@automattic/jetpack-base-styles/gutenberg-base-styles`. 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 c52f6f997315f..1d250088ce2cd 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,4 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; @import "@automattic/color-studio/dist/color-variables"; .jetpack-upgrade-plan-banner .jetpack-upgrade-plan-banner__wrapper { diff --git a/projects/js-packages/shared-extension-utils/src/icons.scss b/projects/js-packages/shared-extension-utils/src/icons.scss index 3f1746bcc8fc3..478578fe0847c 100644 --- a/projects/js-packages/shared-extension-utils/src/icons.scss +++ b/projects/js-packages/shared-extension-utils/src/icons.scss @@ -1,7 +1,7 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .jetpack-gutenberg-social-icon { - fill: $gray-700; + fill: gb.$gray-700; &.is-facebook { fill: var( --color-facebook ); diff --git a/projects/js-packages/storybook/changelog/update-sass-wordpress-base-styles-as-modules b/projects/js-packages/storybook/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..4946390f30d20 --- /dev/null +++ b/projects/js-packages/storybook/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +sass: `@use` rather than `@import` for `@wordpress/base-styles` where possible. diff --git a/projects/js-packages/storybook/storybook/stories/playground/editor-styles.scss b/projects/js-packages/storybook/storybook/stories/playground/editor-styles.scss index 225cd2d29b93f..ea58f083a84c7 100644 --- a/projects/js-packages/storybook/storybook/stories/playground/editor-styles.scss +++ b/projects/js-packages/storybook/storybook/stories/playground/editor-styles.scss @@ -1,8 +1,11 @@ +@use "@wordpress/base-styles/colors"; +@use "@wordpress/base-styles/variables"; + .editor-styles-wrapper { - font-family: $default-font; - font-size: $editor-font-size; - line-height: $editor-line-height; - color: $gray-900; + font-family: variables.$default-font; + font-size: variables.$editor-font-size; + line-height: variables.$editor-line-height; + color: colors.$gray-900; p { font-size: inherit; @@ -45,7 +48,7 @@ .wp-block[data-align="wide"], .wp-block.alignwide { - max-width: $content-width; + max-width: variables.$content-width; } .wp-block[data-align="full"], diff --git a/projects/js-packages/storybook/storybook/stories/playground/reset.scss b/projects/js-packages/storybook/storybook/stories/playground/reset.scss index 0d597c9dbca5a..e92134a8603dc 100644 --- a/projects/js-packages/storybook/storybook/stories/playground/reset.scss +++ b/projects/js-packages/storybook/storybook/stories/playground/reset.scss @@ -1,14 +1,17 @@ +@use "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/variables"; + :root { - @include reset; + @include mixins.reset; } html, body { margin: 0; padding: 0; - font-family: $default-font; - font-size: $default-font-size; + font-family: variables.$default-font; + font-size: variables.$default-font-size; } a, diff --git a/projects/js-packages/storybook/storybook/stories/playground/style.scss b/projects/js-packages/storybook/storybook/stories/playground/style.scss index 2f414166cda26..57350924b4feb 100644 --- a/projects/js-packages/storybook/storybook/stories/playground/style.scss +++ b/projects/js-packages/storybook/storybook/stories/playground/style.scss @@ -1,17 +1,14 @@ -@import "@wordpress/base-styles/colors"; -@import "@wordpress/base-styles/variables"; -@import "@wordpress/base-styles/mixins"; -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/animations"; -@import "@wordpress/base-styles/z-index"; +@use "@wordpress/base-styles/colors"; +@use "@wordpress/base-styles/variables"; +@use "@wordpress/base-styles/mixins"; @import "./reset"; @import "./editor-styles"; .playground { padding-top: 20px; - @include break-small() { - width: calc(100% - #{$sidebar-width}); + @include mixins.break-small() { + width: calc(100% - #{variables.$sidebar-width}); } img { @@ -34,8 +31,8 @@ top: 0; right: 0; bottom: 0; - width: $sidebar-width; - border-left: $border-width solid $gray-300; + width: variables.$sidebar-width; + border-left: variables.$border-width solid colors.$gray-300; height: auto; overflow: auto; -webkit-overflow-scrolling: touch; @@ -43,7 +40,7 @@ // Temporarily disable the sidebar on mobile display: none; - @include break-small() { + @include mixins.break-small() { display: block; } } diff --git a/projects/js-packages/storybook/storybook/style.scss b/projects/js-packages/storybook/storybook/style.scss index 27a92f2be18ab..d2a5fb65e1bab 100644 --- a/projects/js-packages/storybook/storybook/style.scss +++ b/projects/js-packages/storybook/storybook/style.scss @@ -2,6 +2,7 @@ // Loading @wordpress/base-styles as they have mixins and other dependencies // used within @wordpress/*/src/*.scss +// @todo Remove once @wordpress/*/src/*.scss has been updated to use `@use`. @import "@wordpress/base-styles/animations"; @import "@wordpress/base-styles/breakpoints"; @import "@wordpress/base-styles/colors"; diff --git a/projects/packages/external-media/changelog/update-sass-wordpress-base-styles-as-modules b/projects/packages/external-media/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..5878751aac773 --- /dev/null +++ b/projects/packages/external-media/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/packages/external-media/src/features/editor/editor.scss b/projects/packages/external-media/src/features/editor/editor.scss index 6c32466150b4c..2a8d9d4f8b93c 100644 --- a/projects/packages/external-media/src/features/editor/editor.scss +++ b/projects/packages/external-media/src/features/editor/editor.scss @@ -2,8 +2,6 @@ * External Media */ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; - @keyframes animate-drop { 0% { diff --git a/projects/packages/external-media/src/shared/media-browser/style.scss b/projects/packages/external-media/src/shared/media-browser/style.scss index df24f48f605a4..0580d4f358c98 100644 --- a/projects/packages/external-media/src/shared/media-browser/style.scss +++ b/projects/packages/external-media/src/shared/media-browser/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; $grid-size: 8px; @@ -32,7 +32,7 @@ $grid-size: 8px; // Unset button appearance. border: 0; border-radius: 4px; - background-color: $gray-400; + background-color: gb.$gray-400; img { display: block; diff --git a/projects/packages/external-media/src/shared/sources/google-photos/style.scss b/projects/packages/external-media/src/shared/sources/google-photos/style.scss index e6d0df1dc46d5..0d28244cfab73 100644 --- a/projects/packages/external-media/src/shared/sources/google-photos/style.scss +++ b/projects/packages/external-media/src/shared/sources/google-photos/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; $grid-size: 8px; @@ -60,7 +60,7 @@ $grid-size: 8px; justify-content: flex-start; @media only screen and ( min-width: 600px ) { - border-left: 1px solid $gray-400; + border-left: 1px solid gb.$gray-400; margin-left: $grid-size * 2; padding-left: $grid-size * 2; } @@ -86,7 +86,7 @@ $grid-size: 8px; } .components-input-control__backdrop { - border-color: $gray-200; + border-color: gb.$gray-200; border-radius: 3px; } diff --git a/projects/packages/forms/changelog/update-sass-wordpress-base-styles-as-modules b/projects/packages/forms/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..5878751aac773 --- /dev/null +++ b/projects/packages/forms/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index e4a4ae94ce7b9..2d0038220023b 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-contact-form { box-sizing: border-box; @@ -95,7 +95,7 @@ max-width: 75%; } - @media (max-width: #{ ($break-mobile) }) { + @media (max-width: #{ (gb.$break-mobile) }) { &[class*="jetpack-field__width-"] { flex-basis: 100%; @@ -208,16 +208,16 @@ .form-placeholder__patterns-modal { max-width: 1200px; - @include break-small() { - width: calc(100% - #{ $grid-unit-20 * 2 }); - height: calc(100% - #{ $header-height * 2 }); + @include gb.break-small() { + width: calc(100% - #{ gb.$grid-unit-20 * 2 }); + height: calc(100% - #{ gb.$header-height * 2 }); } - @include break-medium() { - width: $break-medium - $grid-unit-20 * 2; + @include gb.break-medium() { + width: gb.$break-medium - gb.$grid-unit-20 * 2; } - @include break-large() { + @include gb.break-large() { height: 80%; width: 80%; max-height: none; diff --git a/projects/packages/forms/src/dashboard/integrations/style.scss b/projects/packages/forms/src/dashboard/integrations/style.scss index 2491c3d46585b..7b5217f311cc9 100644 --- a/projects/packages/forms/src/dashboard/integrations/style.scss +++ b/projects/packages/forms/src/dashboard/integrations/style.scss @@ -1,5 +1,5 @@ -@import "@wordpress/base-styles/colors"; -@import "@wordpress/base-styles/variables"; +@use "@wordpress/base-styles/colors"; +@use "@wordpress/base-styles/variables"; .jp-forms__integrations { padding: 32px 16.6%; @@ -15,20 +15,20 @@ margin-bottom: 24px; .jp-forms__integrations-header-heading { - color: $gray-900; - font-size: $font-size-2x-large; - line-height: $font-line-height-2x-large; + color: colors.$gray-900; + font-size: variables.$font-size-2x-large; + line-height: variables.$font-line-height-2x-large; margin-block: 0; } .jp-forms__integrations-header-description { - color: $gray-700; + color: colors.$gray-700; max-width: 75ch; /* stylelint-disable-line unit-allowed-list */ } } .jp-forms__integrations-body { - border: 1px solid $gray-200; + border: 1px solid colors.$gray-200; border-radius: 8px; padding: 12px 24px; diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-sass-wordpress-base-styles-as-modules b/projects/packages/jetpack-mu-wpcom/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..5878751aac773 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/packages/jetpack-mu-wpcom/src/common/tour-kit/variants/wpcom/styles.scss b/projects/packages/jetpack-mu-wpcom/src/common/tour-kit/variants/wpcom/styles.scss index 9eb434e07db78..23b8c6e64d676 100644 --- a/projects/packages/jetpack-mu-wpcom/src/common/tour-kit/variants/wpcom/styles.scss +++ b/projects/packages/jetpack-mu-wpcom/src/common/tour-kit/variants/wpcom/styles.scss @@ -1,8 +1,6 @@ @use "sass:math"; -@import "@wordpress/base-styles/colors"; -@import "@wordpress/base-styles/mixins"; -@import "@wordpress/base-styles/variables"; -@import "@wordpress/base-styles/z-index"; +@use "@wordpress/base-styles/colors"; +@use "@wordpress/base-styles/variables"; $wpcom-tour-kit-step-card-overlay-controls-button-bg-color: #32373c; // former $dark-gray-700. TODO: replace with standard color @@ -12,14 +10,14 @@ $wpcom-tour-kit-step-card-overlay-controls-button-bg-color: #32373c; // former $ 0 2px 6px rgba(60, 66, 87, 0.08), 0 0 0 1px rgba(60, 66, 87, 0.16), 0 1px 1px rgba(0, 0, 0, 0.08); - background-color: $white; - color: $black; + background-color: colors.$white; + color: colors.$black; .components-button { height: 44px; .wpcom-tour-kit-minimized__tour-index { - color: $gray-600; + color: colors.$gray-600; } svg { @@ -81,13 +79,13 @@ $wpcom-tour-kit-step-card-overlay-controls-button-bg-color: #32373c; // former $ .components-card__body, .components-card__footer { border-top: none; - padding: $grid-unit-20 !important; + padding: variables.$grid-unit-20 !important; } .components-card__footer { .wpcom-tour-kit-rating__end-text { - color: $gray-600; + color: colors.$gray-600; font-size: 0.875rem; font-style: italic; } @@ -95,19 +93,19 @@ $wpcom-tour-kit-step-card-overlay-controls-button-bg-color: #32373c; // former $ .wpcom-tour-kit-rating__end-icon.components-button.has-icon { background-color: #f6f7f7; border-radius: 50%; - color: $gray-600; + color: colors.$gray-600; margin-left: 8px; path { - fill: $gray-600; + fill: colors.$gray-600; } &.active { - background-color: $black; + background-color: colors.$black; opacity: 1; path { - fill: $white; + fill: colors.$white; } } } @@ -151,7 +149,7 @@ $wpcom-tour-kit-step-card-overlay-controls-button-bg-color: #32373c; // former $ .wpcom-tour-kit-step-card-overlay-controls { left: 0; - padding: $grid-unit-15; + padding: variables.$grid-unit-15; right: 0; z-index: 1; // z-index is needed because overlay controls are written before components-card__media, and so ends up under the image @@ -190,7 +188,7 @@ $wpcom-tour-kit-step-card-overlay-controls-button-bg-color: #32373c; // former $ } .wpcom-tour-kit-step-card-navigation__next-btn { - margin-left: $grid-unit-15; + margin-left: variables.$grid-unit-15; justify-content: center; min-width: 85px; } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss index 423eee80cc776..602a1c4ef3a7e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-bar/wpcom-admin-bar.scss @@ -1,5 +1,4 @@ -@import '@wordpress/base-styles/mixins'; -@import '@wordpress/base-styles/colors'; +@use '@wordpress/base-styles/mixins'; /** * Allow to apply the modern scheme to elements. @@ -8,7 +7,7 @@ .admin-color-modern { - @include admin-scheme(#3858e9); + @include mixins.admin-scheme(#3858e9); } } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/first-post-published-modal/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/first-post-published-modal/style.scss index 1b304b78a40c6..c1c8e6c45586e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/first-post-published-modal/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/first-post-published-modal/style.scss @@ -1,12 +1,11 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; -@import "@wordpress/base-styles/variables"; +@use "@wordpress/base-styles/variables"; +@use "@wordpress/base-styles/mixins"; .wpcom-block-editor-post-published-modal { - border-radius: $radius-large; + border-radius: variables.$radius-large; margin: auto 16px; - @include break-small { + @include mixins.break-small { margin: auto; } @@ -14,7 +13,7 @@ text-align: center; padding: 60px 30px; - @include break-small { + @include mixins.break-small { padding: 48px 90px; } } @@ -28,7 +27,7 @@ } .wpcom-block-editor-nux-modal__title { - font-size: $font-size-2x-large; + font-size: variables.$font-size-2x-large; } .wpcom-block-editor-nux-modal__buttons { diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/nux-modal/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/nux-modal/style.scss index 84ed75655ce4f..6285404291f98 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/nux-modal/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/nux-modal/style.scss @@ -1,6 +1,5 @@ +@use "@wordpress/base-styles/mixins"; @import "@automattic/typography/styles/variables"; -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; .wpcom-block-editor-nux-modal { @@ -34,7 +33,7 @@ margin: 0; } - @include break-mobile { + @include mixins.break-mobile { text-align: center; } } @@ -50,7 +49,7 @@ font-weight: 500; line-height: 1.2; - @include break-mobile { + @include mixins.break-mobile { margin-top: 24px; } } @@ -60,7 +59,7 @@ margin: 16px 0 0; font-size: $font-body; - @include break-mobile { + @include mixins.break-mobile { margin: 20px auto 0; font-size: $font-body-large; } @@ -84,7 +83,7 @@ margin-top: 12px; } - @include break-mobile { + @include mixins.break-mobile { flex-direction: row; margin-top: 28px; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/purchase-notice/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/purchase-notice/style.scss index f9802fcb34e2b..05a24bb7d9e5e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/purchase-notice/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/purchase-notice/style.scss @@ -1,6 +1,3 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; - .wpcom-block-editor-purchase-notice { position: fixed; overflow: visible; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/style.scss index 78035cd57446d..e464e3335c88f 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/recommended-tags-modal/style.scss @@ -1,5 +1,4 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/mixins"; .wpcom-block-editor-post-published-recommended-tags-modal { @@ -7,7 +6,7 @@ margin-top: 0; padding: 96px 24px; - @include break-small { + @include mixins.break-small { padding: 52px; } @@ -32,7 +31,7 @@ /* stylelint-disable-next-line declaration-property-unit-allowed-list */ font-size: 2.25rem; - @include break-small { + @include mixins.break-small { font-size: 26px; font-weight: 500; line-height: 1; @@ -69,7 +68,7 @@ flex: fit-content; width: 100%; - @include break-small { + @include mixins.break-small { width: 385px; } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/seller-celebration-modal/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/seller-celebration-modal/style.scss index 34554f3581881..182f650155ba9 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/seller-celebration-modal/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/seller-celebration-modal/style.scss @@ -1,11 +1,10 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/mixins"; .wpcom-site-editor-seller-celebration-modal { .components-modal__content { - @include break-small { + @include mixins.break-small { padding: 48px 90px; } } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/video-celebration-modal/style.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/video-celebration-modal/style.scss index 7d13793b08e1c..60def4392e3bc 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/video-celebration-modal/style.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor-nux/src/video-celebration-modal/style.scss @@ -1,11 +1,10 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/mixins"; .wpcom-site-editor-video-celebration-modal { .components-modal__content { - @include break-small { + @include mixins.break-small { padding: 48px 90px; } } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/event-countdown/editor.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/event-countdown/editor.scss index bc81b77f12d32..1488146defea4 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/event-countdown/editor.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-blocks/event-countdown/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; /* Editor styles */ .wp-block-jetpack-event-countdown .components-placeholder__fieldset { @@ -15,7 +15,7 @@ .components-placeholder__input[type="text"] { - @include input-control; + @include gb.input-control; } .event-countdown__event-title { diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/modal.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/modal.scss index f2bf88eac5af8..c9b28a0472503 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/modal.scss +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-global-styles/modal.scss @@ -1,6 +1,6 @@ +@use "@wordpress/base-styles/breakpoints"; +@use "@wordpress/base-styles/mixins"; @import "@automattic/typography/styles/fonts"; -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; .wpcom-global-styles-modal { @@ -21,11 +21,11 @@ justify-content: flex-end; align-items: flex-start; - @include break-small { + @include mixins.break-small { flex-direction: row; justify-content: flex-start; - @media (min-height: #{ ($break-small) }) { + @media (min-height: #{ (breakpoints.$break-small) }) { align-items: stretch; } } @@ -35,7 +35,7 @@ .wpcom-global-styles-modal__image { width: 100%; - @include break-small { + @include mixins.break-small { width: auto; max-width: 380px; } @@ -46,9 +46,9 @@ display: flex; flex-direction: column; - @include break-small { + @include mixins.break-small { - @media (min-height: #{ ($break-small) }) { + @media (min-height: #{ (breakpoints.$break-small) }) { padding: 64px 48px; } } @@ -62,9 +62,9 @@ line-height: 32px; margin-bottom: 16px; - @include break-small { + @include mixins.break-small { - @media (min-height: #{ ($break-small) }) { + @media (min-height: #{ (breakpoints.$break-small) }) { font-size: 2rem; line-height: 40px; } @@ -98,10 +98,10 @@ justify-content: flex-end; max-height: 50vh; - @include break-small { + @include mixins.break-small { max-height: 70vh; - @media (min-height: #{ ($break-small) }) { + @media (min-height: #{ (breakpoints.$break-small) }) { max-height: none; padding: 64px 0 64px 64px; } diff --git a/projects/packages/my-jetpack/_inc/components/golden-token/tooltip/style.global.scss b/projects/packages/my-jetpack/_inc/components/golden-token/tooltip/style.global.scss index b985891656658..36f845bba0fee 100644 --- a/projects/packages/my-jetpack/_inc/components/golden-token/tooltip/style.global.scss +++ b/projects/packages/my-jetpack/_inc/components/golden-token/tooltip/style.global.scss @@ -1,4 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; @import '@automattic/jetpack-base-styles/style'; $arrow-color: var( --jp-gray ); diff --git a/projects/packages/my-jetpack/_inc/components/onboarding-tour/styles.scss b/projects/packages/my-jetpack/_inc/components/onboarding-tour/styles.scss index 8e4e115b2aff0..c6f842936ce8a 100644 --- a/projects/packages/my-jetpack/_inc/components/onboarding-tour/styles.scss +++ b/projects/packages/my-jetpack/_inc/components/onboarding-tour/styles.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; $tour-footer-spacing: 16px; @@ -20,16 +20,16 @@ $tour-footer-spacing: 16px; } .myjetpack-onboarding-welcome-tour__heading { - margin: $grid-unit-20 0 8px 0; - padding: 0 $grid-unit-20; + margin: gb.$grid-unit-20 0 8px 0; + padding: 0 gb.$grid-unit-20; - @include heading-x-large; + @include gb.heading-x-large; } .myjetpack-onboarding-welcome-tour__text { line-height: 1.4; - margin: 0 0 $grid-unit-30 0; - padding: 0 $grid-unit-20; + margin: 0 0 gb.$grid-unit-30 0; + padding: 0 gb.$grid-unit-20; min-height: 74px; // avoid layout shift when the text is short } diff --git a/projects/packages/my-jetpack/_inc/components/testimonials/style.scss b/projects/packages/my-jetpack/_inc/components/testimonials/style.scss index c59894557622a..1f720f1ae1ad3 100644 --- a/projects/packages/my-jetpack/_inc/components/testimonials/style.scss +++ b/projects/packages/my-jetpack/_inc/components/testimonials/style.scss @@ -1,5 +1,5 @@ +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '@automattic/jetpack-base-styles/root-variables'; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; .jetpack-onboarding-testimonial { flex: 1; @@ -59,7 +59,7 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; - @include break-xlarge { + @include gb.break-xlarge { padding-inline: 3rem; } } diff --git a/projects/packages/my-jetpack/changelog/update-sass-wordpress-base-styles-as-modules b/projects/packages/my-jetpack/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..5878751aac773 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/packages/search/changelog/update-sass-wordpress-base-styles-as-modules b/projects/packages/search/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..5878751aac773 --- /dev/null +++ b/projects/packages/search/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/packages/search/src/customberg/components/app-wrapper/styles.scss b/projects/packages/search/src/customberg/components/app-wrapper/styles.scss index 2cf1694e58c77..b876d1ef96467 100644 --- a/projects/packages/search/src/customberg/components/app-wrapper/styles.scss +++ b/projects/packages/search/src/customberg/components/app-wrapper/styles.scss @@ -1,5 +1,6 @@ +@use '@wordpress/base-styles/colors'; +@use 'lib/base-styles'; @import 'instant-search/lib/styles/helper'; -@import 'lib/base-styles'; .jp-search-configure-app-wrapper { flex-grow: 1; @@ -12,7 +13,7 @@ } .jetpack-instant-search { - background: $gray-100; + background: colors.$gray-100; position: absolute; padding-top: 2em; diff --git a/projects/packages/search/src/customberg/components/header/styles.scss b/projects/packages/search/src/customberg/components/header/styles.scss index adb0f6bc8ba78..425ef0f696cff 100644 --- a/projects/packages/search/src/customberg/components/header/styles.scss +++ b/projects/packages/search/src/customberg/components/header/styles.scss @@ -1,18 +1,20 @@ -@import '../../lib/base-styles'; +@use "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/variables"; +@use '../../lib/base-styles'; .jp-search-configure-header { display: flex; align-items: center; justify-content: space-between; - height: $grid-unit-60; // Match .components-panel__header height. - padding: 0 $grid-unit-20; + height: variables.$grid-unit-60; // Match .components-panel__header height. + padding: 0 variables.$grid-unit-20; overflow: auto; - @include break-medium() { - height: $header-height; // Match headers of other editor interfaces. + @include mixins.break-medium() { + height: variables.$header-height; // Match headers of other editor interfaces. } - @include break-small { + @include mixins.break-small { overflow: visible; } } @@ -34,11 +36,11 @@ .components-button.jp-search-configure-header__show-settings-button { - @include break-small() { - margin-right: $grid-unit-10; + @include mixins.break-small() { + margin-right: variables.$grid-unit-10; } - @include break-medium() { + @include mixins.break-medium() { display: none; margin-left: 0; } diff --git a/projects/packages/search/src/customberg/components/layout/styles.scss b/projects/packages/search/src/customberg/components/layout/styles.scss index fa89ab45700dc..1849908cedca2 100644 --- a/projects/packages/search/src/customberg/components/layout/styles.scss +++ b/projects/packages/search/src/customberg/components/layout/styles.scss @@ -1,4 +1,5 @@ -@import '../../lib/base-styles'; +@use '@wordpress/base-styles/colors'; +@use '../../lib/base-styles'; #jp-search-configure { @@ -18,7 +19,7 @@ } .interface-interface-skeleton__header { - background-color: $white; + background-color: colors.$white; } } diff --git a/projects/packages/search/src/customberg/components/save-button/styles.scss b/projects/packages/search/src/customberg/components/save-button/styles.scss index 0f07d91e04ee2..273af40b2753a 100644 --- a/projects/packages/search/src/customberg/components/save-button/styles.scss +++ b/projects/packages/search/src/customberg/components/save-button/styles.scss @@ -1,21 +1,23 @@ -@import '../../lib/base-styles'; +@use "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/variables"; +@use '../../lib/base-styles'; // Used in header and the sidebar. .jp-search-configure-save-button { - margin-right: $grid-unit-05; + margin-right: variables.$grid-unit-05; &:first-of-type { margin-left: auto; } - @include break-small() { - margin-right: $grid-unit-10; + @include mixins.break-small() { + margin-right: variables.$grid-unit-10; } // Only hide the save button when being shown in sidebar in mobile breakpoints. .jp-search-configure-sidebar & { - @include break-medium() { + @include mixins.break-medium() { display: none; } } diff --git a/projects/packages/search/src/customberg/components/sidebar/color-control.scss b/projects/packages/search/src/customberg/components/sidebar/color-control.scss index 5405f5327ee51..45ce35b15e859 100644 --- a/projects/packages/search/src/customberg/components/sidebar/color-control.scss +++ b/projects/packages/search/src/customberg/components/sidebar/color-control.scss @@ -1,4 +1,5 @@ -@import '../../lib/base-styles'; +@use "@wordpress/base-styles/variables"; +@use '../../lib/base-styles'; // Manually adjust incorrect styles from core. .jp-search-configure-color-input { @@ -10,7 +11,7 @@ .block-editor-color-gradient-control { fieldset > legend { - margin-bottom: $grid-unit-15; + margin-bottom: variables.$grid-unit-15; > .block-editor-color-gradient-control__color-indicator { margin-bottom: 0; diff --git a/projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.scss b/projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.scss index 61a26395c859d..d40053a79d6a7 100644 --- a/projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.scss +++ b/projects/packages/search/src/customberg/components/sidebar/excluded-post-types-control.scss @@ -1,15 +1,16 @@ -@import '../../lib/base-styles'; +@use "@wordpress/base-styles/variables"; +@use '../../lib/base-styles'; .jp-search-configure-excluded-post-types-control { - margin-top: $grid-unit; + margin-top: variables.$grid-unit; .jp-search-configure-excluded-post-types-control__label { - margin-bottom: $grid-unit; + margin-bottom: variables.$grid-unit; } .components-notice { - margin: $grid-unit 0; - padding-top: $grid-unit-05; - padding-bottom: $grid-unit-05; + margin: variables.$grid-unit 0; + padding-top: variables.$grid-unit-05; + padding-bottom: variables.$grid-unit-05; } } diff --git a/projects/packages/search/src/customberg/components/sidebar/styles.scss b/projects/packages/search/src/customberg/components/sidebar/styles.scss index c642f9b9e264e..50a791992707a 100644 --- a/projects/packages/search/src/customberg/components/sidebar/styles.scss +++ b/projects/packages/search/src/customberg/components/sidebar/styles.scss @@ -1,9 +1,12 @@ -@import '../../lib/base-styles'; +@use '@wordpress/base-styles/colors'; +@use "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/variables"; +@use '../../lib/base-styles'; .components-panel__header.jp-search-configure-sidebar__panel-tabs { justify-content: flex-start; padding-left: 0; - padding-right: $grid-unit-15; + padding-right: variables.$grid-unit-15; border-top: 0; margin-top: 0; @@ -17,13 +20,13 @@ } .components-button.jp-search-configure-sidebar__hide-settings-button { - margin-right: $grid-unit-05; + margin-right: variables.$grid-unit-05; - @include break-small() { - margin-right: $grid-unit-15; + @include mixins.break-small() { + margin-right: variables.$grid-unit-15; } - @include break-medium() { + @include mixins.break-medium() { display: none; } } @@ -39,7 +42,7 @@ padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode margin-left: 0; font-weight: 400; - color: $gray-900; + color: colors.$gray-900; height: 100%; // This pseudo-element "duplicates" the tab label and sets the text to bold. @@ -58,7 +61,7 @@ &.is-active { // The transparent shadow ensures no jumpiness when focus animates on an active tab. box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) transparent, - inset 0 (-$border-width-tab) 0 0 var( --wp-admin-theme-color ); + inset 0 (-1 * variables.$border-width-tab) 0 0 var( --wp-admin-theme-color ); font-weight: 600; position: relative; @@ -70,7 +73,7 @@ bottom: 1px; right: 0; left: 0; - border-bottom: $border-width-tab solid transparent; + border-bottom: variables.$border-width-tab solid transparent; } } @@ -80,34 +83,34 @@ &.is-active:focus { box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color ), - inset 0 (-$border-width-tab) 0 0 var( --wp-admin-theme-color ); + inset 0 (-1 * variables.$border-width-tab) 0 0 var( --wp-admin-theme-color ); } } .jp-search-configure-sidebar-description { display: flex; - padding: $grid-unit-20; + padding: variables.$grid-unit-20; .block-editor-block-icon { - margin-right: $grid-unit-20; + margin-right: variables.$grid-unit-20; } .components-button.is-tertiary { - margin-left: -( $grid-unit-15 * 0.5 ); + margin-left: -( variables.$grid-unit-15 * 0.5 ); } } .jp-search-configure-sidebar-options { .components-base-control { - margin-bottom: $grid-unit-30; + margin-bottom: variables.$grid-unit-30; &.components-checkbox-control { - margin-bottom: $grid-unit-10; + margin-bottom: variables.$grid-unit-10; } &.components-toggle-control { - margin-bottom: $grid-unit-15; + margin-bottom: variables.$grid-unit-15; } &:last-child { @@ -127,32 +130,32 @@ .jp-search-configure-sidebar-options .jp-search-configure-theme-buttons { display: flex; justify-content: space-around; - margin-bottom: $grid-unit-15; + margin-bottom: variables.$grid-unit-15; button.components-button { display: flex; height: initial; flex-direction: column; - padding-left: $grid-unit * 0.75; - padding-right: $grid-unit * 0.75; + padding-left: variables.$grid-unit * 0.75; + padding-right: variables.$grid-unit * 0.75; &:first-child { - margin-right: $grid-unit-05; + margin-right: variables.$grid-unit-05; } &:last-child { - margin-left: $grid-unit-05; + margin-left: variables.$grid-unit-05; } svg { - border: 2px solid $white; + border: 2px solid colors.$white; border-radius: 3px; - margin-bottom: $grid-unit-05; + margin-bottom: variables.$grid-unit-05; } &.jp-search-configure-theme-button--selected svg { - border-color: $gray-800; + border-color: colors.$gray-800; } } } @@ -166,18 +169,18 @@ input[type="checkbox"], input[type="radio"] { - background: $gray-300; - border-color: $gray-300; + background: colors.$gray-300; + border-color: colors.$gray-300; } .components-radio-control__input[type="radio"]:checked { - background: $gray-400; - border-color: $gray-400; + background: colors.$gray-400; + border-color: colors.$gray-400; } } .components-checkbox-control__input:disabled { - background: $gray-300; - border-color: $gray-300; + background: colors.$gray-300; + border-color: colors.$gray-300; cursor: not-allowed; } diff --git a/projects/packages/search/src/customberg/lib/_base-styles.scss b/projects/packages/search/src/customberg/lib/_base-styles.scss index 6b0c4f2f54e51..368ccb8c063d0 100644 --- a/projects/packages/search/src/customberg/lib/_base-styles.scss +++ b/projects/packages/search/src/customberg/lib/_base-styles.scss @@ -1,8 +1,6 @@ @use "sass:math"; -@import '@wordpress/base-styles/z-index'; +// @todo Remove imports once @wordpress/block-editor/src/components/colors-gradients/style uses `@use` properly. @import '@wordpress/base-styles/colors'; @import '@wordpress/base-styles/variables'; @import '@wordpress/base-styles/breakpoints'; -@import '@wordpress/base-styles/mixins'; -@import '@wordpress/base-styles/animations'; @import '@wordpress/block-editor/src/components/colors-gradients/style'; diff --git a/projects/packages/search/src/customberg/lib/wordpress-interface.scss b/projects/packages/search/src/customberg/lib/wordpress-interface.scss index 43bde8da6c996..eae36bc3c7694 100644 --- a/projects/packages/search/src/customberg/lib/wordpress-interface.scss +++ b/projects/packages/search/src/customberg/lib/wordpress-interface.scss @@ -5,10 +5,16 @@ * TODO: Replace these styles with our own styles. */ +@use '@wordpress/base-styles/breakpoints'; +@use '@wordpress/base-styles/colors'; +@use "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/variables"; +@use "@wordpress/base-styles/z-index"; + // complementary-area-header .components-panel__header.interface-complementary-area-header__small { - background: $white; - padding-right: $grid-unit-05; + background: colors.$white; + padding-right: variables.$grid-unit-05; .interface-complementary-area-header__small-title { overflow: hidden; @@ -17,45 +23,45 @@ width: 100%; } - @include break-medium() { + @include mixins.break-medium() { display: none; } } .interface-complementary-area-header { - background: $white; - padding-right: $grid-unit-05; + background: colors.$white; + padding-right: variables.$grid-unit-05; } // complementary-area .interface-complementary-area { - background: $white; - color: $gray-900; + background: colors.$white; + color: colors.$gray-900; - @include break-small() { + @include mixins.break-small() { -webkit-overflow-scrolling: touch; } - @include break-medium() { - width: $sidebar-width; + @include mixins.break-medium() { + width: variables.$sidebar-width; } .components-panel { border: none; // Make a stacking context that keeps all descendents behind the sticky header position: relative; - z-index: z-index( '.interface-complementary-area .components-panel' ); + z-index: z-index.z-index( '.interface-complementary-area .components-panel' ); } .components-panel__header { position: sticky; top: 0; - z-index: z-index( '.interface-complementary-area .components-panel__header' ); + z-index: z-index.z-index( '.interface-complementary-area .components-panel__header' ); &.edit-post-sidebar__panel-tabs { - top: $panel-header-height; + top: variables.$panel-header-height; - @include break-medium() { + @include mixins.break-medium() { top: 0; } } @@ -67,14 +73,14 @@ h2, h3 { - font-size: $default-font-size; - color: $gray-900; + font-size: variables.$default-font-size; + color: colors.$gray-900; margin-bottom: 1.5em; } hr { border-top: none; - border-bottom: 1px solid $gray-100; + border-bottom: 1px solid colors.$gray-100; margin: 1.5em 0; } @@ -99,11 +105,11 @@ // fullscreen-mode body.js.is-fullscreen-mode { - @include break-medium { + @include mixins.break-medium { // Reset the html.wp-topbar padding. // Because this uses negative margins, we have to compensate for the height. - margin-top: -$admin-bar-height; - height: calc( 100% + #{$admin-bar-height} ); + margin-top: -1 * variables.$admin-bar-height; + height: calc( 100% + #{variables.$admin-bar-height} ); #adminmenumain, #wpadminbar { @@ -125,7 +131,7 @@ html.interface-interface-skeleton__html-container { position: fixed; width: 100%; - @include break-medium() { + @include mixins.break-medium() { position: initial; width: initial; } @@ -139,14 +145,14 @@ html.interface-interface-skeleton__html-container { // Fill the available space on Mobile. position: fixed; - top: $admin-bar-height-big; + top: variables.$admin-bar-height-big; left: 0; right: 0; bottom: 0; // Adjust to admin-bar going small. - @media (min-width: #{ ($break-medium + 1) }) { - top: $admin-bar-height; + @media (min-width: #{ (breakpoints.$break-medium + 1) }) { + top: variables.$admin-bar-height; .is-fullscreen-mode & { top: 0; @@ -161,25 +167,25 @@ html.interface-interface-skeleton__html-container { overflow: hidden; } -@include editor-left( '.interface-interface-skeleton' ); +@include mixins.editor-left( '.interface-interface-skeleton' ); .interface-interface-skeleton__secondary-sidebar, .interface-interface-skeleton__sidebar { display: block; flex-shrink: 0; position: absolute; - z-index: z-index( '.interface-interface-skeleton__sidebar' ); + z-index: z-index.z-index( '.interface-interface-skeleton__sidebar' ); top: 0; right: 0; bottom: 0; left: 0; - background: $white; - color: $gray-900; + background: colors.$white; + color: colors.$gray-900; // On Mobile the header is fixed to keep HTML as scrollable. - @include break-medium() { + @include mixins.break-medium() { position: relative !important; - z-index: z-index( '.interface-interface-skeleton__sidebar {greater than small}' ); + z-index: z-index.z-index( '.interface-interface-skeleton__sidebar {greater than small}' ); width: auto; // Keep the sidebar width flexible. } } @@ -187,65 +193,65 @@ html.interface-interface-skeleton__html-container { .interface-interface-skeleton__sidebar { overflow: auto; - @include break-medium() { - border-left: $border-width solid $gray-200; + @include mixins.break-medium() { + border-left: variables.$border-width solid colors.$gray-200; } } .interface-interface-skeleton__secondary-sidebar { - @include break-medium() { - border-right: $border-width solid $gray-200; + @include mixins.break-medium() { + border-right: variables.$border-width solid colors.$gray-200; } } .interface-interface-skeleton__header { flex-shrink: 0; height: auto; // Keep the height flexible. - border-bottom: $border-width solid $gray-200; - z-index: z-index( '.interface-interface-skeleton__header' ); - color: $gray-900; + border-bottom: variables.$border-width solid colors.$gray-200; + z-index: z-index.z-index( '.interface-interface-skeleton__header' ); + color: colors.$gray-900; } .interface-interface-skeleton__footer { height: auto; // Keep the height flexible. flex-shrink: 0; - border-top: $border-width solid $gray-200; - color: $gray-900; + border-top: variables.$border-width solid colors.$gray-200; + color: colors.$gray-900; position: absolute; bottom: 0; left: 0; width: 100%; - background-color: $white; - z-index: z-index( '.interface-interface-skeleton__footer' ); + background-color: colors.$white; + z-index: z-index.z-index( '.interface-interface-skeleton__footer' ); // On Mobile the footer is hidden display: none; - @include break-medium() { + @include mixins.break-medium() { display: flex; } .block-editor-block-breadcrumb { - z-index: z-index( '.edit-post-layout__footer' ); + z-index: z-index.z-index( '.edit-post-layout__footer' ); display: flex; - background: $white; - height: $button-size-small; + background: colors.$white; + height: variables.$button-size-small; align-items: center; - font-size: $default-font-size; - padding: 0 ( $grid-unit-15 + 6px ); + font-size: variables.$default-font-size; + padding: 0 ( variables.$grid-unit-15 + 6px ); } } .interface-interface-skeleton__actions { - z-index: z-index( '.interface-interface-skeleton__actions' ); + z-index: z-index.z-index( '.interface-interface-skeleton__actions' ); position: fixed !important; // Need to override the default relative positioning top: -9999em; bottom: auto; left: auto; right: 0; - width: $sidebar-width; - color: $gray-900; + width: variables.$sidebar-width; + color: colors.$gray-900; &:focus { top: auto; @@ -263,7 +269,7 @@ html.interface-interface-skeleton__html-container { padding: 0 2px; } - @include break-small() { + @include mixins.break-small() { margin-left: 0; .components-button { @@ -276,9 +282,9 @@ html.interface-interface-skeleton__html-container { min-width: 280px; // Let the menu scale to fit items. - @include break-mobile() { + @include mixins.break-mobile() { width: auto; - max-width: $break-mobile; + max-width: breakpoints.$break-mobile; } .components-dropdown-menu__menu { @@ -287,7 +293,7 @@ html.interface-interface-skeleton__html-container { } .components-popover.interface-more-menu-dropdown__content { - z-index: z-index( '.components-popover.interface-more-menu__content' ); + z-index: z-index.z-index( '.components-popover.interface-more-menu__content' ); } // pinned-items @@ -299,17 +305,17 @@ html.interface-interface-skeleton__html-container { .components-button:not( :first-child ) { display: none; - @include break-small() { + @include mixins.break-small() { display: flex; } } .components-button { - margin-left: $grid-unit-05; + margin-left: variables.$grid-unit-05; svg { - max-width: $icon-size; - max-height: $icon-size; + max-width: variables.$icon-size; + max-height: variables.$icon-size; } } } diff --git a/projects/packages/search/src/customberg/styles.scss b/projects/packages/search/src/customberg/styles.scss index 04738fdbe6d41..3c049e6da0525 100644 --- a/projects/packages/search/src/customberg/styles.scss +++ b/projects/packages/search/src/customberg/styles.scss @@ -1,10 +1,12 @@ -@import 'lib/base-styles'; +@use "@wordpress/base-styles/mixins"; +@use '@wordpress/base-styles/colors'; +@use 'lib/base-styles'; @import 'lib/wordpress-interface'; // In order to use mix-blend-mode, this element needs to have an explicitly set background-color // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations html.wp-toolbar { - background: $white; + background: colors.$white; } .jp-search-configure-sidebar .components-button.interface-complementary-area__pin-unpin-item { @@ -22,7 +24,7 @@ html.wp-toolbar { // Fix fill color for gridicons in dark mode .jp-search-configure-app-wrapper .jetpack-instant-search__overlay--dark .gridicon { - fill: $white; + fill: colors.$white; } -@include wordpress-admin-schemes(); +@include mixins.wordpress-admin-schemes(); diff --git a/projects/packages/search/src/dashboard/components/global-notices/style.scss b/projects/packages/search/src/dashboard/components/global-notices/style.scss index 0e9ca237a93cb..54f3bc3346341 100644 --- a/projects/packages/search/src/dashboard/components/global-notices/style.scss +++ b/projects/packages/search/src/dashboard/components/global-notices/style.scss @@ -1,12 +1,12 @@ +@use '../../scss/z-index'; @import "scss/calypso-colors"; @import "scss/calypso-mixins"; -@import 'scss/z-index'; .global-notices { text-align: right; pointer-events: none; - z-index: z-index( 'root', '.global-notices' ); + z-index: z-index.z-index( 'root', '.global-notices' ); position: fixed; top: auto; right: 0; diff --git a/projects/packages/videopress/changelog/update-sass-wordpress-base-styles-as-modules b/projects/packages/videopress/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..5878751aac773 --- /dev/null +++ b/projects/packages/videopress/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-image-block-control/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-image-block-control/style.scss index 74d500b81c368..91c0adce1050f 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-image-block-control/style.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-image-block-control/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; // Hack to hide when the media modal is open // Otherwise in Firefox the popover remains visible on top of the modal @@ -8,11 +8,11 @@ } .current-media { - border-top: $border-width solid $gray-900; - margin-top: $grid-unit-10; - margin-right: -$grid-unit-10; - margin-left: -$grid-unit-10; - padding: $grid-unit-20 $grid-unit-20 0; + border-top: gb.$border-width solid gb.$gray-900; + margin-top: gb.$grid-unit-10; + margin-right: -( gb.$grid-unit-10 ); + margin-left: -( gb.$grid-unit-10 ); + padding: gb.$grid-unit-20 gb.$grid-unit-20 0; } .poster-image-block-control__wrapper .poster-panel-control__help{ @@ -20,7 +20,7 @@ } .poster-image-block-control__remove-button.poster-image-block-control__remove-button { - padding-left: $grid-unit-15; - padding-right: $grid-unit-15; + padding-left: gb.$grid-unit-15; + padding-right: gb.$grid-unit-15; } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/style.scss index a0a8ff825be04..8716004cbd94a 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/style.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/poster-panel/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; // Hack to hide the Image dropdown when the media modal is open body.modal-open .poster-panel__dropdown { @@ -50,11 +50,11 @@ body.modal-open .poster-panel__dropdown { } .poster-panel-card { - margin-top: $grid-unit-30; - margin-right: -$grid-unit-10; - margin-left: -$grid-unit-10; - padding-left: $grid-unit-20; - padding-right: $grid-unit-20; + margin-top: gb.$grid-unit-30; + margin-right: -( gb.$grid-unit-10 ); + margin-left: -( gb.$grid-unit-10 ); + padding-left: gb.$grid-unit-20; + padding-right: gb.$grid-unit-20; } .poster-panel__frame-picker__sandbox-wrapper { diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/tracks-control/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/tracks-control/style.scss index 3af8272be911f..c9d4d489d60ac 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/tracks-control/style.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/tracks-control/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .video-tracks-control__track_list, .video-tracks-control__track-form { @@ -22,7 +22,7 @@ } .video-tracks-control__track-item-kind { - color: $gray-700; + color: gb.$gray-700; margin-left: 4px; } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss index 7f2b6d72a674e..9a43295d64771 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; // Progress Footer @@ -8,7 +8,7 @@ width: 100%; align-items: center; justify-content: space-between; - border-top: 1px solid $gray-200; + border-top: 1px solid gb.$gray-200; padding-top: 8px; gap: 16px; @@ -21,7 +21,7 @@ } &__file-size { - color: $gray-600; + color: gb.$gray-600; } &__progress { @@ -76,7 +76,7 @@ } &__scrubber-help { - color: $gray-700; + color: gb.$gray-700; } &__poster-buttons { @@ -133,8 +133,8 @@ } &.is-error { - background-color: $gray-100; - border-left-color: $alert-red; + background-color: gb.$gray-100; + border-left-color: gb.$alert-red; border-radius: 2px; position: relative; } diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/editor.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/editor.scss index bc2f9538c7098..882fcb436f9a5 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/editor.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/editor.scss @@ -1,5 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; - .wp-block-jetpack-videopress { position: relative; diff --git a/projects/packages/videopress/src/client/block-editor/blocks/video/style.scss b/projects/packages/videopress/src/client/block-editor/blocks/video/style.scss index 44c2e7ba0dcfd..d52c5f3b96eb7 100644 --- a/projects/packages/videopress/src/client/block-editor/blocks/video/style.scss +++ b/projects/packages/videopress/src/client/block-editor/blocks/video/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-videopress { position: relative; @@ -12,7 +12,7 @@ margin-bottom: 1em; margin-top: 0.5em; - @include caption-style-theme(); + @include gb.caption-style-theme(); } .jetpack-videopress-player__wrapper { diff --git a/projects/packages/wordads/changelog/update-sass-wordpress-base-styles-as-modules b/projects/packages/wordads/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..5878751aac773 --- /dev/null +++ b/projects/packages/wordads/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/packages/wordads/src/dashboard/components/global-notices/style.scss b/projects/packages/wordads/src/dashboard/components/global-notices/style.scss index 0e9ca237a93cb..54f3bc3346341 100644 --- a/projects/packages/wordads/src/dashboard/components/global-notices/style.scss +++ b/projects/packages/wordads/src/dashboard/components/global-notices/style.scss @@ -1,12 +1,12 @@ +@use '../../scss/z-index'; @import "scss/calypso-colors"; @import "scss/calypso-mixins"; -@import 'scss/z-index'; .global-notices { text-align: right; pointer-events: none; - z-index: z-index( 'root', '.global-notices' ); + z-index: z-index.z-index( 'root', '.global-notices' ); position: fixed; top: auto; right: 0; diff --git a/projects/plugins/crm/changelog/update-sass-wordpress-base-styles-as-modules b/projects/plugins/crm/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..5878751aac773 --- /dev/null +++ b/projects/plugins/crm/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/plugins/crm/src/js/components/admin-page/styles.module.scss b/projects/plugins/crm/src/js/components/admin-page/styles.module.scss index f5106e7d262e7..b786320ce1cf6 100644 --- a/projects/plugins/crm/src/js/components/admin-page/styles.module.scss +++ b/projects/plugins/crm/src/js/components/admin-page/styles.module.scss @@ -1,11 +1,11 @@ -@import '@wordpress/base-styles/breakpoints'; +@use '@wordpress/base-styles/breakpoints'; .admin-page { // Neutralize the negative margin of Jetpack's admin page that do not // seem to fit in with the Jetpack CRM styling. margin-left: 20px; - @media ( max-width: $break-medium ) { + @media ( max-width: breakpoints.$break-medium ) { // Neutralize the negative margin of Jetpack's admin page that do not // seem to fit in with the Jetpack CRM styling. margin-left: 10px; diff --git a/projects/plugins/jetpack/_inc/client/components/button-group/style.scss b/projects/plugins/jetpack/_inc/client/components/button-group/style.scss index 0b45cab873639..4acc8f096918a 100644 --- a/projects/plugins/jetpack/_inc/client/components/button-group/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/button-group/style.scss @@ -1,4 +1,5 @@ @use 'sass:color'; +@use '../../scss/z-index'; @import "../../scss/calypso-colors"; .dops-button-group { @@ -10,7 +11,7 @@ &:focus { // fixes focus styles in stacking context position: relative; - z-index: z-index( 'button-group-parent', '.button-group .button:focus' ); + z-index: z-index.z-index( 'button-group-parent', '.button-group .button:focus' ); } &.is-primary:focus { diff --git a/projects/plugins/jetpack/_inc/client/components/chart/style.scss b/projects/plugins/jetpack/_inc/client/components/chart/style.scss index b68dd7225bd65..d335365f7b07f 100644 --- a/projects/plugins/jetpack/_inc/client/components/chart/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/chart/style.scss @@ -2,11 +2,11 @@ // Life is a statistical anomaly @use 'sass:color'; +@use '../../scss/z-index'; @import '../../scss/calypso-colors'; @import '../../scss/layout'; @import '../../scss/mixin_clear-fix'; @import '../../scss/mixin_long-content-fade'; -@import '../../scss/z-index'; @import '../../scss/mixin_icons'; .dops-chart { @@ -40,7 +40,7 @@ // Y-axis marker lines inside each chart__bar // (This is needed so that bars overlap correctly) .dops-chart__bar-marker { - z-index: z-index( 'root', '.dops-chart__bar-marker' ); + z-index: z-index.z-index( 'root', '.dops-chart__bar-marker' ); position: absolute; top: 0; width: 100%; @@ -178,7 +178,7 @@ right: 16%; // 1 bottom: 0; // 1 left: 16%; // 1 - z-index: z-index( 'root', '.dops-chart__bar-section' ); + z-index: z-index.z-index( 'root', '.dops-chart__bar-section' ); .dops-chart__bar:hover &.is-bar { background-color: var( --jp-green-40 ); @@ -189,7 +189,7 @@ } &.is-spacer { - z-index: z-index( 'root', '.dops-chart__bar-section.is-spacer' ); + z-index: z-index.z-index( 'root', '.dops-chart__bar-section.is-spacer' ); background-color: $transparent; } @@ -200,7 +200,7 @@ top: 160px; bottom: 0; left: 0; - z-index: z-index( 'root', '.dops-chart__bar-section.is-ghost::after' ); + z-index: z-index.z-index( 'root', '.dops-chart__bar-section.is-ghost::after' ); width: 100%; height: 40px; background-image: linear-gradient(to bottom, $transparent, rgba( color.adjust( $gray, $lightness: 30% ), .5 ) ); // TODO: needs to use default color for gradient @@ -329,7 +329,7 @@ font-size: 14px; line-height: 24px; clear: both; - z-index: z-index( 'root', '.dops-chart__empty' ); + z-index: z-index.z-index( 'root', '.dops-chart__empty' ); } .dops-chart__empty_notice { diff --git a/projects/plugins/jetpack/_inc/client/components/contextualized-connection/style.scss b/projects/plugins/jetpack/_inc/client/components/contextualized-connection/style.scss index 599a23fecad90..6ff686902e456 100644 --- a/projects/plugins/jetpack/_inc/client/components/contextualized-connection/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/contextualized-connection/style.scss @@ -1,5 +1,4 @@ -@import '@wordpress/base-styles/breakpoints'; -@import '@wordpress/base-styles/mixins'; +@use '@wordpress/base-styles/mixins'; @import '@automattic/jetpack-base-styles/style'; .jp-contextualized-connection { @@ -19,7 +18,7 @@ padding: 2rem; text-align: center; - @include break-medium { + @include mixins.break-medium { padding: 4rem; } @@ -86,7 +85,7 @@ grid-gap: 4rem; grid-template-columns: auto; - @include break-medium { + @include mixins.break-medium { grid-template-columns: repeat(3, 1fr); grid-gap: 3rem; } diff --git a/projects/plugins/jetpack/_inc/client/components/global-notices/style.scss b/projects/plugins/jetpack/_inc/client/components/global-notices/style.scss index 6ebc17cb1f654..8c5014818c993 100644 --- a/projects/plugins/jetpack/_inc/client/components/global-notices/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/global-notices/style.scss @@ -1,12 +1,12 @@ +@use '../../scss/z-index'; @import "../../scss/calypso-colors"; @import "../../scss/calypso-mixins"; -@import '../../scss/z-index'; .global-notices { text-align: right; pointer-events: none; - z-index: z-index( 'root', '.global-notices' ); + z-index: z-index.z-index( 'root', '.global-notices' ); position: fixed; top: auto; right: 0; diff --git a/projects/plugins/jetpack/_inc/client/components/popover/style.scss b/projects/plugins/jetpack/_inc/client/components/popover/style.scss index 5bbf5173931d6..b77b39fafb777 100644 --- a/projects/plugins/jetpack/_inc/client/components/popover/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/popover/style.scss @@ -1,5 +1,5 @@ @use 'sass:color'; -@import '../../scss/z-index'; +@use '../../scss/z-index'; @import '../../scss/calypso-colors'; /** @@ -8,7 +8,7 @@ .dops-popover { font-size: 11px; - z-index: z-index( 'root', '.dops-popover' ); + z-index: z-index.z-index( 'root', '.dops-popover' ); position: absolute; top: 0; left: 0 #{"/*rtl:ignore*/"}; @@ -45,7 +45,7 @@ line-height: 0; position: absolute; width: 0; - z-index: z-index( '.dops-popover', '.dops-popover .dops-popover__arrow' ); + z-index: z-index.z-index( '.dops-popover', '.dops-popover .dops-popover__arrow' ); } &.fade { @@ -175,7 +175,7 @@ } &.is-dialog-visible { - z-index: z-index( 'root', '.dops-popover.is-dialog-visible' ); /* Above .dialog */ + z-index: z-index.z-index( 'root', '.dops-popover.is-dialog-visible' ); /* Above .dialog */ } } diff --git a/projects/plugins/jetpack/_inc/client/components/search/style.scss b/projects/plugins/jetpack/_inc/client/components/search/style.scss index 3fa6296ba543f..75fd0fbeb7aae 100644 --- a/projects/plugins/jetpack/_inc/client/components/search/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/search/style.scss @@ -1,6 +1,6 @@ @use 'sass:color'; +@use '../../scss/z-index'; @import '../../scss/calypso-colors'; -@import '../../scss/z-index'; @import '../../scss/mixin_breakpoint'; @import '../../scss/mixin_long-content-fade'; @@ -16,7 +16,7 @@ position: relative; align-items: center; // places search above filters - z-index: z-index( 'root', '.dops-search' ); + z-index: z-index.z-index( 'root', '.dops-search' ); transition: all 0.15s ease-in-out; .dops-search__icon-navigation { @@ -58,7 +58,7 @@ .dops-search__close-icon { flex: 0 0 auto; width: 50px; - z-index: z-index( '.dops-search', '.dops-search .dops-search__open-icon' ); + z-index: z-index.z-index( '.dops-search', '.dops-search .dops-search__open-icon' ); color: var( --jp-black-80 ); cursor: pointer; @@ -113,7 +113,7 @@ .dops-search__input[type="search"] { flex: 1 1 auto; display: none; - z-index: z-index( '.dops-search', '.dops-search__input' ); + z-index: z-index.z-index( '.dops-search', '.dops-search__input' ); top: 0; border: none; border-radius: inherit; @@ -164,14 +164,14 @@ &::before { - @include long-content-fade( $size: 32px, $color: $white, $z-index: z-index( '.dops-search', '.dops-search__input' ) + 2 ); + @include long-content-fade( $size: 32px, $color: $white, $z-index: z-index.z-index( '.dops-search', '.dops-search__input' ) + 2 ); border-radius: inherit; } &.ltr { /*rtl:ignore*/ &::before { - @include long-content-fade( $direction: right, $size: 32px, $color: $white, $z-index: z-index( '.dops-search', '.dops-search__input' ) + 2 ); + @include long-content-fade( $direction: right, $size: 32px, $color: $white, $z-index: z-index.z-index( '.dops-search', '.dops-search__input' ) + 2 ); border-radius: inherit; } } @@ -192,7 +192,7 @@ height: 100%; top: 0; left: 0; - z-index: z-index( '.dops-search', '.dops-search__input' ) + 1; + z-index: z-index.z-index( '.dops-search', '.dops-search__input' ) + 1; } .dops-search.is-searching .dops-search__open-icon { diff --git a/projects/plugins/jetpack/_inc/client/components/section-nav/style.scss b/projects/plugins/jetpack/_inc/client/components/section-nav/style.scss index c5ec9750b435f..6a73ebac219f9 100644 --- a/projects/plugins/jetpack/_inc/client/components/section-nav/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/section-nav/style.scss @@ -1,6 +1,6 @@ @use 'sass:color'; +@use '../../scss/z-index'; @import '../../scss/calypso-colors'; -@import '../../scss/z-index'; @import '../../scss/mixin_breakpoint'; @import '../../scss/mixin_icons'; @import '../../scss/typography'; @@ -396,11 +396,11 @@ // -------- Nav Tabs - dropdowns -------- .dops-section-nav-tabs__dropdown { position: relative; - z-index: z-index( 'dops-section-nav-tabs__dropdown-parent', '.dops-section-nav-tabs__dropdown' ); + z-index: z-index.z-index( 'dops-section-nav-tabs__dropdown-parent', '.dops-section-nav-tabs__dropdown' ); width: 100%; &.is-open { - z-index: z-index( 'dops-section-nav-tabs__dropdown-parent', '.dops-section-nav-tabs__dropdown.is-open' ); + z-index: z-index.z-index( 'dops-section-nav-tabs__dropdown-parent', '.dops-section-nav-tabs__dropdown.is-open' ); } .dops-select-dropdown__container { diff --git a/projects/plugins/jetpack/_inc/client/components/select-dropdown/style.scss b/projects/plugins/jetpack/_inc/client/components/select-dropdown/style.scss index df8db18da630b..5c554dcbdbf77 100644 --- a/projects/plugins/jetpack/_inc/client/components/select-dropdown/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/select-dropdown/style.scss @@ -1,6 +1,6 @@ @use 'sass:color'; +@use '../../scss/z-index'; @import '../../scss/calypso-colors'; -@import '../../scss/z-index'; @import '../../scss/mixin_icons'; /** @@ -30,12 +30,12 @@ max-width: 100%; .dops-select-dropdown.is-open & { - z-index: z-index( 'root', '.dops-select-dropdown.is-open .dops-select-dropdown__container' ); + z-index: z-index.z-index( 'root', '.dops-select-dropdown.is-open .dops-select-dropdown__container' ); } .dops-accessible-focus &:focus, .dops-accessible-focus .dops-select-dropdown.is-open & { - z-index: z-index( 'root', '.dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container' ); + z-index: z-index.z-index( 'root', '.dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container' ); box-shadow: 0 0 0 2px $blue-light; .select-dropdown__header { @@ -251,7 +251,7 @@ .dops-accessible-focus &:focus, .dops-accessible-focus .dops-select-dropdown.is-open & { - z-index: z-index( 'root', '.dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container' ); + z-index: z-index.z-index( 'root', '.dops-accessible-focus .dops-select-dropdown.is-open .dops-select-dropdown__container' ); box-shadow: 0 0 0 2px var( --jp-green-30 ); .select-dropdown__header { diff --git a/projects/plugins/jetpack/_inc/client/notices/style.scss b/projects/plugins/jetpack/_inc/client/notices/style.scss index b8ea83c42faa5..13636409b72ff 100644 --- a/projects/plugins/jetpack/_inc/client/notices/style.scss +++ b/projects/plugins/jetpack/_inc/client/notices/style.scss @@ -1,14 +1,16 @@ +@use '../scss/z-index'; + .notices-list { overflow: hidden; &.is-pinned { width: calc( 100% - 272px - 32px - 32px ); - z-index: z-index( 'root', '.notices-list.is-pinned' ); + z-index: z-index.z-index( 'root', '.notices-list.is-pinned' ); position: fixed; top: 47px + 32px; .notice { - z-index: z-index( 'root', '.notices-list.is-pinned .notice' ); + z-index: z-index.z-index( 'root', '.notices-list.is-pinned .notice' ); } } } diff --git a/projects/plugins/jetpack/changelog/update-sass-wordpress-base-styles-as-modules b/projects/plugins/jetpack/changelog/update-sass-wordpress-base-styles-as-modules new file mode 100644 index 0000000000000..d5c4f136df96e --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-sass-wordpress-base-styles-as-modules @@ -0,0 +1,5 @@ +Significance: patch +Type: other +Comment: sass: `@use` rather than `@import` for `@wordpress/base-styles` and `@automattic/jetpack-base-styles/gutenberg-base-styles`. + + diff --git a/projects/plugins/jetpack/extensions/README.md b/projects/plugins/jetpack/extensions/README.md index 349f5039dafd4..281959f5e4913 100644 --- a/projects/plugins/jetpack/extensions/README.md +++ b/projects/plugins/jetpack/extensions/README.md @@ -352,7 +352,7 @@ See [Publicize](blocks/publicize/index.js) and [Shortlinks](blocks/shortlinks/in To stay consistent with Gutenberg, your extensions should follow [Gutenberg styles and visuals](https://wordpress.org/gutenberg/handbook/designers-developers/designers/block-design/). -Use Gutenberg color variables where possible by importing `@automattic/jetpack-base-styles/gutenberg-base-styles`, which in turn imports all variables and mixins published in [`@wordpress/base-styles`](https://github.com/WordPress/gutenberg/tree/983c60f25e4bdb7432fde7afdf2b4cc16640f01e/packages/base-styles) package. +Use Gutenberg color variables where possible by using `@automattic/jetpack-base-styles/gutenberg-base-styles`, which in turn imports all variables and mixins published in [`@wordpress/base-styles`](https://github.com/WordPress/gutenberg/tree/983c60f25e4bdb7432fde7afdf2b4cc16640f01e/packages/base-styles) package. The build pipeline also supports [Color studio](https://github.com/Automattic/color-studio) via SASS variables (`$studio-pink-50`) and CSS custom properties (`var( --studio-pink-50 )`) without specifically importing them first. Prefer CSS custom properties when possible. diff --git a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss index cd8484f16fa78..f290f5ec88a05 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/blogging-prompt/style.scss @@ -1,7 +1,7 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .jetpack-blogging-prompt { - border: 1px solid $gray-300; + border: 1px solid gb.$gray-300; border-radius: 2px; box-sizing: border-box; padding: 24px; @@ -11,7 +11,7 @@ background-position: -5px center; background-size: 24px 24px; font-size: 14px; - margin-bottom: $grid-unit-20; + margin-bottom: gb.$grid-unit-20; padding-inline-start: 22px; &.is-bloganuary-icon { @@ -23,7 +23,7 @@ &__text { font-size: 24px; - margin-bottom: $grid-unit-20; + margin-bottom: gb.$grid-unit-20; } &__answers-link { @@ -37,7 +37,7 @@ } &__answers-gravatar { - border: 2px solid $white; + border: 2px solid gb.$white; border-radius: 50%; height: 24px; vertical-align: middle; @@ -58,8 +58,8 @@ &.is-style-quote { border: none; - border-inline-start: 4px solid $gray-800; - margin-bottom: $grid-unit-20; + border-inline-start: 4px solid gb.$gray-800; + margin-bottom: gb.$grid-unit-20; padding: 0 24px; } diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/common.scss b/projects/plugins/jetpack/extensions/blocks/blogroll/common.scss index dfeb103adc2df..1b6465bf63836 100644 --- a/projects/plugins/jetpack/extensions/blocks/blogroll/common.scss +++ b/projects/plugins/jetpack/extensions/blocks/blogroll/common.scss @@ -1,10 +1,10 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; $jetpack-blogroll-item-container: bitem; @mixin break-bloroll-container-mobile() { - @container #{ ($jetpack-blogroll-item-container)} (min-width: #{ ($break-mobile) }) { + @container #{ ($jetpack-blogroll-item-container)} (min-width: #{ (gb.$break-mobile) }) { @content; } } diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/editor.scss b/projects/plugins/jetpack/extensions/blocks/business-hours/editor.scss index 67f800e635710..bfad91faac810 100644 --- a/projects/plugins/jetpack/extensions/blocks/business-hours/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/business-hours/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-business-hours { overflow: hidden; @@ -29,7 +29,7 @@ // The Site Editor iframe doesn't include common styles, // from which the font size of the labels are inherited. // https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/base-styles/_variables.scss#L16 - font-size: $default-font-size; + font-size: gb.$default-font-size; } .components-base-control__field { @@ -132,14 +132,14 @@ */ @mixin editor-area-is-small { - @media ( max-width: $break-xlarge ) { + @media ( max-width: gb.$break-xlarge ) { .is-sidebar-opened { @content; } } - @media ( max-width: $break-small ) { + @media ( max-width: gb.$break-small ) { @content; } diff --git a/projects/plugins/jetpack/extensions/blocks/donations/common.scss b/projects/plugins/jetpack/extensions/blocks/donations/common.scss index 5aeed297ef003..17016bea84d48 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/common.scss +++ b/projects/plugins/jetpack/extensions/blocks/donations/common.scss @@ -1,15 +1,15 @@ // Common styles for both views (editor and frontend). -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-donations { .donations__container { - border: 1px solid $gray-400; + border: 1px solid gb.$gray-400; } .donations__nav { display: flex; - border-bottom: 1px solid $gray-400; + border-bottom: 1px solid gb.$gray-400; } .donations__nav-item { @@ -19,12 +19,12 @@ text-align: center; font-size: 16px; padding: 12px; - border-inline-start: 1px solid $gray-400; - background: $white; - color: $gray-900; + border-inline-start: 1px solid gb.$gray-400; + background: gb.$white; + color: gb.$gray-900; cursor: pointer; - @include break-small() { + @include gb.break-small() { padding: 16px 24px; } @@ -33,8 +33,8 @@ } &.is-active { - background: $gray-900; - color: $white; + background: gb.$gray-900; + color: gb.$white; cursor: default; } } @@ -42,7 +42,7 @@ .donations__content { padding: 16px; - @include break-small() { + @include gb.break-small() { padding: 32px; } @@ -50,7 +50,7 @@ p { margin: 0 0 16px; - @include break-small() { + @include gb.break-small() { margin: 0 0 24px; } } @@ -61,7 +61,7 @@ display: flex; flex-wrap: wrap; - @include break-small() { + @include gb.break-small() { margin: 0 0 24px; } } @@ -69,9 +69,9 @@ .donations__amount { display: inline-block; padding: 16px 24px; - background-color: $white; - color: $gray-900; - border: 1px solid $gray-400; + background-color: gb.$white; + color: gb.$gray-900; + border: 1px solid gb.$gray-400; margin-inline-end: 8px; margin-bottom: 8px; font-weight: 600; @@ -79,7 +79,7 @@ white-space: nowrap; &.has-error { - box-shadow: 0 0 0 1px $white, 0 0 0 3px $alert-red; + box-shadow: 0 0 0 1px gb.$white, 0 0 0 3px gb.$alert-red; outline: 2px solid transparent; outline-offset: -2px; } @@ -95,7 +95,7 @@ margin-bottom: 16px; margin-top: 16px; - @include break-small() { + @include gb.break-small() { margin-bottom: 32px; margin-top: 32px; } diff --git a/projects/plugins/jetpack/extensions/blocks/donations/editor.scss b/projects/plugins/jetpack/extensions/blocks/donations/editor.scss index 005869c11fb5c..b6009b8eacf04 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/donations/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import './common'; .editor-styles-wrapper .wp-block-jetpack-donations { @@ -7,7 +7,7 @@ cursor: text; &.has-focus { - box-shadow: 0 0 0 1px $white, 0 0 0 3px var( --wp-admin-theme-color ); + box-shadow: 0 0 0 1px gb.$white, 0 0 0 3px var( --wp-admin-theme-color ); outline: 2px solid transparent; outline-offset: -2px; } @@ -29,12 +29,12 @@ } .donations__amount [data-rich-text-placeholder]::after { - color: $gray-400; + color: gb.$gray-400; opacity: 1; } .donations__custom-amount .donations__amount-value { - color: $gray-400; + color: gb.$gray-400; } .donations__donate-button-wrapper:not( .alignleft ):not( .alignright ) { diff --git a/projects/plugins/jetpack/extensions/blocks/donations/view.scss b/projects/plugins/jetpack/extensions/blocks/donations/view.scss index bbfa57c00edeb..9cf2d70b30481 100644 --- a/projects/plugins/jetpack/extensions/blocks/donations/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/donations/view.scss @@ -1,5 +1,5 @@ @use "sass:math"; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import './common'; @import '../../shared/memberships'; @@ -27,9 +27,9 @@ &::before { content: ''; - background-color: $gray-600; - width: $spinner-size; - height: $spinner-size; + background-color: gb.$gray-600; + width: gb.$spinner-size; + height: gb.$spinner-size; opacity: 0.7; border-radius: 100%; position: absolute; @@ -40,16 +40,16 @@ &::after { content: ''; - background-color: $white; - width: math.div($spinner-size, 4.5); - height: math.div($spinner-size, 4.5); + background-color: gb.$white; + width: math.div(gb.$spinner-size, 4.5); + height: math.div(gb.$spinner-size, 4.5); border-radius: 100%; position: absolute; top: 50%; inset-inline-start: 50%; - margin-inline-start: math.div(-$spinner-size, 3); - margin-top: math.div(-$spinner-size, 3); - transform-origin: math.div($spinner-size, 3) math.div($spinner-size, 3); + margin-inline-start: math.div(-( gb.$spinner-size ), 3); + margin-top: math.div(-( gb.$spinner-size ), 3); + transform-origin: math.div(gb.$spinner-size, 3) math.div(gb.$spinner-size, 3); animation: spinner 1s infinite linear; } } @@ -82,7 +82,7 @@ cursor: pointer; &.is-selected { - box-shadow: 0 0 0 1px $white, 0 0 0 3px var( --wp-admin-theme-color ); + box-shadow: 0 0 0 1px gb.$white, 0 0 0 3px var( --wp-admin-theme-color ); outline: 2px solid transparent; outline-offset: -2px; } @@ -98,7 +98,7 @@ &:empty::after { content: attr( data-empty-text ); - color: $gray-400; + color: gb.$gray-400; } &:focus { diff --git a/projects/plugins/jetpack/extensions/blocks/gif/editor.scss b/projects/plugins/jetpack/extensions/blocks/gif/editor.scss index c352b2c3a54b9..8a806007507f6 100644 --- a/projects/plugins/jetpack/extensions/blocks/gif/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/gif/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-gif { @@ -75,7 +75,7 @@ width: calc( 100% / 10 - 4px ); &:hover { - box-shadow: 0 0 0 1px $gray-600; + box-shadow: 0 0 0 1px gb.$gray-600; } &:focus { @@ -94,6 +94,6 @@ } svg path { - fill: $gray-200; + fill: gb.$gray-200; } } diff --git a/projects/plugins/jetpack/extensions/blocks/gif/style.scss b/projects/plugins/jetpack/extensions/blocks/gif/style.scss index 381205f1fef33..3d2627f367907 100644 --- a/projects/plugins/jetpack/extensions/blocks/gif/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/gif/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-gif { clear: both; @@ -22,7 +22,7 @@ .wp-block-jetpack-gif-caption { margin-top: 0.5em; margin-bottom: 1em; - color: $gray-600; + color: gb.$gray-600; text-align: center; } diff --git a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/editor.scss b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/editor.scss index 9ed96ab124650..cb6f106ebb775 100644 --- a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/editor.scss @@ -1,3 +1,4 @@ +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import './view'; .wp-block-jetpack-google-docs-embed { @@ -56,7 +57,7 @@ // Unless these have a min-width, they collapse when floated. &__wrapper { - min-width: $break-zoomed-in; + min-width: gb.$break-zoomed-in; } } } diff --git a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/view.scss b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/view.scss index b4c2cd4081270..ebb7a21feeace 100644 --- a/projects/plugins/jetpack/extensions/blocks/google-docs-embed/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/google-docs-embed/view.scss @@ -1,7 +1,7 @@ /** * Shared Editor and Front End styles for Google Docs */ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; /* style the error message */ .wp-block-jetpack-google-docs-embed { @@ -23,7 +23,7 @@ &.alignleft { - @media only screen and (min-width: $break-small) { + @media only screen and (min-width: gb.$break-small) { float: left; margin-right: 20px !important; } @@ -31,7 +31,7 @@ &.alignright { - @media only screen and (min-width: $break-small) { + @media only screen and (min-width: gb.$break-small) { float: right; margin-left: 20px !important; } diff --git a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/editor.scss b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/editor.scss index b7820a37fdd69..0d341b860624a 100644 --- a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/editor.scss @@ -1,9 +1,10 @@ +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import './view'; .wp-block-jetpack-instagram-gallery .components-placeholder { .components-radio-control { - margin-bottom: $default-block-margin; + margin-bottom: gb.$default-block-margin; label { font-weight: 400; @@ -11,8 +12,8 @@ } .wp-block-jetpack-instagram-gallery__new-account-instructions { - font-family: $default-font; - font-size: $default-font-size; + font-family: gb.$default-font; + font-size: gb.$default-font-size; } } @@ -114,7 +115,7 @@ @supports ( display: grid ) { - @media ( max-width: $break-small ) { + @media ( max-width: gb.$break-small ) { .wp-block-jetpack-instagram-gallery__grid.is-stacked-on-mobile { diff --git a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/view.scss b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/view.scss index 667fb365290b2..2df65588b9df6 100644 --- a/projects/plugins/jetpack/extensions/blocks/instagram-gallery/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/instagram-gallery/view.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-instagram-gallery__grid { align-content: stretch; @@ -27,7 +27,7 @@ } } -@media ( max-width: $break-small ) { +@media ( max-width: gb.$break-small ) { .wp-block-jetpack-instagram-gallery__grid.is-stacked-on-mobile .wp-block-jetpack-instagram-gallery__grid-post { @@ -42,7 +42,7 @@ grid-gap: 10px; grid-auto-columns: 1fr; - @media ( max-width: $break-small ) { + @media ( max-width: gb.$break-small ) { &.is-stacked-on-mobile { display: block; diff --git a/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss b/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss index d2ec5736bfeb5..990d63519f96e 100644 --- a/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/mailchimp/view.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '../../shared/styles/jetpack-variables'; @import "../../shared/styles/align"; @@ -42,7 +42,7 @@ &.wp-block-jetpack-mailchimp_error { background-color: var( --color-error ); - color: $white; + color: gb.$white; } &.wp-block-jetpack-mailchimp_processing { @@ -56,7 +56,7 @@ &.wp-block-jetpack-mailchimp_success { background-color: var( --color-success ); - color: $white; + color: gb.$white; } } diff --git a/projects/plugins/jetpack/extensions/blocks/map/add-point/style.scss b/projects/plugins/jetpack/extensions/blocks/map/add-point/style.scss index 87202f97ece91..73073b806df93 100644 --- a/projects/plugins/jetpack/extensions/blocks/map/add-point/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/map/add-point/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .component__add-point { position: absolute; @@ -49,6 +49,6 @@ float: right; path { - color: $gray-200; + color: gb.$gray-200; } } diff --git a/projects/plugins/jetpack/extensions/blocks/map/style.scss b/projects/plugins/jetpack/extensions/blocks/map/style.scss index 55f4b66153b06..7705b3cb66ea9 100644 --- a/projects/plugins/jetpack/extensions/blocks/map/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/map/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-map { @@ -13,7 +13,7 @@ .wp-block-jetpack-map__gm-container { width: 100%; overflow: hidden; - background: $gray-200; + background: gb.$gray-200; min-height: 400px; text-align: start; } diff --git a/projects/plugins/jetpack/extensions/blocks/markdown/editor.scss b/projects/plugins/jetpack/extensions/blocks/markdown/editor.scss index 3c261b3709edf..386b6eef88a46 100644 --- a/projects/plugins/jetpack/extensions/blocks/markdown/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/markdown/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-markdown__placeholder { opacity: 0.62; // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L72 @@ -51,7 +51,7 @@ hr { border: none; - border-bottom: 2px solid $gray-100; + border-bottom: 2px solid gb.$gray-100; margin: 2em auto; max-width: 100px; } @@ -61,7 +61,7 @@ } blockquote { - border-left: 4px solid $black; + border-left: 4px solid gb.$black; margin-left: 0; margin-right: 0; padding-left: 1em; @@ -88,12 +88,12 @@ // See https://github.com/WordPress/gutenberg/blob/db7decd27f7c476684bc8edde381ffab4c916cb2/packages/block-editor/src/components/rich-text/style.scss#L28-L39 code, pre { - color: $gray-900; - font-family: $editor-html-font; + color: gb.$gray-900; + font-family: gb.$editor-html-font; } code { - background: $gray-100; + background: gb.$gray-100; border-radius: 2px; font-size: inherit; // This is necessary to override upstream CSS. padding: 2px; @@ -101,8 +101,8 @@ pre { border-radius: 4px; - border: 1px solid $gray-200; - font-size: $text-editor-font-size; + border: 1px solid gb.$gray-200; + font-size: gb.$text-editor-font-size; padding: 0.8em 1em; code { @@ -135,9 +135,9 @@ .wp-block-jetpack-markdown { .wp-block-jetpack-markdown__editor { - font-family: $editor-html-font; - font-size: $text-editor-font-size; - color: $gray-900; + font-family: gb.$editor-html-font; + font-size: gb.$text-editor-font-size; + color: gb.$gray-900; &:focus { border-color: transparent; diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/editor.scss b/projects/plugins/jetpack/extensions/blocks/opentable/editor.scss index 676de4e47a5eb..9936d2a04142f 100644 --- a/projects/plugins/jetpack/extensions/blocks/opentable/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/opentable/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; /** * Editor styles for OpenTable @@ -136,7 +136,7 @@ } .editor-styles-wrapper & .components-form-token-field__suggestions-list { - font-family: $default-font; + font-family: gb.$default-font; text-align: left; padding: 0; margin: 0; diff --git a/projects/plugins/jetpack/extensions/blocks/payments-intro/editor.scss b/projects/plugins/jetpack/extensions/blocks/payments-intro/editor.scss index edba4548bbd71..a4a2a40074582 100644 --- a/projects/plugins/jetpack/extensions/blocks/payments-intro/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/payments-intro/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-payments-intro { @@ -20,13 +20,13 @@ .wp-payments-intro-pattern-picker__opener { width: min-content; - margin-top: $grid-unit-20; + margin-top: gb.$grid-unit-20; } .wp-block-jetpack-payments-intro__pattern-picker-selection-content .block-editor-block-patterns-list { display: grid; grid-template-columns: 1fr 1fr 1fr; - grid-gap: $grid-unit-10; + grid-gap: gb.$grid-unit-10; .block-editor-block-patterns-list__list-item { margin-bottom: 0; @@ -49,16 +49,16 @@ .wp-block-jetpack-payments-intro__pattern-picker__selection-modal { // To keep modal dimensions consistent as subsections are navigated, width // and height are used instead of max-(width/height). - @include break-small() { - width: calc(100% - #{ $grid-unit-20 * 2 }); - height: calc(100% - #{ $header-height * 2 }); + @include gb.break-small() { + width: calc(100% - #{ gb.$grid-unit-20 * 2 }); + height: calc(100% - #{ gb.$header-height * 2 }); } - @include break-medium() { - width: $break-medium - $grid-unit-20 * 2; + @include gb.break-medium() { + width: gb.$break-medium - gb.$grid-unit-20 * 2; } - @include break-large() { + @include gb.break-large() { height: 80%; width: 80%; max-height: none; @@ -71,13 +71,13 @@ flex-direction: row; flex-wrap: wrap; width: 100%; - margin: $grid-unit-20 0; + margin: gb.$grid-unit-20 0; padding: 0; list-style: none; > li { list-style: none; - margin: $grid-unit-10 ( $grid-unit-10 + $grid-unit-15 ) 0 0; + margin: gb.$grid-unit-10 ( gb.$grid-unit-10 + gb.$grid-unit-15 ) 0 0; flex-shrink: 1; width: 75px; text-align: center; @@ -89,11 +89,11 @@ } .wp-block-jetpack-payments-intro__variation-picker__variation { - padding: $grid-unit-10; + padding: gb.$grid-unit-10; } .wp-block-jetpack-payments-intro__variation-picker__variation-label { - font-family: $default-font; + font-family: gb.$default-font; font-size: 12px; display: block; line-height: 1.4; @@ -110,7 +110,7 @@ width: auto; &.is-secondary { - background-color: $white; + background-color: gb.$white; } } diff --git a/projects/plugins/jetpack/extensions/blocks/paywall/editor.scss b/projects/plugins/jetpack/extensions/blocks/paywall/editor.scss index 492886e9032d7..60ef4b7111389 100644 --- a/projects/plugins/jetpack/extensions/blocks/paywall/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/paywall/editor.scss @@ -1,7 +1,7 @@ /** * Editor styles for Paywall */ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-paywall-block { display: flex; @@ -11,9 +11,9 @@ // Label span { - font-size: $default-font-size; + font-size: gb.$default-font-size; text-transform: uppercase; - font-family: $default-font; + font-family: gb.$default-font; padding: 0 8px; white-space: nowrap; text-align: center; @@ -39,4 +39,4 @@ .block-editor-block-inspector .jetpack-subscribe-newsletters-panel .components-base-control { margin-bottom: 0; -} \ No newline at end of file +} diff --git a/projects/plugins/jetpack/extensions/blocks/podcast-player/style.scss b/projects/plugins/jetpack/extensions/blocks/podcast-player/style.scss index 18ff53ede7107..f8f7ead4fb4fd 100644 --- a/projects/plugins/jetpack/extensions/blocks/podcast-player/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/podcast-player/style.scss @@ -1,7 +1,7 @@ /** * Podcast Player block shared styles (editor & front-end). */ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; $gutter-s: 10px; $gutter-m: 15px; @@ -10,10 +10,10 @@ $cover-image-size: 80px; $current-track-title-font-size: 24px; $current-track-title-icon-size: 27px; $track-status-icon-size: 22px; -$jetpack-podcast-player-primary: $black; -$jetpack-podcast-player-secondary: $gray-400; -$jetpack-podcast-player-background: $white; -$jetpack-podcast-player-error: $alert-red; +$jetpack-podcast-player-primary: gb.$black; +$jetpack-podcast-player-secondary: gb.$gray-400; +$jetpack-podcast-player-background: gb.$white; +$jetpack-podcast-player-error: gb.$alert-red; .jetpack-podcast-player--visually-hidden { position: absolute !important; @@ -159,7 +159,7 @@ $jetpack-podcast-player-error: $alert-red; } .jetpack-podcast-player__podcast-title { - font-size: $editor-font-size; + font-size: gb.$editor-font-size; margin: 0; color: inherit; } @@ -178,8 +178,8 @@ $jetpack-podcast-player-error: $alert-red; .jetpack-podcast-player__track { margin: 0; - font-size: $editor-font-size; - line-height: $editor-line-height; + font-size: gb.$editor-font-size; + line-height: gb.$editor-line-height; color: var( --jetpack-podcast-player-secondary ); &:not( .is-active ):not( .has-secondary ) { @@ -225,7 +225,7 @@ $jetpack-podcast-player-error: $alert-red; display: block; width: $track-status-icon-size; height: $track-status-icon-size; - margin-top: ( $editor-font-size * $editor-line-height - $track-status-icon-size ) * 0.5; // center vertically + margin-top: ( gb.$editor-font-size * gb.$editor-line-height - $track-status-icon-size ) * 0.5; // center vertically fill: inherit; } } @@ -278,11 +278,11 @@ $jetpack-podcast-player-error: $alert-red; order: 99; // high number to make it always appear after the audio player padding: 0 $gutter-l; margin: 0 0 $gutter-l 0; - font-size: $editor-font-size; - line-height: $editor-line-height; + font-size: gb.$editor-font-size; + line-height: gb.$editor-line-height; color: inherit; overflow: hidden; - max-height: 4em * $editor-line-height; // IE11 fallback for line-clamp. + max-height: 4em * gb.$editor-line-height; // IE11 fallback for line-clamp. @supports ( display: -webkit-box ) { // Crop the description if too long. diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss index dbce5370629a0..53771b0dbd6bd 100644 --- a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss @@ -1,17 +1,17 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-premium-content-container .premium-content-tabs { align-items: center; - background: $white; - color: $gray-700; + background: gb.$white; + color: gb.$gray-700; display: flex; flex-wrap: wrap; - font-family: $default-font; - font-size: $default-font-size; + font-family: gb.$default-font; + font-size: gb.$default-font-size; position: relative; margin: 0 0 0 -1px; padding: 8px 14px; - border: 1px solid $gray-900; + border: 1px solid gb.$gray-900; border-radius: 2px; } @@ -65,7 +65,7 @@ %button-outline-style { background-color: unset; - color: $gray-800; + color: gb.$gray-800; } .wp-block-premium-content-login-button, diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss b/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss index 3d76529ca76e1..b8c8088c15248 100644 --- a/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss +++ b/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; /** * The following styles get applied both on the front of your site @@ -33,7 +33,7 @@ %button-outline-style { background-color: unset; - color: $gray-800; + color: gb.$gray-800; } .wp-block-premium-content-login-button, diff --git a/projects/plugins/jetpack/extensions/blocks/rating-star/style.scss b/projects/plugins/jetpack/extensions/blocks/rating-star/style.scss index c2cbc0531a0f8..fa6bfc04417e3 100644 --- a/projects/plugins/jetpack/extensions/blocks/rating-star/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/rating-star/style.scss @@ -1,5 +1,5 @@ +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '../../shared/styles/jetpack-variables'; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; // Editor and View styles .wp-block-jetpack-rating-star { @@ -16,7 +16,7 @@ margin-inline-end: 0.3em; // Mimic core focus style. - border-radius: $radius-block-ui; + border-radius: gb.$radius-block-ui; &:focus { box-shadow: 0 0 0 1px currentColor; diff --git a/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss b/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss index 28a47262e04c0..a7cc329666f31 100644 --- a/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/recurring-payments/editor.scss @@ -1,5 +1,5 @@ +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import './view'; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; .wp-block-jetpack-recurring-payments { width: 100%; @@ -109,10 +109,10 @@ transform: translateY( 14px ); // Use opacity to work in various editor styles. - background: $dark-gray-placeholder; + background: gb.$dark-gray-placeholder; .is-dark-theme & { - background: $light-gray-placeholder; + background: gb.$light-gray-placeholder; } } diff --git a/projects/plugins/jetpack/extensions/blocks/related-posts/editor.scss b/projects/plugins/jetpack/extensions/blocks/related-posts/editor.scss index 86b1a6087f6d1..8a61f0161c896 100644 --- a/projects/plugins/jetpack/extensions/blocks/related-posts/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/related-posts/editor.scss @@ -1,5 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; - .wp-block-jetpack-related-posts { .components-placeholder__learn-more { diff --git a/projects/plugins/jetpack/extensions/blocks/repeat-visitor/editor.scss b/projects/plugins/jetpack/extensions/blocks/repeat-visitor/editor.scss index 3ac14d04b24ed..d6039970e0c77 100644 --- a/projects/plugins/jetpack/extensions/blocks/repeat-visitor/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/repeat-visitor/editor.scss @@ -1,10 +1,10 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-repeat-visitor { .components-notice { margin: 1em 0 0; - color: $gray-900; + color: gb.$gray-900; } .components-radio-control__option { @@ -44,7 +44,7 @@ } .components-base-control__help { - color: $alert-red; + color: gb.$alert-red; font-size: 13px; } } diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss b/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss index 9cc2250452bd8..e1c5a18adc133 100644 --- a/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss @@ -1,5 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; - a.jetpack-sharing-button__button { color: inherit; } diff --git a/projects/plugins/jetpack/extensions/blocks/simple-payments/editor.scss b/projects/plugins/jetpack/extensions/blocks/simple-payments/editor.scss index e497fc8bdf1fb..8eba21248eae0 100644 --- a/projects/plugins/jetpack/extensions/blocks/simple-payments/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/simple-payments/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .wp-block-jetpack-simple-payments { @@ -7,8 +7,8 @@ grid-template-columns: 200px auto; grid-column-gap: 10px; - font-family: $default-font; - font-size: $default-font-size; + font-family: gb.$default-font; + font-size: gb.$default-font-size; } .simple-payments__field { diff --git a/projects/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss b/projects/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss index d2d251f219b89..a846642d6be16 100644 --- a/projects/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss +++ b/projects/plugins/jetpack/extensions/blocks/simple-payments/product-placeholder.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '../../shared/styles/jetpack-variables'; .simple-payments__loading { @@ -82,7 +82,7 @@ body .jetpack-simple-payments-wrapper .jetpack-simple-payments-details p { } input[type="number"].jetpack-simple-payments-items-number { - background: $white; + background: gb.$white; font-size: 16px; line-height: 1; max-width: 60px; diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/style.scss b/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/style.scss index 6e3cc76c690e0..53160c979b7a0 100644 --- a/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v1/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '../../../../shared/styles/jetpack-variables'; .wp-block-jetpack-slideshow { @@ -124,7 +124,7 @@ } &:focus { - outline: thin dotted $white; + outline: thin dotted gb.$white; outline-offset: -4px; } } @@ -191,7 +191,7 @@ background-color: rgba( 0, 0, 0, 0.5 ); box-sizing: border-box; bottom: 0; - color: $white; + color: gb.$white; cursor: text; left: 0; margin: 0 !important; @@ -272,7 +272,7 @@ } } -@media ( min-width: $break-small ) { +@media ( min-width: gb.$break-small ) { .wp-block-jetpack-slideshow { diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/style.scss b/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/style.scss index 6e3cc76c690e0..53160c979b7a0 100644 --- a/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/slideshow/deprecated/v2/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '../../../../shared/styles/jetpack-variables'; .wp-block-jetpack-slideshow { @@ -124,7 +124,7 @@ } &:focus { - outline: thin dotted $white; + outline: thin dotted gb.$white; outline-offset: -4px; } } @@ -191,7 +191,7 @@ background-color: rgba( 0, 0, 0, 0.5 ); box-sizing: border-box; bottom: 0; - color: $white; + color: gb.$white; cursor: text; left: 0; margin: 0 !important; @@ -272,7 +272,7 @@ } } -@media ( min-width: $break-small ) { +@media ( min-width: gb.$break-small ) { .wp-block-jetpack-slideshow { diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss b/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss index 22e9d803452e4..8285ef5f885be 100644 --- a/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/slideshow/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; // When slideshow block appears inside a layout grid block, // make it behave like a grid block to prevent grid blowout. @@ -43,7 +43,7 @@ &:hover, &:focus { - border: 1px solid $gray-600; + border: 1px solid gb.$gray-600; } } } diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/style.scss b/projects/plugins/jetpack/extensions/blocks/slideshow/style.scss index 7575377fa5190..4b9b4c6060ce2 100644 --- a/projects/plugins/jetpack/extensions/blocks/slideshow/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/slideshow/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '../../shared/styles/jetpack-variables'; .wp-block-jetpack-slideshow { @@ -125,7 +125,7 @@ } &:focus { - outline: thin dotted $white; + outline: thin dotted gb.$white; outline-offset: -4px; } } @@ -193,7 +193,7 @@ background-color: rgba( 0, 0, 0, 0.5 ); box-sizing: border-box; bottom: 0; - color: $white; + color: gb.$white; cursor: text; left: 0; margin: 0 !important; @@ -274,7 +274,7 @@ } } -@media ( min-width: $break-small ) { +@media ( min-width: gb.$break-small ) { .wp-block-jetpack-slideshow { diff --git a/projects/plugins/jetpack/extensions/blocks/story/editor.scss b/projects/plugins/jetpack/extensions/blocks/story/editor.scss index 013c92f185af2..95a68b5f973fa 100644 --- a/projects/plugins/jetpack/extensions/blocks/story/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/story/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import './player/style'; .wp-block-jetpack-story__add-item { @@ -26,7 +26,7 @@ &:hover, &:focus { - border: 1px solid $gray-600; + border: 1px solid gb.$gray-600; } } } diff --git a/projects/plugins/jetpack/extensions/blocks/story/player/style.scss b/projects/plugins/jetpack/extensions/blocks/story/player/style.scss index e6dbe731c9b7e..950ca10eddde3 100644 --- a/projects/plugins/jetpack/extensions/blocks/story/player/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/story/player/style.scss @@ -1,5 +1,5 @@ @use "sass:math"; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '../../../shared/styles/jetpack-variables'; @import './variables'; @@ -323,7 +323,7 @@ bottom: 30px; z-index: 3; - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { bottom: 50px; margin: 0 16px; } @@ -374,7 +374,7 @@ display: flex; // reapply initial styles - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { bottom: 30px; margin: 0 10px; } @@ -439,7 +439,7 @@ border-radius: 0; overflow: initial; - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { margin-top: 0; margin-bottom: 0; } @@ -463,7 +463,7 @@ line-height: 20px; align-items: center; - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { padding: 16px; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.63) 0%, rgba(0,0,0,0) 100%); @@ -484,7 +484,7 @@ height: 100%; } - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { width: 24px; height: 24px; margin: 0 12px 0 0; @@ -500,7 +500,7 @@ -webkit-line-clamp: 2; -webkit-box-orient: vertical; - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { font-size: 12px; } } @@ -522,7 +522,7 @@ display: none; } - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { margin-top: 0; margin-bottom: 0; top: 76px; @@ -535,7 +535,7 @@ .wp-story-overlay { - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { top: 0; bottom: 0; } @@ -546,7 +546,7 @@ .wp-story-next-slide { display: block; - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { display:block; position: absolute; top: 0; @@ -561,7 +561,7 @@ .wp-story-prev-slide { - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { left: 0; width: 33.33%; } @@ -569,7 +569,7 @@ .wp-story-next-slide { - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { right: 0; width: 66.66%; } @@ -584,7 +584,7 @@ bottom: 20px; margin: 0; - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { bottom: 36px; margin: 0 16px; } @@ -610,7 +610,7 @@ } } - @media ( max-width: $break-medium ) { + @media ( max-width: gb.$break-medium ) { bottom: 0; padding: 10px 16px; } diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss index 725089d3af8b0..89d02073eb6dc 100644 --- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss @@ -1,6 +1,6 @@ +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import './view'; @import './variables'; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; // inspired by from assets/shared/_animations loading-fade @keyframes tiled-gallery-img-placeholder { @@ -75,28 +75,28 @@ &.is-selected .tiled-gallery__item__move-menu, &.is-selected .tiled-gallery__item__inline-menu { - background: $white; - border: 1px solid $dark-gray-placeholder; - border-radius: $radius-block-ui; + background: gb.$white; + border: 1px solid gb.$dark-gray-placeholder; + border-radius: gb.$radius-block-ui; transition: box-shadow 0.2s ease-out; - @include reduce-motion("transition"); + @include gb.reduce-motion("transition"); &:hover { - box-shadow: $shadow-popover; + box-shadow: gb.$shadow-popover; } .components-button { - color: $dark-gray-placeholder; + color: gb.$dark-gray-placeholder; padding: 2px; - height: $button-size-small; + height: gb.$button-size-small; // Remove hover box shadows, since they clash with the container. &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover { box-shadow: none; } - @include break-small() { + @include gb.break-small() { // Use smaller buttons to fit when there are many columns. .columns-7 &, .columns-8 & { @@ -137,14 +137,14 @@ &:hover, &:focus { - border: 1px solid $gray-600; + border: 1px solid gb.$gray-600; } } } .tiled-gallery__item__move-menu, .tiled-gallery__item__inline-menu { - margin: $grid-unit-10; + margin: gb.$grid-unit-10; display: inline-flex; z-index: 20; @@ -152,11 +152,11 @@ color: transparent; } - @include break-small() { + @include gb.break-small() { // Use smaller buttons to fit when there are many columns. .columns-7 &, .columns-8 & { - padding: $grid-unit-05 * 0.5; + padding: gb.$grid-unit-05 * 0.5; } } } @@ -206,7 +206,7 @@ } .components-menu-item__button.is-active { - color: $gray-900; - box-shadow: 0 0 0 $active-item-outline-width $gray-600 !important; + color: gb.$gray-900; + box-shadow: 0 0 0 $active-item-outline-width gb.$gray-600 !important; } } diff --git a/projects/plugins/jetpack/extensions/blocks/top-posts/style.scss b/projects/plugins/jetpack/extensions/blocks/top-posts/style.scss index 4f62d3c9f1b31..4ef3ba7c8b346 100644 --- a/projects/plugins/jetpack/extensions/blocks/top-posts/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/top-posts/style.scss @@ -1,7 +1,7 @@ /** * Styles for Top Posts */ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import '../../shared/styles/jetpack-variables'; .wp-block-jetpack-top-posts { @@ -28,7 +28,7 @@ grid: auto / repeat( 6, 1fr ); gap: 16px 12px; - @media only screen and ( max-width: $break-small ) { + @media only screen and ( max-width: gb.$break-small ) { display: block; .jetpack-top-posts-mock-thumbnail { @@ -42,7 +42,7 @@ } .jetpack-top-posts-mock-thumbnail { - background-color: $gray-100; + background-color: gb.$gray-100; height: 0; padding-bottom: 75%; position: relative; diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/editor.scss b/projects/plugins/jetpack/extensions/blocks/videopress/editor.scss index d032c96bcf5b6..8b4488c6effe9 100644 --- a/projects/plugins/jetpack/extensions/blocks/videopress/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/videopress/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .no-videopress-media-placeholder { @@ -45,7 +45,7 @@ display: flex; place-content: space-between; align-items: center; - padding: $grid-unit-05 0 $grid-unit-05 $grid-unit-15; + padding: gb.$grid-unit-05 0 gb.$grid-unit-05 gb.$grid-unit-15; min-height: 23px; } @@ -56,14 +56,14 @@ .videopress-block-tracks-editor__single-track-editor-label-language { display: flex; - margin-top: $grid-unit-15; + margin-top: gb.$grid-unit-15; > .components-base-control { width: 50%; } > .components-base-control:first-child { - margin-right: $grid-unit-20; + margin-right: gb.$grid-unit-20; } } @@ -74,24 +74,24 @@ .videopress-block-tracks-editor__single-track-editor-buttons-container { display: flex; place-content: space-between; - margin-top: $grid-unit-40; + margin-top: gb.$grid-unit-40; min-height: 36px; } .videopress-block-tracks-editor__single-track-editor-upload-file-help { font-size: 12px; - color: $gray-700; - margin-top: $grid-unit-15; + color: gb.$gray-700; + margin-top: gb.$grid-unit-15; } .videopress-block-tracks-editor__single-track-editor-label { - color: $gray-700; + color: gb.$gray-700; text-transform: uppercase; font-size: 11px; font-weight: 500; display: block; - margin-top: $grid-unit-05; - margin-bottom: $grid-unit-15; + margin-top: gb.$grid-unit-05; + margin-bottom: gb.$grid-unit-15; } .videopress-block-tracks-editor > .components-popover__content > div { @@ -109,17 +109,17 @@ .videopress-block-tracks-editor__single-track-editor, .videopress-block-tracks-editor__track-list, .videopress-block-tracks-editor__add-tracks-container { - padding: $grid-unit-15; + padding: gb.$grid-unit-15; } .videopress-block-tracks-editor__single-track-editor .components-base-control { .components-base-control__label { - margin-bottom: $grid-unit-05; + margin-bottom: gb.$grid-unit-05; } .components-base-control__field { - margin-bottom: $grid-unit-15; + margin-bottom: gb.$grid-unit-15; } .components-text-control__input { @@ -127,7 +127,7 @@ } .components-input-control__label { - margin-bottom: $grid-unit-05; + margin-bottom: gb.$grid-unit-05; } } @@ -135,13 +135,13 @@ display: flex; .components-form-file-upload, .videopress-block-tracks-editor__single-track-editor-upload-file-label-name { - margin-inline-start: $grid-unit; + margin-inline-start: gb.$grid-unit; } } .videopress-block-tracks-editor__single-track-editor-error { - padding: $grid-unit-15 0; - color: $alert-red; + padding: gb.$grid-unit-15 0; + color: gb.$alert-red; } .uploader-block__logo { @@ -150,7 +150,7 @@ align-items: center; font-size: 24px; line-height: 29px; - margin-bottom: $grid-unit-15; + margin-bottom: gb.$grid-unit-15; padding: 0 20px; } @@ -164,7 +164,7 @@ justify-content: space-between; align-items: center; padding: 20px 20px 0; - border-top: 1px solid $gray-200; + border-top: 1px solid gb.$gray-200; box-sizing: border-box; - margin-top: $grid-unit-30; + margin-top: gb.$grid-unit-30; } diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/resumable-upload/style.scss b/projects/plugins/jetpack/extensions/blocks/videopress/resumable-upload/style.scss index 7a3a06fe18bdd..ceaaad69716ef 100644 --- a/projects/plugins/jetpack/extensions/blocks/videopress/resumable-upload/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/videopress/resumable-upload/style.scss @@ -1,17 +1,17 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .resumable-upload { - background: $white; - color: $gray-900; - font-family: $default-font; + background: gb.$white; + color: gb.$gray-900; + font-family: gb.$default-font; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 0; - border: 1px solid $gray-900; + border: 1px solid gb.$gray-900; border-radius: 2px; - font-size: $default-font-size; + font-size: gb.$default-font-size; } .resumable-upload__editor { @@ -56,10 +56,10 @@ } .resumable-upload__status, .resumable-upload__error { - border-top: 1px solid $gray-200; + border-top: 1px solid gb.$gray-200; width: 100%; box-sizing: border-box; - margin-top: $grid-unit-30; + margin-top: gb.$grid-unit-30; } .resumable-upload__status { @@ -68,7 +68,7 @@ align-items: center; padding: 20px 20px 0; flex-wrap: wrap; - gap: $grid-unit-15 $grid-unit-30; + gap: gb.$grid-unit-15 gb.$grid-unit-30; } .resumable-upload__error { @@ -81,8 +81,8 @@ } .resumable-upload__file-size { - color: $gray-700; - margin-left: $grid-unit-15; + color: gb.$gray-700; + margin-left: gb.$grid-unit-15; } .resumable-upload__progress { @@ -111,7 +111,7 @@ } .resumable-upload__select-file-name { - margin-left: $grid-unit-15; + margin-left: gb.$grid-unit-15; } .resumable-upload__actions { @@ -134,12 +134,12 @@ } .resumable-upload__error-text { - margin-top: $grid-unit-20; - font-family: $default-font; - color: $alert-red; + margin-top: gb.$grid-unit-20; + font-family: gb.$default-font; + color: gb.$alert-red; } .resumable-upload__error-cancel { - margin-top: $grid-unit-20; - margin-left: $grid-unit-15; + margin-top: gb.$grid-unit-20; + margin-left: gb.$grid-unit-15; } diff --git a/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/style.scss b/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/style.scss index 73baf102d6fc1..4c07a0d45bc7a 100644 --- a/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/videopress/uploading-editor/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .uploading-editor { width: 100%; @@ -51,7 +51,7 @@ } .uploading-editor__scrubber-help { - color: $gray-700; + color: gb.$gray-700; } .uploading-editor__upload-link { diff --git a/projects/plugins/jetpack/extensions/blocks/wordads/editor.scss b/projects/plugins/jetpack/extensions/blocks/wordads/editor.scss index 4f758fe7d0169..43a47ad3a44d9 100644 --- a/projects/plugins/jetpack/extensions/blocks/wordads/editor.scss +++ b/projects/plugins/jetpack/extensions/blocks/wordads/editor.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; [data-type='jetpack/wordads'][data-align='center'] .jetpack-wordads__ad { margin: 0 auto; @@ -35,8 +35,8 @@ } .components-menu-item__button.is-active { - color: $gray-900; - box-shadow: 0 0 0 $active-item-outline-width $gray-600 !important; + color: gb.$gray-900; + box-shadow: 0 0 0 $active-item-outline-width gb.$gray-600 !important; } } 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 b5a779b4d77d7..10b3ddcd4cebe 100644 --- a/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/editor.scss +++ b/projects/plugins/jetpack/extensions/extended-blocks/paid-blocks/editor.scss @@ -1,9 +1,6 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; @import "@automattic/color-studio/dist/color-variables"; -$icon-size: 10px; -$icon-background-color: #fff; - // Upgrade Banner. .jetpack-upgrade-plan-banner { @@ -12,7 +9,7 @@ $icon-background-color: #fff; justify-content: space-between; align-items: center; font-size: 14px; - font-family: $default-font; + font-family: gb.$default-font; text-transform: none; background: #000; padding: 0 20px; @@ -68,7 +65,7 @@ $icon-background-color: #fff; &.wp-block[data-align="left"] { .jetpack-upgrade-plan-banner__wrapper { - max-width: $content-width; + max-width: gb.$content-width; width: 100%; } } diff --git a/projects/plugins/jetpack/extensions/plugins/seo/editor.scss b/projects/plugins/jetpack/extensions/plugins/seo/editor.scss index 3cd8f2b979fd2..1419a20766e03 100644 --- a/projects/plugins/jetpack/extensions/plugins/seo/editor.scss +++ b/projects/plugins/jetpack/extensions/plugins/seo/editor.scss @@ -1,5 +1,3 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; - .jetpack-seo-message-box { width: 100%; } diff --git a/projects/plugins/jetpack/extensions/shared/clipboard-input.scss b/projects/plugins/jetpack/extensions/shared/clipboard-input.scss index 6f79c57c1c6fa..59fcc1c7ab90e 100644 --- a/projects/plugins/jetpack/extensions/shared/clipboard-input.scss +++ b/projects/plugins/jetpack/extensions/shared/clipboard-input.scss @@ -1,11 +1,11 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .jetpack-clipboard-input { display: flex; .components-text-control__input, .components-clipboard-button { - min-height: $button-size; + min-height: gb.$button-size; } .components-clipboard-button { diff --git a/projects/plugins/jetpack/extensions/shared/components/audio-player/style.scss b/projects/plugins/jetpack/extensions/shared/components/audio-player/style.scss index 14d6602129cd6..b97fdbda0f577 100644 --- a/projects/plugins/jetpack/extensions/shared/components/audio-player/style.scss +++ b/projects/plugins/jetpack/extensions/shared/components/audio-player/style.scss @@ -1,12 +1,12 @@ @use 'sass:color'; @use 'sass:meta'; @use 'sass:string'; -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; //Set the default values -$jetpack-audio-player-primary: $black; -$jetpack-audio-player-secondary: $gray-400; -$jetpack-audio-player-background: $white; +$jetpack-audio-player-primary: gb.$black; +$jetpack-audio-player-secondary: gb.$gray-400; +$jetpack-audio-player-background: gb.$white; //Bit of a hack to check for the existence of the podcast player values $jetpack-podcast-player-primary: false !default; diff --git a/projects/plugins/jetpack/extensions/shared/components/inspector-notice/style.scss b/projects/plugins/jetpack/extensions/shared/components/inspector-notice/style.scss index 2dddc37fa75d4..b6c0bfd312123 100644 --- a/projects/plugins/jetpack/extensions/shared/components/inspector-notice/style.scss +++ b/projects/plugins/jetpack/extensions/shared/components/inspector-notice/style.scss @@ -1,9 +1,9 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .jetpack-inspector-notice { padding: 24px; margin: 24px 16px; - background: $gray-100; + background: gb.$gray-100; border-radius: 4px; display: flex; align-items: center; diff --git a/projects/plugins/jetpack/extensions/shared/components/media-player-control/style.scss b/projects/plugins/jetpack/extensions/shared/components/media-player-control/style.scss index 8197b12d711b9..d4bf739d4db51 100644 --- a/projects/plugins/jetpack/extensions/shared/components/media-player-control/style.scss +++ b/projects/plugins/jetpack/extensions/shared/components/media-player-control/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .media-player-control__current-time { display: flex; @@ -8,7 +8,7 @@ font-size: 14px; &.is-disabled { - color: $gray-700; + color: gb.$gray-700; cursor: default; } } @@ -29,4 +29,4 @@ .dashicons { margin: 0; } -} \ No newline at end of file +} diff --git a/projects/plugins/jetpack/extensions/shared/components/product-management-controls/style.scss b/projects/plugins/jetpack/extensions/shared/components/product-management-controls/style.scss index c3fdbdf0fded2..66a13cf1c48be 100644 --- a/projects/plugins/jetpack/extensions/shared/components/product-management-controls/style.scss +++ b/projects/plugins/jetpack/extensions/shared/components/product-management-controls/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .product-management-control-inspector__product-title .components-base-control, .product-management-control-inspector__product-interval .components-base-control { @@ -31,7 +31,7 @@ } .product-management-control-nudge .product-management-control-nudge__info { - font-size: $default-font-size; + font-size: gb.$default-font-size; display: flex; flex-direction: row; line-height: 1.4; diff --git a/projects/plugins/jetpack/extensions/shared/components/stripe-nudge/style.scss b/projects/plugins/jetpack/extensions/shared/components/stripe-nudge/style.scss index 2682d358d1549..70be6efaf92ad 100644 --- a/projects/plugins/jetpack/extensions/shared/components/stripe-nudge/style.scss +++ b/projects/plugins/jetpack/extensions/shared/components/stripe-nudge/style.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .jetpack-stripe-nudge__banner .block-editor-warning__contents { align-items: center; @@ -9,8 +9,8 @@ background: var( --color-primary ); border-radius: 50%; box-sizing: content-box; - color: $white; - fill: $white; + color: gb.$white; + fill: gb.$white; flex-shrink: 0; margin-right: 16px; padding: 6px; diff --git a/projects/plugins/jetpack/extensions/shared/components/style.scss b/projects/plugins/jetpack/extensions/shared/components/style.scss index aeb22df77050c..1b33de113d805 100644 --- a/projects/plugins/jetpack/extensions/shared/components/style.scss +++ b/projects/plugins/jetpack/extensions/shared/components/style.scss @@ -1,21 +1,21 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; // Styling copied from Gutenberg's `@wordpress/block-editor` styling for the Warning component // so we can use it on the frontend. .block-editor-warning { - border: $border-width solid $gray-200; + border: gb.$border-width solid gb.$gray-200; padding: 10px 14px; .block-editor-warning__message { - line-height: $default-line-height; - font-family: $default-font; - font-size: $default-font-size; + line-height: gb.$default-line-height; + font-family: gb.$default-font; + font-size: gb.$default-font-size; } .block-editor-warning__actions { .components-button { - font-family: $default-font; + font-family: gb.$default-font; font-weight: inherit; text-decoration: none; } diff --git a/projects/plugins/jetpack/extensions/shared/jetpack-plugin-sidebar.scss b/projects/plugins/jetpack/extensions/shared/jetpack-plugin-sidebar.scss index 4af637b736abe..35f239aa1299e 100644 --- a/projects/plugins/jetpack/extensions/shared/jetpack-plugin-sidebar.scss +++ b/projects/plugins/jetpack/extensions/shared/jetpack-plugin-sidebar.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .interface-pinned-items, .interface-more-menu-dropdown__content { @@ -42,7 +42,7 @@ } .jetpack-logo__icon-triangle { - fill: $white !important; + fill: gb.$white !important; } } } diff --git a/projects/plugins/jetpack/extensions/shared/memberships.scss b/projects/plugins/jetpack/extensions/shared/memberships.scss index c0b3154ad23fe..5a5e8fd45e5fd 100644 --- a/projects/plugins/jetpack/extensions/shared/memberships.scss +++ b/projects/plugins/jetpack/extensions/shared/memberships.scss @@ -1,6 +1,5 @@ /* Additional styling to thickbox that displays modal */ /* stylelint-disable selector-max-id */ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; @keyframes jetpack-memberships_button__spinner-animation { diff --git a/projects/plugins/jetpack/extensions/shared/memberships/settings.scss b/projects/plugins/jetpack/extensions/shared/memberships/settings.scss index 360a2e481117b..495c51fb18612 100644 --- a/projects/plugins/jetpack/extensions/shared/memberships/settings.scss +++ b/projects/plugins/jetpack/extensions/shared/memberships/settings.scss @@ -1,4 +1,4 @@ -@import '@automattic/jetpack-base-styles/gutenberg-base-styles'; +@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb; .jetpack-inspector-notice { @@ -45,6 +45,6 @@ } .jetpack-subscribe-affirmation-loading { - background: $gray-400; - color: $gray-400; + background: gb.$gray-400; + color: gb.$gray-400; } diff --git a/projects/plugins/jetpack/modules/subscriptions/newsletter-widget/src/style.scss b/projects/plugins/jetpack/modules/subscriptions/newsletter-widget/src/style.scss index 3c0644a877359..c798d5fd3dc6d 100644 --- a/projects/plugins/jetpack/modules/subscriptions/newsletter-widget/src/style.scss +++ b/projects/plugins/jetpack/modules/subscriptions/newsletter-widget/src/style.scss @@ -1,11 +1,11 @@ @use 'sass:math'; -@import '@wordpress/base-styles/colors'; -@import '@wordpress/base-styles/variables'; +@use '@wordpress/base-styles/colors'; +@use '@wordpress/base-styles/variables'; -$spacing-xs: $grid-unit-05; // 4px -$spacing-sm: $grid-unit-10; // 8px -$spacing-md: $grid-unit-15; // 12px -$spacing-lg: $grid-unit-20; // 16px +$spacing-xs: variables.$grid-unit-05; // 4px +$spacing-sm: variables.$grid-unit-10; // 8px +$spacing-md: variables.$grid-unit-15; // 12px +$spacing-lg: variables.$grid-unit-20; // 16px .newsletter-widget { @@ -15,11 +15,11 @@ $spacing-lg: $grid-unit-20; // 16px } &__heading { - font-weight: $font-weight-medium !important; + font-weight: variables.$font-weight-medium !important; } &__footer { - background-color: $gray-100; + background-color: colors.$gray-100; padding: $spacing-md; } @@ -84,17 +84,17 @@ $spacing-lg: $grid-unit-20; // 16px height: 200px; &__tooltip { - background: $white; + background: colors.$white; padding: $spacing-sm; - border-radius: $radius-medium; - box-shadow: $elevation-x-small; - font-size: $font-size-small; - color: $gray-900; + border-radius: variables.$radius-medium; + box-shadow: variables.$elevation-x-small; + font-size: variables.$font-size-small; + color: colors.$gray-900; min-width: 120px; } &__tooltip-date { - font-weight: $font-weight-medium; + font-weight: variables.$font-weight-medium; margin-bottom: $spacing-xs; } @@ -112,7 +112,7 @@ $spacing-lg: $grid-unit-20; // 16px &__tooltip-indicator { width: $spacing-sm; height: $spacing-sm; - border-radius: $radius-round; + border-radius: variables.$radius-round; margin-right: $spacing-xs; }