@blockle/blocks-core 0.23.0 → 0.25.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.
Files changed (21) hide show
  1. package/dist/atoms/atoms.css.d.ts +1658 -418
  2. package/dist/atoms/atoms.css.js +5 -1
  3. package/dist/atoms/atoms.js +2 -2
  4. package/dist/config/themeTokens.d.ts +18 -6
  5. package/dist/css/tokens.d.ts +2 -1
  6. package/dist/css/tokens.js +61 -51
  7. package/dist/css/vars.css.d.ts +90 -27
  8. package/dist/css/vars.css.js +6 -1
  9. package/dist/index.d.ts +9 -9
  10. package/dist/index.js +4 -4
  11. package/dist/theme/makeComponentTheme.d.ts +1 -1
  12. package/dist/theme/makeComponentTheme.js +1 -1
  13. package/dist/theme/makeVanillaTheme.d.ts +1 -1
  14. package/dist/theme/makeVanillaTheme.js +11 -1
  15. package/dist/utils/typing/helpers.d.ts +23 -1
  16. package/package.json +2 -2
  17. package/dist/atoms/atoms.spec.d.ts +0 -1
  18. package/dist/css/breakpoint/breakpoint.test.d.ts +0 -1
  19. package/dist/css/cssMatrixUtils.test.d.ts +0 -1
  20. package/dist/utils/classnames/classnames.test.d.ts +0 -1
  21. package/dist/utils/math/math.test.d.ts +0 -1
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 = { ...vars.color, currentColor: "currentColor" };
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({
package/dist/atoms/atoms.js CHANGED
@@ -20,10 +20,10 @@ function atoms(properties) {
20
20
  }
21
21
  return;
22
22
  }
23
- if (!(atomicValue == null ? void 0 : atomicValue.conditions[i])) {
23
+ if (!atomicValue?.conditions[i]) {
24
24
  return;
25
25
  }
26
- classList.push(atomicValue == null ? void 0 : atomicValue.conditions[i]);
26
+ classList.push(atomicValue?.conditions[i]);
27
27
  });
28
28
  }
29
29
  }
package/dist/config/themeTokens.d.ts CHANGED
@@ -1,12 +1,24 @@
1
- type FontWeight = 'regular' | 'medium' | 'strong';
2
- type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
1
+ type FontWeight = 'light' | 'normal' | 'medium' | 'strong' | 'bold';
2
+ type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
3
3
  type Transition = 'slow' | 'normal' | 'fast';
4
4
  type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
5
- type BorderWidth = 'small' | 'medium' | 'large';
5
+ type BorderWidth = 'thin' | 'thick';
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 Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
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: {
@@ -15,7 +27,7 @@ export type ThemeTokens = {
15
27
  secondary?: string;
16
28
  };
17
29
  fontSize: Record<FontSize, number | string>;
18
- fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
30
+ fontWeight: Record<FontWeight, 300 | 400 | 500 | 600 | 700 | 800>;
19
31
  lineHeight: Record<LineHeight, number | string>;
20
32
  };
21
33
  spacing: Record<Space, number | string>;
@@ -28,6 +40,6 @@ export type ThemeTokens = {
28
40
  focus: {
29
41
  boxShadow: string;
30
42
  };
31
- color: Record<Color, string>;
43
+ color: Color;
32
44
  };
33
45
  export {};
package/dist/css/tokens.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { ThemeTokens } from '../config/themeTokens.js';
2
- export declare const tokens: ThemeTokens;
2
+ import { DeepNullable } from '../utils/typing/helpers.js';
3
+ export declare const tokens: DeepNullable<ThemeTokens>;
package/dist/css/tokens.js CHANGED
@@ -1,80 +1,90 @@
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: "Roboto, sans-serif",
5
- primary: "Roboto, sans-serif",
6
- secondary: "Roboto, sans-serif"
15
+ body: null,
16
+ primary: null,
17
+ secondary: null
7
18
  },
8
19
  fontSize: {
9
- xsmall: "0.75rem",
10
- small: "0.875rem",
11
- medium: "1rem",
12
- large: "1.125rem",
13
- xlarge: "1.25rem"
20
+ xsmall: null,
21
+ small: null,
22
+ medium: null,
23
+ large: null,
24
+ xlarge: null
14
25
  },
15
26
  fontWeight: {
16
- regular: 400,
17
- medium: 500,
18
- strong: 700
27
+ light: null,
28
+ normal: null,
29
+ medium: null,
30
+ strong: null,
31
+ bold: null
19
32
  },
20
33
  lineHeight: {
21
- xsmall: "1rem",
22
- small: "1.25rem",
23
- medium: "1.5rem",
24
- large: "1.75rem",
25
- xlarge: "2rem"
34
+ xsmall: null,
35
+ small: null,
36
+ medium: null,
37
+ large: null,
38
+ xlarge: null
26
39
  }
27
40
  },
28
41
  spacing: {
29
- none: 0,
30
- gutter: "1rem",
31
- xsmall: "0.25rem",
32
- small: "0.5rem",
33
- medium: "1rem",
34
- large: "1.5rem",
35
- xlarge: "2rem"
42
+ 0: null,
43
+ 1: null,
44
+ 2: null,
45
+ 3: null,
46
+ 4: null,
47
+ 5: null,
48
+ 6: null,
49
+ 7: null,
50
+ 8: null
36
51
  },
37
52
  transition: {
38
- slow: "500ms",
39
- normal: "300ms",
40
- fast: "100ms"
53
+ slow: null,
54
+ normal: null,
55
+ fast: null
41
56
  },
42
57
  border: {
43
58
  radius: {
44
- small: "0.25rem",
45
- medium: "0.5rem",
46
- large: "1rem",
47
- xlarge: "2rem"
59
+ small: null,
60
+ medium: null,
61
+ large: null,
62
+ xlarge: null
48
63
  },
49
64
  width: {
50
- small: "1px",
51
- medium: "2px",
52
- large: "4px"
65
+ thin: null,
66
+ thick: null
53
67
  }
54
68
  },
55
69
  shadow: {
56
- small: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
57
- medium: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
58
- large: "0 4px 8px 0 rgba(0, 0, 0, 0.05)"
70
+ small: null,
71
+ medium: null,
72
+ large: null
59
73
  },
60
74
  focus: {
61
- boxShadow: "0 0 0 2px #AF8EFF"
75
+ boxShadow: null
62
76
  },
63
77
  color: {
64
- black: "#000000",
65
- white: "#ffffff",
66
- body: "#ffffff",
67
- primaryLight: "#f5f5f5",
68
- primary: "#e0e0e0",
69
- primaryDark: "#aeaeae",
70
- secondaryLight: "#f5f5f5",
71
- secondary: "#e0e0e0",
72
- secondaryDark: "#aeaeae",
73
- text: "#000000",
74
- textLight: "#ffffff",
75
- textDark: "#aeaeae",
76
- danger: "#ff0000",
77
- link: "#0000ff"
78
+ black: null,
79
+ white: null,
80
+ primary: colorPalette,
81
+ secondary: colorPalette,
82
+ success: colorPalette,
83
+ warning: colorPalette,
84
+ danger: colorPalette,
85
+ info: colorPalette,
86
+ background: colorPalette,
87
+ text: colorPalette
78
88
  }
79
89
  };
80
90
  export {
package/dist/css/vars.css.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  export declare const vars: {
2
2
  space: {
3
- medium: `var(--${string})`;
4
- none: `var(--${string})`;
5
- gutter: `var(--${string})`;
6
- xsmall: `var(--${string})`;
7
- small: `var(--${string})`;
8
- large: `var(--${string})`;
9
- xlarge: `var(--${string})`;
3
+ 0: `var(--${string})`;
4
+ 4: `var(--${string})`;
5
+ 1: `var(--${string})`;
6
+ 2: `var(--${string})`;
7
+ 3: `var(--${string})`;
8
+ 5: `var(--${string})`;
9
+ 6: `var(--${string})`;
10
+ 7: `var(--${string})`;
11
+ 8: `var(--${string})`;
10
12
  };
11
13
  borderRadius: {
12
14
  medium: `var(--${string})`;
@@ -17,51 +19,112 @@ export declare const vars: {
17
19
  color: {
18
20
  white: `var(--${string})`;
19
21
  black: `var(--${string})`;
20
- body: `var(--${string})`;
21
- primaryLight: `var(--${string})`;
22
- primary: `var(--${string})`;
23
- primaryDark: `var(--${string})`;
24
- secondaryLight: `var(--${string})`;
25
- secondary: `var(--${string})`;
26
- secondaryDark: `var(--${string})`;
27
- text: `var(--${string})`;
28
- textLight: `var(--${string})`;
29
- textDark: `var(--${string})`;
30
- danger: `var(--${string})`;
31
- link: `var(--${string})`;
22
+ "background-100": `var(--${string})`;
23
+ "background-200": `var(--${string})`;
24
+ "background-300": `var(--${string})`;
25
+ "background-400": `var(--${string})`;
26
+ "background-500": `var(--${string})`;
27
+ "background-600": `var(--${string})`;
28
+ "background-700": `var(--${string})`;
29
+ "background-800": `var(--${string})`;
30
+ "background-900": `var(--${string})`;
31
+ "primary-100": `var(--${string})`;
32
+ "primary-200": `var(--${string})`;
33
+ "primary-300": `var(--${string})`;
34
+ "primary-400": `var(--${string})`;
35
+ "primary-500": `var(--${string})`;
36
+ "primary-600": `var(--${string})`;
37
+ "primary-700": `var(--${string})`;
38
+ "primary-800": `var(--${string})`;
39
+ "primary-900": `var(--${string})`;
40
+ "secondary-100": `var(--${string})`;
41
+ "secondary-200": `var(--${string})`;
42
+ "secondary-300": `var(--${string})`;
43
+ "secondary-400": `var(--${string})`;
44
+ "secondary-500": `var(--${string})`;
45
+ "secondary-600": `var(--${string})`;
46
+ "secondary-700": `var(--${string})`;
47
+ "secondary-800": `var(--${string})`;
48
+ "secondary-900": `var(--${string})`;
49
+ "success-100": `var(--${string})`;
50
+ "success-200": `var(--${string})`;
51
+ "success-300": `var(--${string})`;
52
+ "success-400": `var(--${string})`;
53
+ "success-500": `var(--${string})`;
54
+ "success-600": `var(--${string})`;
55
+ "success-700": `var(--${string})`;
56
+ "success-800": `var(--${string})`;
57
+ "success-900": `var(--${string})`;
58
+ "warning-100": `var(--${string})`;
59
+ "warning-200": `var(--${string})`;
60
+ "warning-300": `var(--${string})`;
61
+ "warning-400": `var(--${string})`;
62
+ "warning-500": `var(--${string})`;
63
+ "warning-600": `var(--${string})`;
64
+ "warning-700": `var(--${string})`;
65
+ "warning-800": `var(--${string})`;
66
+ "warning-900": `var(--${string})`;
67
+ "danger-100": `var(--${string})`;
68
+ "danger-200": `var(--${string})`;
69
+ "danger-300": `var(--${string})`;
70
+ "danger-400": `var(--${string})`;
71
+ "danger-500": `var(--${string})`;
72
+ "danger-600": `var(--${string})`;
73
+ "danger-700": `var(--${string})`;
74
+ "danger-800": `var(--${string})`;
75
+ "danger-900": `var(--${string})`;
76
+ "info-100": `var(--${string})`;
77
+ "info-200": `var(--${string})`;
78
+ "info-300": `var(--${string})`;
79
+ "info-400": `var(--${string})`;
80
+ "info-500": `var(--${string})`;
81
+ "info-600": `var(--${string})`;
82
+ "info-700": `var(--${string})`;
83
+ "info-800": `var(--${string})`;
84
+ "info-900": `var(--${string})`;
85
+ "text-100": `var(--${string})`;
86
+ "text-200": `var(--${string})`;
87
+ "text-300": `var(--${string})`;
88
+ "text-400": `var(--${string})`;
89
+ "text-500": `var(--${string})`;
90
+ "text-600": `var(--${string})`;
91
+ "text-700": `var(--${string})`;
92
+ "text-800": `var(--${string})`;
93
+ "text-900": `var(--${string})`;
32
94
  };
33
95
  borderWidth: {
34
- medium: `var(--${string})`;
35
- small: `var(--${string})`;
36
- large: `var(--${string})`;
96
+ thin: `var(--${string})`;
97
+ thick: `var(--${string})`;
37
98
  };
38
99
  fontFamily: {
39
- body: `var(--${string})`;
40
100
  primary: `var(--${string})`;
41
101
  secondary: `var(--${string})`;
102
+ body: `var(--${string})`;
42
103
  };
43
104
  fontSize: {
44
105
  medium: `var(--${string})`;
45
- xsmall: `var(--${string})`;
46
106
  small: `var(--${string})`;
47
107
  large: `var(--${string})`;
48
108
  xlarge: `var(--${string})`;
109
+ xsmall: `var(--${string})`;
49
110
  };
50
111
  fontWeight: {
51
- regular: `var(--${string})`;
112
+ light: `var(--${string})`;
113
+ normal: `var(--${string})`;
52
114
  medium: `var(--${string})`;
53
115
  strong: `var(--${string})`;
116
+ bold: `var(--${string})`;
54
117
  };
55
118
  lineHeight: {
56
119
  medium: `var(--${string})`;
57
- xsmall: `var(--${string})`;
58
120
  small: `var(--${string})`;
59
121
  large: `var(--${string})`;
60
122
  xlarge: `var(--${string})`;
123
+ xsmall: `var(--${string})`;
61
124
  };
62
125
  transition: {
63
- slow: `var(--${string})`;
64
126
  normal: `var(--${string})`;
127
+ slow: `var(--${string})`;
65
128
  fast: `var(--${string})`;
66
129
  };
67
130
  shadow: {
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(makeVanillaTheme(tokens));
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
package/dist/index.d.ts CHANGED
@@ -1,22 +1,22 @@
1
+ export { atomicProperties } from './atoms/atoms.css.js';
2
+ export { type Atoms, atoms } from './atoms/atoms.js';
3
+ export type { MarginAtoms, PaddingAtoms, TextAtoms, } from './atoms/atomTypes.js';
4
+ export { getAtomsAndProps } from './atoms/getAtomsAndProps.js';
1
5
  export type { ComponentThemes, ComponentThemesProps, } from './config/componentThemes.js';
2
6
  export type { ThemeTokens } from './config/themeTokens.js';
3
7
  export { breakpointNames, minMediaQuery } from './css/breakpoint/breakpoint.js';
8
+ export { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform, } from './css/cssMatrixUtils.js';
4
9
  export { blocksLayer, blocksLayerAtom, blocksLayerComponent, } from './css/layers.css.js';
5
10
  export { rem } from './css/rem.js';
6
11
  export { vars } from './css/vars.css.js';
7
- export { makeComponentTheme } from './theme/makeComponentTheme.js';
8
12
  export type { ComponentTheme, ThemeComponentsStyles, } from './theme/makeComponentTheme.js';
9
- export { makeTheme } from './theme/makeTheme.js';
13
+ export { makeComponentTheme } from './theme/makeComponentTheme.js';
10
14
  export type { Theme } from './theme/makeTheme.js';
15
+ export { makeTheme } from './theme/makeTheme.js';
11
16
  export { classnames } from './utils/classnames/classnames.js';
12
17
  export { hasAnimationDuration } from './utils/dom/hasAnimationDuration.js';
13
- export { alignItemsMap, justifyContentMap, type AlignItemsMap, type JustifyContentMap, } from './utils/flexbox/flexbox.js';
18
+ export { type AlignItemsMap, alignItemsMap, type JustifyContentMap, justifyContentMap, } from './utils/flexbox/flexbox.js';
14
19
  export { clampAndRoundValue } from './utils/math/math.js';
15
20
  export { mergeProps } from './utils/react/mergeProps.js';
16
21
  export { composeRefs } from './utils/react/refs.js';
17
- export { isObjectLike, type AnyString, type HTMLElementProps, type IsNumberUnion, type IsStringUnion, type IsUnion, type OptionalLiteral, type RecordLike, } from './utils/typing/helpers.js';
18
- export { atomicProperties } from './atoms/atoms.css.js';
19
- export { atoms, type Atoms } from './atoms/atoms.js';
20
- export type { MarginAtoms, PaddingAtoms, TextAtoms, } from './atoms/atomTypes.js';
21
- export { getAtomsAndProps } from './atoms/getAtomsAndProps.js';
22
- export { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform, } from './css/cssMatrixUtils.js';
22
+ export { type AnyString, type HTMLElementProps, type IsNumberUnion, type IsStringUnion, type IsUnion, isObjectLike, type OptionalLiteral, type RecordLike, } from './utils/typing/helpers.js';
package/dist/index.js CHANGED
@@ -1,4 +1,8 @@
1
+ import { atomicProperties } from "./atoms/atoms.css.js";
2
+ import { atoms } from "./atoms/atoms.js";
3
+ import { getAtomsAndProps } from "./atoms/getAtomsAndProps.js";
1
4
  import { breakpointNames, minMediaQuery } from "./css/breakpoint/breakpoint.js";
5
+ import { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform } from "./css/cssMatrixUtils.js";
2
6
  import { blocksLayer, blocksLayerAtom, blocksLayerComponent } from "./css/layers.css.js";
3
7
  import { rem } from "./css/rem.js";
4
8
  import { vars } from "./css/vars.css.js";
@@ -11,10 +15,6 @@ import { clampAndRoundValue } from "./utils/math/math.js";
11
15
  import { mergeProps } from "./utils/react/mergeProps.js";
12
16
  import { composeRefs } from "./utils/react/refs.js";
13
17
  import { isObjectLike } from "./utils/typing/helpers.js";
14
- import { atomicProperties } from "./atoms/atoms.css.js";
15
- import { atoms } from "./atoms/atoms.js";
16
- import { getAtomsAndProps } from "./atoms/getAtomsAndProps.js";
17
- import { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform } from "./css/cssMatrixUtils.js";
18
18
  export {
19
19
  alignItemsMap,
20
20
  atomicProperties,
package/dist/theme/makeComponentTheme.d.ts CHANGED
@@ -25,5 +25,5 @@ export type ComponentTheme<T extends RecordLike> = ComponentThemeToStyles<T> & {
25
25
  export type ThemeComponentsStyles = {
26
26
  [K in keyof ComponentThemes]?: ComponentTheme<ComponentThemes[K]>;
27
27
  };
28
- export declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(component: T, componentTheme: Exclude<ThemeComponentsStyles[T], undefined>): Exclude<ThemeComponentsStyles[T], undefined>;
28
+ export declare function makeComponentTheme<T extends keyof ThemeComponentsStyles>(_component: T, componentTheme: Exclude<ThemeComponentsStyles[T], undefined>): Exclude<ThemeComponentsStyles[T], undefined>;
29
29
  export {};
package/dist/theme/makeComponentTheme.js CHANGED
@@ -1,4 +1,4 @@
1
- function makeComponentTheme(component, componentTheme) {
1
+ function makeComponentTheme(_component, componentTheme) {
2
2
  return componentTheme;
3
3
  }
4
4
  export {
package/dist/theme/makeVanillaTheme.d.ts CHANGED
@@ -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<keyof typeof tokens.color, string>;
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>;
package/dist/theme/makeVanillaTheme.js CHANGED
@@ -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: tokens.color,
15
+ color,
6
16
  borderWidth: tokens.border.width,
7
17
  fontFamily: tokens.typography.fontFamily,
8
18
  fontSize: tokens.typography.fontSize,
package/dist/utils/typing/helpers.d.ts CHANGED
@@ -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.23.0",
3
+ "version": "0.25.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": ">= 1.17.1"
37
+ "@vanilla-extract/css": ">=1.17.1"
38
38
  }
39
39
  }
package/dist/atoms/atoms.spec.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/css/breakpoint/breakpoint.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/css/cssMatrixUtils.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/utils/classnames/classnames.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/dist/utils/math/math.test.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};