chore(svelte): use css var defaults

This commit is contained in:
moklick
2023-06-29 12:24:28 +02:00
parent 1f64b29b50
commit 3af4bf23a4
5 changed files with 15 additions and 23 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "@xyflow/svelte", "name": "@xyflow/svelte",
"version": "0.0.9", "version": "0.0.11",
"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",
@@ -9,8 +9,7 @@
circle { circle {
fill: var( fill: var(
--pattern-color-props, --pattern-color-props,
var(--background-pattern-color), var(--background-pattern-color, var(--background-pattern-color-default))
var(--background-pattern-color-default)
); );
} }
</style> </style>
@@ -14,8 +14,7 @@
path { path {
stroke: var( stroke: var(
--pattern-color-props, --pattern-color-props,
var(--background-pattern-color), var(--background-pattern-color, var(--background-pattern-color-default))
var(--background-pattern-color-default)
); );
} }
</style> </style>
@@ -30,19 +30,16 @@
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))
var(--controls-button-background-color-default)
); );
border-bottom: 1px solid border-bottom: 1px solid
var( var(
--controls-button-border-color-props, --controls-button-border-color-props,
var(--controls-button-border-color), var(--controls-button-border-color, var(--controls-button-border-color-default))
var(--controls-button-border-color-default)
); );
color: var( color: var(
--controls-button-color-props, --controls-button-color-props,
var(--controls-button-color), var(--controls-button-color, var(--controls-button-color-default))
var(--controls-button-color-default)
); );
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
@@ -58,13 +55,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(
var(--controls-button-background-color-hover-default) --controls-button-background-color-hover,
var(--controls-button-background-color-hover-default)
)
); );
color: var( color: var(
--controls-button-color-hover-props, --controls-button-color-hover-props,
var(--controls-button-hover-color), var(--controls-button-hover-color, var(--controls-button-hover-color-default))
var(--controls-button-hover-color-default)
); );
} }
@@ -144,26 +144,22 @@
svg { svg {
background-color: var( background-color: var(
--minimap-background-color-props, --minimap-background-color-props,
var(--minimap-background-color), var(--minimap-background-color, var(--minimap-background-color-default))
var(--minimap-background-color-default)
); );
} }
.svelte-flow__minimap-mask { .svelte-flow__minimap-mask {
fill: var( fill: var(
--minimap-mask-color-props, --minimap-mask-color-props,
var(--minimap-mask-color), var(--minimap-mask-color, var(--minimap-mask-color-default))
var(--minimap-mask-color-default)
); );
stroke: var( stroke: var(
--minimap-mask-stroke-color-props, --minimap-mask-stroke-color-props,
var(--minimap-mask-stroke-color), var(--minimap-mask-stroke-color, var(--minimap-mask-stroke-color-default))
var(--minimap-mask-stroke-color-default)
); );
stroke-width: var( stroke-width: var(
--minimap-mask-stroke-width-props, --minimap-mask-stroke-width-props,
var(--minimap-mask-stroke-width), var(--minimap-mask-stroke-width, var(--minimap-mask-stroke-width-default))
var(--minimap-mask-stroke-width-default)
); );
} }
</style> </style>