The shadow doesn't match the dark mode after upgrading to the latest version

[jsanchezba]

What happened?

After upgrading quasar the shadows on the dark mode doesn´t seems to match like before.

Packages upgraded: @quasar/extras (1.15.6) --> @quasar/extras (1.15.8) quasar (2.10.2) --> quasar(2.11.1)

Shadow before upgrade: q-card

Shadow after upgrade q-card q-header

What did you expect to happen?

Match the dark mode

Reproduction URL

https://codepen.io/jsanchezba/pen/zYLYNNy

How to reproduce?

Upgrade through the quasar-cli running the command: quasar upgrade -i

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Style & Identity (quasar)

Platforms/Browsers

Firefox

Quasar info output

Operating System - Linux(6.0.12-arch1-1) - linux/x64
NodeJs - 18.12.1

Global packages
  NPM - 8.19.3
  yarn - Not installed
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.11.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.6.2 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.8 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.45 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.28 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.8 -- Babel compiler core.
  webpack - 5.70.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-unit-jest - 3.0.0-beta.5 -- A Quasar App Extension for running Jest tests
  @quasar/quasar-app-extension-testing-e2e-cypress - 4.2.2 -- A Quasar App Extension for Cypress e2e

Networking
  Host - Arch
  enp42s0 - 192.168.1.60
  docker0 - 172.17.0.1

Relevant log output

No response

Additional context

Before the upgrade this is the class applied to the q-card:

.q-card--dark {
  border-color: #ffffff47;
}

And now has a box-shadow:

.q-card--dark {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.2), 0 2px 2px rgba(255, 255, 255, 0.14), 0 3px 1px -2px rgba(255, 255, 255, 0.12);
}

Which q-card already has one (And matches better)

.q-card {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  vertical-align: top;
  background: #fff;
  position: relative;
}

[jsanchezba]

I did see now this is related due a change to the shadow colors #15144. Closing this, as we can resolve it with as described on the related issue:

$separator-dark-color: rgba(0, 0, 0, 0.12); $dark-shadow-color: #000; $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);

[yeus]

dark-shadow-color

I just want to add, that you have to put this into the file "quasar.variables.sass" or "quasar.variables.scss" :).