UBER-206: Redefined color palettes (#3243)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

plugins/tracker-resources/src/components/projects/CreateProject.svelte

@@ -29,9 +29,10 @@
     ToggleWithLabel,
     eventToHTMLElement,
     getColorNumberByText,
-    getPlatformColor,
-    getPlatformColorForText,
-    showPopup
+    getPlatformColorDef,
+    getPlatformColorForTextDef,
+    showPopup,
+    themeStore
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
@@ -233,7 +234,12 @@
       icon={icon === tracker.component.IconWithEmojii ? IconWithEmojii : icon ?? tracker.icon.Home}
       iconProps={icon === tracker.component.IconWithEmojii
         ? { icon: color }
-        : { fill: color !== undefined ? getPlatformColor(color) : getPlatformColorForText(name) }}
+        : {
+            fill:
+              color !== undefined
+                ? getPlatformColorDef(color, $themeStore.dark).icon
+                : getPlatformColorForTextDef(name, $themeStore.dark).icon
+          }}
       kind="no-border"
       size="medium"
       on:click={chooseIcon}

plugins/tracker-resources/src/components/projects/ProjectIconChooser.svelte

@@ -8,7 +8,9 @@
     TabsControl,
     eventToHTMLElement,
     getPlatformColor,
-    showPopup
+    getPlatformColorDef,
+    showPopup,
+    themeStore
   } from '@hcengineering/ui'
   import { ColorsPopup } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
@@ -27,10 +29,16 @@
     dispatch('close', { icon: _icon, color: _color })
   }
   function pickColor (evt: MouseEvent) {
-    showPopup(ColorsPopup, { selected: _color }, eventToHTMLElement(evt), (newColor) => {
-      _color = newColor
-      console.log(newColor)
-    })
+    showPopup(
+      ColorsPopup,
+      { selected: getPlatformColorDef(_color, $themeStore.dark).name },
+      eventToHTMLElement(evt),
+      (newColor) => {
+        if (newColor != null) {
+          _color = newColor
+        }
+      }
+    )
   }
 </script>
 
@@ -54,14 +62,14 @@
           <div class="flex-row-center">
             <Label label={tracker.string.ProjectColor} />
             <div class="flex-no-shrink ml-2 color" on:click={pickColor}>
-              <div class="dot" style="background-color: {getPlatformColor(_color ?? 0)}" />
+              <div class="dot" style="background-color: {getPlatformColor(_color ?? 0, $themeStore.dark)}" />
             </div>
           </div>
           {#each icons as obj}
             <div class="float-left p-2">
               <Button
                 icon={obj}
-                iconProps={{ fill: getPlatformColor(_color ?? 0) }}
+                iconProps={{ fill: getPlatformColor(_color ?? 0, $themeStore.dark) }}
                 size="medium"
                 kind={obj === _icon ? 'primary' : 'transparent'}
                 on:click={() => {

plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Project } from '@hcengineering/tracker'
-  import { Icon, IconWithEmojii, getPlatformColor, getPlatformColorForText } from '@hcengineering/ui'
+  import { Icon, IconWithEmojii, getPlatformColorDef, getPlatformColorForTextDef, themeStore } from '@hcengineering/ui'
   import tracker from '../../plugin'
 
   export let value: Project
@@ -26,7 +26,12 @@
       icon={value.icon === tracker.component.IconWithEmojii ? IconWithEmojii : value.icon ?? tracker.icon.Home}
       iconProps={value.icon === tracker.component.IconWithEmojii
         ? { icon: value.color }
-        : { fill: value.color !== undefined ? getPlatformColor(value.color) : getPlatformColorForText(value.name) }}
+        : {
+            fill:
+              value.color !== undefined
+                ? getPlatformColorDef(value.color, $themeStore.dark).icon
+                : getPlatformColorForTextDef(value.name, $themeStore.dark).icon
+          }}
       size="small"
     />
   </div>

plugins/tracker-resources/src/components/projects/ProjectSpacePresenter.svelte

@@ -15,7 +15,13 @@
 <script lang="ts">
   import { Ref, Space } from '@hcengineering/core'
   import { Project } from '@hcengineering/tracker'
-  import { IconWithEmojii, getPlatformColor, getPlatformColorForText, getCurrentLocation } from '@hcengineering/ui'
+  import {
+    IconWithEmojii,
+    getCurrentLocation,
+    getPlatformColorDef,
+    getPlatformColorForTextDef,
+    themeStore
+  } from '@hcengineering/ui'
   import { NavLink, TreeNode } from '@hcengineering/view-resources'
   import { SpacesNavModel } from '@hcengineering/workbench'
   import { SpecialElement } from '@hcengineering/workbench-resources'
@@ -40,7 +46,12 @@
     icon={space?.icon === tracker.component.IconWithEmojii ? IconWithEmojii : space?.icon ?? model.icon}
     iconProps={space?.icon === tracker.component.IconWithEmojii
       ? { icon: space.color }
-      : { fill: space.color !== undefined ? getPlatformColor(space.color) : getPlatformColorForText(space.name) }}
+      : {
+          fill:
+            space.color !== undefined
+              ? getPlatformColorDef(space.color, $themeStore.dark).icon
+              : getPlatformColorForTextDef(space.name, $themeStore.dark).icon
+        }}
     title={space.name}
     actions={() => getActions(space)}
     on:click={() => localStorage.setItem(getSpaceCollapsedKey(), collapsed ? '' : COLLAPSED)}