@khanacademy/wonder-blocks-tabs 0.2.2 → 0.2.4

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 +16 -0
  2. package/dist/es/index.js +12 -12
  3. package/dist/index.js +11 -11
  4. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @khanacademy/wonder-blocks-tabs
2
2
 
3
+ ## 0.2.4
4
+
5
+ ### Patch Changes
6
+
7
+ - e8ccf60: Update `borderRadius` styles to use new `border.radius` tokens
8
+ - Updated dependencies [e8ccf60]
9
+ - @khanacademy/wonder-blocks-tokens@7.0.0
10
+
11
+ ## 0.2.3
12
+
13
+ ### Patch Changes
14
+
15
+ - 24bf12f: Update sizing tokens used internally to Base 10 to handle browser minimum size issues
16
+ - Updated dependencies [24bf12f]
17
+ - @khanacademy/wonder-blocks-tokens@6.0.0
18
+
3
19
  ## 0.2.2
4
20
 
5
21
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _extends from '@babel/runtime/helpers/extends';
2
2
  import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
3
3
  import { addStyle, useOnMountEffect, View } from '@khanacademy/wonder-blocks-core';
4
- import { sizing, semanticColor, breakpoint } from '@khanacademy/wonder-blocks-tokens';
4
+ import { sizing, semanticColor, breakpoint, border } from '@khanacademy/wonder-blocks-tokens';
5
5
  import { StyleSheet } from 'aphrodite';
6
6
  import * as React from 'react';
7
7
  import { styles as styles$2 } from '@khanacademy/wonder-blocks-typography';
@@ -95,18 +95,18 @@ const styles$1 = StyleSheet.create({
95
95
  position: "relative"
96
96
  },
97
97
  list: {
98
- paddingInline: sizing.size_050,
98
+ paddingInline: sizing.size_040,
99
99
  paddingBlock: sizing.size_0,
100
100
  margin: sizing.size_0,
101
101
  display: "flex",
102
- gap: sizing.size_200,
102
+ gap: sizing.size_160,
103
103
  flexWrap: "nowrap"
104
104
  },
105
105
  currentUnderline: {
106
106
  position: "absolute",
107
107
  bottom: 0,
108
108
  left: 0,
109
- height: sizing.size_050,
109
+ height: sizing.size_040,
110
110
  backgroundColor: semanticColor.action.secondary.progressive.default.foreground
111
111
  },
112
112
  underlineTransition: {
@@ -147,16 +147,16 @@ const styles = StyleSheet.create({
147
147
  listStyle: "none",
148
148
  display: "inline-flex",
149
149
  [":has(a:hover)"]: {
150
- boxShadow: `inset 0 -${sizing.size_025} 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`
150
+ boxShadow: `inset 0 -${sizing.size_020} 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`
151
151
  },
152
152
  [":has(a:active)"]: {
153
- boxShadow: `inset 0 -${sizing.size_075} 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`
153
+ boxShadow: `inset 0 -${sizing.size_060} 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`
154
154
  },
155
- paddingBlockStart: sizing.size_100,
156
- paddingBlockEnd: sizing.size_225,
155
+ paddingBlockStart: sizing.size_080,
156
+ paddingBlockEnd: sizing.size_180,
157
157
  [breakpoint.mediaQuery.mdOrLarger]: {
158
- paddingBlockStart: sizing.size_250,
159
- paddingBlockEnd: sizing.size_300
158
+ paddingBlockStart: sizing.size_200,
159
+ paddingBlockEnd: sizing.size_240
160
160
  }
161
161
  },
162
162
  current: {
@@ -192,8 +192,8 @@ const styles = StyleSheet.create({
192
192
  color: semanticColor.action.secondary.progressive.default.foreground,
193
193
  border: "none",
194
194
  outline: "none",
195
- boxShadow: `0 0 0 ${sizing.size_025} ${semanticColor.focus.inner}, 0 0 0 ${sizing.size_050} ${semanticColor.focus.outer}`,
196
- borderRadius: 0
195
+ boxShadow: `0 0 0 ${sizing.size_020} ${semanticColor.focus.inner}, 0 0 0 ${sizing.size_040} ${semanticColor.focus.outer}`,
196
+ borderRadius: border.radius.radius_0
197
197
  }
198
198
  }
199
199
  });
package/dist/index.js CHANGED
@@ -123,18 +123,18 @@ const styles$1 = aphrodite.StyleSheet.create({
123
123
  position: "relative"
124
124
  },
125
125
  list: {
126
- paddingInline: wonderBlocksTokens.sizing.size_050,
126
+ paddingInline: wonderBlocksTokens.sizing.size_040,
127
127
  paddingBlock: wonderBlocksTokens.sizing.size_0,
128
128
  margin: wonderBlocksTokens.sizing.size_0,
129
129
  display: "flex",
130
- gap: wonderBlocksTokens.sizing.size_200,
130
+ gap: wonderBlocksTokens.sizing.size_160,
131
131
  flexWrap: "nowrap"
132
132
  },
133
133
  currentUnderline: {
134
134
  position: "absolute",
135
135
  bottom: 0,
136
136
  left: 0,
137
- height: wonderBlocksTokens.sizing.size_050,
137
+ height: wonderBlocksTokens.sizing.size_040,
138
138
  backgroundColor: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground
139
139
  },
140
140
  underlineTransition: {
@@ -175,16 +175,16 @@ const styles = aphrodite.StyleSheet.create({
175
175
  listStyle: "none",
176
176
  display: "inline-flex",
177
177
  [":has(a:hover)"]: {
178
- boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_025} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}`
178
+ boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_020} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}`
179
179
  },
180
180
  [":has(a:active)"]: {
181
- boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_075} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}`
181
+ boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_060} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}`
182
182
  },
183
- paddingBlockStart: wonderBlocksTokens.sizing.size_100,
184
- paddingBlockEnd: wonderBlocksTokens.sizing.size_225,
183
+ paddingBlockStart: wonderBlocksTokens.sizing.size_080,
184
+ paddingBlockEnd: wonderBlocksTokens.sizing.size_180,
185
185
  [wonderBlocksTokens.breakpoint.mediaQuery.mdOrLarger]: {
186
- paddingBlockStart: wonderBlocksTokens.sizing.size_250,
187
- paddingBlockEnd: wonderBlocksTokens.sizing.size_300
186
+ paddingBlockStart: wonderBlocksTokens.sizing.size_200,
187
+ paddingBlockEnd: wonderBlocksTokens.sizing.size_240
188
188
  }
189
189
  },
190
190
  current: {
@@ -220,8 +220,8 @@ const styles = aphrodite.StyleSheet.create({
220
220
  color: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,
221
221
  border: "none",
222
222
  outline: "none",
223
- boxShadow: `0 0 0 ${wonderBlocksTokens.sizing.size_025} ${wonderBlocksTokens.semanticColor.focus.inner}, 0 0 0 ${wonderBlocksTokens.sizing.size_050} ${wonderBlocksTokens.semanticColor.focus.outer}`,
224
- borderRadius: 0
223
+ boxShadow: `0 0 0 ${wonderBlocksTokens.sizing.size_020} ${wonderBlocksTokens.semanticColor.focus.inner}, 0 0 0 ${wonderBlocksTokens.sizing.size_040} ${wonderBlocksTokens.semanticColor.focus.outer}`,
224
+ borderRadius: wonderBlocksTokens.border.radius.radius_0
225
225
  }
226
226
  }
227
227
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-tabs",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "design": "v1",
5
5
  "description": "Tabs are used to control what content is shown",
6
6
  "main": "dist/index.js",
@@ -14,8 +14,8 @@
14
14
  "dependencies": {
15
15
  "@babel/runtime": "^7.24.5",
16
16
  "@khanacademy/wonder-blocks-core": "12.2.1",
17
- "@khanacademy/wonder-blocks-tokens": "5.2.0",
18
- "@khanacademy/wonder-blocks-typography": "3.1.3"
17
+ "@khanacademy/wonder-blocks-typography": "3.1.3",
18
+ "@khanacademy/wonder-blocks-tokens": "7.0.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "aphrodite": "^1.2.5",