@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/styles/settings/_variables.scss

@@ -1,9 +1,13 @@
-@import '../tools/_functions.sass';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../tools/functions' as *;
 
 $color-pack: true !default;
+$reset: true !default;
 
 $body-font-family: 'Roboto', sans-serif !default;
-$font-size-root: 16px !default;
+$font-size-root: 1rem !default;
 $line-height-root: 1.5 !default;
 $border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default;
 $border-radius-root: 4px !default;
@@ -59,7 +63,7 @@ $rounded: () !default;
 $rounded: map-deep-merge(
   (
     0: 0,
-    'sm': $border-radius-root / 2,
+    'sm': $border-radius-root * .5,
     null: $border-radius-root,
     'lg': $border-radius-root * 2,
     'xl': $border-radius-root * 6,
@@ -71,18 +75,19 @@ $rounded: map-deep-merge(
 );
 
 $spacer: 4px !default;
+$spacers-steps: 16 !default;
 
 $spacers: () !default;
-@if (type-of($spacers) == list) {
-  @for $i from 0 through 16 {
-    $spacers: map-merge($spacers, ($i: $spacer * $i))
+@if (meta.type-of($spacers) == list) {
+  @for $i from 0 through $spacers-steps {
+    $spacers: map.merge($spacers, ($i: $spacer * $i))
   }
 }
 
 $negative-spacers: () !default;
-@if (type-of($negative-spacers) == list) {
-  @for $i from 1 through 16 {
-    $negative-spacers: map-merge($negative-spacers, ("n" + $i: -$spacer * $i))
+@if (meta.type-of($negative-spacers) == list) {
+  @for $i from 1 through $spacers-steps {
+    $negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i))
   }
 }
 
@@ -102,16 +107,15 @@ $grid-breakpoints: map-deep-merge(
 $grid-gutter: $spacer * 6 !default;
 $form-grid-gutter: $spacer * 2 !default;
 $grid-columns: 12 !default;
-
-$container-padding-x: $grid-gutter / 2 !default;
+$container-padding-x: $spacer * 4 !default;
 
 $grid-gutters: () !default;
 $grid-gutters: map-deep-merge(
   (
-    'xs': $grid-gutter / 12,
-    'sm': $grid-gutter / 6,
-    'md': $grid-gutter / 3,
-    'lg': $grid-gutter * 2/3,
+    'xs': math.div($grid-gutter, 12),
+    'sm': math.div($grid-gutter, 6),
+    'md': math.div($grid-gutter, 3),
+    'lg': math.div($grid-gutter * 2, 3),
     'xl': $grid-gutter,
   ),
   $grid-gutters
@@ -120,10 +124,12 @@ $grid-gutters: map-deep-merge(
 $container-max-widths: () !default;
 $container-max-widths: map-deep-merge(
   (
-    'md': map-get($grid-breakpoints, 'md') * 0.9375,
-    'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
-    'xl': map-get($grid-breakpoints, 'xl') * 0.9375,
-    'xxl': map-get($grid-breakpoints, 'xxl') * 0.9375,
+    'xs': null,
+    'sm': null,
+    'md': map.get($grid-breakpoints, 'md') * 0.9375,
+    'lg': map.get($grid-breakpoints, 'lg') * 0.9375,
+    'xl': map.get($grid-breakpoints, 'xl') * 0.9375,
+    'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375,
   ),
   $container-max-widths
 );
@@ -134,20 +140,20 @@ $display-breakpoints: map-deep-merge(
   (
     'print-only': 'only print',
     'screen-only': 'only screen',
-    'xs': '(max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
-    'sm': '(min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-    'md': '(min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-    'lg': '(min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-    'xl': '(min-width: #{map-get($grid-breakpoints, 'xl')}) and (max-width: #{map-get($grid-breakpoints, 'xxl') - 1})',
-    'xxl': '(min-width: #{map-get($grid-breakpoints, 'xxl')})',
-    'sm-and-up': '(min-width: #{map-get($grid-breakpoints, 'sm')})',
-    'md-and-up': '(min-width: #{map-get($grid-breakpoints, 'md')})',
-    'lg-and-up': '(min-width: #{map-get($grid-breakpoints, 'lg')})',
-    'xl-and-up': '(min-width: #{map-get($grid-breakpoints, 'xl')})',
-    'sm-and-down': '(max-width: #{map-get($grid-breakpoints, 'md') - 1})',
-    'md-and-down': '(max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
-    'lg-and-down': '(max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
-    'xl-and-down': '(max-width: #{map-get($grid-breakpoints, 'xxl') - 1})',
+    'xs': '(max-width: #{map.get($grid-breakpoints, 'sm') - 0.02})',
+    'sm': '(min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
+    'md': '(min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
+    'lg': '(min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
+    'xl': '(min-width: #{map.get($grid-breakpoints, 'xl')}) and (max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
+    'xxl': '(min-width: #{map.get($grid-breakpoints, 'xxl')})',
+    'sm-and-up': '(min-width: #{map.get($grid-breakpoints, 'sm')})',
+    'md-and-up': '(min-width: #{map.get($grid-breakpoints, 'md')})',
+    'lg-and-up': '(min-width: #{map.get($grid-breakpoints, 'lg')})',
+    'xl-and-up': '(min-width: #{map.get($grid-breakpoints, 'xl')})',
+    'sm-and-down': '(max-width: #{map.get($grid-breakpoints, 'md') - 0.02})',
+    'md-and-down': '(max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})',
+    'lg-and-down': '(max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})',
+    'xl-and-down': '(max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})',
   ),
   $display-breakpoints
 );
@@ -167,8 +173,8 @@ $font-weights: map-deep-merge(
 
 $heading-font-family: $body-font-family !default;
 
-$headings: () !default;
-$headings: map-deep-merge(
+$typography: () !default;
+$typography: map-deep-merge(
   (
     'h1': (
       'size': 6rem,
@@ -176,7 +182,7 @@ $headings: map-deep-merge(
       'line-height': 6rem,
       'letter-spacing': -.015625em,
       'font-family': $heading-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'h2': (
       'size': 3.75rem,
@@ -184,7 +190,7 @@ $headings: map-deep-merge(
       'line-height': 3.75rem,
       'letter-spacing': -.0083333333em,
       'font-family': $heading-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'h3': (
       'size': 3rem,
@@ -192,7 +198,7 @@ $headings: map-deep-merge(
       'line-height': 3.125rem,
       'letter-spacing': normal,
       'font-family': $heading-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'h4': (
       'size': 2.125rem,
@@ -200,7 +206,7 @@ $headings: map-deep-merge(
       'line-height': 2.5rem,
       'letter-spacing': .0073529412em,
       'font-family': $heading-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'h5': (
       'size': 1.5rem,
@@ -208,7 +214,7 @@ $headings: map-deep-merge(
       'line-height': 2rem,
       'letter-spacing': normal,
       'font-family': $heading-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'h6': (
       'size': 1.25rem,
@@ -216,7 +222,7 @@ $headings: map-deep-merge(
       'line-height': 2rem,
       'letter-spacing': .0125em,
       'font-family': $heading-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'subtitle-1': (
       'size': 1rem,
@@ -224,7 +230,7 @@ $headings: map-deep-merge(
       'line-height': 1.75rem,
       'letter-spacing': .009375em,
       'font-family': $body-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'subtitle-2': (
       'size': .875rem,
@@ -232,7 +238,7 @@ $headings: map-deep-merge(
       'line-height': 1.375rem,
       'letter-spacing': .0071428571em,
       'font-family': $body-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'body-1': (
       'size': 1rem,
@@ -240,7 +246,7 @@ $headings: map-deep-merge(
       'line-height': 1.5rem,
       'letter-spacing': .03125em,
       'font-family': $body-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'body-2': (
       'size': .875rem,
@@ -248,7 +254,7 @@ $headings: map-deep-merge(
       'line-height': 1.25rem,
       'letter-spacing': .0178571429em,
       'font-family': $body-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'button': (
       'size': .875rem,
@@ -264,7 +270,7 @@ $headings: map-deep-merge(
       'line-height': 1.25rem,
       'letter-spacing': .0333333333em,
       'font-family': $body-font-family,
-      'text-transform': false
+      'text-transform': none
     ),
     'overline': (
       'size': .75rem,
@@ -275,14 +281,14 @@ $headings: map-deep-merge(
       'text-transform': uppercase
     )
   ),
-  $headings
+  $typography
 );
 
-$typography: () !default;
-@each $type, $values in $headings {
-  $typography: map-deep-merge(
-    $typography,
-    (#{$type}: map-values($values))
+$flat-typography: () !default;
+@each $type, $values in $typography {
+  $flat-typography: map-deep-merge(
+    $flat-typography,
+    (#{$type}: map.values($values))
   );
 }
 
@@ -298,22 +304,10 @@ $standard-easing: cubic-bezier(0.4, 0, 0.2, 1);
 $decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1); // Entering
 $accelerated-easing: cubic-bezier(0.4, 0, 1, 1); // Leaving
 
-// Ripples
-$ripple-animation-transition-in: transform 0.25s $decelerated-easing, opacity 0.1s $decelerated-easing !default;
-$ripple-animation-transition-out: opacity 0.3s $accelerated-easing !default;
-$ripple-animation-visible-opacity: 0.15 !default;
-
 // Elements
 $bootable-transition: 0.2s $decelerated-easing !default;
 $blockquote-font-size: 18px !default;
 $blockquote-font-weight: 300 !default;
-$code-kbd-border-radius: 3px !default;
-$code-kbd-font-size: 85% !default;
-$code-kbd-font-weight: normal !default;
-$code-padding: .2em .4em !default;
-$kbd-padding: .2em .4rem !default;
-$input-top-spacing: 16px !default;
-$text-field-active-label-height: 12px !default;
 
 $sizes: (
   'x-small',
@@ -323,6 +317,7 @@ $sizes: (
   'x-large'
 ) !default;
 
+$size-scale: $spacer * 2 !default;
 $size-scales: (
   'x-small': -2,
   'small': -1,

package/lib/styles/tools/_absolute.sass

@@ -0,0 +1,8 @@
+@mixin absolute($pseudo: false)
+  @if ($pseudo)
+    content: ''
+  position: absolute
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%

package/lib/styles/tools/_border.sass

@@ -1,4 +1,9 @@
-@mixin border($color: null, $style: null, $width: null, $important: false)
+@mixin border($color: null, $style: null, $width: null, $thin-width: false, $important: false)
   border-color: $color if($important, !important, null)
   border-style: $style if($important, !important, null)
   border-width: $width if($important, !important, null)
+
+  @if $thin-width
+    &--border
+      border-width: $thin-width
+      box-shadow: none

package/lib/styles/tools/_density.sass

@@ -1,10 +1,6 @@
-@mixin density($name, $properties, $densities)
-  @each $density, $multiplier in $densities
-    $value: calc(var(--#{$name}-height) + #{$multiplier * $spacer})
+@use '../settings'
 
-    &.#{$name}--density-#{$density}
-      @if type-of($properties) == 'list'
-        @each $property in $properties
-          #{$property}: $value
-      @else
-        #{$properties}: $value
+@mixin density($name, $densities)
+  @each $density, $multiplier in $densities
+    .#{$name}--density-#{$density}
+      @content($multiplier * settings.$spacer)

package/lib/styles/tools/_display.sass

@@ -1,3 +1,6 @@
+@use './functions' as *
+@use '../settings' as *
+
 @mixin visually-hidden
   position: absolute !important
   height: 1px
@@ -6,3 +9,11 @@
   clip: rect(1px, 1px, 1px, 1px)
   white-space: nowrap
   display: initial
+
+=media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
+  $min: breakpoint-min($name, $breakpoints)
+  @if $min
+    @media (min-width: $min)
+      @content
+  @else
+    @content

package/lib/styles/tools/_elevation.sass

@@ -1,6 +1,8 @@
+@use 'sass:map'
+@use '../settings'
+
 @mixin elevation($z, $important: false)
-  box-shadow: map-get($shadow-key-umbra, $z), map-get($shadow-key-penumbra, $z), map-get($shadow-key-ambient, $z) if($important, !important, null)
+  box-shadow: map.get(settings.$shadow-key-umbra, $z), map.get(settings.$shadow-key-penumbra, $z), map.get(settings.$shadow-key-ambient, $z) if($important, !important, null)
 
 @mixin elevationTransition($duration: 280ms, $easing: cubic-bezier(0.4, 0, 0.2, 1))
   transition: box-shadow $duration $easing
-  will-change: box-shadow

package/lib/styles/tools/_functions.sass

@@ -1,52 +1,57 @@
+@use 'sass:list'
+@use 'sass:map'
+@use 'sass:math'
+@use 'sass:meta'
+
 @function map-deep-set($map, $keys, $value)
   $maps: ($map,)
   $result: null
 
   // If the last key is a map already
   // Warn the user we will be overriding it with $value
-  @if type-of(nth($keys, -1)) == "map"
+  @if meta.type-of(list.nth($keys, -1)) == "map"
     @warn "The last key you specified is a map; it will be overrided with `#{$value}`."
 
   // If $keys is a single key
   // Just merge and return
-  @if length($keys) == 1
-    @return map-merge($map, ( $keys: $value ))
+  @if list.length($keys) == 1
+    @return map.merge($map, ( $keys: $value ))
 
   // Loop from the first to the second to last key from $keys
   // Store the associated map to this key in the $maps list
   // If the key doesn't exist, throw an error
-  @for $i from 1 through length($keys) - 1
-    $current-key: nth($keys, $i)
-    $current-map: nth($maps, -1)
-    $current-get: map-get($current-map, $current-key)
+  @for $i from 1 through list.length($keys) - 1
+    $current-key: list.nth($keys, $i)
+    $current-map: list.nth($maps, -1)
+    $current-get: map.get($current-map, $current-key)
 
     @if $current-get == null
-      @error "Key `#{$key}` doesn't exist at current level in map."
+      @error "Key `#{$current-key}` doesn't exist at current level in map."
 
-    $maps: append($maps, $current-get)
+    $maps: list.append($maps, $current-get)
 
   // Loop from the last map to the first one
   // Merge it with the previous one
-  @for $i from length($maps) through 1
-    $current-map: nth($maps, $i)
-    $current-key: nth($keys, $i)
-    $current-val: if($i == length($maps), $value, $result)
-    $result: map-merge($current-map, ($current-key: $current-val))
+  @for $i from list.length($maps) through 1
+    $current-map: list.nth($maps, $i)
+    $current-key: list.nth($keys, $i)
+    $current-val: if($i == list.length($maps), $value, $result)
+    $result: map.merge($current-map, ($current-key: $current-val))
 
   // Return result
   @return $result
 
 @function map-deep-get($map, $keys...)
   @each $key in $keys
-    $map: map-get($map, $key)
+    $map: map.get($map, $key)
 
   @return $map
 
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints)
-  $min: map-get($breakpoints, $name)
+@function breakpoint-min($name, $breakpoints)
+  $min: map.get($breakpoints, $name)
   @return if($min != 0, $min, null)
 
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints)
+@function breakpoint-infix($name, $breakpoints)
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}")
 
 // Adapted from https://gist.github.com/pentzzsolt/4949bbd7691d43d00616dc4f1451cae9#file-non-destructive-map-merge-4-scss
@@ -54,21 +59,24 @@
   $result: $parent-map
 
   @each $key, $child in $child-map
-    $parent-has-key: map-has-key($result, $key)
-    $parent-value: map-get($result, $key)
-    $parent-type: type-of($parent-value)
-    $child-type: type-of($child)
+    $parent-has-key: map.has-key($result, $key)
+    $parent-value: map.get($result, $key)
+    $parent-type: meta.type-of($parent-value)
+    $child-type: meta.type-of($child)
     $parent-is-map: $parent-type == map
     $child-is-map: $child-type == map
 
     @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map))
-      $result: map-merge($result, ( $key: $child ))
+      $result: map.merge($result, ( $key: $child ))
 
     @else
-      $result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ))
+      $result: map.merge($result, ( $key: map-deep-merge($parent-value, $child) ))
 
   @return $result
 
 @function theme-color($color, $opacity: 1)
   $color: rgba(var(--v-theme-#{$color}), $opacity)
   @return $color
+
+@function roundEven($val)
+  @return 2 * math.round($val * .5)

package/lib/styles/tools/_index.sass

@@ -1,22 +1,17 @@
-@import './_functions'
-@import './_bootable'
-@import './_border'
-@import './_density'
-@import './_elevation'
-@import './_position'
-@import './_radius'
-@import './_rounded'
-@import './_rtl'
-@import './_sheet'
-@import './_states'
-@import './_theme'
-@import './_utilities'
-@import './_display'
-
-=media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
-  $min: breakpoint-min($name, $breakpoints)
-  @if $min
-    @media (min-width: $min)
-      @content
-  @else
-    @content
+@forward '_absolute'
+@forward '_functions'
+@forward '_bootable'
+@forward '_border'
+@forward '_density'
+@forward '_elevation'
+@forward '_position'
+@forward '_radius'
+@forward '_rounded'
+@forward '_rtl'
+@forward '_sheet'
+@forward '_states'
+@forward '_theme'
+@forward '_typography'
+@forward '_utilities'
+@forward '_variant'
+@forward '_display'

package/lib/styles/tools/_radius.sass

@@ -1,6 +1,9 @@
+@use 'sass:map'
+@use '../settings'
+
 @mixin radius($r, $important: false)
   // Key exists within the $rounded variable
-  @if (map-has-key($rounded, $r))
-    border-radius: map-get($rounded, $r) if($important, !important, null)
+  @if (map.has-key(settings.$rounded, $r))
+    border-radius: map.get(settings.$rounded, $r) if($important, !important, null)
   @else
     border-radius: $r if($important, !important, null)

package/lib/styles/tools/_rtl.sass

@@ -1,7 +1,9 @@
 @mixin rtl()
+  &.v-locale--is-rtl,
   .v-locale--is-rtl &
     @content
 
 @mixin ltr()
+  &.v-locale--is-ltr,
   .v-locale--is-ltr &
     @content

package/lib/styles/tools/_sheet.sass

@@ -1,14 +1,17 @@
+@use './elevation' as *
+@use './radius' as *
+
 @mixin paper ($elevation, $radius, $shaped-radius)
-  +radius($radius)
+  @include radius($radius)
 
   &:not(.v-sheet--outlined)
-    +elevation($elevation)
+    @include elevation($elevation)
 
   @if ($shaped-radius)
     &.v-sheet--shaped
-      +radius($shaped-radius)
+      @include radius($shaped-radius)
 
 
 @mixin sheet ($component, $elevation, $radius, $shaped-radius)
   .v-sheet.#{$component}
-    +paper($elevation, $radius, $shaped-radius)
+    @include paper($elevation, $radius, $shaped-radius)

package/lib/styles/tools/_states.sass

@@ -1,20 +1,30 @@
-@mixin states ($selector: '&::before')
+@use 'sass:map'
+@use '../settings'
+
+@mixin states ($selector: '&::before', $active: true)
   &:hover
     #{$selector}
-      opacity: calc(#{map-get($states, 'hover')} * var(--v-theme-overlay-multiplier))
+      opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
 
-  &:focus
+  &:focus-visible
     #{$selector}
-      opacity: calc(#{map-get($states, 'focus')} * var(--v-theme-overlay-multiplier))
+      opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
+
+  @supports not selector(:focus-visible)
+    &:focus
+      #{$selector}
+        opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
 
-  &--active
-    +active-states($selector)
+  @if ($active)
+    &--active,
+    &[aria-haspopup="menu"][aria-expanded="true"]
+      @include active-states($selector)
 
 @mixin active-states ($selector: '::before')
   &:hover#{$selector},
   #{$selector}
-    opacity: calc(#{map-get($states, 'activated')} * var(--v-theme-overlay-multiplier))
+    opacity: calc(#{map.get(settings.$states, 'activated')} * var(--v-theme-overlay-multiplier))
 
   &:focus
     #{$selector}
-      opacity: calc(#{map-get($states, 'pressed')} * var(--v-theme-overlay-multiplier))
+      opacity: calc(#{map.get(settings.$states, 'pressed')} * var(--v-theme-overlay-multiplier))

package/lib/styles/tools/_theme.sass

@@ -1,5 +1,3 @@
-@mixin theme ($component)
-  .v-theme--light.#{$component}
-    @content($material-light)
-  .v-theme--dark.#{$component}
-    @content($material-dark)
+@mixin theme ($background, $color)
+  background: $background
+  color: $color

package/lib/styles/tools/_typography.sass

@@ -0,0 +1,6 @@
+@mixin typography ($font-size, $font-weight, $letter-spacing, $line-height, $text-transform)
+  font-size: $font-size
+  font-weight: $font-weight
+  letter-spacing: $letter-spacing
+  line-height: $line-height
+  text-transform: $text-transform