Introduce new navigation themes in GitLab 11.0
In 10.0 we introduced GitLab navigation themes:
For the 11.0 release, let's add an additional color theme.
Design
We add a new red theme, as well as light versions of all the existing themes.
The hex values for each theme are inside the following block:
$light-indigo-50: $indigo-50; $light-indigo-100: $indigo-100; $light-indigo-200: $indigo-200; $light-indigo-300: $indigo-300; $light-indigo-400: $indigo-400; $light-indigo-500: $indigo-500; $light-indigo-600: $indigo-600; $light-indigo-700: $indigo-700; $light-indigo-800: $indigo-800; $light-indigo-900: $indigo-900; $light-indigo-950: $indigo-950;
$theme-light-blue-50: #f2f7fc; $theme-light-blue-100: #ebf1f7; $theme-light-blue-200: #c9dcf2; $theme-light-blue-300: #83abd4; $theme-light-blue-400: #4d86bf; $theme-light-blue-500: #367cc2; $theme-light-blue-600: #3771ab; $theme-light-blue-700: #2261a1; $theme-light-blue-800: $theme-blue-800; $theme-light-blue-900: $theme-blue-900; $theme-light-blue-950: $theme-blue-950;
$theme-light-green-50: $theme-green-50; $theme-light-green-100: $theme-green-100; $theme-light-green-200: $theme-green-200; $theme-light-green-300: $theme-green-300; $theme-light-green-400: $theme-green-400; $theme-light-green-500: $theme-green-500; $theme-light-green-600: $theme-green-600; $theme-light-green-700: #156b39; $theme-light-green-800: $theme-green-800; $theme-light-green-900: $theme-green-900; $theme-light-green-950: $theme-green-950;
$theme-light-red-50: #fff6f5; $theme-light-red-100: #fae2de; $theme-light-red-200: #f7d5d0; $theme-light-red-300: #d9796a; $theme-light-red-400: #cf604e; $theme-light-red-500: #c24b38; $theme-light-red-600: #b03927; $theme-light-red-700: #a62e21; $theme-light-red-800: $theme-red-800; $theme-light-red-900: $theme-red-900; $theme-light-red-950: $theme-red-950;
The light themes will be applied throughout the interface just like the existing dark ones, except for these values:
-
Top bar background:
$theme-700
-
Highlight bar in contextual sidebar and tabs:
$theme-500
- Contextual bar highlighted text and icon:
$theme-700
The themes will be in the folowing order in the preferences:
- Indigo
- Light indigo
- Blue
- Light blue
- Green
- Light green
- Red
- Light red
- Dark
- Light
For the theme preview in preferences, the dark themes stay the same. For the light themes the values are as follows:
| | |
| --- | --- | --- |
| $theme-700
| $theme-500
|
| $theme-600
| $theme-400
|