Commit 9e0302cc authored by Clement Ho's avatar Clement Ho

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

Add color util classes for backgrounds and text

See merge request gitlab-org/gitlab-ce!26898
parents a35a23cd a9346f33
......@@ -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";
......@@ -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
*/
......
@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;
}
}
......@@ -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
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment