@khanacademy/wonder-blocks-banner 4.0.7 → 4.0.9

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 (4) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/es/index.js +8 -8
  3. package/dist/index.js +7 -7
  4. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @khanacademy/wonder-blocks-banner
2
2
 
3
+ ## 4.0.9
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [0199324d]
8
+ - @khanacademy/wonder-blocks-core@12.0.0
9
+ - @khanacademy/wonder-blocks-button@7.0.8
10
+ - @khanacademy/wonder-blocks-icon-button@6.0.9
11
+ - @khanacademy/wonder-blocks-link@7.0.8
12
+ - @khanacademy/wonder-blocks-icon@5.0.6
13
+ - @khanacademy/wonder-blocks-typography@3.0.6
14
+
15
+ ## 4.0.8
16
+
17
+ ### Patch Changes
18
+
19
+ - 7057fa7c: Replace `color` with `semanticColor` tokens
20
+ - Updated dependencies [c1f420ad]
21
+ - @khanacademy/wonder-blocks-icon-button@6.0.8
22
+
3
23
  ## 4.0.7
4
24
 
5
25
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -6,7 +6,7 @@ import { View } from '@khanacademy/wonder-blocks-core';
6
6
  import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
7
7
  import IconButton from '@khanacademy/wonder-blocks-icon-button';
8
8
  import Link from '@khanacademy/wonder-blocks-link';
9
- import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
9
+ import { spacing, semanticColor, font } from '@khanacademy/wonder-blocks-tokens';
10
10
  import { LabelSmall } from '@khanacademy/wonder-blocks-typography';
11
11
  import infoIcon from '@phosphor-icons/core/regular/info.svg';
12
12
  import successIcon from '@phosphor-icons/core/regular/smiley.svg';
@@ -17,26 +17,26 @@ const getValuesForKind = kind => {
17
17
  switch (kind) {
18
18
  case "success":
19
19
  return {
20
- color: color.green,
20
+ color: semanticColor.status.success.foreground,
21
21
  icon: successIcon,
22
22
  role: "status"
23
23
  };
24
24
  case "warning":
25
25
  return {
26
- color: color.gold,
26
+ color: semanticColor.status.warning.foreground,
27
27
  icon: warningIcon,
28
28
  role: "alert",
29
29
  ariaLive: "polite"
30
30
  };
31
31
  case "critical":
32
32
  return {
33
- color: color.red,
33
+ color: semanticColor.status.critical.foreground,
34
34
  icon: criticalIcon,
35
35
  role: "alert"
36
36
  };
37
37
  default:
38
38
  return {
39
- color: color.blue,
39
+ color: semanticColor.status.notice.foreground,
40
40
  icon: infoIcon,
41
41
  role: "status"
42
42
  };
@@ -139,7 +139,7 @@ const styles = StyleSheet.create({
139
139
  containerOuter: {
140
140
  borderInlineStartWidth: spacing.xxSmall_6,
141
141
  width: "100%",
142
- backgroundColor: color.white
142
+ backgroundColor: semanticColor.surface.primary
143
143
  },
144
144
  containerInner: {
145
145
  flexDirection: "row",
@@ -151,7 +151,7 @@ const styles = StyleSheet.create({
151
151
  marginInlineStart: spacing.xxxxSmall_2,
152
152
  marginInlineEnd: spacing.xSmall_8,
153
153
  alignSelf: "flex-start",
154
- color: color.offBlack64
154
+ color: semanticColor.icon.primary
155
155
  },
156
156
  labelAndButtonsContainer: {
157
157
  flex: 1,
@@ -181,7 +181,7 @@ const styles = StyleSheet.create({
181
181
  justifyContent: "center"
182
182
  },
183
183
  link: {
184
- fontSize: 14
184
+ fontSize: font.size.small
185
185
  },
186
186
  dismiss: {
187
187
  flexShrink: 1
package/dist/index.js CHANGED
@@ -49,26 +49,26 @@ const getValuesForKind = kind => {
49
49
  switch (kind) {
50
50
  case "success":
51
51
  return {
52
- color: wonderBlocksTokens.color.green,
52
+ color: wonderBlocksTokens.semanticColor.status.success.foreground,
53
53
  icon: successIcon__default["default"],
54
54
  role: "status"
55
55
  };
56
56
  case "warning":
57
57
  return {
58
- color: wonderBlocksTokens.color.gold,
58
+ color: wonderBlocksTokens.semanticColor.status.warning.foreground,
59
59
  icon: warningIcon__default["default"],
60
60
  role: "alert",
61
61
  ariaLive: "polite"
62
62
  };
63
63
  case "critical":
64
64
  return {
65
- color: wonderBlocksTokens.color.red,
65
+ color: wonderBlocksTokens.semanticColor.status.critical.foreground,
66
66
  icon: criticalIcon__default["default"],
67
67
  role: "alert"
68
68
  };
69
69
  default:
70
70
  return {
71
- color: wonderBlocksTokens.color.blue,
71
+ color: wonderBlocksTokens.semanticColor.status.notice.foreground,
72
72
  icon: infoIcon__default["default"],
73
73
  role: "status"
74
74
  };
@@ -171,7 +171,7 @@ const styles = aphrodite.StyleSheet.create({
171
171
  containerOuter: {
172
172
  borderInlineStartWidth: wonderBlocksTokens.spacing.xxSmall_6,
173
173
  width: "100%",
174
- backgroundColor: wonderBlocksTokens.color.white
174
+ backgroundColor: wonderBlocksTokens.semanticColor.surface.primary
175
175
  },
176
176
  containerInner: {
177
177
  flexDirection: "row",
@@ -183,7 +183,7 @@ const styles = aphrodite.StyleSheet.create({
183
183
  marginInlineStart: wonderBlocksTokens.spacing.xxxxSmall_2,
184
184
  marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8,
185
185
  alignSelf: "flex-start",
186
- color: wonderBlocksTokens.color.offBlack64
186
+ color: wonderBlocksTokens.semanticColor.icon.primary
187
187
  },
188
188
  labelAndButtonsContainer: {
189
189
  flex: 1,
@@ -213,7 +213,7 @@ const styles = aphrodite.StyleSheet.create({
213
213
  justifyContent: "center"
214
214
  },
215
215
  link: {
216
- fontSize: 14
216
+ fontSize: wonderBlocksTokens.font.size.small
217
217
  },
218
218
  dismiss: {
219
219
  flexShrink: 1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-banner",
3
- "version": "4.0.7",
3
+ "version": "4.0.9",
4
4
  "design": "v1",
5
5
  "description": "Banner components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -17,13 +17,13 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.18.6",
20
- "@khanacademy/wonder-blocks-button": "^7.0.7",
21
- "@khanacademy/wonder-blocks-core": "^11.1.0",
22
- "@khanacademy/wonder-blocks-icon": "^5.0.5",
23
- "@khanacademy/wonder-blocks-icon-button": "^6.0.7",
24
- "@khanacademy/wonder-blocks-link": "^7.0.7",
20
+ "@khanacademy/wonder-blocks-button": "^7.0.8",
21
+ "@khanacademy/wonder-blocks-core": "^12.0.0",
22
+ "@khanacademy/wonder-blocks-icon": "^5.0.6",
23
+ "@khanacademy/wonder-blocks-icon-button": "^6.0.9",
24
+ "@khanacademy/wonder-blocks-link": "^7.0.8",
25
25
  "@khanacademy/wonder-blocks-tokens": "^4.1.0",
26
- "@khanacademy/wonder-blocks-typography": "^3.0.5"
26
+ "@khanacademy/wonder-blocks-typography": "^3.0.6"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "@phosphor-icons/core": "^2.0.2",