@medyll/idae-slotui-svelte 0.121.0 → 0.122.1

package/dist/slotui-css/slotui-sheet.css

@@ -1,295 +1,295 @@
-:root {
-  transition: all 0.3s ease-out;
-}
-
-:root {
-  --sld-radius-tiny: 2px;
-  --sld-radius-small: 4px;
-  --sld-radius-med: 8px;
-  --sld-radius-large: 16px;
-  --sld-pad-tiny: 0.25rem;
-  --sld-pad-small: 0.5rem;
-  --sld-pad-med: 1rem;
-  --sld-pad-large: 1.5rem;
-  --sld-gap-tiny: 0.25rem;
-  --sld-gap-mini: 0.4rem;
-  --sld-gap-small: 0.5rem;
-  --sld-gap-med: 1rem;
-  --sld-gap-large: 1.5rem;
-  --sld-gap-default: 0.5rem;
-  --sld-gutter-tiny: 0.25rem;
-  --sld-gutter-mini: 0.5rem;
-  --sld-gutter-small: 1rem;
-  --sld-gutter-med: 2rem;
-  --sld-gutter-kind: 3rem;
-  --sld-gutter-default: 1rem;
-  --sld-tall-tiny: 1rem;
-  --sld-tall-mini: 1.5rem;
-  --sld-tall-small: 2.5rem;
-  --sld-tall-med: 3.5rem;
-  --sld-tall-kind: 4rem;
-  --sld-tall-auto: auto;
-  --sld-tall-default: 2.5rem;
-  --sld-width-tiny: 2rem;
-  --sld-width-mini: 3rem;
-  --sld-width-small: 10rem;
-  --sld-width-med: 14rem;
-  --sld-width-kind: 20rem;
-  --sld-width-full: 100%;
-  --sld-width-auto: auto;
-  --sld-width-default: 10rem;
-}
-
-: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 {
-  --sld-color-foreground: #333333;
-  --sld-color-background: #ffffff;
-  --sld-color-paper: color-mix(
-      in srgb,
-      var(--sld-color-background) 90%,
-      var(--sld-color-foreground) 10%
-  );
-  --sld-color-primary: color-mix(in srgb, var(--sld-color-foreground) 60%, #4caf50);
-  --sld-color-secondary: color-mix(in srgb, var(--sld-color-foreground) 80%, #2196f3);
-  --sld-color-tertiary: color-mix(in srgb, var(--sld-color-foreground) 70%, #ffc107);
-  --sld-color-disabled: color-mix(
-      in srgb,
-      var(--sld-color-foreground) 20%,
-      var(--sld-color-background)
-  );
-  --sld-color-disabled-border: color-mix(
-      in srgb,
-      var(--sld-color-foreground) 30%,
-      var(--sld-color-background)
-  );
-  --sld-background-disabled: color-mix(
-      in srgb,
-      var(--sld-color-background) 90%,
-      var(--sld-color-foreground)
-  );
-}
-
-:root.dark,
-:root[data-theme=dark],
-body[data-theme=dark],
-:root[theme=dark] {
-  --sld-color-foreground: #ffffff;
-  --sld-color-background: #27323a;
-}
-
-:root {
-  --sld-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);
-  --sld-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);
-  --sld-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
-  --sld-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);
-  --sld-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 {
-  --sld-color-discrete: #ccc;
-  --sld-color-success: #075c07;
-  --sld-color-info: #ffd324;
-  --sld-color-warning: #b49104;
-  --sld-color-alert: #cc5c00;
-  --sld-color-error: #cc0000;
-}
-
-:root {
-  /* alpha  foreground */
-  --sld-color-foreground-alpha-low: color-mix(in srgb, var(--sld-color-foreground), transparent 10%);
-  --sld-color-foreground-alpha-mid: color-mix(in srgb, var(--sld-color-foreground), transparent 60%);
-  --sld-color-foreground-alpha-high: color-mix(in srgb, var(--sld-color-foreground), transparent 80%);
-  /* alpha  background */
-  --sld-color-background-alpha-low: color-mix(in srgb, var(--sld-color-background), transparent 10%);
-  --sld-color-background-alpha-mid: color-mix(in srgb, var(--sld-color-background), transparent 60%);
-  --sld-color-background-alpha-high: color-mix(in srgb, var(--sld-color-background), transparent 80%);
-  /* alpha  primary */
-  --sld-color-primary-alpha-low: color-mix(in srgb, var(--sld-color-primary), transparent 10%);
-  --sld-color-primary-alpha-mid: color-mix(in srgb, var(--sld-color-primary), transparent 60%);
-  --sld-color-primary-alpha-high: color-mix(in srgb, var(--sld-color-primary), transparent 80%);
-  /* alpha  secondary */
-  --sld-color-secondary-alpha-low: color-mix(in srgb, var(--sld-color-secondary), transparent 10%);
-  --sld-color-secondary-alpha-mid: color-mix(in srgb, var(--sld-color-secondary), transparent 60%);
-  --sld-color-secondary-alpha-high: color-mix(in srgb, var(--sld-color-secondary), transparent 80%);
-  /* alpha  tertiary */
-  --sld-color-tertiary-alpha-low: color-mix(in srgb, var(--sld-color-tertiary), transparent 10%);
-  --sld-color-tertiary-alpha-mid: color-mix(in srgb, var(--sld-color-tertiary), transparent 60%);
-  --sld-color-tertiary-alpha-high: color-mix(in srgb, var(--sld-color-tertiary), transparent 80%);
-  /* darken  foreground */
-  --sld-color-foreground-darken-low: color-mix(in srgb, var(--sld-color-foreground), black 10%);
-  --sld-color-foreground-darken-mid: color-mix(in srgb, var(--sld-color-foreground), black 30%);
-  --sld-color-foreground-darken-high: color-mix(in srgb, var(--sld-color-foreground), black 60%);
-  /* darken  background */
-  --sld-color-background-darken-low: color-mix(in srgb, var(--sld-color-background), black 10%);
-  --sld-color-background-darken-mid: color-mix(in srgb, var(--sld-color-background), black 30%);
-  --sld-color-background-darken-high: color-mix(in srgb, var(--sld-color-background), black 60%);
-  /* darken  primary */
-  --sld-color-primary-darken-low: color-mix(in srgb, var(--sld-color-primary), black 10%);
-  --sld-color-primary-darken-mid: color-mix(in srgb, var(--sld-color-primary), black 30%);
-  --sld-color-primary-darken-high: color-mix(in srgb, var(--sld-color-primary), black 60%);
-  /* darken  secondary */
-  --sld-color-secondary-darken-low: color-mix(in srgb, var(--sld-color-secondary), black 10%);
-  --sld-color-secondary-darken-mid: color-mix(in srgb, var(--sld-color-secondary), black 30%);
-  --sld-color-secondary-darken-high: color-mix(in srgb, var(--sld-color-secondary), black 60%);
-  /* darken  tertiary */
-  --sld-color-tertiary-darken-low: color-mix(in srgb, var(--sld-color-tertiary), black 10%);
-  --sld-color-tertiary-darken-mid: color-mix(in srgb, var(--sld-color-tertiary), black 30%);
-  --sld-color-tertiary-darken-high: color-mix(in srgb, var(--sld-color-tertiary), black 60%);
-  /* lighten  foreground */
-  --sld-color-foreground-lighten-low: color-mix(in srgb, var(--sld-color-foreground), white 10%);
-  --sld-color-foreground-lighten-mid: color-mix(in srgb, var(--sld-color-foreground), white 30%);
-  --sld-color-foreground-lighten-high: color-mix(in srgb, var(--sld-color-foreground), white 60%);
-  /* lighten  background */
-  --sld-color-background-lighten-low: color-mix(in srgb, var(--sld-color-background), white 10%);
-  --sld-color-background-lighten-mid: color-mix(in srgb, var(--sld-color-background), white 30%);
-  --sld-color-background-lighten-high: color-mix(in srgb, var(--sld-color-background), white 60%);
-  /* lighten  primary */
-  --sld-color-primary-lighten-low: color-mix(in srgb, var(--sld-color-primary), white 10%);
-  --sld-color-primary-lighten-mid: color-mix(in srgb, var(--sld-color-primary), white 30%);
-  --sld-color-primary-lighten-high: color-mix(in srgb, var(--sld-color-primary), white 60%);
-  /* lighten  secondary */
-  --sld-color-secondary-lighten-low: color-mix(in srgb, var(--sld-color-secondary), white 10%);
-  --sld-color-secondary-lighten-mid: color-mix(in srgb, var(--sld-color-secondary), white 30%);
-  --sld-color-secondary-lighten-high: color-mix(in srgb, var(--sld-color-secondary), white 60%);
-  /* lighten  tertiary */
-  --sld-color-tertiary-lighten-low: color-mix(in srgb, var(--sld-color-tertiary), white 10%);
-  --sld-color-tertiary-lighten-mid: color-mix(in srgb, var(--sld-color-tertiary), white 30%);
-  --sld-color-tertiary-lighten-high: color-mix(in srgb, var(--sld-color-tertiary), white 60%);
-  /* alpha  discrete */
-  --sld-color-discrete-alpha-low: color-mix(in srgb, var(--sld-color-discrete), transparent 10%);
-  --sld-color-discrete-alpha-mid: color-mix(in srgb, var(--sld-color-discrete), transparent 30%);
-  --sld-color-discrete-alpha-high: color-mix(in srgb, var(--sld-color-discrete), transparent 60%);
-  /* alpha  success */
-  --sld-color-success-alpha-low: color-mix(in srgb, var(--sld-color-success), transparent 10%);
-  --sld-color-success-alpha-mid: color-mix(in srgb, var(--sld-color-success), transparent 30%);
-  --sld-color-success-alpha-high: color-mix(in srgb, var(--sld-color-success), transparent 60%);
-  /* alpha  info */
-  --sld-color-info-alpha-low: color-mix(in srgb, var(--sld-color-info), transparent 10%);
-  --sld-color-info-alpha-mid: color-mix(in srgb, var(--sld-color-info), transparent 30%);
-  --sld-color-info-alpha-high: color-mix(in srgb, var(--sld-color-info), transparent 60%);
-  /* alpha  warning */
-  --sld-color-warning-alpha-low: color-mix(in srgb, var(--sld-color-warning), transparent 10%);
-  --sld-color-warning-alpha-mid: color-mix(in srgb, var(--sld-color-warning), transparent 30%);
-  --sld-color-warning-alpha-high: color-mix(in srgb, var(--sld-color-warning), transparent 60%);
-  /* alpha  alert */
-  --sld-color-alert-alpha-low: color-mix(in srgb, var(--sld-color-alert), transparent 10%);
-  --sld-color-alert-alpha-mid: color-mix(in srgb, var(--sld-color-alert), transparent 30%);
-  --sld-color-alert-alpha-high: color-mix(in srgb, var(--sld-color-alert), transparent 60%);
-  /* alpha  error */
-  --sld-color-error-alpha-low: color-mix(in srgb, var(--sld-color-error), transparent 10%);
-  --sld-color-error-alpha-mid: color-mix(in srgb, var(--sld-color-error), transparent 30%);
-  --sld-color-error-alpha-high: color-mix(in srgb, var(--sld-color-error), transparent 60%);
-  /* darken  discrete */
-  --sld-color-discrete-darken-low: color-mix(in srgb, var(--sld-color-discrete), black 10%);
-  --sld-color-discrete-darken-mid: color-mix(in srgb, var(--sld-color-discrete), black 30%);
-  --sld-color-discrete-darken-high: color-mix(in srgb, var(--sld-color-discrete), black 60%);
-  /* darken  success */
-  --sld-color-success-darken-low: color-mix(in srgb, var(--sld-color-success), black 10%);
-  --sld-color-success-darken-mid: color-mix(in srgb, var(--sld-color-success), black 30%);
-  --sld-color-success-darken-high: color-mix(in srgb, var(--sld-color-success), black 60%);
-  /* darken  info */
-  --sld-color-info-darken-low: color-mix(in srgb, var(--sld-color-info), black 10%);
-  --sld-color-info-darken-mid: color-mix(in srgb, var(--sld-color-info), black 30%);
-  --sld-color-info-darken-high: color-mix(in srgb, var(--sld-color-info), black 60%);
-  /* darken  warning */
-  --sld-color-warning-darken-low: color-mix(in srgb, var(--sld-color-warning), black 10%);
-  --sld-color-warning-darken-mid: color-mix(in srgb, var(--sld-color-warning), black 30%);
-  --sld-color-warning-darken-high: color-mix(in srgb, var(--sld-color-warning), black 60%);
-  /* darken  alert */
-  --sld-color-alert-darken-low: color-mix(in srgb, var(--sld-color-alert), black 10%);
-  --sld-color-alert-darken-mid: color-mix(in srgb, var(--sld-color-alert), black 30%);
-  --sld-color-alert-darken-high: color-mix(in srgb, var(--sld-color-alert), black 60%);
-  /* darken  error */
-  --sld-color-error-darken-low: color-mix(in srgb, var(--sld-color-error), black 10%);
-  --sld-color-error-darken-mid: color-mix(in srgb, var(--sld-color-error), black 30%);
-  --sld-color-error-darken-high: color-mix(in srgb, var(--sld-color-error), black 60%);
-  /* lighten  discrete */
-  --sld-color-discrete-lighten-low: color-mix(in srgb, var(--sld-color-discrete), white 10%);
-  --sld-color-discrete-lighten-mid: color-mix(in srgb, var(--sld-color-discrete), white 30%);
-  --sld-color-discrete-lighten-high: color-mix(in srgb, var(--sld-color-discrete), white 60%);
-  /* lighten  success */
-  --sld-color-success-lighten-low: color-mix(in srgb, var(--sld-color-success), white 10%);
-  --sld-color-success-lighten-mid: color-mix(in srgb, var(--sld-color-success), white 30%);
-  --sld-color-success-lighten-high: color-mix(in srgb, var(--sld-color-success), white 60%);
-  /* lighten  info */
-  --sld-color-info-lighten-low: color-mix(in srgb, var(--sld-color-info), white 10%);
-  --sld-color-info-lighten-mid: color-mix(in srgb, var(--sld-color-info), white 30%);
-  --sld-color-info-lighten-high: color-mix(in srgb, var(--sld-color-info), white 60%);
-  /* lighten  warning */
-  --sld-color-warning-lighten-low: color-mix(in srgb, var(--sld-color-warning), white 10%);
-  --sld-color-warning-lighten-mid: color-mix(in srgb, var(--sld-color-warning), white 30%);
-  --sld-color-warning-lighten-high: color-mix(in srgb, var(--sld-color-warning), white 60%);
-  /* lighten  alert */
-  --sld-color-alert-lighten-low: color-mix(in srgb, var(--sld-color-alert), white 10%);
-  --sld-color-alert-lighten-mid: color-mix(in srgb, var(--sld-color-alert), white 30%);
-  --sld-color-alert-lighten-high: color-mix(in srgb, var(--sld-color-alert), white 60%);
-  /* lighten  error */
-  --sld-color-error-lighten-low: color-mix(in srgb, var(--sld-color-error), white 10%);
-  --sld-color-error-lighten-mid: color-mix(in srgb, var(--sld-color-error), white 30%);
-  --sld-color-error-lighten-high: color-mix(in srgb, var(--sld-color-error), white 60%);
-}
-
-/* presets */
-:root {
-  --sld-color-border: var(--sld-color-foreground-alpha-low);
-  --sld-hover-background-color: var(--sld-color-secondary-alpha-mid);
-  --sld-hover-border-color: var(--sld-color-foreground-alpha-high);
-  --sld-hover-shadow: var(--sld-elevation-3);
-  --sld-selected-background-color: var(--sld-color-primary-alpha-mid);
-  --sld-selected-border-color: var(--sld-color-primary);
-  --sld-selected-shadow: var(--sld-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;
+:root {
+  transition: all 0.3s ease-out;
+}
+
+:root {
+  --sld-radius-tiny: 2px;
+  --sld-radius-small: 4px;
+  --sld-radius-med: 8px;
+  --sld-radius-large: 16px;
+  --sld-pad-tiny: 0.25rem;
+  --sld-pad-small: 0.5rem;
+  --sld-pad-med: 1rem;
+  --sld-pad-large: 1.5rem;
+  --sld-gap-tiny: 0.25rem;
+  --sld-gap-mini: 0.4rem;
+  --sld-gap-small: 0.5rem;
+  --sld-gap-med: 1rem;
+  --sld-gap-large: 1.5rem;
+  --sld-gap-default: 0.5rem;
+  --sld-gutter-tiny: 0.25rem;
+  --sld-gutter-mini: 0.5rem;
+  --sld-gutter-small: 1rem;
+  --sld-gutter-med: 2rem;
+  --sld-gutter-kind: 3rem;
+  --sld-gutter-default: 1rem;
+  --sld-tall-tiny: 1rem;
+  --sld-tall-mini: 1.5rem;
+  --sld-tall-small: 2.5rem;
+  --sld-tall-med: 3.5rem;
+  --sld-tall-kind: 4rem;
+  --sld-tall-auto: auto;
+  --sld-tall-default: 2.5rem;
+  --sld-width-tiny: 2rem;
+  --sld-width-mini: 3rem;
+  --sld-width-small: 10rem;
+  --sld-width-med: 14rem;
+  --sld-width-kind: 20rem;
+  --sld-width-full: 100%;
+  --sld-width-auto: auto;
+  --sld-width-default: 10rem;
+}
+
+: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 {
+  --sld-color-foreground: #333333;
+  --sld-color-background: #ffffff;
+  --sld-color-paper: color-mix(
+      in srgb,
+      var(--sld-color-background) 90%,
+      var(--sld-color-foreground) 10%
+  );
+  --sld-color-primary: color-mix(in srgb, var(--sld-color-foreground) 60%, #4caf50);
+  --sld-color-secondary: color-mix(in srgb, var(--sld-color-foreground) 80%, #2196f3);
+  --sld-color-tertiary: color-mix(in srgb, var(--sld-color-foreground) 70%, #ffc107);
+  --sld-color-disabled: color-mix(
+      in srgb,
+      var(--sld-color-foreground) 20%,
+      var(--sld-color-background)
+  );
+  --sld-color-disabled-border: color-mix(
+      in srgb,
+      var(--sld-color-foreground) 30%,
+      var(--sld-color-background)
+  );
+  --sld-background-disabled: color-mix(
+      in srgb,
+      var(--sld-color-background) 90%,
+      var(--sld-color-foreground)
+  );
+}
+
+:root.dark,
+:root[data-theme=dark],
+body[data-theme=dark],
+:root[theme=dark] {
+  --sld-color-foreground: #ffffff;
+  --sld-color-background: #27323a;
+}
+
+:root {
+  --sld-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);
+  --sld-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);
+  --sld-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
+  --sld-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);
+  --sld-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 {
+  --sld-color-discrete: #ccc;
+  --sld-color-success: #075c07;
+  --sld-color-info: #ffd324;
+  --sld-color-warning: #b49104;
+  --sld-color-alert: #cc5c00;
+  --sld-color-error: #cc0000;
+}
+
+:root {
+  /* alpha  foreground */
+  --sld-color-foreground-alpha-low: color-mix(in srgb, var(--sld-color-foreground), transparent 10%);
+  --sld-color-foreground-alpha-mid: color-mix(in srgb, var(--sld-color-foreground), transparent 60%);
+  --sld-color-foreground-alpha-high: color-mix(in srgb, var(--sld-color-foreground), transparent 80%);
+  /* alpha  background */
+  --sld-color-background-alpha-low: color-mix(in srgb, var(--sld-color-background), transparent 10%);
+  --sld-color-background-alpha-mid: color-mix(in srgb, var(--sld-color-background), transparent 60%);
+  --sld-color-background-alpha-high: color-mix(in srgb, var(--sld-color-background), transparent 80%);
+  /* alpha  primary */
+  --sld-color-primary-alpha-low: color-mix(in srgb, var(--sld-color-primary), transparent 10%);
+  --sld-color-primary-alpha-mid: color-mix(in srgb, var(--sld-color-primary), transparent 60%);
+  --sld-color-primary-alpha-high: color-mix(in srgb, var(--sld-color-primary), transparent 80%);
+  /* alpha  secondary */
+  --sld-color-secondary-alpha-low: color-mix(in srgb, var(--sld-color-secondary), transparent 10%);
+  --sld-color-secondary-alpha-mid: color-mix(in srgb, var(--sld-color-secondary), transparent 60%);
+  --sld-color-secondary-alpha-high: color-mix(in srgb, var(--sld-color-secondary), transparent 80%);
+  /* alpha  tertiary */
+  --sld-color-tertiary-alpha-low: color-mix(in srgb, var(--sld-color-tertiary), transparent 10%);
+  --sld-color-tertiary-alpha-mid: color-mix(in srgb, var(--sld-color-tertiary), transparent 60%);
+  --sld-color-tertiary-alpha-high: color-mix(in srgb, var(--sld-color-tertiary), transparent 80%);
+  /* darken  foreground */
+  --sld-color-foreground-darken-low: color-mix(in srgb, var(--sld-color-foreground), black 10%);
+  --sld-color-foreground-darken-mid: color-mix(in srgb, var(--sld-color-foreground), black 30%);
+  --sld-color-foreground-darken-high: color-mix(in srgb, var(--sld-color-foreground), black 60%);
+  /* darken  background */
+  --sld-color-background-darken-low: color-mix(in srgb, var(--sld-color-background), black 10%);
+  --sld-color-background-darken-mid: color-mix(in srgb, var(--sld-color-background), black 30%);
+  --sld-color-background-darken-high: color-mix(in srgb, var(--sld-color-background), black 60%);
+  /* darken  primary */
+  --sld-color-primary-darken-low: color-mix(in srgb, var(--sld-color-primary), black 10%);
+  --sld-color-primary-darken-mid: color-mix(in srgb, var(--sld-color-primary), black 30%);
+  --sld-color-primary-darken-high: color-mix(in srgb, var(--sld-color-primary), black 60%);
+  /* darken  secondary */
+  --sld-color-secondary-darken-low: color-mix(in srgb, var(--sld-color-secondary), black 10%);
+  --sld-color-secondary-darken-mid: color-mix(in srgb, var(--sld-color-secondary), black 30%);
+  --sld-color-secondary-darken-high: color-mix(in srgb, var(--sld-color-secondary), black 60%);
+  /* darken  tertiary */
+  --sld-color-tertiary-darken-low: color-mix(in srgb, var(--sld-color-tertiary), black 10%);
+  --sld-color-tertiary-darken-mid: color-mix(in srgb, var(--sld-color-tertiary), black 30%);
+  --sld-color-tertiary-darken-high: color-mix(in srgb, var(--sld-color-tertiary), black 60%);
+  /* lighten  foreground */
+  --sld-color-foreground-lighten-low: color-mix(in srgb, var(--sld-color-foreground), white 10%);
+  --sld-color-foreground-lighten-mid: color-mix(in srgb, var(--sld-color-foreground), white 30%);
+  --sld-color-foreground-lighten-high: color-mix(in srgb, var(--sld-color-foreground), white 60%);
+  /* lighten  background */
+  --sld-color-background-lighten-low: color-mix(in srgb, var(--sld-color-background), white 10%);
+  --sld-color-background-lighten-mid: color-mix(in srgb, var(--sld-color-background), white 30%);
+  --sld-color-background-lighten-high: color-mix(in srgb, var(--sld-color-background), white 60%);
+  /* lighten  primary */
+  --sld-color-primary-lighten-low: color-mix(in srgb, var(--sld-color-primary), white 10%);
+  --sld-color-primary-lighten-mid: color-mix(in srgb, var(--sld-color-primary), white 30%);
+  --sld-color-primary-lighten-high: color-mix(in srgb, var(--sld-color-primary), white 60%);
+  /* lighten  secondary */
+  --sld-color-secondary-lighten-low: color-mix(in srgb, var(--sld-color-secondary), white 10%);
+  --sld-color-secondary-lighten-mid: color-mix(in srgb, var(--sld-color-secondary), white 30%);
+  --sld-color-secondary-lighten-high: color-mix(in srgb, var(--sld-color-secondary), white 60%);
+  /* lighten  tertiary */
+  --sld-color-tertiary-lighten-low: color-mix(in srgb, var(--sld-color-tertiary), white 10%);
+  --sld-color-tertiary-lighten-mid: color-mix(in srgb, var(--sld-color-tertiary), white 30%);
+  --sld-color-tertiary-lighten-high: color-mix(in srgb, var(--sld-color-tertiary), white 60%);
+  /* alpha  discrete */
+  --sld-color-discrete-alpha-low: color-mix(in srgb, var(--sld-color-discrete), transparent 10%);
+  --sld-color-discrete-alpha-mid: color-mix(in srgb, var(--sld-color-discrete), transparent 30%);
+  --sld-color-discrete-alpha-high: color-mix(in srgb, var(--sld-color-discrete), transparent 60%);
+  /* alpha  success */
+  --sld-color-success-alpha-low: color-mix(in srgb, var(--sld-color-success), transparent 10%);
+  --sld-color-success-alpha-mid: color-mix(in srgb, var(--sld-color-success), transparent 30%);
+  --sld-color-success-alpha-high: color-mix(in srgb, var(--sld-color-success), transparent 60%);
+  /* alpha  info */
+  --sld-color-info-alpha-low: color-mix(in srgb, var(--sld-color-info), transparent 10%);
+  --sld-color-info-alpha-mid: color-mix(in srgb, var(--sld-color-info), transparent 30%);
+  --sld-color-info-alpha-high: color-mix(in srgb, var(--sld-color-info), transparent 60%);
+  /* alpha  warning */
+  --sld-color-warning-alpha-low: color-mix(in srgb, var(--sld-color-warning), transparent 10%);
+  --sld-color-warning-alpha-mid: color-mix(in srgb, var(--sld-color-warning), transparent 30%);
+  --sld-color-warning-alpha-high: color-mix(in srgb, var(--sld-color-warning), transparent 60%);
+  /* alpha  alert */
+  --sld-color-alert-alpha-low: color-mix(in srgb, var(--sld-color-alert), transparent 10%);
+  --sld-color-alert-alpha-mid: color-mix(in srgb, var(--sld-color-alert), transparent 30%);
+  --sld-color-alert-alpha-high: color-mix(in srgb, var(--sld-color-alert), transparent 60%);
+  /* alpha  error */
+  --sld-color-error-alpha-low: color-mix(in srgb, var(--sld-color-error), transparent 10%);
+  --sld-color-error-alpha-mid: color-mix(in srgb, var(--sld-color-error), transparent 30%);
+  --sld-color-error-alpha-high: color-mix(in srgb, var(--sld-color-error), transparent 60%);
+  /* darken  discrete */
+  --sld-color-discrete-darken-low: color-mix(in srgb, var(--sld-color-discrete), black 10%);
+  --sld-color-discrete-darken-mid: color-mix(in srgb, var(--sld-color-discrete), black 30%);
+  --sld-color-discrete-darken-high: color-mix(in srgb, var(--sld-color-discrete), black 60%);
+  /* darken  success */
+  --sld-color-success-darken-low: color-mix(in srgb, var(--sld-color-success), black 10%);
+  --sld-color-success-darken-mid: color-mix(in srgb, var(--sld-color-success), black 30%);
+  --sld-color-success-darken-high: color-mix(in srgb, var(--sld-color-success), black 60%);
+  /* darken  info */
+  --sld-color-info-darken-low: color-mix(in srgb, var(--sld-color-info), black 10%);
+  --sld-color-info-darken-mid: color-mix(in srgb, var(--sld-color-info), black 30%);
+  --sld-color-info-darken-high: color-mix(in srgb, var(--sld-color-info), black 60%);
+  /* darken  warning */
+  --sld-color-warning-darken-low: color-mix(in srgb, var(--sld-color-warning), black 10%);
+  --sld-color-warning-darken-mid: color-mix(in srgb, var(--sld-color-warning), black 30%);
+  --sld-color-warning-darken-high: color-mix(in srgb, var(--sld-color-warning), black 60%);
+  /* darken  alert */
+  --sld-color-alert-darken-low: color-mix(in srgb, var(--sld-color-alert), black 10%);
+  --sld-color-alert-darken-mid: color-mix(in srgb, var(--sld-color-alert), black 30%);
+  --sld-color-alert-darken-high: color-mix(in srgb, var(--sld-color-alert), black 60%);
+  /* darken  error */
+  --sld-color-error-darken-low: color-mix(in srgb, var(--sld-color-error), black 10%);
+  --sld-color-error-darken-mid: color-mix(in srgb, var(--sld-color-error), black 30%);
+  --sld-color-error-darken-high: color-mix(in srgb, var(--sld-color-error), black 60%);
+  /* lighten  discrete */
+  --sld-color-discrete-lighten-low: color-mix(in srgb, var(--sld-color-discrete), white 10%);
+  --sld-color-discrete-lighten-mid: color-mix(in srgb, var(--sld-color-discrete), white 30%);
+  --sld-color-discrete-lighten-high: color-mix(in srgb, var(--sld-color-discrete), white 60%);
+  /* lighten  success */
+  --sld-color-success-lighten-low: color-mix(in srgb, var(--sld-color-success), white 10%);
+  --sld-color-success-lighten-mid: color-mix(in srgb, var(--sld-color-success), white 30%);
+  --sld-color-success-lighten-high: color-mix(in srgb, var(--sld-color-success), white 60%);
+  /* lighten  info */
+  --sld-color-info-lighten-low: color-mix(in srgb, var(--sld-color-info), white 10%);
+  --sld-color-info-lighten-mid: color-mix(in srgb, var(--sld-color-info), white 30%);
+  --sld-color-info-lighten-high: color-mix(in srgb, var(--sld-color-info), white 60%);
+  /* lighten  warning */
+  --sld-color-warning-lighten-low: color-mix(in srgb, var(--sld-color-warning), white 10%);
+  --sld-color-warning-lighten-mid: color-mix(in srgb, var(--sld-color-warning), white 30%);
+  --sld-color-warning-lighten-high: color-mix(in srgb, var(--sld-color-warning), white 60%);
+  /* lighten  alert */
+  --sld-color-alert-lighten-low: color-mix(in srgb, var(--sld-color-alert), white 10%);
+  --sld-color-alert-lighten-mid: color-mix(in srgb, var(--sld-color-alert), white 30%);
+  --sld-color-alert-lighten-high: color-mix(in srgb, var(--sld-color-alert), white 60%);
+  /* lighten  error */
+  --sld-color-error-lighten-low: color-mix(in srgb, var(--sld-color-error), white 10%);
+  --sld-color-error-lighten-mid: color-mix(in srgb, var(--sld-color-error), white 30%);
+  --sld-color-error-lighten-high: color-mix(in srgb, var(--sld-color-error), white 60%);
+}
+
+/* presets */
+:root {
+  --sld-color-border: var(--sld-color-foreground-alpha-low);
+  --sld-hover-background-color: var(--sld-color-secondary-alpha-mid);
+  --sld-hover-border-color: var(--sld-color-foreground-alpha-high);
+  --sld-hover-shadow: var(--sld-elevation-3);
+  --sld-selected-background-color: var(--sld-color-primary-alpha-mid);
+  --sld-selected-border-color: var(--sld-color-primary);
+  --sld-selected-shadow: var(--sld-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;
 }