@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/services/export-png/sceneSvg.js

@@ -0,0 +1,315 @@
+import { TextFontFamily } from "../../styles/fonts.styles.js";
+//#region src/services/export-png/sceneSvg.ts
+var PLACEMENT = [
+	"x",
+	"y",
+	"scaleX",
+	"scaleY",
+	"offsetX",
+	"offsetY",
+	"rotation",
+	"visible",
+	"opacity"
+];
+var CLIP = [
+	"clipX",
+	"clipY",
+	"clipWidth",
+	"clipHeight"
+];
+var PAINT = [
+	"fill",
+	"stroke",
+	"strokeWidth",
+	"dash",
+	"lineCap",
+	"lineJoin"
+];
+[...PLACEMENT, ...CLIP], [...PLACEMENT, ...CLIP], [...PLACEMENT, ...PAINT], [...PLACEMENT], [...PLACEMENT, ...PAINT], [...PLACEMENT, ...PAINT], [...PLACEMENT, ...PAINT];
+var NO_PAINT = /* @__PURE__ */ new Set([
+	"",
+	"none",
+	"transparent"
+]);
+var HEX_WITH_ALPHA = /^#([0-9a-f]{4}|[0-9a-f]{8})$/i;
+var CHANNELS = /^(rgb|hsl)a?\((.*)\)$/i;
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+var ESCAPES = {
+	"&": "&",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+var CLIP_TAG = "\0";
+function num(value, digits = 3) {
+	const factor = 10 ** digits;
+	const rounded = Math.round(value * factor) / factor;
+	return String(rounded === 0 ? 0 : rounded);
+}
+function isXmlChar(code) {
+	return code === 9 || code === 10 || code === 13 || code >= 32 && code !== 65534 && code !== 65535;
+}
+function escapeXml(value) {
+	let escaped = "";
+	for (const char of value) if (isXmlChar(char.codePointAt(0) ?? 0)) escaped += ESCAPES[char] ?? char;
+	return escaped;
+}
+function attr(name, value) {
+	return ` ${name}="${escapeXml(String(value))}"`;
+}
+function readAlpha(value) {
+	const alpha = value.endsWith("%") ? Number.parseFloat(value) / 100 : Number.parseFloat(value);
+	return Number.isNaN(alpha) ? 1 : Math.min(Math.max(alpha, 0), 1);
+}
+function splitAlpha(color) {
+	const hex = HEX_WITH_ALPHA.exec(color);
+	if (hex) {
+		const digits = hex[1].toLowerCase();
+		const full = digits.length === 4 ? Array.from(digits, (digit) => digit + digit).join("") : digits;
+		return {
+			color: `#${full.slice(0, 6)}`,
+			alpha: Number.parseInt(full.slice(6), 16) / 255
+		};
+	}
+	const channels = CHANNELS.exec(color);
+	if (!channels) return {
+		color,
+		alpha: 1
+	};
+	const [values, slashed] = channels[2].split("/");
+	const parts = values.split(/[\s,]+/).filter(Boolean);
+	const alpha = slashed ?? (parts.length === 4 ? parts[3] : void 0);
+	if (alpha === void 0) return {
+		color,
+		alpha: 1
+	};
+	return {
+		color: `${channels[1].toLowerCase()}(${parts.slice(0, 3).join(",")})`,
+		alpha: readAlpha(alpha.trim())
+	};
+}
+function toPaint(color) {
+	if (typeof color !== "string") return null;
+	const trimmed = color.trim();
+	if (NO_PAINT.has(trimmed.toLowerCase())) return null;
+	const split = splitAlpha(trimmed);
+	const opacity = Number(num(split.alpha));
+	return opacity > 0 ? {
+		color: split.color,
+		opacity
+	} : null;
+}
+function paintAttribute(name, { color, opacity }) {
+	return attr(name, color) + (opacity < 1 ? attr(`${name}-opacity`, opacity) : "");
+}
+function transformAttribute([a, b, c, d, e, f]) {
+	const linear = [
+		a,
+		b,
+		c,
+		d
+	].map((value) => num(value, 6)).join(" ");
+	const move = `${num(e)} ${num(f)}`;
+	if (linear === "1 0 0 1") return move === "0 0" ? "" : attr("transform", `translate(${move})`);
+	return attr("transform", `matrix(${linear} ${move})`);
+}
+function transformOf(node) {
+	return transformAttribute(node.getTransform().getMatrix());
+}
+function layerTransformOf(node, { box, scale }) {
+	const [a, b, c, d, e, f] = node.getTransform().getMatrix();
+	return transformAttribute([
+		a / scale,
+		b / scale,
+		c / scale,
+		d / scale,
+		e / scale + box.x,
+		f / scale + box.y
+	]);
+}
+function opacityOf(node) {
+	return node.opacity() < 1 ? attr("opacity", num(node.opacity())) : "";
+}
+function clipOf(node, writer) {
+	const width = node.clipWidth();
+	const height = node.clipHeight();
+	if (!width || !height) return "";
+	const id = `erd-clip-${CLIP_TAG}-${writer.clips.length + 1}`;
+	const box = attr("x", num(node.clipX() ?? 0)) + attr("y", num(node.clipY() ?? 0)) + attr("width", num(width)) + attr("height", num(height));
+	writer.clips.push(`<clipPath id="${id}"><rect${box}/></clipPath>`);
+	return ` clip-path="url(#${id})"`;
+}
+function clipTagOf(clips) {
+	let hash = 2166136261;
+	for (const clip of clips) for (let index = 0; index < clip.length; index++) hash = Math.imul(hash ^ clip.charCodeAt(index), 16777619);
+	return (hash >>> 0).toString(36);
+}
+function writeContainer(node, writer, transform) {
+	const children = node.getChildren().map((child) => writeNode(child, writer)).join("");
+	if (!children) return "";
+	const attributes = transform + opacityOf(node) + clipOf(node, writer);
+	return attributes ? `<g${attributes}>${children}</g>` : children;
+}
+function paintOf(node, fillable) {
+	const fill = fillable ? toPaint(node.fill()) : null;
+	const strokeWidth = node.strokeWidth();
+	const stroke = strokeWidth ? toPaint(node.stroke()) : null;
+	if (!fill && !stroke) return null;
+	let paint = fill ? paintAttribute("fill", fill) : attr("fill", "none");
+	if (!stroke) return paint;
+	paint += paintAttribute("stroke", stroke) + attr("stroke-width", num(strokeWidth));
+	const dash = node.dash();
+	if (dash?.length) paint += attr("stroke-dasharray", dash.map((value) => num(value)).join(" "));
+	const lineCap = node.lineCap();
+	if (lineCap && lineCap !== "butt") paint += attr("stroke-linecap", lineCap);
+	const lineJoin = node.lineJoin();
+	if (lineJoin && lineJoin !== "miter") paint += attr("stroke-linejoin", lineJoin);
+	return paint;
+}
+function writeShape(node, tag, geometry, fillable = true) {
+	const paint = paintOf(node, fillable);
+	if (!paint) return "";
+	return `<${tag}${transformOf(node)}${opacityOf(node)}${geometry}${paint}/>`;
+}
+function cornerRadii(cornerRadius, width, height) {
+	const most = Math.min(width / 2, height / 2);
+	return (Array.isArray(cornerRadius) ? [
+		0,
+		1,
+		2,
+		3
+	].map((index) => cornerRadius[index] || 0) : [
+		cornerRadius,
+		cornerRadius,
+		cornerRadius,
+		cornerRadius
+	]).map((radius) => Math.min(radius, most));
+}
+function roundedRectD(x, y, width, height, [topLeft, topRight, bottomRight, bottomLeft]) {
+	const arc = (radius, toX, toY) => `A${num(radius)} ${num(radius)} 0 0 1 ${num(toX)} ${num(toY)}`;
+	return [
+		`M${num(x + topLeft)} ${num(y)}`,
+		`H${num(x + width - topRight)}`,
+		arc(topRight, x + width, y + topRight),
+		`V${num(y + height - bottomRight)}`,
+		arc(bottomRight, x + width - bottomRight, y + height),
+		`H${num(x + bottomLeft)}`,
+		arc(bottomLeft, x, y + height - bottomLeft),
+		`V${num(y + topLeft)}`,
+		arc(topLeft, x + topLeft, y),
+		"Z"
+	].join("");
+}
+function writeRect(node) {
+	const x = Math.min(node.width(), 0);
+	const y = Math.min(node.height(), 0);
+	const width = Math.abs(node.width());
+	const height = Math.abs(node.height());
+	const radii = cornerRadii(node.cornerRadius(), width, height);
+	const [radius] = radii;
+	if (radii.some((value) => value !== radius)) return writeShape(node, "path", attr("d", roundedRectD(x, y, width, height, radii)));
+	return writeShape(node, "rect", (x ? attr("x", num(x)) : "") + (y ? attr("y", num(y)) : "") + attr("width", num(width)) + attr("height", num(height)) + (radius > 0 ? attr("rx", num(radius)) : ""));
+}
+function writePath(node) {
+	return writeShape(node, "path", attr("d", node.data()));
+}
+function writeCircle(node) {
+	return writeShape(node, "circle", attr("r", num(node.radius())));
+}
+function writeLine(node) {
+	const points = node.points();
+	if (points.length < 4) return "";
+	const pairs = [];
+	for (let index = 0; index + 1 < points.length; index += 2) pairs.push(`${num(points[index])},${num(points[index + 1])}`);
+	const closed = node.closed();
+	return writeShape(node, closed ? "polygon" : "polyline", attr("points", pairs.join(" ")), closed);
+}
+function fontStyleOf(fontStyle) {
+	let attributes = "";
+	for (const token of fontStyle.trim().split(/\s+/)) if (token === "italic" || token === "oblique") attributes += attr("font-style", token);
+	else if (token && token !== "normal") attributes += attr("font-weight", token);
+	return attributes;
+}
+function alignYOf(verticalAlign, room) {
+	switch (verticalAlign) {
+		case "middle": return room / 2;
+		case "bottom": return room;
+		default: return 0;
+	}
+}
+function anchorOf(align, width, padding) {
+	switch (align) {
+		case "right": return {
+			x: width - padding,
+			attribute: attr("text-anchor", "end")
+		};
+		case "center": return {
+			x: width / 2,
+			attribute: attr("text-anchor", "middle")
+		};
+		default: return {
+			x: padding,
+			attribute: ""
+		};
+	}
+}
+function writeText(node) {
+	const fill = toPaint(node.fill());
+	if (!fill || !node.text()) return "";
+	const lines = node.textArr;
+	const fontSize = node.fontSize();
+	const lineHeight = node.lineHeight() * fontSize;
+	const padding = node.padding();
+	const metrics = node.measureSize("M");
+	const baseline = (metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2 + lineHeight / 2;
+	const room = node.getHeight() - lines.length * lineHeight - padding * 2;
+	const alignY = alignYOf(node.verticalAlign(), room);
+	const anchor = anchorOf(node.align(), node.getWidth(), padding);
+	const spans = lines.map(({ text }, index) => ({
+		text,
+		y: padding + alignY + baseline + index * lineHeight
+	})).filter(({ text }) => text);
+	if (!spans.length) return "";
+	const fontFamily = node.fontFamily();
+	const font = (fontFamily === "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Open Sans', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'" ? "" : attr("font-family", fontFamily)) + (fontSize === 12 ? "" : attr("font-size", num(fontSize))) + fontStyleOf(node.fontStyle());
+	const open = `<text${transformOf(node)}${opacityOf(node)}${font}${anchor.attribute}${paintAttribute("fill", fill)}`;
+	const x = attr("x", num(anchor.x));
+	if (spans.length === 1) {
+		const [{ text, y }] = spans;
+		return `${open}${x}${attr("y", num(y))}>${escapeXml(text)}</text>`;
+	}
+	return `${open}>${spans.map(({ text, y }) => `<tspan${x}${attr("y", num(y))}>${escapeXml(text)}</tspan>`).join("")}</text>`;
+}
+function writeNode(node, writer) {
+	if (!node.visible() || node.opacity() === 0) return "";
+	const kind = node.getClassName();
+	switch (kind) {
+		case "Layer": return writeContainer(node, writer, layerTransformOf(node, writer));
+		case "Group": return writeContainer(node, writer, transformOf(node));
+		case "Rect": return writeRect(node);
+		case "Text": return writeText(node);
+		case "Path": return writePath(node);
+		case "Line": return writeLine(node);
+		case "Circle": return writeCircle(node);
+	}
+	throw new Error(`[export-svg] no svg element is written for a konva ${kind}`);
+}
+function toSceneSvg(stage, options) {
+	const { box } = options;
+	const writer = {
+		...options,
+		clips: []
+	};
+	const body = stage.getChildren().map((layer) => writeNode(layer, writer)).join("");
+	const defs = writer.clips.length ? `<defs>${writer.clips.join("")}</defs>` : "";
+	const viewBox = [
+		box.x,
+		box.y,
+		box.width,
+		box.height
+	].map((value) => num(value)).join(" ");
+	return `<svg${attr("xmlns", SVG_NAMESPACE) + attr("width", num(box.width)) + attr("height", num(box.height)) + attr("viewBox", viewBox) + attr("font-family", TextFontFamily) + attr("font-size", num(12)) + attr("xml:space", "preserve")}>${defs}${body}</svg>`.replaceAll(CLIP_TAG, clipTagOf(writer.clips));
+}
+//#endregion
+export { toPaint, toSceneSvg };

package/dist/services/export-png/textWidth.js

@@ -0,0 +1,12 @@
+import { TextFontFamily } from "../../styles/fonts.styles.js";
+`${TextFontFamily}`;
+var FONT_PROBE_TEXTS = [
+	"ERD editor 0123456789",
+	"가나다 漢字 テスト",
+	"—…€· iIlL1"
+];
+function measureFontProbe(toWidth) {
+	return FONT_PROBE_TEXTS.map((text) => toWidth(text));
+}
+//#endregion
+export { FONT_PROBE_TEXTS, measureFontProbe };

package/dist/services/export-png/toImage.d.ts

@@ -0,0 +1,27 @@
+/** The Export image dialog's options, which open as the dialog does but light. */
+export type ToImageOptions = {
+    format: 'png' | 'svg';
+    /** Whether the canvas colour is painted behind the diagram; on by default, off leaves it transparent. */
+    background?: boolean;
+    /** Whether the diagram is drawn dark; off by default, so every machine draws a document alike. */
+    darkMode?: boolean;
+    /** The png's pixels per scene unit, 2 by default; an svg, sized by its box alone, takes none. */
+    scale?: 1 | 2 | 3;
+};
+/**
+ * Draws a document as a png or an svg, with the Export image dialog's options
+ * and at 100% whatever zoom it was saved with, as the dialog does. It needs a
+ * browser, and rejects text the parser cannot read or a value the dialog lacks.
+ *
+ * @example
+ * const png = await toImage(value, { format: 'png', darkMode: true, scale: 3 });
+ * const svg = await toImage(value, { format: 'svg', background: false });
+ */
+export declare function toImage(value: string, options: ToImageOptions & {
+    format: 'png';
+}): Promise<Blob>;
+export declare function toImage(value: string, options: ToImageOptions & {
+    format: 'svg';
+}): Promise<string>;
+export declare function toImage(value: string, options: ToImageOptions): Promise<Blob | string>;
+//# sourceMappingURL=toImage.d.ts.map

package/dist/services/export-png/toImage.js

@@ -0,0 +1,49 @@
+import { parser } from "../../erd-editor-schema/dist/parser.js";
+import { AccentColor, Appearance, GrayColor, createTheme } from "../../themes/radix-ui-theme.js";
+import { createDocumentPng, createDocumentSvg } from "./index.js";
+import { TRANSPARENT_BACKGROUND } from "./exportTheme.js";
+import { createText } from "../../utils/text.js";
+import { toLoadValue } from "../../utils/loadValue.js";
+import { isString } from "es-toolkit";
+//#region src/services/export-png/toImage.ts
+var SCALES = [
+	1,
+	2,
+	3
+];
+var DEFAULT_SCALE = 2;
+function assertOption(valid, name, value) {
+	if (!valid) throw new TypeError(`toImage: ${name} cannot be ${String(value)}`);
+}
+function toTheme(darkMode, background) {
+	const theme = createTheme({
+		grayColor: GrayColor.slate,
+		accentColor: AccentColor.indigo,
+		appearance: darkMode ? Appearance.dark : Appearance.light
+	});
+	return background ? theme : {
+		...theme,
+		canvasBackground: TRANSPARENT_BACKGROUND
+	};
+}
+async function toImage(value, { format, background = true, darkMode = false, scale = DEFAULT_SCALE }) {
+	if (typeof document === "undefined") throw new Error("toImage needs a browser, since it draws on a canvas");
+	if (!isString(value)) throw new TypeError("toImage: value is a document's JSON text");
+	assertOption(format === "png" || format === "svg", "format", format);
+	assertOption(typeof background === "boolean", "background", background);
+	assertOption(typeof darkMode === "boolean", "darkMode", darkMode);
+	assertOption(SCALES.includes(scale), "scale", scale);
+	const doc = toLoadValue(value);
+	parser(doc);
+	const request = {
+		doc,
+		theme: toTheme(darkMode, background),
+		toWidth: createText().toWidth
+	};
+	return format === "png" ? createDocumentPng({
+		...request,
+		pixelRatio: scale
+	}) : createDocumentSvg(request);
+}
+//#endregion
+export { toImage };

package/dist/services/shiki/index.js

@@ -0,0 +1,24 @@
+import { spawnShikiWorker } from "../../workers/shiki.spawn.js";
+import * as Comlink from "comlink";
+//#region src/services/shiki/index.ts
+var WORKER_NAME = `@dineug/erd-editor-shiki-worker?v5.0.0`;
+var service = null;
+var attempted = false;
+function getShikiService() {
+	if (attempted) return service;
+	attempted = true;
+	try {
+		const worker = spawnShikiWorker(WORKER_NAME);
+		worker.onerror = () => {
+			console.warn("[shiki] the shared worker failed to start");
+			worker.port.close();
+			service = null;
+		};
+		service = Comlink.wrap(worker.port);
+	} catch (error) {
+		console.warn("[shiki] this host built no shared worker", error);
+	}
+	return service;
+}
+//#endregion
+export { getShikiService };

package/dist/styles/elevation.styles.js

@@ -0,0 +1,9 @@
+import { css } from "../r-html/dist/template/css.js";
+//#region src/styles/elevation.styles.ts
+var floatingShadow = css`
+  box-shadow:
+    0 10px 38px -10px rgba(14, 18, 22, 0.35),
+    0 10px 20px -15px rgba(14, 18, 22, 0.2);
+`;
+//#endregion
+export { floatingShadow };

package/dist/styles/fonts.styles.js

@@ -0,0 +1,12 @@
+import { css } from "../r-html/dist/template/css.js";
+//#region src/styles/fonts.styles.ts
+var TextFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Open Sans', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+var CodeFontFamily = "'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji'";
+var fontsStyle = css.global`
+  :host {
+    --text-font-family: ${TextFontFamily};
+    --code-font-family: ${CodeFontFamily};
+  }
+`;
+//#endregion
+export { CodeFontFamily, TextFontFamily, fontsStyle };

package/dist/styles/reset.styles.js

@@ -0,0 +1,104 @@
+import { css } from "../r-html/dist/template/css.js";
+//#region src/styles/reset.styles.ts
+var resetStyle = css.global`
+  p,
+  ol,
+  ul,
+  li,
+  dl,
+  dt,
+  dd,
+  blockquote,
+  figure,
+  fieldset,
+  legend,
+  textarea,
+  pre,
+  iframe,
+  hr,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: 100%;
+    font-weight: normal;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    padding: 0;
+    border: none;
+    outline: none;
+    font-family: var(--text-font-family);
+    color: var(--active);
+    background-color: inherit;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    font-family: var(--text-font-family);
+    color: var(--placeholder);
+    opacity: 1;
+  }
+
+  input:disabled,
+  textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  img,
+  video {
+    height: auto;
+    max-width: 100%;
+  }
+
+  iframe {
+    border: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
+
+  :host {
+    font-family: var(--text-font-family);
+    color: var(--foreground);
+    font-size: var(--font-size-2);
+    letter-spacing: var(--letter-spacing-2);
+    line-height: var(--line-height-2);
+    font-weight: var(--font-weight-regular);
+  }
+`;
+//#endregion
+export { resetStyle };

package/dist/styles/scrollbar.styles.js

@@ -0,0 +1,27 @@
+import { css } from "../r-html/dist/template/css.js";
+//#region src/styles/scrollbar.styles.ts
+var scrollbarStyle = css.global`
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+  }
+
+  .scrollbar {
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    scrollbar-width: thin;
+  }
+`;
+//#endregion
+export { scrollbarStyle };

package/dist/styles/typography.styles.js

@@ -0,0 +1,63 @@
+import { css } from "../r-html/dist/template/css.js";
+//#region src/styles/typography.styles.ts
+var createFontSize = (size) => css`
+  font-size: var(--font-size-${size});
+  letter-spacing: var(--letter-spacing-${size});
+  line-height: var(--line-height-${size});
+`;
+var fontSize1 = createFontSize(1);
+var fontSize2 = createFontSize(2);
+var fontSize3 = createFontSize(3);
+var fontSize4 = createFontSize(4);
+createFontSize(5);
+var fontSize6 = createFontSize(6);
+createFontSize(7);
+createFontSize(8);
+createFontSize(9);
+var typography = {
+	normal: css`
+  ${fontSize2};
+  font-weight: var(--font-weight-regular);
+`,
+	paragraph: css`
+  ${fontSize1};
+  font-weight: var(--font-weight-regular);
+`
+};
+var typographyStyle = css.global`
+  :host {
+    --font-size-1: 12px;
+    --font-size-2: 14px;
+    --font-size-3: 16px;
+    --font-size-4: 18px;
+    --font-size-5: 20px;
+    --font-size-6: 24px;
+    --font-size-7: 28px;
+    --font-size-8: 35px;
+    --font-size-9: 60px;
+    --letter-spacing-1: 0em;
+    --letter-spacing-2: 0em;
+    --letter-spacing-3: 0em;
+    --letter-spacing-4: -0.0025em;
+    --letter-spacing-5: -0.005em;
+    --letter-spacing-6: -0.00625em;
+    --letter-spacing-7: -0.0075em;
+    --letter-spacing-8: -0.01em;
+    --letter-spacing-9: -0.025em;
+    --line-height-1: 16px;
+    --line-height-2: 20px;
+    --line-height-3: 24px;
+    --line-height-4: 26px;
+    --line-height-5: 28px;
+    --line-height-6: 30px;
+    --line-height-7: 36px;
+    --line-height-8: 40px;
+    --line-height-9: 60px;
+    --font-weight-light: 300;
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+  }
+`;
+//#endregion
+export { fontSize1, fontSize2, fontSize3, fontSize4, fontSize6, typography, typographyStyle };