alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(svelte): use correct css var names for defaults

Browse Source
This commit is contained in:
moklick
2023-06-29 12:05:20 +02:00
parent 5324e51060
commit 1f64b29b50
10 changed files with 81 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@xyflow/svelte", "name": "@xyflow/svelte",
"version": "0.0.8", "version": "0.0.9",
"description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.", "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
"keywords": [ "keywords": [
"svelte", "svelte",
packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+2 -2
View File
@@ -55,12 +55,12 @@
} }
.svelte-flow__edge-path { .svelte-flow__edge-path {
stroke: var(--edge-color); stroke: var(--edge-color, var(--edge-color-default));
stroke-width: 1; stroke-width: 1;
} }
:global(.selected) .svelte-flow__edge-path { :global(.selected) .svelte-flow__edge-path {
stroke: var(--edge-color-selected); stroke: var(--edge-color-selected, var(--edge-color-selected-default));
} }
:global(.animated) .svelte-flow__edge-path { :global(.animated) .svelte-flow__edge-path {
packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+1 -1
View File
@@ -32,7 +32,7 @@
.svelte-flow__edge-path, .svelte-flow__edge-path,
.svelte-flow__connection-path { .svelte-flow__connection-path {
stroke: var(--connection-line-color); stroke: var(--connection-line-color, var(--connection-line-color-default));
stroke-width: 1; stroke-width: 1;
fill: none; fill: none;
} }
packages/svelte/src/lib/components/Handle/Handle.svelte
+2 -2
View File
@@ -108,8 +108,8 @@
min-height: 5px; min-height: 5px;
width: 6px; width: 6px;
height: 6px; height: 6px;
background: var(--handle-background-color); background: var(--handle-background-color, var(--handle-background-color-default));
border: 1px solid var(--handle-border-color); border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
border-radius: 100%; border-radius: 100%;
} }
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+5 -9
View File
@@ -86,7 +86,6 @@
bind:this={nodeRef} bind:this={nodeRef}
data-id={id} data-id={id}
class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])} class={cc(['svelte-flow__node', `svelte-flow__node-${type || 'default'}`, className])}
class:initializing={!width && !height}
class:dragging class:dragging
class:selected class:selected
class:draggable class:draggable
@@ -122,12 +121,12 @@
<style> <style>
.svelte-flow__node { .svelte-flow__node {
border-radius: 3px; border-radius: 3px;
color: var(--node-color); color: var(--node-color, var(--node-color-default));
text-align: center; text-align: center;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: var(--node-border-color); border-color: var(--node-border-color, var(--node-border-color-default));
background-color: var(--node-background-color); background-color: var(--node-background-color, var(--node-background-color-default));
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
@@ -140,14 +139,11 @@
.selected { .selected {
outline: none; outline: none;
box-shadow: 0 0 0 0.5px var(--node-shadow-color-selected); box-shadow: 0 0 0 0.5px
var(--node-shadow-color-selected, var(--node-shadow-color-selected-default));
} }
.dragging { .dragging {
cursor: grabbing; cursor: grabbing;
} }
.initializing {
visibility: hidden;
}
</style> </style>
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+21 -21
View File
@@ -170,7 +170,7 @@
position: relative; position: relative;
z-index: 0; z-index: 0;
background-color: var(--background-color); background-color: var(--background-color, var(--background-color-default));
} }
.svelte-flow :global(.svelte-flow__node-default), .svelte-flow :global(.svelte-flow__node-default),
@@ -188,31 +188,31 @@
} }
:root { :root {
--background-color: #fff; --background-color-default: #fff;
--background-pattern-color: #eee; --background-pattern-color-default: #eee;
--minimap-background-color: #fff; --minimap-background-color-default: #fff;
--minimap-mask-color: rgb(240, 240, 240, 0.6); --minimap-mask-color-default: rgb(240, 240, 240, 0.6);
--minimap-mask-stroke-color: none; --minimap-mask-stroke-color-default: none;
--minimap-mask-stroke-width: 1; --minimap-mask-stroke-width-default: 1;
--controls-button-background-color: #fefefe; --controls-button-background-color-default: #fefefe;
--controls-button-background-color-hover: #f4f4f4; --controls-button-background-color-hover-default: #f4f4f4;
--controls-button-color: inherit; --controls-button-color-default: inherit;
--controls-button-color-hover: inherit; --controls-button-color-hover-default: inherit;
--controls-button-border-color: #eee; --controls-button-border-color-default: #eee;
--edge-color: #cfcfcf; --edge-color-default: #cfcfcf;
--edge-color-selected: #555; --edge-color-selected-default: #555;
--node-color: inherit; --node-color-default: inherit;
--node-border-color: #1a192b; --node-border-color-default: #1a192b;
--node-background-color: #fff; --node-background-color-default: #fff;
--node-shadow-color-selected: #1a192b; --node-shadow-color-selected-default: #1a192b;
--handle-background-color: #1a192b; --handle-background-color-default: #1a192b;
--handle-border-color: #fff; --handle-border-color-default: #fff;
--connection-line-color: #b1b1b7; --connection-line-color-default: #b1b1b7;
} }
</style> </style>
packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+5 -1
View File
@@ -7,6 +7,10 @@
<style> <style>
circle { circle {
fill: var(--pattern-color-props, var(--background-pattern-color)); fill: var(
--pattern-color-props,
var(--background-pattern-color),
var(--background-pattern-color-default)
);
} }
</style> </style>
packages/svelte/src/lib/plugins/Background/LinePattern.svelte
+5 -1
View File
@@ -12,6 +12,10 @@
<style> <style>
path { path {
stroke: var(--pattern-color-props, var(--background-pattern-color)); stroke: var(
--pattern-color-props,
var(--background-pattern-color),
var(--background-pattern-color-default)
);
} }
</style> </style>
packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+19 -5
View File
@@ -30,11 +30,20 @@
border: none; border: none;
background: var( background: var(
--controls-button-background-color-props, --controls-button-background-color-props,
var(--controls-button-background-color) var(--controls-button-background-color),
var(--controls-button-background-color-default)
); );
border-bottom: 1px solid border-bottom: 1px solid
var(--controls-button-border-color-props, var(--controls-button-border-color)); var(
color: var(--controls-button-color-props, var(--controls-button-color)); --controls-button-border-color-props,
var(--controls-button-border-color),
var(--controls-button-border-color-default)
);
color: var(
--controls-button-color-props,
var(--controls-button-color),
var(--controls-button-color-default)
);
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -49,9 +58,14 @@
.svelte-flow__controls-button:hover { .svelte-flow__controls-button:hover {
background: var( background: var(
--controls-button-background-color-hover-props, --controls-button-background-color-hover-props,
var(--controls-button-background-color-hover) var(--controls-button-background-color-hover),
var(--controls-button-background-color-hover-default)
);
color: var(
--controls-button-color-hover-props,
var(--controls-button-hover-color),
var(--controls-button-hover-color-default)
); );
color: var(--controls-button-color-hover-props, var(--controls-button-hover-color));
} }
.svelte-flow__controls-button :global(svg) { .svelte-flow__controls-button :global(svg) {
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+20 -4
View File
@@ -142,12 +142,28 @@
<style> <style>
svg { svg {
background-color: var(--minimap-background-color-props, var(--minimap-background-color)); background-color: var(
--minimap-background-color-props,
var(--minimap-background-color),
var(--minimap-background-color-default)
);
} }
.svelte-flow__minimap-mask { .svelte-flow__minimap-mask {
fill: var(--minimap-mask-color-props, var(--minimap-mask-color)); fill: var(
stroke: var(--minimap-mask-stroke-color-props, var(--minimap-mask-stroke-color)); --minimap-mask-color-props,
stroke-width: var(--minimap-mask-stroke-width-props, var(--minimap-mask-stroke-width)); var(--minimap-mask-color),
var(--minimap-mask-color-default)
);
stroke: var(
--minimap-mask-stroke-color-props,
var(--minimap-mask-stroke-color),
var(--minimap-mask-stroke-color-default)
);
stroke-width: var(
--minimap-mask-stroke-width-props,
var(--minimap-mask-stroke-width),
var(--minimap-mask-stroke-width-default)
);
} }
</style> </style>