@blockle/blocks-theme-momotaro 6.2.1 → 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 +18 -7
  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 +7 -5
  24. package/package.json +1 -1
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,CAqHlD,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,14 +1,14 @@
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",
@@ -77,17 +77,28 @@ const button = makeComponentTheme(
77
77
  ])
78
78
  },
79
79
  intent: {
80
- neutral: style({
80
+ primary: style({
81
81
  vars: {
82
82
  [intentColor]: vars.color["primary-600"],
83
83
  [hoverBackgroundColor]: vars.color["primary-100"]
84
84
  }
85
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
+ }),
86
98
  danger: style({
87
99
  vars: {
88
100
  [intentColor]: vars.color["danger-700"],
89
- [hoverBackgroundColor]: vars.color["danger-200"],
90
- [focusRingColor]: vars.color["danger-300"]
101
+ [hoverBackgroundColor]: vars.color["danger-200"]
91
102
  }
92
103
  })
93
104
  }
@@ -96,7 +107,7 @@ const button = makeComponentTheme(
96
107
  {
97
108
  variants: {
98
109
  variant: "solid",
99
- intent: "neutral"
110
+ intent: "primary"
100
111
  },
101
112
  style: style({
102
113
  vars: {
@@ -119,7 +130,7 @@ const button = makeComponentTheme(
119
130
  defaultVariants: {
120
131
  size: "medium",
121
132
  variant: "solid",
122
- intent: "neutral"
133
+ intent: "primary"
123
134
  }
124
135
  }
125
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,EAAe,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAErE,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
@@ -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,8 +134,8 @@ 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
141
  xsmall: pixelsToRem(12),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks-theme-momotaro",
3
- "version": "6.2.1",
3
+ "version": "6.2.2",
4
4
  "description": "Momotaro theme for Blocks",
5
5
  "type": "module",
6
6
  "sideEffects": false,