Design changes to fit new colors and match overall look

package.json

@@ -85,7 +85,13 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.17",
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@monaco-editor/react": "^4.7.0",
+    "@uiw/codemirror-themes": "^4.25.4",
+    "@uiw/react-codemirror": "^4.25.4",
+    "react-syntax-highlighter": "^16.1.0"
   },
   "main": "dist/index.js",
   "repository": {
@@ -121,17 +127,15 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-resizable-panels": "^4.3.1",
     "react-zoom-pan-pinch": "^3.7.0",
-    "sonner": "^2.0.7"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
+    "sonner": "^2.0.7",
     "@codemirror/autocomplete": "^6.20.0",
     "@codemirror/lang-json": "^6.0.2",
     "@monaco-editor/react": "^4.7.0",
     "@uiw/codemirror-themes": "^4.25.4",
     "@uiw/react-codemirror": "^4.25.4",
     "react-syntax-highlighter": "^16.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

src/components/alert/Alert.style.scss

@@ -24,5 +24,6 @@
 @each $name, $color in variables.$colors {
     .alert--#{$name} {
       @include box.box($color);
+      box-shadow: none;
     }
 }

src/components/alert/Alert.tsx

@@ -19,12 +19,13 @@ export const Alert: React.FC<AlertProps> = (props) => {
     const {color = "secondary", children, ...rest} = props
 
     const icons: Record<Color, React.ReactElement<IconProps>> = {
-        "primary": <IconCircleDot size={18}/>,
-        "secondary": <IconCircleDot size={18}/>,
-        "info": <IconInfoCircle size={18}/>,
-        "success": <IconCircleCheck size={18}/>,
-        "warning": <IconAlertCircle size={18}/>,
-        "error": <IconCircleX size={18}/>,
+        "primary": <IconCircleDot size={16}/>,
+        "secondary": <IconCircleDot size={16}/>,
+        "tertiary": <IconCircleDot size={16}/>,
+        "info": <IconInfoCircle size={16}/>,
+        "success": <IconCircleCheck size={16}/>,
+        "warning": <IconAlertCircle size={16}/>,
+        "error": <IconCircleX size={16}/>,
     }
 
     return <div {...mergeCode0Props(`alert alert--${color}`, rest)}>

src/components/avatar/Avatar.style.scss

@@ -14,6 +14,8 @@
   & {
     @include box.box();
     @include helpers.borderRadius();
+    background: transparent;
+    box-shadow: none;
   }
 
   &--image {

src/components/avatar/Avatar.tsx

@@ -3,6 +3,7 @@ import {Code0Component} from "../../utils/types";
 import {md5} from 'js-md5';
 import "./Avatar.style.scss"
 import {mergeCode0Props} from "../../utils/utils";
+import {hashToColor} from "../d-flow/DFlow.util";
 
 interface AvatarImageProps {
     src: string
@@ -34,7 +35,7 @@ const AvatarIdenticon: React.FC<AvatarIdenticonProps> = ({identifier, size}) =>
     const updateCanvas = () => {
         const hash = md5(identifier)
         const block = Math.floor(size / 5)
-        const hashColor = hash.slice(0, 6)
+        const hashColor = hashToColor(identifier)
 
         canvas.current!!.width = block * 5
         canvas.current!!.height = block * 5
@@ -61,7 +62,7 @@ const AvatarIdenticon: React.FC<AvatarIdenticonProps> = ({identifier, size}) =>
         map.forEach((row, i) => {
             row.forEach((el, j) => {
                 if (el) {
-                    ctx!!.fillStyle = '#' + hashColor;
+                    ctx!!.fillStyle = hashColor;
                     ctx!!.fillRect(
                         block * i,
                         block * j,

src/components/badge/Badge.style.scss

@@ -14,7 +14,7 @@
 
   @if (var(--badge-color)) {
     background-color: var(--badge-color-background);
-    border: 1px solid var(--badge-color-border);
+    box-shadow: inset 0 1px 1px 0 var(--badge-color-border);
     color: var(--badge-color);
   }
 

src/components/badge/Badge.tsx

@@ -31,7 +31,7 @@ export const Badge: React.FC<BadgeType> = (props) => {
                         ...args.style,
                         "--badge-color-background": mixColorRgb(color, 9),
                         "--badge-color-border": withAlpha(color, 0.1),
-                        "--badge-color": withAlpha(color, 1),
+                        "--badge-color": withAlpha(color, 0.75),
                     },
                 }
             )}
@@ -79,7 +79,7 @@ const mixColorRgb = (color: string, level: number) => {
     const w = clamp01(level * 0.1)
 
     const c1 = parseCssColorToRgba(color)
-    const c2 = parseCssColorToRgba("#030014")
+    const c2 = parseCssColorToRgba("#070514")
 
     const mix = (a: number, b: number) =>
         Math.round(a * (1 - w) + b * w)

src/components/button-group/ButtonGroup.style.scss

@@ -3,7 +3,6 @@
 @use "../../styles/box";
 
 .button-group {
-  border: none;
   width: fit-content;
   background: transparent;
   position: relative;
@@ -14,7 +13,6 @@
   & {
     @include box.box(variables.$secondary);
     @include helpers.borderRadius();
-    border-width: 0;
   }
 
   .button {

src/components/button/Button.style.scss

@@ -45,19 +45,21 @@
 
     &.button--none {
       background: transparent;
-      border-color: transparent;
+      box-shadow: none;
 
       &:hover {
         background: helpers.backgroundColor($color, 1.5);
+        box-shadow: inset 0 1px 1px helpers.borderColor($color);
       }
 
       &:active, &:focus, &[aria-selected=true], &[data-state=open] {
         background: helpers.backgroundColor($color, 2);
+        box-shadow: inset 0 1px 1px helpers.borderColor($color);
       }
     }
 
     &.button--filled {
-      border-color: transparent;
+      box-shadow: none;
     }
   }
 }

src/components/command/Command.style.scss

@@ -20,7 +20,7 @@
 
   &__dialog {
     padding: 0;
-    border: none;
+    box-shadow: none;
   }
 
   &__list {

src/components/context-menu/ContextMenu.style.scss

@@ -44,12 +44,12 @@
       @include helpers.noFocusStyle();
       @include helpers.fontStyle();
       @include helpers.disabled();
-      border: none;
+      box-shadow: none;
     }
 
     &:focus, &[data-focus=true] {
       @include box.box(variables.$white, variables.$white, variables.$white);
-      border: none;
+      box-shadow: none;
       width: 100%;
     }
   }

src/components/d-flow-file/DFlowTabs.tsx

@@ -80,7 +80,7 @@ export const DFlowTabs: React.FC<DFlowTabsProps> = (props) => {
         >
             <DLayout layoutGap={"0"} topContent={<FileTabsList
                 controls={
-                    <ButtonGroup color={"primary"} p={0}>
+                    <ButtonGroup color={"primary"} p={0} style={{boxShadow: "none"}}>
                         <Menu>
                             <MenuTrigger asChild>
                                 <Button variant="none" paddingSize={"xxs"} color="primary">
@@ -89,7 +89,7 @@ export const DFlowTabs: React.FC<DFlowTabsProps> = (props) => {
                             </MenuTrigger>
                             <MenuPortal>
                                 <MenuContent align="start" sideOffset={8} color={"secondary"}>
-                                    <Card paddingSize={"xxs"} mt={-0.35} mx={-0.35} style={{borderWidth: "2px"}}>
+                                    <Card paddingSize={"xxs"} mt={-0.2} mx={-0.2}>
                                         <MenuLabel>Starting Node</MenuLabel>
                                         {triggerTab &&
                                             <MenuItem onSelect={() => fileTabsService.activateTab(triggerTab.id!!)}>
@@ -144,7 +144,7 @@ export const DFlowTabs: React.FC<DFlowTabsProps> = (props) => {
                             </MenuTrigger>
                             <MenuPortal>
                                 <MenuContent align="end" sideOffset={8} color={"secondary"}>
-                                    <Card paddingSize={"xxs"} mt={-0.35} mx={-0.35} style={{borderWidth: "2px"}}>
+                                    <Card paddingSize={"xxs"} mt={-0.2} mx={-0.2}>
                                         <MenuItem onClick={() => fileTabsService.clearAll()}>Close all tabs</MenuItem>
                                         <MenuItem onClick={() => fileTabsService.clearWithoutActive()}>Close other
                                             tabs</MenuItem>

src/components/d-flow-folder/DFlowFolder.style.scss

@@ -21,24 +21,22 @@
   user-select: none;
 
   &__root {
-    padding: 0.7rem;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
   }
 
   & {
     @include helpers.borderRadius();
-    @include box.box(variables.$primary);
-    @include box.boxHover(variables.$secondary);
+    @include box.boxHover(variables.$tertiary);
     @include helpers.fontStyle();
-    border: none;
-    background: variables.$primary;
+    box-shadow: none;
+    background: transparent;
   }
 
   &[data-state=open] {
-    @include box.boxActiveStyle(variables.$secondary);
-    border: none;
+    @include box.boxActiveStyle(variables.$tertiary);
+    box-shadow: none;
   }
 
   &__icon, &__status, &__item-icon {
@@ -56,8 +54,8 @@
 
     &:before {
       height: 100%;
-      width: 1px;
-      background: helpers.backgroundColor(variables.$secondary);
+      width: 2px;
+      background: helpers.backgroundColor(variables.$tertiary);
       position: absolute;
       content: "";
       left: 5px;
@@ -78,26 +76,24 @@
 
     & {
       @include helpers.borderRadius();
-      @include box.box(variables.$primary);
-      @include box.boxHover(variables.$secondary);
-      @include box.boxActive(variables.$secondary);
+      @include box.boxHover(variables.$tertiary);
+      @include box.boxActive(variables.$tertiary);
       @include helpers.fontStyle();
-      border: none;
+      box-shadow: none;
+      background: transparent;
     }
 
     &-hover-card {
-      @include box.box(variables.$secondary);
-      @include box.boxActiveStyle(variables.$secondary);
-      @include box.boxHover(variables.$secondary);
-      @include box.boxActive(variables.$secondary);
+      @include box.box(variables.$tertiary);
+      @include box.boxActiveStyle(variables.$tertiary);
+      @include box.boxHover(variables.$tertiary);
+      @include box.boxActive(variables.$tertiary);
       @include helpers.borderRadius();
       cursor: pointer;
-      border: none;
     }
 
     &[data-state=open], &--active {
-      @include box.boxActiveStyle(variables.$secondary);
-      border: none;
+      @include box.boxActiveStyle(variables.$tertiary);
     }
   }
 }

src/components/d-flow-folder/DFlowFolder.tsx

@@ -213,7 +213,7 @@ export const DFlowFolder = React.forwardRef<DFlowFolderHandle, DFlowFolderProps>
     }, [activeFlowId, computeDefaultOpen, resetEpoch])
 
     return (
-        <ScrollArea h={"100%"}>
+        <ScrollArea h={"100%"} type={"scroll"}>
             <ScrollAreaViewport asChild>
                 <DFlowFolderContextMenu {...props}>
                     <div className="d-folder__root">

src/components/d-flow-input/DFlowInputDataType.style.scss

@@ -28,8 +28,8 @@ li {
     height: 20px;
     top: 5px;
     transform: translateY(-50%);
-    border-left: 2px solid helpers.backgroundColor(variables.$secondary, 1.5);
-    border-bottom: 2px solid helpers.backgroundColor(variables.$secondary, 1.5);
+    border-left: 2px solid helpers.backgroundColor(variables.$tertiary);
+    border-bottom: 2px solid helpers.backgroundColor(variables.$tertiary);
     border-bottom-left-radius: 0.5rem;
   }
 
@@ -38,7 +38,7 @@ li {
     position: absolute;
     width: 2px;
     height: 100%;
-    background: helpers.backgroundColor(variables.$secondary, 1.5);
+    background: helpers.backgroundColor(variables.$tertiary);
     top: 0;
     left: -0.35rem;
   }
@@ -56,7 +56,7 @@ li {
     @include box.boxHover(variables.$secondary);
     @include box.boxActive(variables.$secondary);
     @include helpers.fontStyle();
-    border-color: transparent;
+    box-shadow: none;
     //border-top: 1px solid helpers.borderColor();
     cursor: pointer;
   }

src/components/d-flow-input/DFlowInputDataType.tsx

@@ -55,17 +55,17 @@ export const DFlowInputDataType: React.FC<DFlowInputDataTypeProps> = (props) =>
         <Card color={"secondary"} paddingSize={"xs"}>
             <Flex style={{gap: ".7rem"}} align={"center"} justify={"space-between"}>
                 <Flex style={{gap: ".35rem"}} align={"center"}>
-                    <Text hierarchy={"tertiary"}>
+                    <Text>
                         {(initialDataType?.name?.[0].content) ?? "Unnamed Data Type"}
                     </Text>
                 </Flex>
                 <Flex style={{gap: ".35rem"}} align={"center"}>
-                    <Button paddingSize={"xxs"} variant={"filled"} color={"primary"} onClick={() => setEditOpen(true)}>
+                    <Button paddingSize={"xxs"} variant={"filled"} color={"tertiary"} onClick={() => setEditOpen(true)}>
                         <IconEdit size={13}/>
                     </Button>
                 </Flex>
             </Flex>
-            <Card paddingSize={"xs"} mt={0.7} mb={-0.7} mx={-0.7} style={{borderWidth: "2px"}}>
+            <Card paddingSize={"xs"} mt={0.7} mb={-0.55} mx={-0.55}>
                 <DFlowInputDataTypeRuleTree dataTypeIdentifier={initValue!}/>
             </Card>
         </Card>
@@ -129,10 +129,10 @@ export const DFlowInputDataTypeRuleTree: React.FC<DFlowInputDataTypeRuleTreeProp
                     const keyConfig = rule?.config as DataTypeRulesContainsKeyConfig
                     label = (
                         <Flex align={"center"} style={{gap: ".35rem", textWrap: "nowrap"}} className={"rule"}>
-                            <Badge border color={"secondary"} style={{verticalAlign: "middle"}}>
+                            <Badge border color={"tertiary"} style={{verticalAlign: "middle"}}>
                                 <Text size={"xs"} style={{color: "inherit"}}>{keyConfig?.key}</Text>
                             </Badge>
-                            <Text>
+                            <Text hierarchy={"tertiary"}>
                                 {parentRule?.variant === "CONTAINS_KEY" ? "is a field inside" : "is a field"}
                                 {isChildPrimitive ? " of type" : ""}
                             </Text>
@@ -149,11 +149,11 @@ export const DFlowInputDataTypeRuleTree: React.FC<DFlowInputDataTypeRuleTreeProp
                         <Flex align={"center"} style={{gap: ".35rem", textWrap: "nowrap"}} className={"rule"}>
                             <Text>Inside</Text>
                             {prevKey && (
-                                <Badge border color={"secondary"} style={{verticalAlign: "middle"}}>
+                                <Badge border color={"tertiary"} style={{verticalAlign: "middle"}}>
                                     <Text size={"xs"} style={{color: "inherit"}}>{prevKey}</Text>
                                 </Badge>
                             )}
-                            <Text ml={-0.35}>, each entity has</Text>
+                            <Text hierarchy={"tertiary"} ml={-0.35}>, each entity has</Text>
                         </Flex>
                     )
                 }