@blockle/blocks-theme-momotaro 4.0.0 → 5.0.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 (11) hide show
  1. package/dist/components/button.css.js +6 -6
  2. package/dist/components/checkbox.css.js +2 -2
  3. package/dist/components/dialog.css.js +4 -4
  4. package/dist/components/input.css.js +1 -1
  5. package/dist/components/label.css.js +1 -1
  6. package/dist/components/popover.css.js +2 -2
  7. package/dist/components/radio.css.js +2 -2
  8. package/dist/components/select.css.js +3 -3
  9. package/dist/components/tooltip.css.js +1 -1
  10. package/dist/tokens.css.js +16 -13
  11. package/package.json +2 -2
package/dist/components/button.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { style, createVar } from "@vanilla-extract/css";
3
2
  import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
3
+ import { style, createVar } from "@vanilla-extract/css";
4
4
  import { focusRingColor, clickable } from "./helpers.css.js";
5
5
  setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
6
6
  const intentColor = createVar();
@@ -16,7 +16,7 @@ const button = makeComponentTheme(
16
16
  borderRadius: "medium",
17
17
  fontWeight: "medium",
18
18
  // Space between `startSlot | children | endSlot`
19
- gap: "small"
19
+ gap: 2
20
20
  }),
21
21
  {
22
22
  selectors: {
@@ -36,7 +36,7 @@ const button = makeComponentTheme(
36
36
  }),
37
37
  outline: style([
38
38
  atoms({
39
- borderWidth: "small"
39
+ borderWidth: "thin"
40
40
  }),
41
41
  {
42
42
  color: intentColor,
@@ -53,7 +53,7 @@ const button = makeComponentTheme(
53
53
  size: {
54
54
  small: style([
55
55
  atoms({
56
- paddingInline: "large"
56
+ paddingInline: 3
57
57
  }),
58
58
  {
59
59
  height: 40
@@ -61,7 +61,7 @@ const button = makeComponentTheme(
61
61
  ]),
62
62
  medium: style([
63
63
  atoms({
64
- paddingInline: "xlarge"
64
+ paddingInline: 4
65
65
  }),
66
66
  {
67
67
  height: 56
@@ -69,7 +69,7 @@ const button = makeComponentTheme(
69
69
  ]),
70
70
  large: style([
71
71
  atoms({
72
- paddingInline: "xlarge"
72
+ paddingInline: 4
73
73
  }),
74
74
  {
75
75
  height: 72
package/dist/components/checkbox.css.js CHANGED
@@ -53,8 +53,8 @@ const checkbox = makeComponentTheme(
53
53
  label: atoms({
54
54
  display: "flex",
55
55
  flexDirection: "row",
56
- padding: "xsmall",
57
- gap: "medium",
56
+ padding: 1,
57
+ gap: 2,
58
58
  cursor: "pointer"
59
59
  })
60
60
  }
package/dist/components/dialog.css.js CHANGED
@@ -9,7 +9,7 @@ const dialog = makeComponentTheme(
9
9
  atoms({
10
10
  display: "flex",
11
11
  flexDirection: "column",
12
- padding: "gutter",
12
+ padding: 5,
13
13
  border: "none",
14
14
  overflow: "auto",
15
15
  borderRadius: "medium",
@@ -25,9 +25,9 @@ const dialog = makeComponentTheme(
25
25
  "&[open]": {
26
26
  transform: "translate(0, 0)",
27
27
  opacity: 1,
28
- // @ts-expect-error - Vanilla Extract does not support @starting-style (yet)
28
+ // @ts-expect-error - typings does not support @starting-style (yet)
29
29
  "@starting-style": {
30
- transform: "translate(0, -120px)",
30
+ transform: "translate(0, -120px) scale(0.95)",
31
31
  opacity: 0
32
32
  }
33
33
  },
@@ -42,7 +42,7 @@ const dialog = makeComponentTheme(
42
42
  "@media": {
43
43
  "(prefers-reduced-motion: no-preference)": {
44
44
  // Ending style
45
- transform: "translate(0, -120px)",
45
+ transform: "translate(0, -120px) scale(0.95)",
46
46
  opacity: 0,
47
47
  transitionBehavior: "allow-discrete",
48
48
  transitionProperty: "opacity, transform, overlay, display",
package/dist/components/input.css.js CHANGED
@@ -8,7 +8,7 @@ const input = makeComponentTheme(
8
8
  input: style([
9
9
  atoms({
10
10
  color: "text-900",
11
- padding: "large",
11
+ padding: 3,
12
12
  border: "none",
13
13
  borderRadius: "small"
14
14
  }),
package/dist/components/label.css.js CHANGED
@@ -21,7 +21,7 @@ const label = makeComponentTheme(
21
21
  required: style({
22
22
  ":after": {
23
23
  content: '"*"',
24
- marginLeft: vars.space.xsmall
24
+ marginLeft: vars.space[1]
25
25
  }
26
26
  })
27
27
  },
package/dist/components/popover.css.js CHANGED
@@ -10,8 +10,8 @@ const popover = makeComponentTheme(
10
10
  backgroundColor: "white",
11
11
  borderRadius: "small",
12
12
  boxShadow: "medium",
13
- padding: "medium",
14
- margin: "small"
13
+ padding: 2,
14
+ margin: 1
15
15
  // Space between the popover and the anchor element
16
16
  }),
17
17
  {
package/dist/components/radio.css.js CHANGED
@@ -54,8 +54,8 @@ const radio = makeComponentTheme(
54
54
  label: atoms({
55
55
  display: "flex",
56
56
  flexDirection: "row",
57
- padding: "xsmall",
58
- gap: "medium",
57
+ padding: 1,
58
+ gap: 2,
59
59
  cursor: "pointer"
60
60
  })
61
61
  }
package/dist/components/select.css.js CHANGED
@@ -9,7 +9,7 @@ const select = makeComponentTheme(
9
9
  select: style([
10
10
  atoms({
11
11
  color: "text-700",
12
- padding: "large",
12
+ padding: 3,
13
13
  backgroundColor: "white",
14
14
  borderRadius: "medium",
15
15
  boxShadow: "medium"
@@ -32,7 +32,7 @@ const select = makeComponentTheme(
32
32
  variant: {
33
33
  outline: style([
34
34
  atoms({
35
- borderWidth: "small",
35
+ borderWidth: "thin",
36
36
  borderColor: "primary-500"
37
37
  }),
38
38
  {
@@ -43,7 +43,7 @@ const select = makeComponentTheme(
43
43
  }
44
44
  },
45
45
  icon: atoms({
46
- paddingInline: "large"
46
+ paddingInline: 3
47
47
  }),
48
48
  defaultVariants: {
49
49
  variant: "solid"
package/dist/components/tooltip.css.js CHANGED
@@ -6,7 +6,7 @@ const tooltip = makeComponentTheme(
6
6
  "tooltip",
7
7
  {
8
8
  base: atoms({
9
- padding: "small"
9
+ padding: 1
10
10
  }),
11
11
  variants: {
12
12
  colorScheme: {
package/dist/tokens.css.js CHANGED
@@ -10,9 +10,8 @@ const tokens = {
10
10
  xlarge: "32px"
11
11
  },
12
12
  width: {
13
- small: "1px",
14
- medium: "2px",
15
- large: "4px"
13
+ thin: "1px",
14
+ thick: "2px"
16
15
  }
17
16
  },
18
17
  color: {
@@ -113,16 +112,18 @@ const tokens = {
113
112
  large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
114
113
  },
115
114
  focus: {
116
- boxShadow: "0 0 1px 2px #AF8EFF"
115
+ boxShadow: "0 0 1px 2px #7FE3F0"
117
116
  },
118
117
  spacing: {
119
- none: "0px",
120
- gutter: "28px",
121
- xsmall: "4px",
122
- small: "8px",
123
- medium: "12px",
124
- large: "16px",
125
- xlarge: "24px"
118
+ 0: "0px",
119
+ 1: "4px",
120
+ 2: "8px",
121
+ 3: "16px",
122
+ 4: "24px",
123
+ 5: "32px",
124
+ 6: "40px",
125
+ 7: "48px",
126
+ 8: "64px"
126
127
  },
127
128
  transition: {
128
129
  slow: "240ms",
@@ -143,9 +144,11 @@ const tokens = {
143
144
  xlarge: rem(24)
144
145
  },
145
146
  fontWeight: {
146
- regular: 400,
147
+ light: 300,
148
+ normal: 400,
147
149
  medium: 500,
148
- strong: 700
150
+ strong: 700,
151
+ bold: 800
149
152
  },
150
153
  lineHeight: {
151
154
  xsmall: rem(16),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks-theme-momotaro",
3
- "version": "4.0.0",
3
+ "version": "5.0.0",
4
4
  "description": "Momotaro theme for Blocks",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -34,7 +34,7 @@
34
34
  "@vanilla-extract/css": "^1.17.1"
35
35
  },
36
36
  "peerDependencies": {
37
- "@blockle/blocks-core": "^0.24.0",
37
+ "@blockle/blocks-core": "^0.25.0",
38
38
  "@vanilla-extract/css": ">=1.17.1"
39
39
  }
40
40
  }