style: linear gradient, hover colors

SwitchbackTech · Oct 22, 2024 · f3e7cae · f3e7cae
1 parent 13e113e
commit f3e7cae
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 48 deletions.
diff --git a/packages/core/src/constants/colors.ts b/packages/core/src/constants/colors.ts
@@ -1,7 +1,7 @@
 import { Priorities } from "@core/constants/core.constants";
 import { Colors, ColorNames } from "@core/types/color.types";
 
-export type ColorHex = keyof typeof colors;
+export type ColorHex = keyof typeof OLDcolors;
 
 export const BASE_COLORS = {
   DEEP_BLUE: "#1C3142",
@@ -10,7 +10,7 @@ export const BASE_COLORS = {
   LIGHT_GREY: "#8293A1",
 };
 
-export const colors: Colors = {
+export const OLDcolors: Colors = {
   [ColorNames.BLUE_1]: "#0E1821",
   [ColorNames.BLUE_2]: BASE_COLORS.DEEP_BLUE,
   [ColorNames.BLUE_3]: "#1E2A4B",
@@ -52,18 +52,3 @@ export const colorNameByPriority = {
   [Priorities.SELF]: ColorNames.BLUE_5,
   [Priorities.RELATIONS]: ColorNames.TEAL_2,
 };
-
-export const GRID_LINE_OPACITY_PERCENT = 48;
-
-export const invertedColors = {
-  // priority colors
-  [ColorNames.GREY_4]: BASE_COLORS.ONYX_GREY,
-  [ColorNames.BLUE_7]: BASE_COLORS.ONYX_GREY,
-  [ColorNames.BLUE_5]: BASE_COLORS.DEEP_BLUE,
-  [ColorNames.TEAL_2]: BASE_COLORS.DEEP_BLUE,
-  // other
-  [ColorNames.WHITE_1]: colors.white_3,
-  [ColorNames.YELLOW_2]: colors.yellow_3,
-};
-
-export const linearGradient = `linear-gradient(90deg, ${colors.teal_3}, #4764CA)`;
diff --git a/packages/core/src/util/color.utils.ts b/packages/core/src/util/color.utils.ts
@@ -1,5 +1,4 @@
-import { Priorities } from "@core/constants/core.constants";
-import { ColorHex, colors, invertedColors } from "@core/constants/colors";
+import { BASE_COLORS, ColorHex, OLDcolors } from "@core/constants/colors";
 import { ColorNames, InvertedColorNames } from "@core/types/color.types";
 
 export const getAlphaColor = (colorName: ColorNames, opacity: number) => {
@@ -10,17 +9,27 @@ export const getAlphaColor = (colorName: ColorNames, opacity: number) => {
 export const getBrighterColor = (colorName: ColorNames) => {
   // assumes that the higher the numbers are, the brighter the colors
   //@ts-ignore
-  return colors[getNeighbourKey(colorName, colors, 1)] as string;
+  return OLDcolors[getNeighbourKey(colorName, OLDcolors, 1)] as string;
 };
 
 export const getColor = (colorName: ColorNames) =>
-  colors[colorName] as ColorHex;
+  OLDcolors[colorName] as ColorHex;
 
 export const getDarkerColor = (colorName: ColorNames) => {
-  return colors[getNeighbourKey(colorName, colors, -1) as ColorNames];
+  return OLDcolors[getNeighbourKey(colorName, OLDcolors, -1) as ColorNames];
 };
 
 export const getInvertedColor = (colorName: InvertedColorNames) => {
+  const invertedColors = {
+    // priority colors
+    [ColorNames.GREY_4]: BASE_COLORS.ONYX_GREY,
+    [ColorNames.BLUE_7]: BASE_COLORS.ONYX_GREY,
+    [ColorNames.BLUE_5]: BASE_COLORS.DEEP_BLUE,
+    [ColorNames.TEAL_2]: BASE_COLORS.DEEP_BLUE,
+    // other
+    [ColorNames.WHITE_1]: OLDcolors.white_3,
+    [ColorNames.YELLOW_2]: OLDcolors.yellow_3,
+  };
   //@ts-ignore
   return invertedColors[colorName] as string;
 };
@@ -43,10 +52,3 @@ export const getNeighbourKey = (key = "", obj = {}, diff = 1) => {
 
   return Object.keys(obj).find((_key) => _key === neighbourKey) || key;
 };
-
-export const hoverColorsByPriority = {
-  [Priorities.UNASSIGNED]: "#F0FFFF",
-  [Priorities.WORK]: "#80B8E1",
-  [Priorities.RELATIONS]: "#86D2ED",
-  [Priorities.SELF]: "#8EB1FF",
-};
diff --git a/packages/web/src/__tests__/utils/color.utils.test.ts b/packages/web/src/__tests__/utils/color.utils.test.ts
@@ -1,11 +1,11 @@
 import { getNeighbourKey } from "@core/util/color.utils";
-import { colors } from "@core/constants/colors";
+import { OLDcolors } from "@core/constants/colors";
 
 describe("getNeighbourKey", () => {
   it("increments when index is positive", () => {
-    expect(getNeighbourKey("teal_2", colors, 1)).toBe("teal_3");
+    expect(getNeighbourKey("teal_2", OLDcolors, 1)).toBe("teal_3");
   });
   it("decrements when index is negative", () => {
-    expect(getNeighbourKey("teal_2", colors, -1)).toBe("teal_1");
+    expect(getNeighbourKey("teal_2", OLDcolors, -1)).toBe("teal_1");
   });
 });
diff --git a/packages/web/src/common/styles/theme.ts b/packages/web/src/common/styles/theme.ts
@@ -1,3 +1,4 @@
+import { Priorities } from "@core/constants/core.constants";
 import { DefaultTheme } from "styled-components";
 
 const blue500 = "hsl(210 100 63 / 12.94%)";
@@ -33,6 +34,7 @@ const gray400 = "hsl(221 9 37)";
 const gray300 = "hsl(219 8 46 / 90.2%)";
 const gray200 = "hsl(208 13 71 / 54.9%)";
 const gray100 = "hsl(47 7 73)";
+const white300 = "hsl(180 100% 97%)";
 const white200 = "hsl(0 0 98)";
 const white100 = "hsl(0 0 100)";
 
@@ -44,6 +46,24 @@ export const darkBlueGradient = {
   level5: darkBlue400,
 };
 
+export const hoverColorsByPriority = {
+  [Priorities.UNASSIGNED]: white300,
+  [Priorities.WORK]: green400,
+  [Priorities.RELATIONS]: orange300,
+  [Priorities.SELF]: blue300,
+};
+
+export const colorByPriority = {
+  [Priorities.UNASSIGNED]: gray700,
+  [Priorities.WORK]: green500,
+  [Priorities.RELATIONS]: orange500,
+  [Priorities.SELF]: blue500,
+};
+
+export const GRID_LINE_OPACITY_PERCENT = 48;
+
+export const linearGradient = `linear-gradient(90deg, ${blue100}, ${blue400})`;
+
 export const theme: DefaultTheme = {
   color: {
     bg: {

diff --git a/packages/web/src/components/Divider/styled.ts b/packages/web/src/components/Divider/styled.ts
@@ -1,7 +1,7 @@
 import styled from "styled-components";
-import { linearGradient } from "@core/constants/colors";
 import { ANIMATION_TIME_3_MS } from "@web/common/constants/web.constants";
 import { getColor } from "@core/util/color.utils";
+import { linearGradient } from "@web/common/styles/theme";
 
 import { Props } from "./types";
 

diff --git a/packages/web/src/components/Text/styled.ts b/packages/web/src/components/Text/styled.ts
@@ -1,7 +1,7 @@
 import styled from "styled-components";
-import { linearGradient } from "@core/constants/colors";
 import { BackgroundProps, ColorProps } from "@web/common/styles/components";
 import { getColor } from "@core/util/color.utils";
+import { linearGradient } from "@web/common/styles/theme";
 
 export interface Props extends BackgroundProps, ColorProps {
   cursor?: string;

diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/styled.ts b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/styled.ts
@@ -2,13 +2,11 @@ import styled from "styled-components";
 import type { XYCoord } from "react-dnd";
 import type { CSSProperties } from "react";
 import { Priority } from "@core/constants/core.constants";
-import {
-  getInvertedColor,
-  hoverColorsByPriority,
-} from "@core/util/color.utils";
+import { getInvertedColor } from "@core/util/color.utils";
 import { ZIndex } from "@web/common/constants/web.constants";
 import { colorNameByPriority } from "@core/constants/colors";
 import { InvertedColorNames } from "@core/types/color.types";
+import { hoverColorsByPriority } from "@web/common/styles/theme";
 
 import { snapToGrid } from "./snap.grid";
 

diff --git a/packages/web/src/views/Calendar/components/Event/styled.ts b/packages/web/src/views/Calendar/components/Event/styled.ts
@@ -1,9 +1,10 @@
 import styled from "styled-components";
 import { Priority } from "@core/constants/core.constants";
-import { getColor, hoverColorsByPriority } from "@core/util/color.utils";
+import { getColor } from "@core/util/color.utils";
 import { colorNameByPriority } from "@core/constants/colors";
 import { Text } from "@web/components/Text";
 import { ZIndex } from "@web/common/constants/web.constants";
+import { hoverColorsByPriority } from "@web/common/styles/theme";
 
 interface StyledEventProps {
   allDay: boolean;

diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts b/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts
@@ -4,7 +4,7 @@ import { getColor } from "@core/util/color.utils";
 import { EVENT_WIDTH_MINIMUM } from "@web/views/Calendar/layout.constants";
 import { Flex } from "@web/components/Flex";
 import { GRID_MARGIN_LEFT } from "@web/views/Calendar/layout.constants";
-import { GRID_LINE_OPACITY_PERCENT } from "@core/constants/colors";
+import { GRID_LINE_OPACITY_PERCENT } from "@web/common/styles/theme";
 
 const colBorder = `1px solid ${getColor(
   ColorNames.GREY_4

diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts b/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts
@@ -4,7 +4,7 @@ import { ColorNames } from "@core/types/color.types";
 import { Flex } from "@web/components/Flex";
 import { GRID_MARGIN_LEFT } from "@web/views/Calendar/layout.constants";
 import { DIVIDER_GRID } from "@web/views/Calendar/layout.constants";
-import { GRID_LINE_OPACITY_PERCENT } from "@core/constants/colors";
+import { GRID_LINE_OPACITY_PERCENT } from "@web/common/styles/theme";
 
 export const gridDividerBorder = `${DIVIDER_GRID}px solid ${getColor(
   ColorNames.GREY_4

diff --git a/...ages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts b/...ages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts
@@ -1,13 +1,10 @@
 import styled from "styled-components";
+import { DroppableProvided } from "@hello-pangea/dnd";
 import { Priorities } from "@core/constants/core.constants";
-import {
-  getColor,
-  getInvertedColor,
-  hoverColorsByPriority,
-} from "@core/util/color.utils";
+import { getColor, getInvertedColor } from "@core/util/color.utils";
 import { BASE_COLORS, colorNameByPriority } from "@core/constants/colors";
 import { InvertedColorNames } from "@core/types/color.types";
-import { DroppableProvided } from "@hello-pangea/dnd";
+import { hoverColorsByPriority } from "@web/common/styles/theme";
 
 export interface Props extends DroppableProvided {
   priority: Priorities;

diff --git a/packages/web/src/views/Calendar/components/NowLine/styled.ts b/packages/web/src/views/Calendar/components/NowLine/styled.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { ZIndex } from "@web/common/constants/web.constants";
-import { linearGradient } from "@core/constants/colors";
+import { linearGradient } from "@web/common/styles/theme";
 
 interface StyledNowLineProps {
   width: number;