Remove sass tilde imports (#52800)

* Remove sass tilde imports

* Fix wp stylesheet import

apps/editing-toolkit/editing-toolkit-plugin/common/hide-plugin-buttons-mobile.scss

@@ -1,6 +1,6 @@
-@import '~@wordpress/base-styles/mixins';
-@import '~@wordpress/base-styles/variables';
-@import '~@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/breakpoints';
 
 .interface-pinned-items > button:not( :first-child ) {
 	@media ( max-width: $break-medium ) {

apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-menu/styles.scss

@@ -1,4 +1,4 @@
-@import '~@automattic/onboarding/styles/mixins';
+@import '@automattic/onboarding/styles/mixins';
 
 .nux-launch-menu {
 	h4 {

apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-modal/styles.scss

@@ -1,10 +1,10 @@
-@import '~@wordpress/base-styles/mixins';
-@import '~@wordpress/base-styles/variables';
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/z-index';
-@import '~@automattic/typography/styles/variables';
-@import '~@automattic/onboarding/styles/variables';
-@import '~@automattic/onboarding/styles/mixins';
+@import '@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/z-index';
+@import '@automattic/typography/styles/variables';
+@import '@automattic/onboarding/styles/variables';
+@import '@automattic/onboarding/styles/mixins';
 
 body.has-nux-launch-modal {
 	overflow: hidden;

apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-sidebar/styles.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@automattic/onboarding/styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@automattic/onboarding/styles/mixins';
 
 .nux-launch-sidebar {
 	@include onboarding-block-margin;

apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-step/styles.scss

@@ -1,7 +1,7 @@
-@import '~@wordpress/base-styles/variables';
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@automattic/typography/styles/fonts';
-@import '~@automattic/onboarding/styles/mixins';
+@import '@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/breakpoints';
+@import '@automattic/typography/styles/fonts';
+@import '@automattic/onboarding/styles/mixins';
 
 .nux-launch-step__header {
 	@include onboarding-heading-padding;

apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-steps/final-step/styles.scss

@@ -1,5 +1,5 @@
-@import '~@automattic/typography/styles/variables';
-@import '~@automattic/onboarding/styles/mixins';
+@import '@automattic/typography/styles/variables';
+@import '@automattic/onboarding/styles/mixins';
 
 // TODO: This is former dark-gray-500 from @wordpress/base-styles.
 // Replace with a color from the standard palette.

apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-steps/name-step/styles.scss

@@ -1,4 +1,4 @@
-@import '~@automattic/onboarding/styles/variables';
+@import '@automattic/onboarding/styles/variables';
 
 .nux-launch-step__input {
 	position: relative;

apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-steps/plan-step/styles.scss

@@ -1,5 +1,5 @@
-@import '~@automattic/onboarding/styles/mixins';
-@import '~@automattic/plans-grid/src/variables';
+@import '@automattic/onboarding/styles/mixins';
+@import '@automattic/plans-grid/src/variables';
 
 .nux-launch-modal.step-plan {
 	// Remove extraneous whitespace after plans details.

apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/index.scss

@@ -1,4 +1,4 @@
-@import '~@automattic/page-pattern-modal/src/styles/page-pattern-modal';
+@import '@automattic/page-pattern-modal/src/styles/page-pattern-modal';
 
 .sidebar-modal-opener {
 	display: flex;

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/create-page/style.scss

@@ -1,4 +1,4 @@
-@import '~@wordpress/base-styles/colors';
+@import '@wordpress/base-styles/colors';
 
 // TODO: This is former light-gray-900 from @wordpress/base-styles.
 // Replace with a color from the standard palette.

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-item/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/colors';
-@import '~@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/colors';
+@import '@wordpress/base-styles/variables';
 
 // TODO: These colors used to be in @wordpress/base-styles.
 // Replace them with colors from the updated standard palette.

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/style.scss

@@ -1,7 +1,7 @@
-@import '~@wordpress/base-styles/colors';
-@import '~@wordpress/base-styles/mixins';
-@import '~@wordpress/base-styles/variables';
-@import '~@wordpress/base-styles/z-index';
+@import '@wordpress/base-styles/colors';
+@import '@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/z-index';
 
 $sidebar-width: 272px;
 $sidebar-transition-period: 100ms;

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/toggle-sidebar-button/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/variables';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/mixins';
 @import '../nav-sidebar/style.scss';
 
 .wpcom-block-editor-nav-sidebar-toggle-sidebar-button__button {

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/welcome-modal/style.scss

@@ -1,8 +1,8 @@
 // @TODO: remove the ignore rule and replace font sizes accordingly
 /* stylelint-disable scales/font-size */
 
-@import '~@automattic/typography/styles/fonts';
-@import '~@automattic/onboarding/styles/mixins';
+@import '@automattic/typography/styles/fonts';
+@import '@automattic/onboarding/styles/mixins';
 
 $wpcom-modal-breakpoint: 660px;
 

apps/editing-toolkit/editing-toolkit-plugin/wpcom-block-editor-nux/src/welcome-tour/style-tour.scss

@@ -1,7 +1,7 @@
-@import '~@wordpress/base-styles/colors';
-@import '~@wordpress/base-styles/mixins';
-@import '~@wordpress/base-styles/variables';
-@import '~@wordpress/base-styles/z-index';
+@import '@wordpress/base-styles/colors';
+@import '@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/z-index';
 
 $welcome-tour-button-background-color: #32373c; // former $dark-gray-700. TODO: replace with standard color
 

apps/o2-blocks/src/todo/editor.scss

@@ -1,4 +1,4 @@
-@import '~@wordpress/base-styles/colors';
+@import '@wordpress/base-styles/colors';
 
 $color-accent-green: #31843f;
 $color-move-button-icon: #555d66; // dark-gray-500

apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.scss

@@ -1,4 +1,4 @@
-@import '~@wordpress/base-styles/variables';
+@import '@wordpress/base-styles/variables';
 
 @media ( max-width: 600px ) {
 	// stylelint-disable-next-line selector-max-id

apps/wpcom-block-editor/src/wpcom/features/use-classic-block-guide.scss

@@ -1,4 +1,4 @@
-@import '~@automattic/typography/styles/fonts';
+@import '@automattic/typography/styles/fonts';
 
 .use-classic-block-guide__heading {
 	font-family: $brand-serif;

client/assets/stylesheets/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';
+@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';

client/assets/stylesheets/gutenboarding.scss

@@ -1,6 +1,6 @@
 // Color Schemes
 // Currently used only by Calypso dev badge shown in development mode
-@import '~@automattic/calypso-color-schemes/src/calypso-color-schemes';
+@import '@automattic/calypso-color-schemes/src/calypso-color-schemes';
 
 // Shared
 @import 'shared/reset'; // css reset before the rest of the styles are defined

client/assets/stylesheets/shared/_typography.scss

@@ -1,5 +1,5 @@
-@import '~@automattic/typography/styles/fonts';
-@import '~@automattic/typography/styles/variables';
+@import '@automattic/typography/styles/fonts';
+@import '@automattic/typography/styles/variables';
 @import './mixins/breakpoints';
 
 $signup-sans: 'Noto Sans', $sans;

client/assets/stylesheets/style.scss

@@ -2,7 +2,7 @@
 @import 'vendor';
 
 // Color Schemes
-@import '~@automattic/calypso-color-schemes/src/calypso-color-schemes';
+@import '@automattic/calypso-color-schemes/src/calypso-color-schemes';
 
 // Shared
 @import 'shared/reset'; // css reset before the rest of the styles are defined
@@ -19,7 +19,7 @@
 @import './_nav-unification';
 
 // @wordpress/components stylesheet
-@import '~@wordpress/components/build-style/style.css';
+@import '@wordpress/components/build-style/style';
 
 // Overrides for @wordpress/components
 @import './_wp-components-overrides.scss';

client/blocks/editor-checkout-modal/style.scss

@@ -1,6 +1,6 @@
-@import '~@automattic/typography/styles/variables';
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@automattic/typography/styles/variables';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .editor-checkout-modal {
 	z-index: z-index( 'root', '.main.calypsoify.is-iframe' );

client/blocks/login/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .layout:not( .is-jetpack-woocommerce-flow ):not( .is-jetpack-woo-dna-flow ):not( .is-wccom-oauth-flow ) {
 	.login.is-jetpack {

client/blocks/nav-unification-modal/style.scss

@@ -1,9 +1,9 @@
 // @TODO: remove the ignore rule and replace font sizes accordingly
 /* stylelint-disable scales/font-size */
 
-@import '~@automattic/typography/styles/fonts';
-@import '~@automattic/onboarding/styles/mixins';
-@import '~@wordpress/base-styles/breakpoints';
+@import '@automattic/typography/styles/fonts';
+@import '@automattic/onboarding/styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
 
 $modal-breakpoint: 600px;
 $modal-padding-v: 40px;

client/blocks/signup-form/style.scss

@@ -1,6 +1,6 @@
 @import 'woocommerce/components/text-control/style.scss';
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .signup-form .signup-form__input.form-text-input {
 	margin-bottom: 20px;

client/components/domains/domain-search-results/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .domain-search-results__transfer-card {
 	display: flex;

client/components/domains/domain-suggestion/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .domain-suggestion {
 	&.is-clickable {

client/components/domains/featured-domain-suggestions/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .featured-domain-suggestions {
 	display: flex;

client/components/domains/free-domain-explainer/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .free-domain-explainer {
 	.banner__description {

client/components/domains/register-domain-step/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .register-domain-step__search {
 	padding-bottom: 12px;

client/components/domains/reskin-side-explainer/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .reskin-side-explainer {
     width: 100%;

client/components/domains/search-filters/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .search-filters__dropdown-filters {
 	align-items: center;

client/components/foldable-faq/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .foldable-faq {
 	padding: 0 15px;

client/components/jetpack/backup-card/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 /* Header */
 

client/components/jetpack/card/jetpack-free-card/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .jetpack-free-card {
 	padding: 24px 32px;

client/components/promo-section/promo-card/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .promo-card {
 	display: flex;

client/components/web-preview/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/breakpoints';
-@import '~@wordpress/base-styles/mixins';
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
 
 .web-preview {
 	position: fixed;

client/gutenberg/editor/style.scss

@@ -1,4 +1,4 @@
-@import '~@wordpress/edit-post/build-style/style';
+@import '@wordpress/edit-post/build-style/style';
 
 .is-group-gutenberg.layout {
 	background-color: var( --color-surface );

client/jetpack-cloud/sections/partner-portal/billing-details/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/_breakpoints.scss';
-@import '~@wordpress/base-styles/_mixins.scss';
+@import '@wordpress/base-styles/_breakpoints.scss';
+@import '@wordpress/base-styles/_mixins.scss';
 
 .billing-details {
 	&__row {

client/jetpack-cloud/sections/partner-portal/billing-summary/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/_breakpoints.scss';
-@import '~@wordpress/base-styles/_mixins.scss';
+@import '@wordpress/base-styles/_breakpoints.scss';
+@import '@wordpress/base-styles/_mixins.scss';
 
 .billing-summary {
 	display: flex;

client/jetpack-cloud/sections/partner-portal/issue-license-form/style.scss

@@ -1,4 +1,4 @@
-@import '~@wordpress/base-styles/_mixins.scss';
+@import '@wordpress/base-styles/_mixins.scss';
 
 .issue-license-form {
 	p {

client/jetpack-cloud/sections/partner-portal/license-details/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/_breakpoints.scss';
-@import '~@wordpress/base-styles/_mixins.scss';
+@import '@wordpress/base-styles/_breakpoints.scss';
+@import '@wordpress/base-styles/_mixins.scss';
 
 .license-details {
 	margin: 0;

client/jetpack-cloud/sections/partner-portal/license-list-item/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/_breakpoints.scss';
-@import '~@wordpress/base-styles/_mixins.scss';
+@import '@wordpress/base-styles/_breakpoints.scss';
+@import '@wordpress/base-styles/_mixins.scss';
 
 $column-domain: 1;
 $column-actions: 4;

client/jetpack-cloud/sections/partner-portal/license-list/style.scss

@@ -1,5 +1,5 @@
-@import '~@wordpress/base-styles/_breakpoints.scss';
-@import '~@wordpress/base-styles/_mixins.scss';
+@import '@wordpress/base-styles/_breakpoints.scss';
+@import '@wordpress/base-styles/_mixins.scss';
 
 .license-list {
 	&__header {