feat: update colors

replace with pastel-style colors
SwitchbackTech · Nov 8, 2024 · f396710 · f396710
1 parent 2c3ce61
commit f396710
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 47 deletions.
diff --git a/packages/web/src/common/styles/theme.ts b/packages/web/src/common/styles/theme.ts
@@ -1,25 +1,14 @@
 import { DefaultTheme } from "styled-components";
 
 export const c = {
-  blue500: "hsl(210 100 63 / 90%)",
-  blue400: "hsl(210 100 63)",
+  black: "hsla(0 0 0 / 25%)",
   blue300: "hsl(195 78 56)",
-  blue200: "hsl(202 100 67)",
-  blue100: "hsl(210 100 73)",
-  orange500: "hsl(25 100 63)",
-  orange400: "hsl(20 84 68)",
-  orange300: "hsl(34 100 66)",
-  orange200: "hsl(40 75 61)",
-  orange100: "hsl(35 70 68)",
-  red500: "hsl(0 63 60)",
-  red400: "hsl(357 81 69)",
-  red300: "hsl(355 84 69)",
-  green500: "hsl(105 61 62)",
-  green400: "hsl(80 65 57)",
-  green300: "hsl(160 62 74)",
-  purple500: "hsl(269 18 43 / 40%)",
-  purple400: "hsl(269 18 43)",
-  purple300: "hsl(270 100 83)",
+  blue200: "hsl(196 60 59)",
+  blue100: "hsl(202 100 67)",
+  blueGray400: "hsl(207 14 57)",
+  blueGray300: "hsl(205 33 61)",
+  blueGray200: "hsl(205 36 56)",
+  blueGray100: "hsl(196 45 78)",
   darkBlue500: "hsl(220 29 6)",
   darkBlue400: "hsl(222 28 7)",
   darkBlue300: "hsl(218 27 8)",
@@ -34,10 +23,13 @@ export const c = {
   gray300: "hsl(219 8 46 / 90.2%)",
   gray200: "hsl(208 13 71 / 54.9%)",
   gray100: "hsl(47 7 73)",
-  white300: "hsl(180 100% 97%)",
+  green: "hsl(105 61 62)",
+  orange: "hsl(25 100 63)",
+  purple: "hsl(270 100 83)",
+  red: "hsl(0 63 60)",
+  teal: "hsl(163 44 67)",
   white200: "hsl(0 0 98)",
   white100: "hsl(0 0 100)",
-  black300: "hsla(0 0 0 / 25%)",
 };
 
 export const theme: DefaultTheme = {
@@ -66,21 +58,21 @@ export const theme: DefaultTheme = {
       text: c.white200,
     },
     shadow: {
-      default: c.black300,
+      default: c.black,
     },
     status: {
-      success: c.green500,
-      error: c.red500,
-      warning: c.orange500,
-      info: c.blue200,
+      success: c.green,
+      error: c.red,
+      warning: c.orange,
+      info: c.blue100,
     },
     tag: {
-      one: c.blue300,
-      two: c.green500,
-      three: c.purple300,
+      one: c.blue100,
+      two: c.green,
+      three: c.purple,
     },
     text: {
-      accent: c.blue200,
+      accent: c.blue100,
       light: c.gray100,
       lighter: c.white100,
       lightInactive: c.gray200,

diff --git a/packages/web/src/common/styles/theme.util.ts b/packages/web/src/common/styles/theme.util.ts
@@ -1,13 +1,18 @@
 import { Priorities } from "@core/constants/core.constants";
-import { darken } from "@core/util/color.utils";
+import { brighten, darken } from "@core/util/color.utils";
 
 import { c } from "./theme";
 
+const UNASSIGNED = c.blueGray400;
+const WORK = c.blueGray100;
+const RELATIONS = c.teal;
+const SELF = c.blueGray200;
+
 export const colorByPriority = {
-  [Priorities.UNASSIGNED]: c.gray100,
-  [Priorities.WORK]: c.green500,
-  [Priorities.RELATIONS]: c.orange500,
-  [Priorities.SELF]: c.blue300,
+  [Priorities.UNASSIGNED]: UNASSIGNED,
+  [Priorities.WORK]: WORK,
+  [Priorities.RELATIONS]: RELATIONS,
+  [Priorities.SELF]: SELF,
 };
 
 export const darkBlueGradient = {
@@ -19,28 +24,32 @@ export const darkBlueGradient = {
 };
 
 export const hoverColorByPriority = {
-  [Priorities.UNASSIGNED]: c.white200,
-  [Priorities.WORK]: c.green400,
-  [Priorities.RELATIONS]: c.orange300,
-  [Priorities.SELF]: c.blue200,
+  [Priorities.UNASSIGNED]: brighten(c.blueGray400),
+  [Priorities.WORK]: brighten(c.blueGray100),
+  [Priorities.RELATIONS]: brighten(c.teal),
+  [Priorities.SELF]: brighten(c.blueGray200),
 };
 
 export const gradientByPriority = {
   [Priorities.UNASSIGNED]: `linear-gradient(90deg, ${darken(
-    c.gray400
-  )}, ${darken(c.gray100)})`,
-  [Priorities.WORK]: `linear-gradient(90deg, ${darken(c.green500)}, ${darken(
-    c.green300
+    UNASSIGNED,
+    15
+  )}, ${darken(UNASSIGNED, 30)})`,
+  [Priorities.WORK]: `linear-gradient(90deg, ${darken(WORK, 15)}, ${darken(
+    WORK,
+    30
   )})`,
   [Priorities.RELATIONS]: `linear-gradient(90deg, ${darken(
-    c.orange500
-  )}, ${darken(c.orange300)})`,
-  [Priorities.SELF]: `linear-gradient(90deg, ${darken(c.blue500)}, ${darken(
-    c.blue200
+    RELATIONS,
+    15
+  )}, ${darken(RELATIONS, 30)})`,
+  [Priorities.SELF]: `linear-gradient(90deg, ${darken(SELF, 15)}, ${darken(
+    SELF,
+    30
   )})`,
 };
 
-export const blueGradient = `linear-gradient(${c.blue200}, ${c.blue300})`;
+export const blueGradient = `linear-gradient(${c.blue100}, ${c.blue300})`;
 const grayGradient = `linear-gradient(90deg, ${c.gray100}, ${c.gray200})`;
 
 export const getGradient = (color: string) => {