@streamscloud/embeddable 15.0.2 → 15.1.0-1770736445096

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -3,7 +3,7 @@ import { toPriceRepresentation } from '../../products/price-helper';
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-let { ad, colors, locale, trackingParams, inert = false, on } = $props();
+let { ad, locale, trackingParams, inert = false, on } = $props();
 const trackImpression = (node) => {
     if (on?.impression) {
         const observer = new IntersectionObserver((entries) => {
@@ -31,19 +31,14 @@ const handleAdClick = () => {
         window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
-const styles = $derived.by(() => {
-    const values = [];
-    if (colors?.background) {
-        values.push(`--ad-card--background-color: ${colors.background}`);
-    }
-    if (colors?.price) {
-        values.push(`--ad-card--price-color: ${colors.price}`);
-    }
-    return values.join(';');
-});
 </script>
 
-<div class="ad-card" style={styles} inert={inert} use:trackImpression>
+<div
+  class="ad-card"
+  style:--ad-card--cta-background={ad.ctaButton?.background}
+  style:--ad-card--cta-text-color={ad.ctaButton?.textColor}
+  inert={inert}
+  use:trackImpression>
   <div class="ad-card__image">
     <Image src={ad.image} alt={ad.title} />
   </div>
@@ -73,13 +68,7 @@ const styles = $derived.by(() => {
     <div class="ad-card__button-container">
       {#if ad.ctaButton && enrichedLink && ad.ctaButton.text}
         <div class="ad-card__button">
-          <Button
-            size={ButtonSize.Standard}
-            on={{ click: handleAdClick }}
-            --button--font--size="1em"
-            --button--font--color={colors?.buttonBackground ? '#FFFFFF' : ad.ctaButton.textColor}
-            --button--background={colors?.buttonBackground ?? ad.ctaButton.background}
-            --button--min-width="100%">
+          <Button size={ButtonSize.Standard} on={{ click: handleAdClick }} --button--font--size="1em" --button--min-width="100%">
             <span class="ad-card__button-text">{ad.ctaButton.text}</span>
           </Button>
         </div>
@@ -100,8 +89,8 @@ const styles = $derived.by(() => {
   }
 }
 .ad-card {
-  --_ad-card--background-color: var(--ad-card--background-color, rgb(from var(--sc-mc-color--bg-card) r g b/90%));
-  --_ad-card--border-color: var(--ad-card--background-color, var(--sc-mc-color--border-card));
+  --_ad-card--background-color: var(--ad-card--background-color, rgb(from light-dark(#ffffff, #000000) r g b / 90%));
+  --_ad-card--border-color: var(--ad-card--border-color, light-dark(#f2f2f2, #000000));
   --_ad-card--price-color: var(--ad-card--price-color, inherit);
   width: 100%;
   height: max-content;
@@ -267,6 +256,11 @@ const styles = $derived.by(() => {
 }
 .ad-card__button {
   width: 100%;
+  --button--background: light-dark(
+    var(--sc-player--light--card-button, var(--ad-card--cta-background)),
+    var(--sc-player--dark--card-button, var(--ad-card--cta-background))
+  );
+  --button--font--color: var(--ad-card--cta-text-color);
 }
 .ad-card__button :global(*) {
   width: 100%;

package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts

@@ -4,11 +4,6 @@ import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
     trackingParams: TrackingParams;
-    colors: {
-        background?: string | null;
-        price?: string | null;
-        buttonBackground?: string | null;
-    };
     locale: Locale;
     inert?: boolean;
     on?: {

package/dist/core/theme/brand-colors.svelte.d.ts

@@ -0,0 +1,33 @@
+export type BrandColorPair = {
+    light: string | null;
+    dark: string | null;
+};
+export type IBrandColorsInit = {
+    brand: string | null;
+    button: string | null;
+    buttonInactive: string | null;
+    cardButton: string | null;
+    cardBackground: string | null;
+    menuBackground: string | null;
+    playerBackground: string | null;
+    price: string | null;
+    salePrice: string | null;
+    sidebarBackground: string | null;
+};
+export declare class BrandColors {
+    brand: BrandColorPair;
+    button: BrandColorPair;
+    buttonInactive: BrandColorPair;
+    cardBackground: BrandColorPair;
+    cardButton: BrandColorPair;
+    menuBackground: BrandColorPair;
+    playerBackground: BrandColorPair;
+    price: BrandColorPair;
+    salePrice: BrandColorPair;
+    sidebarBackground: BrandColorPair;
+    set: (init: {
+        light: IBrandColorsInit | null;
+        dark: IBrandColorsInit | null;
+    }) => void;
+}
+export declare const brandColors: BrandColors;

package/dist/core/theme/brand-colors.svelte.js

@@ -0,0 +1,26 @@
+const EMPTY_PAIR = { light: null, dark: null };
+export class BrandColors {
+    brand = $state.raw(EMPTY_PAIR);
+    button = $state.raw(EMPTY_PAIR);
+    buttonInactive = $state.raw(EMPTY_PAIR);
+    cardBackground = $state.raw(EMPTY_PAIR);
+    cardButton = $state.raw(EMPTY_PAIR);
+    menuBackground = $state.raw(EMPTY_PAIR);
+    playerBackground = $state.raw(EMPTY_PAIR);
+    price = $state.raw(EMPTY_PAIR);
+    salePrice = $state.raw(EMPTY_PAIR);
+    sidebarBackground = $state.raw(EMPTY_PAIR);
+    set = (init) => {
+        this.brand = { light: init.light?.brand ?? null, dark: init.dark?.brand ?? null };
+        this.button = { light: init.light?.button ?? null, dark: init.dark?.button ?? null };
+        this.buttonInactive = { light: init.light?.buttonInactive ?? null, dark: init.dark?.buttonInactive ?? null };
+        this.cardBackground = { light: init.light?.cardBackground ?? null, dark: init.dark?.cardBackground ?? null };
+        this.cardButton = { light: init.light?.cardButton ?? null, dark: init.dark?.cardButton ?? null };
+        this.menuBackground = { light: init.light?.menuBackground ?? null, dark: init.dark?.menuBackground ?? null };
+        this.playerBackground = { light: init.light?.playerBackground ?? null, dark: init.dark?.playerBackground ?? null };
+        this.price = { light: init.light?.price ?? null, dark: init.dark?.price ?? null };
+        this.salePrice = { light: init.light?.salePrice ?? null, dark: init.dark?.salePrice ?? null };
+        this.sidebarBackground = { light: init.light?.sidebarBackground ?? null, dark: init.dark?.sidebarBackground ?? null };
+    };
+}
+export const brandColors = new BrandColors();

package/dist/core/theme/index.d.ts

@@ -1,2 +1,3 @@
-export { Theme } from './theme-store.svelte';
-export type { ThemeValue } from './theme-store.svelte';
+export { BrandColors, brandColors } from './brand-colors.svelte';
+export type { BrandColorPair, IBrandColorsInit } from './brand-colors.svelte';
+export type ThemeValue = 'dark' | 'light';

package/dist/core/theme/index.js

@@ -1 +1 @@
-export { Theme } from './theme-store.svelte';
+export { BrandColors, brandColors } from './brand-colors.svelte';

package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.js

@@ -1,6 +1,6 @@
 import { Status, StreamStatus } from '../../core/enums';
 import { createLocalGQLClient } from '../../core/graphql';
-import { PlayerColors } from '../../ui/player/colors';
+import { brandColors } from '../../core/theme';
 import { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
 import { MockCategoryFollowingProvider, MockMediaCenterContentManagementHandler, MockMembershipHandler, MockNavigationHandler, MockPostSocialInteractionsHandler } from './mocks';
 import { GetMediaPageConfigDocument } from './operations.generated';
@@ -38,12 +38,9 @@ export class InternalMediaCenterDataProvider {
                         : null,
                     contentCategories: config.menuSettings?.contentCategories || [],
                     categoryTagAssociations: config.menuSettings?.contentCategoryMenuItems || [],
-                    playerColors: {
-                        light: new PlayerColors(null),
-                        dark: new PlayerColors(config.playerColors)
-                    },
                     moments: config.moments
                 };
+                brandColors.set({ light: null, dark: config.playerColors });
             }
             return this.model;
         };

package/dist/media-center/config/types.d.ts

@@ -1,5 +1,4 @@
 import { PostType } from '../../core/enums';
-import type { ThemeValue } from '../../core/theme';
 import type { IContentCategoryFollowingHandler } from '../categories-following';
 import type { IMediaCenterContentManagementHandler } from '../content-management';
 import type { IMediaCenterMembershipHandler } from '../membership';
@@ -10,7 +9,6 @@ import type { IPostSocialInteractionsHandler } from '../../posts/social-interact
 import type { IStreamSharingHandler } from '../../streams/sharing';
 import type { StreamPageViewerModel } from '../../streams/stream-page-viewer/types';
 import type { IStreamAnalyticsHandler, StreamPlayerModel } from '../../streams/streams-player/types';
-import type { PlayerColors } from '../../ui/player/colors';
 export interface IMediaCenterDataProvider {
     model: MediaCenterModel | null;
     fetchModel: () => Promise<MediaCenterModel | null>;
@@ -88,5 +86,4 @@ export type MediaCenterModel = {
             backgroundColor: string;
         } | null;
     }[];
-    playerColors: Record<ThemeValue, PlayerColors>;
 };

package/dist/media-center/media-center/cmp.media-center-proxy.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { Theme } from '../../core/theme';
-import { Utils } from '../../core/utils';
+<script lang="ts">import { Utils } from '../../core/utils';
 import { Loading } from '../../ui/loading';
 import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
@@ -44,12 +43,6 @@ const context = untrack(() => new MediaCenterContext({
         }
     }
 }));
-$effect(() => {
-    void settings?.theme;
-    untrack(() => {
-        Theme.set(settings?.theme ?? 'dark');
-    });
-});
 </script>
 
 {#if context.initializing}
@@ -57,7 +50,7 @@ $effect(() => {
 {:else if !context.initialized}
   Not initialized placeholder
 {:else}
-  <ShadowRoot {...context.backgroundWrapperProps}>
+  <ShadowRoot theme={settings?.theme ?? 'dark'} {...context.backgroundWrapperProps}>
     <MediaCenterView context={context} dynamicActions={dynamicActions} />
   </ShadowRoot>
 {/if}

package/dist/media-center/media-center/footer/media-center-footer.svelte

@@ -6,7 +6,7 @@ import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular
 let { context } = $props();
 </script>
 
-<div class="media-center-footer" data-theme="dark">
+<div class="media-center-footer" style:color-scheme="dark">
   <div class="media-center-footer__spacer"></div>
   <button
     type="button"

package/dist/media-center/media-center/handlers/media-center-settings-handler.svelte.d.ts

@@ -1,39 +1,29 @@
 import type { Locale } from '../../../core/locale';
-import { type ThemeValue } from '../../../core/theme';
 import type { IMediaCenterDataProvider } from '../../config/types';
-import { PlayerColors } from '../../../ui/player/colors';
 import type { MediaCenterSettings } from '../media-center-settings.svelte';
 export declare class MediaCenterSettingsHandler {
     private _backgroundImageUrl;
     private _mediaCenterSettings;
-    private _dataProvider;
     private _contentPlayerSettings;
     constructor(init: {
         readonly dataProvider: IMediaCenterDataProvider;
         settings: MediaCenterSettings;
     });
     get playerSettings(): ContentPlayerSettingsLocal;
-    get actualMediaCenterColors(): PlayerColors;
     get locale(): Locale;
     get backgroundWrapperProps(): {
         backgroundDisabled: boolean;
         backgroundImageUrl: string | null;
-        backgroundColor?: string | null;
     };
     get backgroundImageLoadedHandler(): ((url: string | null) => void) | undefined;
     setMinOverlayOffsetTop: (value: number) => void;
     updateBackgroundImageUrl: (url: string | null | "not-applicable") => void;
 }
-export type MediaCenterSettingsWithColors = MediaCenterSettings & {
-    playerColors?: PlayerColors;
-};
 declare class ContentPlayerSettingsLocal {
     private settings;
-    private dataProvider;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    playerColors?: Record<ThemeValue, PlayerColors>;
     overlayMinOffsetTop?: number;
-    constructor(settings: MediaCenterSettings, dataProvider: IMediaCenterDataProvider);
+    constructor(settings: MediaCenterSettings);
 }
 export {};

package/dist/media-center/media-center/handlers/media-center-settings-handler.svelte.js

@@ -1,29 +1,21 @@
-import { Theme } from '../../../core/theme';
-import { PlayerColors } from '../../../ui/player/colors';
 export class MediaCenterSettingsHandler {
     _backgroundImageUrl = $state(null);
     _mediaCenterSettings;
-    _dataProvider;
     _contentPlayerSettings;
     constructor(init) {
         this._mediaCenterSettings = init.settings;
-        this._dataProvider = init.dataProvider;
-        this._contentPlayerSettings = new ContentPlayerSettingsLocal(this._mediaCenterSettings, this._dataProvider);
+        this._contentPlayerSettings = new ContentPlayerSettingsLocal(this._mediaCenterSettings);
     }
     get playerSettings() {
         return this._contentPlayerSettings;
     }
-    get actualMediaCenterColors() {
-        return this._dataProvider.model?.playerColors?.[Theme.get()] || new PlayerColors(null);
-    }
     get locale() {
         return this._mediaCenterSettings.locale;
     }
     get backgroundWrapperProps() {
         return {
             backgroundDisabled: this._mediaCenterSettings.disableBackground,
-            backgroundImageUrl: this._backgroundImageUrl,
-            backgroundColor: this.actualMediaCenterColors.playerBackground
+            backgroundImageUrl: this._backgroundImageUrl
         };
     }
     get backgroundImageLoadedHandler() {
@@ -38,13 +30,10 @@ export class MediaCenterSettingsHandler {
 }
 class ContentPlayerSettingsLocal {
     settings;
-    dataProvider;
     locale = $derived.by(() => this.settings.locale);
     showStreamsCloudWatermark = $derived.by(() => this.settings.showStreamsCloudWatermark);
-    playerColors = $derived.by(() => this.dataProvider.model?.playerColors);
     overlayMinOffsetTop = $state(0);
-    constructor(settings, dataProvider) {
+    constructor(settings) {
         this.settings = settings;
-        this.dataProvider = dataProvider;
     }
 }

package/dist/media-center/media-center/header/media-center-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { horizontalWheelScroll } from '../../../core/actions';
 import { Icon } from '../../../ui/icon';
-import { PlayerButton } from '../../../ui/player/button';
+import { PlayerButtons } from '../../../ui/player/button';
 import { MediaCenterHeaderLocalization } from './media-center-header-localization';
 import IconCart from '@fluentui/svg-icons/icons/cart_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
@@ -112,24 +112,11 @@ const updateScrollShadows = (scrollArea) => {
     scrollArea.classList.toggle('has-right-mask', scrollHasRight && !scrollHasLeft);
     scrollArea.classList.toggle('has-both-masks', scrollHasRight && scrollHasLeft);
 };
-const styles = $derived.by(() => {
-    const values = [];
-    if (context.mediaCenterColors.button) {
-        values.push(`--media-center-header--button-color: ${context.mediaCenterColors.button}`);
-    }
-    if (context.mediaCenterColors.buttonInactive) {
-        values.push(`--media-center-header--button-color--inactive: ${context.mediaCenterColors.buttonInactive}`);
-    }
-    if (context.mediaCenterColors.brand) {
-        values.push(`--media-center-header--button-indicator: ${context.mediaCenterColors.brand}`);
-    }
-    return values.join(';');
-});
 </script>
 
 <div class="media-center-header-container" use:headerMounted>
   <div class="spacer"></div>
-  <div class="media-center-header" style={styles}>
+  <div class="media-center-header">
     {#if context.model?.logo}
       <div class="media-center-header__logo-wrap">
         <img src={context.model.logo} class="media-center-header__logo" alt={context.model?.name} />
@@ -223,12 +210,7 @@ const styles = $derived.by(() => {
     {/if}
     {#if context.closeOrchestrator.closeTriggerVisible}
       <div class="close-button" use:handleCloseButtonMounted>
-        <PlayerButton
-          icon={IconDismiss}
-          zoom={0.8}
-          activeColor={context.mediaCenterColors.button}
-          inactiveColor={context.mediaCenterColors.buttonInactive}
-          on={{ click: context.closeOrchestrator.requestClose }} />
+        <PlayerButtons actions={[{ icon: IconDismiss, callback: context.closeOrchestrator.requestClose }]} zoom={0.8} />
       </div>
     {/if}
   </div>
@@ -262,12 +244,9 @@ const styles = $derived.by(() => {
 }
 
 .media-center-header {
-  --_media-center-header--button-color: var(--media-center-header--button-color, var(--sc-mc-color--button-player));
-  --_media-center-header--button-color--inactive: var(
-    --media-center-header--button-color--inactive,
-    rgb(from var(--_media-center-header--button-color, var(--sc-mc-color--button-player)) r g b / 60%)
-  );
-  --_media-center-header--button-indicator: var(--media-center-header--button-indicator, var(--sc-mc-color--icon-success));
+  --_media-center-header--button-color: var(--sc-player--button);
+  --_media-center-header--button-color--inactive: var(--sc-player--button-inactive);
+  --_media-center-header--button-indicator: var(--sc-player--brand);
   padding-top: 2.1875rem;
   width: 73.75rem;
   display: flex;
@@ -414,6 +393,8 @@ const styles = $derived.by(() => {
 }
 
 .close-button {
+  --player-button--color: var(--sc-player--button);
+  --player-button--color--inactive: var(--sc-player--button-inactive);
   justify-self: flex-end;
   flex-shrink: 0;
   padding-block: 0.9375rem;

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

@@ -34,13 +34,11 @@ export declare class MediaCenterContext {
         on: MediaCenterContextInitializationCallbacks;
     });
     get model(): import("../config/types").MediaCenterModel | null;
-    get mediaCenterColors(): import("../../ui/player/colors").PlayerColors;
     get loading(): boolean;
     get overlayIsActive(): boolean;
     get backgroundWrapperProps(): {
         backgroundDisabled: boolean;
         backgroundImageUrl: string | null;
-        backgroundColor?: string | null;
     };
     get membershipHandler(): import("..").IMediaCenterMembershipHandler | null;
     get categoriesFollowingHandler(): import("..").IContentCategoryFollowingHandler | null;

package/dist/media-center/media-center/media-center-context.svelte.js

@@ -93,9 +93,6 @@ export class MediaCenterContext {
     get model() {
         return this._dataProvider.model;
     }
-    get mediaCenterColors() {
-        return this.settingsHandler.actualMediaCenterColors;
-    }
     get loading() {
         return this.discoverHandler.loading || this.postsFeedHandler.loading || this.streamsFeedHandler.loading || this.streamsInCategoryHandler.loading;
     }

package/dist/media-center/media-center/menu/menu.svelte

@@ -28,16 +28,9 @@ const handleCategoryExpaned = (e, categoryId) => {
     e.stopPropagation();
     categoriesExpandedMap[categoryId] = !categoriesExpandedMap[categoryId];
 };
-const styles = $derived.by(() => {
-    const values = [];
-    if (context.mediaCenterColors.menuBackground) {
-        values.push(`--media-center-menu--background-color: ${context.mediaCenterColors.menuBackground}`);
-    }
-    return values.join(';');
-});
 </script>
 
-<div class="media-center-menu" transition:slideHorizontally|local style={styles} onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
+<div class="media-center-menu" transition:slideHorizontally|local onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
   {#if target}
     <div class="media-center-target">
       <div class="media-center-target__image">
@@ -156,7 +149,7 @@ const styles = $derived.by(() => {
   }
 }
 .media-center-menu {
-  --_media-center-menu--background-color: var(--media-center-menu--background-color, rgb(from var(--sc-mc-color--bg-panel) r g b / 95%));
+  --_media-center-menu--background-color: var(--sc-player--menu-background);
   --_media-center-menu--items--padding-inline: 0.625rem;
   background: var(--_media-center-menu--background-color);
   height: 100%;

package/dist/media-center/media-center/moments/cmp.moments-circle.svelte

@@ -1,13 +1,6 @@
 <script lang="ts">import { ImageRound } from '../../../ui/image';
 let { context } = $props();
 const handler = $derived(context.momentsFeedHandler);
-const styles = $derived.by(() => {
-    const values = [];
-    if (context.mediaCenterColors.brand) {
-        values.push(`--moments-circle--brand-color: ${context.mediaCenterColors.brand}`);
-    }
-    return values.join(';');
-});
 const handleClick = () => {
     if (!handler.hasMoments) {
         return;
@@ -20,7 +13,6 @@ const handleClick = () => {
   class="moments-circle"
   class:moments-circle--clickable={handler.hasMoments}
   class:moments-circle--has-unwatched={handler.hasUnwatchedMoments}
-  style={styles}
   onclick={handleClick}
   role="none">
   {#if context.model}
@@ -40,7 +32,7 @@ const handleClick = () => {
   }
 }
 .moments-circle {
-  --_moments-circle--brand-color: var(--moments-circle--brand-color, var(--sc-mc-color--border-brand));
+  --_moments-circle--brand-color: var(--sc-player--brand);
   width: 6.25%rem;
   min-width: 6.25%rem;
   max-width: 6.25%rem;

package/dist/posts/attachments/cmp.attachments.svelte

@@ -2,7 +2,7 @@
 import { AdCard } from '../../ads/ad-card';
 import { PostModel } from '../model';
 import { ProductCard } from '../../products/product-card';
-let { model, colors, trackingParams: externalTrackingParams, locale = 'en', on } = $props();
+let { model, trackingParams: externalTrackingParams, locale = 'en', on } = $props();
 const trackingParams = $derived.by(() => {
     if (externalTrackingParams || externalTrackingParams === false) {
         return externalTrackingParams;
@@ -20,7 +20,6 @@ const trackingParams = $derived.by(() => {
       {#each model.attachments.ads as ad (ad.id)}
         <AdCard
           ad={ad}
-          colors={colors}
           trackingParams={trackingParams}
           locale={locale}
           on={{
@@ -34,7 +33,6 @@ const trackingParams = $derived.by(() => {
       {#each model.attachments.products as product (product.id)}
         <ProductCard
           product={product}
-          colors={colors}
           trackingParams={trackingParams}
           locale={locale}
           on={{
@@ -59,6 +57,11 @@ const trackingParams = $derived.by(() => {
 }
 .post-attachments {
   --_post-attachments--gap: var(--post-attachments--gap, 1.875rem);
+  --product-card--background-color: var(--sc-player--card-background);
+  --product-card--price-color: var(--sc-player--price);
+  --product-card--sale-price-color: var(--sc-player--sale-price);
+  --ad-card--background-color: var(--sc-player--card-background);
+  --ad-card--price-color: var(--sc-player--price);
   display: flex;
   flex-direction: column;
   gap: var(--_post-attachments--gap);

package/dist/posts/attachments/cmp.attachments.svelte.d.ts

@@ -3,12 +3,6 @@ import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 type Props = {
     model: PostModel;
-    colors: {
-        background?: string | null;
-        price?: string | null;
-        salePrice?: string | null;
-        buttonBackground?: string | null;
-    };
     trackingParams: TrackingParams | null;
     locale?: Locale;
     on?: {

package/dist/posts/controls/post-actions-generator.svelte.js

@@ -1,17 +1,16 @@
 import { PostActionsHandler } from './post-actions-handler.svelte';
-import { SvelteMap } from 'svelte/reactivity';
 export class PostActionsGenerator {
     socialInteractionsHandler;
     sharingHandler;
     callbacks;
-    handlers = new SvelteMap();
+    handlers = {};
     constructor(init) {
         this.socialInteractionsHandler = init.socialInteractionsHandler ?? null;
         this.sharingHandler = init.sharingHandler ?? null;
         this.callbacks = init.on;
     }
     getPostActionsHandler = (model) => {
-        let handler = this.handlers.get(model.id);
+        let handler = this.handlers[model.id];
         if (!handler) {
             handler = new PostActionsHandler({
                 post: model,
@@ -21,7 +20,7 @@ export class PostActionsGenerator {
                     shareClicked: this.sharingHandler ? () => this.sharingHandler?.share(model.id) : undefined
                 }
             });
-            this.handlers.set(model.id, handler);
+            this.handlers[model.id] = handler;
         }
         return handler;
     };

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">import { PostType } from '../..';
 import { PostModel } from '../model';
-import { ResponsivePlayerButtonsGroup } from '../../ui/player/button';
+import { ResponsivePlayerButtons } from '../../ui/player/button';
 import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
 import { default as Heading } from './heading.svelte';
 import { default as PostMedia } from './media/post-media.svelte';
 import { default as Texts } from './post-texts.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
-let { model, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', locale = 'en', on, overlay } = $props();
+let { model, trackingParams: externalTrackingParams, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', locale = 'en', on, overlay } = $props();
 const localization = $derived(new PostViewerLocalization(locale));
 const uiManager = new PostViewerUiManager();
 $effect(() => {
@@ -81,11 +81,7 @@ const variables = $derived.by(() => {
 
   {#if uiManager.showControls}
     <div class="post-viewer__controls-panel" use:trackControlsPanelSize>
-      <ResponsivePlayerButtonsGroup
-        actions={controlActions}
-        activeColor={controlsColors?.active ?? null}
-        backgroundColor={controlsColors?.inactive ?? null}
-        scaleEffect={true} />
+      <ResponsivePlayerButtons actions={controlActions} scaleEffect={true} />
     </div>
   {/if}
   {#if overlay}
@@ -123,6 +119,8 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer__controls-panel {
+  --player-button--color: var(--sc-player--button);
+  --player-button--color--inactive: var(--sc-player--button-inactive);
   position: absolute;
   left: auto;
   right: 0;

package/dist/posts/post-viewer/cmp.post-viewer.svelte.d.ts

@@ -8,10 +8,6 @@ type Props = {
     trackingParams: TrackingParams | null;
     enableAttachments?: boolean;
     enableControls?: boolean;
-    controlsColors: {
-        active: string | null;
-        inactive: string | null;
-    } | null;
     controlActions: PlayerButtonDef[];
     autoplay?: true | false | 'on-appearance';
     locale?: Locale;

package/dist/posts/post-viewer/media/post-media.svelte

@@ -46,12 +46,7 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   }
 }
 .post-media {
-  --_post-media--background-color: #ffffff;
-}
-:global([data-theme='dark']) .post-media {
-  --_post-media--background-color: #000000;
-}
-.post-media {
+  --_post-media--background-color: light-dark(#ffffff, #000000);
   width: 100%;
   min-width: 100%;
   max-width: 100%;

package/dist/posts/posts-player/posts-player-proxy.svelte

@@ -1,22 +1,14 @@
-<script lang="ts">import { Theme } from '../../core/theme';
-import {} from '../../ui/player/close-orchestrator';
+<script lang="ts">import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
 import { default as PostsPlayerView } from './posts-player-view.svelte';
-import { untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, sharingHandler, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
 let backgroundImageUrl = $state(null);
 const handleBackgroundImagedLoaded = (url) => {
     backgroundImageUrl = url;
 };
-$effect(() => {
-    void playerSettings?.theme;
-    untrack(() => {
-        Theme.set(playerSettings?.theme ?? 'dark');
-    });
-});
 </script>
 
-<ShadowRoot backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
+<ShadowRoot theme={playerSettings?.theme ?? 'dark'} backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
   <PostsPlayerView
     dataProvider={{ type: 'provider', provider: dataProvider }}
     socialInteractionsHandler={socialInteractionsHandler}