@khanacademy/wonder-blocks-button 4.2.0 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-button
 
+## 4.2.1
+
+### Patch Changes
+
+-   a194f5e2: - Fix default borderRadius value.
+    -   Fix secondary pressed background color (to support action and destructive buttons).
+    -   Change fontWeight for khanmigo theme (bold -> regular).
+
 ## 4.2.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -59,7 +59,10 @@ const theme$1 = {
         default: "none",
         inverse: "none",
         focus: tokens.color.white,
-        active: tokens.color.fadedBlue
+        active: {
+          action: tokens.color.fadedBlue,
+          critical: tokens.color.fadedRed
+        }
       },
       tertiary: {
         hover: tokens.color.white
@@ -97,7 +100,7 @@ const theme$1 = {
       disabled: tokens.border.width.thin
     },
     radius: {
-      default: tokens.border.radius.small_3,
+      default: tokens.border.radius.medium_4,
       tertiary: tokens.border.radius.xSmall_2,
       small: tokens.border.radius.small_3,
       large: tokens.border.radius.large_6
@@ -127,6 +130,9 @@ const theme$1 = {
     },
     lineHeight: {
       large: tokens.font.lineHeight.medium
+    },
+    weight: {
+      default: tokens.font.weight.bold
     }
   }
 };
@@ -136,7 +142,10 @@ const theme = mergeTheme(theme$1, {
     bg: {
       secondary: {
         default: tokens.color.offWhite,
-        active: tokens.color.fadedBlue8,
+        active: {
+          action: tokens.color.fadedBlue8,
+          critical: tokens.color.fadedRed8
+        },
         focus: tokens.color.offWhite
       }
     },
@@ -156,6 +165,11 @@ const theme = mergeTheme(theme$1, {
     width: {
       focused: tokens.border.width.hairline
     }
+  },
+  font: {
+    weight: {
+      default: tokens.font.weight.regular
+    }
   }
 });
 
@@ -295,7 +309,7 @@ const themedSharedStyles = theme => ({
   },
   text: {
     alignItems: "center",
-    fontWeight: "bold",
+    fontWeight: theme.font.weight.default,
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -359,6 +373,7 @@ const _generateStyles = (buttonColor = "default", kind, light, iconWidth, size,
   } else if (kind === "secondary") {
     const horizontalPadding = padding - (theme.border.width.focused - 1);
     const secondaryBorderColor = buttonColor === "destructive" ? theme.color.border.secondary.critical : theme.color.border.secondary.action;
+    const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
     newStyles = {
       default: {
         background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.default,
@@ -377,7 +392,7 @@ const _generateStyles = (buttonColor = "default", kind, light, iconWidth, size,
         paddingRight: horizontalPadding
       },
       active: {
-        background: light ? activeColor : theme.color.bg.secondary.active,
+        background: light ? activeColor : secondaryActiveColor,
         color: light ? fadedColor : activeColor,
         borderColor: light ? fadedColor : activeColor,
         borderWidth: theme.border.width.focused,

package/dist/index.js

@@ -84,7 +84,10 @@ const theme$1 = {
         default: "none",
         inverse: "none",
         focus: wonderBlocksTheming.tokens.color.white,
-        active: wonderBlocksTheming.tokens.color.fadedBlue
+        active: {
+          action: wonderBlocksTheming.tokens.color.fadedBlue,
+          critical: wonderBlocksTheming.tokens.color.fadedRed
+        }
       },
       tertiary: {
         hover: wonderBlocksTheming.tokens.color.white
@@ -122,7 +125,7 @@ const theme$1 = {
       disabled: wonderBlocksTheming.tokens.border.width.thin
     },
     radius: {
-      default: wonderBlocksTheming.tokens.border.radius.small_3,
+      default: wonderBlocksTheming.tokens.border.radius.medium_4,
       tertiary: wonderBlocksTheming.tokens.border.radius.xSmall_2,
       small: wonderBlocksTheming.tokens.border.radius.small_3,
       large: wonderBlocksTheming.tokens.border.radius.large_6
@@ -152,6 +155,9 @@ const theme$1 = {
     },
     lineHeight: {
       large: wonderBlocksTheming.tokens.font.lineHeight.medium
+    },
+    weight: {
+      default: wonderBlocksTheming.tokens.font.weight.bold
     }
   }
 };
@@ -161,7 +167,10 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
     bg: {
       secondary: {
         default: wonderBlocksTheming.tokens.color.offWhite,
-        active: wonderBlocksTheming.tokens.color.fadedBlue8,
+        active: {
+          action: wonderBlocksTheming.tokens.color.fadedBlue8,
+          critical: wonderBlocksTheming.tokens.color.fadedRed8
+        },
         focus: wonderBlocksTheming.tokens.color.offWhite
       }
     },
@@ -181,6 +190,11 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
     width: {
       focused: wonderBlocksTheming.tokens.border.width.hairline
     }
+  },
+  font: {
+    weight: {
+      default: wonderBlocksTheming.tokens.font.weight.regular
+    }
   }
 });
 
@@ -320,7 +334,7 @@ const themedSharedStyles = theme => ({
   },
   text: {
     alignItems: "center",
-    fontWeight: "bold",
+    fontWeight: theme.font.weight.default,
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -384,6 +398,7 @@ const _generateStyles = (buttonColor = "default", kind, light, iconWidth, size,
   } else if (kind === "secondary") {
     const horizontalPadding = padding - (theme.border.width.focused - 1);
     const secondaryBorderColor = buttonColor === "destructive" ? theme.color.border.secondary.critical : theme.color.border.secondary.action;
+    const secondaryActiveColor = buttonColor === "destructive" ? theme.color.bg.secondary.active.critical : theme.color.bg.secondary.active.action;
     newStyles = {
       default: {
         background: light ? theme.color.bg.secondary.inverse : theme.color.bg.secondary.default,
@@ -402,7 +417,7 @@ const _generateStyles = (buttonColor = "default", kind, light, iconWidth, size,
         paddingRight: horizontalPadding
       },
       active: {
-        background: light ? activeColor : theme.color.bg.secondary.active,
+        background: light ? activeColor : secondaryActiveColor,
         color: light ? fadedColor : activeColor,
         borderColor: light ? fadedColor : activeColor,
         borderWidth: theme.border.width.focused,

package/dist/themes/default.d.ts

@@ -26,7 +26,10 @@ declare const theme: {
                 default: string;
                 inverse: string;
                 focus: string;
-                active: string;
+                active: {
+                    action: string;
+                    critical: string;
+                };
             };
             tertiary: {
                 hover: string;
@@ -107,6 +110,9 @@ declare const theme: {
         lineHeight: {
             large: number;
         };
+        weight: {
+            default: number;
+        };
     };
 };
 export default theme;

package/dist/themes/khanmigo.d.ts

@@ -23,7 +23,10 @@ declare const theme: {
                 default: string;
                 inverse: string;
                 focus: string;
-                active: string;
+                active: {
+                    action: string;
+                    critical: string;
+                };
             };
             tertiary: {
                 hover: string;
@@ -92,6 +95,9 @@ declare const theme: {
         lineHeight: {
             large: number;
         };
+        weight: {
+            default: number;
+        };
     };
 };
 export default theme;

package/dist/themes/themed-button.d.ts

@@ -30,7 +30,10 @@ export declare const ButtonThemeContext: React.Context<{
                 default: string;
                 inverse: string;
                 focus: string;
-                active: string;
+                active: {
+                    action: string;
+                    critical: string;
+                };
             };
             tertiary: {
                 hover: string;
@@ -99,6 +102,9 @@ export declare const ButtonThemeContext: React.Context<{
         lineHeight: {
             large: number;
         };
+        weight: {
+            default: number;
+        };
     };
 }>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"