@gitlab/ui/src/scss/utility-mixins/color.scss

/**
* Text color utilities.
*
* naming convention: gl-text-{color-palette-variable-name}
* notes:
* - Strictly based design system color palette. See variables.scss
* for a comprehensive list.
*/

@mixin gl-reset-color {
  color: inherit;
}

@mixin gl-text-transparent {
  color: transparent;
}

@mixin gl-text-white($hover: true) {
  color: $white;
}

@mixin gl-text-contrast-light {
  color: $white-contrast;
}

@mixin gl-text-body {
  color: $body-color;
}

@mixin gl-text-secondary {
  color: $gl-text-color-secondary;
}

@mixin gl-sm-text-body {
  @include gl-media-breakpoint-up(sm) {
    @include gl-text-body;
  }
}

@mixin gl-text-black-normal {
  color: $black-normal;
}

@mixin gl-text-gray-200 {
  color: $gray-200;
}

@mixin gl-text-gray-300 {
  color: $gray-300;
}

@mixin gl-text-gray-400 {
  color: $gray-400;
}

@mixin gl-text-gray-500 {
  color: $gray-500;
}

@mixin gl-text-gray-600 {
  color: $gray-600;
}

@mixin gl-text-gray-700 {
  color: $gray-700;
}

@mixin gl-text-gray-800 {
  color: $gray-800;
}

@mixin gl-text-gray-900($active: true, $focus: true, $hover: true) {
  color: $gray-900;
}

@mixin gl-text-gray-950 {
  color: $gray-950;
}

@mixin gl-text-blue-200 {
  color: $blue-200;
}

@mixin gl-text-blue-300 {
  color: $blue-300;
}

@mixin gl-text-blue-400 {
  color: $blue-400;
}

@mixin gl-text-blue-500 {
  color: $blue-500;
}

@mixin gl-text-blue-600($hover: true) {
  color: $blue-600;
}

@mixin gl-text-blue-700 {
  color: $blue-700;
}

@mixin gl-text-blue-800($hover: true) {
  color: $blue-800;
}

@mixin gl-text-blue-900 {
  color: $blue-900;
}

@mixin gl-text-green-400 {
  color: $green-400;
}

@mixin gl-text-green-500 {
  color: $green-500;
}

@mixin gl-text-green-600 {
  color: $green-600;
}

@mixin gl-text-green-700 {
  color: $green-700;
}

@mixin gl-text-green-800 {
  color: $green-800;
}

@mixin gl-text-green-900 {
  color: $green-900;
}

@mixin gl-text-theme-green-800 {
  color: $theme-green-800;
}

@mixin gl-text-orange-300 {
  color: $orange-300;
}

@mixin gl-text-orange-400 {
  color: $orange-400;
}

@mixin gl-text-orange-500 {
  color: $orange-500;
}

@mixin gl-text-orange-600 {
  color: $orange-600;
}

@mixin gl-text-orange-700 {
  color: $orange-700;
}

@mixin gl-text-orange-800 {
  color: $orange-800;
}

@mixin gl-text-orange-900 {
  color: $orange-900;
}

@mixin gl-text-red-500 {
  color: $red-500;
}

@mixin gl-text-red-600 {
  color: $red-600;
}

@mixin gl-text-red-700 {
  color: $red-700;
}

@mixin gl-text-red-800 {
  color: $red-800;
}

@mixin gl-text-red-900 {
  color: $red-900;
}

@mixin gl-text-purple-600 {
  color: $purple-600;
}

@mixin gl-text-purple-700 {
  color: $purple-700;
}

@mixin gl-text-purple-800 {
  color: $purple-800;
}

@mixin gl-text-theme-indigo-200 {
  color: $theme-indigo-200;
}

@mixin gl-text-theme-indigo-300 {
  color: $theme-indigo-300;
}

@mixin gl-text-theme-indigo-900 {
  color: $theme-indigo-900;
}

@mixin gl-dark-invert-keep-hue {
  .gl-dark & {
    filter: invert(0.8) hue-rotate(180deg);
  }
}