diff options
Diffstat (limited to 'app/assets/stylesheets/framework/variables.scss')
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 95 |
1 files changed, 47 insertions, 48 deletions
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 9cfc5a0201e..99284ea0a64 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -88,14 +88,6 @@ $white-normal: #f0f0f0 !default; $white-dark: #eaeaea !default; $white-transparent: rgba($white, 0.8) !default; -$gray-lightest: #fdfdfd !default; -$gray-light: #fafafa !default; -$gray-lighter: #f9f9f9 !default; -$gray-normal: #f5f5f5 !default; -$gray-dark: darken($gray-light, $darken-dark-factor) !default; -$gray-darker: #eee !default; -$gray-darkest: #c4c4c4 !default; - $purple: #6d49cb !default; $purple-light: #ede8fb !default; @@ -103,11 +95,6 @@ $black: #000 !default; $black-transparent: rgba(0, 0, 0, 0.3) !default; $almost-black: #242424 !default; -$t-gray-a-02: rgba($black, 0.02) !default; -$t-gray-a-04: rgba($black, 0.04) !default; -$t-gray-a-06: rgba($black, 0.06) !default; -$t-gray-a-08: rgba($black, 0.08) !default; - $green-50: #ecf4ee !default; $green-100: #c3e6cd !default; $green-200: #91d4a8 !default; @@ -168,18 +155,33 @@ $purple-800: #453894 !default; $purple-900: #2f2a6b !default; $purple-950: #232150 !default; -$gray-10: #f5f5f5 !default; -$gray-50: #f0f0f0 !default; -$gray-100: #dbdbdb !default; -$gray-200: #bfbfbf !default; -$gray-300: #999 !default; -$gray-400: #868686 !default; -$gray-500: #666 !default; -$gray-600: #5e5e5e !default; -$gray-700: #525252 !default; -$gray-800: #404040 !default; -$gray-900: #303030 !default; -$gray-950: #1f1f1f !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; +$gray-normal: lighten($gray-50, 2) !default; +$gray-dark: darken($gray-light, $darken-dark-factor) !default; +$gray-darker: $gray-50 !default; +$gray-darkest: $gray-200 !default; + +$t-gray-a-02: rgba($gray-950, 0.02) !default; +$t-gray-a-04: rgba($gray-950, 0.04) !default; +$t-gray-a-06: rgba($gray-950, 0.06) !default; +$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; $greens: ( '50': $green-50, @@ -346,6 +348,20 @@ $theme-light-red-500: #c24b38; $theme-light-red-600: #b03927; $theme-light-red-700: #a62e21; +// Data visualization color palette + +$data-viz-blue-50: #e9ebff; +$data-viz-blue-100: #d4dcfa; +$data-viz-blue-200: #b7c6ff; +$data-viz-blue-300: #97acff; +$data-viz-blue-400: #748eff; +$data-viz-blue-500: #5772ff; +$data-viz-blue-600: #445cf2; +$data-viz-blue-700: #3547de; +$data-viz-blue-800: #232fcf; +$data-viz-blue-900: #1e23a8; +$data-viz-blue-950: #11118a; + $border-white-light: darken($white, $darken-border-factor) !default; $border-white-normal: darken($white-normal, $darken-border-factor) !default; @@ -356,7 +372,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); /* * UI elements */ -$contextual-sidebar-bg-color: #f5f5f5; +$contextual-sidebar-bg-color: $gray-10; $contextual-sidebar-border-color: #e9e9e9; $border-color: $gray-100; $shadow-color: $t-gray-a-08; @@ -660,18 +676,7 @@ $ci-skipped-color: #888; */ $issue-boards-font-size: 14px; $issue-boards-card-shadow: rgba(0, 0, 0, 0.1); -/* - The following heights are used in boards.scss and are used for calculation of the board height. - They probably should be derived in a smarter way. -*/ $issue-boards-filter-height: 68px; -$issue-boards-filter-height-md: 110px; -$issue-boards-filter-height-sm: 299px; -$issue-boards-breadcrumbs-height-xs: 63px; -$issue-board-list-difference-xs: calc(#{$header-height} + #{$issue-boards-breadcrumbs-height-xs}); -$issue-board-list-difference-sm: calc(#{$header-height} + #{$breadcrumb-min-height}); -$issue-board-list-difference-md: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height-md}); -$issue-board-list-difference-lg: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height}); /* The following heights are used in environment_logs.scss and are used for calculation of the log viewer height. */ @@ -710,11 +715,11 @@ $job-arrow-margin: 55px; */ // See https://gitlab.com/gitlab-org/gitlab/-/issues/332150 to align with Pajamas Design System $calendar-activity-colors: ( - #f5f5f5, - #d4dcfa, - #748eff, - #3547de, - #11118a, + $gray-50, + $data-viz-blue-100, + $data-viz-blue-400, + $data-viz-blue-700, + $data-viz-blue-950, ) !default; /* @@ -756,12 +761,6 @@ $document-index-color: #888; $help-shortcut-header-color: #333; /* -* Issues -*/ -$issues-today-bg: #f3fff2 !default; -$issues-today-border: #e1e8d5 !default; - -/* * Label */ $label-font-size: 12px; |