Issues using MD3 preset

[marvin-wtt]

Problems using MD3 with Quasar

Hi, first of all: thank you for your work on this package.

I would really like to use Material Design 3 with Quasar, so this preset looks very promising. However, I encountered several problems and I am not sure whether I configured something incorrectly.

Issues I encountered

• The styling looks off for many components.
  • For example, the drawer in mini mode does not look quite right.
• The app primary color does not seem to be used correctly.
• I get TypeScript errors in the Quasar config:
  • UnoCSS property does not have type enforce
  • QuasarPreset has no call signature
• There is a large debug output when starting the app.

Question

Am I doing something wrong, or are these known issues / limitations at the moment?

Dependencies

{
  "unocss": "^66.7.0",
  "unocss-preset-quasar": "^0.2.14",
  "@iconify-json/mdi": "^1.2.3",
  "@quasar/extras": "^1.16.17",
  "quasar": "^2.19.3"
}

[stefanvanherwijnen]

I just released a new version which should fix the TypeScript errors and the wrong logging.

Can you provide some more information about the other two problems? If you notice any specific styling problems let me know and I will try to fix it (please provide screenshots).

Edit: You should provide a sourceColor as option. The app colors are based off that, and the 'primary' color is not equal to this source color (https://www.npmjs.com/package/@material/material-color-utilities). It is adjusted for hue, chroma and tone.

[marvin-wtt]

Here is an example of the drawer in mini mode. It's copy-paste from the quasar-docs (make sure that the width is larger than the breakpoint). My understanding of MD3 is that the avatar and label should stack.

In the last release, the dist is now in the srcsubfolder, which makes the exports in the package.json invalid

[stefanvanherwijnen]

Here is an example of the drawer in mini mode. It's copy-paste from the quasar-docs (make sure that the width is larger than the breakpoint). My understanding of MD3 is that the avatar and label should stack.

In the last release, the dist is now in the srcsubfolder, which makes the exports in the package.json invalid

Oh yeah, I updated the tsconfigs but probably made a mistake. I'll fix it tomorrow.

Give these a try: https://github.com/simsustech/quasar-components/tree/main/packages/components/src/ui/md3

The default components indeed do not adhere to the MD3 spec (and can't be updated without losing MD 2 compatability)

[stefanvanherwijnen]

0.2.17 should be working again.