Merge branch 'css-color-utils' into 'master'

Add color util classes for backgrounds and text

See merge request gitlab-org/gitlab-ce!26898

app/assets/stylesheets/application.scss

@@ -6,40 +6,29 @@
  *= require cropper.css
 */
 
-/*
- * Welcome to GitLab css!
- * If you need to add or modify UI component that is common for many pages
- * like a table or typography then make changes in the framework/ directory.
- * If you need to add unique style that should affect only one page - use pages/
- * directory.
- */
-
+// Welcome to GitLab css!
+// If you need to add or modify UI component that is common for many pages
+// like a table or typography then make changes in the framework/ directory.
+// If you need to add unique style that should affect only one page - use pages/
+// directory.
 @import "../../../node_modules/at.js/dist/css/jquery.atwho";
 @import "../../../node_modules/pikaday/scss/pikaday";
 @import "../../../node_modules/dropzone/dist/basic";
 @import "../../../node_modules/select2/select2";
 
-/*
- * GitLab UI framework
- */
+// GitLab UI framework
 @import "framework";
 
-/*
- * Font icons
- */
+// Font icons
 @import "font-awesome";
 
-/*
- * Page specific styles (issues, projects etc):
- */
+// Page specific styles (issues, projects etc):
 @import "pages/**/*";
 
-/*
- * Component specific styles, will be moved to gitlab-ui
- */
+// Component specific styles, will be moved to gitlab-ui
 @import "components/**/*";
 
-/*
- * Styles for JS behaviors.
- */
+// Styles for JS behaviors.
 @import "behaviors";
+
+@import "utilities";

app/assets/stylesheets/framework/variables.scss

@@ -110,6 +110,84 @@ $gray-800: #4f4f4f;
 $gray-900: #2e2e2e;
 $gray-950: #1f1f1f;
 
+$greens: (
+  '50': $green-50,
+  '100': $green-100,
+  '200': $green-200,
+  '300': $green-300,
+  '400': $green-400,
+  '500': $green-500,
+  '600': $green-600,
+  '700': $green-700,
+  '800': $green-800,
+  '900': $green-900,
+  '950': $green-950
+);
+
+$blues: (
+  '50': $blue-50,
+  '100': $blue-100,
+  '200': $blue-200,
+  '300': $blue-300,
+  '400': $blue-400,
+  '500': $blue-500,
+  '600': $blue-600,
+  '700': $blue-700,
+  '800': $blue-800,
+  '900': $blue-900,
+  '950': $blue-950
+);
+
+$oranges: (
+  '50': $orange-50,
+  '100': $orange-100,
+  '200': $orange-200,
+  '300': $orange-300,
+  '400': $orange-400,
+  '500': $orange-500,
+  '600': $orange-600,
+  '700': $orange-700,
+  '800': $orange-800,
+  '900': $orange-900,
+  '950': $orange-950
+);
+
+$reds: (
+  '50': $red-50,
+  '100': $red-100,
+  '200': $red-200,
+  '300': $red-300,
+  '400': $red-400,
+  '500': $red-500,
+  '600': $red-600,
+  '700': $red-700,
+  '800': $red-800,
+  '900': $red-900,
+  '950': $red-950
+);
+
+$grays: (
+  '50': $gray-50,
+  '100': $gray-100,
+  '200': $gray-200,
+  '300': $gray-300,
+  '400': $gray-400,
+  '500': $gray-500,
+  '600': $gray-600,
+  '700': $gray-700,
+  '800': $gray-800,
+  '900': $gray-900,
+  '950': $gray-950
+);
+
+$color-ranges: (
+  'primary': $blues,
+  'secondary': $grays,
+  'success': $greens,
+  'warning': $oranges,
+  'danger': $reds
+);
+
 // GitLab themes
 
 $indigo-50: #f7f7ff;
@@ -219,6 +297,15 @@ $gl-gray-dark: #313236;
 $gl-gray-light: #5c5c5c;
 $gl-header-color: #4c4e54;
 
+$type-scale: (
+  1: 12px,
+  2: 14px,
+  3: 16px,
+  4: 20px,
+  5: 28px,
+  6: 42px
+);
+
 /*
  * Lists
  */

app/assets/stylesheets/utilities.scss

+@each $variant, $range in $color-ranges {
+  @each $suffix, $color in $range {
+    #{'.bg-#{$variant}-#{$suffix}'} {
+      background-color: $color;
+    }
+
+    #{'.text-#{$variant}-#{$suffix}'} {
+      color: $color;
+    }
+  }
+}
+
+@each $index, $size in $type-scale {
+  #{'.text-#{$index}'} {
+    font-size: $size;
+  }
+}

doc/development/fe_guide/style_guide_scss.md

@@ -12,7 +12,15 @@ led by the [GitLab UI WG](https://gitlab.com/gitlab-com/www-gitlab-com/merge_req
 We have a few internal utility classes in [`common.scss`](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/framework/common.scss)
 and we use [Bootstrap's Utility Classes](https://getbootstrap.com/docs/4.3/utilities/)
 
-New utility classes should be added to [`common.scss`](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/framework/common.scss).
+New utility classes should be added to [`utilities.scss`](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/stylesheets/utilities.scss). Existing classes include:
+
+**Background color**: `.bg-variant-shade` e.g. `.bg-warning-400`  
+**Text color**: `.text-variant-shade` e.g. `.text-success-500` 
+- variant is one of 'primary', 'secondary', 'success', 'warning', 'error'
+- shade is on of the shades listed on [colors](https://design.gitlab.com/foundations/colors/)
+
+**Font size**: `.text-size` e.g. `.text-2`
+- **size** is number from 1-6 from our [Type scale](https://design.gitlab.com/foundations/typography)
 
 ### Naming