@khanacademy/wonder-blocks-form 7.1.7 → 7.1.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 +21 -0
  2. package/dist/es/index.js +34 -34
  3. package/dist/index.js +34 -34
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @khanacademy/wonder-blocks-form
2
2
 
3
+ ## 7.1.9
4
+
5
+ ### Patch Changes
6
+
7
+ - e63adea: Update `border.width` tokens to use new naming conventions.
8
+ - Updated dependencies [e63adea]
9
+ - Updated dependencies [e63adea]
10
+ - @khanacademy/wonder-blocks-tokens@8.0.0
11
+ - @khanacademy/wonder-blocks-clickable@7.0.2
12
+ - @khanacademy/wonder-blocks-layout@3.1.8
13
+
14
+ ## 7.1.8
15
+
16
+ ### Patch Changes
17
+
18
+ - e8ccf60: Update `borderRadius` styles to use new `border.radius` tokens
19
+ - Updated dependencies [e8ccf60]
20
+ - @khanacademy/wonder-blocks-tokens@7.0.0
21
+ - @khanacademy/wonder-blocks-clickable@7.0.1
22
+ - @khanacademy/wonder-blocks-layout@3.1.7
23
+
3
24
  ## 7.1.7
4
25
 
5
26
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -96,14 +96,14 @@ const sharedStyles$1 = StyleSheet.create({
96
96
  outline: "none",
97
97
  boxSizing: "border-box",
98
98
  borderStyle: "solid",
99
- borderWidth: border.width.hairline,
100
- borderRadius: border.radius.small_3
99
+ borderWidth: border.width.thin,
100
+ borderRadius: 3
101
101
  },
102
102
  disabled: {
103
103
  cursor: "auto",
104
104
  backgroundColor: disabledState$1.background,
105
105
  borderColor: disabledState$1.border,
106
- borderWidth: border.width.hairline
106
+ borderWidth: border.width.thin
107
107
  },
108
108
  checkboxIcon: {
109
109
  position: "absolute",
@@ -138,15 +138,15 @@ const _generateStyles$1 = (checked, error) => {
138
138
  backgroundColor: states.default.background,
139
139
  borderColor: states.default.border,
140
140
  ":focus-visible": {
141
- outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
141
+ outline: `${border.width.medium} solid ${semanticColor.focus.outer}`,
142
142
  outlineOffset: 1
143
143
  },
144
144
  ":hover": {
145
- outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
145
+ outline: `${border.width.medium} solid ${colorAction.hover.border}`,
146
146
  outlineOffset: 1
147
147
  },
148
148
  ":active": {
149
- outline: `${border.width.thin}px solid ${colorAction.press.border}`,
149
+ outline: `${border.width.medium} solid ${colorAction.press.border}`,
150
150
  outlineOffset: 1,
151
151
  background: colorAction.press.background
152
152
  }
@@ -160,17 +160,17 @@ const _generateStyles$1 = (checked, error) => {
160
160
  borderColor: currentState.border,
161
161
  ":focus-visible": {
162
162
  backgroundColor: error ? states.error.background : colorAction.hover.background,
163
- outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
163
+ outline: `${border.width.medium} solid ${semanticColor.focus.outer}`,
164
164
  outlineOffset: -1
165
165
  },
166
166
  ":hover": {
167
167
  backgroundColor: error ? states.error.background : colorAction.hover.background,
168
- outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
168
+ outline: `${border.width.medium} solid ${colorAction.hover.border}`,
169
169
  outlineOffset: -1
170
170
  },
171
171
  ":active": {
172
172
  backgroundColor: colorAction.press.background,
173
- outline: `${border.width.thin}px solid ${colorAction.press.border}`,
173
+ outline: `${border.width.medium} solid ${colorAction.press.border}`,
174
174
  outlineOffset: -1
175
175
  }
176
176
  }
@@ -223,7 +223,7 @@ const disabledChecked = {
223
223
  left: size / 4,
224
224
  height: size / 2,
225
225
  width: size / 2,
226
- borderRadius: "50%",
226
+ borderRadius: border.radius.radius_full,
227
227
  backgroundColor: semanticColor.action.primary.disabled.background
228
228
  };
229
229
  const sharedStyles = StyleSheet.create({
@@ -241,14 +241,14 @@ const sharedStyles = StyleSheet.create({
241
241
  outline: "none",
242
242
  boxSizing: "border-box",
243
243
  borderStyle: "solid",
244
- borderWidth: border.width.hairline,
245
- borderRadius: "50%"
244
+ borderWidth: border.width.thin,
245
+ borderRadius: border.radius.radius_full
246
246
  },
247
247
  disabled: {
248
248
  cursor: "auto",
249
249
  backgroundColor: disabledState.background,
250
250
  borderColor: disabledState.border,
251
- borderWidth: border.width.hairline
251
+ borderWidth: border.width.thin
252
252
  }
253
253
  });
254
254
  const styles$5 = {};
@@ -281,15 +281,15 @@ const _generateStyles = (checked, error) => {
281
281
  borderColor: states.checked.border,
282
282
  borderWidth: size / 4,
283
283
  ":focus-visible": {
284
- outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
284
+ outline: `${border.width.medium} solid ${semanticColor.focus.outer}`,
285
285
  outlineOffset: 1
286
286
  },
287
287
  ":hover": {
288
- outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
288
+ outline: `${border.width.medium} solid ${colorAction.hover.border}`,
289
289
  outlineOffset: 1
290
290
  },
291
291
  ":active": {
292
- outline: `${border.width.thin}px solid ${colorAction.press.border}`,
292
+ outline: `${border.width.medium} solid ${colorAction.press.border}`,
293
293
  outlineOffset: 1,
294
294
  borderColor: colorAction.press.border
295
295
  }
@@ -303,17 +303,17 @@ const _generateStyles = (checked, error) => {
303
303
  borderColor: currentState.border,
304
304
  ":focus-visible": {
305
305
  backgroundColor: error ? states.error.background : colorAction.hover.background,
306
- outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
306
+ outline: `${border.width.medium} solid ${semanticColor.focus.outer}`,
307
307
  outlineOffset: -1
308
308
  },
309
309
  ":hover": {
310
310
  backgroundColor: error ? states.error.background : colorAction.hover.background,
311
- outline: `${border.width.thin}px solid ${colorAction.hover.border}`,
311
+ outline: `${border.width.medium} solid ${colorAction.hover.border}`,
312
312
  outlineOffset: -1
313
313
  },
314
314
  ":active": {
315
315
  backgroundColor: colorAction.press.background,
316
- outline: `${border.width.thin}px solid ${colorAction.press.border}`,
316
+ outline: `${border.width.medium} solid ${colorAction.press.border}`,
317
317
  outlineOffset: -1
318
318
  }
319
319
  }
@@ -745,14 +745,14 @@ const styles$2 = StyleSheet.create({
745
745
  input: {
746
746
  width: "100%",
747
747
  height: 40,
748
- borderRadius: border.radius.medium_4,
748
+ borderRadius: border.radius.radius_040,
749
749
  boxSizing: "border-box",
750
750
  paddingLeft: spacing.medium_16,
751
751
  margin: 0
752
752
  },
753
753
  default: {
754
754
  background: states$1.default.background,
755
- border: `${border.width.hairline}px solid ${states$1.default.border}`,
755
+ border: `${border.width.thin} solid ${states$1.default.border}`,
756
756
  color: states$1.default.foreground,
757
757
  "::placeholder": {
758
758
  color: semanticColor.text.secondary
@@ -761,32 +761,32 @@ const styles$2 = StyleSheet.create({
761
761
  defaultFocus: {
762
762
  ":focus-visible": {
763
763
  borderColor: semanticColor.focus.outer,
764
- outline: `${border.width.hairline}px solid ${semanticColor.focus.outer}`,
764
+ outline: `${border.width.thin} solid ${semanticColor.focus.outer}`,
765
765
  outlineOffset: -2
766
766
  }
767
767
  },
768
768
  error: {
769
769
  background: states$1.error.background,
770
- border: `${border.width.hairline}px solid ${states$1.error.border}`,
770
+ border: `${border.width.thin} solid ${states$1.error.border}`,
771
771
  color: states$1.error.foreground,
772
772
  "::placeholder": {
773
773
  color: semanticColor.text.secondary
774
774
  },
775
775
  ":focus-visible": {
776
776
  outlineColor: semanticColor.focus.outer,
777
- outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`
777
+ outline: `${border.width.medium} solid ${semanticColor.focus.outer}`
778
778
  }
779
779
  },
780
780
  disabled: {
781
781
  background: states$1.disabled.background,
782
- border: `${border.width.hairline}px solid ${states$1.disabled.border}`,
782
+ border: `${border.width.thin} solid ${states$1.disabled.border}`,
783
783
  color: states$1.disabled.foreground,
784
784
  "::placeholder": {
785
785
  color: states$1.disabled.foreground
786
786
  },
787
787
  cursor: "not-allowed",
788
788
  ":focus-visible": {
789
- outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
789
+ outline: `${border.width.medium} solid ${semanticColor.focus.outer}`,
790
790
  outlineOffset: -3
791
791
  }
792
792
  }
@@ -1102,14 +1102,14 @@ const states = {
1102
1102
  };
1103
1103
  const styles = StyleSheet.create({
1104
1104
  textarea: {
1105
- borderRadius: border.radius.medium_4,
1105
+ borderRadius: border.radius.radius_040,
1106
1106
  boxSizing: "border-box",
1107
1107
  padding: `${VERTICAL_SPACING_PX}px ${spacing.medium_16}px`,
1108
- minHeight: `${VERTICAL_SPACING_PX * 2 + font.lineHeight.medium + 2 * border.width.hairline}px`
1108
+ minHeight: `${VERTICAL_SPACING_PX * 2 + font.lineHeight.medium + 2}px`
1109
1109
  },
1110
1110
  default: {
1111
1111
  background: states.default.background,
1112
- border: `${border.width.hairline}px solid ${states.default.border}`,
1112
+ border: `${border.width.thin} solid ${states.default.border}`,
1113
1113
  color: states.default.foreground,
1114
1114
  "::placeholder": {
1115
1115
  color: semanticColor.text.secondary
@@ -1118,32 +1118,32 @@ const styles = StyleSheet.create({
1118
1118
  defaultFocus: {
1119
1119
  ":focus-visible": {
1120
1120
  borderColor: semanticColor.focus.outer,
1121
- outline: `${border.width.hairline}px solid ${semanticColor.focus.outer}`,
1121
+ outline: `${border.width.thin} solid ${semanticColor.focus.outer}`,
1122
1122
  outlineOffset: -2
1123
1123
  }
1124
1124
  },
1125
1125
  disabled: {
1126
1126
  background: states.disabled.background,
1127
- border: `${border.width.hairline}px solid ${states.disabled.border}`,
1127
+ border: `${border.width.thin} solid ${states.disabled.border}`,
1128
1128
  color: states.disabled.foreground,
1129
1129
  "::placeholder": {
1130
1130
  color: states.disabled.foreground
1131
1131
  },
1132
1132
  cursor: "not-allowed",
1133
1133
  ":focus-visible": {
1134
- outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
1134
+ outline: `${border.width.medium} solid ${semanticColor.focus.outer}`,
1135
1135
  outlineOffset: -3
1136
1136
  }
1137
1137
  },
1138
1138
  error: {
1139
1139
  background: states.error.background,
1140
- border: `${border.width.hairline}px solid ${states.error.border}`,
1140
+ border: `${border.width.thin} solid ${states.error.border}`,
1141
1141
  color: states.error.foreground,
1142
1142
  "::placeholder": {
1143
1143
  color: semanticColor.text.secondary
1144
1144
  },
1145
1145
  ":focus-visible": {
1146
- outline: `${border.width.thin}px solid ${semanticColor.focus.outer}`,
1146
+ outline: `${border.width.medium} solid ${semanticColor.focus.outer}`,
1147
1147
  borderColor: states.error.border
1148
1148
  }
1149
1149
  }
package/dist/index.js CHANGED
@@ -125,14 +125,14 @@ const sharedStyles$1 = aphrodite.StyleSheet.create({
125
125
  outline: "none",
126
126
  boxSizing: "border-box",
127
127
  borderStyle: "solid",
128
- borderWidth: wonderBlocksTokens.border.width.hairline,
129
- borderRadius: wonderBlocksTokens.border.radius.small_3
128
+ borderWidth: wonderBlocksTokens.border.width.thin,
129
+ borderRadius: 3
130
130
  },
131
131
  disabled: {
132
132
  cursor: "auto",
133
133
  backgroundColor: disabledState$1.background,
134
134
  borderColor: disabledState$1.border,
135
- borderWidth: wonderBlocksTokens.border.width.hairline
135
+ borderWidth: wonderBlocksTokens.border.width.thin
136
136
  },
137
137
  checkboxIcon: {
138
138
  position: "absolute",
@@ -167,15 +167,15 @@ const _generateStyles$1 = (checked, error) => {
167
167
  backgroundColor: states.default.background,
168
168
  borderColor: states.default.border,
169
169
  ":focus-visible": {
170
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
170
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
171
171
  outlineOffset: 1
172
172
  },
173
173
  ":hover": {
174
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
174
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,
175
175
  outlineOffset: 1
176
176
  },
177
177
  ":active": {
178
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
178
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,
179
179
  outlineOffset: 1,
180
180
  background: colorAction.press.background
181
181
  }
@@ -189,17 +189,17 @@ const _generateStyles$1 = (checked, error) => {
189
189
  borderColor: currentState.border,
190
190
  ":focus-visible": {
191
191
  backgroundColor: error ? states.error.background : colorAction.hover.background,
192
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
192
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
193
193
  outlineOffset: -1
194
194
  },
195
195
  ":hover": {
196
196
  backgroundColor: error ? states.error.background : colorAction.hover.background,
197
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
197
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,
198
198
  outlineOffset: -1
199
199
  },
200
200
  ":active": {
201
201
  backgroundColor: colorAction.press.background,
202
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
202
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,
203
203
  outlineOffset: -1
204
204
  }
205
205
  }
@@ -252,7 +252,7 @@ const disabledChecked = {
252
252
  left: size / 4,
253
253
  height: size / 2,
254
254
  width: size / 2,
255
- borderRadius: "50%",
255
+ borderRadius: wonderBlocksTokens.border.radius.radius_full,
256
256
  backgroundColor: wonderBlocksTokens.semanticColor.action.primary.disabled.background
257
257
  };
258
258
  const sharedStyles = aphrodite.StyleSheet.create({
@@ -270,14 +270,14 @@ const sharedStyles = aphrodite.StyleSheet.create({
270
270
  outline: "none",
271
271
  boxSizing: "border-box",
272
272
  borderStyle: "solid",
273
- borderWidth: wonderBlocksTokens.border.width.hairline,
274
- borderRadius: "50%"
273
+ borderWidth: wonderBlocksTokens.border.width.thin,
274
+ borderRadius: wonderBlocksTokens.border.radius.radius_full
275
275
  },
276
276
  disabled: {
277
277
  cursor: "auto",
278
278
  backgroundColor: disabledState.background,
279
279
  borderColor: disabledState.border,
280
- borderWidth: wonderBlocksTokens.border.width.hairline
280
+ borderWidth: wonderBlocksTokens.border.width.thin
281
281
  }
282
282
  });
283
283
  const styles$5 = {};
@@ -310,15 +310,15 @@ const _generateStyles = (checked, error) => {
310
310
  borderColor: states.checked.border,
311
311
  borderWidth: size / 4,
312
312
  ":focus-visible": {
313
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
313
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
314
314
  outlineOffset: 1
315
315
  },
316
316
  ":hover": {
317
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
317
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,
318
318
  outlineOffset: 1
319
319
  },
320
320
  ":active": {
321
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
321
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,
322
322
  outlineOffset: 1,
323
323
  borderColor: colorAction.press.border
324
324
  }
@@ -332,17 +332,17 @@ const _generateStyles = (checked, error) => {
332
332
  borderColor: currentState.border,
333
333
  ":focus-visible": {
334
334
  backgroundColor: error ? states.error.background : colorAction.hover.background,
335
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
335
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
336
336
  outlineOffset: -1
337
337
  },
338
338
  ":hover": {
339
339
  backgroundColor: error ? states.error.background : colorAction.hover.background,
340
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.hover.border}`,
340
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.hover.border}`,
341
341
  outlineOffset: -1
342
342
  },
343
343
  ":active": {
344
344
  backgroundColor: colorAction.press.background,
345
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${colorAction.press.border}`,
345
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${colorAction.press.border}`,
346
346
  outlineOffset: -1
347
347
  }
348
348
  }
@@ -774,14 +774,14 @@ const styles$2 = aphrodite.StyleSheet.create({
774
774
  input: {
775
775
  width: "100%",
776
776
  height: 40,
777
- borderRadius: wonderBlocksTokens.border.radius.medium_4,
777
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
778
778
  boxSizing: "border-box",
779
779
  paddingLeft: wonderBlocksTokens.spacing.medium_16,
780
780
  margin: 0
781
781
  },
782
782
  default: {
783
783
  background: states$1.default.background,
784
- border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.default.border}`,
784
+ border: `${wonderBlocksTokens.border.width.thin} solid ${states$1.default.border}`,
785
785
  color: states$1.default.foreground,
786
786
  "::placeholder": {
787
787
  color: wonderBlocksTokens.semanticColor.text.secondary
@@ -790,32 +790,32 @@ const styles$2 = aphrodite.StyleSheet.create({
790
790
  defaultFocus: {
791
791
  ":focus-visible": {
792
792
  borderColor: wonderBlocksTokens.semanticColor.focus.outer,
793
- outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
793
+ outline: `${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
794
794
  outlineOffset: -2
795
795
  }
796
796
  },
797
797
  error: {
798
798
  background: states$1.error.background,
799
- border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.error.border}`,
799
+ border: `${wonderBlocksTokens.border.width.thin} solid ${states$1.error.border}`,
800
800
  color: states$1.error.foreground,
801
801
  "::placeholder": {
802
802
  color: wonderBlocksTokens.semanticColor.text.secondary
803
803
  },
804
804
  ":focus-visible": {
805
805
  outlineColor: wonderBlocksTokens.semanticColor.focus.outer,
806
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
806
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`
807
807
  }
808
808
  },
809
809
  disabled: {
810
810
  background: states$1.disabled.background,
811
- border: `${wonderBlocksTokens.border.width.hairline}px solid ${states$1.disabled.border}`,
811
+ border: `${wonderBlocksTokens.border.width.thin} solid ${states$1.disabled.border}`,
812
812
  color: states$1.disabled.foreground,
813
813
  "::placeholder": {
814
814
  color: states$1.disabled.foreground
815
815
  },
816
816
  cursor: "not-allowed",
817
817
  ":focus-visible": {
818
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
818
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
819
819
  outlineOffset: -3
820
820
  }
821
821
  }
@@ -1131,14 +1131,14 @@ const states = {
1131
1131
  };
1132
1132
  const styles = aphrodite.StyleSheet.create({
1133
1133
  textarea: {
1134
- borderRadius: wonderBlocksTokens.border.radius.medium_4,
1134
+ borderRadius: wonderBlocksTokens.border.radius.radius_040,
1135
1135
  boxSizing: "border-box",
1136
1136
  padding: `${VERTICAL_SPACING_PX}px ${wonderBlocksTokens.spacing.medium_16}px`,
1137
- minHeight: `${VERTICAL_SPACING_PX * 2 + wonderBlocksTokens.font.lineHeight.medium + 2 * wonderBlocksTokens.border.width.hairline}px`
1137
+ minHeight: `${VERTICAL_SPACING_PX * 2 + wonderBlocksTokens.font.lineHeight.medium + 2}px`
1138
1138
  },
1139
1139
  default: {
1140
1140
  background: states.default.background,
1141
- border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.default.border}`,
1141
+ border: `${wonderBlocksTokens.border.width.thin} solid ${states.default.border}`,
1142
1142
  color: states.default.foreground,
1143
1143
  "::placeholder": {
1144
1144
  color: wonderBlocksTokens.semanticColor.text.secondary
@@ -1147,32 +1147,32 @@ const styles = aphrodite.StyleSheet.create({
1147
1147
  defaultFocus: {
1148
1148
  ":focus-visible": {
1149
1149
  borderColor: wonderBlocksTokens.semanticColor.focus.outer,
1150
- outline: `${wonderBlocksTokens.border.width.hairline}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1150
+ outline: `${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1151
1151
  outlineOffset: -2
1152
1152
  }
1153
1153
  },
1154
1154
  disabled: {
1155
1155
  background: states.disabled.background,
1156
- border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.disabled.border}`,
1156
+ border: `${wonderBlocksTokens.border.width.thin} solid ${states.disabled.border}`,
1157
1157
  color: states.disabled.foreground,
1158
1158
  "::placeholder": {
1159
1159
  color: states.disabled.foreground
1160
1160
  },
1161
1161
  cursor: "not-allowed",
1162
1162
  ":focus-visible": {
1163
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1163
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1164
1164
  outlineOffset: -3
1165
1165
  }
1166
1166
  },
1167
1167
  error: {
1168
1168
  background: states.error.background,
1169
- border: `${wonderBlocksTokens.border.width.hairline}px solid ${states.error.border}`,
1169
+ border: `${wonderBlocksTokens.border.width.thin} solid ${states.error.border}`,
1170
1170
  color: states.error.foreground,
1171
1171
  "::placeholder": {
1172
1172
  color: wonderBlocksTokens.semanticColor.text.secondary
1173
1173
  },
1174
1174
  ":focus-visible": {
1175
- outline: `${wonderBlocksTokens.border.width.thin}px solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1175
+ outline: `${wonderBlocksTokens.border.width.medium} solid ${wonderBlocksTokens.semanticColor.focus.outer}`,
1176
1176
  borderColor: states.error.border
1177
1177
  }
1178
1178
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-form",
3
- "version": "7.1.7",
3
+ "version": "7.1.9",
4
4
  "design": "v1",
5
5
  "description": "Form components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -13,11 +13,11 @@
13
13
  },
14
14
  "dependencies": {
15
15
  "@babel/runtime": "^7.24.5",
16
- "@khanacademy/wonder-blocks-clickable": "7.0.0",
16
+ "@khanacademy/wonder-blocks-clickable": "7.0.2",
17
17
  "@khanacademy/wonder-blocks-core": "12.2.1",
18
18
  "@khanacademy/wonder-blocks-icon": "5.1.3",
19
- "@khanacademy/wonder-blocks-layout": "3.1.6",
20
- "@khanacademy/wonder-blocks-tokens": "6.0.0",
19
+ "@khanacademy/wonder-blocks-layout": "3.1.8",
20
+ "@khanacademy/wonder-blocks-tokens": "8.0.0",
21
21
  "@khanacademy/wonder-blocks-typography": "3.1.3"
22
22
  },
23
23
  "peerDependencies": {