add colors to legend (#283)

tokens-studio · Jun 17, 2024 · b7ed181 · b7ed181
1 parent 50879a0
commit b7ed181
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 22 deletions.
diff --git a/packages/graph-editor/src/components/commandPalette/index.tsx b/packages/graph-editor/src/components/commandPalette/index.tsx
@@ -146,6 +146,7 @@ const CommandMenu = ({
           color: '$fgSubtle',
           display: 'flex',
           flexDirection: 'row',
+          alignItems: 'center',
           gap: 1,
           padding: '$4',
           borderBottom: '1px solid $borderSubtle',
@@ -160,7 +161,7 @@ const CommandMenu = ({
         </Command.Empty>
         <Stack
           direction="row"
-          css={{ overflowY: 'scroll', maxHeight: '450px' }}
+          css={{ overflowY: 'scroll', maxHeight: '450px', scrollbarColor: 'var(--colors-bgSubtle) transparent', scrollbarWidth: 'thin' }}
         >
           <Box
             css={{

diff --git a/packages/graph-editor/src/css/reactflow.css b/packages/graph-editor/src/css/reactflow.css
@@ -37,8 +37,8 @@
     --nodeBorderColor: var(--gray-6);
     --nodeBgColor: var(--gray-3);
     --nodeTextColor: var(--gray-12);
-    outline: 3px solid var(--gray-11);
-    outline-offset: 0;
+    outline: 5px solid var(--purple-10);
+    outline-offset: 5px;
     border-radius: var(--radii-medium, 8px);
 }
 
@@ -83,7 +83,7 @@
 .react-flow__edge:focus .react-flow__edge-path,
 .react-flow__edge:focus-visible .react-flow__edge-path {
     stroke-width: 2 !important;
-    stroke: var(--blue-10);
+    stroke: var(--purple-10);
 }
 
 .react-flow__handle-connecting:not(.react-flow__handle-valid) {

diff --git a/packages/graph-editor/src/editor/layoutController.tsx b/packages/graph-editor/src/editor/layoutController.tsx
@@ -160,10 +160,11 @@ const layoutDataFactory = (props, ref): LayoutData => {
                     mode: 'horizontal',
                     children: [
                         {
+                            size: 2,
                             mode: 'vertical',
                             children: [
                                 {
-                                    size: 545,
+                                    size: 16,
                                     tabs: [
                                         {
                                             group: 'popout',
@@ -175,7 +176,7 @@ const layoutDataFactory = (props, ref): LayoutData => {
                                     ],
                                 },
                                 {
-                                    size: 300,
+                                    size: 8,
                                     tabs: [
                                         {
                                             group: 'popout',
@@ -190,7 +191,7 @@ const layoutDataFactory = (props, ref): LayoutData => {
                         },
                         {
 
-                            size: 700,
+                            size: 18,
                             mode: 'vertical',
                             children:[
                                 {
@@ -218,11 +219,11 @@ const layoutDataFactory = (props, ref): LayoutData => {
                         },
 
                         {
-                            size: 300,
+                            size: 4,
                             mode: 'vertical',
                             children: [
                                 {
-                                    size: 300,
+                                    size: 12,
                                     tabs: [
                                         {
                                             closable: true,
@@ -235,7 +236,7 @@ const layoutDataFactory = (props, ref): LayoutData => {
                                     ],
                                 },
                                 {
-                                    size: 300,
+                                    size: 12,
                                     tabs: [
                                         {
                                             closable: true,

diff --git a/packages/graph-editor/src/index.scss b/packages/graph-editor/src/index.scss
@@ -20,8 +20,11 @@
 @import '@radix-ui/colors/lime-dark.css';
 @import '@radix-ui/colors/mint-dark.css';
 @import '@radix-ui/colors/blue-dark.css';
+@import '@radix-ui/colors/blue-dark-alpha.css';
 @import '@radix-ui/colors/red-dark.css';
 @import '@radix-ui/colors/green-dark.css';
+@import '@radix-ui/colors/orange-dark.css';
+@import '@radix-ui/colors/gold-dark.css';
 
 :root {
     --globals-drop-panel-width: 240px;

diff --git a/packages/graph-editor/src/tokens/colors.ts b/packages/graph-editor/src/tokens/colors.ts
@@ -1,25 +1,33 @@
-import {  ANY, COLOR, STRING, BOOLEAN, NUMBER } from '@tokens-studio/graph-engine'
+import {  ANY, COLOR, CURVE, STRING, BOOLEAN, NUMBER, OBJECT } from '@tokens-studio/graph-engine'
 
 /* eslint-disable import/no-anonymous-default-export */
 export default {
   [COLOR]: {
-    color: 'oklch(20% 0.1 90)',
-    backgroundColor: 'var(--purple-9)',
+    color: 'var(--violet-12)',
+    backgroundColor: 'var(--violet-8)',
+  },
+  [CURVE]: {
+    color: 'var(--gold-12)',
+    backgroundColor: 'var(--gold-8)',
   },
   [BOOLEAN]: {
-    color: 'oklch(20% 0.1 120)',
-    backgroundColor: 'oklch(80% 0.25 120)',
+    color: 'var(--amber-12)',
+    backgroundColor: 'var(--amber-8)',
   },
   [NUMBER]: {
-    color: 'oklch(20% 0.1 30)',
-    backgroundColor: 'oklch(80% 0.25 30)',
+    color: 'var(--blue-12)',
+    backgroundColor: 'var(--blue-8)',
   },
   [STRING]: {
-    color: 'oklch(20% 0.1 270)',
-    backgroundColor: 'oklch(80% 0.25 270)',
+    color: 'var(--lime-12)',
+    backgroundColor: 'var(--lime-8)',
   },
   [ANY]: {
-    color: 'oklch(20% 0.1 180)',
-    backgroundColor: 'oklch(80% 0.25 180)',
+    color: 'var(--pink-12)',
+    backgroundColor: 'var(--pink-8)',
+  },
+  [OBJECT]: {
+    color: 'var(--teal-12)',
+    backgroundColor: 'var(--teal-8)',
   }
 };
diff --git a/packages/ui/src/styles/styles.scss b/packages/ui/src/styles/styles.scss
@@ -51,7 +51,7 @@
 }
 
 .dock-content-holder {
-  scrollbar-color: var(--gray-3) transparent;
+  scrollbar-color: var(--colors-bgSubtle) transparent;
   scrollbar-width: thin;
   border-bottom: 1px solid var(--gray-6);
 }