Fix some issues in the dark mode by using correct primer variables

opf · Jun 24, 2024 · dceff13 · dceff13
1 parent 883f657
commit dceff13
Show file tree

Hide file tree

Showing 10 changed files with 19 additions and 13 deletions.
diff --git a/app/views/custom_styles/_primer_color_mapping.erb b/app/views/custom_styles/_primer_color_mapping.erb
@@ -18,6 +18,8 @@
     --button-primary-bgColor-hover: var(--button--primary-background-hover-color) !important;
     --button-primary-bgColor-disabled: var(--button--primary-background-disabled-color) !important;
     --button-primary-borderColor-disabled: var(--button--primary-border-disabled-color) !important;
+    --fc-page-bg-color: var(--body-background) !important;
+    --fc-list-event-hover-bg-color: var(--control-transparent-bgColor-hover) !important;
   }
 
   /* Generic color mapping for content variables */
@@ -79,6 +81,7 @@
   /* For dark themes we are using a lighter version of the accent and primary color. Otherwise they will not be seen */
   [data-dark-theme=dark] {
       --accent-color: var(--accent-color--dark-mode);
+      --content-icon-color: var(--accent-color--dark-mode);
       --primary-button-color: var(--primary-button-color--dark-mode);
       --main-menu-bg-color: var(--overlay-bgColor);
   }

diff --git a/...app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.sass b/...app/features/team-planner/team-planner/add-work-packages/add-existing-pane.component.sass
@@ -4,7 +4,7 @@
   display: grid
   grid-template-rows: 32px 1fr
   grid-row-gap: 10px
-  background: #F3F3F3
+  background: var(--data-gray-color-muted)
   padding: 8px
   border: 1px solid var(--borderColor-default)
 

diff --git a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.sass b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.sass
@@ -53,7 +53,7 @@ $op-team-planner-resource-width: 180px
 
   &--remove-dropzone
     flex: 1
-    border: 1px dashed #1A67A3
+    border: 1px dashed var(--display-blue-bgColor-emphasis)
     box-sizing: border-box
     height: 2.25rem
 
@@ -62,7 +62,7 @@ $op-team-planner-resource-width: 180px
     justify-content: center
 
     &_active
-      background: #D1E5F5
+      background: var(--display-blue-bgColor-muted)
 
     &_forbidden
       border-color: var(--content-form-danger-zone-bg-color)
@@ -72,12 +72,12 @@ $op-team-planner-resource-width: 180px
 
 
   &--dropzone-label
-    color: #1A67A3
+    color: var(--display-blue-fgColor)
 
   &--no-data
     min-height: 250px
     padding: 2rem
-    background-color: #F3F3F3
+    background-color: var(--data-gray-color-muted)
     display: flex
     flex-direction: column
     justify-content: center

diff --git a/frontend/src/app/spot/styles/sass/components/form-field.sass b/frontend/src/app/spot/styles/sass/components/form-field.sass
@@ -54,7 +54,7 @@
 
   &--error
     @include spot-caption
-    color: $spot-color-danger-dark
+    color: var(--control-borderColor-danger)
     margin-bottom: $spot-spacing-0_25
 
   &--label,

diff --git a/frontend/src/global_styles/content/_activity_list.sass b/frontend/src/global_styles/content/_activity_list.sass
@@ -13,6 +13,7 @@
 
     &-title
       @include spot-body-small (bold)
+      color: var(--body-font-color)
 
     &-subtitle
       @include spot-caption

diff --git a/frontend/src/global_styles/content/_autocomplete.sass b/frontend/src/global_styles/content/_autocomplete.sass
@@ -111,6 +111,9 @@ div.autocomplete
   color: var(--body-font-color) !important
   border-color: var(--borderColor-default) !important
 
+.ng-select-container
+  background-color: transparent !important
+
 .ng-select .ng-arrow-wrapper .ng-arrow
   border-color: var(--fgColor-muted) transparent transparent
 

diff --git a/frontend/src/global_styles/content/_grid.sass b/frontend/src/global_styles/content/_grid.sass
@@ -200,7 +200,7 @@ body.widget-grid-layout
 
 .grid--widget-add
   padding: 15px
-  background-color: var(--gray)
+  background-color: var(--bgColor-neutral-emphasis)
   border-radius: 50%
   opacity: 0
 

diff --git a/frontend/src/global_styles/content/_hide_section.sass b/frontend/src/global_styles/content/_hide_section.sass
@@ -31,7 +31,7 @@ section.hide-section
     flex-wrap: nowrap
     padding: 0.5rem 0
     &:hover
-      background-color: #f8f8f8
+      background-color: var(--control-transparent-bgColor-hover)
 
     .form--field-container
       flex-shrink: 1

diff --git a/frontend/src/global_styles/openproject/_forms.sass b/frontend/src/global_styles/openproject/_forms.sass
@@ -51,11 +51,10 @@ $input-border-focus: 1px solid #999 !default
 
 // Labels
 $form-label-margin: 0.5rem !default
-$form-label-color: #333 !default
 
 // Inline labels
-$inlinelabel-color: #333 !default
-$inlinelabel-background: #eee !default
+$inlinelabel-color: var(--button--font-color) !default
+$inlinelabel-background: var(--button--background-color) !default
 $inlinelabel-border: $input-border !default
 
 // Select menus

diff --git a/frontend/src/global_styles/openproject/_variable_defaults.scss b/frontend/src/global_styles/openproject/_variable_defaults.scss
@@ -115,8 +115,8 @@
   --user-avatar-border-radius: 50%;
   --inplace-edit--border-color: #ddd;
   --inplace-edit--color--very-dark: #cacaca;
-  --inplace-edit--color--disabled: #4d4d4d;
-  --inplace-edit--bg-color--disabled: #eee;
+  --inplace-edit--color--disabled: var(--control-fgColor-disabled);
+  --inplace-edit--bg-color--disabled: var(--control-bgColor-disabled);
   --table-border-color: #E7E7E7;
   --table-row-highlighting-outline-color: #00A6FF;
   --button--font-color: #222222;