@streamscloud/embeddable 12.1.0 → 12.2.0

package/dist/ui/button/resources/button-types.js

@@ -6,7 +6,6 @@ export var ButtonStyle;
     ButtonStyle["White"] = "white";
     ButtonStyle["Gray"] = "gray";
     ButtonStyle["Green"] = "green";
-    ButtonStyle["Black"] = "black";
     ButtonStyle["TextOnly"] = "text-only";
     ButtonStyle["TransparentSuccess"] = "transparent-success";
     ButtonStyle["TransparentPrimary"] = "transparent-primary";

package/dist/ui/icon/cmp.icon.svelte

@@ -32,50 +32,30 @@ let { src, color = null } = $props();
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-color: var(--icon--stroke-color);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
+  /*--_icon--filter: drop-shadow(1px 1px 0 rgb(from var(--_icon--color) calc(255 - r) calc(255 - g) calc(255 - b) / 90%));*/
   --_icon--filter: var(--icon--filter, none);
   display: contents;
 }
 .icon--white {
-  --_icon--color: #ffffff;
-}
-:global([data-theme="dark"]) .icon--white {
-  --_icon--color: #ffffff;
+  --_icon--color: var(--sc-mc-color--icon-overlay);
 }
 .icon--text {
-  --_icon--color: #2e2e2e;
-}
-:global([data-theme="dark"]) .icon--text {
-  --_icon--color: #ffffff;
+  --_icon--color: var(--sc-mc-color--text-primary);
 }
 .icon--gray {
-  --_icon--color: #6b7280;
-}
-:global([data-theme="dark"]) .icon--gray {
-  --_icon--color: #6b7280;
+  --_icon--color: var(--sc-mc-color--icon-secondary);
 }
 .icon--green {
-  --_icon--color: #0cce6b;
-}
-:global([data-theme="dark"]) .icon--green {
-  --_icon--color: #0cce6b;
+  --_icon--color: var(--sc-mc-color--icon-success);
 }
 .icon--red {
-  --_icon--color: #e71d36;
-}
-:global([data-theme="dark"]) .icon--red {
-  --_icon--color: #e71d36;
+  --_icon--color: var(--sc-mc-color--icon-destructive);
 }
 .icon--orange {
-  --_icon--color: #ffa62b;
-}
-:global([data-theme="dark"]) .icon--orange {
-  --_icon--color: #ffa62b;
+  --_icon--color: var(--sc-mc-color--icon-warning);
 }
 .icon--blue {
-  --_icon--color: #144ab0;
-}
-:global([data-theme="dark"]) .icon--blue {
-  --_icon--color: #91b3f3;
+  --_icon--color: var(--sc-mc-color--icon-brand);
 }
 .icon :global(svg) {
   display: inline-block;

package/dist/ui/image/cmp.image-rounded.svelte

@@ -27,19 +27,16 @@ let { src, alt = '', noBorders = false, on } = $props();
     --image--rounded--image--border-radius,
     calc(var(--image--rounded--inner--border-radius_) - var(--image--rounded--inner--border-width_))
   );
-  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, #ffffff);
+  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, var(--sc-mc-color--bg-card));
   --image--rounded--inner--border-radius_: var(
     --image--rounded--inner--border-radius,
     calc(var(--image--rounded--outer--border-radius_) - var(--image--rounded--outer--border-width_))
   );
   --image--rounded--inner--border-width_: var(--image--rounded--inner--border-width, 4px);
-  --image--rounded--outer--border-color_: var(
-    --image--rounded--outer--border-color,
-    linear-gradient(#144ab0, #dfe9fb)
-  );
+  --image--rounded--outer--border-color_: var(--image--rounded--outer--border-color, var(--sc-mc-color--bg-card));
   --image--rounded--outer--border-radius_: var(--image--rounded--outer--border-radius, 0);
   --image--rounded--outer--border-width_: var(--image--rounded--outer--border-width, 2px);
-  --image--rounded--stub--background_: var(--image--rounded--stub--background, #f3f4f6);
+  --image--rounded--stub--background_: var(--image--rounded--stub--background, var(--sc-mc-color--bg-image));
   width: var(--image--rounded--width_);
   height: var(--image--rounded--height_);
   border-radius: var(--image--rounded--outer--border-radius_);
@@ -47,10 +44,6 @@ let { src, alt = '', noBorders = false, on } = $props();
   background: var(--image--rounded--outer--border-color_);
   overflow: hidden;
 }
-:global([data-theme="dark"]) .rounded-img {
-  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, #000000);
-  --image--rounded--stub--background_: var(--image--rounded--stub--background, #374151);
-}
 .rounded-img--stub {
   background: var(--image--rounded--stub--background_);
 }

package/dist/ui/image/cmp.image-stub.svelte

@@ -18,7 +18,7 @@ import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
   }
 }
 .image-stub {
-  --_image-stub--color: var(--image-stub--color, #d1d5db);
+  --_image-stub--color: var(--image-stub--color, var(--sc-mc-color--bg-image));
   width: 100%;
   height: 100%;
   z-index: 2;
@@ -28,7 +28,4 @@ import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
   color: var(--_image-stub--color);
   border: 1px solid var(--_image-stub--color);
   border-radius: 0.25rem;
-}
-:global([data-theme="dark"]) .image-stub {
-  --_image-stub--color: var(--image-stub--color, #374151);
 }</style>

package/dist/ui/image/cmp.image.svelte

@@ -49,7 +49,7 @@ const onLoadError = () => {
   --_image--background: var(--image--background, transparent);
   --_image--border-radius: var(--image--border-radius, 0);
   --_image--object-fit: var(--image--object-fit, cover);
-  --_image--stub--background: var(--image--stub--background, #e5e7eb);
+  --_image--stub--background: var(--image--stub--background, var(--sc-mc-color--bg-image));
   position: relative;
   width: 100%;
   height: 100%;
@@ -57,9 +57,6 @@ const onLoadError = () => {
   border-radius: var(--_image--border-radius);
   background: var(--_image--background);
 }
-:global([data-theme="dark"]) .image {
-  --_image--stub--background: var(--image--stub--background, #374151);
-}
 .image__img {
   width: 100%;
   height: 100%;

package/dist/ui/loading/cmp.loading.svelte

@@ -43,7 +43,7 @@ onMount(() => {
 }
 
 .la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, #144ab0);
+  --loading--spinner-color_: var(--loading--spinner-color, var(--sc-mc-color--text-brand));
   color: var(--loading--spinner-color_);
   display: block;
   opacity: 0;
@@ -51,9 +51,6 @@ onMount(() => {
   height: 2em;
   z-index: 10;
 }
-:global([data-theme="dark"]) .la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, #5a8dec);
-}
 .la-ball-clip-rotate--visible {
   opacity: 1;
 }

package/dist/ui/player/button/cmp.mobile-player-buttons-group.svelte

@@ -35,9 +35,9 @@ let { actions } = $props();
   justify-content: center;
   align-items: center;
   padding: 1rem;
-  --icon--color: #ffffff;
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 2rem;
-  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
 }
 .mobile-player-buttons-group__action-icon {
   display: block;

package/dist/ui/player/button/cmp.mobile-player-buttons-group.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { PlayerButtonsGroupAction } from './types';
+import type { PlayerButtonDef } from './types';
 type Props = {
-    actions: PlayerButtonsGroupAction[];
+    actions: PlayerButtonDef[];
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/player/button/cmp.player-button.svelte

@@ -30,8 +30,11 @@ const styles = $derived.by(() => {
   }
 }
 .player-button {
-  --_player-button--color: var(--player-button--color, rgb(from #000000 r g b / 95%));
-  --_player-button--color--inactive: var(--player-button--color--inactive, rgb(from var(--_player-button--color, #000000) r g b / 60%));
+  --_player-button--color: var(--player-button--color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
+  --_player-button--color--inactive: var(
+    --player-button--color--inactive,
+    rgb(from var(--_player-button--color, var(--sc-mc-color--button-player)) r g b / 60%)
+  );
   --_player-button--icon-scale: 1;
   pointer-events: auto;
   padding: 0.625rem;
@@ -41,7 +44,8 @@ const styles = $derived.by(() => {
   background-color: var(--_player-button--color--inactive);
   transition: background-color 0.5s;
   border-radius: 50%;
-  --icon--color: #ffffff;
+  color: var(--sc-mc-color--text-white);
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }

package/dist/ui/player/button/cmp.player-buttons-group.svelte

@@ -34,10 +34,10 @@ const styles = $derived.by(() => {
   }
 }
 .player-buttons-group {
-  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from #000000 r g b / 95%));
+  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
   --_player-buttons-group--background-color: var(
     --player-buttons-group--background-color,
-    rgb(from var(--_player-buttons-group--active-color, #000000) r g b / 60%)
+    rgb(from var(--_player-buttons-group--active-color, var(--sc-mc-color--button-player)) r g b / 60%)
   );
   cursor: pointer;
   display: flex;
@@ -56,7 +56,8 @@ const styles = $derived.by(() => {
   align-items: center;
   padding: 0.5625rem;
   border-radius: 1.25rem;
-  --icon--color: #ffffff;
+  color: var(--sc-mc-color--text-white);
+  --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
   transition: background-color 0.5s;
 }

package/dist/ui/player/button/cmp.player-buttons-group.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { PlayerButtonsGroupAction } from './types';
+import type { PlayerButtonDef } from './types';
 type Props = {
     activeColor: string | null;
     backgroundColor: string | null;
-    actions: PlayerButtonsGroupAction[];
+    actions: PlayerButtonDef[];
     scaleEffect?: boolean;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/player/button/index.d.ts

@@ -1,4 +1,4 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
 export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
-export type { PlayerButtonsGroupAction } from './types';
+export type { PlayerButtonDef } from './types';

package/dist/ui/player/button/types.d.ts

@@ -1,5 +1,5 @@
 import { IconColor } from '../../icon';
-export type PlayerButtonsGroupAction = {
+export type PlayerButtonDef = {
     icon: string;
     iconColor?: IconColor;
     callback: () => void;

package/dist/ui/player/colors/player-colors.d.ts

@@ -4,6 +4,7 @@ export type PlayerColors = {
     buttonInactive: string | null;
     cardButton: string | null;
     cardBackground: string | null;
+    menuBackground: string | null;
     playerBackground: string | null;
     price: string | null;
     salePrice: string | null;

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">import { Theme } from '../../core/theme';
+let { backgroundDisabled, backgroundImageUrl, backgroundColor, children } = $props();
+const styles = $derived.by(() => {
+    const values = [];
+    if (backgroundImageUrl) {
+        values.push(`--shadow-root--background-image-url: url(${backgroundImageUrl})`);
+    }
+    if (backgroundColor) {
+        values.push(`--shadow-root--background: ${backgroundColor}`);
+    }
+    return values.join(';');
+});
+</script>
+
+<svelte:head>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap" />
+  <meta name="theme-color" content="#242424" />
+  <meta name="color-scheme" content="dark" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+  <style>
+    html,
+    body {
+      background-color: #242424;
+      color-scheme: dark;
+    }
+  </style>
+</svelte:head>
+
+<div
+  class="shadow-root"
+  class:shadow-root--background-enabled={!backgroundDisabled}
+  class:shadow-root--background-active={!backgroundDisabled && backgroundImageUrl && backgroundImageUrl !== 'not-applicable'}
+  class:shadow-root--background-loading={!backgroundDisabled && !backgroundImageUrl}
+  style={styles}
+  data-theme={Theme.get()}>
+  {@render children()}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+:host,
+:global([data-theme="default"]) {
+  /* Backgrounds */
+  --sc-mc-color--bg-screen: #f9fafb;
+  --sc-mc-color--bg-card: #ffffff;
+  --sc-mc-color--bg-panel: #ffffff;
+  --sc-mc-color--bg-image: #d1d5db;
+  /* Borders */
+  --sc-mc-color--border-brand: #144ab0;
+  --sc-mc-color--border-card: #f2f2f2;
+  /* Buttons */
+  --sc-mc-color--button-secondary: #9ca3af;
+  --sc-mc-color--button-player: #272727;
+  /* Icons */
+  --sc-mc-color--icon-brand: #144ab0;
+  --sc-mc-color--icon-destructive: #e71d36;
+  --sc-mc-color--icon-overlay: #ffffff;
+  --sc-mc-color--icon-overlay-shadow: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --sc-mc-color--icon-primary: #1f2937;
+  --sc-mc-color--icon-secondary: #9ca3af;
+  --sc-mc-color--icon-success: #0cce6b;
+  --sc-mc-color--icon-warning: #ffa62b;
+  /* Text */
+  --sc-mc-color--text-brand: #144ab0;
+  --sc-mc-color--text-inverted: #ffffff;
+  --sc-mc-color--text-primary: #000000;
+  --sc-mc-color--text-secondary: #6b7280;
+  --sc-mc-color--text-white: #ffffff;
+  --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  --sc-mc-color--text-inactive: #e5e7eb;
+}
+
+:global([data-theme="dark"]) {
+  /* Backgrounds */
+  --sc-mc-color--bg-screen: #1e1e1e;
+  --sc-mc-color--bg-card: #000000;
+  --sc-mc-color--bg-panel: #000000;
+  --sc-mc-color--bg-image: #374151;
+  /* Borders */
+  --sc-mc-color--border-brand: #5a8dec;
+  --sc-mc-color--border-card: #000000;
+  /* Buttons */
+  --sc-mc-color--button-secondary: #9ca3af;
+  --sc-mc-color--button-player: #000000;
+  /* Icons */
+  --sc-mc-color--icon-brand: #ffffff;
+  --sc-mc-color--icon-destructive: #d4172d;
+  --sc-mc-color--icon-overlay: #ffffff;
+  --sc-mc-color--icon-overlay-shadow: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --sc-mc-color--icon-primary: #1f2937;
+  --sc-mc-color--icon-secondary: #9ca3af;
+  --sc-mc-color--icon-success: #0cce6b;
+  --sc-mc-color--icon-warning: #ffa62b;
+  /* Text */
+  --sc-mc-color--text-brand: #5a8dec;
+  --sc-mc-color--text-inverted: #ffffff;
+  --sc-mc-color--text-primary: #ffffff;
+  --sc-mc-color--text-secondary: #d1d5db;
+  --sc-mc-color--text-white: #ffffff;
+  --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  --sc-mc-color--text-inactive: #d1d5db;
+}
+
+.shadow-root {
+  --_shadow-root--background-color: rgb(from var(--shadow-root--background, var(--sc-mc-color--bg-screen)) r g b);
+  --_shadow-root--shield-color: rgb(from var(--shadow-root--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 50%)) r g b / alpha);
+  --_shadow-root--background-image-url: var(--shadow-root--background-image-url);
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  color: var(--sc-mc-color--text-primary);
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.shadow-root:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(30px);
+  background-color: var(--_shadow-root--shield-color);
+  display: none;
+}
+.shadow-root--background-enabled {
+  background-color: var(--_shadow-root--background-color);
+}
+.shadow-root--background-enabled:before {
+  display: block;
+}
+.shadow-root--background-active {
+  background-image: var(--_shadow-root--background-image-url);
+  background-size: cover;
+  background-blend-mode: multiply;
+}
+.shadow-root--background-loading {
+  background-color: transparent;
+}</style>

package/dist/ui/shadow-dom/colors.scss

@@ -0,0 +1,72 @@
+@use 'src/styles/colors';
+
+:host,
+:global([data-theme='default']) {
+  /* Backgrounds */
+  --sc-mc-color--bg-screen: #{colors.$color-neutral-50};
+  --sc-mc-color--bg-card: #{colors.$color-white};
+  --sc-mc-color--bg-panel: #{colors.$color-white};
+  --sc-mc-color--bg-image: #{colors.$color-neutral-300};
+
+  /* Borders */
+  --sc-mc-color--border-brand: #{colors.$color-primary-500};
+  --sc-mc-color--border-card: #{colors.$color-gray-100};
+
+  /* Buttons */
+  --sc-mc-color--button-secondary: #{colors.$color-neutral-400};
+  --sc-mc-color--button-player: #{colors.$color-dark-500};
+
+  /* Icons */
+  --sc-mc-color--icon-brand: #{colors.$color-primary-500};
+  --sc-mc-color--icon-destructive: #{colors.$color-destructive-500};
+  --sc-mc-color--icon-overlay: #{colors.$color-white};
+  --sc-mc-color--icon-overlay-shadow: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --sc-mc-color--icon-primary: #{colors.$color-neutral-800};
+  --sc-mc-color--icon-secondary: #{colors.$color-neutral-400};
+  --sc-mc-color--icon-success: #{colors.$color-success-500};
+  --sc-mc-color--icon-warning: #{colors.$color-warning-500};
+
+  /* Text */
+  --sc-mc-color--text-brand: #{colors.$color-primary-500};
+  --sc-mc-color--text-inverted: #{colors.$color-white};
+  --sc-mc-color--text-primary: #{colors.$color-black};
+  --sc-mc-color--text-secondary: #{colors.$color-neutral-500};
+  --sc-mc-color--text-white: #{colors.$color-white};
+  --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  --sc-mc-color--text-inactive: #{colors.$color-neutral-200};
+}
+
+:global([data-theme='dark']) {
+  /* Backgrounds */
+  --sc-mc-color--bg-screen: #{colors.$color-dark-800};
+  --sc-mc-color--bg-card: #{colors.$color-black};
+  --sc-mc-color--bg-panel: #{colors.$color-black};
+  --sc-mc-color--bg-image: #{colors.$color-neutral-700};
+
+  /* Borders */
+  --sc-mc-color--border-brand: #{colors.$color-primary-400};
+  --sc-mc-color--border-card: #{colors.$color-black};
+
+  /* Buttons */
+  --sc-mc-color--button-secondary: #{colors.$color-neutral-400};
+  --sc-mc-color--button-player: #{colors.$color-black};
+
+  /* Icons */
+  --sc-mc-color--icon-brand: #{colors.$color-white};
+  --sc-mc-color--icon-destructive: #{colors.$color-destructive-600};
+  --sc-mc-color--icon-overlay: #{colors.$color-white};
+  --sc-mc-color--icon-overlay-shadow: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --sc-mc-color--icon-primary: #{colors.$color-neutral-800};
+  --sc-mc-color--icon-secondary: #{colors.$color-neutral-400};
+  --sc-mc-color--icon-success: #{colors.$color-success-500};
+  --sc-mc-color--icon-warning: #{colors.$color-warning-500};
+
+  /* Text */
+  --sc-mc-color--text-brand: #{colors.$color-primary-400};
+  --sc-mc-color--text-inverted: #{colors.$color-white};
+  --sc-mc-color--text-primary: #{colors.$color-white};
+  --sc-mc-color--text-secondary: #{colors.$color-neutral-300};
+  --sc-mc-color--text-white: #{colors.$color-white};
+  --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  --sc-mc-color--text-inactive: #{colors.$color-neutral-300};
+}

package/dist/ui/shadow-dom/index.d.ts

@@ -1,2 +1,3 @@
 export { ModalShadowHost } from './modal-shadow-host';
 export { createShadowRoot } from './shadow-root-service';
+export { default as ShadowRoot } from './cmp.shadow-root.svelte';

package/dist/ui/shadow-dom/index.js

@@ -1,2 +1,3 @@
 export { ModalShadowHost } from './modal-shadow-host';
 export { createShadowRoot } from './shadow-root-service';
+export { default as ShadowRoot } from './cmp.shadow-root.svelte';

package/dist/ui/shadow-dom/shadow-root-service.js

@@ -3,10 +3,6 @@ import reset from './reset-shadow.css?raw';
 export const createShadowRoot = (host) => {
     prepareShadowRootHost(host);
     const shadowRoot = host.attachShadow({ mode: 'open' });
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap';
-    shadowRoot.appendChild(link);
     const styleElement = document.createElement('style');
     styleElement.textContent = normalize + reset;
     shadowRoot.appendChild(styleElement);

package/dist/ui/slider/cmp.slider.svelte

@@ -301,10 +301,10 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   font-size: 0.75rem;
   width: 1.875rem;
   height: 1.875rem;
-  background-color: #9ca3af;
+  background-color: var(--sc-mc-color--button-secondary);
   border-radius: 50%;
   text-align: center;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -342,17 +342,17 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   font-weight: 300;
   width: 5.625rem;
   text-align: center;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
 }
 .slider__counts-navigation-button {
   font-size: 0.75rem;
   width: 1.625rem;
   height: 1.625rem;
-  background-color: #9ca3af;
+  background-color: var(--sc-mc-color--button-secondary);
   border-radius: 50%;
   text-align: center;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
   visibility: hidden;
   /* Set 'container-type: inline-size;' to reference container*/
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "12.1.0",
+  "version": "12.2.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/media-center/media-center/cmp.media-center.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { MediaCenterProps } from './types';
-declare const Cmp: import("svelte").Component<MediaCenterProps, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/with-background/cmp.with-background.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">let { backgroundDisabled, backgroundImageUrl, backgroundColor, children } = $props();
-const styles = $derived.by(() => {
-    const values = [];
-    if (backgroundImageUrl) {
-        values.push(`--with-background--background-image-url: url(${backgroundImageUrl})`);
-    }
-    if (backgroundColor) {
-        values.push(`--with-background--background: ${backgroundColor}`);
-    }
-    return values.join(';');
-});
-export {};
-</script>
-
-<svelte:head>
-  <meta name="theme-color" content="#242424" />
-  <meta name="color-scheme" content="dark" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-
-  <style>
-    html,
-    body {
-      background-color: #242424;
-      color-scheme: dark;
-    }
-  </style>
-</svelte:head>
-
-<div
-  class="with-background"
-  class:with-background--background-enabled={!backgroundDisabled}
-  class:with-background--background-active={!backgroundDisabled && backgroundImageUrl && backgroundImageUrl !== 'not-applicable'}
-  class:with-background--background-loading={!backgroundDisabled && backgroundImageUrl !== 'not-applicable'}
-  style={styles}>
-  {@render children()}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.with-background {
-  --_with-background--background: var(--with-background--background);
-  --_with-background--background-image-url: var(--with-background--background-image-url);
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  container-type: inline-size;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-.with-background:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  backdrop-filter: blur(30px);
-  background-color: var(--_with-background--background);
-  display: none;
-}
-.with-background--background-enabled {
-  background-color: #7d7d7d;
-}
-.with-background--background-enabled:before {
-  display: block;
-}
-.with-background--background-active {
-  background-image: var(--_with-background--background-image-url);
-  background-size: cover;
-  background-blend-mode: multiply;
-}
-.with-background--background-loading {
-  background-color: transparent;
-}</style>

package/dist/ui/with-background/index.d.ts

@@ -1 +0,0 @@
-export { default as WithBackground } from './cmp.with-background.svelte';

package/dist/ui/with-background/index.js

@@ -1 +0,0 @@
-export { default as WithBackground } from './cmp.with-background.svelte';