` ausgegeben. Der Standardwert von `socialIconsBaseUrl` verweist auf den versionsgebundenen jsDelivr-Mirror von `@templatical/renderer`, der vorgerasterte PNGs (jede `SocialPlatform` × 5 Stile) mit dem Paket ausliefert:
+Social-Icon-Blöcke werden als `
` ausgegeben. `dir` ist bei Markenfarben der Icon-Stil (`circle`) und bei einem `iconTone` von `dark` oder `light` `{style}-{tone}` (`circle-dark`). Der Standardwert von `socialIconsBaseUrl` verweist auf den versionsgebundenen jsDelivr-Mirror von `@templatical/renderer`, der vorgerasterte PNGs (jede `SocialPlatform` × 6 Stile × 3 Farbtöne) mit dem Paket ausliefert:
```
-https://cdn.jsdelivr.net/npm/@templatical/renderer@`. The default `socialIconsBaseUrl` points at the version-pinned jsDelivr mirror of `@templatical/renderer`, which ships pre-rasterized PNGs (every `SocialPlatform` × 5 styles) alongside the package:
+Social icon blocks are emitted as ``. `dir` is the icon style for brand colors (`circle`) and `{style}-{tone}` for an `iconTone` of `dark` or `light` (`circle-dark`). The default `socialIconsBaseUrl` points at the version-pinned jsDelivr mirror of `@templatical/renderer`, which ships pre-rasterized PNGs (every `SocialPlatform` × 6 styles × 3 tones) alongside the package:
```
-https://cdn.jsdelivr.net/npm/@templatical/renderer@
+
+
diff --git a/packages/editor/src/i18n/locales/ca.ts b/packages/editor/src/i18n/locales/ca.ts
index 3066c8950..2cf34b5ed 100644
--- a/packages/editor/src/i18n/locales/ca.ts
+++ b/packages/editor/src/i18n/locales/ca.ts
@@ -298,6 +298,11 @@ const ca: typeof en = {
styleRounded: "Arrodonit",
styleSquare: "Quadrat",
styleCircle: "Cercle",
+ stylePlain: "Simple",
+ color: "Color",
+ colorBrand: "Colors de marca",
+ colorDark: "Fosc",
+ colorLight: "Clar",
size: "Mida",
sizeSmall: "S",
sizeMedium: "M",
diff --git a/packages/editor/src/i18n/locales/de.ts b/packages/editor/src/i18n/locales/de.ts
index 4fcccab3c..020a07d87 100644
--- a/packages/editor/src/i18n/locales/de.ts
+++ b/packages/editor/src/i18n/locales/de.ts
@@ -300,6 +300,11 @@ const de: typeof en = {
styleRounded: "Abgerundet",
styleSquare: "Eckig",
styleCircle: "Rund",
+ stylePlain: "Schlicht",
+ color: "Farbe",
+ colorBrand: "Markenfarben",
+ colorDark: "Dunkel",
+ colorLight: "Hell",
size: "Größe",
sizeSmall: "K",
sizeMedium: "M",
diff --git a/packages/editor/src/i18n/locales/en.ts b/packages/editor/src/i18n/locales/en.ts
index fa4facbac..9c1a2ee62 100644
--- a/packages/editor/src/i18n/locales/en.ts
+++ b/packages/editor/src/i18n/locales/en.ts
@@ -295,6 +295,11 @@ export default {
styleRounded: "Rounded",
styleSquare: "Square",
styleCircle: "Circle",
+ stylePlain: "Plain",
+ color: "Color",
+ colorBrand: "Brand colors",
+ colorDark: "Dark",
+ colorLight: "Light",
size: "Size",
sizeSmall: "S",
sizeMedium: "M",
diff --git a/packages/editor/src/i18n/locales/es.ts b/packages/editor/src/i18n/locales/es.ts
index 26e48e30d..f4c04f81e 100644
--- a/packages/editor/src/i18n/locales/es.ts
+++ b/packages/editor/src/i18n/locales/es.ts
@@ -298,6 +298,11 @@ const es: typeof en = {
styleRounded: "Redondeado",
styleSquare: "Cuadrado",
styleCircle: "Círculo",
+ stylePlain: "Simple",
+ color: "Color",
+ colorBrand: "Colores de marca",
+ colorDark: "Oscuro",
+ colorLight: "Claro",
size: "Tamaño",
sizeSmall: "S",
sizeMedium: "M",
diff --git a/packages/editor/src/i18n/locales/fr.ts b/packages/editor/src/i18n/locales/fr.ts
index 1322ce861..f7e252d45 100644
--- a/packages/editor/src/i18n/locales/fr.ts
+++ b/packages/editor/src/i18n/locales/fr.ts
@@ -263,6 +263,11 @@ const fr: typeof en = {
styleRounded: "Arrondi",
styleSquare: "Carré",
styleCircle: "Cercle",
+ stylePlain: "Simple",
+ color: "Couleur",
+ colorBrand: "Couleurs de marque",
+ colorDark: "Sombre",
+ colorLight: "Clair",
size: "Taille",
sizeSmall: "S",
sizeMedium: "M",
diff --git a/packages/editor/src/i18n/locales/ja.ts b/packages/editor/src/i18n/locales/ja.ts
index 58e6e2ce5..50de8cecd 100644
--- a/packages/editor/src/i18n/locales/ja.ts
+++ b/packages/editor/src/i18n/locales/ja.ts
@@ -249,6 +249,11 @@ const translations: typeof en = {
styleRounded: "角丸",
styleSquare: "四角",
styleCircle: "丸",
+ stylePlain: "アイコンのみ",
+ color: "色",
+ colorBrand: "ブランドカラー",
+ colorDark: "ダーク",
+ colorLight: "ライト",
size: "サイズ",
sizeSmall: "小",
sizeMedium: "中",
diff --git a/packages/editor/src/i18n/locales/nl.ts b/packages/editor/src/i18n/locales/nl.ts
index 943468abe..de7eaa529 100644
--- a/packages/editor/src/i18n/locales/nl.ts
+++ b/packages/editor/src/i18n/locales/nl.ts
@@ -264,6 +264,11 @@ const nl: typeof en = {
styleRounded: "Afgerond",
styleSquare: "Vierkant",
styleCircle: "Cirkel",
+ stylePlain: "Eenvoudig",
+ color: "Kleur",
+ colorBrand: "Merkkleuren",
+ colorDark: "Donker",
+ colorLight: "Licht",
size: "Grootte",
sizeSmall: "S",
sizeMedium: "M",
diff --git a/packages/editor/src/i18n/locales/pt-BR.ts b/packages/editor/src/i18n/locales/pt-BR.ts
index ee68fb700..1734f7116 100644
--- a/packages/editor/src/i18n/locales/pt-BR.ts
+++ b/packages/editor/src/i18n/locales/pt-BR.ts
@@ -297,6 +297,11 @@ const ptBR: typeof en = {
styleRounded: "Arredondado",
styleSquare: "Quadrado",
styleCircle: "Circular",
+ stylePlain: "Simples",
+ color: "Cor",
+ colorBrand: "Cores da marca",
+ colorDark: "Escuro",
+ colorLight: "Claro",
size: "Tamanho",
sizeSmall: "P",
sizeMedium: "M",
diff --git a/packages/editor/tests/socialIconTone.test.ts b/packages/editor/tests/socialIconTone.test.ts
new file mode 100644
index 000000000..331b5a7e7
--- /dev/null
+++ b/packages/editor/tests/socialIconTone.test.ts
@@ -0,0 +1,96 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import {
+ SOCIAL_ICON_GLYPHS,
+ SOCIAL_ICON_TONE_COLORS,
+ type SocialIconTone,
+ type SocialIconStyle,
+} from "@templatical/types";
+import SocialIconSvg from "../src/components/blocks/SocialIconSvg.vue";
+import SocialIconsBlock from "../src/components/blocks/SocialIconsBlock.vue";
+import { mountEditor } from "./helpers/mount";
+import { createSocialIconsBlock } from "@templatical/types";
+
+/**
+ * The canvas draws icons as CSS plus an inline SVG glyph; the renderer sends
+ * PNGs. Both take their colors from `socialIconColors`, so these pin the
+ * canvas side of each style and color against that shared rule.
+ */
+
+function draw(iconStyle: SocialIconStyle, iconTone?: SocialIconTone) {
+ const wrapper = mount(SocialIconSvg, {
+ props: { platform: "github", iconStyle, iconTone, iconSize: "medium" },
+ });
+ const box = wrapper.find("span").element as HTMLElement;
+ const svg = wrapper.find("svg");
+ return {
+ background: box.style.backgroundColor,
+ border: box.style.border,
+ glyph: svg.attributes("fill"),
+ glyphSize: svg.attributes("width"),
+ };
+}
+
+/** A hex color as the DOM reports it back from an inline style. */
+function css(hex: string): string {
+ const el = document.createElement("span");
+ el.style.backgroundColor = hex;
+ return el.style.backgroundColor;
+}
+
+describe("SocialIconSvg colors", () => {
+ it("keeps the brand look when no color is set", () => {
+ expect(draw("circle")).toMatchObject({
+ background: css(SOCIAL_ICON_GLYPHS.github.color),
+ glyph: "#ffffff",
+ });
+ expect(draw("circle")).toEqual(draw("circle", "brand"));
+ });
+
+ it("fills a badge with the tone and keeps the glyph white", () => {
+ expect(draw("rounded", "dark")).toMatchObject({
+ background: css(SOCIAL_ICON_TONE_COLORS.dark),
+ glyph: "#ffffff",
+ });
+ });
+
+ it("puts a near-black glyph on a light badge", () => {
+ expect(draw("solid", "light").glyph).toBe(SOCIAL_ICON_TONE_COLORS.dark);
+ });
+
+ it("draws an outline and its glyph in the tone", () => {
+ const { border, glyph } = draw("outlined", "dark");
+ expect(glyph).toBe(SOCIAL_ICON_TONE_COLORS.dark);
+ const probe = document.createElement("span");
+ probe.style.border = `2px solid ${SOCIAL_ICON_TONE_COLORS.dark}`;
+ expect(border).toBe(probe.style.border);
+ });
+
+ it("draws a plain icon as a larger glyph in the tone, with no badge", () => {
+ const plain = draw("plain", "light");
+ expect(plain.background).toBe("");
+ expect(plain.border).toBe("");
+ expect(plain.glyph).toBe(SOCIAL_ICON_TONE_COLORS.light);
+ // 84% of the 32px icon, against 60% inside a badge.
+ expect(plain.glyphSize).toBe("26");
+ expect(draw("circle").glyphSize).toBe("19");
+ });
+});
+
+describe("SocialIconsBlock", () => {
+ it("hands the block's tone to every icon it draws", () => {
+ const block = createSocialIconsBlock({
+ icons: [{ platform: "github", url: "https://github.com" }],
+ iconStyle: "plain",
+ iconTone: "light",
+ });
+ const wrapper = mountEditor(SocialIconsBlock, {
+ props: { block, viewport: "desktop" },
+ });
+
+ expect(wrapper.find("svg").attributes("fill")).toBe(
+ SOCIAL_ICON_TONE_COLORS.light,
+ );
+ });
+});
diff --git a/packages/editor/tests/socialToolbar.test.ts b/packages/editor/tests/socialToolbar.test.ts
index d0b4e920a..689a8a817 100644
--- a/packages/editor/tests/socialToolbar.test.ts
+++ b/packages/editor/tests/socialToolbar.test.ts
@@ -95,3 +95,30 @@ describe('SocialToolbar CRUD', () => {
expect(update.icons![0].id).toBe('b');
});
});
+
+describe('SocialToolbar style and color', () => {
+ it('offers the plain style', () => {
+ const wrapper = mountIt(withIcons([]));
+ const values = wrapper
+ .findAll('option')
+ .map((o) => (o.element as HTMLOptionElement).value);
+ expect(values).toContain('plain');
+ });
+
+ it('shows brand for a block with no color and emits the chosen tone', async () => {
+ // Content saved before iconTone existed has no such field.
+ const { iconTone: _absent, ...legacy } = withIcons([]);
+ const wrapper = mountIt(legacy as SocialIconsBlock);
+ const select = wrapper.find('[data-testid="social-tone-select"]');
+ expect((select.element as HTMLSelectElement).value).toBe('brand');
+ expect(
+ select.findAll('option').map((o) => (o.element as HTMLOptionElement).value),
+ ).toEqual(['brand', 'dark', 'light']);
+
+ await select.setValue('light');
+ const [update] = wrapper.emitted('update')!.at(-1) as [
+ Partial,
+ ];
+ expect(update).toEqual({ iconTone: 'light' });
+ });
+});
diff --git a/packages/import-mjml/src/__tests__/composite-mapper.test.ts b/packages/import-mjml/src/__tests__/composite-mapper.test.ts
index d0ec1ed0b..636aea8b8 100644
--- a/packages/import-mjml/src/__tests__/composite-mapper.test.ts
+++ b/packages/import-mjml/src/__tests__/composite-mapper.test.ts
@@ -97,6 +97,24 @@ describe("mj-social", () => {
expect(block.spacing).toBe(14);
});
+ it("reads the style and tone from a one-tone icon folder", () => {
+ const styleOf = (dir: string) => {
+ const block = convert(
+ `
+ `,
+ "mj-social",
+ ).result.block as SocialIconsBlock;
+ return [block.iconStyle, block.iconTone];
+ };
+
+ expect(styleOf("circle-dark")).toEqual(["circle", "dark"]);
+ expect(styleOf("plain-light")).toEqual(["plain", "light"]);
+ expect(styleOf("plain")).toEqual(["plain", undefined]);
+ // An unknown tone is not a Templatical folder: the radius decides.
+ expect(styleOf("rounded-neon")).toEqual(["circle", undefined]);
+ });
+
it("maps x to twitter and strips a -noshare suffix", () => {
const { result } = convert(
`
diff --git a/packages/import-mjml/src/__tests__/round-trip.test.ts b/packages/import-mjml/src/__tests__/round-trip.test.ts
index 0af053595..2157292c8 100644
--- a/packages/import-mjml/src/__tests__/round-trip.test.ts
+++ b/packages/import-mjml/src/__tests__/round-trip.test.ts
@@ -114,6 +114,7 @@ function buildFixtureTemplate(): TemplateContent {
},
],
iconStyle: "circle",
+ iconTone: "dark",
iconSize: "medium",
spacing: 14,
}),
diff --git a/packages/import-mjml/src/composite-mapper.ts b/packages/import-mjml/src/composite-mapper.ts
index 01cf9011f..af0c7d4aa 100644
--- a/packages/import-mjml/src/composite-mapper.ts
+++ b/packages/import-mjml/src/composite-mapper.ts
@@ -4,10 +4,13 @@ import {
createSocialIconsBlock,
createTableBlock,
generateId,
+ SOCIAL_ICON_TONES,
+ SOCIAL_ICON_STYLES,
} from "@templatical/types";
import type {
MenuItemData,
SocialIcon,
+ SocialIconTone,
SocialIconSize,
SocialIconStyle,
SocialPlatform,
@@ -99,7 +102,7 @@ function normalizePlatform(raw: string): SocialPlatform | null {
return null;
}
-/** The `