@blockle/blocks-theme-momotaro 3.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 (16) hide show
  1. package/dist/components/button.css.js +13 -13
  2. package/dist/components/checkbox.css.js +5 -5
  3. package/dist/components/dialog.css.js +4 -4
  4. package/dist/components/divider.css.js +1 -1
  5. package/dist/components/input.css.js +3 -3
  6. package/dist/components/label.css.js +1 -1
  7. package/dist/components/link.css.js +2 -2
  8. package/dist/components/popover.css.js +2 -2
  9. package/dist/components/progress.css.js +4 -4
  10. package/dist/components/radio.css.js +5 -5
  11. package/dist/components/select.css.js +5 -5
  12. package/dist/components/slider.css.js +11 -11
  13. package/dist/components/switch.css.js +2 -2
  14. package/dist/components/tooltip.css.js +1 -1
  15. package/dist/tokens.css.js +104 -25
  16. package/package.json +3 -3
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
@@ -79,15 +79,15 @@ const button = makeComponentTheme(
79
79
  intent: {
80
80
  neutral: style({
81
81
  vars: {
82
- [intentColor]: vars.color.primary,
83
- [hoverBackgroundColor]: vars.color.primaryLight
82
+ [intentColor]: vars.color["primary-500"],
83
+ [hoverBackgroundColor]: vars.color["primary-100"]
84
84
  }
85
85
  }),
86
86
  danger: style({
87
87
  vars: {
88
- [intentColor]: vars.color.danger,
89
- [hoverBackgroundColor]: "#fff8f7",
90
- [focusRingColor]: vars.color.danger
88
+ [intentColor]: vars.color["danger-700"],
89
+ [hoverBackgroundColor]: vars.color["danger-200"],
90
+ [focusRingColor]: vars.color["danger-300"]
91
91
  }
92
92
  })
93
93
  }
@@ -100,7 +100,7 @@ const button = makeComponentTheme(
100
100
  },
101
101
  style: style({
102
102
  vars: {
103
- [hoverBackgroundColor]: vars.color.primaryDark
103
+ [hoverBackgroundColor]: vars.color["primary-700"]
104
104
  }
105
105
  })
106
106
  },
@@ -111,7 +111,7 @@ const button = makeComponentTheme(
111
111
  },
112
112
  style: style({
113
113
  vars: {
114
- [hoverBackgroundColor]: "#f9b1a9"
114
+ [hoverBackgroundColor]: vars.color["danger-200"]
115
115
  }
116
116
  })
117
117
  }
package/dist/components/checkbox.css.js CHANGED
@@ -21,15 +21,15 @@ const checkbox = makeComponentTheme(
21
21
  },
22
22
  selectors: {
23
23
  "&:hover:not(:has(input:disabled))": {
24
- backgroundColor: vars.color.primaryDark
24
+ backgroundColor: vars.color["primary-700"]
25
25
  },
26
26
  "&:has(input:checked)": {
27
- backgroundColor: vars.color.primary
27
+ backgroundColor: vars.color["primary-500"]
28
28
  }
29
29
  }
30
30
  },
31
31
  atoms({
32
- backgroundColor: "primaryLight",
32
+ backgroundColor: "primary-100",
33
33
  borderRadius: "small"
34
34
  }),
35
35
  focusable
@@ -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/divider.css.js CHANGED
@@ -9,7 +9,7 @@ const divider = makeComponentTheme(
9
9
  blockSize: 1
10
10
  }),
11
11
  defaultVariants: {
12
- color: "textLight"
12
+ color: "text-500"
13
13
  }
14
14
  }
15
15
  );
package/dist/components/input.css.js CHANGED
@@ -7,8 +7,8 @@ const input = makeComponentTheme(
7
7
  {
8
8
  input: style([
9
9
  atoms({
10
- color: "text",
11
- padding: "large",
10
+ color: "text-900",
11
+ padding: 3,
12
12
  border: "none",
13
13
  borderRadius: "small"
14
14
  }),
@@ -16,7 +16,7 @@ const input = makeComponentTheme(
16
16
  outline: "none",
17
17
  background: "transparent",
18
18
  "::placeholder": {
19
- color: vars.color.textLight
19
+ color: vars.color["text-300"]
20
20
  },
21
21
  ":disabled": {}
22
22
  }
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/link.css.js CHANGED
@@ -34,11 +34,11 @@ const link = makeComponentTheme("link", {
34
34
  fontWeight: "inherit"
35
35
  }),
36
36
  primary: atoms({
37
- color: "primary",
37
+ color: "primary-500",
38
38
  fontWeight: "medium"
39
39
  }),
40
40
  secondary: atoms({
41
- color: "secondary",
41
+ color: "secondary-500",
42
42
  fontWeight: "medium"
43
43
  })
44
44
  },
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/progress.css.js CHANGED
@@ -20,8 +20,8 @@ const progress = makeComponentTheme(
20
20
  atoms({
21
21
  inlineSize: "full",
22
22
  borderRadius: "small",
23
- backgroundColor: "textLight",
24
- color: "primary",
23
+ backgroundColor: "text-200",
24
+ color: "primary-500",
25
25
  overflow: "hidden"
26
26
  })
27
27
  ]),
@@ -42,8 +42,8 @@ const progress = makeComponentTheme(
42
42
  45deg,
43
43
  transparent,
44
44
  transparent 20px,
45
- ${vars.color.primaryDark} 20px,
46
- ${vars.color.primaryDark} 40px
45
+ ${vars.color["primary-700"]} 20px,
46
+ ${vars.color["primary-700"]} 40px
47
47
  )`
48
48
  },
49
49
  "(prefers-reduced-motion: no-preference)": {
package/dist/components/radio.css.js CHANGED
@@ -21,16 +21,16 @@ const radio = makeComponentTheme(
21
21
  }
22
22
  },
23
23
  ":hover": {
24
- backgroundColor: vars.color.primaryDark
24
+ backgroundColor: vars.color["primary-700"]
25
25
  },
26
26
  selectors: {
27
27
  "&:has(input:checked):not(:hover)": {
28
- backgroundColor: vars.color.primary
28
+ backgroundColor: vars.color["primary-500"]
29
29
  }
30
30
  }
31
31
  },
32
32
  atoms({
33
- backgroundColor: "primaryLight"
33
+ backgroundColor: "primary-100"
34
34
  }),
35
35
  focusable
36
36
  ]),
@@ -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
@@ -8,8 +8,8 @@ const select = makeComponentTheme(
8
8
  {
9
9
  select: style([
10
10
  atoms({
11
- color: "text",
12
- padding: "large",
11
+ color: "text-700",
12
+ padding: 3,
13
13
  backgroundColor: "white",
14
14
  borderRadius: "medium",
15
15
  boxShadow: "medium"
@@ -32,8 +32,8 @@ const select = makeComponentTheme(
32
32
  variant: {
33
33
  outline: style([
34
34
  atoms({
35
- borderWidth: "small",
36
- borderColor: "primary"
35
+ borderWidth: "thin",
36
+ borderColor: "primary-500"
37
37
  }),
38
38
  {
39
39
  borderStyle: "solid"
@@ -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/slider.css.js CHANGED
@@ -31,9 +31,9 @@ const slider = makeComponentTheme(
31
31
  borderRadius: "50%",
32
32
  height: "16px",
33
33
  width: "16px",
34
- boxShadow: `0 0 0 0px color-mix(in srgb, ${vars.color.primaryLight}, transparent 0%)`,
34
+ boxShadow: `0 0 0 0px color-mix(in srgb, ${vars.color["primary-100"]}, transparent 0%)`,
35
35
  vars: {
36
- [thumbActive]: `0 0 0 8px color-mix(in srgb, ${vars.color.primaryLight}, transparent 20%)`
36
+ [thumbActive]: `0 0 0 8px color-mix(in srgb, ${vars.color["primary-100"]}, transparent 20%)`
37
37
  },
38
38
  ":hover": {
39
39
  boxShadow: thumbActive
@@ -64,25 +64,25 @@ const slider = makeComponentTheme(
64
64
  colorScheme: {
65
65
  primary: style({
66
66
  vars: {
67
- [trackBackground]: vars.color.primaryLight,
68
- [filledTrackBackground]: vars.color.primary,
69
- [thumbBackground]: vars.color.primary
67
+ [trackBackground]: vars.color["primary-100"],
68
+ [filledTrackBackground]: vars.color["primary-500"],
69
+ [thumbBackground]: vars.color["primary-500"]
70
70
  }
71
71
  }),
72
72
  secondary: style({
73
73
  vars: {
74
- [trackBackground]: vars.color.primaryLight,
75
- [filledTrackBackground]: vars.color.secondary,
76
- [thumbBackground]: vars.color.secondary
74
+ [trackBackground]: vars.color["primary-100"],
75
+ [filledTrackBackground]: vars.color["secondary-500"],
76
+ [thumbBackground]: vars.color["secondary-500"]
77
77
  }
78
78
  })
79
79
  },
80
80
  disabled: style({
81
81
  pointerEvents: "none",
82
82
  vars: {
83
- [trackBackground]: "#c0c0c0",
84
- [filledTrackBackground]: "#ccc",
85
- [thumbBackground]: "#c0c0c0"
83
+ [trackBackground]: vars.color["background-200"],
84
+ [filledTrackBackground]: vars.color["background-400"],
85
+ [thumbBackground]: vars.color["background-400"]
86
86
  }
87
87
  })
88
88
  },
package/dist/components/switch.css.js CHANGED
@@ -10,7 +10,7 @@ const switchTheme = makeComponentTheme(
10
10
  base: style([
11
11
  atoms({
12
12
  borderRadius: "xlarge",
13
- backgroundColor: "textLight"
13
+ backgroundColor: "text-200"
14
14
  }),
15
15
  {
16
16
  width: 52,
@@ -22,7 +22,7 @@ const switchTheme = makeComponentTheme(
22
22
  },
23
23
  selectors: {
24
24
  '&[data-checked="true"]': {
25
- backgroundColor: vars.color.secondary
25
+ backgroundColor: vars.color["secondary-500"]
26
26
  }
27
27
  },
28
28
  // Scale the switch when it's `:active`
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,26 +10,101 @@ 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: {
19
18
  white: "#fff",
20
19
  black: "#000",
21
- body: "#F4F6FA",
22
- primaryLight: "#E4DFFF",
23
- primary: "#7265E3",
24
- primaryDark: "#4D3CAB",
25
- secondaryLight: "#7CF5CD",
26
- secondary: "#7FE3F0",
27
- secondaryDark: "#68C6EF",
28
- text: "#2D3142",
29
- textLight: "#9C9EB9",
30
- textDark: "#4C5980",
31
- danger: "#FF9B90",
32
- link: "#7265E3"
20
+ primary: {
21
+ "100": "#E4DFFF",
22
+ "200": "#C6B7FF",
23
+ "300": "#A488FF",
24
+ "400": "#8660FF",
25
+ "500": "#7265E3",
26
+ "600": "#5E4DBA",
27
+ "700": "#4D3CAB",
28
+ "800": "#3B2A82",
29
+ "900": "#2A1B5A"
30
+ },
31
+ secondary: {
32
+ "100": "#DFFAF9",
33
+ "200": "#B3F1EE",
34
+ "300": "#7CF5CD",
35
+ "400": "#4CE8BA",
36
+ "500": "#7FE3F0",
37
+ "600": "#68C6EF",
38
+ "700": "#4DB8E8",
39
+ "800": "#3399CC",
40
+ "900": "#1A7FB3"
41
+ },
42
+ danger: {
43
+ "100": "#FFE3E1",
44
+ "200": "#FFBDB8",
45
+ "300": "#FF9B90",
46
+ "400": "#FF7A70",
47
+ "500": "#FF5A52",
48
+ "600": "#E03E39",
49
+ "700": "#B32422",
50
+ "800": "#80120F",
51
+ "900": "#4D0A08"
52
+ },
53
+ info: {
54
+ "100": "#E1F0FF",
55
+ "200": "#B8DBFF",
56
+ "300": "#90C4FF",
57
+ "400": "#6CAEFF",
58
+ "500": "#4D98FF",
59
+ "600": "#337FEC",
60
+ "700": "#1A66CC",
61
+ "800": "#0D4D99",
62
+ "900": "#053366"
63
+ },
64
+ success: {
65
+ "100": "#E6F9F0",
66
+ "200": "#B3F0D6",
67
+ "300": "#7CE3BA",
68
+ "400": "#4CE8A3",
69
+ "500": "#1AD88C",
70
+ "600": "#00B36A",
71
+ "700": "#009354",
72
+ "800": "#00773D",
73
+ "900": "#005C29"
74
+ },
75
+ warning: {
76
+ "100": "#FFF4E5",
77
+ "200": "#FFE0B3",
78
+ "300": "#FFCC80",
79
+ "400": "#FFB84D",
80
+ "500": "#FFA31A",
81
+ "600": "#E08000",
82
+ "700": "#B26600",
83
+ "800": "#804D00",
84
+ "900": "#4D3300"
85
+ },
86
+ background: {
87
+ 100: "#FFFFFF",
88
+ 200: "#F5F5F5",
89
+ 300: "#E0E0E0",
90
+ 400: "#AEAEAE",
91
+ 500: "#7A7A7A",
92
+ 600: "#4C4C4C",
93
+ 700: "#2E2E2E",
94
+ 800: "#1A1A1A",
95
+ 900: "#0D0D0D"
96
+ },
97
+ text: {
98
+ 100: "#FFFFFF",
99
+ 200: "#F5F5F5",
100
+ 300: "#E0E0E0",
101
+ 400: "#AEAEAE",
102
+ 500: "#7A7A7A",
103
+ 600: "#4C4C4C",
104
+ 700: "#2E2E2E",
105
+ 800: "#1A1A1A",
106
+ 900: "#0D0D0D"
107
+ }
33
108
  },
34
109
  shadow: {
35
110
  small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
@@ -37,16 +112,18 @@ const tokens = {
37
112
  large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
38
113
  },
39
114
  focus: {
40
- boxShadow: "0 0 1px 2px #AF8EFF"
115
+ boxShadow: "0 0 1px 2px #7FE3F0"
41
116
  },
42
117
  spacing: {
43
- none: "0px",
44
- gutter: "28px",
45
- xsmall: "4px",
46
- small: "8px",
47
- medium: "12px",
48
- large: "16px",
49
- 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"
50
127
  },
51
128
  transition: {
52
129
  slow: "240ms",
@@ -67,9 +144,11 @@ const tokens = {
67
144
  xlarge: rem(24)
68
145
  },
69
146
  fontWeight: {
70
- regular: 400,
147
+ light: 300,
148
+ normal: 400,
71
149
  medium: 500,
72
- strong: 700
150
+ strong: 700,
151
+ bold: 800
73
152
  },
74
153
  lineHeight: {
75
154
  xsmall: rem(16),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks-theme-momotaro",
3
- "version": "3.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.23.0",
38
- "@vanilla-extract/css": ">= 1.17.1"
37
+ "@blockle/blocks-core": "^0.25.0",
38
+ "@vanilla-extract/css": ">=1.17.1"
39
39
  }
40
40
  }