@streamscloud/embeddable 15.0.2 → 15.1.0-1770736445096

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

@@ -121,7 +121,7 @@ const handleSliderMounted = (node) => {
         {/snippet}
       </PlayerSlider>
       {#if overviewPanelContent && config.playerBuffer.loaded.length > 0}
-        <OverviewPanel config={config} position={overviewPosition} uiManager={uiManager}>
+        <OverviewPanel position={overviewPosition} uiManager={uiManager}>
           {@render overviewPanelContent()}
         </OverviewPanel>
       {/if}

package/dist/ui/player/player/controls-and-attachments.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T extends { id: string }">import { slideHorizontally } from '../../../core/transitions';
-import { PlayerButton, ResponsivePlayerButtonsGroup } from '../button';
+import { PlayerButtons, ResponsivePlayerButtons } from '../button';
 import { PlayerConfig } from './player-config.svelte.js';
 import IconCalendarWeekNumbers from '@fluentui/svg-icons/icons/calendar_week_numbers_24_regular.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
@@ -62,30 +62,18 @@ const variables = $derived.by(() => {
   <div class="controls-and-attachments" style={variables}>
     <div class="controls-and-attachments__spacer">&nbsp;</div>
     <div class="controls-and-attachments__left">
-      <ResponsivePlayerButtonsGroup
-        actions={allActions}
-        scaleEffect={true}
-        activeColor={config.playerColors.button}
-        backgroundColor={config.playerColors.buttonInactive} />
+      <ResponsivePlayerButtons actions={allActions} scaleEffect={true} />
 
       {#if config.playerBuffer}
         <div
           class="controls-and-attachments__navigation-buttons"
           class:controls-and-attachments__navigation-buttons--invisible={config.playerBuffer.loaded.length <= 1}>
-          <PlayerButton
-            icon={IconChevronUp}
-            activeColor={config.playerColors.button}
-            inactiveColor={config.playerColors.buttonInactive}
-            disabled={!config.playerBuffer.canLoadPrevious}
-            scaleEffect={true}
-            on={{ click: config.playerBuffer.loadPrevious }} />
-          <PlayerButton
-            icon={IconChevronDown}
-            activeColor={config.playerColors.button}
-            inactiveColor={config.playerColors.buttonInactive}
-            disabled={!config.playerBuffer.canLoadNext}
-            scaleEffect={true}
-            on={{ click: config.playerBuffer.loadNext }} />
+          <PlayerButtons
+            actions={[{ icon: IconChevronUp, callback: config.playerBuffer.loadPrevious, disabled: !config.playerBuffer.canLoadPrevious }]}
+            scaleEffect={true} />
+          <PlayerButtons
+            actions={[{ icon: IconChevronDown, callback: config.playerBuffer.loadNext, disabled: !config.playerBuffer.canLoadNext }]}
+            scaleEffect={true} />
         </div>
       {/if}
     </div>
@@ -104,12 +92,7 @@ const variables = $derived.by(() => {
 
 {#if showCloseButton}
   <div class="close-button" use:handleCloseButtonMounted>
-    <PlayerButton
-      icon={IconDismiss}
-      zoom={0.8}
-      activeColor={config.playerColors.button ?? null}
-      inactiveColor={config.playerColors.buttonInactive ?? null}
-      on={{ click: config.closeOrchestrator.requestClose }} />
+    <PlayerButtons actions={[{ icon: IconDismiss, callback: config.closeOrchestrator.requestClose }]} zoom={0.8} />
   </div>
 {/if}
 
@@ -125,6 +108,8 @@ const variables = $derived.by(() => {
   }
 }
 .controls-and-attachments {
+  --player-button--color: var(--sc-player--button);
+  --player-button--color--inactive: var(--sc-player--button-inactive);
   position: absolute;
   top: 0;
   right: 0;
@@ -175,6 +160,8 @@ const variables = $derived.by(() => {
 }
 
 .close-button {
+  --player-button--color: var(--sc-player--button);
+  --player-button--color--inactive: var(--sc-player--button-inactive);
   position: absolute;
   top: 0;
   right: 0;

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { slideHorizontally } from '../../../core/transitions';
-let { config, uiManager, position, children } = $props();
+let { uiManager, position, children } = $props();
 const handlePanelClick = (e) => {
     e.stopPropagation();
 };
@@ -10,12 +10,6 @@ const styles = $derived.by(() => {
         `--overview-panel--bottom: ${position.bottom}px`,
         `--overview-panel--right: ${position.right}px`
     ];
-    if (config.playerColors.sidebarBackground) {
-        values.push(`--overview-panel--background: ${config.playerColors.sidebarBackground}`);
-    }
-    if (config.playerColors.brand) {
-        values.push(`--overview-panel--brand-color: ${config.playerColors.brand}`);
-    }
     return values.join(';');
 });
 </script>
@@ -43,12 +37,12 @@ const styles = $derived.by(() => {
   }
 }
 .overview-panel {
-  --_overview-panel--background: var(--overview-panel--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%));
+  --_overview-panel--background: var(--sc-player--sidebar-background);
   --_overview-panel--width: var(--overview-panel--width);
   --_overview-panel--top: var(--overview-panel--top);
   --_overview-panel--bottom: var(--overview-panel--bottom);
   --_overview-panel--right: var(--overview-panel--right);
-  --brand-color: var(--overview-panel--brand-color);
+  --brand-color: var(--sc-player--brand);
   width: var(--_overview-panel--width);
   min-width: var(--_overview-panel--width);
   max-width: var(--_overview-panel--width);

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.2",
+  "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';
-    }
-};