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

package/lib/styles/main.sass

@@ -1,7 +1,6 @@
 // Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
 
-@import './tools/_index'
-@import './settings/_index'
-@import './generic/_index'
-@import './elements/_index'
-@import './utilities/_index'
+@forward './settings'
+@use './generic'
+@use './elements'
+@use './utilities'

package/lib/styles/settings/_colors.scss

@@ -1,4 +1,24 @@
-@import '../tools/_functions.sass';
+@use '../tools/functions' as *;
+
+$shades: () !default;
+$shades: map-deep-merge(
+  (
+    'black': #000000,
+    'white': #FFFFFF,
+    'transparent': transparent
+  ),
+  $shades
+);
+
+$text-on-shades: () !default;
+$text-on-shades: map-deep-merge(
+  (
+    'black': map-get($shades, 'white'),
+    'white': map-get($shades, 'black'),
+    'transparent': currentColor
+  ),
+  $text-on-shades
+);
 
 $red: () !default;
 $red: map-deep-merge(
@@ -21,6 +41,27 @@ $red: map-deep-merge(
   $red
 );
 
+$text-on-red: () !default;
+$text-on-red: map-deep-merge(
+  (
+    'base': map-get($shades, 'black'),
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'white')
+  ),
+  $text-on-red
+);
+
 $pink: () !default;
 $pink: map-deep-merge(
   (
@@ -42,6 +83,27 @@ $pink: map-deep-merge(
   $pink
 );
 
+$text-on-pink: () !default;
+$text-on-pink: map-deep-merge(
+  (
+    'base': map-get($shades, 'black'),
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'white'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'white')
+  ),
+  $text-on-pink
+);
+
 $purple: () !default;
 $purple: map-deep-merge(
   (
@@ -63,6 +125,27 @@ $purple: map-deep-merge(
   $purple
 );
 
+$text-on-purple: () !default;
+$text-on-purple: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'white'),
+    'base': map-get($shades, 'white'),
+    'darken-1': map-get($shades, 'white'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'white')
+  ),
+  $text-on-purple
+);
+
 $deep-purple: () !default;
 $deep-purple: map-deep-merge(
   (
@@ -84,6 +167,27 @@ $deep-purple: map-deep-merge(
   $deep-purple
 );
 
+$text-on-deep-purple: () !default;
+$text-on-deep-purple: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'white'),
+    'base': map-get($shades, 'white'),
+    'darken-1': map-get($shades, 'white'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'white'),
+    'accent-3': map-get($shades, 'white'),
+    'accent-4': map-get($shades, 'white')
+  ),
+  $text-on-deep-purple
+);
+
 $indigo: () !default;
 $indigo: map-deep-merge(
   (
@@ -105,6 +209,27 @@ $indigo: map-deep-merge(
   $indigo
 );
 
+$text-on-indigo: () !default;
+$text-on-indigo: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'white'),
+    'base': map-get($shades, 'white'),
+    'darken-1': map-get($shades, 'white'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'white'),
+    'accent-4': map-get($shades, 'white')
+  ),
+  $text-on-indigo
+);
+
 $blue: () !default;
 $blue: map-deep-merge(
   (
@@ -126,6 +251,27 @@ $blue: map-deep-merge(
   $blue
 );
 
+$text-on-blue: () !default;
+$text-on-blue: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'white')
+  ),
+  $text-on-blue
+);
+
 $light-blue: () !default;
 $light-blue: map-deep-merge(
   (
@@ -147,6 +293,27 @@ $light-blue: map-deep-merge(
   $light-blue
 );
 
+$text-on-light-blue: () !default;
+$text-on-light-blue: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-light-blue
+);
+
 $cyan: () !default;
 $cyan: map-deep-merge(
   (
@@ -168,6 +335,27 @@ $cyan: map-deep-merge(
   $cyan
 );
 
+$text-on-cyan: () !default;
+$text-on-cyan: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'black'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-cyan
+);
+
 $teal: () !default;
 $teal: map-deep-merge(
   (
@@ -189,6 +377,27 @@ $teal: map-deep-merge(
   $teal
 );
 
+$text-on-teal: () !default;
+$text-on-teal: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-teal
+);
+
 $green: () !default;
 $green: map-deep-merge(
   (
@@ -210,6 +419,27 @@ $green: map-deep-merge(
   $green
 );
 
+$text-on-green: () !default;
+$text-on-green: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'white'),
+    'accent-3': map-get($shades, 'white'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-green
+);
+
 $light-green: () !default;
 $light-green: map-deep-merge(
   (
@@ -231,6 +461,27 @@ $light-green: map-deep-merge(
   $light-green
 );
 
+$text-on-light-green: () !default;
+$text-on-light-green: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'black'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-light-green
+);
+
 $lime: () !default;
 $lime: map-deep-merge(
   (
@@ -252,6 +503,27 @@ $lime: map-deep-merge(
   $lime
 );
 
+$text-on-lime: () !default;
+$text-on-lime: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'black'),
+    'darken-4': map-get($shades, 'black'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-lime
+);
+
 $yellow: () !default;
 $yellow: map-deep-merge(
   (
@@ -273,6 +545,27 @@ $yellow: map-deep-merge(
   $yellow
 );
 
+$text-on-yellow: () !default;
+$text-on-yellow: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'black'),
+    'darken-4': map-get($shades, 'black'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-yellow
+);
+
 $amber: () !default;
 $amber: map-deep-merge(
   (
@@ -294,6 +587,27 @@ $amber: map-deep-merge(
   $amber
 );
 
+$text-on-amber: () !default;
+$text-on-amber: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'black'),
+    'darken-4': map-get($shades, 'black'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-amber
+);
+
 $orange: () !default;
 $orange: map-deep-merge(
   (
@@ -315,6 +629,27 @@ $orange: map-deep-merge(
   $orange
 );
 
+$text-on-orange: () !default;
+$text-on-orange: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'black'),
+    'darken-4': map-get($shades, 'black'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'black')
+  ),
+  $text-on-orange
+);
+
 $deep-orange: () !default;
 $deep-orange: (
   'base': #ff5722,
@@ -333,6 +668,27 @@ $deep-orange: (
   'accent-4': #dd2c00
 );
 
+$text-on-deep-orange: () !default;
+$text-on-deep-orange: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'black'),
+    'darken-2': map-get($shades, 'black'),
+    'darken-3': map-get($shades, 'black'),
+    'darken-4': map-get($shades, 'white'),
+    'accent-1': map-get($shades, 'black'),
+    'accent-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
+    'accent-4': map-get($shades, 'white')
+  ),
+  $text-on-deep-orange
+);
+
 $brown: () !default;
 $brown: map-deep-merge(
   (
@@ -350,6 +706,23 @@ $brown: map-deep-merge(
   $brown
 );
 
+$text-on-brown: () !default;
+$text-on-brown: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'white'),
+    'base': map-get($shades, 'white'),
+    'darken-1': map-get($shades, 'white'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white')
+  ),
+  $text-on-brown
+);
+
 $blue-grey: () !default;
 $blue-grey: map-deep-merge(
   (
@@ -367,6 +740,23 @@ $blue-grey: map-deep-merge(
   $blue-grey
 );
 
+$text-on-blue-grey: () !default;
+$text-on-blue-grey: map-deep-merge(
+  (
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'white'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white')
+  ),
+  $text-on-blue-grey
+);
+
 $grey: () !default;
 $grey: map-deep-merge(
   (
@@ -384,14 +774,21 @@ $grey: map-deep-merge(
   $grey
 );
 
-$shades: () !default;
-$shades: map-deep-merge(
+$text-on-grey: () !default;
+$text-on-grey: map-deep-merge(
   (
-    'black': #000000,
-    'white': #FFFFFF,
-    'transparent': transparent
+    'lighten-5': map-get($shades, 'black'),
+    'lighten-4': map-get($shades, 'black'),
+    'lighten-3': map-get($shades, 'black'),
+    'lighten-2': map-get($shades, 'black'),
+    'lighten-1': map-get($shades, 'black'),
+    'base': map-get($shades, 'black'),
+    'darken-1': map-get($shades, 'white'),
+    'darken-2': map-get($shades, 'white'),
+    'darken-3': map-get($shades, 'white'),
+    'darken-4': map-get($shades, 'white')
   ),
-  $shades
+  $text-on-grey
 );
 
 $colors: () !default;
@@ -420,3 +817,30 @@ $colors: map-deep-merge(
   ),
   $colors
 );
+
+$text-on-colors: () !default;
+$text-on-colors: map-deep-merge(
+  (
+    'red': $text-on-red,
+    'pink': $text-on-pink,
+    'purple': $text-on-purple,
+    'deep-purple': $text-on-deep-purple,
+    'indigo': $text-on-indigo,
+    'blue': $text-on-blue,
+    'light-blue': $text-on-light-blue,
+    'cyan': $text-on-cyan,
+    'teal': $text-on-teal,
+    'green': $text-on-green,
+    'light-green': $text-on-light-green,
+    'lime': $text-on-lime,
+    'yellow': $text-on-yellow,
+    'amber': $text-on-amber,
+    'orange': $text-on-orange,
+    'deep-orange': $text-on-deep-orange,
+    'brown': $text-on-brown,
+    'blue-grey': $text-on-blue-grey,
+    'grey': $text-on-grey,
+    'shades': $text-on-shades
+  ),
+  $text-on-colors
+);

package/lib/styles/settings/_elevations.scss

@@ -1,4 +1,4 @@
-@import '../tools/_functions.sass';
+@use '../tools/functions' as *;
 
 $shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2) !default;
 $shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14) !default;

package/lib/styles/settings/_index.sass

@@ -1,10 +1,4 @@
-@import './_variables'
-@import './_colors'
-@import './_elevations'
-@import './_utilities'
-
-// Theme specific setup
-// ordering is important
-@import './_light'
-@import './_dark'
-@import './_theme'
+@forward './variables'
+@forward './colors'
+@forward './elevations'
+@forward './utilities'