Bug In Material Variables

Post Reply
Posts: 2
Joined: 16 Jul 2021, 17:04

26 Jul 2021, 18:14

Hey, I just started working with the SASS API in Theme Designer. Our company is using the Material Light theme as a base and found that there is a missed variable for the CSS variables.
that SASS variable is missing

Code: Select all

:root {
    --surface-0: #ffffff;
    --surface-50: #FAFAFA;
    --surface-100: #F5F5F5;
    --surface-200: #EEEEEE;
    --surface-300: #E0E0E0;
    --surface-400: #BDBDBD;
    --surface-500: #9E9E9E;
    --surface-600: #757575;
    --surface-700: #616161;
    --surface-800: #424242;
    --surface-900: #212121;
Also a secondary question, is there a reason why the ":root" selector is part of the variables file? Including selectors in a member type file causes duplications of selector code if the member file is used in multiple places. An example is if I wanted to use the variables file to build an SASS file that is used in Vue's SFC that are scoped, I get the ":root" selector in every component. In my opinion, members (variables, mixins, functions) should live in their own files and selectors in another so that members can be passed around better.

Posts: 18512
Joined: 05 Jan 2009, 00:21
Location: Cybertron

03 Aug 2021, 16:46

I believe this is fixed in latest designer release, could you please verify?

Posts: 2
Joined: 16 Jul 2021, 17:04

03 Aug 2021, 17:10

Yes the missing "$" was fixed. Also great job with adding the defaults.

I guess my only concern at this time is the use of ":root" in the variables file. If we want to use the variables file to be auto injected into our SFC, we end up with multiple ":root" selectors. Is the assumption that the developers are not suppose to do that and use CSS variables instead? If that is an assumption, wondering if that can be outlined in the documents somewhere?

Post Reply

Return to “PrimeVue Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests