@khanacademy/wonder-blocks-dropdown 10.0.1 → 10.0.3

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 10.0.3
+
+### Patch Changes
+
+- Updated dependencies [2656fd4]
+- Updated dependencies [7bbf311]
+- Updated dependencies [6018552]
+- Updated dependencies [7bbf311]
+- Updated dependencies [7f79943]
+    - @khanacademy/wonder-blocks-tokens@9.0.0
+    - @khanacademy/wonder-blocks-pill@3.1.10
+    - @khanacademy/wonder-blocks-cell@4.1.10
+    - @khanacademy/wonder-blocks-clickable@7.0.3
+    - @khanacademy/wonder-blocks-layout@3.1.9
+    - @khanacademy/wonder-blocks-modal@7.1.11
+    - @khanacademy/wonder-blocks-search-field@5.1.11
+
+## 10.0.2
+
+### Patch Changes
+
+- e63adea: Update `border.width` tokens to use new naming conventions.
+- Updated dependencies [e63adea]
+- Updated dependencies [e63adea]
+    - @khanacademy/wonder-blocks-tokens@8.0.0
+    - @khanacademy/wonder-blocks-clickable@7.0.2
+    - @khanacademy/wonder-blocks-cell@4.1.9
+    - @khanacademy/wonder-blocks-layout@3.1.8
+    - @khanacademy/wonder-blocks-modal@7.1.10
+    - @khanacademy/wonder-blocks-pill@3.1.9
+    - @khanacademy/wonder-blocks-search-field@5.1.10
+
 ## 10.0.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -226,7 +226,7 @@ const styles$9 = StyleSheet.create({
     minWidth: spacing.medium_16,
     height: spacing.medium_16,
     borderRadius: 3,
-    borderWidth: border.width.hairline,
+    borderWidth: border.width.thin,
     borderStyle: "solid",
     borderColor: theme$6.checkbox.color.default.border
   },
@@ -1871,9 +1871,9 @@ const _generateStyles = (placeholder, error) => {
   const actionType = error ? "destructive" : "progressive";
   const action = semanticColor.action.secondary[actionType];
   const sharedOutlineStyling = {
-    outlineOffset: -border.width.thin,
+    outlineOffset: `calc(${border.width.medium} * -1)`,
     outlineStyle: "solid",
-    outlineWidth: border.width.thin
+    outlineWidth: border.width.medium
   };
   const focusStyling = _extends({}, sharedOutlineStyling, {
     outlineColor: semanticColor.focus.outer
@@ -1891,13 +1891,13 @@ const _generateStyles = (placeholder, error) => {
     default: {
       background: currentState.background,
       borderColor: currentState.border,
-      borderWidth: border.width.hairline,
+      borderWidth: border.width.thin,
       color: placeholder ? semanticColor.text.secondary : currentState.foreground,
       ":hover:not([aria-disabled=true])": hoverStyling,
       ["@media not (hover: hover)"]: {
         ":hover:not([aria-disabled=true])": {
           borderColor: currentState.border,
-          borderWidth: border.width.hairline,
+          borderWidth: border.width.thin,
           paddingLeft: spacing.medium_16,
           paddingRight: spacing.small_12
         }
@@ -3342,7 +3342,7 @@ const styles = StyleSheet.create({
   listbox: {
     backgroundColor: theme.listbox.color.default.background,
     borderRadius: border.radius.radius_040,
-    border: `solid ${border.width.hairline}px ${theme.listbox.color.default.border}`,
+    border: `solid ${border.width.thin} ${theme.listbox.color.default.border}`,
     boxShadow: `0px ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0px ${color.offBlack8}`,
     maxHeight: "var(--popper-max-height)",
     overflowY: "auto"

package/dist/index.js

@@ -261,7 +261,7 @@ const styles$9 = aphrodite.StyleSheet.create({
     minWidth: wonderBlocksTokens.spacing.medium_16,
     height: wonderBlocksTokens.spacing.medium_16,
     borderRadius: 3,
-    borderWidth: wonderBlocksTokens.border.width.hairline,
+    borderWidth: wonderBlocksTokens.border.width.thin,
     borderStyle: "solid",
     borderColor: theme$6.checkbox.color.default.border
   },
@@ -1906,9 +1906,9 @@ const _generateStyles = (placeholder, error) => {
   const actionType = error ? "destructive" : "progressive";
   const action = wonderBlocksTokens.semanticColor.action.secondary[actionType];
   const sharedOutlineStyling = {
-    outlineOffset: -wonderBlocksTokens.border.width.thin,
+    outlineOffset: `calc(${wonderBlocksTokens.border.width.medium} * -1)`,
     outlineStyle: "solid",
-    outlineWidth: wonderBlocksTokens.border.width.thin
+    outlineWidth: wonderBlocksTokens.border.width.medium
   };
   const focusStyling = _extends__default["default"]({}, sharedOutlineStyling, {
     outlineColor: wonderBlocksTokens.semanticColor.focus.outer
@@ -1926,13 +1926,13 @@ const _generateStyles = (placeholder, error) => {
     default: {
       background: currentState.background,
       borderColor: currentState.border,
-      borderWidth: wonderBlocksTokens.border.width.hairline,
+      borderWidth: wonderBlocksTokens.border.width.thin,
       color: placeholder ? wonderBlocksTokens.semanticColor.text.secondary : currentState.foreground,
       ":hover:not([aria-disabled=true])": hoverStyling,
       ["@media not (hover: hover)"]: {
         ":hover:not([aria-disabled=true])": {
           borderColor: currentState.border,
-          borderWidth: wonderBlocksTokens.border.width.hairline,
+          borderWidth: wonderBlocksTokens.border.width.thin,
           paddingLeft: wonderBlocksTokens.spacing.medium_16,
           paddingRight: wonderBlocksTokens.spacing.small_12
         }
@@ -3377,7 +3377,7 @@ const styles = aphrodite.StyleSheet.create({
   listbox: {
     backgroundColor: theme.listbox.color.default.background,
     borderRadius: wonderBlocksTokens.border.radius.radius_040,
-    border: `solid ${wonderBlocksTokens.border.width.hairline}px ${theme.listbox.color.default.border}`,
+    border: `solid ${wonderBlocksTokens.border.width.thin} ${theme.listbox.color.default.border}`,
     boxShadow: `0px ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0px ${wonderBlocksTokens.color.offBlack8}`,
     maxHeight: "var(--popper-max-height)",
     overflowY: "auto"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "10.0.1",
+  "version": "10.0.3",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -14,16 +14,16 @@
   "dependencies": {
     "@babel/runtime": "^7.24.5",
     "@khanacademy/wonder-blocks-announcer": "1.0.1",
-    "@khanacademy/wonder-blocks-cell": "4.1.8",
-    "@khanacademy/wonder-blocks-clickable": "7.0.1",
+    "@khanacademy/wonder-blocks-cell": "4.1.10",
+    "@khanacademy/wonder-blocks-clickable": "7.0.3",
     "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
-    "@khanacademy/wonder-blocks-layout": "3.1.7",
-    "@khanacademy/wonder-blocks-modal": "7.1.9",
-    "@khanacademy/wonder-blocks-pill": "3.1.8",
-    "@khanacademy/wonder-blocks-search-field": "5.1.9",
+    "@khanacademy/wonder-blocks-layout": "3.1.9",
+    "@khanacademy/wonder-blocks-modal": "7.1.11",
+    "@khanacademy/wonder-blocks-pill": "3.1.10",
+    "@khanacademy/wonder-blocks-search-field": "5.1.11",
     "@khanacademy/wonder-blocks-timing": "7.0.2",
-    "@khanacademy/wonder-blocks-tokens": "7.0.0",
+    "@khanacademy/wonder-blocks-tokens": "9.0.0",
     "@khanacademy/wonder-blocks-typography": "3.1.3"
   },
   "peerDependencies": {