refactor(styles): use the sass module system instead of @import

vuetifyjs · Aug 28, 2021 · ae8ed79 · ae8ed79
1 parent 5dcc4bf
commit ae8ed79
Show file tree

Hide file tree

Showing 153 changed files with 1,082 additions and 1,322 deletions.
diff --git a/packages/vuetify/src/components/VAlert/VAlert.sass b/packages/vuetify/src/components/VAlert/VAlert.sass
@@ -1,15 +1,16 @@
-// Imports
-@import ./index
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-alert
   padding: $alert-padding
   position: relative
 
-  @include elevation($alert-elevation)
-  @include position($alert-positions)
-  @include rounded($alert-border-radius)
-  @include theme($alert-theme...)
-  @include variant($alert-variants...)
+  @include tools.elevation($alert-elevation)
+  @include tools.position($alert-positions)
+  @include tools.rounded($alert-border-radius)
+  @include tools.theme($alert-theme...)
+  @include tools.variant($alert-variants...)
 
   // has specificity issues without this selector
   &.v-alert--border
@@ -26,7 +27,7 @@
     transition: $alert-plain-transition
 
   @at-root
-    @include density('v-alert', $alert-density) using ($modifier)
+    @include tools.density('v-alert', $alert-density) using ($modifier)
       padding-top: $alert-padding + $modifier
       padding-bottom: $alert-padding + $modifier
 
@@ -80,7 +81,7 @@
   top: 0
   width: 100%
 
-  @include border($alert-border...)
+  @include tools.border($alert-border...)
 
   .v-alert--border-start &
     border-inline-start-width: $alert-border-thin-width

diff --git a/packages/vuetify/src/components/VAlert/_index.scss b/packages/vuetify/src/components/VAlert/_index.scss
@@ -1,2 +1,2 @@
-@import '../../styles/styles.sass';
-@import './variables';
+@use '../../styles/styles.sass';
+@use 'variables';
diff --git a/packages/vuetify/src/components/VAlert/_variables.scss b/packages/vuetify/src/components/VAlert/_variables.scss
@@ -1,3 +1,5 @@
+@use '../../styles/settings';
+
 // Defaults
 $alert-avatar-height: 24px !default;
 $alert-avatar-margin-inline-end: 16px !default;
@@ -8,8 +10,8 @@ $alert-border-color: currentColor !default;
 $alert-border-icon-margin: 8px !default;
 $alert-border-opacity: 0.26 !default;
 $alert-border-padding-inline-start: 24px !default;
-$alert-border-radius: $border-radius-root !default;
-$alert-border-style: $border-style-root !default;
+$alert-border-radius: settings.$border-radius-root !default;
+$alert-border-style: settings.$border-style-root !default;
 $alert-border-thin-width: 8px !default;
 $alert-border-width: 0 !default;
 $alert-close-icon-font-size: 20px !default;
@@ -22,7 +24,7 @@ $alert-font-size: 16px !default;
 $alert-icon-font-size-multiplier: 1.5 !default;
 $alert-padding: 16px !default;
 $alert-plain-opacity: .62 !default;
-$alert-plain-transition: .2s opacity $standard-easing !default;
+$alert-plain-transition: .2s opacity settings.$standard-easing !default;
 $alert-positions: absolute fixed !default;
 $alert-prominent-avatar-margin-inline-end: 16px !default;
 $alert-prominent-avatar-margin-inline-start: 0 !default;

diff --git a/packages/vuetify/src/components/VApp/VApp.sass b/packages/vuetify/src/components/VApp/VApp.sass
@@ -1,5 +1,3 @@
-@import './index'
-
 .v-application
   display: flex
   background: rgb(var(--v-theme-background))

diff --git a/packages/vuetify/src/components/VApp/_index.scss b/packages/vuetify/src/components/VApp/_index.scss
diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.sass b/packages/vuetify/src/components/VAppBar/VAppBar.sass
@@ -1,4 +1,6 @@
-@import './index'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-app-bar
   align-items: flex-start
@@ -15,11 +17,11 @@
 
   // must be above border mixin for cascade
   &--is-active
-    @include elevation($app-bar-elevation)
+    @include tools.elevation($app-bar-elevation)
 
-  @include border($app-bar-border...)
-  @include rounded($app-bar-border-radius)
-  @include theme($app-bar-theme...)
+  @include tools.border($app-bar-border...)
+  @include tools.rounded($app-bar-border-radius)
+  @include tools.theme($app-bar-theme...)
 
   &--absolute
     position: absolute
@@ -33,20 +35,20 @@
     max-width: $app-bar-collapsed-max-width
     overflow: hidden
 
-    @include ltr()
+    @include tools.ltr()
       border-bottom-right-radius: $app-bar-collapsed-border-radius
 
-    @include rtl()
+    @include tools.rtl()
       border-bottom-left-radius: $app-bar-collapsed-border-radius
 
   &--flat
-    @include elevation($app-bar-flat-elevation)
+    @include tools.elevation($app-bar-flat-elevation)
 
   &--floating
     display: inline-flex
 
   &--rounded
-    @include rounded($app-bar-rounded-border-radius)
+    @include tools.rounded($app-bar-rounded-border-radius)
 
 .v-app-bar__content
   align-items: center

diff --git a/packages/vuetify/src/components/VAppBar/VAppBarTitle.sass b/packages/vuetify/src/components/VAppBar/VAppBarTitle.sass
@@ -1,4 +1,5 @@
-@import './index'
+@forward './variables'
+@use './variables' as *
 
 .v-app-bar-title
   font-size: $app-bar-title-font-size

diff --git a/packages/vuetify/src/components/VAppBar/_index.scss b/packages/vuetify/src/components/VAppBar/_index.scss
diff --git a/packages/vuetify/src/components/VAppBar/_variables.scss b/packages/vuetify/src/components/VAppBar/_variables.scss
@@ -1,7 +1,11 @@
+@use "sass:map";
+@use "../../styles/settings/variables";
+@use "../../styles/tools/functions";
+
 $app-bar-background: rgb(var(--v-theme-surface)) !default;
-$app-bar-border-color: $border-color-root !default;
-$app-bar-border-radius: map-get($rounded, '0') !default;
-$app-bar-border-style: $border-style-root !default;
+$app-bar-border-color: variables.$border-color-root !default;
+$app-bar-border-radius: map.get(variables.$rounded, '0') !default;
+$app-bar-border-style: variables.$border-style-root !default;
 $app-bar-border-thin-width: 0 0 thin !default;
 $app-bar-border-width: 0 !default;
 $app-bar-collapsed-border-radius: 24px !default;
@@ -18,12 +22,12 @@ $app-bar-image-width: inherit !default;
 $app-bar-padding-end: 4px !default;
 $app-bar-padding-start: 4px !default;
 $app-bar-prominent-height: 128px !default;
-$app-bar-rounded-border-radius: $border-radius-root !default;
+$app-bar-rounded-border-radius: variables.$border-radius-root !default;
 $app-bar-scrolled-title-padding-bottom: 9px !default;
-$app-bar-shaped-border-radius: map-get($rounded, 'xl') $app-bar-border-radius !default;
-$app-bar-title-font-size: map-deep-get($typography, 'h5', 'size') !default;
+$app-bar-shaped-border-radius: map.get(variables.$rounded, 'xl') $app-bar-border-radius !default;
+$app-bar-title-font-size: functions.map-deep-get(variables.$typography, 'h5', 'size') !default;
 $app-bar-title-padding: 6px 20px !default;
-$app-bar-transition: .2s $standard-easing !default;
+$app-bar-transition: .2s variables.$standard-easing !default;
 
 $app-bar-border: (
   $app-bar-border-color,

diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.sass b/packages/vuetify/src/components/VAvatar/VAvatar.sass
@@ -1,4 +1,7 @@
-@import './index'
+@forward './variables'
+@use '../../styles/tools'
+@use './mixins' as *
+@use './variables' as *
 
 .v-avatar
   align-items: center
@@ -13,7 +16,7 @@
 
   @include avatar-sizes($avatar-sizes)
   @include avatar-density(('height', 'width'), $avatar-density)
-  @include rounded($avatar-border-radius)
+  @include tools.rounded($avatar-border-radius)
 
   > *
     border-radius: inherit
@@ -24,7 +27,7 @@
     font-size: var(--v-avatar-height)
 
   &--rounded
-    +rounded($avatar-rounded-border-radius)
+    +tools.rounded($avatar-rounded-border-radius)
 
 // VList
 .v-avatar

diff --git a/packages/vuetify/src/components/VAvatar/_index.scss b/packages/vuetify/src/components/VAvatar/_index.scss
diff --git a/packages/vuetify/src/components/VAvatar/_mixins.scss b/packages/vuetify/src/components/VAvatar/_mixins.scss
@@ -1,6 +1,12 @@
+@forward './variables';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../styles/settings';
+@use './variables' as *;
+
 @mixin avatar-sizes ($map: $avatar-sizes) {
-  @each $sizeName, $multiplier in $size-scales {
-    $size: map-get($map, 'height') + (8 * $multiplier);
+  @each $sizeName, $multiplier in settings.$size-scales {
+    $size: map.get($map, 'height') + (8 * $multiplier);
 
     &.v-avatar--size-#{$sizeName} {
       --v-avatar-height: #{$size};
@@ -10,10 +16,10 @@
 
 @mixin avatar-density ($properties, $densities) {
   @each $density, $multiplier in $densities {
-    $value: calc(var(--v-avatar-height) + #{$multiplier * $spacer});
+    $value: calc(var(--v-avatar-height) + #{$multiplier * settings.$spacer});
 
     &.v-avatar--density-#{$density} {
-      @if type-of($properties) == "list" {
+      @if meta.type-of($properties) == "list" {
         @each $property in $properties {
           #{$property}: $value;
         }

diff --git a/packages/vuetify/src/components/VAvatar/_variables.scss b/packages/vuetify/src/components/VAvatar/_variables.scss
@@ -1,14 +1,18 @@
+@use "sass:map";
+@use "../../styles/settings/variables";
+@use "../../styles/tools/functions";
+
 // Defaults
-$avatar-border-radius: map-get($rounded, 'circle') !default;
+$avatar-border-radius: map.get(variables.$rounded, 'circle') !default;
 $avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $avatar-line-height: normal !default;
-$avatar-rounded-border-radius: $border-radius-root !default;
+$avatar-rounded-border-radius: variables.$border-radius-root !default;
 $avatar-height: 40px !default;
 $avatar-width: 40px !default;
 $avatar-vertical-align: middle !default;
 
 $avatar-sizes: () !default;
-$avatar-sizes: map-deep-merge(
+$avatar-sizes: functions.map-deep-merge(
   (
     'height': $avatar-height,
     'width': $avatar-width

diff --git a/packages/vuetify/src/components/VBadge/VBadge.sass b/packages/vuetify/src/components/VBadge/VBadge.sass
@@ -1,5 +1,6 @@
-// Imports
-@import ./index
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-badge
   display: inline-block
@@ -43,7 +44,7 @@
     padding: 0
     width: $badge-dot-width
 
-    @include theme($badge-theme...)
+    @include tools.theme($badge-theme...)
 
     &::after
       border-width: $badge-dot-border-width

diff --git a/packages/vuetify/src/components/VBadge/_index.scss b/packages/vuetify/src/components/VBadge/_index.scss
diff --git a/packages/vuetify/src/components/VBadge/_variables.scss b/packages/vuetify/src/components/VBadge/_variables.scss
@@ -1,4 +1,4 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
 // Defaults
 $badge-border-color: rgb(var(--v-theme-background)) !default;
@@ -13,7 +13,7 @@ $badge-dot-border-radius: 4.5px;
 $badge-dot-border-width: 1.5px !default;
 $badge-dot-height: 9px !default;
 $badge-dot-width: 9px !default;
-$badge-font-family: $body-font-family !default;
+$badge-font-family: settings.$body-font-family !default;
 $badge-font-size: .75rem !default;
 $badge-font-weight: 500 !default;
 $badge-height: 1.25rem !default;
@@ -23,7 +23,7 @@ $badge-inline-vertical-align: middle !default;
 $badge-line-height: 1 !default;
 $badge-min-width: 20px !default;
 $badge-padding: 4px !default;
-$badge-transition: .225s $standard-easing !default;
+$badge-transition: .225s settings.$standard-easing !default;
 $badge-wrapper-margin: 0 4px !default;
 
 $badge-theme: (

diff --git a/packages/vuetify/src/components/VBanner/VBanner.sass b/packages/vuetify/src/components/VBanner/VBanner.sass
@@ -1,5 +1,6 @@
-// Imports
-@import ./index
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-banner
   $root: &
@@ -14,11 +15,11 @@
   position: relative
   width: $banner-width
 
-  @include border($banner-border...)
-  @include elevation($banner-elevation)
-  @include position($banner-positions)
-  @include rounded($banner-border-radius)
-  @include theme($banner-theme...)
+  @include tools.border($banner-border...)
+  @include tools.elevation($banner-elevation)
+  @include tools.position($banner-positions)
+  @include tools.rounded($banner-border-radius)
+  @include tools.theme($banner-theme...)
 
   &--border
     border-width: $banner-border-thin-width
@@ -29,10 +30,10 @@
     padding-inline-start: $banner-mobile-padding-start
 
   &--rounded
-    @include rounded($banner-rounded-border-radius)
+    @include tools.rounded($banner-rounded-border-radius)
 
   @at-root
-    @include density('v-banner', $banner-density) using ($modifier)
+    @include tools.density('v-banner', $banner-density) using ($modifier)
       &.v-banner--one-line
         padding-top: $banner-padding-top + $modifier
 

diff --git a/packages/vuetify/src/components/VBanner/_index.scss b/packages/vuetify/src/components/VBanner/_index.scss
@@ -1,2 +1,2 @@
-@import '../../styles/styles.sass';
-@import './variables';
+@use '../../styles/styles.sass';
+@use 'variables';
diff --git a/packages/vuetify/src/components/VBanner/_variables.scss b/packages/vuetify/src/components/VBanner/_variables.scss
@@ -1,29 +1,33 @@
+@use 'sass:map';
+@use '../../styles/tools';
+@use '../../styles/settings';
+
 // Defaults
 $banner-avatar-after-opacity: var(--v-border-opacity) !default;
 $banner-avatar-after-opacity: var(--v-border-opacity) !default;
-$banner-avatar-border-radius: map-get($rounded, 'circle') !default;
+$banner-avatar-border-radius: map.get(settings.$rounded, 'circle') !default;
 $banner-avatar-margin-end: 24px !default;
 $banner-avatar-margin-start: 0 !default;
 $banner-background: rgb(var(--v-theme-background)) !default;
 $banner-color: rgb(var(--v-theme-on-surface)) !default;
-$banner-border-color: $border-color-root !default;
-$banner-border-radius: map-get($rounded, 0) !default;
-$banner-border-style: $border-style-root !default;
+$banner-border-color: settings.$border-color-root !default;
+$banner-border-radius: map.get(settings.$rounded, 0) !default;
+$banner-border-style: settings.$border-style-root !default;
 $banner-border-thin-width: thin !default;
 $banner-border-width: 0 0 thin 0 !default;
 $banner-content-padding-end: 90px !default;
 $banner-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default;
 $banner-elevation: 0 !default;
-$banner-font-size: map-deep-get($typography, 'body-2', 'size') !default;
+$banner-font-size: tools.map-deep-get(settings.$typography, 'body-2', 'size') !default;
 $banner-padding-bottom: 8px !default;
 $banner-padding-end: 8px !default;
 $banner-padding-start: 24px !default;
 $banner-padding-top: 10px !default;
 $banner-positions: absolute fixed sticky !default;
-$banner-rounded-border-radius: $border-radius-root !default;
+$banner-rounded-border-radius: settings.$border-radius-root !default;
 $banner-sticky-top: 0 !default;
 $banner-text-color: rgb(var(--v-theme-on-surface)) !default;
-$banner-text-line-height: map-deep-get($typography, 'subtitle-2', 'line-height') !default;
+$banner-text-line-height: tools.map-deep-get(settings.$typography, 'subtitle-2', 'line-height') !default;
 $banner-two-line-content-margin-bottom: 4px !default;
 $banner-two-line-padding-top: 24px !default;
 $banner-three-line-content-margin-bottom: 8px !default;