@social-mail/social-mail-client 1.2.768 → 1.2.770

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.768",
+  "version": "1.2.770",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/blocks/ColumnBox.tsx

@@ -13,6 +13,7 @@ StylerSets.register("low", styled.css `
     border-radius: ${stylerVars.sizeDefault};
     justify-items: center;
     align-items: stretch;
+    overflow: hidden;
 
     & > :not([styler-padding]) {
         padding: ${stylerVars.sizeDefault};

package/src/site-editor/blocks/Columns2.tsx

@@ -14,7 +14,7 @@ StylerSets.register("low", styled.css `
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
-    contain: content;
+    overflow: hidden;
 
     @media (max-width: 700px) {
         & {

package/src/site-editor/blocks/Columns3.tsx

@@ -16,7 +16,7 @@ StylerSets.register("low", styled.css `
     justify-content: space-evenly;
     justify-items: center;
     align-items: stretch;
-    contain: content;
+    overflow: hidden;
 
     @media (max-width: 700px) {
         & {

package/src/site-editor/properties/groups/TextPropertyEditor.tsx

@@ -63,6 +63,10 @@ export default function TextPropertyEditor() {
             label="Outline"
             property={properties.stylerTextOutline}
             />
+        <DropDownProperty
+            label="Shadow"
+            property={properties.stylerTextShadow}
+            />
     </ExpanderPropertyEditor>;
 
 }

package/src/site-editor/styler/Styler.ts

@@ -447,11 +447,14 @@ export const createSet = (name: string, values: IStyleValue[], appendGlobals = f
     return r as any;
 };
 
-export const createVarSet = (name: string, values: { name: string, value: string}[], addCustom = true, addDefaults = false) => {
+export const createVarSet = (name: string, values: { name: string, value: string}[], addCustom = true as string | boolean, addDefaults = false) => {
     const r = {
     } as any;
     if (addCustom) {
-        r.custom = styled.css `${name}: var(--styler-${name});`;
+        if (typeof addCustom !== "string") {
+            addCustom = `--styler-${name}`;
+        }
+        r.custom = styled.css `${name}: var(${addCustom});`;
     }
     for (const iterator of values) {
         r[iterator.name] = styled.css `\t${name}: var(--${iterator.name});`.withDescription(iterator.value);
@@ -464,7 +467,6 @@ export const createVarSet = (name: string, values: { name: string, value: string
     return r as any;
 };
 
-
 export const createVarSetWith = (name: string, prefix: string, values: { name: string, value: string}[], addCustom = true) => {
     const r = {
     } as any;

package/src/site-editor/styler/properties/child-size/stylerChildSize.ts

@@ -1,15 +1,15 @@
 import { createVarSet, sizeVarList, StylerProperty } from "../../Styler";
 
 const createDesktopSize = (name: string) => new StylerProperty("styler-desktop-child-" + name,
-    createVarSet(name, sizeVarList)
+    createVarSet(name, sizeVarList, "--styler-desktop-child-"  + name)
 , "", " > *", "@media (min-width: 900px)");
 
 const createTabletSize = (name: string) => new StylerProperty("styler-tablet-child-" + name,
-    createVarSet(name, sizeVarList)
+    createVarSet(name, sizeVarList, "--styler-tablet-child-"  + name)
 , "", " > *", "@media (min-width: 700px)");
 
 const createChildSize = (name: string) => new StylerProperty("styler-all-child-" + name,
-    createVarSet(name, sizeVarList)
+    createVarSet(name, sizeVarList, "--styler-all-child-"  + name)
 , "", " > *");
 
 export const stylerChildSize = {

package/src/site-editor/styler/properties/text/stylerText.ts

@@ -78,6 +78,13 @@ export const stylerText = {
         "pre-wrap"
     ])),
 
+    stylerTextShadow: new StylerProperty("styler-text-shadow", {
+        custom: styled.css `text-shadow: var(--styler-text-shadow);`,
+        thin: styled.css `text-shadow: 0 0 1px var(--text-border-color, darkgray);`,
+        medium: styled.css `text-shadow: 0 0 2px var(--text-border-color, darkgray);`,
+        thick: styled.css `text-shadow: 0 0 4px var(--text-border-color, darkgray);`,
+    } ),
+
     stylerTextOutline: new StylerProperty("styler-text-outline", {
         "thin": styled.css `
             -webkit-text-fill-color: transparent;