@stamcat/craftsman 0.0.33 → 0.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/skills/craftsman-style-utilities/SKILL.md +12 -0
- package/src/styles/components/ThemeProvider.d.ts +2 -1
- package/src/styles/components/ThemeProvider.esm.js +2 -2
- package/src/styles/global/globalStyles.scss +9 -8
- package/src/styles/theme/theme.d.ts +4 -1
- package/src/styles/theme/theme.esm.js +9 -4
package/package.json
CHANGED
|
@@ -202,6 +202,18 @@ Do not compute `calc()` strings per-property in JS/TS (for example building a `p
|
|
|
202
202
|
|
|
203
203
|
Valid `theme.widths` keys: `"text" | "gutter" | "column" | "tablet" | "desktop" | "extDesktop" | "mobileMax" | "tabletMax" | "desktopMax"`
|
|
204
204
|
|
|
205
|
+
### Cascade Layers and `themeBuilder`'s `layered` Option
|
|
206
|
+
|
|
207
|
+
Runtime theme CSS produced by `themeBuilder`/`ThemeProvider` is wrapped in the `craftsman-theme` cascade layer by default (`layered: true`). This stylesheet is inserted via a hoisted `<style>` tag, which browsers always place first in `<head>` regardless of import order — so its `@layer` declaration always wins the layer-registration race and permanently fixes `craftsman-theme`'s priority relative to any layers a consuming app declares afterward.
|
|
208
|
+
|
|
209
|
+
If the consuming app uses Tailwind or another framework that declares its own cascade layers (for example Tailwind's `@layer theme, base, components, utilities;`), set `layered: false` so Craftsman's theme overrides don't pre-register `craftsman-theme` ahead of the app's own layer order:
|
|
210
|
+
|
|
211
|
+
```tsx
|
|
212
|
+
themeBuilder(theme, { layered: false });
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
With `layered: false`, the theme CSS still declares `@layer craftsman-theme` but does not join a Craftsman-owned layer order — the consuming app is responsible for declaring `craftsman-theme` in its own `@layer` order statement wherever it wants that priority to apply.
|
|
216
|
+
|
|
205
217
|
### Theme Authoring Usage Parameters
|
|
206
218
|
|
|
207
219
|
- Prefer authoring theme styles as SCSS over JS styling, except in apps that primarily use JS styling and do not use SCSS.
|
|
@@ -4,6 +4,7 @@ type ThemeProviderProps = {
|
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
precedence?: string;
|
|
6
6
|
href?: string;
|
|
7
|
+
layered?: boolean;
|
|
7
8
|
};
|
|
8
|
-
export declare function ThemeProvider({ theme, children, precedence, href, }: ThemeProviderProps): import("react").JSX.Element;
|
|
9
|
+
export declare function ThemeProvider({ theme, children, precedence, href, layered, }: ThemeProviderProps): import("react").JSX.Element;
|
|
9
10
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { themeBuilder as e } from "../theme/theme.esm.js";
|
|
2
2
|
import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
3
3
|
//#region src/styles/components/ThemeProvider.tsx
|
|
4
|
-
function i({ theme: i, children: a, precedence: o = "high", href: s = "stamcat-craftsman-theme-provider" }) {
|
|
4
|
+
function i({ theme: i, children: a, precedence: o = "high", href: s = "stamcat-craftsman-theme-provider", layered: c = !0 }) {
|
|
5
5
|
return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("style", {
|
|
6
6
|
precedence: o,
|
|
7
7
|
href: s,
|
|
8
|
-
dangerouslySetInnerHTML: { __html: e(i || {}) }
|
|
8
|
+
dangerouslySetInnerHTML: { __html: e(i || {}, { layered: c }) }
|
|
9
9
|
}), a] });
|
|
10
10
|
}
|
|
11
11
|
//#endregion
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@use "./components/button";
|
|
7
7
|
@use "./components/input";
|
|
8
8
|
@use "./components/select";
|
|
9
|
+
@use "../utilities/functions" as u;
|
|
9
10
|
|
|
10
11
|
@layer craftsman-base, craftsman-component, craftsman-theme;
|
|
11
12
|
|
|
@@ -94,34 +95,34 @@
|
|
|
94
95
|
}
|
|
95
96
|
// TODO: These h* declarations need to be moved somewhere not-terrible
|
|
96
97
|
h1 {
|
|
97
|
-
@include h1;
|
|
98
|
+
@include t.h1;
|
|
98
99
|
}
|
|
99
100
|
|
|
100
101
|
h2 {
|
|
101
|
-
@include h2;
|
|
102
|
+
@include t.h2;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
105
|
h3 {
|
|
105
|
-
@include h3;
|
|
106
|
+
@include t.h3;
|
|
106
107
|
}
|
|
107
108
|
|
|
108
109
|
h4 {
|
|
109
|
-
@include h4;
|
|
110
|
+
@include t.h4;
|
|
110
111
|
}
|
|
111
112
|
|
|
112
113
|
h5 {
|
|
113
|
-
@include h5;
|
|
114
|
+
@include t.h5;
|
|
114
115
|
}
|
|
115
116
|
|
|
116
117
|
h6 {
|
|
117
|
-
@include h6;
|
|
118
|
+
@include t.h6;
|
|
118
119
|
}
|
|
119
120
|
|
|
120
121
|
p {
|
|
121
|
-
@include p;
|
|
122
|
+
@include t.p;
|
|
122
123
|
}
|
|
123
124
|
small {
|
|
124
|
-
@include small;
|
|
125
|
+
@include t.small;
|
|
125
126
|
}
|
|
126
127
|
|
|
127
128
|
@include u.breakpoint(mobileMax) {
|
|
@@ -27,18 +27,23 @@ function s(t) {
|
|
|
27
27
|
function c(e) {
|
|
28
28
|
if (!(!e || Object.keys(e).length === 0)) return `:root { ${Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join(" ")} }`;
|
|
29
29
|
}
|
|
30
|
-
function l(e) {
|
|
31
|
-
let n = [
|
|
30
|
+
function l(e, n) {
|
|
31
|
+
let o = n?.layered ?? !0, l = [
|
|
32
32
|
t(":root", { ...e.colors || {} }),
|
|
33
33
|
c(e.widths),
|
|
34
34
|
a(e.root),
|
|
35
35
|
...s(e.components)
|
|
36
36
|
].filter(Boolean).join("\n");
|
|
37
|
-
return [
|
|
37
|
+
return o ? [
|
|
38
38
|
`:root { ${i} ${r} }`,
|
|
39
39
|
"@layer craftsman-base, craftsman-theme;",
|
|
40
40
|
"@layer craftsman-theme {",
|
|
41
|
-
|
|
41
|
+
l,
|
|
42
|
+
"}"
|
|
43
|
+
].filter(Boolean).join("\n") : [
|
|
44
|
+
`:root { ${i} ${r} }`,
|
|
45
|
+
"@layer craftsman-theme {",
|
|
46
|
+
l,
|
|
42
47
|
"}"
|
|
43
48
|
].filter(Boolean).join("\n");
|
|
44
49
|
}
|