vuetify 3.6.0-alpha.2 → 3.6.0

package/lib/styles/settings/_variables.scss

@@ -5,6 +5,7 @@
 
 $color-pack: true !default;
 $reset: true !default;
+$layers: false !default;
 
 $body-font-family: 'Roboto', sans-serif !default;
 $font-size-root: 1rem !default;
@@ -207,7 +208,7 @@ $typography: map-deep-merge(
     'h1': (
       'size': 6rem,
       'weight': 300,
-      'line-height': 6rem,
+      'line-height': 1,
       'letter-spacing': -.015625em,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -215,7 +216,7 @@ $typography: map-deep-merge(
     'h2': (
       'size': 3.75rem,
       'weight': 300,
-      'line-height': 3.75rem,
+      'line-height': 1,
       'letter-spacing': -.0083333333em,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -223,7 +224,7 @@ $typography: map-deep-merge(
     'h3': (
       'size': 3rem,
       'weight': 400,
-      'line-height': 3.125rem,
+      'line-height': 1.05,
       'letter-spacing': normal,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -231,7 +232,7 @@ $typography: map-deep-merge(
     'h4': (
       'size': 2.125rem,
       'weight': 400,
-      'line-height': 2.5rem,
+      'line-height': 1.175,
       'letter-spacing': .0073529412em,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -239,7 +240,7 @@ $typography: map-deep-merge(
     'h5': (
       'size': 1.5rem,
       'weight': 400,
-      'line-height': 2rem,
+      'line-height': 1.333,
       'letter-spacing': normal,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -247,7 +248,7 @@ $typography: map-deep-merge(
     'h6': (
       'size': 1.25rem,
       'weight': 500,
-      'line-height': 2rem,
+      'line-height': 1.6,
       'letter-spacing': .0125em,
       'font-family': $heading-font-family,
       'text-transform': none
@@ -255,7 +256,7 @@ $typography: map-deep-merge(
     'subtitle-1': (
       'size': 1rem,
       'weight': normal,
-      'line-height': 1.75rem,
+      'line-height': 1.75,
       'letter-spacing': .009375em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -263,7 +264,7 @@ $typography: map-deep-merge(
     'subtitle-2': (
       'size': .875rem,
       'weight': 500,
-      'line-height': 1.375rem,
+      'line-height': 1.6,
       'letter-spacing': .0071428571em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -271,7 +272,7 @@ $typography: map-deep-merge(
     'body-1': (
       'size': 1rem,
       'weight': 400,
-      'line-height': 1.5rem,
+      'line-height': 1.5,
       'letter-spacing': .03125em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -279,7 +280,7 @@ $typography: map-deep-merge(
     'body-2': (
       'size': .875rem,
       'weight': 400,
-      'line-height': 1.25rem,
+      'line-height': 1.425,
       'letter-spacing': .0178571429em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -287,7 +288,7 @@ $typography: map-deep-merge(
     'button': (
       'size': .875rem,
       'weight': 500,
-      'line-height': 2.25rem,
+      'line-height': 2.6,
       'letter-spacing': .0892857143em,
       'font-family': $body-font-family,
       'text-transform': uppercase
@@ -295,7 +296,7 @@ $typography: map-deep-merge(
     'caption': (
       'size': .75rem,
       'weight': 400,
-      'line-height': 1.25rem,
+      'line-height': 1.667,
       'letter-spacing': .0333333333em,
       'font-family': $body-font-family,
       'text-transform': none
@@ -303,7 +304,7 @@ $typography: map-deep-merge(
     'overline': (
       'size': .75rem,
       'weight': 500,
-      'line-height': 2rem,
+      'line-height': 2.667,
       'letter-spacing': .1666666667em,
       'font-family': $body-font-family,
       'text-transform': uppercase
@@ -316,7 +317,14 @@ $flat-typography: () !default;
 @each $type, $values in $typography {
   $flat-typography: map-deep-merge(
     $flat-typography,
-    (#{$type}: map.values($values))
+    (#{$type}: (
+      map.get($values, 'size'),
+      map.get($values, 'weight'),
+      map.get($values, 'line-height'),
+      map.get($values, 'letter-spacing'),
+      map.get($values, 'font-family'),
+      map.get($values, 'text-transform'),
+    ))
   );
 }
 

package/lib/styles/tools/_index.sass

@@ -4,6 +4,7 @@
 @forward '_border'
 @forward '_density'
 @forward '_elevation'
+@forward '_layer'
 @forward '_position'
 @forward '_radius'
 @forward '_rounded'

package/lib/styles/tools/_layer.scss

@@ -0,0 +1,11 @@
+@use '../settings';
+
+@mixin layer ($name) {
+  @if (settings.$layers) {
+    @layer vuetify.#{$name} {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

package/lib/styles/utilities/_display.sass

@@ -1,8 +1,10 @@
 @use '../settings'
+@use '../tools'
 
 @if (settings.$utilities != false and length(settings.$utilities) > 0)
-  @each $size, $media_query in settings.$display-breakpoints
-    .hidden
-      &-#{$size}
-        @media #{$media_query}
-          display: none !important
+  @include tools.layer('utilities')
+    @each $size, $media_query in settings.$display-breakpoints
+      .hidden
+        &-#{$size}
+          @media #{$media_query}
+            display: none !important

package/lib/styles/utilities/_elevation.scss

@@ -2,12 +2,14 @@
 @use '../settings';
 
 @if (settings.$utilities != false and length(settings.$utilities) > 0) {
-  $z: 24;
-  @while $z >= 0 {
-    .elevation-#{$z} {
-      @include tools.elevation($z, $important: true);
-    }
+  @include tools.layer('utilities') {
+    $z: 24;
+    @while $z >= 0 {
+      .elevation-#{$z} {
+        @include tools.elevation($z, $important: true);
+      }
 
-    $z: $z - 1;
+      $z: $z - 1;
+    }
   }
 }

package/lib/styles/utilities/_index.sass

@@ -7,38 +7,37 @@
 @use './elevation'
 @use './screenreaders'
 
-// Utilities
-@each $breakpoint in map.keys(settings.$grid-breakpoints)
-  // Generate media query if needed
-  +tools.media-breakpoint-up($breakpoint)
-    $infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints)
+@include tools.layer('utilities')
+  @each $breakpoint in map.keys(settings.$grid-breakpoints)
+    // Generate media query if needed
+    +tools.media-breakpoint-up($breakpoint)
+      $infix: tools.breakpoint-infix($breakpoint, settings.$grid-breakpoints)
 
-    // Loop over each utility property
+      // Loop over each utility property
+      @each $key, $utility in settings.$utilities
+        // The utility can be disabled with `false`, thus check if the utility is a map first
+        // Only proceed if responsive media queries are enabled or if it's the base media query
+        @if string.slice($key, -4) == ':ltr'
+          @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+            +tools.generate-utility($utility, $infix, 'ltr')
+        @else if string.slice($key, -4) == ':rtl'
+          @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+            +tools.generate-utility($utility, $infix, 'rtl')
+        @else
+          @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
+            +tools.generate-utility($utility, $infix, 'bidi')
+
+  // Print utilities
+  @media print
     @each $key, $utility in settings.$utilities
       // The utility can be disabled with `false`, thus check if the utility is a map first
-      // Only proceed if responsive media queries are enabled or if it's the base media query
+      // Then check if the utility needs print styles
       @if string.slice($key, -4) == ':ltr'
-        @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
-          +tools.generate-utility($utility, $infix, 'ltr')
+        @if meta.type-of($utility) == "map" and map.get($utility, print) == true
+          +tools.generate-utility($utility, "-print", 'ltr')
       @else if string.slice($key, -4) == ':rtl'
-        @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
-          +tools.generate-utility($utility, $infix, 'rtl')
+        @if meta.type-of($utility) == "map" and map.get($utility, print) == true
+          +tools.generate-utility($utility, "-print", 'rtl')
       @else
-        @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "")
-          +tools.generate-utility($utility, $infix, 'bidi')
-
-
-// Print utilities
-@media print
-  @each $key, $utility in settings.$utilities
-    // The utility can be disabled with `false`, thus check if the utility is a map first
-    // Then check if the utility needs print styles
-    @if string.slice($key, -4) == ':ltr'
-      @if meta.type-of($utility) == "map" and map.get($utility, print) == true
-        +tools.generate-utility($utility, "-print", 'ltr')
-    @else if string.slice($key, -4) == ':rtl'
-      @if meta.type-of($utility) == "map" and map.get($utility, print) == true
-        +tools.generate-utility($utility, "-print", 'rtl')
-    @else
-      @if meta.type-of($utility) == "map" and map.get($utility, print) == true
-        +tools.generate-utility($utility, "-print", 'bidi')
+        @if meta.type-of($utility) == "map" and map.get($utility, print) == true
+          +tools.generate-utility($utility, "-print", 'bidi')

package/lib/styles/utilities/_screenreaders.sass

@@ -1,15 +1,17 @@
 // Source: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
 @use '../settings'
+@use '../tools'
 
 @if (settings.$utilities != false and length(settings.$utilities) > 0)
-  .d-sr-only,
-  .d-sr-only-focusable:not(:focus)
-    border: 0 !important
-    clip: rect(0, 0, 0, 0) !important
-    height: 1px !important
-    margin: -1px !important // Fix for https://github.com/twbs/bootstrap/issues/25686
-    overflow: hidden !important
-    padding: 0 !important
-    position: absolute !important
-    white-space: nowrap !important
-    width: 1px !important
+  @include tools.layer('utilities')
+    .d-sr-only,
+    .d-sr-only-focusable:not(:focus)
+      border: 0 !important
+      clip: rect(0, 0, 0, 0) !important
+      height: 1px !important
+      margin: -1px !important // Fix for https://github.com/twbs/bootstrap/issues/25686
+      overflow: hidden !important
+      padding: 0 !important
+      position: absolute !important
+      white-space: nowrap !important
+      width: 1px !important

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.6.0-alpha.2",
+  "version": "3.6.0",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"
@@ -200,5 +200,5 @@
     "attributes": "dist/json/attributes.json"
   },
   "web-types": "dist/json/web-types.json",
-  "gitHead": "0f2b549477f78d937eec041122ac2569ef3c5702"
+  "gitHead": "2e3f727e5b92c45ffd7989320806d8107945991c"
 }