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

feat(styles): one stylesheet source for react and svelte (#3350)

Browse Source 
* feat(styles): create stylesheets for react and svelte based on one source

* refactor(styling): cleanup

* refactor(postcss): share a config

* refactor(postcss): replace env hack with env file
This commit is contained in:
Moritz Klack
2023-08-24 14:02:57 +02:00
committed by GitHub
parent d2c23c5149
commit bd922889b4
47 changed files with 1422 additions and 962 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/Attribution/Attribution.svelte
-14
View File
@@ -24,17 +24,3 @@
</a>
</Panel>
{/if}
<style>
:global(.svelte-flow__panel.svelte-flow__attribution) {
font-size: 10px;
background: rgba(255, 255, 255, 0.5);
padding: 2px 3px;
margin: 0;
}
:global(.svelte-flow__attribution) a {
text-decoration: none;
color: #999;
}
</style>
packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
-27
View File
@@ -47,30 +47,3 @@
</div>
</EdgeLabelRenderer>
{/if}
<style>
.svelte-flow__edge-label {
position: absolute;
background: white;
}
.svelte-flow__edge-path {
stroke: var(--edge-color, var(--edge-color-default));
stroke-width: 1;
}
:global(.selected) .svelte-flow__edge-path {
stroke: var(--edge-color-selected, var(--edge-color-selected-default));
}
:global(.animated) .svelte-flow__edge-path {
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
@keyframes dashdraw {
from {
stroke-dashoffset: 10;
}
}
</style>
packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
-24
View File
@@ -13,27 +13,3 @@
</g>
</svg>
{/if}
<style>
.svelte-flow__connectionline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
z-index: 1001;
}
.svelte-flow__connection {
pointer-events: none;
}
.svelte-flow__edge-path,
.svelte-flow__connection-path {
stroke: var(--connection-line-color, var(--connection-line-color-default));
stroke-width: 1;
fill: none;
}
</style>
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
-7
View File
@@ -89,10 +89,3 @@
markerEnd={markerEndUrl}
/>
</g>
<style>
.svelte-flow__edge {
pointer-events: visibleStroke;
cursor: pointer;
}
</style>
packages/svelte/src/lib/components/Handle/Handle.svelte
+1 -43
View File
@@ -93,6 +93,7 @@
class:connectablestart={isConnectableStart}
class:connectableend={isConnectableEnd}
class:connectable={isConnectable}
class:connectionindicator={isConnectable}
on:mousedown={onPointerDown}
on:touchstart={onPointerDown}
{style}
@@ -101,46 +102,3 @@
>
<slot />
</div>
<style>
.svelte-flow__handle {
position: absolute;
pointer-events: none;
min-width: 5px;
min-height: 5px;
width: 6px;
height: 6px;
background: var(--handle-background-color, var(--handle-background-color-default));
border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
border-radius: 100%;
}
.connectable {
pointer-events: all;
cursor: crosshair;
}
.bottom {
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
}
.top {
left: 50%;
top: 0;
transform: translate(-50%, -50%);
}
.left {
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.right {
top: 50%;
left: 100%;
transform: translate(-50%, -50%);
}
</style>
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+3 -30
View File
@@ -75,6 +75,8 @@
dispatchEvent('nodeclick');
}
// @todo: add selectable state
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -95,6 +97,7 @@
class:selected
class:draggable
class:connectable
class:selectable
class:parent={isParent}
style:z-index={zIndex}
style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
@@ -123,33 +126,3 @@
on:connectend
/>
</div>
<style>
.svelte-flow__node {
border-radius: 3px;
color: var(--node-color, var(--node-color-default));
text-align: center;
border-width: 1px;
border-style: solid;
border-color: var(--node-border-color, var(--node-border-color-default));
background-color: var(--node-background-color, var(--node-background-color-default));
position: absolute;
pointer-events: none;
user-select: none;
}
.draggable {
cursor: grab;
pointer-events: all;
}
.selected {
outline: none;
box-shadow: 0 0 0 0.5px
var(--node-shadow-color-selected, var(--node-shadow-color-selected-default));
}
.dragging {
cursor: grabbing;
}
</style>
packages/svelte/src/lib/components/Selection/Selection.svelte
-8
View File
@@ -18,13 +18,5 @@
position: absolute;
top: 0;
left: 0;
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
z-index: 6;
}
.svelte-flow__selection:focus,
.svelte-flow__selection:focus-visible {
outline: none;
}
</style>
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
-2
View File
@@ -30,7 +30,5 @@
position: absolute;
top: 0;
left: 0;
pointer-events: none;
overflow: visible;
}
</style>
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
+3 -2
View File
@@ -79,7 +79,8 @@
.svelte-flow__nodes {
width: 100%;
height: 100%;
pointer-events: none;
transform-origin: 0 0;
position: absolute;
left: 0;
top: 0;
}
</style>
packages/svelte/src/lib/container/Pane/Pane.svelte
-10
View File
@@ -203,20 +203,10 @@
<style>
.svelte-flow__pane {
cursor: grab;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.selection {
cursor: pointer;
}
.dragging {
cursor: grabbing;
}
</style>
packages/svelte/src/lib/container/Panel/Panel.svelte
-29
View File
@@ -16,32 +16,3 @@
<div class={cc(['svelte-flow__panel', className, ...positionClasses])} {style} {...$$restProps}>
<slot />
</div>
<style>
.svelte-flow__panel {
position: absolute;
z-index: 5;
margin: 15px;
}
.svelte-flow__panel.top {
top: 0;
}
.svelte-flow__panel.bottom {
bottom: 0;
}
.svelte-flow__panel.left {
left: 0;
}
.svelte-flow__panel.right {
right: 0;
}
.svelte-flow__panel.center {
left: 50%;
transform: translateX(-50%);
}
</style>
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
-28
View File
@@ -175,25 +175,10 @@
background-color: var(--background-color, var(--background-color-default));
}
.svelte-flow :global(.svelte-flow__node-default),
.svelte-flow :global(.svelte-flow__node-input),
.svelte-flow :global(.svelte-flow__node-output) {
padding: 10px;
}
.svelte-flow__edgelabel-renderer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
user-select: none;
}
:root {
--background-color-default: #fff;
--background-pattern-color-default: #ddd;
--minimap-background-color-default: #fff;
--minimap-mask-color-default: rgb(240, 240, 240, 0.6);
--minimap-mask-stroke-color-default: none;
--minimap-mask-stroke-width-default: 1;
@@ -203,18 +188,5 @@
--controls-button-color-default: inherit;
--controls-button-color-hover-default: inherit;
--controls-button-border-color-default: #eee;
--edge-color-default: #cfcfcf;
--edge-color-selected-default: #555;
--node-color-default: inherit;
--node-border-color-default: #1a192b;
--node-background-color-default: #fff;
--node-shadow-color-selected-default: #1a192b;
--handle-background-color-default: #1a192b;
--handle-border-color-default: #fff;
--connection-line-color-default: #b1b1b7;
}
</style>
packages/svelte/src/lib/container/Viewport/Viewport.svelte
-3
View File
@@ -16,10 +16,7 @@
width: 100%;
height: 100%;
position: absolute;
transform-origin: 0 0;
top: 0;
left: 0;
z-index: 2;
pointer-events: none;
}
</style>
packages/svelte/src/lib/plugins/Background/Background.svelte
+4 -5
View File
@@ -22,6 +22,7 @@
export let lineWidth: $$Props['lineWidth'] = 1;
export let bgColor: $$Props['bgColor'] = undefined;
export let patternColor: $$Props['patternColor'] = undefined;
export let patternClassName: $$Props['patternClassName'] = undefined;
let className: $$Props['class'] = '';
export { className as class };
@@ -44,6 +45,7 @@
class={cc(['svelte-flow__background', className])}
data-testid="svelte-flow__background"
style:--background-color-props={bgColor}
style:--pattern-color-props={patternColor}
>
<pattern
id={patternId}
@@ -55,9 +57,9 @@
patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
>
{#if isDots}
<DotPattern color={patternColor} radius={scaledSize / 2} />
<DotPattern radius={scaledSize / 2} class={patternClassName} />
{:else}
<LinePattern dimensions={patternDimensions} color={patternColor} {lineWidth} />
<LinePattern dimensions={patternDimensions} {variant} {lineWidth} class={patternClassName} />
{/if}
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
@@ -70,8 +72,5 @@
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
background-color: var(--background-color-props, 'transparent');
}
</style>
packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+10 -11
View File
@@ -1,15 +1,14 @@
<script lang="ts">
import cc from 'classcat';
export let radius = 5;
export let color: string | undefined = undefined;
let className: string = '';
export { className as class };
</script>
<circle cx={radius} cy={radius} r={radius} style:--pattern-color-props={color} />
<style>
circle {
fill: var(
--pattern-color-props,
var(--background-pattern-color, var(--background-pattern-color-default))
);
}
</style>
<circle
cx={radius}
cy={radius}
r={radius}
class={cc(['svelte-flow__background-pattern', 'dot', className])}
/>
packages/svelte/src/lib/plugins/Background/LinePattern.svelte
+7 -11
View File
@@ -1,20 +1,16 @@
<script lang="ts">
import cc from 'classcat';
import type { BackgroundVariant } from './types';
export let lineWidth = 1;
export let color: string | undefined = undefined;
export let dimensions: [number, number];
export let variant: BackgroundVariant | undefined = undefined;
let className: string = '';
export { className as class };
</script>
<path
stroke-width={lineWidth}
d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
style:--pattern-color-props={color}
class={cc(['svelte-flow__background-pattern', variant, className])}
/>
<style>
path {
stroke: var(
--pattern-color-props,
var(--background-pattern-color, var(--background-pattern-color-default))
);
}
</style>
packages/svelte/src/lib/plugins/Background/types.ts
+1
View File
@@ -7,6 +7,7 @@ export enum BackgroundVariant {
export type BackgroundProps = {
bgColor?: string;
patternColor?: string;
patternClassName?: string;
class?: string;
gap?: number | [number, number];
size?: number;
packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
-56
View File
@@ -24,59 +24,3 @@
>
<slot class="button-svg" />
</button>
<style>
.svelte-flow__controls-button {
border: none;
background: var(
--controls-button-background-color-props,
var(--controls-button-background-color, var(--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))
);
color: var(
--controls-button-color-props,
var(--controls-button-color, var(--controls-button-color-default))
);
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
cursor: pointer;
user-select: none;
padding: 5px;
}
.svelte-flow__controls-button:hover {
background: var(
--controls-button-background-color-hover-props,
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))
);
}
.svelte-flow__controls-button :global(svg) {
width: 100%;
max-width: 12px;
max-height: 12px;
}
.svelte-flow__controls-button:disabled {
pointer-events: none;
}
.svelte-flow__controls-button:disabled :global(svg) {
fill-opacity: 0.4;
}
</style>
packages/svelte/src/routes/overview/+page.svelte
+4 -2
View File
@@ -12,8 +12,10 @@
type EdgeTypes
} from '../../lib/index';
import { CustomNode } from './CustomNode';
import { CustomEdge } from './CustomEdge';
import CustomNode from './CustomNode.svelte';
import CustomEdge from './CustomEdge.svelte';
import '../../styles/style.css';
const nodeTypes: NodeTypes = {
custom: CustomNode
packages/svelte/src/routes/overview/CustomEdge/Custom.svelte → packages/svelte/src/routes/overview/CustomEdge.svelte
+1 -1
View File
@@ -5,7 +5,7 @@
useSvelteFlow,
type EdgeProps,
getBezierPath
} from '../../../lib/index';
} from '../../lib/index';
type $$Props = EdgeProps;
packages/svelte/src/routes/overview/CustomEdge/index.ts
-1
View File
@@ -1 +0,0 @@
export { default as CustomEdge } from './Custom.svelte';
packages/svelte/src/routes/overview/CustomNode/Custom.svelte → packages/svelte/src/routes/overview/CustomNode.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Handle, Position, type NodeProps } from '../../../lib/index';
import { Handle, Position, type NodeProps } from '../../lib/index';
type $$Props = NodeProps;
packages/svelte/src/routes/overview/CustomNode/index.ts
-1
View File
@@ -1 +0,0 @@
export { default as CustomNode } from './Custom.svelte';
packages/svelte/src/styles/base.css
+3
View File
@@ -0,0 +1,3 @@
/* this gets exported as style.css and can be used for the default theming */
@import '../../../system/src/styles/init.css';
@import '../../../system/src/styles/base.css';
packages/svelte/src/styles/style.css
+3
View File
@@ -0,0 +1,3 @@
/* this gets exported as style.css and can be used for the default theming */
@import '../../../system/src/styles/init.css';
@import '../../../system/src/styles/style.css';