@stamcat/craftsman 0.0.23-alpha.24 → 0.0.23-alpha.26
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/Styles.esm.js +7 -7
- package/package.json +1 -1
- package/src/components/Button.esm.js +12 -10
- package/src/components/Input.d.ts +11 -1
- package/src/components/Input.esm.js +134 -3
- package/src/components/Modal.esm.js +60 -58
- package/src/styles/components/ClientProvider.d.ts +0 -2
- package/src/styles/components/ClientProvider.esm.js +9 -10
- package/src/styles/components/NextJSProvider.d.ts +1 -3
- package/src/styles/components/NextJSProvider.esm.js +19 -21
- package/src/styles/global/components/button.d.ts +1 -0
- package/src/styles/global/components/button.esm.js +35 -29
- package/src/styles/global/components/code.esm.js +14 -11
- package/src/styles/global/components/input.d.ts +1 -0
- package/src/styles/global/components/input.esm.js +32 -0
- package/src/styles/global/components/loaders.d.ts +1 -3
- package/src/styles/global/components/loaders.esm.js +1 -11
- package/src/styles/global/components/loaders.module.css +1 -1
- package/src/styles/global/components/loaders.module.esm.js +13 -17
- package/src/styles/global/components/loaders.module.scss +73 -67
- package/src/styles/global/components/typography.esm.js +31 -27
- package/src/styles/global/globalStyles.esm.js +13 -6
- package/src/styles/global/variables.esm.js +8 -3
- package/src/styles/index.d.ts +0 -1
- package/src/styles/theme/components.esm.js +5 -5
- package/src/styles/utilities/color.d.ts +170 -1
- package/src/styles/utilities/color.esm.js +4 -8
- package/src/styles/utilities/constants.d.ts +168 -73
- package/src/styles/utilities/constants.esm.js +174 -70
- package/src/styles/utilities/layout.d.ts +5 -2
- package/src/styles/utilities/layout.esm.js +19 -24
- package/src/styles/utilities/types.d.ts +48 -14
- package/src/styles/utilities/types.esm.js +25 -0
- package/src/styles/utilities/config.d.ts +0 -7
- package/src/styles/utilities/config.esm.js +0 -41
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { color as e } from "../../utilities/color.esm.js";
|
|
2
|
+
import { width as t } from "../../utilities/layout.esm.js";
|
|
3
|
+
import { css as n } from "@emotion/react";
|
|
2
4
|
//#region src/styles/global/components/code.ts
|
|
3
|
-
var
|
|
4
|
-
background-color:
|
|
5
|
-
color:
|
|
6
|
-
padding:
|
|
7
|
-
margin:
|
|
5
|
+
var r = n`
|
|
6
|
+
background-color: ${e("gray200")};
|
|
7
|
+
color: ${e("gray800")};
|
|
8
|
+
padding: ${t("gutter", .125)} ${t("gutter", .25)};
|
|
9
|
+
margin: ${t("gutter", .125)};
|
|
8
10
|
display: inline-block;
|
|
11
|
+
font-size: ${t("text")};
|
|
9
12
|
&:has(pre) {
|
|
10
|
-
padding:
|
|
11
|
-
border-radius:
|
|
12
|
-
background-color:
|
|
13
|
-
color:
|
|
13
|
+
padding: ${t("gutter")};
|
|
14
|
+
border-radius: ${t("gutter", .5)};
|
|
15
|
+
background-color: ${e("gray800")};
|
|
16
|
+
color: ${e("gray200")};
|
|
14
17
|
}
|
|
15
18
|
|
|
16
19
|
&:has(pre) pre {
|
|
@@ -18,4 +21,4 @@ var t = e`
|
|
|
18
21
|
}
|
|
19
22
|
`;
|
|
20
23
|
//#endregion
|
|
21
|
-
export {
|
|
24
|
+
export { r as code };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const input: import('@emotion/utils').SerializedStyles;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { color as e } from "../../utilities/color.esm.js";
|
|
2
|
+
import { width as t } from "../../utilities/layout.esm.js";
|
|
3
|
+
import { css as n } from "@emotion/react";
|
|
4
|
+
//#region src/styles/global/components/input.ts
|
|
5
|
+
var r = n`
|
|
6
|
+
color: ${e("text")};
|
|
7
|
+
border-radius: 3px;
|
|
8
|
+
border: 1px solid ${e("gray400")};
|
|
9
|
+
padding: ${t("gutter", .5)};
|
|
10
|
+
background-color: ${e("white")};
|
|
11
|
+
|
|
12
|
+
&[type="number"]::-webkit-outer-spin-button,
|
|
13
|
+
&[type="number"]::-webkit-inner-spin-button {
|
|
14
|
+
-webkit-appearance: none;
|
|
15
|
+
margin: 0;
|
|
16
|
+
}
|
|
17
|
+
&[type="number"] {
|
|
18
|
+
-moz-appearance: textfield;
|
|
19
|
+
appearance: textfield;
|
|
20
|
+
}
|
|
21
|
+
&:disabled, &.disabled {
|
|
22
|
+
border-color: ${e("gray200")};
|
|
23
|
+
background-color: ${e("gray100")};
|
|
24
|
+
}
|
|
25
|
+
&:focus {
|
|
26
|
+
outline: 0;
|
|
27
|
+
box-shadow: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
`;
|
|
31
|
+
//#endregion
|
|
32
|
+
export { r as input };
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import { SerializedStyles } from '@emotion/react';
|
|
2
2
|
import { default as z } from 'zod';
|
|
3
3
|
export declare const LoaderStyleSchema: z.ZodEnum<{
|
|
4
|
+
spinner: "spinner";
|
|
4
5
|
dots: "dots";
|
|
5
6
|
"dots-trace": "dots-trace";
|
|
6
|
-
"dots-bounce": "dots-bounce";
|
|
7
7
|
"dots-orbit": "dots-orbit";
|
|
8
8
|
dashes: "dashes";
|
|
9
|
-
spinner: "spinner";
|
|
10
9
|
swirl: "swirl";
|
|
11
10
|
ball: "ball";
|
|
12
11
|
boxy: "boxy";
|
|
13
|
-
factory: "factory";
|
|
14
12
|
}>;
|
|
15
13
|
export type LoaderStyle = z.infer<typeof LoaderStyleSchema>;
|
|
16
14
|
export type LoaderStyleDefinition = (color: string, width?: number) => SerializedStyles;
|
|
@@ -3,14 +3,12 @@ import t from "zod";
|
|
|
3
3
|
t.enum([
|
|
4
4
|
"dots",
|
|
5
5
|
"dots-trace",
|
|
6
|
-
"dots-bounce",
|
|
7
6
|
"dots-orbit",
|
|
8
7
|
"dashes",
|
|
9
8
|
"spinner",
|
|
10
9
|
"swirl",
|
|
11
10
|
"ball",
|
|
12
|
-
"boxy"
|
|
13
|
-
"factory"
|
|
11
|
+
"boxy"
|
|
14
12
|
]);
|
|
15
13
|
var n = {
|
|
16
14
|
dots: (t, n = 100) => e`
|
|
@@ -18,10 +16,6 @@ var n = {
|
|
|
18
16
|
--_l5w: ${Math.round(n * .125)}px;
|
|
19
17
|
--_l5w2: ${Math.round(n * .16666)}px;
|
|
20
18
|
--_l5w3: ${Math.round(n * -.16666)}px;
|
|
21
|
-
`,
|
|
22
|
-
"dots-bounce": (t, n = 60) => e`
|
|
23
|
-
--_g: no-repeat radial-gradient(circle closest-side, ${t} 90%, #0000);
|
|
24
|
-
--_gw: ${n}px;
|
|
25
19
|
`,
|
|
26
20
|
"dots-trace": (t, n = 60) => e`
|
|
27
21
|
--_dtc: ${t};
|
|
@@ -55,10 +49,6 @@ var n = {
|
|
|
55
49
|
--_boxc: ${t};
|
|
56
50
|
--_boxw: ${n}px;
|
|
57
51
|
--_boxw2: ${Math.round(n * .16666)}px;
|
|
58
|
-
`,
|
|
59
|
-
factory: (t, n = 0) => e`
|
|
60
|
-
--_ftyc: ${t};
|
|
61
|
-
--_ftyw: ${n};
|
|
62
52
|
`
|
|
63
53
|
};
|
|
64
54
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._dots_1w7tl_1{aspect-ratio:1;width:var(--_l5w);margin:0 var(--_l5w2);border-radius:50%;animation:1s linear infinite alternate _l5_1w7tl_1}@keyframes _l5_1w7tl_1{0%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:var(--_l5c)}33%{box-shadow:var(--_l5w2) 0 var(--_l5c), var(--_l5w3) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}66%{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:color-mix(in srgb, var(--_l5c) 80%, white 75%)}to{box-shadow:var(--_l5w2) 0 color-mix(in srgb, var(--_l5c) 80%, white 75%), var(--_l5w3) 0 var(--_l5c);background:var(--_l5c)}}@keyframes _l3_1w7tl_1{to{transform:rotate(1turn)}}._dots-trace_1w7tl_41{width:var(--_dtw);aspect-ratio:4;background:radial-gradient(circle closest-side, var(--_dtc) 90%, #0000) 0/33.3333% 100% space;clip-path:inset(0 100% 0 0);animation:1s steps(4,end) infinite _l1_1w7tl_1}@keyframes _l1_1w7tl_1{to{clip-path:inset(0 -34% 0 0)}}._dots-orbit_1w7tl_54{width:var(--_dow);aspect-ratio:1;background:var(--_doc);border-radius:50%;animation:2s linear infinite _l22-0_1w7tl_1;display:grid}._dots-orbit_1w7tl_54:before,._dots-orbit_1w7tl_54:after{content:"";background:inherit;border-radius:50%;grid-area:1/1;margin:15%;animation:1s infinite _l22_1w7tl_1;transform:rotate(0)translate(150%)}._dots-orbit_1w7tl_54:after{animation-delay:-.5s}@keyframes _l22-0_1w7tl_1{to{transform:rotate(1turn)}}@keyframes _l22_1w7tl_1{to{transform:rotate(1turn)translate(150%)}}._dashes_1w7tl_85{width:var(--_dshw);height:calc(var(--_dshw) * .3);background:linear-gradient(var(--_dshc) 0 0) left/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) center/var(--_dshw2) 4px, linear-gradient(var(--_dshc) 0 0) right/var(--_dshw2) 4px;background-repeat:no-repeat;animation:1s linear infinite _dashes_1w7tl_85}@keyframes _dashes_1w7tl_85{0%{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:1}33%{background-size:var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px, var(--_dshw2) 4px;opacity:.7}66%{background-size:var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2), var(--_dshw2) 4px;opacity:.7}to{background-size:var(--_dshw2) 4px, var(--_dshw2) 4px, var(--_dshw2) var(--_dshw2);opacity:1}}._spinner_1w7tl_111{width:var(--_spnw);aspect-ratio:1;border:var(--_spnw2) solid color-mix(in srgb, var(--_spnc) 20%, transparent);border-right-color:var(--_spnc);border-radius:50%;animation:1s linear infinite _l2_1w7tl_1}@keyframes _l2_1w7tl_1{to{transform:rotate(1turn)}}._swirl_1w7tl_125{width:var(--_swrlw);padding:var(--_swrlw2);aspect-ratio:1;background:var(--_swrlc);--_m:conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--_m);-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;border-radius:50%;animation:1s linear infinite _l3_1w7tl_1;-webkit-mask-composite:source-out;mask-composite:subtract}._ball_1w7tl_146{width:var(--_ballw);aspect-ratio:1;background:radial-gradient(farthest-side, var(--_ballc) 95%, #0000) 50% 1px/var(--_ballw2) var(--_ballw2) no-repeat, radial-gradient(farthest-side, #0000 calc(100% - var(--_ballw2)), #ccc 0);border-radius:50%;animation:2s linear infinite _l9_1w7tl_1}@keyframes _l9_1w7tl_1{to{transform:rotate(1turn)}}._boxy_1w7tl_159{width:var(--_boxw);height:var(--_boxw2);background:linear-gradient(var(--_boxc) 0 0) left -25% top 0/20% 100% no-repeat #ddd;animation:1s steps(6,end) infinite _l7_1w7tl_1;-webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20% 100%}@keyframes _l7_1w7tl_1{to{background-position:right -25% top 0}}
|
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
import './loaders.module.css';//#region src/styles/global/components/loaders.module.scss
|
|
2
|
-
var e = "
|
|
2
|
+
var e = "_dots_1w7tl_1", t = "_l5_1w7tl_1", n = "_l1_1w7tl_1", r = "_l22_1w7tl_1", i = "_dashes_1w7tl_85", a = "_spinner_1w7tl_111", o = "_l2_1w7tl_1", s = "_swirl_1w7tl_125", c = "_l3_1w7tl_1", l = "_ball_1w7tl_146", u = "_l9_1w7tl_1", d = "_boxy_1w7tl_159", f = "_l7_1w7tl_1", p = {
|
|
3
3
|
dots: e,
|
|
4
4
|
l5: t,
|
|
5
|
-
"dots-
|
|
6
|
-
|
|
7
|
-
"dots-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
swirl: c,
|
|
5
|
+
"dots-trace": "_dots-trace_1w7tl_41",
|
|
6
|
+
l1: n,
|
|
7
|
+
"dots-orbit": "_dots-orbit_1w7tl_54",
|
|
8
|
+
"l22-0": "_l22-0_1w7tl_1",
|
|
9
|
+
l22: r,
|
|
10
|
+
dashes: i,
|
|
11
|
+
spinner: a,
|
|
12
|
+
l2: o,
|
|
13
|
+
swirl: s,
|
|
14
|
+
l3: c,
|
|
16
15
|
ball: l,
|
|
17
16
|
l9: u,
|
|
18
17
|
boxy: d,
|
|
19
|
-
l7: f
|
|
20
|
-
factory: p,
|
|
21
|
-
"l7-1": "_l7-1_1132g_1",
|
|
22
|
-
"l7-2": "_l7-2_1132g_1"
|
|
18
|
+
l7: f
|
|
23
19
|
};
|
|
24
20
|
//#endregion
|
|
25
|
-
export { l as ball, d as boxy,
|
|
21
|
+
export { l as ball, d as boxy, i as dashes, p as default, e as dots, n as l1, o as l2, r as l22, c as l3, t as l5, f as l7, u as l9, a as spinner, s as swirl };
|
|
@@ -32,42 +32,48 @@
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.dots-bounce {
|
|
36
|
-
width: var(--_gw);
|
|
37
|
-
aspect-ratio: 2;
|
|
38
|
-
background:
|
|
39
|
-
var(--_g) 0% 50%,
|
|
40
|
-
var(--_g) 50% 50%,
|
|
41
|
-
var(--_g) 100% 50%;
|
|
42
|
-
background-size: calc(100% / 3) 50%;
|
|
43
|
-
animation: l3 1s infinite linear;
|
|
44
|
-
}
|
|
45
35
|
@keyframes l3 {
|
|
46
|
-
20%
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
36
|
+
20%{background-position:0% 0%, 50% 50%,100% 50%}
|
|
37
|
+
40%{background-position:0% 100%, 50% 0%,100% 50%}
|
|
38
|
+
60%{background-position:0% 50%, 50% 100%,100% 0%}
|
|
39
|
+
80%{background-position:0% 50%, 50% 50%,100% 100%}
|
|
40
|
+
}
|
|
41
|
+
// .dots-bounce {
|
|
42
|
+
// width: var(--_gw);
|
|
43
|
+
// aspect-ratio: 2;
|
|
44
|
+
// background:
|
|
45
|
+
// var(--_g) 0% 50%,
|
|
46
|
+
// var(--_g) 50% 50%,
|
|
47
|
+
// var(--_g) 100% 50%;
|
|
48
|
+
// background-size: calc(100% / 3) 50%;
|
|
49
|
+
// animation: l3 1s infinite linear;
|
|
50
|
+
// }
|
|
51
|
+
// @keyframes l3 {
|
|
52
|
+
// 20% {
|
|
53
|
+
// background-position:
|
|
54
|
+
// 0% 0%,
|
|
55
|
+
// 50% 50%,
|
|
56
|
+
// 100% 50%;
|
|
57
|
+
// }
|
|
58
|
+
// 40% {
|
|
59
|
+
// background-position:
|
|
60
|
+
// 0% 100%,
|
|
61
|
+
// 50% 0%,
|
|
62
|
+
// 100% 50%;
|
|
63
|
+
// }
|
|
64
|
+
// 60% {
|
|
65
|
+
// background-position:
|
|
66
|
+
// 0% 50%,
|
|
67
|
+
// 50% 100%,
|
|
68
|
+
// 100% 0%;
|
|
69
|
+
// }
|
|
70
|
+
// 80% {
|
|
71
|
+
// background-position:
|
|
72
|
+
// 0% 50%,
|
|
73
|
+
// 50% 50%,
|
|
74
|
+
// 100% 100%;
|
|
75
|
+
// }
|
|
76
|
+
// }
|
|
71
77
|
|
|
72
78
|
.dots-trace {
|
|
73
79
|
width: var(--_dtw);
|
|
@@ -205,36 +211,36 @@
|
|
|
205
211
|
100% {background-position: right -25% top 0}
|
|
206
212
|
}
|
|
207
213
|
|
|
208
|
-
.factory {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
}
|
|
227
|
-
@keyframes l7-1 {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
}
|
|
236
|
-
@keyframes l7-2 {
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
}
|
|
214
|
+
// .factory {
|
|
215
|
+
// width: var(--_ftyw);
|
|
216
|
+
// height: var(--_ftyw2);
|
|
217
|
+
// box-shadow: 0 3px 0 var(--_ftyc);
|
|
218
|
+
// position: relative;
|
|
219
|
+
// clip-path: inset(-40px 0 -5px);
|
|
220
|
+
// &:before {
|
|
221
|
+
// content: "";
|
|
222
|
+
// position: absolute;
|
|
223
|
+
// inset: auto calc(50% - 17px) 0;
|
|
224
|
+
// height: var(--_ftyw3);
|
|
225
|
+
// --g:no-repeat linear-gradient(color-mix(in srgb, var(--_ftyc) 30%, white) 0 0);
|
|
226
|
+
// background: var(--g),var(--g),var(--g),var(--g);
|
|
227
|
+
// background-size: var(--_ftyw4) 14px;
|
|
228
|
+
// animation:
|
|
229
|
+
// l7-1 2s infinite linear,
|
|
230
|
+
// l7-2 2s infinite linear;
|
|
231
|
+
// }
|
|
232
|
+
// }
|
|
233
|
+
// @keyframes l7-1 {
|
|
234
|
+
// 0%,
|
|
235
|
+
// 100% {background-position: 0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
236
|
+
// 17.5% {background-position: 0 100%,100% -var(--_ftyw3),0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
237
|
+
// 35% {background-position: 0 100%,100% 100% ,0 -var(--_ftyw3),100% -var(--_ftyw3)}
|
|
238
|
+
// 52.5% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% -var(--_ftyw3)}
|
|
239
|
+
// 70%,
|
|
240
|
+
// 98% {background-position: 0 100%,100% 100% ,0 calc(100% - var(--_ftyw4)),100% calc(100% - var(--_ftyw4))}
|
|
241
|
+
// }
|
|
242
|
+
// @keyframes l7-2 {
|
|
243
|
+
// 0%,70% {transform:translate(0)}
|
|
244
|
+
// 100% {transform:translate(200%)}
|
|
245
|
+
// }
|
|
240
246
|
|
|
@@ -1,54 +1,58 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { color as e } from "../../utilities/color.esm.js";
|
|
2
|
+
import { breakpoint as t, width as n } from "../../utilities/layout.esm.js";
|
|
3
|
+
import { css as r } from "@emotion/react";
|
|
3
4
|
//#region src/styles/global/components/typography.ts
|
|
4
|
-
var
|
|
5
|
-
body:
|
|
5
|
+
var i = {
|
|
6
|
+
body: r`
|
|
6
7
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
7
|
-
color:
|
|
8
|
+
color: ${e("text")};
|
|
8
9
|
line-height: 1.5;
|
|
9
10
|
font-weight: 400;
|
|
10
|
-
font-size:
|
|
11
|
+
font-size: ${n("text")};
|
|
12
|
+
::selection {
|
|
13
|
+
background-color: ${e("blue200")};
|
|
14
|
+
}
|
|
11
15
|
`,
|
|
12
|
-
h1:
|
|
13
|
-
font-size:
|
|
16
|
+
h1: r`
|
|
17
|
+
font-size: ${n("text", 3.125)};
|
|
14
18
|
line-height: 1.2;
|
|
15
19
|
`,
|
|
16
|
-
h2:
|
|
17
|
-
font-size:
|
|
20
|
+
h2: r`
|
|
21
|
+
font-size: ${n("text", 2.625)};
|
|
18
22
|
font-weight: 625;
|
|
19
23
|
line-height: 1.1;
|
|
20
24
|
`,
|
|
21
|
-
h3:
|
|
22
|
-
font-size:
|
|
25
|
+
h3: r`
|
|
26
|
+
font-size: ${n("text", 1.625)};
|
|
23
27
|
line-height: 1.1;
|
|
24
28
|
`,
|
|
25
|
-
h4:
|
|
26
|
-
font-size:
|
|
29
|
+
h4: r`
|
|
30
|
+
font-size: ${n("text", 1.25)};
|
|
27
31
|
line-height: 1.1;
|
|
28
|
-
margin:
|
|
29
|
-
${
|
|
30
|
-
font-size:
|
|
32
|
+
margin: ${n("gutter", .5)} 0px;
|
|
33
|
+
${t("mobileOnly", r`
|
|
34
|
+
font-size: ${n("text")};
|
|
31
35
|
`)}
|
|
32
36
|
`,
|
|
33
|
-
h5:
|
|
34
|
-
font-size:
|
|
37
|
+
h5: r`
|
|
38
|
+
font-size: ${n("text")};
|
|
35
39
|
line-height: 1.2;
|
|
36
40
|
`,
|
|
37
|
-
h6:
|
|
38
|
-
font-size:
|
|
41
|
+
h6: r`
|
|
42
|
+
font-size: ${n("text", .875)};
|
|
39
43
|
line-height: 1.2;
|
|
40
44
|
font-weight: 600;
|
|
41
45
|
`,
|
|
42
|
-
p:
|
|
46
|
+
p: r`
|
|
43
47
|
font-style: normal;
|
|
44
|
-
font-size:
|
|
48
|
+
font-size: ${n("text")};
|
|
45
49
|
line-height: 1.5;
|
|
46
50
|
margin: 0;
|
|
47
|
-
${
|
|
51
|
+
${t("mobileOnly", r`
|
|
48
52
|
line-height: 1.5;
|
|
49
|
-
font-size:
|
|
53
|
+
font-size: ${n("text", .875)};
|
|
50
54
|
`)}
|
|
51
55
|
`
|
|
52
|
-
},
|
|
56
|
+
}, a = Object.entries(i).map(([e, t]) => r({ [e]: t }));
|
|
53
57
|
//#endregion
|
|
54
|
-
export {
|
|
58
|
+
export { i as typography, a as typographyStyles };
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { colors as e, widths as t } from "./variables.esm.js";
|
|
2
2
|
import { typographyStyles as n } from "./components/typography.esm.js";
|
|
3
|
-
import { button as r } from "./components/button.esm.js";
|
|
4
|
-
import { code as
|
|
5
|
-
import {
|
|
3
|
+
import { button as r, textLinkStyles as i } from "./components/button.esm.js";
|
|
4
|
+
import { code as a } from "./components/code.esm.js";
|
|
5
|
+
import { input as o } from "./components/input.esm.js";
|
|
6
|
+
import { css as s } from "@emotion/react";
|
|
6
7
|
//#region src/styles/global/globalStyles.ts
|
|
7
|
-
var
|
|
8
|
+
var c = s`
|
|
8
9
|
:root {
|
|
9
10
|
${t}
|
|
10
11
|
${e}
|
|
@@ -49,11 +50,17 @@ var o = a`
|
|
|
49
50
|
border: 0px;
|
|
50
51
|
}
|
|
51
52
|
code {
|
|
52
|
-
${
|
|
53
|
+
${a}
|
|
53
54
|
}
|
|
54
55
|
button {
|
|
55
56
|
${r}
|
|
56
57
|
}
|
|
58
|
+
input {
|
|
59
|
+
${o}
|
|
60
|
+
}
|
|
61
|
+
a {
|
|
62
|
+
${i}
|
|
63
|
+
}
|
|
57
64
|
ul {
|
|
58
65
|
margin: 0;
|
|
59
66
|
padding: 0;
|
|
@@ -61,4 +68,4 @@ var o = a`
|
|
|
61
68
|
${n}
|
|
62
69
|
`;
|
|
63
70
|
//#endregion
|
|
64
|
-
export {
|
|
71
|
+
export { c as globalStyles };
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { defaultWidths as e } from "../utilities/constants.esm.js";
|
|
2
2
|
import { colors as t } from "../utilities/color.esm.js";
|
|
3
3
|
//#region src/styles/global/variables.ts
|
|
4
|
-
var n =
|
|
4
|
+
var n = {
|
|
5
|
+
...e,
|
|
6
|
+
mobileMax: e.tablet - 1e-5,
|
|
7
|
+
tabletMax: e.desktop - 1e-5,
|
|
8
|
+
desktopMax: e.extDesktop - 1e-5
|
|
9
|
+
}, r = Object.entries(t).map(([e, t]) => `--${e}: ${t};`).join("\n"), i = Object.entries(n).map(([e, t]) => `--w-${e}: ${t}px;`).join("\n");
|
|
5
10
|
//#endregion
|
|
6
|
-
export {
|
|
11
|
+
export { r as colors, i as widths };
|
package/src/styles/index.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { htmlTagNames as e } from "./constants.esm.js";
|
|
2
|
+
import { components_exports as t } from "../../../Components.esm.js";
|
|
3
3
|
//#region src/styles/theme/components.ts
|
|
4
4
|
function n(e) {
|
|
5
5
|
return e.charAt(0).toLowerCase() + e.slice(1);
|
|
6
6
|
}
|
|
7
|
-
function r(
|
|
8
|
-
return
|
|
7
|
+
function r(t) {
|
|
8
|
+
return e.has(t) ? t : `.${t}`;
|
|
9
9
|
}
|
|
10
|
-
var i = Object.keys(
|
|
10
|
+
var i = Object.keys(t).map(n), a = Object.fromEntries(i.map((e) => [e, r(e)]));
|
|
11
11
|
//#endregion
|
|
12
12
|
export { a as componentSelectors };
|