@stamcat/craftsman 0.0.53 → 0.0.55
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 +4 -1
- package/src/components/Toggle/Toggle.css +1 -1
- package/src/components/Toggle/Toggle.scss +2 -1
- package/src/styles/global/components/_typography.scss +4 -4
- package/src/styles/theme/theme.esm.js +9 -5
- package/src/styles/theme/types.d.ts +1 -0
package/package.json
CHANGED
|
@@ -194,7 +194,8 @@ Do not compute `calc()` strings per-property in JS/TS (for example building a `p
|
|
|
194
194
|
|
|
195
195
|
## Theme Authoring
|
|
196
196
|
|
|
197
|
-
- `theme.root` supports JS style objects and raw CSS/Sass strings.
|
|
197
|
+
- `theme.root` supports JS style objects and raw CSS/Sass strings, and is written to the `cf-theme` cascade layer.
|
|
198
|
+
- `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.
|
|
198
199
|
- `theme.components.*` supports JS style objects and raw CSS/Sass strings.
|
|
199
200
|
- `theme.widths` accepts a partial record of width/breakpoint keys to override the default `--w-*` CSS variables. Values are numbers in `px`.
|
|
200
201
|
- 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
|
|
|
237
238
|
Example:
|
|
238
239
|
|
|
239
240
|
```tsx
|
|
241
|
+
import greenBase from "./green.base.scss?inline";
|
|
240
242
|
import greenRoot from "./green.root.scss?inline";
|
|
241
243
|
import greenButton from "./green.button.scss?inline";
|
|
242
244
|
|
|
@@ -245,6 +247,7 @@ export const theme = {
|
|
|
245
247
|
gutter: 20,
|
|
246
248
|
tablet: 768,
|
|
247
249
|
},
|
|
250
|
+
base: greenBase,
|
|
248
251
|
root: greenRoot,
|
|
249
252
|
components: {
|
|
250
253
|
button: greenButton,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cf-
|
|
1
|
+
@layer cf-base{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{pointer-events:none;position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
@mixin body-typography {
|
|
4
4
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
5
|
-
color: var(--text);
|
|
5
|
+
color: var(--text, 14px);
|
|
6
6
|
line-height: 1.5;
|
|
7
7
|
font-weight: 400;
|
|
8
|
-
font-size:
|
|
8
|
+
font-size: #{u.width("text")};
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@mixin h1 {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
margin: 0 0 #{u.width(gutter, 0.5)} 0;
|
|
31
31
|
}
|
|
32
32
|
@mixin h5 {
|
|
33
|
-
font-size:
|
|
33
|
+
font-size: #{u.width("text")};
|
|
34
34
|
line-height: 1.2;
|
|
35
35
|
margin: 0 0 #{u.width(gutter, 0.5)} 0;
|
|
36
36
|
}
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
}
|
|
43
43
|
@mixin p {
|
|
44
44
|
font-style: normal;
|
|
45
|
-
font-size:
|
|
45
|
+
font-size: #{u.width("text")};
|
|
46
46
|
line-height: 1.5;
|
|
47
47
|
margin: 0;
|
|
48
48
|
}
|
|
@@ -28,7 +28,7 @@ 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
30
|
function l(e, n) {
|
|
31
|
-
let o = n?.layered ?? !0, l = [
|
|
31
|
+
let o = n?.layered ?? !0, l = [`:root { ${i} ${r} }`, a(e.base)].filter(Boolean).join("\n"), u = [
|
|
32
32
|
t(":root", { ...e.colors || {} }),
|
|
33
33
|
c(e.widths),
|
|
34
34
|
a(e.root),
|
|
@@ -36,14 +36,18 @@ function l(e, n) {
|
|
|
36
36
|
].filter(Boolean).join("\n");
|
|
37
37
|
return o ? [
|
|
38
38
|
"@layer cf-base, cf-theme;",
|
|
39
|
-
|
|
40
|
-
"@layer cf-theme {",
|
|
39
|
+
"@layer cf-base {",
|
|
41
40
|
l,
|
|
41
|
+
"}",
|
|
42
|
+
"@layer cf-theme {",
|
|
43
|
+
u,
|
|
42
44
|
"}"
|
|
43
45
|
].filter(Boolean).join("\n") : [
|
|
44
|
-
|
|
45
|
-
"@layer cf-theme {",
|
|
46
|
+
"@layer cf-base {",
|
|
46
47
|
l,
|
|
48
|
+
"}",
|
|
49
|
+
"@layer cf-theme {",
|
|
50
|
+
u,
|
|
47
51
|
"}"
|
|
48
52
|
].filter(Boolean).join("\n");
|
|
49
53
|
}
|
|
@@ -19,6 +19,7 @@ export type WidthOverrides = Partial<Record<LayoutWidthsType, number>>;
|
|
|
19
19
|
export type Theme = {
|
|
20
20
|
colors?: Colors;
|
|
21
21
|
widths?: WidthOverrides;
|
|
22
|
+
base?: CSSObject | SerializedStyles | string;
|
|
22
23
|
root?: CSSObject | SerializedStyles | string;
|
|
23
24
|
components?: ComponentThemeOverrides;
|
|
24
25
|
};
|