@blockle/blocks-theme-momotaro 6.2.0 → 6.2.2

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 (24) hide show
  1. package/dist/components/alert.css.js +1 -1
  2. package/dist/components/button.css.d.ts.map +1 -1
  3. package/dist/components/button.css.js +21 -11
  4. package/dist/components/checkbox.css.js +1 -1
  5. package/dist/components/dialog.css.js +1 -1
  6. package/dist/components/divider.css.js +1 -1
  7. package/dist/components/helpers.css.js +1 -2
  8. package/dist/components/icon.css.d.ts.map +1 -1
  9. package/dist/components/icon.css.js +11 -5
  10. package/dist/components/label.css.js +1 -1
  11. package/dist/components/link.css.js +1 -1
  12. package/dist/components/popover.css.js +2 -2
  13. package/dist/components/progress.css.js +1 -1
  14. package/dist/components/radio.css.js +1 -1
  15. package/dist/components/select.css.js +1 -1
  16. package/dist/components/slider.css.js +1 -1
  17. package/dist/components/spinner.css.js +1 -1
  18. package/dist/components/switch.css.js +2 -2
  19. package/dist/components/textInput.css.js +2 -2
  20. package/dist/components/textarea.css.js +2 -2
  21. package/dist/components/tooltip.css.js +1 -1
  22. package/dist/tokens.css.d.ts.map +1 -1
  23. package/dist/tokens.css.js +18 -16
  24. package/package.json +4 -4
package/dist/components/alert.css.js CHANGED
@@ -4,7 +4,7 @@ setFileScope("src/components/alert.css.ts", "@blockle/blocks-theme-momotaro");
4
4
  const alert = makeComponentTheme(
5
5
  "alert",
6
6
  {
7
- base: atoms({
7
+ root: atoms({
8
8
  borderWidth: "thin",
9
9
  borderStyle: "solid",
10
10
  padding: 2,
package/dist/components/button.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.css.d.ts","sourceRoot":"","sources":["../../src/components/button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAS9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAsHlD,CAAC"}
1
+ {"version":3,"file":"button.css.d.ts","sourceRoot":"","sources":["../../src/components/button.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAE3B,MAAM,sBAAsB,CAAC;AAS9B,eAAO,MAAM,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAgIlD,CAAC"}
package/dist/components/button.css.js CHANGED
@@ -1,21 +1,20 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
2
  import { makeComponentTheme, vars, atoms } from "@blockle/blocks-core";
3
3
  import { style, createVar } from "@vanilla-extract/css";
4
- import { focusRingColor, clickable } from "./helpers.css.js";
4
+ import { clickable } from "./helpers.css.js";
5
5
  setFileScope("src/components/button.css.ts", "@blockle/blocks-theme-momotaro");
6
6
  const intentColor = createVar();
7
7
  const hoverBackgroundColor = createVar();
8
8
  const button = makeComponentTheme(
9
9
  "button",
10
10
  {
11
- base: style([
11
+ root: style([
12
12
  atoms({
13
13
  display: "inline-flex",
14
14
  placeItems: "center",
15
15
  fontSize: "medium",
16
16
  borderRadius: 2,
17
17
  fontWeight: "medium",
18
- // Space between `startSlot | children | endSlot`
19
18
  gap: 2,
20
19
  paddingBlock: 1
21
20
  }),
@@ -57,7 +56,7 @@ const button = makeComponentTheme(
57
56
  paddingInline: 3
58
57
  }),
59
58
  {
60
- minHeight: 32
59
+ minHeight: 40
61
60
  }
62
61
  ]),
63
62
  medium: style([
@@ -70,7 +69,7 @@ const button = makeComponentTheme(
70
69
  ]),
71
70
  large: style([
72
71
  atoms({
73
- paddingInline: 4
72
+ paddingInline: 5
74
73
  }),
75
74
  {
76
75
  minHeight: 56
@@ -78,17 +77,28 @@ const button = makeComponentTheme(
78
77
  ])
79
78
  },
80
79
  intent: {
81
- neutral: style({
80
+ primary: style({
82
81
  vars: {
83
- [intentColor]: vars.color["primary-500"],
82
+ [intentColor]: vars.color["primary-600"],
84
83
  [hoverBackgroundColor]: vars.color["primary-100"]
85
84
  }
86
85
  }),
86
+ secondary: style({
87
+ vars: {
88
+ [intentColor]: vars.color["secondary-600"],
89
+ [hoverBackgroundColor]: vars.color["secondary-100"]
90
+ }
91
+ }),
92
+ success: style({
93
+ vars: {
94
+ [intentColor]: vars.color["success-600"],
95
+ [hoverBackgroundColor]: vars.color["success-100"]
96
+ }
97
+ }),
87
98
  danger: style({
88
99
  vars: {
89
100
  [intentColor]: vars.color["danger-700"],
90
- [hoverBackgroundColor]: vars.color["danger-200"],
91
- [focusRingColor]: vars.color["danger-300"]
101
+ [hoverBackgroundColor]: vars.color["danger-200"]
92
102
  }
93
103
  })
94
104
  }
@@ -97,7 +107,7 @@ const button = makeComponentTheme(
97
107
  {
98
108
  variants: {
99
109
  variant: "solid",
100
- intent: "neutral"
110
+ intent: "primary"
101
111
  },
102
112
  style: style({
103
113
  vars: {
@@ -120,7 +130,7 @@ const button = makeComponentTheme(
120
130
  defaultVariants: {
121
131
  size: "medium",
122
132
  variant: "solid",
123
- intent: "neutral"
133
+ intent: "primary"
124
134
  }
125
135
  }
126
136
  );
package/dist/components/checkbox.css.js CHANGED
@@ -7,7 +7,7 @@ setFileScope("src/components/checkbox.css.ts", "@blockle/blocks-theme-momotaro")
7
7
  const checkbox = makeComponentTheme(
8
8
  "checkbox",
9
9
  {
10
- base: style([
10
+ root: style([
11
11
  {
12
12
  display: "flex",
13
13
  alignItems: "center",
package/dist/components/dialog.css.js CHANGED
@@ -13,7 +13,7 @@ const dialog = makeComponentTheme(
13
13
  border: "none",
14
14
  overflow: "auto",
15
15
  borderRadius: 2,
16
- boxShadow: "large"
16
+ boxShadow: 3
17
17
  }),
18
18
  {
19
19
  maxHeight: "90%",
package/dist/components/divider.css.js CHANGED
@@ -5,7 +5,7 @@ setFileScope("src/components/divider.css.ts", "@blockle/blocks-theme-momotaro");
5
5
  const divider = makeComponentTheme(
6
6
  "divider",
7
7
  {
8
- base: style({
8
+ root: style({
9
9
  blockSize: 1
10
10
  }),
11
11
  defaultVariants: {
package/dist/components/helpers.css.js CHANGED
@@ -2,7 +2,7 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
2
  import { vars } from "@blockle/blocks-core";
3
3
  import { style, createVar } from "@vanilla-extract/css";
4
4
  setFileScope("src/components/helpers.css.ts", "@blockle/blocks-theme-momotaro");
5
- const focusRingColor = createVar();
5
+ createVar();
6
6
  const focusable = style({
7
7
  // '@media': {
8
8
  // '(prefers-reduced-motion: no-preference)': {
@@ -40,6 +40,5 @@ const clickable = style([
40
40
  endFileScope();
41
41
  export {
42
42
  clickable,
43
- focusRingColor,
44
43
  focusable
45
44
  };
package/dist/components/icon.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon.css.d.ts","sourceRoot":"","sources":["../../src/components/icon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAkB7C,CAAC"}
1
+ {"version":3,"file":"icon.css.d.ts","sourceRoot":"","sources":["../../src/components/icon.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAwB7C,CAAC"}
package/dist/components/icon.css.js CHANGED
@@ -1,19 +1,25 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { makeComponentTheme } from "@blockle/blocks-core";
2
+ import { makeComponentTheme, pixelsToRem } from "@blockle/blocks-core";
3
3
  import { style } from "@vanilla-extract/css";
4
4
  setFileScope("src/components/icon.css.ts", "@blockle/blocks-theme-momotaro");
5
5
  const icon = makeComponentTheme("icon", {
6
- base: "",
6
+ root: "",
7
7
  variants: {
8
8
  size: {
9
+ xsmall: style({
10
+ minWidth: pixelsToRem(12)
11
+ }),
9
12
  small: style({
10
- minWidth: "1rem"
13
+ minWidth: pixelsToRem(16)
11
14
  }),
12
15
  medium: style({
13
- minWidth: "2rem"
16
+ minWidth: pixelsToRem(32)
14
17
  }),
15
18
  large: style({
16
- minWidth: "3rem"
19
+ minWidth: pixelsToRem(48)
20
+ }),
21
+ xlarge: style({
22
+ minWidth: pixelsToRem(64)
17
23
  })
18
24
  }
19
25
  },
package/dist/components/label.css.js CHANGED
@@ -5,7 +5,7 @@ setFileScope("src/components/label.css.ts", "@blockle/blocks-theme-momotaro");
5
5
  const label = makeComponentTheme(
6
6
  "label",
7
7
  {
8
- base: style({}),
8
+ root: style({}),
9
9
  variants: {
10
10
  size: {
11
11
  small: style({
package/dist/components/link.css.js CHANGED
@@ -4,7 +4,7 @@ import { style } from "@vanilla-extract/css";
4
4
  import { focusable } from "./helpers.css.js";
5
5
  setFileScope("src/components/link.css.ts", "@blockle/blocks-theme-momotaro");
6
6
  const link = makeComponentTheme("link", {
7
- base: style([
7
+ root: style([
8
8
  {
9
9
  outline: "none",
10
10
  border: "none",
package/dist/components/popover.css.js CHANGED
@@ -5,11 +5,11 @@ setFileScope("src/components/popover.css.ts", "@blockle/blocks-theme-momotaro");
5
5
  const popover = makeComponentTheme(
6
6
  "popover",
7
7
  {
8
- base: style([
8
+ root: style([
9
9
  atoms({
10
10
  backgroundColor: "white",
11
11
  borderRadius: 1,
12
- boxShadow: "medium",
12
+ boxShadow: 2,
13
13
  padding: 2,
14
14
  margin: 1
15
15
  // Space between the popover and the anchor element
package/dist/components/progress.css.js CHANGED
@@ -13,7 +13,7 @@ const indeterminateAnimation = keyframes({
13
13
  const progress = makeComponentTheme(
14
14
  "progress",
15
15
  {
16
- base: style([
16
+ root: style([
17
17
  {
18
18
  height: 8
19
19
  },
package/dist/components/radio.css.js CHANGED
@@ -7,7 +7,7 @@ setFileScope("src/components/radio.css.ts", "@blockle/blocks-theme-momotaro");
7
7
  const radio = makeComponentTheme(
8
8
  "radio",
9
9
  {
10
- base: style([
10
+ root: style([
11
11
  {
12
12
  display: "flex",
13
13
  alignItems: "center",
package/dist/components/select.css.js CHANGED
@@ -13,7 +13,7 @@ const select = makeComponentTheme(
13
13
  paddingBlock: 1,
14
14
  backgroundColor: "white",
15
15
  borderRadius: 2,
16
- boxShadow: "medium"
16
+ boxShadow: 2
17
17
  }),
18
18
  {
19
19
  border: "none",
package/dist/components/slider.css.js CHANGED
@@ -10,7 +10,7 @@ const thumbActive = createVar();
10
10
  const slider = makeComponentTheme(
11
11
  "slider",
12
12
  {
13
- base: style({
13
+ root: style({
14
14
  blockSize: "20px"
15
15
  }),
16
16
  track: style([
package/dist/components/spinner.css.js CHANGED
@@ -13,7 +13,7 @@ const spinAnimation = keyframes({
13
13
  const spinner = makeComponentTheme(
14
14
  "spinner",
15
15
  {
16
- base: style({
16
+ root: style({
17
17
  aspectRatio: "1 / 1",
18
18
  overflow: "hidden",
19
19
  borderRadius: "50%",
package/dist/components/switch.css.js CHANGED
@@ -7,7 +7,7 @@ const activeScaleFactor = createVar();
7
7
  const switchTheme = makeComponentTheme(
8
8
  "switch",
9
9
  {
10
- base: style([
10
+ root: style([
11
11
  atoms({
12
12
  borderRadius: 4,
13
13
  backgroundColor: "text-200"
@@ -37,7 +37,7 @@ const switchTheme = makeComponentTheme(
37
37
  },
38
38
  focusable
39
39
  ]),
40
- slider: style([
40
+ thumb: style([
41
41
  atoms({
42
42
  borderRadius: "full"
43
43
  }),
package/dist/components/textInput.css.js CHANGED
@@ -6,7 +6,7 @@ setFileScope("src/components/textInput.css.ts", "@blockle/blocks-theme-momotaro"
6
6
  const textInput = makeComponentTheme(
7
7
  "textInput",
8
8
  {
9
- container: style([
9
+ root: style([
10
10
  {
11
11
  minHeight: 40,
12
12
  backgroundColor: "white",
@@ -22,7 +22,7 @@ const textInput = makeComponentTheme(
22
22
  paddingBlock: 2,
23
23
  backgroundColor: "white",
24
24
  borderRadius: 2,
25
- boxShadow: "medium",
25
+ boxShadow: 2,
26
26
  // Space between `startSlot | children | endSlot`
27
27
  gap: 2
28
28
  }),
package/dist/components/textarea.css.js CHANGED
@@ -22,7 +22,7 @@ const textarea = makeComponentTheme(
22
22
  ":disabled": {}
23
23
  }
24
24
  ]),
25
- container: style([
25
+ root: style([
26
26
  {
27
27
  overflow: "auto",
28
28
  minHeight: 96,
@@ -38,7 +38,7 @@ const textarea = makeComponentTheme(
38
38
  paddingBlock: 2,
39
39
  backgroundColor: "white",
40
40
  borderRadius: 2,
41
- boxShadow: "medium"
41
+ boxShadow: 2
42
42
  }),
43
43
  focusable
44
44
  ])
package/dist/components/tooltip.css.js CHANGED
@@ -5,7 +5,7 @@ setFileScope("src/components/tooltip.css.ts", "@blockle/blocks-theme-momotaro");
5
5
  const tooltip = makeComponentTheme(
6
6
  "tooltip",
7
7
  {
8
- base: atoms({
8
+ root: atoms({
9
9
  padding: 1
10
10
  }),
11
11
  variants: {
package/dist/tokens.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.css.d.ts","sourceRoot":"","sources":["../src/tokens.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE7D,eAAO,MAAM,MAAM,EAAE,WA4JpB,CAAC"}
1
+ {"version":3,"file":"tokens.css.d.ts","sourceRoot":"","sources":["../src/tokens.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAErE,eAAO,MAAM,MAAM,EAAE,WA8JpB,CAAC"}
package/dist/tokens.css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
- import { rem } from "@blockle/blocks-core";
2
+ import { pixelsToRem } from "@blockle/blocks-core";
3
3
  setFileScope("src/tokens.css.ts", "@blockle/blocks-theme-momotaro");
4
4
  const tokens = {
5
5
  border: {
@@ -107,9 +107,11 @@ const tokens = {
107
107
  }
108
108
  },
109
109
  shadow: {
110
- small: "0px 4px 8px rgba(0, 0, 0, 0.08)",
111
- medium: "0px 8px 16px rgba(0, 0, 0, 0.08)",
112
- large: "0px 16px 24px rgba(0, 0, 0, 0.08)"
110
+ 1: "0px 4px 8px rgba(0, 0, 0, 0.08)",
111
+ 2: "0px 8px 16px rgba(0, 0, 0, 0.08)",
112
+ 3: "0px 16px 24px rgba(0, 0, 0, 0.08)",
113
+ 4: "0px 24px 32px rgba(0, 0, 0, 0.08)",
114
+ 5: "0px 32px 40px rgba(0, 0, 0, 0.08)"
113
115
  },
114
116
  focus: {
115
117
  boxShadow: "0 0 1px 2px #7FE3F0"
@@ -132,15 +134,15 @@ const tokens = {
132
134
  typography: {
133
135
  fontFamily: {
134
136
  body: '"Rubik", sans-serif',
135
- primary: '"Rubik", sans-serif',
136
- secondary: '"Rubik", sans-serif'
137
+ heading: '"Rubik", sans-serif',
138
+ mono: '"Rubik", monospace'
137
139
  },
138
140
  fontSize: {
139
- xsmall: rem(12),
140
- small: rem(14),
141
- medium: rem(16),
142
- large: rem(20),
143
- xlarge: rem(24)
141
+ xsmall: pixelsToRem(12),
142
+ small: pixelsToRem(14),
143
+ medium: pixelsToRem(16),
144
+ large: pixelsToRem(20),
145
+ xlarge: pixelsToRem(24)
144
146
  },
145
147
  fontWeight: {
146
148
  light: 300,
@@ -150,11 +152,11 @@ const tokens = {
150
152
  bold: 800
151
153
  },
152
154
  lineHeight: {
153
- xsmall: rem(16),
154
- small: rem(20),
155
- medium: rem(24),
156
- large: rem(28),
157
- xlarge: rem(32)
155
+ xsmall: pixelsToRem(16),
156
+ small: pixelsToRem(20),
157
+ medium: pixelsToRem(24),
158
+ large: pixelsToRem(28),
159
+ xlarge: pixelsToRem(32)
158
160
  }
159
161
  }
160
162
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks-theme-momotaro",
3
- "version": "6.2.0",
3
+ "version": "6.2.2",
4
4
  "description": "Momotaro theme for Blocks",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -31,10 +31,10 @@
31
31
  },
32
32
  "homepage": "https://github.com/Blockle/blocks#readme",
33
33
  "dependencies": {
34
- "@vanilla-extract/css": "^1.17.4"
34
+ "@vanilla-extract/css": "^1.17.5"
35
35
  },
36
36
  "peerDependencies": {
37
- "@blockle/blocks-core": ">=1.1.0",
38
- "@vanilla-extract/css": "^1.17.4"
37
+ "@blockle/blocks-core": ">=1.2.x",
38
+ "@vanilla-extract/css": "^1.17.5"
39
39
  }
40
40
  }