@stamcat/craftsman 0.0.27-alpha.4 → 0.0.27-alpha.5
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/AGENTS.md +7 -0
- package/package.json +4 -1
- package/src/components/Input/Input.module.css +1 -1
- package/src/components/Input/Input.module.esm.js +1 -1
- package/src/components/Modal.module.css +1 -1
- package/src/components/Modal.module.esm.js +1 -1
- package/src/components/Modal.module.scss +3 -3
- package/src/styles/_config.scss +30 -0
- package/src/styles/global/globalStyles.scss +1 -2
- package/src/styles/theme/theme.esm.js +5 -1
- package/src/styles/theme/types.d.ts +3 -0
- package/src/styles/utilities/_functions.scss +20 -19
package/AGENTS.md
CHANGED
|
@@ -320,9 +320,12 @@ Example:
|
|
|
320
320
|
|
|
321
321
|
- `theme.root` supports JS style objects and raw CSS/Sass strings.
|
|
322
322
|
- `theme.components.*` supports JS style objects and raw CSS/Sass strings.
|
|
323
|
+
- `theme.widths` accepts a partial record of width/breakpoint keys to override the default `--w-*` CSS variables. Values are numbers in `px`.
|
|
323
324
|
- String component styles are applied to the mapped target selector (for example `button`, `input[type='checkbox']`).
|
|
324
325
|
- For multi-file Sass workflows with syntax highlighting and mixins, import compiled CSS text via `*.scss?inline`.
|
|
325
326
|
|
|
327
|
+
Valid `theme.widths` keys: `"text" | "gutter" | "column" | "tablet" | "desktop" | "extDesktop" | "mobileMax" | "tabletMax" | "desktopMax"`
|
|
328
|
+
|
|
326
329
|
Example:
|
|
327
330
|
|
|
328
331
|
```tsx
|
|
@@ -330,6 +333,10 @@ import greenRoot from "./green.root.scss?inline";
|
|
|
330
333
|
import greenButton from "./green.button.scss?inline";
|
|
331
334
|
|
|
332
335
|
export const theme = {
|
|
336
|
+
widths: {
|
|
337
|
+
gutter: 20,
|
|
338
|
+
tablet: 768,
|
|
339
|
+
},
|
|
333
340
|
root: greenRoot,
|
|
334
341
|
components: {
|
|
335
342
|
button: greenButton,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stamcat/craftsman",
|
|
3
|
-
"version": "0.0.27-alpha.
|
|
3
|
+
"version": "0.0.27-alpha.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A powerful, lightweight framework for design systems",
|
|
6
6
|
"repository": {
|
|
@@ -57,6 +57,9 @@
|
|
|
57
57
|
"./styles/globalStyles.scss": {
|
|
58
58
|
"default": "./src/styles/global/globalStyles.scss"
|
|
59
59
|
},
|
|
60
|
+
"./styles/config": {
|
|
61
|
+
"default": "./src/styles/_config.scss"
|
|
62
|
+
},
|
|
60
63
|
"./Button": {
|
|
61
64
|
"types": "./src/components/Button.d.ts",
|
|
62
65
|
"default": "./src/components/Button.esm.js"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer craftsman-base{.
|
|
1
|
+
@layer craftsman-base{._wrapper_txz19_2[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}}._wrapper_txz19_2 label ._inputLabel_txz19_9{margin-bottom:calc(var(--w-gutter,16px) * .25)}._wrapper_txz19_2[data-required=true] label ._inputLabel_txz19_9:after{content:"*";color:var(--red700)}._wrapper_txz19_2[data-label-position=left] label{align-items:center;display:inline-flex}._wrapper_txz19_2[data-label-position=left] label ._inputLabel_txz19_9{width:fit-content;margin-right:calc(var(--w-gutter,16px) * .75)}._wrapper_txz19_2[data-label-position=left]._textarea_txz19_24 label{align-items:flex-start}._wrapper_txz19_2[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}._wrapper_txz19_2[data-label-position=bottom] label ._inputLabel_txz19_9{margin-bottom:0;margin-top:calc(var(--w-gutter,16px) * .25)}._wrapper_txz19_2[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}._wrapper_txz19_2[data-label-position=right] label ._inputLabel_txz19_9{margin-left:calc(var(--w-gutter,16px) * .25);margin-bottom:0}._wrapper_txz19_2[data-label-position=inside] ._inputLabel_txz19_9{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter,16px) * .25);left:calc(var(--w-gutter,16px) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}._wrapper_txz19_2[data-label-position=inside]>label>._inputField_txz19_56>._input_txz19_9,._wrapper_txz19_2[data-label-position=inside]>._input_txz19_9{transition:border-color .2s}._wrapper_txz19_2[data-label-position=inside]:focus-within ._inputLabel_txz19_9{top:-.5rem;left:calc(var(--w-gutter,16px) * .125);font-size:calc(var(--w-text,14px) * .75);color:var(--blue500)}._wrapper_txz19_2[data-label-position=inside]:focus-within ._input_txz19_9{border-color:var(--blue500)}._wrapper_txz19_2[data-label-position=inside]:focus-within ._input_txz19_9::placeholder{opacity:1}._wrapper_txz19_2[data-label-position=inside][data-has-input=true] ._inputLabel_txz19_9{top:-.5rem;left:calc(var(--w-gutter,16px) * .125);font-size:calc(var(--w-text,14px) * .75)}._wrapper_txz19_2[data-label-position=inside]:has(._input_txz19_9:not(:placeholder-shown)) ._inputLabel_txz19_9{top:-.5rem;left:calc(var(--w-gutter,16px) * .125);font-size:calc(var(--w-text,14px) * .75)}._wrapper_txz19_2[data-label-position=inside]:has(._input_txz19_9:-webkit-autofill) ._inputLabel_txz19_9{top:-.5rem;left:calc(var(--w-gutter,16px) * .125);font-size:calc(var(--w-text,14px) * .75)}._wrapper_txz19_2[data-label-position=inside] ._input_txz19_9[type=tel]{width:100%}._wrapper_txz19_2[data-label-position=inside] ._input_txz19_9::placeholder{opacity:0;transition:opacity .2s}._inputField_txz19_56{align-items:center;display:inline-flex;position:relative}._inputField_txz19_56[data-has-end-adornment=true]>._input_txz19_9{width:100%;padding-right:calc(var(--w-gutter,16px) * 1.5)}._inputAdornment_txz19_95{right:calc(var(--w-gutter,16px) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}._error_txz19_106{margin-top:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75);color:var(--red600)}._inputViewToggle_txz19_112{align-items:"center";padding:0;line-height:1;display:inline-flex}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './Input.module.css';//#region src/components/Input/Input.module.scss
|
|
2
|
-
var e = "
|
|
2
|
+
var e = "_wrapper_txz19_2", t = "_inputLabel_txz19_9", n = "_textarea_txz19_24", r = "_inputField_txz19_56", i = "_input_txz19_9", a = "_inputAdornment_txz19_95", o = "_error_txz19_106", s = "_inputViewToggle_txz19_112", c = {
|
|
3
3
|
wrapper: e,
|
|
4
4
|
inputLabel: t,
|
|
5
5
|
textarea: n,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_1fsgx_1,._background_1fsgx_1{width:100%;height:100%;position:fixed;inset:0}@keyframes _fadeIn_1fsgx_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_1fsgx_1{0%{opacity:1}to{opacity:0}}@keyframes _slideIn_1fsgx_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideOut_1fsgx_1{0%{transform:translateY(0)}to{transform:translateY(100%)}}._wrapper_1fsgx_1{z-index:1000;justify-content:center;align-items:center;display:flex}._background_1fsgx_1{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}._background_1fsgx_1[data-is-closing=true]{animation:.3s ease-in-out _fadeOut_1fsgx_1}._background_1fsgx_1[data-is-closing=false]{animation:.3s ease-in-out _fadeIn_1fsgx_1}._content_1fsgx_62{padding:var(--w-gutter,16px);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}._content_1fsgx_62[data-is-closing=true]{animation:.3s ease-in-out _slideOut_1fsgx_1}._content_1fsgx_62[data-is-closing=false]{animation:.3s ease-in-out _slideIn_1fsgx_1}._content_1fsgx_62._panel_1fsgx_78{height:100%;position:fixed;top:0;right:0}._content_1fsgx_62._dialog_1fsgx_84{border-radius:8px}._content_1fsgx_62>header{width:100%;margin-bottom:calc(var(--w-gutter,16px) * .5);justify-content:space-between;display:inline-flex}._content_1fsgx_62>header>button:only-child{margin-left:auto}._actionContainer_1fsgx_97{margin-top:calc(var(--w-gutter,16px) * 2);background-color:var(--white);gap:var(--w-gutter,16px);height:fit-content;display:flex}._closeModal_1fsgx_105{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){._content_1fsgx_62._panel_1fsgx_78,._content_1fsgx_62._dialog_1fsgx_84{width:100%;height:100%}}@media (width>=660px){._content_1fsgx_62._panel_1fsgx_78{width:calc((var(--w-column,60px) * 4) + (var(--w-gutter,16px) * 3))}._content_1fsgx_62._dialog_1fsgx_84{width:calc((var(--w-column,60px) * 6) + (var(--w-gutter,16px) * 5))}}@media (width>=1040px){._content_1fsgx_62._dialog_1fsgx_84{width:calc((var(--w-column,60px) * 8) + (var(--w-gutter,16px) * 7))}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './Modal.module.css';//#region src/components/Modal.module.scss
|
|
2
|
-
var e = "
|
|
2
|
+
var e = "_wrapper_1fsgx_1", t = "_background_1fsgx_1", n = "_fadeOut_1fsgx_1", r = "_fadeIn_1fsgx_1", i = "_content_1fsgx_62", a = "_slideOut_1fsgx_1", o = "_slideIn_1fsgx_1", s = "_panel_1fsgx_78", c = "_dialog_1fsgx_84", l = "_actionContainer_1fsgx_97", u = "_closeModal_1fsgx_105", d = {
|
|
3
3
|
wrapper: e,
|
|
4
4
|
background: t,
|
|
5
5
|
fadeOut: n,
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
justify-content: center;
|
|
123
123
|
};
|
|
124
124
|
|
|
125
|
-
@
|
|
125
|
+
@include u.breakpoint(mobileOnly) {
|
|
126
126
|
.content.panel,
|
|
127
127
|
.content.dialog {
|
|
128
128
|
width: 100%;
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
@
|
|
133
|
+
@include u.breakpoint(tablet) {
|
|
134
134
|
.content.panel {
|
|
135
135
|
width: #{u.width("column", 4)};
|
|
136
136
|
}
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
142
|
|
|
143
|
-
@
|
|
143
|
+
@include u.breakpoint(desktop) {
|
|
144
144
|
.content.dialog {
|
|
145
145
|
width: #{u.width("column", 8)};
|
|
146
146
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/// Configurable Sass variables for @stamcat/craftsman.
|
|
2
|
+
///
|
|
3
|
+
/// To override breakpoints in your application, load this module first with
|
|
4
|
+
/// your custom values before importing any other craftsman styles:
|
|
5
|
+
///
|
|
6
|
+
/// @example scss
|
|
7
|
+
/// @use "@stamcat/craftsman/styles/config" with (
|
|
8
|
+
/// $bp-tablet: 768,
|
|
9
|
+
/// $bp-desktop: 1200,
|
|
10
|
+
/// $bp-mobileMax: 767.99999,
|
|
11
|
+
/// $bp-tabletMax: 1199.99999,
|
|
12
|
+
/// );
|
|
13
|
+
/// @use "@stamcat/craftsman/styles/global/globalStyles";
|
|
14
|
+
|
|
15
|
+
// All values are unitless numbers (px implied).
|
|
16
|
+
// Default values mirror src/styles/utilities/constants.ts.
|
|
17
|
+
|
|
18
|
+
// Width defaults
|
|
19
|
+
$w-text: 14 !default;
|
|
20
|
+
$w-gutter: 16 !default;
|
|
21
|
+
$w-column: 60 !default;
|
|
22
|
+
|
|
23
|
+
// Breakpoint values used in @media queries.
|
|
24
|
+
// CSS custom properties cannot be used in @media conditions — these must be static values.
|
|
25
|
+
$bp-mobileMax: 659.99999 !default;
|
|
26
|
+
$bp-tablet: 660 !default;
|
|
27
|
+
$bp-tabletMax: 1039.99999 !default;
|
|
28
|
+
$bp-desktop: 1040 !default;
|
|
29
|
+
$bp-desktopMax: 1319.99999 !default;
|
|
30
|
+
$bp-extDesktop: 1320 !default;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "../config";
|
|
1
2
|
@use "./components/typography";
|
|
2
3
|
@use "./components/code";
|
|
3
4
|
@use "./components/checkbox";
|
|
@@ -8,7 +9,6 @@
|
|
|
8
9
|
@layer craftsman-base, craftsman-theme;
|
|
9
10
|
|
|
10
11
|
@layer craftsman-base {
|
|
11
|
-
:global {
|
|
12
12
|
:root {
|
|
13
13
|
color-scheme: light dark;
|
|
14
14
|
font-synthesis: none;
|
|
@@ -78,6 +78,5 @@ textarea {
|
|
|
78
78
|
a {
|
|
79
79
|
@extend %text-link;
|
|
80
80
|
}
|
|
81
|
-
}
|
|
82
81
|
|
|
83
82
|
}
|
|
@@ -25,8 +25,12 @@ function s(t) {
|
|
|
25
25
|
}).filter((e) => !!e);
|
|
26
26
|
}
|
|
27
27
|
function c(e) {
|
|
28
|
+
if (!(!e || Object.keys(e).length === 0)) return `:root { ${Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join(" ")} }`;
|
|
29
|
+
}
|
|
30
|
+
function l(e) {
|
|
28
31
|
let n = [
|
|
29
32
|
t(":root", { ...e.colors || {} }),
|
|
33
|
+
c(e.widths),
|
|
30
34
|
a(e.root),
|
|
31
35
|
...s(e.components)
|
|
32
36
|
].filter(Boolean).join("\n");
|
|
@@ -39,4 +43,4 @@ function c(e) {
|
|
|
39
43
|
].filter(Boolean).join("\n");
|
|
40
44
|
}
|
|
41
45
|
//#endregion
|
|
42
|
-
export {
|
|
46
|
+
export { l as themeBuilder };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ColorKey } from '../utilities/color';
|
|
2
2
|
import { componentSelectors } from './components';
|
|
3
|
+
import { LayoutWidthsType } from '../../utilities/types';
|
|
3
4
|
export type ColorVariableName = `--${ColorKey}`;
|
|
4
5
|
export type CSSObject = {
|
|
5
6
|
[key: string]: string | number | CSSObject | undefined;
|
|
@@ -14,8 +15,10 @@ export type ComponentThemeOverrides = {
|
|
|
14
15
|
[K in RegisteredComponent]?: CSSObject | LegacySerializedStyles | string;
|
|
15
16
|
};
|
|
16
17
|
export type Colors = Partial<Record<ColorVariableName, string>>;
|
|
18
|
+
export type WidthOverrides = Partial<Record<LayoutWidthsType, number>>;
|
|
17
19
|
export type Theme = {
|
|
18
20
|
colors?: Colors;
|
|
21
|
+
widths?: WidthOverrides;
|
|
19
22
|
root?: CSSObject | LegacySerializedStyles | string;
|
|
20
23
|
components?: ComponentThemeOverrides;
|
|
21
24
|
};
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
@use "sass:map";
|
|
2
2
|
@use "sass:string";
|
|
3
|
+
@use "../config" as cfg;
|
|
3
4
|
|
|
4
5
|
$width-defaults: (
|
|
5
|
-
text:
|
|
6
|
-
gutter:
|
|
7
|
-
column:
|
|
8
|
-
mobileMax:
|
|
9
|
-
tablet:
|
|
10
|
-
tabletMax:
|
|
11
|
-
desktop:
|
|
12
|
-
desktopMax:
|
|
13
|
-
extDesktop:
|
|
6
|
+
text: cfg.$w-text,
|
|
7
|
+
gutter: cfg.$w-gutter,
|
|
8
|
+
column: cfg.$w-column,
|
|
9
|
+
mobileMax: cfg.$bp-mobileMax,
|
|
10
|
+
tablet: cfg.$bp-tablet,
|
|
11
|
+
tabletMax: cfg.$bp-tabletMax,
|
|
12
|
+
desktop: cfg.$bp-desktop,
|
|
13
|
+
desktopMax: cfg.$bp-desktopMax,
|
|
14
|
+
extDesktop: cfg.$bp-extDesktop,
|
|
14
15
|
);
|
|
15
16
|
|
|
16
17
|
@function color($name, $type: hex, $alpha: 1) {
|
|
@@ -65,43 +66,43 @@ $width-defaults: (
|
|
|
65
66
|
}
|
|
66
67
|
|
|
67
68
|
@if $bp == mobileMax {
|
|
68
|
-
@return string.unquote("(max-width: #{
|
|
69
|
+
@return string.unquote("(max-width: #{cfg.$bp-mobileMax}px)");
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
@if $bp == tablet {
|
|
72
|
-
@return string.unquote("(min-width: #{
|
|
73
|
+
@return string.unquote("(min-width: #{cfg.$bp-tablet}px)");
|
|
73
74
|
}
|
|
74
75
|
|
|
75
76
|
@if $bp == tabletMax {
|
|
76
|
-
@return string.unquote("(max-width: #{
|
|
77
|
+
@return string.unquote("(max-width: #{cfg.$bp-tabletMax}px)");
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
@if $bp == desktop {
|
|
80
|
-
@return string.unquote("(min-width: #{
|
|
81
|
+
@return string.unquote("(min-width: #{cfg.$bp-desktop}px)");
|
|
81
82
|
}
|
|
82
83
|
|
|
83
84
|
@if $bp == desktopMax {
|
|
84
|
-
@return string.unquote("(max-width: #{
|
|
85
|
+
@return string.unquote("(max-width: #{cfg.$bp-desktopMax}px)");
|
|
85
86
|
}
|
|
86
87
|
|
|
87
88
|
@if $bp == extDesktop {
|
|
88
|
-
@return string.unquote("(min-width: #{
|
|
89
|
+
@return string.unquote("(min-width: #{cfg.$bp-extDesktop}px)");
|
|
89
90
|
}
|
|
90
91
|
|
|
91
92
|
@if $bp == mobileOnly {
|
|
92
|
-
@return string.unquote("(min-width: 0px) and (max-width: #{
|
|
93
|
+
@return string.unquote("(min-width: 0px) and (max-width: #{cfg.$bp-mobileMax}px)");
|
|
93
94
|
}
|
|
94
95
|
|
|
95
96
|
@if $bp == tabletOnly {
|
|
96
|
-
@return string.unquote("(min-width: #{
|
|
97
|
+
@return string.unquote("(min-width: #{cfg.$bp-tablet}px) and (max-width: #{cfg.$bp-tabletMax}px)");
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
@if $bp == mobileTablet {
|
|
100
|
-
@return string.unquote("(min-width: 0px) and (max-width: #{
|
|
101
|
+
@return string.unquote("(min-width: 0px) and (max-width: #{cfg.$bp-tabletMax}px)");
|
|
101
102
|
}
|
|
102
103
|
|
|
103
104
|
@if $bp == desktopOnly {
|
|
104
|
-
@return string.unquote("(min-width: #{
|
|
105
|
+
@return string.unquote("(min-width: #{cfg.$bp-desktop}px) and (max-width: #{cfg.$bp-desktopMax}px)");
|
|
105
106
|
}
|
|
106
107
|
|
|
107
108
|
@error "Unknown breakpoint `#{$bp}`.";
|