Improved importing

[Jeremy-Walton]

We should consider a way to improve how the package is able to be used.

Right now, you can import the whole package or import pieces of it, but you have to know all the pieces you want.

Maybe your project doesn't use modals or panels or tom select. Currently, there is no easy way to exclude those from your CSS. Is there a way to make those optional?
What if you want to disable dark mode?

One improvement we could make is adding a tokens.scss that just imports the tokens files so you don't have to remember the set of files that comprise all our tokens?

That could allow for something like

@import '@rolemodel/rolemodel-design-system/scss/core/tokens/tokens';

@import '@rolemodel/rolemodel-design-system/scss/components/button';

Instead of the current

@import '@rolemodel/rolemodel-design-system/scss/core/tokens/base_tokens';
@import '@rolemodel/rolemodel-design-system/scss/core/tokens/example_color_tokens';
@import '@rolemodel/rolemodel-design-system/scss/core/tokens/scale_color_tokens';
@import '@rolemodel/rolemodel-design-system/scss/core/tokens/dark_mode_tokens';

@import '@rolemodel/rolemodel-design-system/scss/components/button.scss';

Another approach could be to not include certain things by default like dark mode or panels and then provide instructions for how to include them if wanted.

A solution that works for disabling dark mode would be changing our dark mode selector to

:root:not([data-dark-mode='false']) {
  @media (prefers-color-scheme: dark) {
    & {
      // ... the overrides
    }
  }
}

Then, in your application, on your html tag, you can say html data-dark-mode='false'
If you have a custom theme that handles dark mode, you would need to ensure that query includes the not selector