@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/styles/settings/_colors.scss

@@ -44,19 +44,19 @@ $red: map-deep-merge(
 $text-on-red: () !default;
 $text-on-red: map-deep-merge(
   (
-    'base': map-get($shades, 'black'),
+    'base': map-get($shades, 'white'),
     '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'),
+    'lighten-2': map-get($shades, 'white'),
+    'lighten-1': 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-2': map-get($shades, 'white'),
+    'accent-3': map-get($shades, 'white'),
     'accent-4': map-get($shades, 'white')
   ),
   $text-on-red
@@ -86,19 +86,19 @@ $pink: map-deep-merge(
 $text-on-pink: () !default;
 $text-on-pink: map-deep-merge(
   (
-    'base': map-get($shades, 'black'),
+    'base': map-get($shades, 'white'),
     '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'),
+    'lighten-2': map-get($shades, 'white'),
+    'lighten-1': 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-1': map-get($shades, 'white'),
+    'accent-2': map-get($shades, 'white'),
+    'accent-3': map-get($shades, 'white'),
     'accent-4': map-get($shades, 'white')
   ),
   $text-on-pink
@@ -128,19 +128,19 @@ $purple: map-deep-merge(
 $text-on-purple: () !default;
 $text-on-purple: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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-3': map-get($shades, 'white'),
+    'lighten-2': map-get($shades, 'white'),
     '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-1': map-get($shades, 'white'),
+    'accent-2': map-get($shades, 'white'),
+    'accent-3': map-get($shades, 'white'),
     'accent-4': map-get($shades, 'white')
   ),
   $text-on-purple
@@ -170,17 +170,17 @@ $deep-purple: map-deep-merge(
 $text-on-deep-purple: () !default;
 $text-on-deep-purple: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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-3': map-get($shades, 'white'),
+    'lighten-2': map-get($shades, 'white'),
     '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-1': map-get($shades, 'white'),
     'accent-2': map-get($shades, 'white'),
     'accent-3': map-get($shades, 'white'),
     'accent-4': map-get($shades, 'white')
@@ -212,18 +212,18 @@ $indigo: map-deep-merge(
 $text-on-indigo: () !default;
 $text-on-indigo: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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-3': map-get($shades, 'white'),
+    'lighten-2': map-get($shades, 'white'),
     '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-1': map-get($shades, 'white'),
+    'accent-2': map-get($shades, 'white'),
     'accent-3': map-get($shades, 'white'),
     'accent-4': map-get($shades, 'white')
   ),
@@ -246,7 +246,7 @@ $blue: map-deep-merge(
     'accent-1': #82B1FF,
     'accent-2': #448AFF,
     'accent-3': #2979FF,
-    'accent-4': #2962FF
+    'accent-4': #2962FF,
   ),
   $blue
 );
@@ -254,19 +254,19 @@ $blue: map-deep-merge(
 $text-on-blue: () !default;
 $text-on-blue: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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'),
+    'lighten-1': 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-2': map-get($shades, 'white'),
+    'accent-3': map-get($shades, 'white'),
     'accent-4': map-get($shades, 'white')
   ),
   $text-on-blue
@@ -296,20 +296,20 @@ $light-blue: map-deep-merge(
 $text-on-light-blue: () !default;
 $text-on-light-blue: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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-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, 'black')
+    'accent-3': map-get($shades, 'white'),
+    'accent-4': map-get($shades, 'white')
   ),
   $text-on-light-blue
 );
@@ -338,20 +338,20 @@ $cyan: map-deep-merge(
 $text-on-cyan: () !default;
 $text-on-cyan: 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'),
-    'base': map-get($shades, 'black'),
-    'darken-1': map-get($shades, 'black'),
-    'darken-2': map-get($shades, 'black'),
-    'darken-3': 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, 'black')
+    'accent-4': map-get($shades, 'white')
   ),
   $text-on-cyan
 );
@@ -380,20 +380,20 @@ $teal: map-deep-merge(
 $text-on-teal: () !default;
 $text-on-teal: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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'),
+    'lighten-2': map-get($shades, 'white'),
+    'lighten-1': 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, 'black')
+    'accent-4': map-get($shades, 'white')
   ),
   $text-on-teal
 );
@@ -422,19 +422,19 @@ $green: map-deep-merge(
 $text-on-green: () !default;
 $text-on-green: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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'),
+    'lighten-1': 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-2': map-get($shades, 'black'),
+    'accent-3': map-get($shades, 'black'),
     'accent-4': map-get($shades, 'black')
   ),
   $text-on-green
@@ -464,15 +464,15 @@ $light-green: map-deep-merge(
 $text-on-light-green: () !default;
 $text-on-light-green: 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'),
-    'base': map-get($shades, 'black'),
-    'darken-1': map-get($shades, 'black'),
-    'darken-2': map-get($shades, 'black'),
-    'darken-3': 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'),
@@ -506,16 +506,16 @@ $lime: map-deep-merge(
 $text-on-lime: () !default;
 $text-on-lime: 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'),
-    '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'),
+    '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'),
@@ -548,16 +548,16 @@ $yellow: map-deep-merge(
 $text-on-yellow: () !default;
 $text-on-yellow: 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'),
-    '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'),
+    'darken-4': map-get($shades, 'white'),
     'accent-1': map-get($shades, 'black'),
     'accent-2': map-get($shades, 'black'),
     'accent-3': map-get($shades, 'black'),
@@ -590,16 +590,16 @@ $amber: map-deep-merge(
 $text-on-amber: () !default;
 $text-on-amber: 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'),
-    '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'),
+    'darken-4': map-get($shades, 'white'),
     'accent-1': map-get($shades, 'black'),
     'accent-2': map-get($shades, 'black'),
     'accent-3': map-get($shades, 'black'),
@@ -632,20 +632,20 @@ $orange: map-deep-merge(
 $text-on-orange: () !default;
 $text-on-orange: 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'),
-    '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'),
+    '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, 'black')
+    'accent-4': map-get($shades, 'white')
   ),
   $text-on-orange
 );
@@ -671,19 +671,19 @@ $deep-orange: (
 $text-on-deep-orange: () !default;
 $text-on-deep-orange: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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'),
+    'lighten-1': 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-2': map-get($shades, 'white'),
+    'accent-3': map-get($shades, 'white'),
     'accent-4': map-get($shades, 'white')
   ),
   $text-on-deep-orange
@@ -709,12 +709,12 @@ $brown: map-deep-merge(
 $text-on-brown: () !default;
 $text-on-brown: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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-2': map-get($shades, 'white'),
     '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'),
@@ -743,12 +743,12 @@ $blue-grey: map-deep-merge(
 $text-on-blue-grey: () !default;
 $text-on-blue-grey: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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'),
+    'lighten-2': map-get($shades, 'white'),
+    'lighten-1': map-get($shades, 'white'),
     'darken-1': map-get($shades, 'white'),
     'darken-2': map-get($shades, 'white'),
     'darken-3': map-get($shades, 'white'),
@@ -777,12 +777,12 @@ $grey: map-deep-merge(
 $text-on-grey: () !default;
 $text-on-grey: map-deep-merge(
   (
+    'base': map-get($shades, 'white'),
     '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'),

package/lib/styles/settings/_elevations.scss

@@ -1,8 +1,8 @@
 @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;
-$shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12) !default;
+$shadow-key-umbra-opacity: var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)) !default;
+$shadow-key-penumbra-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)) !default;
+$shadow-key-ambient-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12)) !default;
 
 $shadow-key-umbra: () !default;
 $shadow-key-umbra: map-deep-merge(

package/lib/styles/settings/_utilities.scss

@@ -124,6 +124,7 @@ $utilities: () !default;
           center: center,
           space-between: space-between,
           space-around: space-around,
+          space-evenly: space-evenly,
           stretch: stretch,
         )
       ),
@@ -340,9 +341,9 @@ $utilities: () !default;
         class: rounded-t,
         values: variables.$rounded
       ),
-      "rounded-right": (
-        property: border-top-right-radius border-bottom-right-radius,
-        class: rounded-r,
+      "rounded-end": (
+        property: (ltr: border-top-right-radius border-bottom-right-radius, rtl: border-top-left-radius border-bottom-left-radius),
+        class: rounded-e,
         values: variables.$rounded
       ),
       "rounded-bottom": (
@@ -350,29 +351,29 @@ $utilities: () !default;
         class: rounded-b,
         values: variables.$rounded
       ),
-      "rounded-left": (
-        property: border-top-left-radius border-bottom-left-radius,
-        class: rounded-l,
+      "rounded-start": (
+        property: (ltr: border-top-left-radius border-bottom-left-radius, rtl: border-top-right-radius border-bottom-right-radius),
+        class: rounded-s,
         values: variables.$rounded
       ),
-      "rounded-top-left": (
-        property: border-top-left-radius,
-        class: rounded-tl,
+      "rounded-top-start": (
+        property: (ltr: border-top-left-radius, rtl: border-top-right-radius),
+        class: rounded-ts,
         values: variables.$rounded
       ),
-      "rounded-top-right": (
-        property: border-top-right-radius,
-        class: rounded-tr,
+      "rounded-top-end": (
+        property: (ltr: border-top-right-radius, rtl: border-top-left-radius),
+        class: rounded-te,
         values: variables.$rounded
       ),
-      "rounded-bottom-right": (
-        property: border-bottom-right-radius,
-        class: rounded-br,
+      "rounded-bottom-end": (
+        property: (ltr: border-bottom-right-radius, rtl: border-bottom-left-radius),
+        class: rounded-be,
         values: variables.$rounded
       ),
-      "rounded-bottom-left": (
-        property: border-bottom-left-radius,
-        class: rounded-bl,
+      "rounded-bottom-start": (
+        property: (ltr: border-bottom-left-radius, rtl: border-bottom-right-radius),
+        class: rounded-bs,
         values: variables.$rounded
       ),
 
@@ -388,23 +389,23 @@ $utilities: () !default;
         values: variables.$border-opacities
       ),
       "border-top": (
-        property: border-top-width border-top-style border-top-color,
+        property: border-block-start-width border-block-start-style border-block-start-color,
         class: border-t,
         values: variables.$borders
       ),
-      "border-right": (
-        property: border-right-width border-right-style border-right-color,
-        class: border-r,
+      "border-end": (
+        property: border-inline-end-width border-inline-end-style border-inline-end-color,
+        class: border-e,
         values: variables.$borders
       ),
       "border-bottom": (
-        property: border-bottom-width border-bottom-style border-bottom-color,
+        property: border-block-end-width border-block-end-style border-block-end-color,
         class: border-b,
         values: variables.$borders
       ),
-      "border-left": (
-        property: border-left-width border-left-style border-left-color,
-        class: border-l,
+      "border-start": (
+        property: border-inline-start-width border-inline-start-style border-inline-start-color,
+        class: border-s,
         values: variables.$borders
       ),
       "border-style": (
@@ -442,12 +443,12 @@ $utilities: () !default;
         values: (break: break-word)
       ),
       "text-opacity": (
-        property: opacity,
+        property: color,
         class: text,
         values: (
-          high-emphasis: var(--v-high-emphasis-opacity),
-          medium-emphasis: var(--v-medium-emphasis-opacity),
-          disabled: var(--v-disabled-opacity)
+          high-emphasis: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)),
+          medium-emphasis: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)),
+          disabled: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)),
         )
       ),
       "text-overflow": (
@@ -455,11 +456,6 @@ $utilities: () !default;
         class: text,
         values: (truncate: nowrap hidden ellipsis)
       ),
-      "text-transform": (
-        property: text-transform,
-        class: text,
-        values: none capitalize lowercase uppercase
-      ),
       "typography": (
         responsive: true,
         property: (
@@ -477,18 +473,61 @@ $utilities: () !default;
         ),
         values: variables.$flat-typography
       ),
+      "text-transform": (
+        property: text-transform,
+        class: text,
+        values: none capitalize lowercase uppercase
+      ),
+      "font-weight": (
+        property: font-weight,
+        class: font-weight,
+        values: variables.$font-weights
+      ),
+      "font-italic": (
+        property: font-style,
+        class: font,
+        values: italic
+      ),
       // Position
       "position": (
         property: position,
         class: position,
         values: static relative fixed absolute sticky
       ),
+      // Sizing
       "fill-height": (
         property: height,
         class: fill,
         values: (
           height: 100%
         )
+      ),
+      "height": (
+        property: height,
+        class: h,
+        values: (
+          auto: auto,
+          screen: 100vh,
+          0: 0,
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%
+        )
+      ),
+      "width": (
+        property: width,
+        class: w,
+        values: (
+          auto: auto,
+          0: 0,
+          25: 25%,
+          33: 33%,
+          50: 50%,
+          66: 66%,
+          75: 75%,
+          100: 100%
+        )
       )
     ),
     $utilities