@khanacademy/wonder-blocks-switch 3.0.5 → 3.0.6

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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/es/index.js +26 -20
  3. package/dist/index.js +25 -20
  4. package/dist/themes/khanmigo.d.ts +4 -0
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @khanacademy/wonder-blocks-switch
2
2
 
3
+ ## 3.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - 645fc67b: Migrate the Switch component to use `semanticColor` tokens instead of `color`. This will prepare the component for supporting a more global theming approach in the future.
8
+
3
9
  ## 3.0.5
4
10
 
5
11
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -5,48 +5,50 @@ import { StyleSheet } from 'aphrodite';
5
5
  import { addStyle, View } from '@khanacademy/wonder-blocks-core';
6
6
  import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
7
7
  import * as tokens from '@khanacademy/wonder-blocks-tokens';
8
+ import { semanticColor, color, spacing, border } from '@khanacademy/wonder-blocks-tokens';
8
9
 
10
+ const action = semanticColor.action.outlined.progressive;
9
11
  const theme$1 = {
10
12
  color: {
11
13
  bg: {
12
14
  switch: {
13
- off: tokens.color.offBlack50,
14
- disabledOff: tokens.color.offBlack32,
15
- activeOff: tokens.color.offBlack64,
16
- on: tokens.color.blue,
17
- disabledOn: tokens.color.fadedBlue,
18
- activeOn: tokens.color.activeBlue
15
+ off: action.default.border,
16
+ disabledOff: semanticColor.action.disabled.default,
17
+ activeOff: color.fadedOffBlack64,
18
+ on: action.default.foreground,
19
+ disabledOn: action.press.background,
20
+ activeOn: action.press.foreground
19
21
  },
20
22
  slider: {
21
- on: tokens.color.white,
22
- off: tokens.color.white
23
+ on: semanticColor.icon.inverse,
24
+ off: semanticColor.icon.inverse
23
25
  },
24
26
  icon: {
25
- on: tokens.color.blue,
26
- disabledOn: tokens.color.fadedBlue,
27
- off: tokens.color.offBlack50,
28
- disabledOff: tokens.color.offBlack32
27
+ on: action.default.foreground,
28
+ disabledOn: action.press.background,
29
+ off: action.default.border,
30
+ disabledOff: semanticColor.action.disabled.default
29
31
  }
30
32
  },
31
33
  outline: {
32
- default: tokens.color.blue
34
+ default: semanticColor.border.focus
33
35
  }
34
36
  },
35
37
  border: {
36
38
  radius: {
37
- small: tokens.spacing.small_12,
38
- full: tokens.border.radius.full
39
+ small: spacing.small_12,
40
+ full: border.radius.full
39
41
  }
40
42
  },
41
43
  size: {
42
44
  height: {
43
45
  none: 0,
44
46
  medium: 20,
45
- large: tokens.spacing.large_24
47
+ large: spacing.large_24
46
48
  },
47
49
  width: {
48
50
  none: 0,
49
- small: tokens.spacing.xxxxSmall_2,
51
+ small: spacing.xxxxSmall_2,
50
52
  medium: 20,
51
53
  large: 40
52
54
  },
@@ -56,13 +58,13 @@ const theme$1 = {
56
58
  },
57
59
  spacing: {
58
60
  slider: {
59
- position: tokens.spacing.xxxxSmall_2
61
+ position: spacing.xxxxSmall_2
60
62
  },
61
63
  icon: {
62
- position: tokens.spacing.xxxSmall_4
64
+ position: spacing.xxxSmall_4
63
65
  },
64
66
  transform: {
65
- default: `translateX(${tokens.spacing.medium_16}px)`,
67
+ default: `translateX(${spacing.medium_16}px)`,
66
68
  transition: "transform 0.15s ease-in-out"
67
69
  }
68
70
  }
@@ -189,6 +191,10 @@ const themedSharedStyles = theme => ({
189
191
  cursor: "not-allowed",
190
192
  ":hover": {
191
193
  outline: "none"
194
+ },
195
+ ":focus-within": {
196
+ outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`,
197
+ outlineOffset: theme.size.offset.default
192
198
  }
193
199
  },
194
200
  slider: {
package/dist/index.js CHANGED
@@ -31,47 +31,48 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
31
31
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
32
32
  var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
33
33
 
34
+ const action = tokens.semanticColor.action.outlined.progressive;
34
35
  const theme$1 = {
35
36
  color: {
36
37
  bg: {
37
38
  switch: {
38
- off: tokens__namespace.color.offBlack50,
39
- disabledOff: tokens__namespace.color.offBlack32,
40
- activeOff: tokens__namespace.color.offBlack64,
41
- on: tokens__namespace.color.blue,
42
- disabledOn: tokens__namespace.color.fadedBlue,
43
- activeOn: tokens__namespace.color.activeBlue
39
+ off: action.default.border,
40
+ disabledOff: tokens.semanticColor.action.disabled.default,
41
+ activeOff: tokens.color.fadedOffBlack64,
42
+ on: action.default.foreground,
43
+ disabledOn: action.press.background,
44
+ activeOn: action.press.foreground
44
45
  },
45
46
  slider: {
46
- on: tokens__namespace.color.white,
47
- off: tokens__namespace.color.white
47
+ on: tokens.semanticColor.icon.inverse,
48
+ off: tokens.semanticColor.icon.inverse
48
49
  },
49
50
  icon: {
50
- on: tokens__namespace.color.blue,
51
- disabledOn: tokens__namespace.color.fadedBlue,
52
- off: tokens__namespace.color.offBlack50,
53
- disabledOff: tokens__namespace.color.offBlack32
51
+ on: action.default.foreground,
52
+ disabledOn: action.press.background,
53
+ off: action.default.border,
54
+ disabledOff: tokens.semanticColor.action.disabled.default
54
55
  }
55
56
  },
56
57
  outline: {
57
- default: tokens__namespace.color.blue
58
+ default: tokens.semanticColor.border.focus
58
59
  }
59
60
  },
60
61
  border: {
61
62
  radius: {
62
- small: tokens__namespace.spacing.small_12,
63
- full: tokens__namespace.border.radius.full
63
+ small: tokens.spacing.small_12,
64
+ full: tokens.border.radius.full
64
65
  }
65
66
  },
66
67
  size: {
67
68
  height: {
68
69
  none: 0,
69
70
  medium: 20,
70
- large: tokens__namespace.spacing.large_24
71
+ large: tokens.spacing.large_24
71
72
  },
72
73
  width: {
73
74
  none: 0,
74
- small: tokens__namespace.spacing.xxxxSmall_2,
75
+ small: tokens.spacing.xxxxSmall_2,
75
76
  medium: 20,
76
77
  large: 40
77
78
  },
@@ -81,13 +82,13 @@ const theme$1 = {
81
82
  },
82
83
  spacing: {
83
84
  slider: {
84
- position: tokens__namespace.spacing.xxxxSmall_2
85
+ position: tokens.spacing.xxxxSmall_2
85
86
  },
86
87
  icon: {
87
- position: tokens__namespace.spacing.xxxSmall_4
88
+ position: tokens.spacing.xxxSmall_4
88
89
  },
89
90
  transform: {
90
- default: `translateX(${tokens__namespace.spacing.medium_16}px)`,
91
+ default: `translateX(${tokens.spacing.medium_16}px)`,
91
92
  transition: "transform 0.15s ease-in-out"
92
93
  }
93
94
  }
@@ -214,6 +215,10 @@ const themedSharedStyles = theme => ({
214
215
  cursor: "not-allowed",
215
216
  ":hover": {
216
217
  outline: "none"
218
+ },
219
+ ":focus-within": {
220
+ outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`,
221
+ outlineOffset: theme.size.offset.default
217
222
  }
218
223
  },
219
224
  slider: {
package/dist/themes/khanmigo.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  /**
2
2
  * The overrides for khanmigo theme for a switch.
3
+ *
4
+ * NOTE: Leaving `color` tokens as is for now, as this theme is not currently
5
+ * used in webapp. Also, this most likely change once we migrate to the new
6
+ * theme.
3
7
  */
4
8
  declare const theme: {
5
9
  color: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-switch",
3
- "version": "3.0.5",
3
+ "version": "3.0.6",
4
4
  "design": "v1",
5
5
  "description": "Switch components for Wonder Blocks.",
6
6
  "main": "dist/index.js",