map color palette to components

VictorS67 · Jan 18, 2024 · 2a1551e · 2a1551e
1 parent 707b445
commit 2a1551e
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 52 deletions.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -1,17 +1,17 @@
-import React from "react";
+import React from 'react';
 
 import {
   RecoilRoot,
   atom,
   selector,
   useRecoilState,
   useRecoilValue,
-} from "recoil";
+} from 'recoil';
 
-import "@atlaskit/css-reset";
-import { EncreStudio } from "./components/EncreStudio";
-import logo from "./logo.svg";
-import "./App.css";
+import '@atlaskit/css-reset';
+import { EncreStudio } from './components/EncreStudio';
+import logo from './logo.svg';
+import './App.css';
 
 function App() {
   return (

diff --git a/packages/app/src/colors.css b/packages/app/src/colors.css
@@ -1,48 +1,47 @@
 html[data-color-mode="light"] {
-    --primary-color: #005FB8;
+  --primary-color: #005fb8;
+  --success-color: #00a844;
 
-    --scroll-color: #BCBCBC;
-    --drag-color: #777985;
+  --scroll-color: #bcbcbc;
+  --drag-color: #858585;
 
-    --text-color: #212121;
-    --text-color-accent-1: #01B2B2;
-    --text-color-accent-2: #6844FC;
-    --text-color-accent-3: #E42E00;
-    --text-color-accent-4: #D800CC;
-    --text-color-accent-6: #00962A;
+  --text-color: #212121;
+  --text-color-accent-1: #01b2b2;
+  --text-color-accent-2: #6844fc;
+  --text-color-accent-3: #e42e00;
+  --text-color-accent-4: #d800cc;
 
-    --success-color: #00A844;
+  --text-success-color: #009326;
 
-    --canvas-background-color: #F8F8F8;
-    --canvas-foreground-color: #49494A;
-    --canvas-foreground-color-1: #49494A80;
-    --canvas-foreground-color-2: #49494A40;
+  --canvas-background-color: #f8f8f8;
+  --canvas-foreground-color: #49494a;
+  --canvas-foreground-color-1: #49494a80;
+  --canvas-foreground-color-2: #49494a40;
 
-    --node-background-color: #FFFFFF;
-    --node-forground-color: #F0F0F0;
+  --node-background-color: #ffffff;
+  --node-forground-color: #f0f0f0;
 }
 
-
 html[data-color-mode="dark"] {
-    --primary-color: #146BA1;
+  --primary-color: #146ba1;
+  --success-color: #1cc21a;
 
-    --scroll-color: #7C7C7C;
-    --drag-color: #E4E4E7;
+  --scroll-color: #7c7c7c;
+  --drag-color: #e4e4e7;
 
-    --text-color: #C2C2C2;
-    --text-color-accent-1: #00BEB5;
-    --text-color-accent-2: #A85AED;
-    --text-color-accent-3: #E45C10;
-    --text-color-accent-4: #D82DDD;
-    --text-color-accent-6: #00962A;
+  --text-color: #c2c2c2;
+  --text-color-accent-1: #00beb5;
+  --text-color-accent-2: #a85aed;
+  --text-color-accent-3: #e45c10;
+  --text-color-accent-4: #d82ddd;
 
-    --success-color: #00A844;
+  --text-success-color: #00962a;
 
-    --canvas-background-color: #202020;
-    --canvas-foreground-color: #474748;
-    --canvas-foreground-color-1: #47474880;
-    --canvas-foreground-color-2: #47474840;
+  --canvas-background-color: #202020;
+  --canvas-foreground-color: #474748;
+  --canvas-foreground-color-1: #47474880;
+  --canvas-foreground-color-2: #47474840;
 
-    --node-background-color: #3D3D3D;
-    --node-forground-color: #212121;
-}
+  --node-background-color: #3d3d3d;
+  --node-forground-color: #212121;
+}
diff --git a/packages/app/src/components/ContextMenuItem.tsx b/packages/app/src/components/ContextMenuItem.tsx
@@ -29,11 +29,11 @@ const subMenuStyles = css`
   left: 95%;
   min-width: 150px;
   max-width: 250px;
-  border: 1px solid ${token('color.text')};
+  border: 1px solid var(--primary-color);
   border-radius: 5px;
   padding: 8px 0;
-  color: ${token('color.text')};
-  background-color: ${token('elevation.surface.overlay')};
+  color: var(--text-color);
+  background-color: var(--canvas-background-color);
   box-shadow: 0 8px 16px ${hexToRgba(DN0, 0.25)};
   z-index: 1000;
 
@@ -57,7 +57,7 @@ const subMenuStyles = css`
 
   .context-submenu-item-list hr {
     border: none;
-    border-bottom: 1px solid ${token('color.text.subtle')};
+    border-bottom: 1px solid var(--text-color);
   }
 
   .context-submenu-item-list .context-submenu-item-label {
@@ -66,7 +66,7 @@ const subMenuStyles = css`
     font-weight: bold;
     padding-left: 10px;
     padding-bottom: 5px;
-    color: ${token('color.text')};
+    color: var(--text-color);
   }
 `;
 
@@ -78,12 +78,12 @@ const hasSubMenuStyles = css`
     height: 0;
     border-style: solid;
     border-width: 5px 0 5px 8px;
-    border-color: transparent transparent transparent ${token('color.text')};
+    border-color: transparent transparent transparent var(--text-color);
     transform: translateY(-50%));
   }
   &:hover::after {
     border-color: transparent transparent transparent
-      ${token('color.text.subtle')};
+    var(--primary-color);
   }
 `;
 
@@ -103,8 +103,8 @@ const MyContextMenuItem = styled.div<{ hasSubMenu?: boolean }>`
 
   &:hover,
   &.active {
-    background-color: ${token('color.skeleton')};
-    color: ${token('color.text.subtle')};
+    background-color: var(--primary-color);
+    color: var(--text-color);
   }
 
   .label-container {

diff --git a/packages/app/src/components/Icon.tsx b/packages/app/src/components/Icon.tsx
@@ -18,7 +18,7 @@ const styles = css`
 `;
 
 const borderStyles = css`
-  border: 1px solid ${token('color.text')};
+  border: 1px solid var(--text-color);
   border-radius: 5px;
 `;
 

diff --git a/packages/app/src/components/RoadmapCanvas.tsx b/packages/app/src/components/RoadmapCanvas.tsx
@@ -29,7 +29,7 @@ const styles = css`
   overflow: hidden;
   z-index: 0;
 
-  background-blend-mode: difference !important;
+  background-color: var(--canvas-background-color);
   background-image: linear-gradient(
       var(--canvas-foreground-color-1) 1px,
       transparent 1px

diff --git a/packages/app/src/state/settings.ts b/packages/app/src/state/settings.ts
@@ -10,6 +10,6 @@ export enum Theme {
 
 export const themeState = atom<Theme>({
   key: 'theme',
-  default: Theme.LIGHT,
+  default: Theme.AUTO,
   effects_UNSTABLE: [persistAtom],
 });