@blockle/blocks-theme-momotaro 2.0.0 → 4.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 (12) hide show
  1. package/dist/components/button.css.js +7 -7
  2. package/dist/components/checkbox.css.js +3 -3
  3. package/dist/components/divider.css.js +1 -1
  4. package/dist/components/input.css.js +2 -2
  5. package/dist/components/link.css.js +2 -2
  6. package/dist/components/progress.css.js +4 -4
  7. package/dist/components/radio.css.js +3 -3
  8. package/dist/components/select.css.js +2 -2
  9. package/dist/components/slider.css.js +11 -11
  10. package/dist/components/switch.css.js +2 -2
  11. package/dist/tokens.css.js +88 -12
  12. package/package.json +3 -3
package/dist/components/button.css.js CHANGED
@@ -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
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,7 +7,7 @@ const input = makeComponentTheme(
7
7
  {
8
8
  input: style([
9
9
  atoms({
10
- color: "text",
10
+ color: "text-900",
11
11
  padding: "large",
12
12
  border: "none",
13
13
  borderRadius: "small"
@@ -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/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/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
  ]),
package/dist/components/select.css.js CHANGED
@@ -8,7 +8,7 @@ const select = makeComponentTheme(
8
8
  {
9
9
  select: style([
10
10
  atoms({
11
- color: "text",
11
+ color: "text-700",
12
12
  padding: "large",
13
13
  backgroundColor: "white",
14
14
  borderRadius: "medium",
@@ -33,7 +33,7 @@ const select = makeComponentTheme(
33
33
  outline: style([
34
34
  atoms({
35
35
  borderWidth: "small",
36
- borderColor: "primary"
36
+ borderColor: "primary-500"
37
37
  }),
38
38
  {
39
39
  borderStyle: "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/tokens.css.js CHANGED
@@ -18,18 +18,94 @@ const tokens = {
18
18
  color: {
19
19
  white: "#fff",
20
20
  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"
21
+ primary: {
22
+ "100": "#E4DFFF",
23
+ "200": "#C6B7FF",
24
+ "300": "#A488FF",
25
+ "400": "#8660FF",
26
+ "500": "#7265E3",
27
+ "600": "#5E4DBA",
28
+ "700": "#4D3CAB",
29
+ "800": "#3B2A82",
30
+ "900": "#2A1B5A"
31
+ },
32
+ secondary: {
33
+ "100": "#DFFAF9",
34
+ "200": "#B3F1EE",
35
+ "300": "#7CF5CD",
36
+ "400": "#4CE8BA",
37
+ "500": "#7FE3F0",
38
+ "600": "#68C6EF",
39
+ "700": "#4DB8E8",
40
+ "800": "#3399CC",
41
+ "900": "#1A7FB3"
42
+ },
43
+ danger: {
44
+ "100": "#FFE3E1",
45
+ "200": "#FFBDB8",
46
+ "300": "#FF9B90",
47
+ "400": "#FF7A70",
48
+ "500": "#FF5A52",
49
+ "600": "#E03E39",
50
+ "700": "#B32422",
51
+ "800": "#80120F",
52
+ "900": "#4D0A08"
53
+ },
54
+ info: {
55
+ "100": "#E1F0FF",
56
+ "200": "#B8DBFF",
57
+ "300": "#90C4FF",
58
+ "400": "#6CAEFF",
59
+ "500": "#4D98FF",
60
+ "600": "#337FEC",
61
+ "700": "#1A66CC",
62
+ "800": "#0D4D99",
63
+ "900": "#053366"
64
+ },
65
+ success: {
66
+ "100": "#E6F9F0",
67
+ "200": "#B3F0D6",
68
+ "300": "#7CE3BA",
69
+ "400": "#4CE8A3",
70
+ "500": "#1AD88C",
71
+ "600": "#00B36A",
72
+ "700": "#009354",
73
+ "800": "#00773D",
74
+ "900": "#005C29"
75
+ },
76
+ warning: {
77
+ "100": "#FFF4E5",
78
+ "200": "#FFE0B3",
79
+ "300": "#FFCC80",
80
+ "400": "#FFB84D",
81
+ "500": "#FFA31A",
82
+ "600": "#E08000",
83
+ "700": "#B26600",
84
+ "800": "#804D00",
85
+ "900": "#4D3300"
86
+ },
87
+ background: {
88
+ 100: "#FFFFFF",
89
+ 200: "#F5F5F5",
90
+ 300: "#E0E0E0",
91
+ 400: "#AEAEAE",
92
+ 500: "#7A7A7A",
93
+ 600: "#4C4C4C",
94
+ 700: "#2E2E2E",
95
+ 800: "#1A1A1A",
96
+ 900: "#0D0D0D"
97
+ },
98
+ text: {
99
+ 100: "#FFFFFF",
100
+ 200: "#F5F5F5",
101
+ 300: "#E0E0E0",
102
+ 400: "#AEAEAE",
103
+ 500: "#7A7A7A",
104
+ 600: "#4C4C4C",
105
+ 700: "#2E2E2E",
106
+ 800: "#1A1A1A",
107
+ 900: "#0D0D0D"
108
+ }
33
109
  },
34
110
  shadow: {
35
111
  small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks-theme-momotaro",
3
- "version": "2.0.0",
3
+ "version": "4.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.22.0",
38
- "@vanilla-extract/css": ">= 1.17.1"
37
+ "@blockle/blocks-core": "^0.24.0",
38
+ "@vanilla-extract/css": ">=1.17.1"
39
39
  }
40
40
  }