Merge branch '324720-rotation-assiignee-colors-for-dark-mode' into 'master'

Assignee color for dark mode

See merge request gitlab-org/gitlab!58501

app/assets/stylesheets/page_bundles/oncall_schedules.scss

@@ -95,7 +95,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
       @include gl-font-weight-normal;
 
       &.label-dark {
-        @include gl-text-gray-900;
+        color: var(--gray-900, $gray-900);
       }
 
       &.label-bold {

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/rotation_assignee.vue

 <script>
 import { GlAvatar, GlPopover } from '@gitlab/ui';
-import { uniqueId } from 'lodash';
+import * as cssVariables from '@gitlab/ui/scss_to_js/scss_variables';
+import { uniqueId, startCase } from 'lodash';
+import { darkModeEnabled } from '~/lib/utils/color_utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { truncate } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
+import { LIGHT_TO_DARK_MODE_SHADE_MAPPING } from '../../../constants';
 
 export const SHIFT_WIDTHS = {
   md: 100,
@@ -50,8 +53,21 @@ export default {
 
       return this.assignee.user.username;
     },
-    chevronClass() {
-      return `gl-bg-data-viz-${this.assignee.colorPalette}-${this.assignee.colorWeight}`;
+    colorWeight() {
+      const { colorWeight } = this.assignee;
+      return darkModeEnabled() ? LIGHT_TO_DARK_MODE_SHADE_MAPPING[colorWeight] : colorWeight;
+    },
+    chevronBackground() {
+      const { colorPalette } = this.assignee;
+      const bgColor = `dataViz${startCase(colorPalette)}${this.colorWeight}`;
+      return cssVariables[bgColor];
+    },
+    textClass() {
+      if (darkModeEnabled()) {
+        return this.colorWeight < 500 ? 'gl-text-white' : 'gl-text-gray-900';
+      }
+
+      return 'gl-text-white';
     },
     endsAt() {
       return sprintf(__('Ends: %{endsAt}'), {
@@ -81,10 +97,11 @@ export default {
     <div
       :id="rotationAssigneeUniqueID"
       class="gl-h-6"
-      :class="[chevronClass, $options.ROTATION_CENTER_CLASS]"
+      :style="{ backgroundColor: chevronBackground }"
+      :class="$options.ROTATION_CENTER_CLASS"
       data-testid="rotation-assignee"
     >
-      <div class="gl-text-white" :class="$options.ROTATION_CENTER_CLASS">
+      <div :class="[textClass, $options.ROTATION_CENTER_CLASS]">
         <gl-avatar v-if="!hasRotationMobileViewAvatar" :src="assignee.user.avatarUrl" :size="16" />
         <span
           v-if="!hasRotationMobileViewText"

ee/app/assets/javascripts/oncall_schedules/constants.js

@@ -8,6 +8,15 @@ export const CHEVRON_SKIPPING_SHADE_ENUM = ['500', '600', '700', '800', '900', '
 
 export const CHEVRON_SKIPPING_PALETTE_ENUM = ['blue', 'orange', 'aqua', 'green', 'magenta'];
 
+export const LIGHT_TO_DARK_MODE_SHADE_MAPPING = {
+  500: 500,
+  600: 400,
+  700: 300,
+  800: 200,
+  900: 100,
+  950: 50,
+};
+
 /**
  * an Array of Objects that represent the 30 possible
  * color combinations for assignees

ee/changelogs/unreleased/324720-rotation-assiignee-colors-for-dark-mode.yml

+---
+title: Assignee color for dark mode
+merge_request: 58501
+author:
+type: changed

ee/spec/frontend/oncall_schedule/rotations/components/rotation_assignee_spec.js

@@ -10,6 +10,7 @@ import { truncate } from '~/lib/utils/text_utility';
 import mockRotations from '../../mocks/mock_rotation.json';
 
 jest.mock('lodash/uniqueId', () => (prefix) => `${prefix}fakeUniqueId`);
+jest.mock('~/lib/utils/color_utils');
 
 describe('RotationAssignee', () => {
   let wrapper;
@@ -72,11 +73,9 @@ describe('RotationAssignee', () => {
       expect(findAvatar().exists()).toBe(false);
     });
 
-    it('should render an assignee color based on the chevron skipping color pallette', () => {
+    it('should render an assignee color based on the chevron skipping color palette', () => {
       const token = findToken();
-      expect(token.classes()).toContain(
-        `gl-bg-data-viz-${assignee.participant.colorPalette}-${assignee.participant.colorWeight}`,
-      );
+      expect(token.attributes('style')).toBe('background-color: rgb(87, 114, 255);');
     });
 
     it('should render an assignee schedule and rotation information in a popover', () => {

ee/spec/frontend/oncall_schedule/schedule/components/__snapshots__/rotations_list_section_spec.js.snap

@@ -84,9 +84,10 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
             style="left: 0px; width: 0px;"
           >
             <div
-              class="gl-h-6 gl-bg-data-viz-blue-500 gl-display-flex gl-justify-content-center gl-align-items-center"
+              class="gl-h-6 gl-display-flex gl-justify-content-center gl-align-items-center"
               data-testid="rotation-assignee"
               id="rotation-assignee-2"
+              style="background-color: rgb(87, 114, 255);"
             >
               <div
                 class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
@@ -124,9 +125,10 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
             style="left: 0px; width: 0px;"
           >
             <div
-              class="gl-h-6 gl-bg-data-viz-orange-500 gl-display-flex gl-justify-content-center gl-align-items-center"
+              class="gl-h-6 gl-display-flex gl-justify-content-center gl-align-items-center"
               data-testid="rotation-assignee"
               id="rotation-assignee-3"
+              style="background-color: rgb(209, 78, 0);"
             >
               <div
                 class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"

ee/spec/frontend/oncall_schedule/schedule/components/rotations_list_section_spec.js

@@ -11,6 +11,8 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { scheduleIid } from '../../mocks/apollo_mock';
 import mockRotations from '../../mocks/mock_rotation.json';
 
+jest.mock('~/lib/utils/color_utils');
+
 describe('RotationsListSectionComponent', () => {
   let wrapper;
   const mockTimeframeInitialDate = new Date(mockRotations[0].shifts.nodes[0].startsAt);