@stamcat/craftsman 0.0.23-alpha.9 → 0.0.23

package/src/styles/global/globalStyles.module.scss

@@ -0,0 +1,129 @@
+@use "./components/typography";
+@use "./components/code";
+@use "./components/mixins" as mixins;
+@use "./components/checkbox"; 
+@use "./components/radioButton";
+@use "./components/button";
+@use "./components/input";
+
+:global {
+    :root {
+      color-scheme: light dark;
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    ::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: #ddd;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: #000;
+      border-radius: 6px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555;
+    }
+
+    body {
+        @extend %body-typography;
+    }
+    body,
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      background-color: #fff;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+    }
+
+    fieldset {
+      padding: 0;
+      border: 0;
+    }
+
+    code {
+      @extend %code;
+    }
+
+    button {
+      @extend %button-styles;
+    }
+
+    input {
+      @extend %input-base;
+
+      &[type="radio"] {
+        @extend %radio;
+      }
+
+      &[type="checkbox"] {
+        @extend %checkbox;
+      }
+    }
+
+    a {
+      @extend %text-link;
+    }
+
+    h1 {
+      font-size: calc(var(--w-text, 14px) * 3.125);
+      line-height: 1.2;
+    }
+
+    h2 {
+      font-size: calc(var(--w-text, 14px) * 2.625);
+      font-weight: 625;
+      line-height: 1.1;
+    }
+
+    h3 {
+      font-size: calc(var(--w-text, 14px) * 1.625);
+      line-height: 1.1;
+    }
+
+    h4 {
+      font-size: calc(var(--w-text, 14px) * 1.25);
+      line-height: 1.1;
+      margin: calc(var(--w-gutter, 16px) * 0.5) 0;
+    }
+
+    h5 {
+      font-size: var(--w-text, 14px);
+      line-height: 1.2;
+    }
+
+    h6 {
+      font-size: calc(var(--w-text, 14px) * 0.875);
+      line-height: 1.2;
+      font-weight: 600;
+    }
+
+    p {
+      font-style: normal;
+      font-size: var(--w-text, 14px);
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    @media (max-width: 659.99999px) {
+      h4 {
+        font-size: var(--w-text, 14px);
+      }
+
+      p {
+        font-size: calc(var(--w-text, 14px) * 0.875);
+      }
+    }
+}

package/src/styles/global/variables.esm.js

@@ -0,0 +1,11 @@
+import { defaultWidths as e } from "../utilities/constants.esm.js";
+import { colors as t } from "../utilities/color.esm.js";
+//#region src/styles/global/variables.ts
+var n = {
+	...e,
+	mobileMax: e.tablet - 1e-5,
+	tabletMax: e.desktop - 1e-5,
+	desktopMax: e.extDesktop - 1e-5
+}, r = Object.entries(t).map(([e, t]) => `--${e}: ${t};`).join("\n"), i = Object.entries(n).map(([e, t]) => `--w-${e}: ${t}px;`).join("\n");
+//#endregion
+export { r as colors, i as widths };

package/src/styles/index.d.ts

@@ -0,0 +1,7 @@
+export * from './utilities/color';
+export * from './utilities/constants';
+export * from './utilities/layout';
+export * from './utilities/types';
+export * from './theme/theme';
+export * from './global/globalStyles';
+export { ThemeProvider } from './components/ThemeProvider';

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

@@ -0,0 +1,12 @@
+import { htmlTagNames as e } from "./constants.esm.js";
+import { components_exports as t } from "../../../Components.esm.js";
+//#region src/styles/theme/components.ts
+function n(e) {
+	return e.charAt(0).toLowerCase() + e.slice(1);
+}
+function r(t) {
+	return e.has(t) ? `${t}, .${t}` : `.${t}`;
+}
+var i = Object.keys(t).map(n), a = Object.fromEntries(i.map((e) => [e, r(e)]));
+//#endregion
+export { a as componentSelectors };

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

@@ -0,0 +1,4 @@
+//#region src/styles/theme/constants.ts
+var e = /* @__PURE__ */ new Set(/* @__PURE__ */ "a.abbr.address.area.article.aside.audio.b.base.bdi.bdo.blockquote.body.br.button.canvas.caption.cite.code.col.colgroup.data.datalist.dd.del.details.dfn.dialog.div.dl.dt.em.embed.fieldset.figcaption.figure.footer.form.h1.h2.h3.h4.h5.h6.head.header.hgroup.hr.html.i.iframe.img.input.ins.kbd.label.legend.li.link.main.map.mark.menu.meta.meter.nav.noscript.object.ol.optgroup.option.output.p.picture.pre.progress.q.rp.rt.ruby.s.samp.script.section.select.slot.small.source.span.strong.style.sub.summary.sup.table.tbody.td.template.textarea.tfoot.th.thead.time.title.tr.track.u.ul.var.video.wbr".split("."));
+//#endregion
+export { e as htmlTagNames };

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

@@ -0,0 +1,2 @@
+import { Theme } from './types';
+export declare function themeBuilder(theme: Theme): string;

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 | string;
+    [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

@@ -1,11 +1,7 @@
 import { defaultColors as e } from "./constants.esm.js";
-import { getCraftsmanConfig as t } from "./config.esm.js";
 //#region src/styles/utilities/color.ts
-var n = Object.keys(e).reduce((e, n) => (e[n] = {
-	enumerable: !0,
-	get: () => t().colors[n]
-}, e), {}), r = Object.defineProperties({}, n);
-function i(e, t = 1) {
+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);
@@ -14,6 +10,6 @@ function i(e, t = 1) {
 	else throw Error("Invalid hex color format");
 	return t = Math.max(0, Math.min(1, t)), `rgba(${n}, ${r}, ${i}, ${t})`;
 }
-var a = (e, t = "hex", n = 1) => t === "rgba" ? i(r[e], n) : r[e];
+var r = (e, t = "hex", n = 1) => t === "rgba" ? `rgb(from var(--${e}) r g b / ${n})` : `var(--${e})`;
 //#endregion
-export { a as color, r as colors, i as hexToRgba };
+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>;