feat: style shapes while dragged

Miragon · Jul 28, 2023 · 25f6f25 · 25f6f25
1 parent bb9ba00
commit 25f6f25
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/apps/miranum-bpmn-modeler-webview/src/styles/styles.css b/apps/miranum-bpmn-modeler-webview/src/styles/styles.css
@@ -27,6 +27,7 @@ html {
     max-height: 100%;
     padding: 0;
     margin: 0;
+    background: var(--vscode-editor-background);
 }
 
 img {

diff --git a/apps/miranum-bpmn-modeler-webview/src/styles/theme.css b/apps/miranum-bpmn-modeler-webview/src/styles/theme.css
@@ -16,7 +16,17 @@
  */
 :root .djs-parent {
     --canvas-fill-color: var(--vscode-editor-background);
+    /* Shapes */
+    --element-dragger-color: var(--vscode-list-highlightForeground);
+    --element-hover-outline-fill-color: var(--color-blue-205-100-45);
+    --element-selected-outline-stroke-color: var(--vscode-editor-selectionBackground);
+    --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70);
+
+    --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50);
+    --shape-connect-allowed-fill-color: var(--color-grey-225-10-97);
     --shape-drop-allowed-fill-color: var(--vscode-editor-background);
+    --shape-drop-not-allowed-fill-color: var(--vscode-inputValidation-errorBackground);
+    --shape-resize-preview-stroke-color: var(--color-blue-205-100-50);
     /* Palette */
     --palette-entry-color: var(--vscode-button-background);
     --palette-entry-hover-color: var(--vscode-button-hoverBackground);
@@ -27,6 +37,39 @@
     --palette-border-color: var(--vscode-button-border);
     /* Context Pad */
     --context-pad-entry-background-color: var(--vscode-editor-background);
-    --context-pad-entry-hover-background-color: var(--vscode-list-hoverBackground);
+    --context-pad-entry-hover-background-color: var(--vscode-editorStickyScrollHover-background);
+    /* Search Bar */
+    --search-container-background-color: var(--vscode-editor-background);
+    --search-container-border-color: var(--vscode-button-background);
+    --search-container-box-shadow-color: var(--vscode-button-hoverBackground);
+    --search-container-box-shadow-inset-color: var(--vscode-button-hoverBackground);
+    --search-input-border-color: var(--color-grey-225-10-75);
+    --search-result-border-color: var(--color-grey-225-10-75);
+    --search-result-highlight-color: var(--vscode-statusBarItem-focusBorder);
+    --search-result-selected-color: var(--vscode-statusBarItem-hoverBackground);
+}
+
+/**
+ * Editing BPMN shapes
+ */
+:root .djs-direct-editing-parent {
+    color: var(--vscode-editor-foreground);
+    background: var(--vscode-editor-background) !important;
+    border-color: var(--vscode-button-background) !important;
+}
+
+/**
+ * Icons in context pad
+ */
+:root .djs-context-pad {
+    color: var(--palette-entry-color);
 }
 
+/**
+ * Search Box
+ */
+:root .djs-search-container input,
+:root .djs-search-container .djs-search-result {
+    color: var(--vscode-editor-foreground);
+    background: var(--vscode-editor-background);
+}