Bug In Material Variables
Posted: 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.
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.
that SASS variable is missing--text-color-secondary:#{textSecondaryColor};
$
Code: Select all
:root {
--surface-a:#ffffff;
--surface-b:#fafafa;
--surface-c:rgba(0,0,0,.04);
--surface-d:rgba(0,0,0,.12);
--surface-e:#ffffff;
--surface-f:#ffffff;
--text-color:#{$textColor};
--text-color-secondary:#{textSecondaryColor};
--primary-color:#{$primaryColor};
--primary-color-text:#{$primaryTextColor};
--font-family:#{$fontFamily};
--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;
--content-padding:#{$panelContentPadding};
--inline-spacing:#{$inlineSpacing};
}