[Feature Request] Having color class helpers on theme variables also and clearer syntax

[augnustin]

Problem to solve

Vuetify is amazing, I'm having a great time building an interface with it.

But I find using color tools pretty confusing and I am currently writing a custom documentation in my code base to clarify usage, which shouldn't be necessary.

Basically, there are Theme colors and Palette colors and I don't really understand why they don't behave the same way.

• When there is a color prop in a component, one can use both: <v-btn color="primary" /> or <v-btn color="blue" />
• With CSS variables, one can also use both:

<style lang="scss" scoped>
  .something {
    color: var(--v-primary-base);
    background-color: var(--v-grey-lighten2);
  }
</style>

• But custom classes are only available for palette colors

<div class="red--text blue" /> <!-- Works -->
<div class="primary--text secondary" /> <!-- Doesn't work :-( -->

Besides I don't understand the logic:

• red--text changes the text color, why not having red--background aside, instead of a very general class name red?
• The base class is colorname--text but to use a variant, on must add text--lighten-1: this is highly confusing

Proposed solution

1. Having class helpers for theme colors also. <div class="primary--text" />
2. Change background color class helper for colorname--background
3. Either text--colorname along with text--lighten-1, or even simpler IMHO: red--lighten-1--text and purple-darken-2--background.

Thanks for your consideration

[KaelWD]

With CSS variables, one can also use both

Nope, there's only CSS variables for theme colors. Palette colors are available in sass variables instead (because they're static).

But custom classes are only available for palette colors

? https://codepen.io/kaelwd/pen/VwyzjPq?editors=1010

why not having red--background aside, instead of a very general class name red

Because it was originally copied from materializecss. This has been changed in v3:

• red -> bg-red
• red lighten-1 -> bg-red-lighten-1
• red--text -> text-red
• red--text text--lighten-1 -> text-red-lighten-1

[augnustin]

Happy to read that the class helpers have been uniformized in v3.

Nope, there's only CSS variables for theme colors. Palette colors are available in sass variables instead (because they're static).

Ok so I got confused. In order to unify this mixed syntax, I wrote a SCSS helper function, which seems pretty neat:

@function get_color($base, $variant: 'base', $level: 0) {
  $theme_colors: 'primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success';
  $shades_colors: 'white', 'black', 'transparent';
  $variants: 'base', 'darken', 'lighten';
  $levels: 1, 2, 3, 4, 5;

  @if not list.index($variants, $variant) {
    @error "#{$variant} is not a valid variant value. Expected one of #{$variants}.";
  }

  @if $variant != 'base' and not list.index($levels, $level) {
    @error "#{$level} is not a valid level value. Expected one of #{$levels}.";
  }

  @if list.index($theme_colors, $base) {
    $variant_with_level: if($variant == 'base', $variant, '#{$variant}#{$level}');
    @return var(--v-#{$base}-#{$variant_with_level});
  }
  @if list.index($shades_colors, $base) {
    @return map-get($shades, $base);
  }
  $variant_with_level: if($variant == 'base', $variant, '#{$variant}-#{$level}');
  @return map-deep-get($colors, $base, $variant_with_level);
};

Usage:

background: get_color('primary'); // var(--v-primary-base);
color: get_color('white'); // #FFFFFF;
border-color: get_color('grey', 'lighten', 3); // #EEEEEE

In case anyone steps here, feel free to use!