@blockle/blocks-core 0.23.0 → 0.24.0
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/dist/atoms/atoms.css.d.ts +1224 -126
- package/dist/atoms/atoms.css.js +5 -1
- package/dist/config/themeTokens.d.ts +14 -2
- package/dist/css/tokens.d.ts +2 -1
- package/dist/css/tokens.js +58 -51
- package/dist/css/vars.css.d.ts +73 -13
- package/dist/css/vars.css.js +6 -1
- package/dist/theme/makeVanillaTheme.d.ts +1 -1
- package/dist/theme/makeVanillaTheme.js +11 -1
- package/dist/utils/typing/helpers.d.ts +23 -1
- package/package.json +2 -2
package/dist/atoms/atoms.css.js
CHANGED
|
@@ -3,7 +3,11 @@ import { minMediaQuery } from "../css/breakpoint/breakpoint.js";
|
|
|
3
3
|
import { vars } from "../css/vars.css.js";
|
|
4
4
|
import { defineProperties } from "./defineProperties.js";
|
|
5
5
|
setFileScope("src/atoms/atoms.css.ts", "@blockle/blocks-core");
|
|
6
|
-
const colorsWithCurrentColor = {
|
|
6
|
+
const colorsWithCurrentColor = {
|
|
7
|
+
...vars.color,
|
|
8
|
+
currentColor: "currentColor",
|
|
9
|
+
transparent: "transparent"
|
|
10
|
+
};
|
|
7
11
|
const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
|
|
8
12
|
const marginSpace = { auto: "auto", ...vars.space };
|
|
9
13
|
const unresponsiveAtomicProperties = defineProperties({
|
|
@@ -6,7 +6,19 @@ type BorderWidth = 'small' | 'medium' | 'large';
|
|
|
6
6
|
type BoxShadow = 'small' | 'medium' | 'large';
|
|
7
7
|
type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
8
8
|
type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
9
|
-
type
|
|
9
|
+
type ColorPalette = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
|
|
10
|
+
type Color = {
|
|
11
|
+
white: string;
|
|
12
|
+
black: string;
|
|
13
|
+
primary: Record<ColorPalette, string>;
|
|
14
|
+
secondary: Record<ColorPalette, string>;
|
|
15
|
+
success: Record<ColorPalette, string>;
|
|
16
|
+
warning: Record<ColorPalette, string>;
|
|
17
|
+
danger: Record<ColorPalette, string>;
|
|
18
|
+
info: Record<ColorPalette, string>;
|
|
19
|
+
text: Record<ColorPalette, string>;
|
|
20
|
+
background: Record<ColorPalette, string>;
|
|
21
|
+
};
|
|
10
22
|
export type ThemeTokens = {
|
|
11
23
|
typography: {
|
|
12
24
|
fontFamily: {
|
|
@@ -28,6 +40,6 @@ export type ThemeTokens = {
|
|
|
28
40
|
focus: {
|
|
29
41
|
boxShadow: string;
|
|
30
42
|
};
|
|
31
|
-
color:
|
|
43
|
+
color: Color;
|
|
32
44
|
};
|
|
33
45
|
export {};
|
package/dist/css/tokens.d.ts
CHANGED
package/dist/css/tokens.js
CHANGED
|
@@ -1,80 +1,87 @@
|
|
|
1
|
+
const colorPalette = {
|
|
2
|
+
100: null,
|
|
3
|
+
200: null,
|
|
4
|
+
300: null,
|
|
5
|
+
400: null,
|
|
6
|
+
500: null,
|
|
7
|
+
600: null,
|
|
8
|
+
700: null,
|
|
9
|
+
800: null,
|
|
10
|
+
900: null
|
|
11
|
+
};
|
|
1
12
|
const tokens = {
|
|
2
13
|
typography: {
|
|
3
14
|
fontFamily: {
|
|
4
|
-
body:
|
|
5
|
-
primary:
|
|
6
|
-
secondary:
|
|
15
|
+
body: null,
|
|
16
|
+
primary: null,
|
|
17
|
+
secondary: null
|
|
7
18
|
},
|
|
8
19
|
fontSize: {
|
|
9
|
-
xsmall:
|
|
10
|
-
small:
|
|
11
|
-
medium:
|
|
12
|
-
large:
|
|
13
|
-
xlarge:
|
|
20
|
+
xsmall: null,
|
|
21
|
+
small: null,
|
|
22
|
+
medium: null,
|
|
23
|
+
large: null,
|
|
24
|
+
xlarge: null
|
|
14
25
|
},
|
|
15
26
|
fontWeight: {
|
|
16
|
-
regular:
|
|
17
|
-
medium:
|
|
18
|
-
strong:
|
|
27
|
+
regular: null,
|
|
28
|
+
medium: null,
|
|
29
|
+
strong: null
|
|
19
30
|
},
|
|
20
31
|
lineHeight: {
|
|
21
|
-
xsmall:
|
|
22
|
-
small:
|
|
23
|
-
medium:
|
|
24
|
-
large:
|
|
25
|
-
xlarge:
|
|
32
|
+
xsmall: null,
|
|
33
|
+
small: null,
|
|
34
|
+
medium: null,
|
|
35
|
+
large: null,
|
|
36
|
+
xlarge: null
|
|
26
37
|
}
|
|
27
38
|
},
|
|
28
39
|
spacing: {
|
|
29
|
-
none:
|
|
30
|
-
gutter:
|
|
31
|
-
xsmall:
|
|
32
|
-
small:
|
|
33
|
-
medium:
|
|
34
|
-
large:
|
|
35
|
-
xlarge:
|
|
40
|
+
none: null,
|
|
41
|
+
gutter: null,
|
|
42
|
+
xsmall: null,
|
|
43
|
+
small: null,
|
|
44
|
+
medium: null,
|
|
45
|
+
large: null,
|
|
46
|
+
xlarge: null
|
|
36
47
|
},
|
|
37
48
|
transition: {
|
|
38
|
-
slow:
|
|
39
|
-
normal:
|
|
40
|
-
fast:
|
|
49
|
+
slow: null,
|
|
50
|
+
normal: null,
|
|
51
|
+
fast: null
|
|
41
52
|
},
|
|
42
53
|
border: {
|
|
43
54
|
radius: {
|
|
44
|
-
small:
|
|
45
|
-
medium:
|
|
46
|
-
large:
|
|
47
|
-
xlarge:
|
|
55
|
+
small: null,
|
|
56
|
+
medium: null,
|
|
57
|
+
large: null,
|
|
58
|
+
xlarge: null
|
|
48
59
|
},
|
|
49
60
|
width: {
|
|
50
|
-
small:
|
|
51
|
-
medium:
|
|
52
|
-
large:
|
|
61
|
+
small: null,
|
|
62
|
+
medium: null,
|
|
63
|
+
large: null
|
|
53
64
|
}
|
|
54
65
|
},
|
|
55
66
|
shadow: {
|
|
56
|
-
small:
|
|
57
|
-
medium:
|
|
58
|
-
large:
|
|
67
|
+
small: null,
|
|
68
|
+
medium: null,
|
|
69
|
+
large: null
|
|
59
70
|
},
|
|
60
71
|
focus: {
|
|
61
|
-
boxShadow:
|
|
72
|
+
boxShadow: null
|
|
62
73
|
},
|
|
63
74
|
color: {
|
|
64
|
-
black:
|
|
65
|
-
white:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
text:
|
|
74
|
-
textLight: "#ffffff",
|
|
75
|
-
textDark: "#aeaeae",
|
|
76
|
-
danger: "#ff0000",
|
|
77
|
-
link: "#0000ff"
|
|
75
|
+
black: null,
|
|
76
|
+
white: null,
|
|
77
|
+
primary: colorPalette,
|
|
78
|
+
secondary: colorPalette,
|
|
79
|
+
success: colorPalette,
|
|
80
|
+
warning: colorPalette,
|
|
81
|
+
danger: colorPalette,
|
|
82
|
+
info: colorPalette,
|
|
83
|
+
background: colorPalette,
|
|
84
|
+
text: colorPalette
|
|
78
85
|
}
|
|
79
86
|
};
|
|
80
87
|
export {
|
package/dist/css/vars.css.d.ts
CHANGED
|
@@ -17,18 +17,78 @@ export declare const vars: {
|
|
|
17
17
|
color: {
|
|
18
18
|
white: `var(--${string})`;
|
|
19
19
|
black: `var(--${string})`;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
20
|
+
"background-100": `var(--${string})`;
|
|
21
|
+
"background-200": `var(--${string})`;
|
|
22
|
+
"background-300": `var(--${string})`;
|
|
23
|
+
"background-400": `var(--${string})`;
|
|
24
|
+
"background-500": `var(--${string})`;
|
|
25
|
+
"background-600": `var(--${string})`;
|
|
26
|
+
"background-700": `var(--${string})`;
|
|
27
|
+
"background-800": `var(--${string})`;
|
|
28
|
+
"background-900": `var(--${string})`;
|
|
29
|
+
"primary-100": `var(--${string})`;
|
|
30
|
+
"primary-200": `var(--${string})`;
|
|
31
|
+
"primary-300": `var(--${string})`;
|
|
32
|
+
"primary-400": `var(--${string})`;
|
|
33
|
+
"primary-500": `var(--${string})`;
|
|
34
|
+
"primary-600": `var(--${string})`;
|
|
35
|
+
"primary-700": `var(--${string})`;
|
|
36
|
+
"primary-800": `var(--${string})`;
|
|
37
|
+
"primary-900": `var(--${string})`;
|
|
38
|
+
"secondary-100": `var(--${string})`;
|
|
39
|
+
"secondary-200": `var(--${string})`;
|
|
40
|
+
"secondary-300": `var(--${string})`;
|
|
41
|
+
"secondary-400": `var(--${string})`;
|
|
42
|
+
"secondary-500": `var(--${string})`;
|
|
43
|
+
"secondary-600": `var(--${string})`;
|
|
44
|
+
"secondary-700": `var(--${string})`;
|
|
45
|
+
"secondary-800": `var(--${string})`;
|
|
46
|
+
"secondary-900": `var(--${string})`;
|
|
47
|
+
"success-100": `var(--${string})`;
|
|
48
|
+
"success-200": `var(--${string})`;
|
|
49
|
+
"success-300": `var(--${string})`;
|
|
50
|
+
"success-400": `var(--${string})`;
|
|
51
|
+
"success-500": `var(--${string})`;
|
|
52
|
+
"success-600": `var(--${string})`;
|
|
53
|
+
"success-700": `var(--${string})`;
|
|
54
|
+
"success-800": `var(--${string})`;
|
|
55
|
+
"success-900": `var(--${string})`;
|
|
56
|
+
"warning-100": `var(--${string})`;
|
|
57
|
+
"warning-200": `var(--${string})`;
|
|
58
|
+
"warning-300": `var(--${string})`;
|
|
59
|
+
"warning-400": `var(--${string})`;
|
|
60
|
+
"warning-500": `var(--${string})`;
|
|
61
|
+
"warning-600": `var(--${string})`;
|
|
62
|
+
"warning-700": `var(--${string})`;
|
|
63
|
+
"warning-800": `var(--${string})`;
|
|
64
|
+
"warning-900": `var(--${string})`;
|
|
65
|
+
"danger-100": `var(--${string})`;
|
|
66
|
+
"danger-200": `var(--${string})`;
|
|
67
|
+
"danger-300": `var(--${string})`;
|
|
68
|
+
"danger-400": `var(--${string})`;
|
|
69
|
+
"danger-500": `var(--${string})`;
|
|
70
|
+
"danger-600": `var(--${string})`;
|
|
71
|
+
"danger-700": `var(--${string})`;
|
|
72
|
+
"danger-800": `var(--${string})`;
|
|
73
|
+
"danger-900": `var(--${string})`;
|
|
74
|
+
"info-100": `var(--${string})`;
|
|
75
|
+
"info-200": `var(--${string})`;
|
|
76
|
+
"info-300": `var(--${string})`;
|
|
77
|
+
"info-400": `var(--${string})`;
|
|
78
|
+
"info-500": `var(--${string})`;
|
|
79
|
+
"info-600": `var(--${string})`;
|
|
80
|
+
"info-700": `var(--${string})`;
|
|
81
|
+
"info-800": `var(--${string})`;
|
|
82
|
+
"info-900": `var(--${string})`;
|
|
83
|
+
"text-100": `var(--${string})`;
|
|
84
|
+
"text-200": `var(--${string})`;
|
|
85
|
+
"text-300": `var(--${string})`;
|
|
86
|
+
"text-400": `var(--${string})`;
|
|
87
|
+
"text-500": `var(--${string})`;
|
|
88
|
+
"text-600": `var(--${string})`;
|
|
89
|
+
"text-700": `var(--${string})`;
|
|
90
|
+
"text-800": `var(--${string})`;
|
|
91
|
+
"text-900": `var(--${string})`;
|
|
32
92
|
};
|
|
33
93
|
borderWidth: {
|
|
34
94
|
medium: `var(--${string})`;
|
|
@@ -36,9 +96,9 @@ export declare const vars: {
|
|
|
36
96
|
large: `var(--${string})`;
|
|
37
97
|
};
|
|
38
98
|
fontFamily: {
|
|
39
|
-
body: `var(--${string})`;
|
|
40
99
|
primary: `var(--${string})`;
|
|
41
100
|
secondary: `var(--${string})`;
|
|
101
|
+
body: `var(--${string})`;
|
|
42
102
|
};
|
|
43
103
|
fontSize: {
|
|
44
104
|
medium: `var(--${string})`;
|
package/dist/css/vars.css.js
CHANGED
|
@@ -3,7 +3,12 @@ import { createThemeContract } from "@vanilla-extract/css";
|
|
|
3
3
|
import { makeVanillaTheme } from "../theme/makeVanillaTheme.js";
|
|
4
4
|
import { tokens } from "./tokens.js";
|
|
5
5
|
setFileScope("src/css/vars.css.ts", "@blockle/blocks-core");
|
|
6
|
-
const vars = createThemeContract(
|
|
6
|
+
const vars = createThemeContract(
|
|
7
|
+
makeVanillaTheme(
|
|
8
|
+
// Allow tokens with null values here to create the theme contract
|
|
9
|
+
tokens
|
|
10
|
+
)
|
|
11
|
+
);
|
|
7
12
|
endFileScope();
|
|
8
13
|
export {
|
|
9
14
|
vars
|
|
@@ -2,7 +2,7 @@ import { ThemeTokens } from '../config/themeTokens.js';
|
|
|
2
2
|
export declare const makeVanillaTheme: (tokens: ThemeTokens) => {
|
|
3
3
|
space: Record<keyof typeof tokens.spacing, string>;
|
|
4
4
|
borderRadius: Record<keyof typeof tokens.border.radius, string>;
|
|
5
|
-
color: Record<
|
|
5
|
+
color: Record<"white" | "black" | "background-100" | "background-200" | "background-300" | "background-400" | "background-500" | "background-600" | "background-700" | "background-800" | "background-900" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "secondary-600" | "secondary-700" | "secondary-800" | "secondary-900" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900" | "info-100" | "info-200" | "info-300" | "info-400" | "info-500" | "info-600" | "info-700" | "info-800" | "info-900" | "text-100" | "text-200" | "text-300" | "text-400" | "text-500" | "text-600" | "text-700" | "text-800" | "text-900", string>;
|
|
6
6
|
borderWidth: Record<keyof typeof tokens.border.width, string>;
|
|
7
7
|
fontFamily: Record<keyof typeof tokens.typography.fontFamily, string>;
|
|
8
8
|
fontSize: Record<keyof typeof tokens.typography.fontSize, string>;
|
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
const makeVanillaTheme = (tokens) => {
|
|
2
|
+
const color = {};
|
|
3
|
+
for (const [colorName, colorValue] of Object.entries(tokens.color)) {
|
|
4
|
+
if (typeof colorValue === "string" || colorValue === null) {
|
|
5
|
+
color[colorName] = colorValue;
|
|
6
|
+
continue;
|
|
7
|
+
}
|
|
8
|
+
for (const [shade, shadeValue] of Object.entries(colorValue)) {
|
|
9
|
+
color[`${colorName}-${shade}`] = shadeValue;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
2
12
|
return {
|
|
3
13
|
space: tokens.spacing,
|
|
4
14
|
borderRadius: tokens.border.radius,
|
|
5
|
-
color
|
|
15
|
+
color,
|
|
6
16
|
borderWidth: tokens.border.width,
|
|
7
17
|
fontFamily: tokens.typography.fontFamily,
|
|
8
18
|
fontSize: tokens.typography.fontSize,
|
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
import { Atoms } from '../../atoms/atoms.js';
|
|
2
2
|
export type AnyString = string & {};
|
|
3
|
+
export type RecordLike = Record<string | number, unknown>;
|
|
3
4
|
/**
|
|
4
5
|
* Suggest a type for a string literal but also allow any string.
|
|
5
6
|
*/
|
|
6
7
|
export type OptionalLiteral<T extends string> = T | AnyString;
|
|
7
|
-
export type RecordLike = Record<string | number, unknown>;
|
|
8
8
|
export declare function isObjectLike<T extends RecordLike>(value: T): value is T;
|
|
9
9
|
export type IsStringUnion<T> = T extends string ? string extends T ? false : true : false;
|
|
10
10
|
export type IsNumberUnion<T> = T extends number ? number extends T ? false : true : false;
|
|
11
11
|
export type IsUnion<T> = IsStringUnion<T> extends true ? true : IsNumberUnion<T> extends true ? true : false;
|
|
12
12
|
export type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;
|
|
13
|
+
/**
|
|
14
|
+
* Convert a nested record type to a union of dot-separated paths.
|
|
15
|
+
*
|
|
16
|
+
* Example:
|
|
17
|
+
* ```ts
|
|
18
|
+
* type Foo = RecordToUnionPath<{
|
|
19
|
+
* a: string;
|
|
20
|
+
* b: { c: { d: string }; d: number };
|
|
21
|
+
* 55: {
|
|
22
|
+
* 100: string[];
|
|
23
|
+
* 200: [string];
|
|
24
|
+
* };
|
|
25
|
+
* }>;
|
|
26
|
+
* // Result: "a" | "b.c.d" | "b.d" | "e.f" | "e.g" | "55.100" | "55.200"
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export type RecordToUnionPath<TObject, TDelimiter extends string = '.'> = TObject extends RecordLike ? {
|
|
30
|
+
[K in keyof TObject]: TObject[K] extends RecordLike ? K extends string | number ? `${K}${TDelimiter}${RecordToUnionPath<TObject[K], TDelimiter>}` : never : K;
|
|
31
|
+
}[keyof TObject] : TObject;
|
|
32
|
+
export type DeepNullable<T> = {
|
|
33
|
+
[P in keyof T]: T[P] extends RecordLike ? DeepNullable<T[P]> : T[P] | null;
|
|
34
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockle/blocks-core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.24.0",
|
|
4
4
|
"description": "Core for Blocks",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -34,6 +34,6 @@
|
|
|
34
34
|
"@vanilla-extract/css": "^1.17.1"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"@vanilla-extract/css": ">=
|
|
37
|
+
"@vanilla-extract/css": ">=1.17.1"
|
|
38
38
|
}
|
|
39
39
|
}
|