@streamscloud/embeddable 15.0.3 → 15.1.0-1770736445096

package/dist/ui/player/player/overview-panel.svelte.d.ts

@@ -1,37 +1,14 @@
-import type { PlayerConfig } from './player-config.svelte.js';
 import type { PlayerUIManager } from './ui-manager.svelte';
 import type { Snippet } from 'svelte';
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): {
-        config: PlayerConfig<T>;
-        uiManager: PlayerUIManager;
-        position: {
-            top: number;
-            bottom: number;
-            right: number;
-        };
-        children: Snippet;
+type Props = {
+    uiManager: PlayerUIManager;
+    position: {
+        top: number;
+        bottom: number;
+        right: number;
     };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends {
-        id: string;
-    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends {
-        id: string;
-    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const OverviewPanel: $$IsomorphicComponent;
-type OverviewPanel<T extends {
-    id: string;
-}> = InstanceType<typeof OverviewPanel<T>>;
+    children: Snippet;
+};
+declare const OverviewPanel: import("svelte").Component<Props, {}, "">;
+type OverviewPanel = ReturnType<typeof OverviewPanel>;
 export default OverviewPanel;

package/dist/ui/player/player/player-config.svelte.d.ts

@@ -17,5 +17,4 @@ export declare class PlayerConfig<T extends {
         playerSliderCallbacks?: PlayerSliderCallbacks;
         closeOrchestrator: ICloseOrchestrator;
     });
-    get playerColors(): import("../colors").PlayerColors;
 }

package/dist/ui/player/player/player-config.svelte.js

@@ -13,7 +13,4 @@ export class PlayerConfig {
         this.playerSliderCallbacks = playerSliderCallbacks;
         this.closeOrchestrator = closeOrchestrator;
     }
-    get playerColors() {
-        return this.settings.playerColors;
-    }
 }

package/dist/ui/player/player/player-settings.svelte.d.ts

@@ -1,16 +1,11 @@
 import type { Locale } from '../../../core/locale';
-import { type ThemeValue } from '../../../core/theme';
-import { PlayerColors } from '../colors';
 export declare class PlayerSettings {
     locale: Locale;
     showStreamsCloudWatermark: boolean;
-    allPlayerColors: Record<ThemeValue, PlayerColors>;
     constructor(init?: IContentPlayerSettings);
-    get playerColors(): PlayerColors;
     patch: (settings?: IContentPlayerSettings) => void;
 }
 export type IContentPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    playerColors?: Record<ThemeValue, PlayerColors>;
 };

package/dist/ui/player/player/player-settings.svelte.js

@@ -1,18 +1,9 @@
-import { Theme } from '../../../core/theme';
-import { PlayerColors } from '../colors';
 export class PlayerSettings {
     locale = $state('en');
     showStreamsCloudWatermark = $state(false);
-    allPlayerColors = $state.raw({
-        light: new PlayerColors(null),
-        dark: new PlayerColors(null)
-    });
     constructor(init) {
         this.patch(init);
     }
-    get playerColors() {
-        return this.allPlayerColors[Theme.get()];
-    }
     patch = (settings) => {
         if (settings?.locale !== undefined) {
             this.locale = settings.locale;
@@ -20,8 +11,5 @@ export class PlayerSettings {
         if (settings?.showStreamsCloudWatermark !== undefined) {
             this.showStreamsCloudWatermark = settings.showStreamsCloudWatermark;
         }
-        if (settings?.playerColors !== undefined) {
-            this.allPlayerColors = settings.playerColors;
-        }
     };
 }

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

@@ -1,13 +1,28 @@
-<script lang="ts">import { Theme } from '../../core/theme';
-let { backgroundDisabled, backgroundImageUrl, backgroundColor, children } = $props();
+<script lang="ts">import { brandColors } from '../../core/theme';
+let { theme = 'dark', backgroundDisabled, backgroundImageUrl, children } = $props();
+const appendBrandPair = (values, name, pair) => {
+    if (pair.light) {
+        values.push(`--sc-player--light--${name}: ${pair.light}`);
+    }
+    if (pair.dark) {
+        values.push(`--sc-player--dark--${name}: ${pair.dark}`);
+    }
+};
 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}`);
-    }
+    appendBrandPair(values, 'background', brandColors.playerBackground);
+    appendBrandPair(values, 'brand', brandColors.brand);
+    appendBrandPair(values, 'button', brandColors.button);
+    appendBrandPair(values, 'button-inactive', brandColors.buttonInactive);
+    appendBrandPair(values, 'card-background', brandColors.cardBackground);
+    appendBrandPair(values, 'card-button', brandColors.cardButton);
+    appendBrandPair(values, 'menu-background', brandColors.menuBackground);
+    appendBrandPair(values, 'price', brandColors.price);
+    appendBrandPair(values, 'sale-price', brandColors.salePrice);
+    appendBrandPair(values, 'sidebar-background', brandColors.sidebarBackground);
     return values.join(';');
 });
 </script>
@@ -21,12 +36,13 @@ const styles = $derived.by(() => {
   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()}>
+  style:color-scheme={theme}
+  style={styles}>
   {@render children()}
 </div>
 
-<style>@keyframes fadeIn {
+<style>@charset "UTF-8";
+@keyframes fadeIn {
   0% {
     opacity: 1;
   }
@@ -37,58 +53,22 @@ const styles = $derived.by(() => {
     opacity: 1;
   }
 }
-:host,
-:global([data-theme='default']) {
-  /* Backgrounds */
-  --sc-mc-color--bg-button: #ffffff;
-  --sc-mc-color--bg-card: #ffffff;
-  --sc-mc-color--bg-card-action: #f9fafb;
-  --sc-mc-color--bg-image: #d1d5db;
-  --sc-mc-color--bg-panel: #ffffff;
-  --sc-mc-color--bg-screen: #f9fafb;
-  /* 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-primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
-  --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']) {
+.shadow-root {
   /* Backgrounds */
-  --sc-mc-color--bg-button: #111827;
-  --sc-mc-color--bg-card: #000000;
-  --sc-mc-color--bg-card-action: #111827;
-  --sc-mc-color--bg-image: #374151;
-  --sc-mc-color--bg-panel: #000000;
-  --sc-mc-color--bg-screen: #1e1e1e;
+  --sc-mc-color--bg-button: light-dark(#ffffff, #111827);
+  --sc-mc-color--bg-card: light-dark(#ffffff, #000000);
+  --sc-mc-color--bg-card-action: light-dark(#f9fafb, #111827);
+  --sc-mc-color--bg-image: light-dark(#d1d5db, #374151);
+  --sc-mc-color--bg-panel: light-dark(#ffffff, #000000);
+  --sc-mc-color--bg-screen: light-dark(#f9fafb, #1e1e1e);
   /* Borders */
-  --sc-mc-color--border-brand: #5a8dec;
-  --sc-mc-color--border-card: #000000;
+  --sc-mc-color--border-brand: light-dark(#144ab0, #5a8dec);
   /* Buttons */
+  --sc-mc-color--button-player: light-dark(#272727, #000000);
   --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-brand: light-dark(#144ab0, #ffffff);
+  --sc-mc-color--icon-destructive: light-dark(#e71d36, #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;
@@ -96,19 +76,56 @@ const styles = $derived.by(() => {
   --sc-mc-color--icon-success: #0cce6b;
   --sc-mc-color--icon-warning: #ffa62b;
   /* Text */
-  --sc-mc-color--text-brand: #5a8dec;
+  --sc-mc-color--text-brand: light-dark(#144ab0, #5a8dec);
+  --sc-mc-color--text-inactive: light-dark(#e5e7eb, #d1d5db);
   --sc-mc-color--text-inverted: #ffffff;
-  --sc-mc-color--text-primary: #ffffff;
-  --sc-mc-color--text-primary-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-secondary: #d1d5db;
+  --sc-mc-color--text-primary: light-dark(#000000, #ffffff);
+  --_sc-mc--text-primary-shadow-light: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
+  --_sc-mc--text-primary-shadow-dark: 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-primary-shadow: light-dark(var(--_sc-mc--text-primary-shadow-light), var(--_sc-mc--text-primary-shadow-dark));
+  --sc-mc-color--text-secondary: light-dark(#6b7280, #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;
+  /* Player brand colors — overridable via --sc-player--{light|dark}--{name} custom properties */
+  --sc-player--background: light-dark(
+    var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%)),
+    var(--sc-player--dark--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%))
+  );
+  --sc-player--brand: light-dark(
+    var(--sc-player--light--brand, var(--sc-mc-color--border-brand)),
+    var(--sc-player--dark--brand, var(--sc-mc-color--border-brand))
+  );
+  --sc-player--button: light-dark(
+    var(--sc-player--light--button, var(--sc-mc-color--button-player)),
+    var(--sc-player--dark--button, var(--sc-mc-color--button-player))
+  );
+  --sc-player--button-inactive: light-dark(
+    var(--sc-player--light--button-inactive, rgb(from var(--sc-player--button) r g b / 60%)),
+    var(--sc-player--dark--button-inactive, rgb(from var(--sc-player--button) r g b / 60%))
+  );
+  --sc-player--card-background: light-dark(
+    var(--sc-player--light--card-background, rgb(from var(--sc-mc-color--bg-card) r g b / 90%)),
+    var(--sc-player--dark--card-background, rgb(from var(--sc-mc-color--bg-card) r g b / 90%))
+  );
+  --sc-player--card-button: light-dark(
+    var(--sc-player--light--card-button, var(--sc-mc-color--bg-button)),
+    var(--sc-player--dark--card-button, var(--sc-mc-color--bg-button))
+  );
+  --sc-player--menu-background: light-dark(
+    var(--sc-player--light--menu-background, rgb(from var(--sc-mc-color--bg-panel) r g b / 95%)),
+    var(--sc-player--dark--menu-background, rgb(from var(--sc-mc-color--bg-panel) r g b / 95%))
+  );
+  --sc-player--price: light-dark(var(--sc-player--light--price, inherit), var(--sc-player--dark--price, inherit));
+  --sc-player--sale-price: light-dark(var(--sc-player--light--sale-price, inherit), var(--sc-player--dark--sale-price, inherit));
+  --sc-player--sidebar-background: light-dark(
+    var(--sc-player--light--sidebar-background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%)),
+    var(--sc-player--dark--sidebar-background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%))
+  );
 }
 
 .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-color: rgb(from var(--sc-player--background, var(--sc-mc-color--bg-screen)) r g b);
+  --_shadow-root--shield-color: rgb(from var(--sc-player--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);
   width: 100%;
   min-width: 100%;

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

@@ -1,8 +1,9 @@
+import { type ThemeValue } from '../../core/theme';
 import type { Snippet } from 'svelte';
 type Props = {
+    theme?: ThemeValue;
     backgroundDisabled: boolean;
     backgroundImageUrl: string | null | 'not-applicable';
-    backgroundColor?: string | null;
     children: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -1,26 +1,24 @@
 @use 'src/styles/colors';
 
-:host,
-:global([data-theme='default']) {
+.shadow-root {
   /* Backgrounds */
-  --sc-mc-color--bg-button: #{colors.$color-white};
-  --sc-mc-color--bg-card: #{colors.$color-white};
-  --sc-mc-color--bg-card-action: #{colors.$color-neutral-50};
-  --sc-mc-color--bg-image: #{colors.$color-neutral-300};
-  --sc-mc-color--bg-panel: #{colors.$color-white};
-  --sc-mc-color--bg-screen: #{colors.$color-neutral-50};
+  --sc-mc-color--bg-button: light-dark(#{colors.$color-white}, #{colors.$color-neutral-900});
+  --sc-mc-color--bg-card: light-dark(#{colors.$color-white}, #{colors.$color-black});
+  --sc-mc-color--bg-card-action: light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-900});
+  --sc-mc-color--bg-image: light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-700});
+  --sc-mc-color--bg-panel: light-dark(#{colors.$color-white}, #{colors.$color-black});
+  --sc-mc-color--bg-screen: light-dark(#{colors.$color-neutral-50}, #{colors.$color-dark-800});
 
   /* Borders */
-  --sc-mc-color--border-brand: #{colors.$color-primary-500};
-  --sc-mc-color--border-card: #{colors.$color-gray-100};
+  --sc-mc-color--border-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
 
   /* Buttons */
+  --sc-mc-color--button-player: light-dark(#{colors.$color-dark-500}, #{colors.$color-black});
   --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-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-white});
+  --sc-mc-color--icon-destructive: light-dark(#{colors.$color-destructive-500}, #{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};
@@ -29,50 +27,50 @@
   --sc-mc-color--icon-warning: #{colors.$color-warning-500};
 
   /* Text */
-  --sc-mc-color--text-brand: #{colors.$color-primary-500};
+  --sc-mc-color--text-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
+  --sc-mc-color--text-inactive: light-dark(#{colors.$color-neutral-200}, #{colors.$color-neutral-300});
   --sc-mc-color--text-inverted: #{colors.$color-white};
-  --sc-mc-color--text-primary: #{colors.$color-black};
-  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
-  --sc-mc-color--text-secondary: #{colors.$color-neutral-500};
+  --sc-mc-color--text-primary: light-dark(#{colors.$color-black}, #{colors.$color-white});
+  --_sc-mc--text-primary-shadow-light: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
+  --_sc-mc--text-primary-shadow-dark: 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-primary-shadow: light-dark(var(--_sc-mc--text-primary-shadow-light), var(--_sc-mc--text-primary-shadow-dark));
+  --sc-mc-color--text-secondary: light-dark(#{colors.$color-neutral-500}, #{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-200};
-}
-
-:global([data-theme='dark']) {
-  /* Backgrounds */
-  --sc-mc-color--bg-button: #{colors.$color-neutral-900};
-  --sc-mc-color--bg-card: #{colors.$color-black};
-  --sc-mc-color--bg-card-action: #{colors.$color-neutral-900};
-  --sc-mc-color--bg-image: #{colors.$color-neutral-700};
-  --sc-mc-color--bg-panel: #{colors.$color-black};
-  --sc-mc-color--bg-screen: #{colors.$color-dark-800};
-
-  /* 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-primary-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-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};
+  /* Player brand colors — overridable via --sc-player--{light|dark}--{name} custom properties */
+  --sc-player--background: light-dark(
+    var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%)),
+    var(--sc-player--dark--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%))
+  );
+  --sc-player--brand: light-dark(
+    var(--sc-player--light--brand, var(--sc-mc-color--border-brand)),
+    var(--sc-player--dark--brand, var(--sc-mc-color--border-brand))
+  );
+  --sc-player--button: light-dark(
+    var(--sc-player--light--button, var(--sc-mc-color--button-player)),
+    var(--sc-player--dark--button, var(--sc-mc-color--button-player))
+  );
+  --sc-player--button-inactive: light-dark(
+    var(--sc-player--light--button-inactive, rgb(from var(--sc-player--button) r g b / 60%)),
+    var(--sc-player--dark--button-inactive, rgb(from var(--sc-player--button) r g b / 60%))
+  );
+  --sc-player--card-background: light-dark(
+    var(--sc-player--light--card-background, rgb(from var(--sc-mc-color--bg-card) r g b / 90%)),
+    var(--sc-player--dark--card-background, rgb(from var(--sc-mc-color--bg-card) r g b / 90%))
+  );
+  --sc-player--card-button: light-dark(
+    var(--sc-player--light--card-button, var(--sc-mc-color--bg-button)),
+    var(--sc-player--dark--card-button, var(--sc-mc-color--bg-button))
+  );
+  --sc-player--menu-background: light-dark(
+    var(--sc-player--light--menu-background, rgb(from var(--sc-mc-color--bg-panel) r g b / 95%)),
+    var(--sc-player--dark--menu-background, rgb(from var(--sc-mc-color--bg-panel) r g b / 95%))
+  );
+  --sc-player--price: light-dark(var(--sc-player--light--price, inherit), var(--sc-player--dark--price, inherit));
+  --sc-player--sale-price: light-dark(var(--sc-player--light--sale-price, inherit), var(--sc-player--dark--sale-price, inherit));
+  --sc-player--sidebar-background: light-dark(
+    var(--sc-player--light--sidebar-background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%)),
+    var(--sc-player--dark--sidebar-background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%))
+  );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "15.0.3",
+  "version": "15.1.0-1770736445096",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/core/theme/theme-store.svelte.d.ts

@@ -1,6 +0,0 @@
-export declare const Theme: {
-    get: () => ThemeValue;
-    set: (theme: ThemeValue) => void;
-    toggle: () => void;
-};
-export type ThemeValue = 'dark' | 'light';

package/dist/core/theme/theme-store.svelte.js

@@ -1,10 +0,0 @@
-let themeStore = $state('dark');
-export const Theme = {
-    get: () => themeStore,
-    set: (theme) => {
-        themeStore = theme;
-    },
-    toggle: () => {
-        themeStore = themeStore === 'dark' ? 'light' : 'dark';
-    }
-};

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

@@ -1,74 +0,0 @@
-<script lang="ts">import { Icon, IconColor } from '../../icon';
-let { icon, activeColor, inactiveColor, iconColor, scaleEffect = false, disabled = false, zoom = 1, on } = $props();
-const styles = $derived.by(() => {
-    const values = [`zoom: ${zoom}`];
-    if (activeColor) {
-        values.push(`--player-button--color: ${activeColor}`);
-    }
-    if (inactiveColor) {
-        values.push(`--player-button--color--inactive: ${inactiveColor}`);
-    }
-    return values.join(';');
-});
-</script>
-
-<button type="button" class="player-button" style={styles} class:player-button--scale-effect={scaleEffect} disabled={disabled} onclick={on.click}>
-  <span class="player-button__icon">
-    <Icon src={icon} color={iconColor} />
-  </span>
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.player-button {
-  --_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;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--_player-button--color--inactive);
-  transition: background-color 0.5s;
-  border-radius: 50%;
-  color: var(--sc-mc-color--text-white);
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--size: 1.75rem;
-}
-.player-button:hover:not(:disabled) {
-  background-color: var(--_player-button--color);
-}
-.player-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.player-button--scale-effect:hover:not(:disabled) {
-  --_player-button--icon-scale: 1.2;
-}
-.player-button__icon {
-  display: block;
-  transform: scale(var(--_player-button--icon-scale));
-  transition: 0.3s;
-}
-.player-button {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .player-button {
-    padding: 0.5rem;
-    --icon--size: 1.5rem;
-  }
-}</style>

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

@@ -1,16 +0,0 @@
-import { IconColor } from '../../icon';
-type Props = {
-    icon: string;
-    activeColor: string | null;
-    inactiveColor: string | null;
-    iconColor?: IconColor;
-    disabled?: boolean;
-    scaleEffect?: boolean;
-    zoom?: number;
-    on: {
-        click: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,86 +0,0 @@
-<script lang="ts">import { Icon } from '../../icon';
-let { scaleEffect = false, activeColor, backgroundColor, actions } = $props();
-const styles = $derived.by(() => {
-    const values = [];
-    if (activeColor) {
-        values.push(`--player-buttons-group--active-color: ${activeColor}`);
-    }
-    if (backgroundColor) {
-        values.push(`--player-buttons-group--background-color: ${backgroundColor}`);
-    }
-    return values.join(';');
-});
-</script>
-
-<div class="player-buttons-group" style={styles}>
-  {#each actions as action (action.icon)}
-    <button type="button" class="player-buttons-group__action" class:player-buttons-group__action--scale-effect={scaleEffect} onclick={action.callback}>
-      <span class="player-buttons-group__action-icon">
-        <Icon src={action.icon} color={action.iconColor} />
-      </span>
-    </button>
-  {/each}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.player-buttons-group {
-  --_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, var(--sc-mc-color--button-player)) r g b / 60%)
-  );
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  border-radius: 1.25rem;
-  background: var(--_player-buttons-group--background-color);
-  padding: 0.4375rem 0.0625rem;
-  pointer-events: auto;
-}
-.player-buttons-group__action {
-  --_player-action--icon-scale: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.5625rem;
-  border-radius: 1.25rem;
-  color: var(--sc-mc-color--text-white);
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--size: 1.75rem;
-  transition: background-color 0.5s;
-}
-.player-buttons-group__action:hover {
-  background-color: var(--_player-buttons-group--active-color);
-}
-.player-buttons-group__action--scale-effect:hover {
-  --_player-action--icon-scale: 1.2;
-  background-color: transparent;
-}
-.player-buttons-group__action-icon {
-  display: block;
-  transform: scale(var(--_player-action--icon-scale));
-  transition: 0.3s;
-}
-.player-buttons-group {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .player-buttons-group {
-    border-radius: 0.9375rem;
-    padding: 0.25rem 0.0625rem;
-  }
-  .player-buttons-group__action {
-    --icon--size: 1.5rem;
-  }
-}</style>