@streamscloud/embeddable 14.0.3 → 14.0.4

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -109,14 +109,13 @@ const variables = $derived.by(() => {
     <div
       class="attachments-horizontal__item"
       class:attachments-horizontal__item--single={attachmentsToShow.length === 1}
-      data-theme={attachment.isAd ? 'default' : 'dark'}
       onclick={() => handleAttachmentClick(attachment)}
       onkeydown={() => {}}
       role="none"
       bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${attachment.adId}`]}
       data-product-id={attachment.productId || undefined}
       data-ad-id={attachment.adId || undefined}>
-      <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1}>
+      <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1} class:attachments-card--dark={!attachment.isAd}>
         <div class="attachments-card__thumb">
           <ImageRounded src={attachment.image} alt="" noBorders={true} />
         </div>
@@ -187,17 +186,27 @@ const variables = $derived.by(() => {
 }
 
 .attachments-card {
+  --_attachments-card--background-color: #ffffff;
+  --_attachments-card--border-color: #f2f2f2;
+  --_attachments-card--text--color: #000000;
+  --_attachments-card--text--secondary--color: #6b7280;
   display: grid;
   grid-template-columns: 2.375rem 1fr;
   grid-column-gap: 0.75rem;
   align-items: center;
   width: 15.625rem;
   padding: 0.375rem;
-  background-color: rgb(from var(--sc-mc-color--bg-card) r g b/90%);
-  color: var(--sc-mc-color--text-primary);
-  border: 0.0625rem solid var(--sc-mc-color--border-card);
+  background-color: rgb(from var(--_attachments-card--background-color) r g b/90%);
+  color: var(--_attachments-card--text--color);
+  border: 0.0625rem solid var(--_attachments-card--border-color);
   border-radius: 0.25rem;
 }
+.attachments-card--dark {
+  --_attachments-card--background-color: #000000;
+  --_attachments-card--border-color: #000000;
+  --_attachments-card--text--color: #ffffff;
+  --_attachments-card--text--secondary--color: #d1d5db;
+}
 .attachments-card--single {
   width: 100%;
 }
@@ -222,7 +231,7 @@ const variables = $derived.by(() => {
 }
 .attachments-card__extra-info {
   font-size: 0.625rem;
-  color: var(--sc-mc-color--text-secondary);
+  color: var(--_attachments-card--text--secondary--color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

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

@@ -41,6 +41,8 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer-heading {
+  --_post-viewer-heading-texts--color: #ffffff;
+  --_post-viewer-heading--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);
   display: flex;
   align-items: center;
   padding: var(--_post-viewer--heading--padding);
@@ -67,8 +69,8 @@ const variables = $derived.by(() => {
   font-size: 0.75rem;
   line-height: 0.9375rem;
   font-weight: 500;
-  color: var(--sc-mc-color--text-white);
-  text-shadow: var(--sc-mc-color--text-white-shadow);
+  color: var(--_post-viewer-heading-texts--color);
+  text-shadow: var(--_post-viewer-heading--text--shadow);
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
@@ -79,6 +81,6 @@ const variables = $derived.by(() => {
   font-size: 0.625rem;
   line-height: 0.75rem;
   font-weight: 400;
-  color: var(--sc-mc-color--text-white);
-  text-shadow: var(--sc-mc-color--text-white-shadow);
+  color: var(--_post-viewer-heading-texts--color);
+  text-shadow: var(--_post-viewer-heading--text--shadow);
 }</style>

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

@@ -46,13 +46,17 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   }
 }
 .post-media {
+  --_post-media--background-color: #ffffff;
   width: 100%;
   min-width: 100%;
   max-width: 100%;
   height: 100%;
   min-height: 100%;
   max-height: 100%;
-  background-color: rgb(from var(--sc-mc-color--bg-panel) r g b/60%);
+  background-color: rgb(from var(--_post-media--background-color) r g b/60%);
+}
+:global([data-theme="dark"]) .post-media {
+  --_post-media--background-color: #000000;
 }
 .post-media--fit {
   --video--media-fit: contain;

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

@@ -45,8 +45,10 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer-texts {
-  color: var(--sc-mc-color--text-white);
-  text-shadow: var(--sc-mc-color--text-white-shadow);
+  --_post-viewer-texts--color: #ffffff;
+  --_post-viewer-texts--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);
+  color: var(--_post-viewer-texts--color);
+  text-shadow: var(--_post-viewer-texts--shadow);
   padding: var(--_post-viewer-texts--padding);
   display: flex;
   flex-direction: column;

package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">var _a;
 import { StockStreamElementLocalization } from './stock-stream-element-localization';
 import { StockStreamElementLevel } from '../enums';
-import { mapFlexJustifyContent, transformNumericValue } from '../styles-transformer';
+import { mapFlexJustifyContent, transformNumericValue, transformTextColorValue } from '../styles-transformer';
 let { model, heightOverrideDdu, locale } = $props();
 const localization = $derived(new StockStreamElementLocalization(locale));
 const height = $derived(heightOverrideDdu || ((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
@@ -19,7 +19,8 @@ const dotCustomStyles = $derived.by(() => {
     return values.join('');
 });
 const quantityCustomStyles = $derived.by(() => {
-    const values = [`font-size: ${transformNumericValue(height * 0.75)};`];
+    var _a;
+    const values = [`font-size: ${transformNumericValue(height * 0.75)};`, `color: ${transformTextColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.color)};`];
     return values.join('');
 });
 </script>

package/dist/streams/layout/element-views/price-element-view.svelte

@@ -12,7 +12,7 @@ import { toPriceRepresentation } from '../../../products/price-helper';
 import { LineClamp } from '../../../ui/line-clamp';
 import { PriceStreamElementLocalization } from './price-stream-element-localization';
 import { default as StockElementView } from './cmp.stock-stream-element.svelte';
-import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
+import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformTextColorValue, transformBackgroundColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
 let { maxElementHeight, model, data, localization, on } = $props();
 let priceElementRef = $state.raw(null);
 let priceContainerRef = $state.raw(null);
@@ -62,7 +62,7 @@ const priceCustomStyles = $derived.by(() => {
         `font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
         `line-height: ${lineHeight};`,
         `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
-        `color: ${transformColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
+        `color: ${transformTextColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
     ];
     return values.join('');
 });
@@ -74,8 +74,8 @@ const saveValueCustomStyles = $derived.by(() => {
         `font-weight: 500;`,
         `padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
         `border-radius: ${transformNumericValue(priceHeight / 8)};`,
-        `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
-        `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
+        `background-color: ${transformBackgroundColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
+        `color: ${transformTextColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
     ];
     return values.join('');
 });
@@ -84,7 +84,7 @@ const beforeValueCustomStyles = $derived.by(() => {
     const values = [
         `font-size: ${transformFontSizeValue(priceHeight / 5)};`,
         `font-weight: 500;`,
-        `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
+        `color: ${transformTextColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
     ];
     return values.join('');
 });

package/dist/streams/layout/styles-transformer.d.ts

@@ -13,4 +13,5 @@ export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | n
 export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "flex-start" | "flex-end";
 export declare const transformFontSizeValue: (value: number | null | undefined) => string;
 export declare const transformNumericValue: (value: number | null | undefined, fallback?: string) => string;
-export declare const transformColorValue: (value: string | null | undefined) => string;
+export declare const transformTextColorValue: (value: string | null | undefined) => string;
+export declare const transformBackgroundColorValue: (value: string | null | undefined) => string;

package/dist/streams/layout/styles-transformer.js

@@ -4,7 +4,7 @@ export const generateStreamLayoutStyles = (styles) => {
     if (!styles) {
         return '';
     }
-    const values = [`background-color: ${transformColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
+    const values = [`background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
     return values.join(';');
 };
 export const generateContainerStyles = (styles) => {
@@ -20,10 +20,10 @@ export const generateContainerStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `border-width: ${styles.borderColor ? '1px' : '0'}`,
         `border-radius: ${transformNumericValue(styles.borderRadius)}`,
-        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `border-color: ${transformBackgroundColorValue(styles.borderColor)}`,
         `overflow: ${styles.borderRadius ? 'hidden' : 'visible'}`
     ];
     if (styles.direction) {
@@ -49,11 +49,11 @@ export const generateButtonStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `color: ${transformColorValue(styles.textColor)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `color: ${transformTextColorValue(styles.textColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `border-width: ${styles.borderColor ? '1px' : '0'}`,
         `border-radius: ${transformNumericValue(styles.borderRadius)}`,
-        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `border-color: ${transformBackgroundColorValue(styles.borderColor)}`,
         `overflow: hidden`
     ];
     return values.join(';');
@@ -94,7 +94,7 @@ export const generateProductsSliderStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `overflow-x: auto`,
         `overflow-y: hidden`,
         `scrollbar-width: none`,
@@ -111,7 +111,7 @@ export const generateTextStyles = (styles) => {
         `font-weight: ${mapFontWeight(styles.fontWeight)}`,
         `line-height: ${transformNumericValue(styles.lineHeight, '1.2')}`,
         `text-align: ${mapTextAlign(styles.textAlign)}`,
-        `color: ${transformColorValue(styles.color)}`
+        `color: ${transformTextColorValue(styles.color)}`
     ];
     return values.join(';');
 };
@@ -203,7 +203,13 @@ export const transformNumericValue = (value, fallback = '0') => {
     }
     return `${(value / baseContainerWidth) * 100}cqi`;
 };
-export const transformColorValue = (value) => {
+export const transformTextColorValue = (value) => {
+    if (value === null || value === undefined) {
+        return '#000000';
+    }
+    return value;
+};
+export const transformBackgroundColorValue = (value) => {
     if (value === null || value === undefined) {
         return 'transparent';
     }

package/dist/streams/layout/styles.d.ts

@@ -66,6 +66,7 @@ export type ProductsSliderStreamElementStyles = {
 export type StockStreamElementStyles = {
     height?: number | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;
+    color?: string | null;
 };
 export type TextStreamElementStyles = {
     fontSize?: number | null;

package/package.json

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