quasar 2.10.2 → 2.11.1

package/lang/index.json

@@ -111,6 +111,10 @@
     "isoName": "ja",
     "nativeName": "日本語 (にほんご)"
   },
+  {
+    "isoName": "kk",
+    "nativeName": "Қазақша"
+  },
   {
     "isoName": "km",
     "nativeName": "ខ្មែរ"
@@ -123,10 +127,6 @@
     "isoName": "kur-CKB",
     "nativeName": "کوردی سۆرانی"
   },
-  {
-    "isoName": "kz",
-    "nativeName": "Қазақша"
-  },
   {
     "isoName": "lt",
     "nativeName": "Lithuanian"

package/lang/{kz.js → kk.js}

@@ -1,14 +1,14 @@
 /**
  * DO NOT EDIT THIS FILE. It is automatically generated
  * from its .mjs counterpart (same filename but with .mjs extension).
- * Edit that file instead (kz.mjs).
+ * Edit that file instead (kk.mjs).
  */
 function plurals (n, opts) {
   return opts[ n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2 ]
 }
 
 module.exports = {
-  isoName: 'kz',
+  isoName: 'kk',
   nativeName: 'Қазақша',
   label: {
     clear: 'Тазалау',

package/lang/{kz.mjs → kk.mjs}

@@ -3,7 +3,7 @@ function plurals (n, opts) {
 }
 
 export default {
-  isoName: 'kz',
+  isoName: 'kk',
   nativeName: 'Қазақша',
   label: {
     clear: 'Тазалау',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.10.2",
+  "version": "2.11.1",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/btn/QBtn.sass

@@ -52,7 +52,6 @@
         &:before
           box-shadow: $button-shadow-active
 
-
   &--no-uppercase
     text-transform: none
 

package/src/components/card/QCard.sass

@@ -37,6 +37,7 @@
 
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2
 
   &__section
     position: relative
@@ -69,7 +70,7 @@
     padding: 8px
     align-items: center
 
-    .q-btn
+    .q-btn--rectangle
       padding: 0 8px
 
     &--horiz

package/src/components/chip/QChip.sass

@@ -79,5 +79,9 @@ $chip-height: 2em
     .q-avatar
       border-radius: ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)
 
-body.desktop .q-chip--clickable:focus
-  box-shadow: $shadow-1
+body.desktop
+  .q-chip--clickable:focus
+    box-shadow: $shadow-1
+  &.body--dark
+    .q-chip--clickable:focus
+      box-shadow: $dark-shadow-1

package/src/components/color/QColor.sass

@@ -171,6 +171,7 @@
     background: inherit
 
   &--dark
+    box-shadow: $dark-shadow-2
 
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)

package/src/components/date/QDate.sass

@@ -248,4 +248,5 @@
     width: 310px
 
   &--dark
+    box-shadow: $dark-shadow-2
     border-color: $separator-dark-color

package/src/components/dialog/QDialog.js

@@ -366,6 +366,8 @@ export default createComponent({
 
     onBeforeUnmount(cleanup)
 
+    const backdropEvt = vm.proxy.$q.platform.is.ios === true ? 'onClick' : 'onFocusin'
+
     function renderPortalContent () {
       return h('div', {
         role: 'dialog',
@@ -383,7 +385,7 @@ export default createComponent({
               style: transitionStyle.value,
               'aria-hidden': 'true',
               tabindex: -1,
-              onFocusin: onBackdropClick
+              [ backdropEvt ]: onBackdropClick
             })
             : null
         )),

package/src/components/dialog/QDialog.sass

@@ -18,7 +18,6 @@
       -webkit-overflow-scrolling: touch
       will-change: scroll-position
       border-radius: $generic-border-radius
-      box-shadow: $shadow-4
 
     &--square > div
       border-radius: 0 !important

package/src/components/file/QFile.json

@@ -168,6 +168,7 @@
       "desc": "DEPRECATED; Access 'nativeEl' directly; Gets the native input DOM Element",
       "returns": {
         "type": "Element",
+        "tsType": "QFileNativeElement",
         "desc": "The underlying native input DOM Element"
       }
     }
@@ -176,6 +177,7 @@
   "computedProps": {
     "nativeEl": {
       "type": "Element",
+      "tsType": "QFileNativeElement",
       "desc": "The native input DOM Element",
       "addedIn": "v2.10.1"
     }

package/src/components/input/QInput.js

@@ -309,8 +309,8 @@ export default createComponent({
           // but keep the total control size the same
           // Firefox rulez #14263, #14344
           $q.platform.is.firefox !== true && (inp.style.overflow = 'hidden')
-          inp.style.height = '1px'
           parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
+          inp.style.height = '1px'
 
           inp.style.height = inp.scrollHeight + 'px'
           inp.style.overflow = overflow

package/src/components/input/QInput.json

@@ -118,6 +118,7 @@
       "desc": "DEPRECATED; Access 'nativeEl' directly instead; Get the native input/textarea DOM Element",
       "returns": {
         "type": "Element",
+        "tsType": "QInputNativeElement",
         "desc": "The underlying native input/textarea DOM Element"
       }
     }
@@ -126,6 +127,7 @@
   "computedProps": {
     "nativeEl": {
       "type": "Element",
+      "tsType": "QInputNativeElement",
       "desc": "The native input/textarea DOM Element",
       "addedIn": "v2.10.1"
     }

package/src/components/knob/QKnob.sass

@@ -18,4 +18,7 @@
       transition: box-shadow .24s ease-in-out
 
     &:focus:before
-      box-shadow: $shadow-4
+      box-shadow: $shadow-2
+
+body.body--dark .q-knob--editable:focus:before
+  box-shadow: $dark-shadow-2

package/src/components/layout/QLayout.sass

@@ -172,6 +172,8 @@ body:not(.q-body--layout-animate)
 body.body--dark
   .q-header, .q-footer, .q-drawer
     border-color: $separator-dark-color
+  .q-layout__shadow:after
+    box-shadow: $layout-shadow-dark
 
 body.platform-ios
   .q-layout--containerized

package/src/components/linear-progress/QLinearProgress.js

@@ -72,9 +72,11 @@ export default createComponent({
     )
 
     const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q))
+    const transitionSuffix = computed(() => `with${ props.instantFeedback === true ? 'out' : '' }-transition`)
+
     const trackClass = computed(() =>
       'q-linear-progress__track absolute-full'
-      + ` q-linear-progress__track--with${ props.instantFeedback === true ? 'out' : '' }-transition`
+      + ` q-linear-progress__track--${ transitionSuffix.value }`
       + ` q-linear-progress__track--${ isDark.value === true ? 'dark' : 'light' }`
       + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
     )
@@ -82,13 +84,14 @@ export default createComponent({
     const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q))
     const modelClass = computed(() =>
       'q-linear-progress__model absolute-full'
-      + ` q-linear-progress__model--with${ props.instantFeedback === true ? 'out' : '' }-transition`
+      + ` q-linear-progress__model--${ transitionSuffix.value }`
       + ` q-linear-progress__model--${ motion.value === true ? 'in' : '' }determinate`
     )
 
     const stripeStyle = computed(() => ({ width: `${ props.value * 100 }%` }))
     const stripeClass = computed(() =>
       `q-linear-progress__stripe absolute-${ props.reverse === true ? 'right' : 'left' }`
+      + ` q-linear-progress__stripe--${ transitionSuffix.value }`
     )
 
     return () => {

package/src/components/linear-progress/QLinearProgress.sass

@@ -52,10 +52,12 @@
       background: rgba(255,255,255,.6)
 
   &__stripe
-    transition: width var(--q-linear-progress-speed)
     background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0)) !important
     background-size: 40px 40px !important
 
+    &--with-transition
+      transition: width var(--q-linear-progress-speed)
+
 @keyframes q-linear-progress--indeterminate
   0%
     transform: translate3d(-35%, 0, 0) scale3d(.35, 1, 1)

package/src/components/menu/QMenu.sass

@@ -14,3 +14,6 @@
 
   &--square
     border-radius: 0
+
+  &--dark
+    box-shadow: $menu-box-shadow-dark

package/src/components/stepper/QStepper.js

@@ -66,8 +66,8 @@ export default createComponent({
 
     const classes = computed(() =>
       `q-stepper q-stepper--${ props.vertical === true ? 'vertical' : 'horizontal' }`
-      + (props.flat === true || isDark.value === true ? ' q-stepper--flat no-shadow' : '')
-      + (props.bordered === true || (isDark.value === true && props.flat === false) ? ' q-stepper--bordered' : '')
+      + (props.flat === true ? ' q-stepper--flat' : '')
+      + (props.bordered === true ? ' q-stepper--bordered' : '')
       + (isDark.value === true ? ' q-stepper--dark q-dark' : '')
     )
 

package/src/components/stepper/QStepper.sass

@@ -32,6 +32,8 @@
     flex-direction: row
 
   &--dark
+    box-shadow: $dark-shadow-2
+
     .q-stepper__dot span
       color: #000
 
@@ -118,6 +120,9 @@
   &__nav
     padding-top: 24px
 
+  &--flat
+    box-shadow: none
+
   &--bordered
     border: 1px solid $separator-color
 

package/src/components/table/QTable.sass

@@ -119,6 +119,15 @@
   &--col-auto-width
     width: 1px
 
+// positioning selector here
+// so user-land overwrites with !important are not required
+// and also for --flat/--grid to not require !important by default
+.q-table__card--dark,
+.q-table--dark
+  box-shadow: $table-box-shadow-dark
+
+.q-table
+
   &--flat
     box-shadow: none
   &--bordered
@@ -263,7 +272,8 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
 /*
  * On dark background
  */
-.q-table__card--dark, .q-table--dark
+.q-table__card--dark,
+.q-table--dark
   border-color: $table-dark-border-color
 
 .q-table--dark

package/src/components/time/QTime.sass

@@ -184,3 +184,4 @@
 
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2

package/src/components/toggle/QToggle.sass

@@ -74,8 +74,11 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
       color: #fff
       &--truthy
         color: var(--q-primary)
-    .q-toggle__thumb:before
-      opacity: .32 !important
+    .q-toggle__thumb
+      &:after
+        box-shadow: none
+      &:before
+        opacity: .32 !important
 
   &--dense
 
@@ -129,4 +132,3 @@ body.desktop
     &:hover
       .q-toggle__thumb:before
         transform: scale3d(1.5, 1.5, 1)
-

package/src/components/uploader/QUploader.sass

@@ -125,6 +125,7 @@
 
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2
 
     .q-uploader__file
       border-color: $separator-dark-color

package/src/css/core/elevation.sass

@@ -7,12 +7,25 @@
   .shadow-up-#{$z}
     box-shadow: nth($shadows-up, $z)
 
-.no-shadow, .shadow-0
-  box-shadow: none !important
 .inset-shadow
-  box-shadow: $inset-shadow !important
+  box-shadow: $inset-shadow
 .inset-shadow-down
-  box-shadow: $inset-shadow-down !important
+  box-shadow: $inset-shadow-down
+
+body.body--dark
+  @for $z from 1 through 24
+    .shadow-#{$z}
+      box-shadow: nth($dark-shadows, $z)
+    .shadow-up-#{$z}
+      box-shadow: nth($dark-shadows-up, $z)
+
+  .inset-shadow
+    box-shadow: $inset-dark-shadow
+  .inset-shadow-down
+    box-shadow: $inset-dark-shadow-down
+
+.no-shadow, .shadow-0
+  box-shadow: none !important
 
 .z-marginals
   z-index: $z-marginals

package/src/css/core/visibility.sass

@@ -36,8 +36,10 @@
 
 .hidden
   display: none !important
-.invisible
+.invisible, .invisible *
   visibility: hidden !important
+  transition: none !important
+  animation: none !important
 .transparent
   background: transparent !important
 

package/src/css/variables.sass

@@ -459,6 +459,72 @@ $shadow-up-24 : 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-
 // sorry for long line; we need .sass and it doesn't support multi-line list
 $shadows-up: ($shadow-up-1, $shadow-up-2, $shadow-up-3, $shadow-up-4, $shadow-up-5, $shadow-up-6, $shadow-up-7, $shadow-up-8, $shadow-up-9, $shadow-up-10, $shadow-up-11, $shadow-up-12, $shadow-up-13, $shadow-up-14, $shadow-up-15, $shadow-up-16, $shadow-up-17, $shadow-up-18, $shadow-up-19, $shadow-up-20, $shadow-up-21, $shadow-up-22, $shadow-up-23, $shadow-up-24)
 
+$dark-shadow-color         : #fff !default
+$inset-dark-shadow         : 0 7px 9px -7px rgba($dark-shadow-color, .7) inset !default
+$inset-dark-shadow-down    : 0 -7px 9px -7px rgba($dark-shadow-color, .7) inset !default
+
+$elevation-dark-umbra      : rgba($dark-shadow-color, .2) !default
+$elevation-dark-penumbra   : rgba($dark-shadow-color, .14) !default
+$elevation-dark-ambient    : rgba($dark-shadow-color, .12) !default
+
+$dark-shadow-0  : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
+$dark-shadow-1  : 0 1px 3px $elevation-dark-umbra, 0 1px 1px $elevation-dark-penumbra, 0 2px 1px -1px $elevation-dark-ambient !default
+$dark-shadow-2  : 0 1px 5px $elevation-dark-umbra, 0 2px 2px $elevation-dark-penumbra, 0 3px 1px -2px $elevation-dark-ambient !default
+$dark-shadow-3  : 0 1px 8px $elevation-dark-umbra, 0 3px 4px $elevation-dark-penumbra, 0 3px 3px -2px $elevation-dark-ambient !default
+$dark-shadow-4  : 0 2px 4px -1px $elevation-dark-umbra, 0 4px 5px $elevation-dark-penumbra, 0 1px 10px $elevation-dark-ambient !default
+$dark-shadow-5  : 0 3px 5px -1px $elevation-dark-umbra, 0 5px 8px $elevation-dark-penumbra, 0 1px 14px $elevation-dark-ambient !default
+$dark-shadow-6  : 0 3px 5px -1px $elevation-dark-umbra, 0 6px 10px $elevation-dark-penumbra, 0 1px 18px $elevation-dark-ambient !default
+$dark-shadow-7  : 0 4px 5px -2px $elevation-dark-umbra, 0 7px 10px 1px $elevation-dark-penumbra, 0 2px 16px 1px $elevation-dark-ambient !default
+$dark-shadow-8  : 0 5px 5px -3px $elevation-dark-umbra, 0 8px 10px 1px $elevation-dark-penumbra, 0 3px 14px 2px $elevation-dark-ambient !default
+$dark-shadow-9  : 0 5px 6px -3px $elevation-dark-umbra, 0 9px 12px 1px $elevation-dark-penumbra, 0 3px 16px 2px $elevation-dark-ambient !default
+$dark-shadow-10 : 0 6px 6px -3px $elevation-dark-umbra, 0 10px 14px 1px $elevation-dark-penumbra, 0 4px 18px 3px $elevation-dark-ambient !default
+$dark-shadow-11 : 0 6px 7px -4px $elevation-dark-umbra, 0 11px 15px 1px $elevation-dark-penumbra, 0 4px 20px 3px $elevation-dark-ambient !default
+$dark-shadow-12 : 0 7px 8px -4px $elevation-dark-umbra, 0 12px 17px 2px $elevation-dark-penumbra, 0 5px 22px 4px $elevation-dark-ambient !default
+$dark-shadow-13 : 0 7px 8px -4px $elevation-dark-umbra, 0 13px 19px 2px $elevation-dark-penumbra, 0 5px 24px 4px $elevation-dark-ambient !default
+$dark-shadow-14 : 0 7px 9px -4px $elevation-dark-umbra, 0 14px 21px 2px $elevation-dark-penumbra, 0 5px 26px 4px $elevation-dark-ambient !default
+$dark-shadow-15 : 0 8px 9px -5px $elevation-dark-umbra, 0 15px 22px 2px $elevation-dark-penumbra, 0 6px 28px 5px $elevation-dark-ambient !default
+$dark-shadow-16 : 0 8px 10px -5px $elevation-dark-umbra, 0 16px 24px 2px $elevation-dark-penumbra, 0 6px 30px 5px $elevation-dark-ambient !default
+$dark-shadow-17 : 0 8px 11px -5px $elevation-dark-umbra, 0 17px 26px 2px $elevation-dark-penumbra, 0 6px 32px 5px $elevation-dark-ambient !default
+$dark-shadow-18 : 0 9px 11px -5px $elevation-dark-umbra, 0 18px 28px 2px $elevation-dark-penumbra, 0 7px 34px 6px $elevation-dark-ambient !default
+$dark-shadow-19 : 0 9px 12px -6px $elevation-dark-umbra, 0 19px 29px 2px $elevation-dark-penumbra, 0 7px 36px 6px $elevation-dark-ambient !default
+$dark-shadow-20 : 0 10px 13px -6px $elevation-dark-umbra, 0 20px 31px 3px $elevation-dark-penumbra, 0 8px 38px 7px $elevation-dark-ambient !default
+$dark-shadow-21 : 0 10px 13px -6px $elevation-dark-umbra, 0 21px 33px 3px $elevation-dark-penumbra, 0 8px 40px 7px $elevation-dark-ambient !default
+$dark-shadow-22 : 0 10px 14px -6px $elevation-dark-umbra, 0 22px 35px 3px $elevation-dark-penumbra, 0 8px 42px 7px $elevation-dark-ambient !default
+$dark-shadow-23 : 0 11px 14px -7px $elevation-dark-umbra, 0 23px 36px 3px $elevation-dark-penumbra, 0 9px 44px 8px $elevation-dark-ambient !default
+$dark-shadow-24 : 0 11px 15px -7px $elevation-dark-umbra, 0 24px 38px 3px $elevation-dark-penumbra, 0 9px 46px 8px $elevation-dark-ambient !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$dark-shadows: ($dark-shadow-1, $dark-shadow-2, $dark-shadow-3, $dark-shadow-4, $dark-shadow-5, $dark-shadow-6, $dark-shadow-7, $dark-shadow-8, $dark-shadow-9, $dark-shadow-10, $dark-shadow-11, $dark-shadow-12, $dark-shadow-13, $dark-shadow-14, $dark-shadow-15, $dark-shadow-16, $dark-shadow-17, $dark-shadow-18, $dark-shadow-19, $dark-shadow-20, $dark-shadow-21, $dark-shadow-22, $dark-shadow-23, $dark-shadow-24)
+
+$dark-shadow-up-0  : 0 0 0 $elevation-dark-umbra, 0 0 0 $elevation-dark-penumbra, 0 0 0 $elevation-dark-ambient !default
+$dark-shadow-up-1  : 0 -1px 3px $elevation-dark-umbra, 0 -1px 1px $elevation-dark-penumbra, 0 -2px 1px -1px $elevation-dark-ambient !default
+$dark-shadow-up-2  : 0 -1px 5px $elevation-dark-umbra, 0 -2px 2px $elevation-dark-penumbra, 0 -3px 1px -2px $elevation-dark-ambient !default
+$dark-shadow-up-3  : 0 -1px 8px $elevation-dark-umbra, 0 -3px 4px $elevation-dark-penumbra, 0 -3px 3px -2px $elevation-dark-ambient !default
+$dark-shadow-up-4  : 0 -2px 4px -1px $elevation-dark-umbra, 0 -4px 5px $elevation-dark-penumbra, 0 -1px 10px $elevation-dark-ambient !default
+$dark-shadow-up-5  : 0 -3px 5px -1px $elevation-dark-umbra, 0 -5px 8px $elevation-dark-penumbra, 0 -1px 14px $elevation-dark-ambient !default
+$dark-shadow-up-6  : 0 -3px 5px -1px $elevation-dark-umbra, 0 -6px 10px $elevation-dark-penumbra, 0 -1px 18px $elevation-dark-ambient !default
+$dark-shadow-up-7  : 0 -4px 5px -2px $elevation-dark-umbra, 0 -7px 10px 1px $elevation-dark-penumbra, 0 -2px 16px 1px $elevation-dark-ambient !default
+$dark-shadow-up-8  : 0 -5px 5px -3px $elevation-dark-umbra, 0 -8px 10px 1px $elevation-dark-penumbra, 0 -3px 14px 2px $elevation-dark-ambient !default
+$dark-shadow-up-9  : 0 -5px 6px -3px $elevation-dark-umbra, 0 -9px 12px 1px $elevation-dark-penumbra, 0 -3px 16px 2px $elevation-dark-ambient !default
+$dark-shadow-up-10 : 0 -6px 6px -3px $elevation-dark-umbra, 0 -10px 14px 1px $elevation-dark-penumbra, 0 -4px 18px 3px $elevation-dark-ambient !default
+$dark-shadow-up-11 : 0 -6px 7px -4px $elevation-dark-umbra, 0 -11px 15px 1px $elevation-dark-penumbra, 0 -4px 20px 3px $elevation-dark-ambient !default
+$dark-shadow-up-12 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -12px 17px 2px $elevation-dark-penumbra, 0 -5px 22px 4px $elevation-dark-ambient !default
+$dark-shadow-up-13 : 0 -7px 8px -4px $elevation-dark-umbra, 0 -13px 19px 2px $elevation-dark-penumbra, 0 -5px 24px 4px $elevation-dark-ambient !default
+$dark-shadow-up-14 : 0 -7px 9px -4px $elevation-dark-umbra, 0 -14px 21px 2px $elevation-dark-penumbra, 0 -5px 26px 4px $elevation-dark-ambient !default
+$dark-shadow-up-15 : 0 -8px 9px -5px $elevation-dark-umbra, 0 -15px 22px 2px $elevation-dark-penumbra, 0 -6px 28px 5px $elevation-dark-ambient !default
+$dark-shadow-up-16 : 0 -8px 10px -5px $elevation-dark-umbra, 0 -16px 24px 2px $elevation-dark-penumbra, 0 -6px 30px 5px $elevation-dark-ambient !default
+$dark-shadow-up-17 : 0 -8px 11px -5px $elevation-dark-umbra, 0 -17px 26px 2px $elevation-dark-penumbra, 0 -6px 32px 5px $elevation-dark-ambient !default
+$dark-shadow-up-18 : 0 -9px 11px -5px $elevation-dark-umbra, 0 -18px 28px 2px $elevation-dark-penumbra, 0 -7px 34px 6px $elevation-dark-ambient !default
+$dark-shadow-up-19 : 0 -9px 12px -6px $elevation-dark-umbra, 0 -19px 29px 2px $elevation-dark-penumbra, 0 -7px 36px 6px $elevation-dark-ambient !default
+$dark-shadow-up-20 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -20px 31px 3px $elevation-dark-penumbra, 0 -8px 38px 7px $elevation-dark-ambient !default
+$dark-shadow-up-21 : 0 -10px 13px -6px $elevation-dark-umbra, 0 -21px 33px 3px $elevation-dark-penumbra, 0 -8px 40px 7px $elevation-dark-ambient !default
+$dark-shadow-up-22 : 0 -10px 14px -6px $elevation-dark-umbra, 0 -22px 35px 3px $elevation-dark-penumbra, 0 -8px 42px 7px $elevation-dark-ambient !default
+$dark-shadow-up-23 : 0 -11px 14px -7px $elevation-dark-umbra, 0 -23px 36px 3px $elevation-dark-penumbra, 0 -9px 44px 8px $elevation-dark-ambient !default
+$dark-shadow-up-24 : 0 -11px 15px -7px $elevation-dark-umbra, 0 -24px 38px 3px $elevation-dark-penumbra, 0 -9px 46px 8px $elevation-dark-ambient !default
+
+// sorry for long line; we need .sass and it doesn't support multi-line list
+$dark-shadows-up: ($dark-shadow-up-1, $dark-shadow-up-2, $dark-shadow-up-3, $dark-shadow-up-4, $dark-shadow-up-5, $dark-shadow-up-6, $dark-shadow-up-7, $dark-shadow-up-8, $dark-shadow-up-9, $dark-shadow-up-10, $dark-shadow-up-11, $dark-shadow-up-12, $dark-shadow-up-13, $dark-shadow-up-14, $dark-shadow-up-15, $dark-shadow-up-16, $dark-shadow-up-17, $dark-shadow-up-18, $dark-shadow-up-19, $dark-shadow-up-20, $dark-shadow-up-21, $dark-shadow-up-22, $dark-shadow-up-23, $dark-shadow-up-24)
+
 $generic-border-radius          : 4px !default
 $generic-hover-transition       : .3s cubic-bezier(.25, .8, .5, 1) !default
 $typography-font-family         : 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif !default
@@ -507,6 +573,7 @@ $table-selected-background      : rgba(0, 0, 0, .06) !default
 $table-dark-border-color        : $separator-dark-color !default
 $table-dark-hover-background    : rgba(255, 255, 255, .07) !default
 $table-dark-selected-background : rgba(255, 255, 255, .1) !default
+$table-box-shadow-dark          : $dark-shadow-2 !default
 
 $toolbar-min-height             : 50px !default
 $toolbar-padding                : 0 12px !default
@@ -518,9 +585,11 @@ $toolbar-title-padding          : 0 12px !default
 
 $layout-border                  : 1px solid $separator-color !default
 $layout-shadow                  : 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24) !default
+$layout-shadow-dark             : 0 0 10px 2px rgba(255,255,255,.2), 0 0px 10px rgba(255,255,255,.24) !default
 
 $menu-background                : #fff !default
 $menu-box-shadow                : $shadow-2 !default
+$menu-box-shadow-dark           : $dark-shadow-2 !default
 $menu-max-width                 : 95vw !default
 
 $rating-grade-color             : $yellow !default