@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/styles/slotui-presets.scss

@@ -1,56 +1,56 @@
-$vendor: "sld";
-
-$presets-ellipsis-line-default: 1;
-
-$preset-width-list: (
-    tiny: 2rem,
-    mini: 3rem,
-    small: 10rem,
-    med: 14rem,
-    kind: 20rem,
-    full: 100%,
-    auto: auto,
-    default: 10rem
-);
-
-$preset-tall-list: (
-    tiny: 1rem,
-    mini: 1.5rem,
-    small: 2.5rem,
-    med: 3.5rem,
-    kind: 4rem,
-    auto: auto,
-    default: 2.5rem
-);
-
-$preset-gutter-list: (
-    tiny: 0.25rem,
-    mini: 0.5rem,
-    small: 1rem,
-    med: 2rem,
-    kind: 3rem,
-    default: 1rem
-);
-
-$preset-gap-list: (
-    tiny: 0.25rem,
-    mini: 0.4rem,
-    small: 0.5rem,
-    med: 1rem,
-    large: 1.5rem,
-    default: 0.5rem
-);
-
-$preset-pad-list: (
-    tiny: 0.25rem,
-    small: 0.5rem,
-    med: 1rem,
-    large: 1.5rem
-);
-
-$preset-radius-list: (
-    tiny: 2px,
-    small: 4px,
-    med: 8px,
-    large: 16px
-);
+$vendor: "sld";
+
+$presets-ellipsis-line-default: 1;
+
+$preset-width-list: (
+    tiny: 2rem,
+    mini: 3rem,
+    small: 10rem,
+    med: 14rem,
+    kind: 20rem,
+    full: 100%,
+    auto: auto,
+    default: 10rem
+);
+
+$preset-tall-list: (
+    tiny: 1rem,
+    mini: 1.5rem,
+    small: 2.5rem,
+    med: 3.5rem,
+    kind: 4rem,
+    auto: auto,
+    default: 2.5rem
+);
+
+$preset-gutter-list: (
+    tiny: 0.25rem,
+    mini: 0.5rem,
+    small: 1rem,
+    med: 2rem,
+    kind: 3rem,
+    default: 1rem
+);
+
+$preset-gap-list: (
+    tiny: 0.25rem,
+    mini: 0.4rem,
+    small: 0.5rem,
+    med: 1rem,
+    large: 1.5rem,
+    default: 0.5rem
+);
+
+$preset-pad-list: (
+    tiny: 0.25rem,
+    small: 0.5rem,
+    med: 1rem,
+    large: 1.5rem
+);
+
+$preset-radius-list: (
+    tiny: 2px,
+    small: 4px,
+    med: 8px,
+    large: 16px
+);

package/dist/styles/slotuisheet/SlotuiSheet.svelte

@@ -1,42 +1,42 @@
-<script lang="ts">
-	import { type SlotUiStyleSheet, type BreakPoints } from './types.js';
-	import { configCssVars, toContainerQuery } from './utils.js';
-
-	let { breakpoints, showSelectors }: SlotUiStyleSheet = $props();
-
-	function castToCssProps(breakpoints: BreakPoints | undefined) {
-		if (!breakpoints) return '';
-		let cssProps = '';
-		for (let key in breakpoints) {
-			cssProps += `--${key}: ${breakpoints[key]};`;
-		}
-		return cssProps;
-	}
-</script>
-
-<svelte:head>
-	{castToCssProps(breakpoints)}
-	<style id="idae-slotui-sheet"  >
-		@use './slotui-sheet.scss';
-	</style>
-	<style id="idae-slotui-queries" >
-		@use './stylesheet.scss'; 
-	</style>
-</svelte:head>
-<div id="slotui-breakpoints"></div>
-{#if showSelectors}
-	{castToCssProps(breakpoints)}
-	<pre>
-        {JSON.stringify(configCssVars, undefined, ' ')}
-    </pre>
-	<pre>
-        {JSON.stringify(toContainerQuery('hideMaxWidth', '115px'), undefined, ' ')}
-    </pre>
-{/if} 
+<script lang="ts">
+	import { type SlotUiStyleSheet, type BreakPoints } from './types.js';
+	import { configCssVars, toContainerQuery } from './utils.js';
+
+	let { breakpoints, showSelectors }: SlotUiStyleSheet = $props();
+
+	function castToCssProps(breakpoints: BreakPoints | undefined) {
+		if (!breakpoints) return '';
+		let cssProps = '';
+		for (let key in breakpoints) {
+			cssProps += `--${key}: ${breakpoints[key]};`;
+		}
+		return cssProps;
+	}
+</script>
+
+<svelte:head>
+	{castToCssProps(breakpoints)}
+	<style id="idae-slotui-sheet"  >
+		@use './slotui-sheet.scss';
+	</style>
+	<style id="idae-slotui-queries" >
+		@use './stylesheet.scss'; 
+	</style>
+</svelte:head>
+<div id="slotui-breakpoints"></div>
+{#if showSelectors}
+	{castToCssProps(breakpoints)}
+	<pre>
+        {JSON.stringify(configCssVars, undefined, ' ')}
+    </pre>
+	<pre>
+        {JSON.stringify(toContainerQuery('hideMaxWidth', '115px'), undefined, ' ')}
+    </pre>
+{/if} 
 <style>#breakpoints {
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
   pointer-events: none;
-}</style>
+}</style>

package/dist/styles/slotuisheet/SlotyuiSheet.demo.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	import { be } from '@medyll/idae-be';
-	import { cssDom } from '@medyll/idae-dom-events';
-	import StyleSheet from './SlotuiSheet.svelte';
-	import { configCssVars, toContainerQuery } from './utils.js';
-
-	const tag = 'hideMaxWidth';
-	cssDom('[hideMaxWidth]').each((element, changes) => {
-		console.log(be(element as HTMLElement).attr.get(tag));
-		let tagValue = be(element as HTMLElement).attr.get(tag);
-
-		if (tag && tagValue) {
-			let objTag = toContainerQuery(tag, tagValue);
-			console.log(objTag);
-			be(element).classAdd(objTag.class).setStyle(objTag.style);
-			console.log(element, changes);
-
-			be(element).up('[container]').setStyle(objTag.style);
-			console.log(be(element).up('[container]').node);
-		}
-	});
-</script>
-
-<StyleSheet showSelectors={true} />
-
-<div container="size" class="container-size" style="container:size;width:135px;relative">
-	<div hideMaxWidth="115px">hideMaxWidth</div>
-</div>
+<script lang="ts">
+	import { be } from '@medyll/idae-be';
+	import { cssDom } from '@medyll/idae-dom-events';
+	import StyleSheet from './SlotuiSheet.svelte';
+	import { configCssVars, toContainerQuery } from './utils.js';
+
+	const tag = 'hideMaxWidth';
+	cssDom('[hideMaxWidth]').each((element, changes) => {
+		console.log(be(element as HTMLElement).attr.get(tag));
+		let tagValue = be(element as HTMLElement).attr.get(tag);
+
+		if (tag && tagValue) {
+			let objTag = toContainerQuery(tag, tagValue);
+			console.log(objTag);
+			be(element).classAdd(objTag.class).setStyle(objTag.style);
+			console.log(element, changes);
+
+			be(element).up('[container]').setStyle(objTag.style);
+			console.log(be(element).up('[container]').node);
+		}
+	});
+</script>
+
+<StyleSheet showSelectors={true} />
+
+<div container="size" class="container-size" style="container:size;width:135px;relative">
+	<div hideMaxWidth="115px">hideMaxWidth</div>
+</div>

package/dist/styles/slotuisheet/sheetConfig.scss

@@ -1,8 +1,8 @@
- 
- :root {
-  --container-item: container-item;
-  --on-container: on-container;
-  --than: than;
-  --show-selector: show;
-  --hide-selector: hide; 
+ 
+ :root {
+  --container-item: container-item;
+  --on-container: on-container;
+  --than: than;
+  --show-selector: show;
+  --hide-selector: hide; 
 }

package/dist/styles/slotuisheet/slotui-sheet.scss

@@ -1,192 +1,192 @@
-@use "../slotui-presets.scss";
-
-:root {
-    transition: all 0.3s ease-out;
-}
-
-:root {
-    @each $preset, $preset-value in slotui-presets.$preset-radius-list {
-        --#{slotui-presets.$vendor}-radius-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-pad-list {
-        --#{slotui-presets.$vendor}-pad-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-gap-list {
-        --#{slotui-presets.$vendor}-gap-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-gutter-list {
-        --#{slotui-presets.$vendor}-gutter-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-tall-list {
-        --#{slotui-presets.$vendor}-tall-#{$preset}: #{$preset-value};
-    }
-
-    @each $preset, $preset-value in slotui-presets.$preset-width-list {
-        --#{slotui-presets.$vendor}-width-#{$preset}: #{$preset-value};
-    }
-}
-
-:root {
-    --white: #fff;
-    --black: #333;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --white: #333;
-        --black: #ccc;
-    }
-}
-
-:root.dark,
-:root[data-theme="dark"],
-body[data-theme="dark"],
-:root[theme="dark"] {
-    --white: #333;
-    --black: #ccc;
-}
-
-:root {
-    --#{slotui-presets.$vendor}-color-foreground: #333333;
-    --#{slotui-presets.$vendor}-color-background: #ffffff;
-
-    --#{slotui-presets.$vendor}-color-paper: color-mix(
-        in srgb,
-        var(--#{slotui-presets.$vendor}-color-background) 90%,
-        var(--#{slotui-presets.$vendor}-color-foreground) 10%
-    );
-
-    --#{slotui-presets.$vendor}-color-primary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 60%, #4caf50);
-    --#{slotui-presets.$vendor}-color-secondary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 80%, #2196f3);
-    --#{slotui-presets.$vendor}-color-tertiary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 70%, #ffc107);
-
-    --#{slotui-presets.$vendor}-color-disabled: color-mix(
-        in srgb,
-        var(--#{slotui-presets.$vendor}-color-foreground) 20%,
-        var(--#{slotui-presets.$vendor}-color-background)
-    );
-    --#{slotui-presets.$vendor}-color-disabled-border: color-mix(
-        in srgb,
-        var(--#{slotui-presets.$vendor}-color-foreground) 30%,
-        var(--#{slotui-presets.$vendor}-color-background)
-    );
-    --#{slotui-presets.$vendor}-background-disabled: color-mix(
-        in srgb,
-        var(--#{slotui-presets.$vendor}-color-background) 90%,
-        var(--#{slotui-presets.$vendor}-color-foreground)
-    );
-}
-
-:root.dark,
-:root[data-theme="dark"],
-body[data-theme="dark"],
-:root[theme="dark"] {
-    --#{slotui-presets.$vendor}-color-foreground: #ffffff;
-    --#{slotui-presets.$vendor}-color-background: #27323a;
-}
-
-:root {
-    --#{slotui-presets.$vendor}-elevation-1: 0 0 1.75px 0 rgba(0, 0, 0, 0.15), 0 0.15px 0.46px 0 rgba(0, 0, 0, 0.1);
-    --#{slotui-presets.$vendor}-elevation-2: 0 0 3.44px 0 rgba(0, 0, 0, 0.15), 0 0.3px 0.93px 0 rgba(0, 0, 0, 0.1);
-    --#{slotui-presets.$vendor}-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
-    --#{slotui-presets.$vendor}-elevation-4: 0 0 6.89px 0 rgba(0, 0, 0, 0.15), 0 0.61px 1.86px 0 rgba(0, 0, 0, 0.1);
-    --#{slotui-presets.$vendor}-elevation-5: 0 0 8.62px 0 rgba(0, 0, 0, 0.15), 0 0.76px 2.32px 0 rgba(0, 0, 0, 0.1);
-}
-
-:root {
-    --#{slotui-presets.$vendor}-color-discrete: #ccc;
-    --#{slotui-presets.$vendor}-color-success: #075c07;
-    --#{slotui-presets.$vendor}-color-info: #ffd324;
-    --#{slotui-presets.$vendor}-color-warning: #b49104;
-    --#{slotui-presets.$vendor}-color-alert: #cc5c00;
-    --#{slotui-presets.$vendor}-color-error: #cc0000;
-}
-:root {
-    $tints: foreground, "background", primary, secondary, tertiary;
-
-    @each $tint in $tints {
-        /* alpha  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 80%);
-    }
-    @each $tint in $tints {
-        /* darken  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
-    }
-    @each $tint in $tints {
-        /* lighten  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
-    }
-
-    $tints: discrete, success, info, warning, alert, error;
-    @each $tint in $tints {
-        /* alpha  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
-    }
-    @each $tint in $tints {
-        /* darken  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
-    }
-    @each $tint in $tints {
-        /* lighten  #{$tint} */
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
-        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
-    }
-}
-/* presets */
-:root {
-    --#{slotui-presets.$vendor}-color-border: var(--#{slotui-presets.$vendor}-color-foreground-alpha-low);
-
-    --#{slotui-presets.$vendor}-hover-background-color: var(--#{slotui-presets.$vendor}-color-secondary-alpha-mid);
-    --#{slotui-presets.$vendor}-hover-border-color: var(--#{slotui-presets.$vendor}-color-foreground-alpha-high);
-    --#{slotui-presets.$vendor}-hover-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
-
-    --#{slotui-presets.$vendor}-selected-background-color: var(--#{slotui-presets.$vendor}-color-primary-alpha-mid);
-    --#{slotui-presets.$vendor}-selected-border-color: var(--#{slotui-presets.$vendor}-color-primary);
-    --#{slotui-presets.$vendor}-selected-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
-}
-
-.bg-themed-scheme-discrete {
-    color: black;
-    text-shadow: 0 0 0.125rem #b3b3b3;
-    background-color: #ccc;
-}
-.bg-themed-scheme-success {
-    color: white;
-    text-shadow: 0 0 0.125rem #004d00;
-    background-color: green;
-}
-.bg-themed-scheme-info {
-    color: black;
-    text-shadow: 0 0 0.125rem #ffd324;
-    background-color: #ffdd57;
-}
-.bg-themed-scheme-warning {
-    color: black;
-    text-shadow: 0 0 0.125rem #b49104;
-    background-color: #e6b905;
-}
-.bg-themed-scheme-alert {
-    color: black;
-    text-shadow: 0 0 0.125rem #cc5c00;
-    background-color: #ff7300;
-}
-.bg-themed-scheme-error {
-    color: white;
-    text-shadow: 0 0 0.125rem #cc0000;
-    background-color: red;
-}
+@use "../slotui-presets.scss";
+
+:root {
+    transition: all 0.3s ease-out;
+}
+
+:root {
+    @each $preset, $preset-value in slotui-presets.$preset-radius-list {
+        --#{slotui-presets.$vendor}-radius-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-pad-list {
+        --#{slotui-presets.$vendor}-pad-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-gap-list {
+        --#{slotui-presets.$vendor}-gap-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-gutter-list {
+        --#{slotui-presets.$vendor}-gutter-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-tall-list {
+        --#{slotui-presets.$vendor}-tall-#{$preset}: #{$preset-value};
+    }
+
+    @each $preset, $preset-value in slotui-presets.$preset-width-list {
+        --#{slotui-presets.$vendor}-width-#{$preset}: #{$preset-value};
+    }
+}
+
+:root {
+    --white: #fff;
+    --black: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --white: #333;
+        --black: #ccc;
+    }
+}
+
+:root.dark,
+:root[data-theme="dark"],
+body[data-theme="dark"],
+:root[theme="dark"] {
+    --white: #333;
+    --black: #ccc;
+}
+
+:root {
+    --#{slotui-presets.$vendor}-color-foreground: #333333;
+    --#{slotui-presets.$vendor}-color-background: #ffffff;
+
+    --#{slotui-presets.$vendor}-color-paper: color-mix(
+        in srgb,
+        var(--#{slotui-presets.$vendor}-color-background) 90%,
+        var(--#{slotui-presets.$vendor}-color-foreground) 10%
+    );
+
+    --#{slotui-presets.$vendor}-color-primary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 60%, #4caf50);
+    --#{slotui-presets.$vendor}-color-secondary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 80%, #2196f3);
+    --#{slotui-presets.$vendor}-color-tertiary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 70%, #ffc107);
+
+    --#{slotui-presets.$vendor}-color-disabled: color-mix(
+        in srgb,
+        var(--#{slotui-presets.$vendor}-color-foreground) 20%,
+        var(--#{slotui-presets.$vendor}-color-background)
+    );
+    --#{slotui-presets.$vendor}-color-disabled-border: color-mix(
+        in srgb,
+        var(--#{slotui-presets.$vendor}-color-foreground) 30%,
+        var(--#{slotui-presets.$vendor}-color-background)
+    );
+    --#{slotui-presets.$vendor}-background-disabled: color-mix(
+        in srgb,
+        var(--#{slotui-presets.$vendor}-color-background) 90%,
+        var(--#{slotui-presets.$vendor}-color-foreground)
+    );
+}
+
+:root.dark,
+:root[data-theme="dark"],
+body[data-theme="dark"],
+:root[theme="dark"] {
+    --#{slotui-presets.$vendor}-color-foreground: #ffffff;
+    --#{slotui-presets.$vendor}-color-background: #27323a;
+}
+
+:root {
+    --#{slotui-presets.$vendor}-elevation-1: 0 0 1.75px 0 rgba(0, 0, 0, 0.15), 0 0.15px 0.46px 0 rgba(0, 0, 0, 0.1);
+    --#{slotui-presets.$vendor}-elevation-2: 0 0 3.44px 0 rgba(0, 0, 0, 0.15), 0 0.3px 0.93px 0 rgba(0, 0, 0, 0.1);
+    --#{slotui-presets.$vendor}-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
+    --#{slotui-presets.$vendor}-elevation-4: 0 0 6.89px 0 rgba(0, 0, 0, 0.15), 0 0.61px 1.86px 0 rgba(0, 0, 0, 0.1);
+    --#{slotui-presets.$vendor}-elevation-5: 0 0 8.62px 0 rgba(0, 0, 0, 0.15), 0 0.76px 2.32px 0 rgba(0, 0, 0, 0.1);
+}
+
+:root {
+    --#{slotui-presets.$vendor}-color-discrete: #ccc;
+    --#{slotui-presets.$vendor}-color-success: #075c07;
+    --#{slotui-presets.$vendor}-color-info: #ffd324;
+    --#{slotui-presets.$vendor}-color-warning: #b49104;
+    --#{slotui-presets.$vendor}-color-alert: #cc5c00;
+    --#{slotui-presets.$vendor}-color-error: #cc0000;
+}
+:root {
+    $tints: foreground, "background", primary, secondary, tertiary;
+
+    @each $tint in $tints {
+        /* alpha  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 80%);
+    }
+    @each $tint in $tints {
+        /* darken  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
+    }
+    @each $tint in $tints {
+        /* lighten  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
+    }
+
+    $tints: discrete, success, info, warning, alert, error;
+    @each $tint in $tints {
+        /* alpha  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
+    }
+    @each $tint in $tints {
+        /* darken  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
+    }
+    @each $tint in $tints {
+        /* lighten  #{$tint} */
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
+        --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
+    }
+}
+/* presets */
+:root {
+    --#{slotui-presets.$vendor}-color-border: var(--#{slotui-presets.$vendor}-color-foreground-alpha-low);
+
+    --#{slotui-presets.$vendor}-hover-background-color: var(--#{slotui-presets.$vendor}-color-secondary-alpha-mid);
+    --#{slotui-presets.$vendor}-hover-border-color: var(--#{slotui-presets.$vendor}-color-foreground-alpha-high);
+    --#{slotui-presets.$vendor}-hover-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
+
+    --#{slotui-presets.$vendor}-selected-background-color: var(--#{slotui-presets.$vendor}-color-primary-alpha-mid);
+    --#{slotui-presets.$vendor}-selected-border-color: var(--#{slotui-presets.$vendor}-color-primary);
+    --#{slotui-presets.$vendor}-selected-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
+}
+
+.bg-themed-scheme-discrete {
+    color: black;
+    text-shadow: 0 0 0.125rem #b3b3b3;
+    background-color: #ccc;
+}
+.bg-themed-scheme-success {
+    color: white;
+    text-shadow: 0 0 0.125rem #004d00;
+    background-color: green;
+}
+.bg-themed-scheme-info {
+    color: black;
+    text-shadow: 0 0 0.125rem #ffd324;
+    background-color: #ffdd57;
+}
+.bg-themed-scheme-warning {
+    color: black;
+    text-shadow: 0 0 0.125rem #b49104;
+    background-color: #e6b905;
+}
+.bg-themed-scheme-alert {
+    color: black;
+    text-shadow: 0 0 0.125rem #cc5c00;
+    background-color: #ff7300;
+}
+.bg-themed-scheme-error {
+    color: white;
+    text-shadow: 0 0 0.125rem #cc0000;
+    background-color: red;
+}