@khanacademy/wonder-blocks-icon-button 9.0.1 → 9.0.3

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 (6) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/es/index.js +20 -19
  3. package/dist/index.js +20 -19
  4. package/dist/themes/default.d.ts +11 -11
  5. package/dist/themes/themed-icon-button.d.ts +11 -11
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @khanacademy/wonder-blocks-icon-button
2
2
 
3
+ ## 9.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - 7bbf311: Simplify IconButton pseudo-classes
8
+ - Updated dependencies [2656fd4]
9
+ - Updated dependencies [6018552]
10
+ - Updated dependencies [7bbf311]
11
+ - Updated dependencies [7f79943]
12
+ - Updated dependencies [7bbf311]
13
+ - Updated dependencies [7f79943]
14
+ - @khanacademy/wonder-blocks-tokens@9.0.0
15
+ - @khanacademy/wonder-blocks-theming@3.3.0
16
+ - @khanacademy/wonder-blocks-clickable@7.0.3
17
+ - @khanacademy/wonder-blocks-styles@0.2.5
18
+
19
+ ## 9.0.2
20
+
21
+ ### Patch Changes
22
+
23
+ - e63adea: Update `border.width` tokens to use new naming conventions.
24
+ - 72c47d8: Fix `IconButton.primary` border/outline to always use the global focus outline color (blue)
25
+ - Updated dependencies [e63adea]
26
+ - Updated dependencies [e63adea]
27
+ - Updated dependencies [72c47d8]
28
+ - @khanacademy/wonder-blocks-tokens@8.0.0
29
+ - @khanacademy/wonder-blocks-clickable@7.0.2
30
+ - @khanacademy/wonder-blocks-styles@0.2.4
31
+
3
32
  ## 9.0.1
4
33
 
5
34
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -33,25 +33,25 @@ const theme = {
33
33
  color: semanticColor.action,
34
34
  border: {
35
35
  offset: {
36
- primary: border.width.thin,
37
- secondary: -border.width.thin,
38
- tertiary: -border.width.thin
36
+ primary: border.width.medium,
37
+ secondary: `-${border.width.medium}`,
38
+ tertiary: -border.width.medium
39
39
  },
40
40
  width: {
41
41
  primary: {
42
42
  default: border.width.none,
43
- hover: border.width.thin,
44
- press: border.width.thin
43
+ hover: border.width.medium,
44
+ press: border.width.medium
45
45
  },
46
46
  secondary: {
47
- default: border.width.hairline,
48
- hover: border.width.thin,
49
- press: border.width.thin
47
+ default: border.width.thin,
48
+ hover: border.width.medium,
49
+ press: border.width.medium
50
50
  },
51
51
  tertiary: {
52
52
  default: border.width.none,
53
- hover: border.width.thin,
54
- press: border.width.thin
53
+ hover: border.width.medium,
54
+ press: border.width.medium
55
55
  }
56
56
  },
57
57
  radius: {
@@ -175,6 +175,7 @@ const _generateStyles = (actionType = "progressive", disabled, kind, size, theme
175
175
  const disabledState = theme.color[kind].disabled;
176
176
  const disabledStatesStyles = {
177
177
  borderColor: disabledState.border,
178
+ borderWidth: borderWidthKind.default,
178
179
  background: disabledState.background,
179
180
  color: disabledState.foreground
180
181
  };
@@ -188,26 +189,26 @@ const _generateStyles = (actionType = "progressive", disabled, kind, size, theme
188
189
  borderColor: themeVariant.default.border,
189
190
  background: themeVariant.default.background,
190
191
  color: themeVariant.default.foreground,
191
- ":hover:not([aria-disabled=true])": {
192
+ ":hover": {
192
193
  background: themeVariant.hover.background,
193
194
  color: themeVariant.hover.foreground,
194
- outline: kind === "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.hover.border}` : undefined,
195
+ outline: kind === "primary" ? `${borderWidthKind.hover} solid ${themeVariant.hover.border}` : undefined,
195
196
  outlineOffset: kind === "primary" ? outlineOffsetKind : undefined,
196
- border: kind !== "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.hover.border}` : undefined
197
+ border: kind !== "primary" ? `${borderWidthKind.hover} solid ${themeVariant.hover.border}` : undefined
197
198
  },
198
199
  ["@media not (hover: hover)"]: {
199
200
  ":hover": {
200
201
  backgroundColor: "transparent"
201
202
  }
202
- }
203
- }, focusStyles.focus, {
204
- ":active:not([aria-disabled=true])": {
205
- outlineColor: kind === "primary" ? themeVariant.press.border : "undefined",
206
- border: kind !== "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.press.border}` : undefined,
203
+ },
204
+ ":active": {
205
+ outline: kind === "primary" ? `${borderWidthKind.press} solid ${themeVariant.press.border}` : undefined,
206
+ outlineOffset: kind === "primary" ? outlineOffsetKind : undefined,
207
+ border: kind !== "primary" ? `${borderWidthKind.press} solid ${themeVariant.press.border}` : undefined,
207
208
  background: themeVariant.press.background,
208
209
  color: themeVariant.press.foreground
209
210
  }
210
- }),
211
+ }, focusStyles.focus),
211
212
  disabled: _extends({
212
213
  cursor: "not-allowed"
213
214
  }, disabledStatesStyles, {
package/dist/index.js CHANGED
@@ -59,25 +59,25 @@ const theme = {
59
59
  color: wonderBlocksTokens.semanticColor.action,
60
60
  border: {
61
61
  offset: {
62
- primary: wonderBlocksTokens.border.width.thin,
63
- secondary: -wonderBlocksTokens.border.width.thin,
64
- tertiary: -wonderBlocksTokens.border.width.thin
62
+ primary: wonderBlocksTokens.border.width.medium,
63
+ secondary: `-${wonderBlocksTokens.border.width.medium}`,
64
+ tertiary: -wonderBlocksTokens.border.width.medium
65
65
  },
66
66
  width: {
67
67
  primary: {
68
68
  default: wonderBlocksTokens.border.width.none,
69
- hover: wonderBlocksTokens.border.width.thin,
70
- press: wonderBlocksTokens.border.width.thin
69
+ hover: wonderBlocksTokens.border.width.medium,
70
+ press: wonderBlocksTokens.border.width.medium
71
71
  },
72
72
  secondary: {
73
- default: wonderBlocksTokens.border.width.hairline,
74
- hover: wonderBlocksTokens.border.width.thin,
75
- press: wonderBlocksTokens.border.width.thin
73
+ default: wonderBlocksTokens.border.width.thin,
74
+ hover: wonderBlocksTokens.border.width.medium,
75
+ press: wonderBlocksTokens.border.width.medium
76
76
  },
77
77
  tertiary: {
78
78
  default: wonderBlocksTokens.border.width.none,
79
- hover: wonderBlocksTokens.border.width.thin,
80
- press: wonderBlocksTokens.border.width.thin
79
+ hover: wonderBlocksTokens.border.width.medium,
80
+ press: wonderBlocksTokens.border.width.medium
81
81
  }
82
82
  },
83
83
  radius: {
@@ -201,6 +201,7 @@ const _generateStyles = (actionType = "progressive", disabled, kind, size, theme
201
201
  const disabledState = theme.color[kind].disabled;
202
202
  const disabledStatesStyles = {
203
203
  borderColor: disabledState.border,
204
+ borderWidth: borderWidthKind.default,
204
205
  background: disabledState.background,
205
206
  color: disabledState.foreground
206
207
  };
@@ -214,26 +215,26 @@ const _generateStyles = (actionType = "progressive", disabled, kind, size, theme
214
215
  borderColor: themeVariant.default.border,
215
216
  background: themeVariant.default.background,
216
217
  color: themeVariant.default.foreground,
217
- ":hover:not([aria-disabled=true])": {
218
+ ":hover": {
218
219
  background: themeVariant.hover.background,
219
220
  color: themeVariant.hover.foreground,
220
- outline: kind === "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.hover.border}` : undefined,
221
+ outline: kind === "primary" ? `${borderWidthKind.hover} solid ${themeVariant.hover.border}` : undefined,
221
222
  outlineOffset: kind === "primary" ? outlineOffsetKind : undefined,
222
- border: kind !== "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.hover.border}` : undefined
223
+ border: kind !== "primary" ? `${borderWidthKind.hover} solid ${themeVariant.hover.border}` : undefined
223
224
  },
224
225
  ["@media not (hover: hover)"]: {
225
226
  ":hover": {
226
227
  backgroundColor: "transparent"
227
228
  }
228
- }
229
- }, wonderBlocksStyles.focusStyles.focus, {
230
- ":active:not([aria-disabled=true])": {
231
- outlineColor: kind === "primary" ? themeVariant.press.border : "undefined",
232
- border: kind !== "primary" ? `${borderWidthKind.hover}px solid ${themeVariant.press.border}` : undefined,
229
+ },
230
+ ":active": {
231
+ outline: kind === "primary" ? `${borderWidthKind.press} solid ${themeVariant.press.border}` : undefined,
232
+ outlineOffset: kind === "primary" ? outlineOffsetKind : undefined,
233
+ border: kind !== "primary" ? `${borderWidthKind.press} solid ${themeVariant.press.border}` : undefined,
233
234
  background: themeVariant.press.background,
234
235
  color: themeVariant.press.foreground
235
236
  }
236
- }),
237
+ }, wonderBlocksStyles.focusStyles.focus),
237
238
  disabled: _extends__default["default"]({
238
239
  cursor: "not-allowed"
239
240
  }, disabledStatesStyles, {
package/dist/themes/default.d.ts CHANGED
@@ -177,25 +177,25 @@ declare const theme: {
177
177
  };
178
178
  border: {
179
179
  offset: {
180
- primary: number;
181
- secondary: number;
180
+ primary: string;
181
+ secondary: string;
182
182
  tertiary: number;
183
183
  };
184
184
  width: {
185
185
  primary: {
186
- default: number;
187
- hover: number;
188
- press: number;
186
+ default: string;
187
+ hover: string;
188
+ press: string;
189
189
  };
190
190
  secondary: {
191
- default: number;
192
- hover: number;
193
- press: number;
191
+ default: string;
192
+ hover: string;
193
+ press: string;
194
194
  };
195
195
  tertiary: {
196
- default: number;
197
- hover: number;
198
- press: number;
196
+ default: string;
197
+ hover: string;
198
+ press: string;
199
199
  };
200
200
  };
201
201
  radius: {
package/dist/themes/themed-icon-button.d.ts CHANGED
@@ -187,25 +187,25 @@ export declare const IconButtonThemeContext: React.Context<{
187
187
  };
188
188
  border: {
189
189
  offset: {
190
- primary: number;
191
- secondary: number;
190
+ primary: string;
191
+ secondary: string;
192
192
  tertiary: number;
193
193
  };
194
194
  width: {
195
195
  primary: {
196
- default: number;
197
- hover: number;
198
- press: number;
196
+ default: string;
197
+ hover: string;
198
+ press: string;
199
199
  };
200
200
  secondary: {
201
- default: number;
202
- hover: number;
203
- press: number;
201
+ default: string;
202
+ hover: string;
203
+ press: string;
204
204
  };
205
205
  tertiary: {
206
- default: number;
207
- hover: number;
208
- press: number;
206
+ default: string;
207
+ hover: string;
208
+ press: string;
209
209
  };
210
210
  };
211
211
  radius: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-icon-button",
3
- "version": "9.0.1",
3
+ "version": "9.0.3",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -13,12 +13,12 @@
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
15
  "@babel/runtime": "^7.24.5",
16
- "@khanacademy/wonder-blocks-clickable": "7.0.1",
16
+ "@khanacademy/wonder-blocks-clickable": "7.0.3",
17
17
  "@khanacademy/wonder-blocks-core": "12.2.1",
18
18
  "@khanacademy/wonder-blocks-icon": "5.1.3",
19
- "@khanacademy/wonder-blocks-styles": "0.2.3",
20
- "@khanacademy/wonder-blocks-theming": "3.2.1",
21
- "@khanacademy/wonder-blocks-tokens": "7.0.0"
19
+ "@khanacademy/wonder-blocks-styles": "0.2.5",
20
+ "@khanacademy/wonder-blocks-theming": "3.3.0",
21
+ "@khanacademy/wonder-blocks-tokens": "9.0.0"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "aphrodite": "^1.2.5",