Feat/rename and color picker (#780)

* WIP

* Add menu for rename/color select

* Add stories

* Remove useless code

* Fix color name, add icon for selected color

* Remove useless comment

* Unify color vocabulary

* Fix rebase

* Rename story

* Improve hotkeys and imports

front/src/modules/ui/themes/colors.ts

@@ -23,7 +23,7 @@ export const grayScale = {
   gray0: '#ffffff',
 };
 
-export const color = {
+export const color: { [key: string]: string } = {
   yellow: '#ffd338',
   yellow80: '#2e2a1a',
   yellow70: '#453d1e',
@@ -51,7 +51,7 @@ export const color = {
   turquoise30: '#9af0b0',
   turquoise20: '#c9fbd9',
   turquoise10: '#e8fde9',
-  sskyky: '#00e0ff',
+  sky: '#00e0ff',
   sky80: '#1a2d2e',
   sky70: '#1e3f40',
   sky60: '#224f50',

front/src/modules/ui/themes/tag.ts

@@ -0,0 +1,55 @@
+import { color } from './colors';
+
+export const tagLight: { [key: string]: { [key: string]: string } } = {
+  text: {
+    green: color.green60,
+    turquoise: color.turquoise60,
+    sky: color.sky60,
+    blue: color.blue60,
+    purple: color.purple60,
+    pink: color.pink60,
+    red: color.red60,
+    orange: color.orange60,
+    yellow: color.yellow60,
+    gray: color.gray60,
+  },
+  background: {
+    green: color.green20,
+    turquoise: color.turquoise20,
+    sky: color.sky20,
+    blue: color.blue20,
+    purple: color.purple20,
+    pink: color.pink20,
+    red: color.red20,
+    orange: color.orange20,
+    yellow: color.yellow20,
+    gray: color.gray20,
+  },
+};
+
+export const tagDark = {
+  text: {
+    green: color.green10,
+    turquoise: color.turquoise10,
+    sky: color.sky10,
+    blue: color.blue10,
+    purple: color.purple10,
+    pink: color.pink10,
+    red: color.red10,
+    orange: color.orange10,
+    yellow: color.yellow10,
+    gray: color.gray10,
+  },
+  background: {
+    green: color.green60,
+    turquoise: color.turquoise60,
+    sky: color.sky60,
+    blue: color.blue60,
+    purple: color.purple60,
+    pink: color.pink60,
+    red: color.red60,
+    orange: color.orange60,
+    yellow: color.yellow60,
+    gray: color.gray60,
+  },
+};

front/src/modules/ui/themes/themes.ts

@@ -7,6 +7,7 @@ import { boxShadowDark, boxShadowLight } from './boxShadow';
 import { color, grayScale } from './colors';
 import { fontDark, fontLight } from './font';
 import { icon } from './icon';
+import { tagDark, tagLight } from './tag';
 import { text } from './text';
 
 const common = {
@@ -47,6 +48,7 @@ export const lightTheme = {
     accent: accentLight,
     background: backgroundLight,
     border: borderLight,
+    tag: tagLight,
     boxShadow: boxShadowLight,
     font: fontLight,
     name: 'light',
@@ -60,6 +62,7 @@ export const darkTheme: ThemeType = {
     accent: accentDark,
     background: backgroundDark,
     border: borderDark,
+    tag: tagDark,
     boxShadow: boxShadowDark,
     font: fontDark,
     name: 'dark',