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

Merge pull request #3682 from xyflow/fix/svelte-colormode

Browse Source 
CSS: prefix css vars with "xy"
This commit is contained in:
Moritz Klack
2023-11-28 16:40:02 +01:00
committed by GitHub
parent e9eb0ed516 a1e585fdcc
commit 380b793b57
11 changed files with 144 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/react/src/examples/ColorMode/index.tsx
View File

@@ -15,6 +15,8 @@ import {
Position,
} from '@xyflow/react';
import './style.css';
const nodeDefaults = {
sourcePosition: Position.Right,
targetPosition: Position.Left,

0
examples/react/src/examples/ColorMode/style.css Normal file
View File

2
examples/svelte/src/routes/examples/customnode/+page.svelte
View File

@@ -85,7 +85,7 @@
{nodes}
{edges}
{nodeTypes}
style="--background-color: {$bgColor}"
style="--xy-background-color: {$bgColor}"
fitView
on:connect={onConnect}
>

4
packages/react/src/additional-components/Background/Background.tsx
View File

@@ -55,8 +55,8 @@ function Background({
{
...style,
...containerStyle,
'--background-color-props': bgColor,
'--background-pattern-color-props': color,
'--xy-background-color-props': bgColor,
'--xy-background-pattern-color-props': color,
} as CSSProperties
}
ref={ref}

8
packages/react/src/additional-components/MiniMap/MiniMap.tsx
View File

@@ -129,10 +129,10 @@ function MiniMap({
style={
{
...style,
'--minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
'--minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
'--minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
'--minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
'--xy-minimap-mask-color-props': typeof maskColor === 'string' ? maskColor : undefined,
'--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
'--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
'--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
} as CSSProperties
}
className={cc(['react-flow__minimap', className])}

4
packages/svelte/src/lib/plugins/Background/Background.svelte
View File

@@ -45,8 +45,8 @@
<svg
class={cc(['svelte-flow__background', className])}
data-testid="svelte-flow__background"
style:--background-color-props={bgColor}
style:--background-pattern-color-props={patternColor}
style:--xy-background-color-props={bgColor}
style:--xy-background-pattern-color-props={patternColor}
>
<pattern
id={patternId}

10
packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
View File

@@ -15,11 +15,11 @@
type="button"
on:click
class={cc(['svelte-flow__controls-button', className])}
style:--controls-button-background-color-props={bgColor}
style:--controls-button-background-color-hover-props={bgColorHover}
style:--controls-button-color-props={color}
style:--controls-button-color-hover-props={colorHover}
style:--controls-button-border-color-props={borderColor}
style:--xy-controls-button-background-color-props={bgColor}
style:--xy-controls-button-background-color-hover-props={bgColorHover}
style:--xy-controls-button-color-props={color}
style:--xy-controls-button-color-hover-props={colorHover}
style:--xy-controls-button-border-color-props={borderColor}
{...$$restProps}
>
<slot class="button-svg" />

8
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
View File

@@ -94,10 +94,10 @@
viewBox="{x} {y} {viewboxWidth} {viewboxHeight}"
role="img"
aria-labelledby={labelledBy}
style:--minimap-background-color-props={bgColor}
style:--minimap-mask-color-props={maskColor}
style:--minimap-mask-stroke-color-props={maskStrokeColor}
style:--minimap-mask-stroke-width-props={maskStrokeWidth}
style:--xy-minimap-background-color-props={bgColor}
style:--xy-minimap-mask-color-props={maskColor}
style:--xy-minimap-mask-stroke-color-props={maskStrokeColor}
style:--xy-minimap-mask-stroke-width-props={maskStrokeWidth}
use:interactive={{
panZoom: $panZoom,
viewport,

24
packages/system/src/styles/base.css
View File

@@ -1,38 +1,38 @@
.xy-flow {
--node-border-default: 1px solid #bbb;
--node-border-selected-default: 1px solid #555;
--xy-node-border-default: 1px solid #bbb;
--xy-node-border-selected-default: 1px solid #555;
--handle-background-color-default: #333;
--xy-handle-background-color-default: #333;
--selection-background-color-default: rgba(150, 150, 180, 0.1);
--selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
--xy-selection-background-color-default: rgba(150, 150, 180, 0.1);
--xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
}
.xy-flow.dark {
--node-color-default: #f8f8f8;
--xy-node-color-default: #f8f8f8;
}
.xy-flow__handle {
background-color: var(--handle-background-color, var(--handle-background-color-default));
background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
}
.xy-flow__node-input,
.xy-flow__node-default,
.xy-flow__node-output,
.xy-flow__node-group {
border: var(--node-border, var(--node-border-default));
color: var(--node-color, var(--node-color-default));
border: var(--xy-node-border, var(--xy-node-border-default));
color: var(--xy-node-color, var(--xy-node-color-default));
&.selected,
&:focus,
&:focus-visible {
outline: none;
border: var(--node-border-selected, var(--node-border-selected-default));
border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
}
}
.xy-flow__nodesselection-rect,
.xy-flow__selection {
background: var(--selection-background-color, var(--selection-background-color-default));
border: var(--selection-border, var(--selection-border-default));
background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
border: var(--xy-selection-border, var(--xy-selection-border-default));
}

108
packages/system/src/styles/init.css
View File

@@ -1,51 +1,55 @@
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.xy-flow {
--edge-stroke-default: #b1b1b7;
--edge-stroke-width-default: 1;
--edge-stroke-selected-default: #555;
--xy-edge-stroke-default: #b1b1b7;
--xy-edge-stroke-width-default: 1;
--xy-edge-stroke-selected-default: #555;
--connectionline-stroke-default: #b1b1b7;
--connectionline-stroke-width-default: 1;
--xy-connectionline-stroke-default: #b1b1b7;
--xy-connectionline-stroke-width-default: 1;
--attribution-background-color-default: rgba(255, 255, 255, 0.5);
--xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
--minimap-background-color-default: #fff;
--minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
--minimap-node-background-color-default: #e2e2e2;
--minimap-node-stroke-color-default: transparent;
--minimap-node-stroke-width-default: 2;
--xy-minimap-background-color-default: #fff;
--xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);
--xy-minimap-node-background-color-default: #e2e2e2;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
--background-color-default: transparent;
--background-pattern-dots-color-default: #91919a;
--background-pattern-lines-color-default: #eee;
--background-pattern-cross-color-default: #e2e2e2;
--xy-background-color-default: transparent;
--xy-background-pattern-dots-color-default: #91919a;
--xy-background-pattern-lines-color-default: #eee;
--xy-background-pattern-cross-color-default: #e2e2e2;
}
.xy-flow.dark {
--edge-stroke-default: #3c3c3c;
--edge-stroke-width-default: 1;
--edge-stroke-selected-default: #727272;
--xy-edge-stroke-default: #3c3c3c;
--xy-edge-stroke-width-default: 1;
--xy-edge-stroke-selected-default: #727272;
--connectionline-stroke-default: #b1b1b7;
--connectionline-stroke-width-default: 1;
--xy-connectionline-stroke-default: #b1b1b7;
--xy-connectionline-stroke-width-default: 1;
--attribution-background-color-default: rgba(150, 150, 150, 0.25);
--xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
--minimap-background-color-default: #141414;
--minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
--minimap-node-background-color-default: #2b2b2b;
--minimap-node-stroke-color-default: transparent;
--minimap-node-stroke-width-default: 2;
--xy-minimap-background-color-default: #141414;
--xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);
--xy-minimap-node-background-color-default: #2b2b2b;
--xy-minimap-node-stroke-color-default: transparent;
--xy-minimap-node-stroke-width-default: 2;
--background-color-default: #141414;
--background-pattern-dots-color-default: #777;
--background-pattern-lines-color-default: #777;
--background-pattern-cross-color-default: #777;
--xy-background-color-default: #141414;
--xy-background-pattern-dots-color-default: #777;
--xy-background-pattern-lines-color-default: #777;
--xy-background-pattern-cross-color-default: #777;
}
.xy-flow {
background-color: var(--background-color-props, var(--background-color-default, 'transparent'));
background-color: var(--xy-background-color, var(--xy-background-color-default));
}
.xy-flow__background {
background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));
}
.xy-flow__container {
@@ -94,14 +98,14 @@
}
.xy-flow__edge-path {
stroke: var(--edge-stroke, var(--edge-stroke-default));
stroke-width: var(--edge-stroke-width, var(--edge-stroke-width-default));
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
fill: none;
}
.xy-flow__connection-path {
stroke: var(--connectionline-stroke, var(--connectionline-stroke-default));
stroke-width: var(--connectionline-stroke-width, var(--connectionline-stroke-width-default));
stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
fill: none;
}
@@ -132,7 +136,7 @@
&.selected .xy-flow__edge-path,
&:focus .xy-flow__edge-path,
&:focus-visible .xy-flow__edge-path {
stroke: var(--edge-stroke-selected, var(--edge-stroke-selected-default));
stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
}
&-textwrapper {
@@ -266,7 +270,7 @@
.xy-flow__attribution {
font-size: 10px;
background: var(--attribution-background-color, var(--attribution-background-color-default));
background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
padding: 2px 3px;
margin: 0;
@@ -293,27 +297,27 @@
}
.xy-flow__minimap {
background: var(--minimap-background-color, var(--minimap-background-color-default));
background: var(--xy-minimap-background-color, var(--xy-minimap-background-color-default));
&-mask {
fill: var(
--minimap-mask-background-color-props,
var(--minimap-mask-background-color, var(--minimap-mask-background-color-default))
--xy-minimap-mask-background-color-props,
var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
);
}
&-node {
fill: var(
--minimap-node-background-color-props,
var(--minimap-node-background-color, var(--minimap-node-background-color-default))
--xy-minimap-node-background-color-props,
var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
);
stroke: var(
--minimap-node-stroke-color-props,
var(--minimap-node-stroke-color, var(--minimap-node-stroke-color-default))
--xy-minimap-node-stroke-color-props,
var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
);
stroke-width: var(
--minimap-node-stroke-width-props,
var(--minimap-node-stroke-width, var(--minimap-node-stroke-width-default))
--xy-minimap-node-stroke-width-props,
var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
);
}
}
@@ -326,22 +330,22 @@
.xy-flow__background-pattern {
&.dots {
fill: var(
--background-pattern-color-props,
var(--background-pattern-color, var(--background-pattern-dots-color-default))
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
);
}
&.lines {
stroke: var(
--background-pattern-color-props,
var(--background-pattern-color, var(--background-pattern-lines-color-default))
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
);
}
&.cross {
stroke: var(
--background-pattern-color-props,
var(--background-pattern-color, var(--background-pattern-cross-color-default))
--xy-background-pattern-color-props,
var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
);
}
}

109
packages/system/src/styles/style.css
View File

@@ -1,46 +1,46 @@
.xy-flow {
--node-color-default: inherit;
--node-border-default: 1px solid #1a192b;
--node-background-color-default: #fff;
--node-group-background-color-default: rgba(240, 240, 240, 0.25);
--node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
--node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
--node-border-radius-default: 3px;
--xy-node-color-default: inherit;
--xy-node-border-default: 1px solid #1a192b;
--xy-node-background-color-default: #fff;
--xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
--xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
--xy-node-border-radius-default: 3px;
--handle-background-color-default: #1a192b;
--handle-border-color-default: #fff;
--xy-handle-background-color-default: #1a192b;
--xy-handle-border-color-default: #fff;
--selection-background-color-default: rgba(0, 89, 220, 0.08);
--selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
--xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
--xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
--controls-button-background-color-default: #fefefe;
--controls-button-background-color-hover-default: #f4f4f4;
--controls-button-color-default: inherit;
--controls-button-color-hover-default: inherit;
--controls-button-border-color-default: #eee;
--controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
--xy-controls-button-background-color-default: #fefefe;
--xy-controls-button-background-color-hover-default: #f4f4f4;
--xy-controls-button-color-default: inherit;
--xy-controls-button-color-hover-default: inherit;
--xy-controls-button-border-color-default: #eee;
--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.xy-flow.dark {
--node-color-default: #f8f8f8;
--node-border-default: 1px solid #3c3c3c;
--node-background-color-default: #1e1e1e;
--node-group-background-color-default: rgba(240, 240, 240, 0.25);
--node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
--node-boxshadow-selected-default: 0 0 0 0.5px #999;
--xy-node-color-default: #f8f8f8;
--xy-node-border-default: 1px solid #3c3c3c;
--xy-node-background-color-default: #1e1e1e;
--xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
--xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;
--handle-background-color-default: #bebebe;
--handle-border-color-default: #1e1e1e;
--xy-handle-background-color-default: #bebebe;
--xy-handle-border-color-default: #1e1e1e;
--selection-background-color-default: rgba(200, 200, 220, 0.08);
--selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
--xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
--xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);
--controls-button-background-color-default: #2b2b2b;
--controls-button-background-color-hover-default: #3e3e3e;
--controls-button-color-default: #f8f8f8;
--controls-button-color-hover-default: #fff;
--controls-button-border-color-default: #5b5b5b;
--controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
--xy-controls-button-background-color-default: #2b2b2b;
--xy-controls-button-background-color-hover-default: #3e3e3e;
--xy-controls-button-color-default: #f8f8f8;
--xy-controls-button-color-hover-default: #fff;
--xy-controls-button-border-color-default: #5b5b5b;
--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.xy-flow__edge {
@@ -67,35 +67,35 @@
.xy-flow__node-output,
.xy-flow__node-group {
padding: 10px;
border-radius: var(--node-border-radius, var(--node-border-radius-default));
border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
width: 150px;
font-size: 12px;
color: var(--node-color, var(--node-color-default));
color: var(--xy-node-color, var(--xy-node-color-default));
text-align: center;
border: var(--node-border, var(--node-border-default));
background-color: var(--node-background-color, var(--node-background-color-default));
border: var(--xy-node-border, var(--xy-node-border-default));
background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
&.selectable {
&:hover {
box-shadow: var(--node-boxshadow-hover, var(--node-boxshadow-hover-default));
box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
}
&.selected,
&:focus,
&:focus-visible {
box-shadow: var(--node-boxshadow-selected, var(--node-boxshadow-selected-default));
box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
}
}
}
.xy-flow__node-group {
background-color: var(--node-group-background-color, var(--node-group-background-color-default));
background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.xy-flow__nodesselection-rect,
.xy-flow__selection {
background: var(--selection-background-color, var(--selection-background-color-default));
border: var(--selection-border, var(--selection-border-default));
background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
border: var(--xy-selection-border, var(--xy-selection-border-default));
&:focus,
&:focus-visible {
@@ -106,34 +106,37 @@
.xy-flow__handle {
width: 6px;
height: 6px;
background-color: var(--handle-background-color, var(--handle-background-color-default));
border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
border-radius: 100%;
}
.xy-flow__controls {
box-shadow: var(--controls-box-shadow, var(--controls-box-shadow-default));
box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
&-button {
border: none;
background: var(--controls-button-background-color, var(--controls-button-background-color-default));
background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
border-bottom: 1px solid
var(
--controls-button-border-color-props,
var(--controls-button-border-color, var(--controls-button-border-color-default))
--xy-controls-button-border-color-props,
var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
);
color: var(--controls-button-color-props, var(--controls-button-color, var(--controls-button-color-default)));
color: var(
--xy-controls-button-color-props,
var(--xy-controls-button-color, var(--xy-controls-button-color-default))
);
cursor: pointer;
user-select: none;
&:hover {
background: var(
--controls-button-background-color-hover-props,
var(--controls-button-background-color-hover, var(--controls-button-background-color-hover-default))
--xy-controls-button-background-color-hover-props,
var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
);
color: var(
--controls-button-color-hover-props,
var(--controls-button-color-hover, var(--controls-button-color-hover-default))
--xy-controls-button-color-hover-props,
var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
);
}