@khanacademy/wonder-blocks-pill 3.1.1 → 3.1.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 (4) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/es/index.js +36 -19
  3. package/dist/index.js +36 -19
  4. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,42 @@
1
1
  # @khanacademy/wonder-blocks-pill
2
2
 
3
+ ## 3.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [507cf2f]
8
+ - @khanacademy/wonder-blocks-tokens@5.1.0
9
+ - @khanacademy/wonder-blocks-clickable@6.1.3
10
+ - @khanacademy/wonder-blocks-link@8.0.1
11
+
12
+ ## 3.1.2
13
+
14
+ ### Patch Changes
15
+
16
+ - 8fc65a9: - Migrate to `semanticColor`.
17
+ - Update background from 16% to 8%.
18
+ - Update focus outline to always be `blue` (using global focus color).
19
+ - 5655b9f: Switch to use `focus.outer` semanticColor token
20
+ - 8f53293: Rename action tokens: `filled` -> `primary`, `outlined` -> `secondary`.
21
+ - Updated dependencies [ed26d66]
22
+ - Updated dependencies [5655b9f]
23
+ - Updated dependencies [5655b9f]
24
+ - Updated dependencies [8f53293]
25
+ - Updated dependencies [beb09cd]
26
+ - Updated dependencies [5bd2a95]
27
+ - Updated dependencies [762f749]
28
+ - Updated dependencies [051f0f8]
29
+ - Updated dependencies [b6d77dc]
30
+ - Updated dependencies [8fc65a9]
31
+ - Updated dependencies [e1b78db]
32
+ - Updated dependencies [8f53293]
33
+ - Updated dependencies [051f0f8]
34
+ - @khanacademy/wonder-blocks-core@12.2.0
35
+ - @khanacademy/wonder-blocks-tokens@5.0.0
36
+ - @khanacademy/wonder-blocks-clickable@6.1.2
37
+ - @khanacademy/wonder-blocks-link@8.0.0
38
+ - @khanacademy/wonder-blocks-typography@3.1.2
39
+
3
40
  ## 3.1.1
4
41
 
5
42
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -9,6 +9,9 @@ import { View } from '@khanacademy/wonder-blocks-core';
9
9
  import { LabelXSmall, Body, LabelSmall } from '@khanacademy/wonder-blocks-typography';
10
10
 
11
11
  const _excluded = ["id", "children", "kind", "size", "role", "onClick", "style", "tabIndex", "testId"];
12
+ const {
13
+ semanticColor
14
+ } = tokens;
12
15
  const PillInner = props => {
13
16
  const {
14
17
  children,
@@ -109,53 +112,67 @@ const _generateColorStyles = (clickable, kind) => {
109
112
  let backgroundColor;
110
113
  switch (kind) {
111
114
  case "accent":
112
- backgroundColor = tokens.color.blue;
115
+ backgroundColor = semanticColor.status.notice.foreground;
113
116
  break;
114
117
  case "info":
115
- backgroundColor = tokens.color.fadedBlue16;
118
+ backgroundColor = semanticColor.status.notice.background;
116
119
  break;
117
120
  case "success":
118
- backgroundColor = tokens.color.fadedGreen16;
121
+ backgroundColor = semanticColor.status.success.background;
119
122
  break;
120
123
  case "warning":
121
- backgroundColor = tokens.color.fadedGold16;
124
+ backgroundColor = semanticColor.status.warning.background;
122
125
  break;
123
126
  case "critical":
124
- backgroundColor = tokens.color.fadedRed16;
127
+ backgroundColor = semanticColor.status.critical.background;
125
128
  break;
126
129
  case "transparent":
127
130
  backgroundColor = "transparent";
128
131
  break;
129
132
  case "neutral":
130
133
  default:
131
- backgroundColor = tokens.color.offBlack8;
134
+ backgroundColor = semanticColor.status.neutral.background;
132
135
  }
133
- const activeColor = kind === "neutral" || kind === "transparent" ? tokens.color.offBlack16 : mix(tokens.color.offBlack32, backgroundColor);
134
- const textColor = kind === "accent" ? tokens.color.white : tokens.color.offBlack;
135
- const outlineColor = kind === "critical" ? tokens.color.red : tokens.color.blue;
136
- const activeOutlineColor = kind === "critical" ? tokens.color.activeRed : tokens.color.activeBlue;
137
- const outline = kind === "transparent" ? `1px solid ${tokens.color.offBlack16}` : "none";
136
+ const pressColor = kind === "transparent" ? semanticColor.status.neutral.background : mix(tokens.color.offBlack32, backgroundColor);
137
+ const textColor = kind === "accent" ? semanticColor.text.inverse : semanticColor.text.primary;
138
+ const theme = {
139
+ default: {
140
+ border: kind === "transparent" ? `1px solid ${semanticColor.border.primary}` : "none",
141
+ background: backgroundColor,
142
+ foreground: textColor
143
+ },
144
+ focus: {
145
+ border: semanticColor.focus.outer
146
+ },
147
+ hover: {
148
+ border: semanticColor.action.primary.progressive.hover.border
149
+ },
150
+ press: {
151
+ border: semanticColor.action.primary.progressive.press.border,
152
+ background: pressColor
153
+ }
154
+ };
138
155
  const colorStyles = {
139
156
  pill: {
140
- backgroundColor: backgroundColor,
141
- outline,
142
- color: textColor,
157
+ backgroundColor: theme.default.background,
158
+ outline: theme.default.border,
159
+ color: theme.default.foreground,
143
160
  alignItems: "center",
144
161
  justifyContent: "center"
145
162
  },
146
163
  clickableWrapper: {
147
- outline,
164
+ outline: theme.default.border,
148
165
  ":hover": {
149
- outline: `2px solid ${outlineColor}`,
166
+ outline: `2px solid ${theme.hover.border}`,
150
167
  outlineOffset: tokens.spacing.xxxxSmall_2
151
168
  },
152
169
  ":active": {
153
- backgroundColor: activeColor,
154
- outline: `2px solid ${activeOutlineColor}`,
170
+ backgroundColor: theme.press.background,
171
+ outline: `2px solid ${theme.press.border}`,
155
172
  outlineOffset: tokens.spacing.xxxxSmall_2
156
173
  },
157
174
  ":focus-visible": {
158
- outline: `2px solid ${outlineColor}`,
175
+ outline: `2px solid ${theme.focus.border}`,
159
176
  outlineOffset: tokens.spacing.xxxxSmall_2
160
177
  }
161
178
  }
package/dist/index.js CHANGED
@@ -36,6 +36,9 @@ var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
36
36
  var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
37
37
 
38
38
  const _excluded = ["id", "children", "kind", "size", "role", "onClick", "style", "tabIndex", "testId"];
39
+ const {
40
+ semanticColor
41
+ } = tokens__namespace;
39
42
  const PillInner = props => {
40
43
  const {
41
44
  children,
@@ -136,53 +139,67 @@ const _generateColorStyles = (clickable, kind) => {
136
139
  let backgroundColor;
137
140
  switch (kind) {
138
141
  case "accent":
139
- backgroundColor = tokens__namespace.color.blue;
142
+ backgroundColor = semanticColor.status.notice.foreground;
140
143
  break;
141
144
  case "info":
142
- backgroundColor = tokens__namespace.color.fadedBlue16;
145
+ backgroundColor = semanticColor.status.notice.background;
143
146
  break;
144
147
  case "success":
145
- backgroundColor = tokens__namespace.color.fadedGreen16;
148
+ backgroundColor = semanticColor.status.success.background;
146
149
  break;
147
150
  case "warning":
148
- backgroundColor = tokens__namespace.color.fadedGold16;
151
+ backgroundColor = semanticColor.status.warning.background;
149
152
  break;
150
153
  case "critical":
151
- backgroundColor = tokens__namespace.color.fadedRed16;
154
+ backgroundColor = semanticColor.status.critical.background;
152
155
  break;
153
156
  case "transparent":
154
157
  backgroundColor = "transparent";
155
158
  break;
156
159
  case "neutral":
157
160
  default:
158
- backgroundColor = tokens__namespace.color.offBlack8;
161
+ backgroundColor = semanticColor.status.neutral.background;
159
162
  }
160
- const activeColor = kind === "neutral" || kind === "transparent" ? tokens__namespace.color.offBlack16 : tokens.mix(tokens__namespace.color.offBlack32, backgroundColor);
161
- const textColor = kind === "accent" ? tokens__namespace.color.white : tokens__namespace.color.offBlack;
162
- const outlineColor = kind === "critical" ? tokens__namespace.color.red : tokens__namespace.color.blue;
163
- const activeOutlineColor = kind === "critical" ? tokens__namespace.color.activeRed : tokens__namespace.color.activeBlue;
164
- const outline = kind === "transparent" ? `1px solid ${tokens__namespace.color.offBlack16}` : "none";
163
+ const pressColor = kind === "transparent" ? semanticColor.status.neutral.background : tokens.mix(tokens__namespace.color.offBlack32, backgroundColor);
164
+ const textColor = kind === "accent" ? semanticColor.text.inverse : semanticColor.text.primary;
165
+ const theme = {
166
+ default: {
167
+ border: kind === "transparent" ? `1px solid ${semanticColor.border.primary}` : "none",
168
+ background: backgroundColor,
169
+ foreground: textColor
170
+ },
171
+ focus: {
172
+ border: semanticColor.focus.outer
173
+ },
174
+ hover: {
175
+ border: semanticColor.action.primary.progressive.hover.border
176
+ },
177
+ press: {
178
+ border: semanticColor.action.primary.progressive.press.border,
179
+ background: pressColor
180
+ }
181
+ };
165
182
  const colorStyles = {
166
183
  pill: {
167
- backgroundColor: backgroundColor,
168
- outline,
169
- color: textColor,
184
+ backgroundColor: theme.default.background,
185
+ outline: theme.default.border,
186
+ color: theme.default.foreground,
170
187
  alignItems: "center",
171
188
  justifyContent: "center"
172
189
  },
173
190
  clickableWrapper: {
174
- outline,
191
+ outline: theme.default.border,
175
192
  ":hover": {
176
- outline: `2px solid ${outlineColor}`,
193
+ outline: `2px solid ${theme.hover.border}`,
177
194
  outlineOffset: tokens__namespace.spacing.xxxxSmall_2
178
195
  },
179
196
  ":active": {
180
- backgroundColor: activeColor,
181
- outline: `2px solid ${activeOutlineColor}`,
197
+ backgroundColor: theme.press.background,
198
+ outline: `2px solid ${theme.press.border}`,
182
199
  outlineOffset: tokens__namespace.spacing.xxxxSmall_2
183
200
  },
184
201
  ":focus-visible": {
185
- outline: `2px solid ${outlineColor}`,
202
+ outline: `2px solid ${theme.focus.border}`,
186
203
  outlineOffset: tokens__namespace.spacing.xxxxSmall_2
187
204
  }
188
205
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-pill",
3
- "version": "3.1.1",
3
+ "version": "3.1.3",
4
4
  "design": "v1",
5
5
  "description": "Pill components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -14,11 +14,11 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@babel/runtime": "^7.24.5",
17
- "@khanacademy/wonder-blocks-clickable": "6.1.1",
18
- "@khanacademy/wonder-blocks-core": "12.1.1",
19
- "@khanacademy/wonder-blocks-link": "7.1.1",
20
- "@khanacademy/wonder-blocks-tokens": "4.2.1",
21
- "@khanacademy/wonder-blocks-typography": "3.1.1"
17
+ "@khanacademy/wonder-blocks-clickable": "6.1.3",
18
+ "@khanacademy/wonder-blocks-core": "12.2.0",
19
+ "@khanacademy/wonder-blocks-link": "8.0.1",
20
+ "@khanacademy/wonder-blocks-typography": "3.1.2",
21
+ "@khanacademy/wonder-blocks-tokens": "5.1.0"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "aphrodite": "^1.2.5",