Fix: light theme styles

pixijs · Apr 4, 2024 · 1f8fc23 · 1f8fc23
1 parent 55c660b
commit 1f8fc23
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 34 deletions.
diff --git a/packages/frontend/src/globals.css b/packages/frontend/src/globals.css
@@ -163,38 +163,6 @@ h6 {
   background: rgba(79, 111, 127, 0.05);
 }
 
-.tree,
-.tree-node,
-.tree-node-group {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.tree-branch-wrapper,
-.tree-node__leaf {
-  outline: none;
-}
-
-.tree-node {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-left: 1rem;
-}
-
-.tree-node:hover {
-  background: rgb(255 255 255 / 10%);
-}
-
-.tree .tree-node--focused {
-  background: rgb(255 255 255 / 20%);
-}
-
-.tree .tree-node--selected {
-  background: rgb(231 34 100 / 20%);
-}
 
 [role='treeitem'] {
   color: white;
@@ -206,6 +174,11 @@ h6 {
   border: 1px dashed transparent;
 }
 
+.light [role='treeitem'] {
+  color: black;
+  text-shadow: none;
+}
+
 [role='treeitem']:focus-visible {
   background-color: rgb(255 255 255 / 20%);
   outline: none;
@@ -220,16 +193,29 @@ h6 {
   background-color: rgb(255 255 255 / 10%);
 }
 
+.light [role='treeitem']:hover {
+  background-color: rgb(0 0 0 / 10%);
+}
+
 [role='treeitem'][aria-selected='true'] {
-  background-color: rgb(231 34 100 / 20%);
+  background-color: hsl(var(--primary) / 20%);
   font-weight: 700;
 }
 
+.light [role='treeitem'][aria-selected='true'] {
+  background-color: hsl(var(--primary) / 80%);
+}
+
 [role='treeitem'] .willReceiveDrop {
   background-color: rgba(255, 255, 255, 0.4);
   border: 1px dashed white;
 }
 
+.light [role='treeitem'] .willReceiveDrop {
+  border: 1px dashed black;
+  border-color: rgba(0, 0, 0, 0.4);
+}
+
 [role='treeitem'][aria-selected='true'] {
   color: white;
 }
diff --git a/packages/frontend/src/pages/scene/stats-section/Stats.tsx b/packages/frontend/src/pages/scene/stats-section/Stats.tsx
@@ -35,6 +35,7 @@ export const Stats: React.FC = () => {
   const animationRef = useRef<number>();
 
   defaultSmoothieOptions.labels.fillStyle = theme === 'dark' ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)';
+  const seriesFillStyle = theme === 'dark' ? 'rgba(231, 34, 100, 0.2)' : 'rgba(231, 34, 100, 0.8)';
 
   // make sure every stat has a time series, and delete any that are no longer in the stats
   currentStats = Object.keys(stats ?? {}).map((stat) => {
@@ -94,7 +95,7 @@ export const Stats: React.FC = () => {
                     {
                       data: item.timeSeries,
                       strokeStyle: item.color,
-                      fillStyle: 'rgba(231, 34, 100, 0.2)',
+                      fillStyle: seriesFillStyle,
                       lineWidth: 1,
                     },
                   ]}