Overriding global scss - Githubissues

Kestami commented 2 years ago

Hi,

I'm wondering what needs to be done in order to override scss?

Looking at the data table SCSS example section, I should be able to just import the following;

@use '@material/data-table' with (
  $fill-color: red,
  $header-row-fill-color: green,
);

This seems to have no effect though? I have other scss in the same file that updates correctly so it's nothing to do with not loading the file etc.

Any ideas / example? Thanks in advance

elf-mouse commented 2 years ago

Hi @Kestami,

I have tested it completely and there is no problem

For BalmJS CLI

// app/styles/global/_vendor.scss
@use '@material/data-table' with
($fill-color: red, $header-row-fill-color: green);

@use 'balm-ui/dist/balm-ui';

For Vue CLI/Vite

<!-- src/App.vue -->
<style lang="scss">
@use '@material/data-table' with
($fill-color: red, $header-row-fill-color: green);

@use 'balm-ui/dist/balm-ui';
</style>

Kestami commented 2 years ago

Hi @elf-mouse

Thanks for your response. I have a couple of follow up questions regarding this.

I've tried from your above Vue CLI/Vite example and your example works fine, though this leaves me with 2 further queries...

a)

Whilst the code works within a Vue file, I want to put this in a normal .scss file to affect globally (I guess I could just put it as unscoped scss in a main .vue file). Should this be possible? I've just got an overrides.scss file which gets compiled down to css as per my original question, and this still does nothing when placed outside of a vue file.

b)

If I override the scss variables in a vue file, I was hoping I could use colours which I've overridden here:

app.use(BalmUI, {
   $theme: {
      primary: red
   }
}

I can see that this changes the primary colour of any balmUI components such as buttons / list items. I want to be able to use this primary colour now in my scss override within a vue file like so:

//in app.vue
<style lang="scss">

   @use '@material/theme' as color;
   @use '@material/data-table' with ($fill-color: color.$primary);
   @use 'balm-ui/dist/balm-ui';

</style>

However, this picks the original, none overridden $primary colour...

I can get around this with the following code:

//in app.vue
<style lang="scss">

   @use '@material/theme' as color;
//this line has changed to use var()
   @use '@material/data-table' with ($fill-color: var(--mdc-theme-primary);
   @use 'balm-ui/dist/balm-ui';

</style>

However I'm not sure the use of var(--mdc-theme-primary) is the right way to go?

Any thoughts/ideas?

I appreciate the help!

Cheers.

Kestami commented 2 years ago

Almost instantly after posting this I've noticed that my question B was solved by just using "primary" instead of importing colour and using color.$primary.

However the $header-row-fill-color override seems to do nothing? I can see $fill-color works, but not $header-row-fill-color.

Can you verify that changing that variable makes a difference for you and answer just question A from above?

edit: the style tag also appears to have to be scoped in order to take effect, which means I can't just override them globally in app.vue

//has to be marked scoped to work and then only impacts the current component
<style scoped lang="scss">
   //here $fill-color works, but $header-row-fill-color does not
   @use '@material/data-table' with ($fill-color: primary, $header-row-fill-color: primary;)
   @use 'balm-ui/dist/balm-ui';
</style>

Cheers!

elf-mouse commented 2 years ago

Hi @Kestami ,

About question A, you can use Vite, like this:

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import BalmUI from 'balm-ui';
import './styles/index.scss';

const app = createApp(App);

app.use(BalmUI);

app.mount('#app');

src/styles/index.scss
```
@forward './vars';
@use './vendors';
```

src/styles/_vars.scss

$primaryColor: red;

$fontPath: 'balm-ui/fonts';

src/styles/_vendors.scss

@use './vars';

@use '@material/theme/variables' with ($primary: vars.$primaryColor);

@use 'balm-ui/components/icon' with ($font-path: vars.$fontPath);

@use 'balm-ui/dist/balm-ui';

src/App.vue

<style lang="scss">
@use './styles/vars' as vars;

@debug vars.$primaryColor;
</style>

Kestami commented 2 years ago

Hi @elf-mouse

Perfect! That's solved my issues. It really helps to see these examples set out. As I've mentioned before on another issue I've raised (thanks again for your continued support), It'd be great if these examples could be fleshed out in the documentation.

Cheers!

Kestami commented 2 years ago

Sorry to reopen,

I've just been playing around with some of the data table SCSS variables, however changing $header-row-text-color on a data table seems to make no difference?

@use './vars';

@use '@material/data-table' with (
   //these two update colors on the datatable
   $header-row-fill-color: vars.$primaryColor,
   $fill-color: vars.$secondaryColor,
   //this one does not, I'm expecting it to change the font color in header cells of the datatable
   $header-row-text-color: white
)

Can you verify?

Cheers.

elf-mouse commented 2 years ago

@Kestami, I will fix this bug next week

Thanks a lot :)

elf-mouse commented 2 years ago

Hi @Kestami ,

The bug has been fixed now, please upgrade to new version and enjoy it.

Thanks again~

Kestami commented 2 years ago

Perfect, that looks good!

Thank you as well : ) Really enjoying your interactivity and response on issues on this project.

balmjs / balm-ui

Overriding global scss #83