@stamcat/craftsman 0.0.53 → 0.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {

package/skills/craftsman-style-utilities/SKILL.md

@@ -194,7 +194,8 @@ Do not compute `calc()` strings per-property in JS/TS (for example building a `p
 
 ## Theme Authoring
 
-- `theme.root` supports JS style objects and raw CSS/Sass strings.
+- `theme.root` supports JS style objects and raw CSS/Sass strings, and is written to the `cf-theme` cascade layer.
+- `theme.base` supports the same JS style object / raw CSS/Sass string forms as `theme.root`, but is written to the lower-priority `cf-base` cascade layer alongside the default width/color variables. Use it for base/reset-level styles that should still lose to `theme.root` and `theme.components.*` overrides when specificity is equal.
 - `theme.components.*` supports JS style objects and raw CSS/Sass strings.
 - `theme.widths` accepts a partial record of width/breakpoint keys to override the default `--w-*` CSS variables. Values are numbers in `px`.
 - String component styles are applied to the mapped target selector (for example `button`, `input[type='checkbox']`).
@@ -237,6 +238,7 @@ With `layered: false`, the theme CSS still declares `@layer cf-theme` but does n
 Example:
 
 ```tsx
+import greenBase from "./green.base.scss?inline";
 import greenRoot from "./green.root.scss?inline";
 import greenButton from "./green.button.scss?inline";
 
@@ -245,6 +247,7 @@ export const theme = {
     gutter: 20,
     tablet: 768,
   },
+  base: greenBase,
   root: greenRoot,
   components: {
     button: greenButton,

package/src/styles/global/components/_typography.scss

@@ -2,10 +2,10 @@
 
 @mixin body-typography {
     font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-    color: var(--text);
+    color: var(--text, 14px);
     line-height: 1.5;
     font-weight: 400;
-    font-size: var(--w-text, 14px);
+    font-size:  #{u.width("text")};
 }
 
 @mixin h1 {
@@ -30,7 +30,7 @@
     margin: 0 0 #{u.width(gutter, 0.5)} 0;
 }
 @mixin h5 {
-    font-size: var(--w-text);
+    font-size:  #{u.width("text")};
     line-height: 1.2;
     margin: 0 0 #{u.width(gutter, 0.5)} 0;
 }
@@ -42,7 +42,7 @@
 }
 @mixin p {
     font-style: normal;
-    font-size: var(--w-text);
+    font-size:  #{u.width("text")};
     line-height: 1.5;
     margin: 0;
 }

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

@@ -28,7 +28,7 @@ function c(e) {
 	if (!(!e || Object.keys(e).length === 0)) return `:root { ${Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join(" ")} }`;
 }
 function l(e, n) {
-	let o = n?.layered ?? !0, l = [
+	let o = n?.layered ?? !0, l = [`:root { ${i} ${r} }`, a(e.base)].filter(Boolean).join("\n"), u = [
 		t(":root", { ...e.colors || {} }),
 		c(e.widths),
 		a(e.root),
@@ -36,14 +36,18 @@ function l(e, n) {
 	].filter(Boolean).join("\n");
 	return o ? [
 		"@layer cf-base, cf-theme;",
-		`@layer cf-base { :root { ${i} ${r} } }`,
-		"@layer cf-theme {",
+		"@layer cf-base {",
 		l,
+		"}",
+		"@layer cf-theme {",
+		u,
 		"}"
 	].filter(Boolean).join("\n") : [
-		`@layer cf-base { :root { ${i} ${r} } }`,
-		"@layer cf-theme {",
+		"@layer cf-base {",
 		l,
+		"}",
+		"@layer cf-theme {",
+		u,
 		"}"
 	].filter(Boolean).join("\n");
 }

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

@@ -19,6 +19,7 @@ export type WidthOverrides = Partial<Record<LayoutWidthsType, number>>;
 export type Theme = {
     colors?: Colors;
     widths?: WidthOverrides;
+    base?: CSSObject | SerializedStyles | string;
     root?: CSSObject | SerializedStyles | string;
     components?: ComponentThemeOverrides;
 };