diff options
Diffstat (limited to 'app')
8 files changed, 18 insertions, 453 deletions
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 21c252038af..aa5bd4cf098 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -582,7 +582,7 @@ See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details. // used in the Markdown rendering of labels .scoped-label-tooltip-title { - color: var(--indigo-300, $indigo-300); + color: var(--theme-indigo-300, $theme-indigo-300); } .gl-label-scoped { diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss index 36f1b1f2903..0e76d651b70 100644 --- a/app/assets/stylesheets/framework/feature_highlight.scss +++ b/app/assets/stylesheets/framework/feature_highlight.scss @@ -24,7 +24,7 @@ .feature-highlight-illustration { - background-color: $indigo-50; + background-color: $theme-indigo-50; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom: 1px solid darken($gray-normal, 8%); diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 3770a9b68a0..1964487c5e0 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -1,3 +1,5 @@ +@import '@gitlab/ui/dist/tokens/scss/tokens'; + /* * Layout */ @@ -91,79 +93,6 @@ $darken-border-dashed-factor: 25% !default; $purple: #6d49cb !default; $purple-light: #ede8fb !default; -$green-50: #ecf4ee !default; -$green-100: #c3e6cd !default; -$green-200: #91d4a8 !default; -$green-300: #52b87a !default; -$green-400: #2da160 !default; -$green-500: #108548 !default; -$green-600: #217645 !default; -$green-700: #24663b !default; -$green-800: #0d532a !default; -$green-900: #0a4020 !default; -$green-950: #072b15 !default; - -$blue-50: #e9f3fc !default; -$blue-100: #cbe2f9 !default; -$blue-200: #9dc7f1 !default; -$blue-300: #63a6e9 !default; -$blue-400: #428fdc !default; -$blue-500: #1f75cb !default; -$blue-600: #1068bf !default; -$blue-700: #0b5cad !default; -$blue-800: #064787 !default; -$blue-900: #033464 !default; -$blue-950: #002850 !default; - -$orange-50: #fdf1dd !default; -$orange-100: #f5d9a8 !default; -$orange-200: #e9be74 !default; -$orange-300: #d99530 !default; -$orange-400: #c17d10 !default; -$orange-500: #ab6100 !default; -$orange-600: #9e5400 !default; -$orange-700: #8f4700 !default; -$orange-800: #703800 !default; -$orange-900: #5c2900 !default; -$orange-950: #421f00 !default; - -$red-50: #fcf1ef !default; -$red-100: #fdd4cd !default; -$red-200: #fcb5aa !default; -$red-300: #f57f6c !default; -$red-400: #ec5941 !default; -$red-500: #dd2b0e !default; -$red-600: #c91c00 !default; -$red-700: #ae1800 !default; -$red-800: #8d1300 !default; -$red-900: #660e00 !default; -$red-950: #4d0a00 !default; - -$purple-50: #f4f0ff !default; -$purple-100: #e1d8f9 !default; -$purple-200: #cbbbf2 !default; -$purple-300: #ac93e6 !default; -$purple-400: #9475db !default; -$purple-500: #7b58cf !default; -$purple-600: #694cc0 !default; -$purple-700: #5943b6 !default; -$purple-800: #453894 !default; -$purple-900: #2f2a6b !default; -$purple-950: #232150 !default; - -$gray-10: #fbfafd !default; -$gray-50: #ececef !default; -$gray-100: #dcdcde !default; -$gray-200: #bfbfc3 !default; -$gray-300: #a4a3a8 !default; -$gray-400: #89888d !default; -$gray-500: #737278 !default; -$gray-600: #626168 !default; -$gray-700: #535158 !default; -$gray-800: #434248 !default; -$gray-900: #333238 !default; -$gray-950: #1f1e24 !default; - $gray-lightest: lighten($gray-10, 1) !default; $gray-light: $gray-10 !default; $gray-lighter: lighten($gray-50, 4) !default; @@ -179,196 +108,14 @@ $t-gray-a-08: rgba($gray-950, 0.08) !default; $t-gray-a-16: rgba($gray-950, 0.16) !default; $t-gray-a-24: rgba($gray-950, 0.24) !default; -$white: #fff !default; $white-normal: $gray-50 !default; $white-dark: darken($gray-50, 2) !default; -$black: #000 !default; $black-transparent: $t-gray-a-24 !default; $almost-black: $gray-950 !default; -$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 -); - -$purples: ( - '50': $purple-50, - '100': $purple-100, - '200': $purple-200, - '300': $purple-300, - '400': $purple-400, - '500': $purple-500, - '600': $purple-600, - '700': $purple-700, - '800': $purple-800, - '900': $purple-900, - '950': $purple-950 -); - -$grays: ( - '10': $gray-10, - '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: #f1f1ff; -$indigo-100: #dbdbf8; -$indigo-200: #c7c7f2; -$indigo-300: #a2a2e6; -$indigo-400: #8181d7; -$indigo-500: #6666c4; -$indigo-600: #5252b5; -$indigo-700: #41419f; -$indigo-800: #303083; -$indigo-900: #222261; -$indigo-950: #14143d; // To do this variant right for darkmode, we need to create a variable for it. -$indigo-900-alpha-008: rgba($indigo-900, 0.08); - -$theme-blue-50: #cdd8e3; -$theme-blue-100: #b9cadc; -$theme-blue-200: #a6bdd5; -$theme-blue-300: #81a5c9; -$theme-blue-400: #628eb9; -$theme-blue-500: #4977a5; -$theme-blue-600: #346596; -$theme-blue-700: #235180; -$theme-blue-800: #153c63; -$theme-blue-900: #0b2640; -$theme-blue-950: #04101c; - -$theme-light-blue-50: #dde6ee; -$theme-light-blue-100: #c1d4e6; -$theme-light-blue-200: #a0bedc; -$theme-light-blue-300: #74a3d3; -$theme-light-blue-400: #4f8bc7; -$theme-light-blue-500: #3476b9; -$theme-light-blue-600: #2268ae; -$theme-light-blue-700: #145aa1; -$theme-light-blue-800: #0e4d8d; -$theme-light-blue-900: #0c4277; -$theme-light-blue-950: #0a3764; - -$theme-green-50: #dde9de; -$theme-green-100: #b1d6b5; -$theme-green-200: #8cc497; -$theme-green-300: #69af7d; -$theme-green-400: #499767; -$theme-green-500: #308258; -$theme-green-600: #25744c; -$theme-green-700: #1b653f; -$theme-green-800: #155635; -$theme-green-900: #0e4328; -$theme-green-950: #052e19; - -$theme-red-50: #f4e9e7; -$theme-red-100: #ecd3d0; -$theme-red-200: #e3bab5; -$theme-red-300: #d59086; -$theme-red-400: #c66e60; -$theme-red-500: #ad4a3b; -$theme-red-600: #a13322; -$theme-red-700: #8f2110; -$theme-red-800: #761405; -$theme-red-900: #580d02; -$theme-red-950: #380700; - -$theme-light-red-50: #faf2f1; -$theme-light-red-100: #f6d9d5; -$theme-light-red-200: #ebada2; -$theme-light-red-300: #e07f6f; -$theme-light-red-400: #d36250; -$theme-light-red-500: #c24b38; -$theme-light-red-600: #b53a26; -$theme-light-red-700: #a02e1c; -$theme-light-red-800: #8b2212; -$theme-light-red-900: #751709; -$theme-light-red-950: #5c1105; - -// Data visualization color palette - -$data-viz-blue-50: #e9ebff !default; -$data-viz-blue-100: #d2dcff !default; -$data-viz-blue-200: #b7c6ff !default; -$data-viz-blue-300: #97acff !default; -$data-viz-blue-400: #7992f5 !default; -$data-viz-blue-500: #617ae2 !default; -$data-viz-blue-600: #4e65cd !default; -$data-viz-blue-700: #3f51ae !default; -$data-viz-blue-800: #374291 !default; -$data-viz-blue-900: #303470 !default; -$data-viz-blue-950: #2a2b59 !default; +$indigo-900-alpha-008: rgba($theme-indigo-900, 0.08); $border-white-light: darken($white, $darken-border-factor) !default; $border-white-normal: darken($white-normal, $darken-border-factor) !default; @@ -834,7 +581,7 @@ $linked-project-column-margin: 60px; Performance Bar */ $perf-bar-production: $gray-950; -$perf-bar-staging: $indigo-950; +$perf-bar-staging: $theme-indigo-950; $perf-bar-development: $red-900; $perf-bar-bucket-bg: $black; $perf-bar-bucket-box-shadow-from: rgba($white, 0.2); diff --git a/app/assets/stylesheets/page_bundles/profiles/preferences.scss b/app/assets/stylesheets/page_bundles/profiles/preferences.scss index d09ad42a722..502674deec8 100644 --- a/app/assets/stylesheets/page_bundles/profiles/preferences.scss +++ b/app/assets/stylesheets/page_bundles/profiles/preferences.scss @@ -13,11 +13,11 @@ margin-bottom: $gl-padding-8; &.ui-indigo { - background-color: $indigo-900; + background-color: $theme-indigo-900; } &.ui-light-indigo { - background-color: $indigo-700; + background-color: $theme-indigo-700; } &.ui-blue { diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 36fa457f244..69d0431c9a8 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -1,15 +1,4 @@ -$gray-10: #1f1e24; -$gray-50: #333238; -$gray-100: #434248; -$gray-200: #535158; -$gray-300: #626168; -$gray-400: #737278; -$gray-500: #89888d; -$gray-600: #a4a3a8; -$gray-700: #bfbfc3; -$gray-800: #dcdcde; -$gray-900: #ececef; -$gray-950: #fbfafd; +@import '@gitlab/ui/dist/tokens/scss/tokens.dark'; $gray-lightest: lighten($gray-10, 1); $gray-light: lighten($gray-10, 2); @@ -25,100 +14,14 @@ $gray-darkest: $gray-700; $t-gray-a-16: rgba($gray-10, 0.16); $t-gray-a-24: rgba($gray-10, 0.24); -$black: #fff; $black-normal: $gray-900; -$white: $gray-50; $white-normal: $gray-50; $white-dark: $gray-100; -$green-50: #0a4020; -$green-100: #0d532a; -$green-200: #24663b; -$green-300: #217645; -$green-400: #108548; -$green-500: #2da160; -$green-600: #52b87a; -$green-700: #91d4a8; -$green-800: #c3e6cd; -$green-900: #ecf4ee; -$green-950: #f1fdf6; - -$blue-50: #033464; -$blue-100: #064787; -$blue-200: #0b5cad; -$blue-300: #1068bf; -$blue-400: #1f75cb; -$blue-500: #428fdc; -$blue-600: #63a6e9; -$blue-700: #9dc7f1; -$blue-800: #cbe2f9; -$blue-900: #e9f3fc; -$blue-950: #f2f9ff; - -$orange-50: #5c2900; -$orange-100: #703800; -$orange-200: #8f4700; -$orange-300: #9e5400; -$orange-400: #ab6100; -$orange-500: #c17d10; -$orange-600: #d99530; -$orange-700: #e9be74; -$orange-800: #f5d9a8; -$orange-900: #fdf1dd; -$orange-950: #fff4e1; - -$red-50: #660e00; -$red-100: #8d1300; -$red-200: #ae1800; -$red-300: #c91c00; -$red-400: #dd2b0e; -$red-500: #ec5941; -$red-600: #f57f6c; -$red-700: #fcb5aa; -$red-800: #fdd4cd; -$red-900: #fcf1ef; -$red-950: #fff4f3; - -$indigo-50: #1a1a40; -$indigo-100: #292961; -$indigo-200: #393982; -$indigo-300: #4b4ba3; -$indigo-400: #5b5bbd; -$indigo-500: #6666c4; -$indigo-600: #7c7ccc; -$indigo-700: #a6a6de; -$indigo-800: #d1d1f0; -$indigo-900: #ebebfa; -$indigo-950: #f7f7ff; - -$purple-50: #232150; -$purple-100: #2f2a6b; -$purple-200: #453894; -$purple-300: #5943b6; -$purple-400: #694cc0; -$purple-500: #7b58cf; -$purple-600: #9475db; -$purple-700: #ac93e6; -$purple-800: #cbbbf2; -$purple-900: #e1d8f9; -$purple-950: #f4f0ff; - $theme-indigo-50: #1a1a40; $border-color: #4f4f4f; -$data-viz-blue-50: #2a2b59; -$data-viz-blue-100: #303470; -$data-viz-blue-200: #374291; -$data-viz-blue-300: #3f51ae; -$data-viz-blue-400: #4e65cd; -$data-viz-blue-500: #617ae2; -$data-viz-blue-600: #7992f5; -$data-viz-blue-700: #97acff; -$data-viz-blue-800: #b7c6ff; -$data-viz-blue-900: #d2dcff; -$data-viz-blue-950: #e9ebff; - $border-white-normal: $border-color; $gl-text-color-secondary: $gray-700; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index c0eced48171..be2c791644a 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -1,93 +1,10 @@ @import './themes/dark'; +@import '@gitlab/ui/dist/tokens/css/tokens.dark'; @import 'page_bundles/mixins_and_variables_and_functions'; @import './themes/theme_helper'; :root { color-scheme: dark; - --gray-10: #{$gray-10}; - --gray-50: #{$gray-50}; - --gray-100: #{$gray-100}; - --gray-200: #{$gray-200}; - --gray-300: #{$gray-300}; - --gray-400: #{$gray-400}; - --gray-500: #{$gray-500}; - --gray-600: #{$gray-600}; - --gray-700: #{$gray-700}; - --gray-800: #{$gray-800}; - --gray-900: #{$gray-900}; - --gray-950: #{$gray-950}; - - --green-50: #{$green-50}; - --green-100: #{$green-100}; - --green-200: #{$green-200}; - --green-300: #{$green-300}; - --green-400: #{$green-400}; - --green-500: #{$green-500}; - --green-600: #{$green-600}; - --green-700: #{$green-700}; - --green-800: #{$green-800}; - --green-900: #{$green-900}; - --green-950: #{$green-950}; - - --blue-50: #{$blue-50}; - --blue-100: #{$blue-100}; - --blue-200: #{$blue-200}; - --blue-300: #{$blue-300}; - --blue-400: #{$blue-400}; - --blue-500: #{$blue-500}; - --blue-600: #{$blue-600}; - --blue-700: #{$blue-700}; - --blue-800: #{$blue-800}; - --blue-900: #{$blue-900}; - --blue-950: #{$blue-950}; - - --orange-50: #{$orange-50}; - --orange-100: #{$orange-100}; - --orange-200: #{$orange-200}; - --orange-300: #{$orange-300}; - --orange-400: #{$orange-400}; - --orange-500: #{$orange-500}; - --orange-600: #{$orange-600}; - --orange-700: #{$orange-700}; - --orange-800: #{$orange-800}; - --orange-900: #{$orange-900}; - --orange-950: #{$orange-950}; - - --red-50: #{$red-50}; - --red-100: #{$red-100}; - --red-200: #{$red-200}; - --red-300: #{$red-300}; - --red-400: #{$red-400}; - --red-500: #{$red-500}; - --red-600: #{$red-600}; - --red-700: #{$red-700}; - --red-800: #{$red-800}; - --red-900: #{$red-900}; - --red-950: #{$red-950}; - - --indigo-50: #{$indigo-50}; - --indigo-100: #{$indigo-100}; - --indigo-200: #{$indigo-200}; - --indigo-300: #{$indigo-300}; - --indigo-400: #{$indigo-400}; - --indigo-500: #{$indigo-500}; - --indigo-600: #{$indigo-600}; - --indigo-700: #{$indigo-700}; - --indigo-800: #{$indigo-800}; - --indigo-900: #{$indigo-900}; - --indigo-950: #{$indigo-950}; - - --purple-50: #{$purple-50}; - --purple-100: #{$purple-100}; - --purple-200: #{$purple-200}; - --purple-300: #{$purple-300}; - --purple-400: #{$purple-400}; - --purple-500: #{$purple-500}; - --purple-600: #{$purple-600}; - --purple-700: #{$purple-700}; - --purple-800: #{$purple-800}; - --purple-900: #{$purple-900}; - --purple-950: #{$purple-950}; --dark-icon-color-purple-1: #524a68; --dark-icon-color-purple-2: #715bae; @@ -98,8 +15,6 @@ --gl-text-color: #{$gray-900}; --border-color: #{$border-color}; - --white: #{$white}; - --black: #{$black}; --gray-light: #{$gray-50}; --svg-status-bg: #{$white}; diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss index d7e8ddadf46..d82fb7b748c 100644 --- a/app/assets/stylesheets/themes/theme_indigo.scss +++ b/app/assets/stylesheets/themes/theme_indigo.scss @@ -3,10 +3,10 @@ :root { &.ui-indigo { @include gitlab-theme( - $indigo-200, - $indigo-500, - $indigo-700, - $indigo-900, + $theme-indigo-200, + $theme-indigo-500, + $theme-indigo-700, + $theme-indigo-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss index 04bcfaf8366..89e8fbc8a60 100644 --- a/app/assets/stylesheets/themes/theme_light_indigo.scss +++ b/app/assets/stylesheets/themes/theme_light_indigo.scss @@ -3,10 +3,10 @@ :root { &.ui-light-indigo { @include gitlab-theme( - $indigo-200, - $indigo-500, - $indigo-500, - $indigo-700, + $theme-indigo-200, + $theme-indigo-500, + $theme-indigo-500, + $theme-indigo-700, $white ); |