@stamcat/craftsman 0.0.23-alpha.8 → 0.0.23

package/src/styles/theme/theme.esm.js

@@ -0,0 +1,56 @@
+import { componentSelectors as e } from "./components.esm.js";
+import { cssObjectToCssText as t, toCSSObject as n } from "./utilities.esm.js";
+import { colors as r, widths as i } from "../global/variables.esm.js";
+//#region src/styles/theme/theme.ts
+var a = /* @__PURE__ */ new Map();
+function o(e) {
+	if (typeof document > "u") return;
+	let t = `.${e}`, n = {}, r = !1, i = (e) => {
+		for (let a of Array.from(e)) {
+			if (a instanceof CSSStyleRule) {
+				if (!a.selectorText.split(",").map((e) => e.trim()).includes(t)) continue;
+				r = !0;
+				for (let e of Array.from(a.style)) n[e] = a.style.getPropertyValue(e);
+				continue;
+			}
+			a instanceof CSSGroupingRule && i(a.cssRules);
+		}
+	};
+	for (let e of Array.from(document.styleSheets)) try {
+		e.cssRules && i(e.cssRules);
+	} catch {}
+	return r ? n : void 0;
+}
+function s(e) {
+	if (a.has(e)) return a.get(e) ?? void 0;
+	let t = o(e);
+	return a.set(e, t ?? null), t;
+}
+function c(r) {
+	let i = [];
+	return Object.keys(e).forEach((a) => {
+		let o = r?.[a];
+		if (o) {
+			if (typeof o == "string") {
+				let n = s(o);
+				if (!n) return;
+				i.push(t(e[a], n));
+				return;
+			}
+			i.push(t(e[a], n(o)));
+		}
+	}), i;
+}
+function l(e) {
+	let a = t(":root", {
+		...e.colors || {},
+		...e.root ? n(e.root) : {}
+	});
+	return [
+		`:root { ${i} ${r} }`,
+		a,
+		...c(e.components)
+	].filter(Boolean).join("\n");
+}
+//#endregion
+export { l as themeBuilder };

package/{styles → src/styles}/theme/types.d.ts

@@ -1,15 +1,22 @@
-import { CSSObject, SerializedStyles } from '@emotion/react';
 import { ColorKey } from '../utilities/color';
 import { componentSelectors } from './components';
 export type ColorVariableName = `--${ColorKey}`;
+export type CSSObject = {
+    [key: string]: string | number | CSSObject | undefined;
+};
+export type LegacySerializedStyles = {
+    name: string;
+    styles: string;
+    next?: LegacySerializedStyles;
+};
 export type RegisteredComponent = keyof typeof componentSelectors;
 export type ComponentThemeOverrides = {
-    [K in RegisteredComponent]?: CSSObject | SerializedStyles;
+    [K in RegisteredComponent]?: CSSObject | LegacySerializedStyles | string;
 };
 export type Colors = Partial<Record<ColorVariableName, string>>;
 export type Theme = {
     colors?: Colors;
-    root?: CSSObject | SerializedStyles;
+    root?: CSSObject | LegacySerializedStyles;
     components?: ComponentThemeOverrides;
 };
 export type ThemeProviderProps = {

package/src/styles/theme/utilities.d.ts

@@ -0,0 +1,3 @@
+import { CSSObject, LegacySerializedStyles } from './types';
+export declare function toCSSObject(value: CSSObject | LegacySerializedStyles): CSSObject;
+export declare function cssObjectToCssText(selector: string, value: CSSObject): string;

package/src/styles/theme/utilities.esm.js

@@ -0,0 +1,48 @@
+//#region src/styles/theme/utilities.ts
+function e(e) {
+	return "styles" in e && "name" in e;
+}
+function t(e) {
+	let t = {}, n = e;
+	for (; n;) {
+		let e = n.styles.split(";").map((e) => e.trim()).filter((e) => e && !e.startsWith("label:"));
+		for (let n of e) {
+			let e = n.indexOf(":");
+			if (e === -1) continue;
+			let r = n.slice(0, e).trim(), i = n.slice(e + 1).trim();
+			if (!r || !i) continue;
+			let a = r.replace(/-([a-z])/g, (e, t) => t.toUpperCase());
+			t[a] = i;
+		}
+		n = n.next;
+	}
+	return t;
+}
+function n(n) {
+	return e(n) ? t(n) : n;
+}
+function r(e) {
+	return e.startsWith("--") ? e : e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+}
+function i(e, t) {
+	return t.startsWith("&") ? t.replace(/&/g, e) : t.startsWith(":") || t.startsWith("[") ? `${e}${t}` : (/^[>+~]/.test(t), `${e} ${t}`);
+}
+function a(e, t) {
+	let n = [], o = [];
+	for (let [s, c] of Object.entries(t)) if (c !== void 0) {
+		if (typeof c == "object") {
+			let t = c;
+			if (s.startsWith("@")) {
+				o.push(`${s} { ${a(e, t)} }`);
+				continue;
+			}
+			let n = i(e, s);
+			o.push(a(n, t));
+			continue;
+		}
+		n.push(`${r(s)}: ${String(c)};`);
+	}
+	return [n.length > 0 ? `${e} { ${n.join(" ")} }` : "", ...o].filter(Boolean).join("\n");
+}
+//#endregion
+export { a as cssObjectToCssText, n as toCSSObject };

package/src/styles/utilities/color.d.ts

@@ -0,0 +1,174 @@
+import { ColorType } from './types';
+export declare const colors: {
+    red990: string;
+    red950: string;
+    red925: string;
+    red900: string;
+    red850: string;
+    red800: string;
+    red750: string;
+    red700: string;
+    red650: string;
+    red600: string;
+    red550: string;
+    red500: string;
+    red450: string;
+    red400: string;
+    red350: string;
+    red300: string;
+    red250: string;
+    red200: string;
+    red150: string;
+    red100: string;
+    red50: string;
+    red10: string;
+    orange950: string;
+    orange900: string;
+    orange800: string;
+    orange700: string;
+    orange600: string;
+    orange500: string;
+    orange400: string;
+    orange300: string;
+    orange200: string;
+    orange100: string;
+    orange50: string;
+    yellow950: string;
+    yellow900: string;
+    yellow800: string;
+    yellow700: string;
+    yellow600: string;
+    yellow500: string;
+    yellow400: string;
+    yellow300: string;
+    yellow200: string;
+    yellow100: string;
+    yellow50: string;
+    green990: string;
+    green975: string;
+    green950: string;
+    green900: string;
+    green850: string;
+    green800: string;
+    green750: string;
+    green700: string;
+    green650: string;
+    green600: string;
+    green550: string;
+    green500: string;
+    green450: string;
+    green400: string;
+    green350: string;
+    green300: string;
+    green250: string;
+    green200: string;
+    green100: string;
+    green80: string;
+    green50: string;
+    green10: string;
+    blueGreen990: string;
+    blueGreen975: string;
+    blueGreen950: string;
+    blueGreen900: string;
+    blueGreen850: string;
+    blueGreen800: string;
+    blueGreen750: string;
+    blueGreen700: string;
+    blueGreen650: string;
+    blueGreen600: string;
+    blueGreen550: string;
+    blueGreen500: string;
+    blueGreen450: string;
+    blueGreen400: string;
+    blueGreen300: string;
+    blueGreen250: string;
+    blueGreen150: string;
+    blueGreen50: string;
+    blueGreen10: string;
+    teal900: string;
+    teal800: string;
+    teal700: string;
+    teal600: string;
+    teal500: string;
+    teal450: string;
+    teal400: string;
+    teal350: string;
+    teal300: string;
+    teal250: string;
+    teal200: string;
+    teal150: string;
+    teal100: string;
+    teal50: string;
+    blue950: string;
+    blue900: string;
+    blue800: string;
+    blue700: string;
+    blue600: string;
+    blue500: string;
+    blue400: string;
+    blue300: string;
+    blue200: string;
+    blue100: string;
+    blue50: string;
+    violet950: string;
+    violet900: string;
+    violet800: string;
+    violet700: string;
+    violet600: string;
+    violet500: string;
+    violet400: string;
+    violet300: string;
+    violet200: string;
+    violet100: string;
+    violet50: string;
+    purple950: string;
+    purple900: string;
+    purple800: string;
+    purple700: string;
+    purple600: string;
+    purple500: string;
+    purple400: string;
+    purple300: string;
+    purple200: string;
+    purple100: string;
+    purple50: string;
+    beige990: string;
+    beige900: string;
+    beige800: string;
+    beige700: string;
+    beige600: string;
+    beige500: string;
+    beige400: string;
+    beige300: string;
+    beige200: string;
+    beige100: string;
+    beige50: string;
+    gray999: string;
+    gray980: string;
+    gray950: string;
+    gray900: string;
+    gray850: string;
+    gray800: string;
+    gray750: string;
+    gray700: string;
+    gray650: string;
+    gray600: string;
+    gray550: string;
+    gray500: string;
+    gray450: string;
+    gray400: string;
+    gray350: string;
+    gray300: string;
+    gray250: string;
+    gray200: string;
+    gray150: string;
+    gray100: string;
+    gray50: string;
+    gray10: string;
+    white: string;
+    black: string;
+    text: string;
+};
+export type ColorKey = keyof typeof colors;
+export declare function hexToRgba(hex: string, alpha?: number): string;
+export declare const color: (name: ColorKey, type?: ColorType, alpha?: number) => string;

package/src/styles/utilities/color.esm.js

@@ -0,0 +1,15 @@
+import { defaultColors as e } from "./constants.esm.js";
+//#region src/styles/utilities/color.ts
+var t = { ...e };
+function n(e, t = 1) {
+	e = e.replace("#", "");
+	let n, r, i;
+	if (e.length === 6) n = Number.parseInt(e.substring(0, 2), 16), r = Number.parseInt(e.substring(2, 4), 16), i = Number.parseInt(e.substring(4, 6), 16);
+	else if (e.length === 8) n = Number.parseInt(e.substring(0, 2), 16), r = Number.parseInt(e.substring(2, 4), 16), i = Number.parseInt(e.substring(4, 6), 16), t = Number.parseInt(e.substring(6, 8), 16) / 255;
+	else if (e.length === 3) n = Number.parseInt(e.charAt(0) + e.charAt(0), 16), r = Number.parseInt(e.charAt(1) + e.charAt(1), 16), i = Number.parseInt(e.charAt(2) + e.charAt(2), 16);
+	else throw Error("Invalid hex color format");
+	return t = Math.max(0, Math.min(1, t)), `rgba(${n}, ${r}, ${i}, ${t})`;
+}
+var r = (e, t = "hex", n = 1) => t === "rgba" ? `rgb(from var(--${e}) r g b / ${n})` : `var(--${e})`;
+//#endregion
+export { r as color, t as colors, n as hexToRgba };

package/src/styles/utilities/constants.d.ts

@@ -0,0 +1,172 @@
+import { LayoutWidthsType } from './types';
+export declare const defaultColors: {
+    red990: string;
+    red950: string;
+    red925: string;
+    red900: string;
+    red850: string;
+    red800: string;
+    red750: string;
+    red700: string;
+    red650: string;
+    red600: string;
+    red550: string;
+    red500: string;
+    red450: string;
+    red400: string;
+    red350: string;
+    red300: string;
+    red250: string;
+    red200: string;
+    red150: string;
+    red100: string;
+    red50: string;
+    red10: string;
+    orange950: string;
+    orange900: string;
+    orange800: string;
+    orange700: string;
+    orange600: string;
+    orange500: string;
+    orange400: string;
+    orange300: string;
+    orange200: string;
+    orange100: string;
+    orange50: string;
+    yellow950: string;
+    yellow900: string;
+    yellow800: string;
+    yellow700: string;
+    yellow600: string;
+    yellow500: string;
+    yellow400: string;
+    yellow300: string;
+    yellow200: string;
+    yellow100: string;
+    yellow50: string;
+    green990: string;
+    green975: string;
+    green950: string;
+    green900: string;
+    green850: string;
+    green800: string;
+    green750: string;
+    green700: string;
+    green650: string;
+    green600: string;
+    green550: string;
+    green500: string;
+    green450: string;
+    green400: string;
+    green350: string;
+    green300: string;
+    green250: string;
+    green200: string;
+    green100: string;
+    green80: string;
+    green50: string;
+    green10: string;
+    blueGreen990: string;
+    blueGreen975: string;
+    blueGreen950: string;
+    blueGreen900: string;
+    blueGreen850: string;
+    blueGreen800: string;
+    blueGreen750: string;
+    blueGreen700: string;
+    blueGreen650: string;
+    blueGreen600: string;
+    blueGreen550: string;
+    blueGreen500: string;
+    blueGreen450: string;
+    blueGreen400: string;
+    blueGreen300: string;
+    blueGreen250: string;
+    blueGreen150: string;
+    blueGreen50: string;
+    blueGreen10: string;
+    teal900: string;
+    teal800: string;
+    teal700: string;
+    teal600: string;
+    teal500: string;
+    teal450: string;
+    teal400: string;
+    teal350: string;
+    teal300: string;
+    teal250: string;
+    teal200: string;
+    teal150: string;
+    teal100: string;
+    teal50: string;
+    blue950: string;
+    blue900: string;
+    blue800: string;
+    blue700: string;
+    blue600: string;
+    blue500: string;
+    blue400: string;
+    blue300: string;
+    blue200: string;
+    blue100: string;
+    blue50: string;
+    violet950: string;
+    violet900: string;
+    violet800: string;
+    violet700: string;
+    violet600: string;
+    violet500: string;
+    violet400: string;
+    violet300: string;
+    violet200: string;
+    violet100: string;
+    violet50: string;
+    purple950: string;
+    purple900: string;
+    purple800: string;
+    purple700: string;
+    purple600: string;
+    purple500: string;
+    purple400: string;
+    purple300: string;
+    purple200: string;
+    purple100: string;
+    purple50: string;
+    beige990: string;
+    beige900: string;
+    beige800: string;
+    beige700: string;
+    beige600: string;
+    beige500: string;
+    beige400: string;
+    beige300: string;
+    beige200: string;
+    beige100: string;
+    beige50: string;
+    gray999: string;
+    gray980: string;
+    gray950: string;
+    gray900: string;
+    gray850: string;
+    gray800: string;
+    gray750: string;
+    gray700: string;
+    gray650: string;
+    gray600: string;
+    gray550: string;
+    gray500: string;
+    gray450: string;
+    gray400: string;
+    gray350: string;
+    gray300: string;
+    gray250: string;
+    gray200: string;
+    gray150: string;
+    gray100: string;
+    gray50: string;
+    gray10: string;
+    white: string;
+    black: string;
+    text: string;
+};
+export declare const defaultWidths: Record<LayoutWidthsType, number>;

package/src/styles/utilities/constants.esm.js

@@ -0,0 +1,183 @@
+//#region src/styles/utilities/constants.ts
+var e = {
+	red990: "#2A0D09",
+	red950: "#2E0E05",
+	red925: "#3E140E",
+	red900: "#451408",
+	red850: "#531A13",
+	red800: "#5C1B0A",
+	red750: "#7D271C",
+	red700: "#8A290F",
+	red650: "#A63426",
+	red600: "#B83614",
+	red550: "#D24A39",
+	red500: "#E54419",
+	red450: "#D96759",
+	red400: "#FB6249",
+	red350: "#E38D82",
+	red300: "#F2A18C",
+	red250: "#ECB3AC",
+	red200: "#F5B4A3",
+	red150: "#F6D9D5",
+	red100: "#FADAD1",
+	red50: "#FCECE8",
+	red10: "#FBF0EE",
+	orange950: "#1A1200",
+	orange900: "#332400",
+	orange800: "#664700",
+	orange700: "#996B00",
+	orange600: "#CC8E00",
+	orange500: "#F2A900",
+	orange400: "#FFC133",
+	orange300: "#FFD166",
+	orange200: "#FFE099",
+	orange100: "#FFF0CC",
+	orange50: "#FFFCF5",
+	yellow950: "#302503",
+	yellow900: "#483804",
+	yellow800: "#614A05",
+	yellow700: "#916F08",
+	yellow600: "#C1940B",
+	yellow500: "#F1BA0E",
+	yellow400: "#FFCF5A",
+	yellow300: "#F8DC86",
+	yellow200: "#FAE39E",
+	yellow100: "#FCF1CF",
+	yellow50: "#FEF8E7",
+	green990: "#040B09",
+	green975: "#071309",
+	green950: "#071310",
+	green900: "#061409",
+	green850: "#0F2410",
+	green800: "#0D2620",
+	green750: "#163E35",
+	green700: "#184E23",
+	green650: "#236254",
+	green600: "#456600",
+	green550: "#308874",
+	green500: "#389448",
+	green450: "#689900",
+	green400: "#46B95A",
+	green350: "#83C200",
+	green300: "#63CF79",
+	green250: "#7FD2BF",
+	green200: "#A7DC3C",
+	green100: "#B5E3BD",
+	green80: "#D1EB94",
+	green50: "#DAF1DE",
+	green10: "#F6FBEA",
+	blueGreen990: "#001C19",
+	blueGreen975: "#022427",
+	blueGreen950: "#13332E",
+	blueGreen900: "#0A3B43",
+	blueGreen850: "#0F4A45",
+	blueGreen800: "#0D4E59",
+	blueGreen750: "#045258",
+	blueGreen700: "#08ADBA",
+	blueGreen650: "#1D766E",
+	blueGreen600: "#137686",
+	blueGreen550: "#039084",
+	blueGreen500: "#2FBCB0",
+	blueGreen450: "#5CD6CC",
+	blueGreen400: "#85E0D9",
+	blueGreen300: "#ADEBE5",
+	blueGreen250: "#A6E7F2",
+	blueGreen150: "#D6F5F2",
+	blueGreen50: "#EBFAF9",
+	blueGreen10: "#EBFDFE",
+	teal900: "#06272D",
+	teal800: "#068089",
+	teal700: "#1A9DB2",
+	teal600: "#20C4DF",
+	teal500: "#0ADBEA",
+	teal450: "#6DE3EE",
+	teal400: "#32E8F6",
+	teal350: "#63EEF8",
+	teal300: "#94F3FA",
+	teal250: "#A7F5FB",
+	teal200: "#BCEDF5",
+	teal150: "#D2FAFD",
+	teal100: "#D2F3F9",
+	teal50: "#E9F9FC",
+	blue950: "#060B14",
+	blue900: "#0C1728",
+	blue800: "#172D4F",
+	blue700: "#234476",
+	blue600: "#2F5B9D",
+	blue500: "#3A70C2",
+	blue400: "#628ED0",
+	blue300: "#89AADC",
+	blue200: "#B0C6E8",
+	blue100: "#D7E2F3",
+	blue50: "#EFF4FA",
+	violet950: "#0D042F",
+	violet900: "#19095D",
+	violet800: "#260D8C",
+	violet700: "#3311BB",
+	violet600: "#3F16E9",
+	violet500: "#6644EE",
+	violet400: "#8C73F2",
+	violet300: "#9F8AF4",
+	violet200: "#B2A2F6",
+	violet100: "#D9D1FA",
+	violet50: "#ECE8FD",
+	purple950: "#26062D",
+	purple900: "#390A43",
+	purple800: "#4D0D59",
+	purple700: "#731386",
+	purple600: "#9919B2",
+	purple500: "#BF20DF",
+	purple400: "#E474EE",
+	purple300: "#DF8FEF",
+	purple200: "#E5A6F2",
+	purple100: "#F2D2F9",
+	purple50: "#F9E9FC",
+	beige990: "#110F09",
+	beige900: "#211E12",
+	beige800: "#423C24",
+	beige700: "#635A36",
+	beige600: "#847848",
+	beige500: "#A5965A",
+	beige400: "#B7AB7B",
+	beige300: "#C9C09C",
+	beige200: "#DBD5BD",
+	beige100: "#EDEADE",
+	beige50: "#F9F8F4",
+	gray999: "#0D0C0C",
+	gray980: "#1B1918",
+	gray950: "#212829",
+	gray900: "#2A2A2A",
+	gray850: "#343E40",
+	gray800: "#404040",
+	gray750: "#495457",
+	gray700: "#6B6361",
+	gray650: "#6C787D",
+	gray600: "#837976",
+	gray550: "#9E9694",
+	gray500: "#B6B0AF",
+	gray450: "#ADB9BD",
+	gray400: "#CFCBC9",
+	gray350: "#CED8DA",
+	gray300: "#DEE5E6",
+	gray250: "#E7E5E4",
+	gray200: "#F0F4F4",
+	gray150: "#F3F2F2",
+	gray100: "#F7F9F9",
+	gray50: "#FCFDFD",
+	gray10: "#FFFFFF",
+	white: "#FFFFFF",
+	black: "#101921",
+	text: "#101921"
+}, t = {
+	text: 14,
+	gutter: 16,
+	column: 60,
+	mobileMax: 659.99999,
+	tablet: 660,
+	tabletMax: 1039.99999,
+	desktop: 1040,
+	desktopMax: 1319.99999,
+	extDesktop: 1320
+};
+//#endregion
+export { e as defaultColors, t as defaultWidths };

package/src/styles/utilities/layout.d.ts

@@ -0,0 +1,17 @@
+import { Breakpoint, LayoutWidthsType } from './types';
+export declare const widths: Record<LayoutWidthsType, string>;
+export declare const media: {
+    readonly mobile: string;
+    readonly mobileMax: string;
+    readonly tablet: string;
+    readonly tabletMax: string;
+    readonly desktop: string;
+    readonly desktopMax: string;
+    readonly extDesktop: string;
+    readonly mobileOnly: string;
+    readonly tabletOnly: string;
+    readonly mobileTablet: string;
+    readonly desktopOnly: string;
+};
+export declare const width: (w: LayoutWidthsType, multiplier?: number, px?: boolean) => string;
+export declare const breakpoint: (bp: Breakpoint, styles: string) => string;