SCSS helpers which can be possibly added to Quasar core

_color-additions.scss

// 'src/css/_color-additions.scss'
// import at the end of `src/css/quasar.variables.scss` as `@import 'color.additions';`

$white: #fff;
$black: #000;

// There must be at least 2 colors here, or it won't be taken as a list and the following code won't work
$additional-colors: (
  'custom-color1' $custom-color1,
  'custom-color2' $custom-color2
);

@each $color-name, $color in $additional-colors {
  .bg-#{$color-name} {
    background-color: $color !important;
  }

  .text-#{$color-name} {
    color: $color !important;
  }
}

$alpha-map: (
  '87' 0.87,
  '54' 0.54,
  '38' 0.38,
  '28' 0.28,
  'focused-dark' 0.24,
  'focused-light' 0.12,
  '12' 0.12,
  'activated-dark' 0.24,
  'activated-light' 0.12,
  'selected' 0.08,
  'hover' 0.04
);

$color-map: (
  'primary' $primary,
  'secondary' $secondary,
  'accent' $accent,
  'black' $black,
  'white' $white,
  'positive' $positive,
  'negative' $negative,
  'info' $info,
  'warning' $warning,
  'custom-color1' $custom-color1,
  'custom-color2' $custom-color2
);

@each $alpha-name, $alpha in $alpha-map {
  @each $color-name, $color in $color-map {
    .bg-#{$color-name}-#{$alpha-name}.bg-#{$color-name}-#{$alpha-name} {
      background-color: rgba($color, $alpha);
    }

    .text-#{$color-name}-#{$alpha-name}.text-#{$color-name}-#{$alpha-name} {
      color: rgba($color, $alpha);
    }
  }
}

_utility.scss

// 'src/css/_utility.scss'
// import at the end of `src/css/app.scss` as `@import 'utility';`

.text-underline {
  text-decoration: underline;
}

.cursor-drag {
  cursor: move;
  // stylelint-disable-next-line value-no-vendor-prefix
  cursor: -webkit-grabbing;
}

$text-size-list: 10, 12, 14, 16, 18, 20, 24, 28, 32, 36;

@each $text-size in $text-size-list {
  .text-size-#{$text-size} {
    font-size: $text-size + px;
  }
}