@khanacademy/wonder-blocks-icon-button - npm Package Compare versions

Comparing version 0.0.0-PR2090-20231019161509 to 0.0.0-PR2091-20231019164556

CHANGELOG.md

 # @khanacademy/wonder-blocks-icon-button
 
-## 0.0.0-PR2090-20231019161509
+## 0.0.0-PR2091-20231019164556
 
@@ -9,2 +9,3 @@ ### Minor Changes
 -   343e092f: Switch to pseudo-classes (`:hover, :focus-visible, :active`)
+-   9f10cd12: Add khanmigo theme to `IconButton`
 
@@ -11,0 +12,0 @@ ## 5.0.0

dist/es/index.js

@@ -8,3 +8,3 @@ import * as React from 'react';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
-import { tokens, createThemeContext, ThemeSwitcherContext, useScopedTheme } from '@khanacademy/wonder-blocks-theming';
+import { tokens, mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme } from '@khanacademy/wonder-blocks-theming';
 
@@ -55,7 +55,24 @@ function _extends() {
 
-const theme = {
+const theme$1 = {
   color: {
+    bg: {
+      hovered: "transparent",
+      active: "transparent",
+      disabled: "transparent",
+      filled: {
+        action: {
+          hovered: "transparent",
+          active: "transparent"
+        },
+        critical: {
+          hovered: "transparent",
+          active: "transparent"
+        }
+      }
+    },
     stroke: {
-      disabled: tokens.color.offBlack32,
-      disabledInverse: tokens.color.white50,
+      disabled: {
+        default: tokens.color.offBlack32,
+        inverse: tokens.color.white50
+      },
       inverse: tokens.color.white,
@@ -73,3 +90,14 @@ action: {
       primary: {
-        inverse: tokens.color.white
+        action: {
+          hovered: tokens.color.blue,
+          active: tokens.color.activeBlue
+        },
+        critical: {
+          hovered: tokens.color.red,
+          active: tokens.color.activeRed
+        },
+        inverse: {
+          default: tokens.color.white,
+          hovered: tokens.color.white
+        }
       },
@@ -81,2 +109,12 @@ secondary: {
         default: tokens.color.offBlack64
+      },
+      filled: {
+        action: {
+          hovered: tokens.color.blue,
+          active: tokens.color.activeBlue
+        },
+        critical: {
+          hovered: tokens.color.red,
+          active: tokens.color.activeRed
+        }
       }
@@ -87,3 +125,6 @@ }
     width: {
-      default: tokens.border.width.thin
+      default: tokens.border.width.thin,
+      active: tokens.border.width.none,
+      hovered: tokens.border.width.thin,
+      hoveredInverse: tokens.border.width.thin
     },
@@ -96,11 +137,68 @@ radius: {
 
+const theme = mergeTheme(theme$1, {
+  color: {
+    bg: {
+      hovered: tokens.color.white,
+      active: tokens.color.white64,
+      filled: {
+        action: {
+          hovered: tokens.color.blue,
+          active: tokens.color.activeBlue
+        },
+        critical: {
+          hovered: tokens.color.red,
+          active: tokens.color.activeRed
+        }
+      }
+    },
+    stroke: {
+      action: {
+        inverse: tokens.color.eggplant
+      },
+      critical: {
+        inverse: tokens.color.eggplant
+      },
+      primary: {
+        action: {
+          hovered: tokens.color.eggplant,
+          active: tokens.color.eggplant
+        },
+        critical: {
+          hovered: tokens.color.eggplant,
+          active: tokens.color.eggplant
+        },
+        inverse: {
+          hovered: tokens.color.eggplant
+        }
+      },
+      filled: {
+        action: {
+          hovered: tokens.color.white,
+          active: tokens.color.white
+        },
+        critical: {
+          hovered: tokens.color.white,
+          active: tokens.color.white
+        }
+      }
+    }
+  },
+  border: {
+    width: {
+      hovered: tokens.border.width.none,
+      hoveredInverse: tokens.border.width.none
+    }
+  }
+});
+
 const themes = {
-  default: theme
+  default: theme$1,
+  khanmigo: theme
 };
-const IconButtonThemeContext = createThemeContext(theme);
+const IconButtonThemeContext = createThemeContext(theme$1);
 function ThemedIconButton(props) {
   const currentTheme = React.useContext(ThemeSwitcherContext);
-  const theme$1 = themes[currentTheme] || theme;
+  const theme = themes[currentTheme] || theme$1;
   return React.createElement(IconButtonThemeContext.Provider, {
-    value: theme$1
+    value: theme
   }, props.children);
@@ -200,13 +298,33 @@ }
 const styles = {};
-function getStylesByKind(kind, theme, color, light) {
+function getStylesByKind(kind, theme, color, light, buttonColor) {
   switch (kind) {
     case "primary":
+      const primaryHoveredColor = buttonColor === "destructive" ? theme.color.stroke.primary.critical.hovered : theme.color.stroke.primary.action.hovered;
       return {
         ":hover": {
+          backgroundColor: theme.color.bg.hovered,
+          color: light ? theme.color.stroke.primary.inverse.hovered : primaryHoveredColor,
           outlineColor: light ? theme.color.stroke.inverse : color,
           outlineOffset: 1,
           outlineStyle: "solid",
-          outlineWidth: theme.border.width.default
+          outlineWidth: light ? theme.border.width.hoveredInverse : theme.border.width.hovered
+        },
+        ":active": {
+          backgroundColor: theme.color.bg.active
         }
       };
+    case "secondary":
+    case "tertiary":
+      return {
+        ":hover": {
+          backgroundColor: buttonColor === "destructive" ? theme.color.bg.filled.critical.hovered : theme.color.bg.filled.action.hovered,
+          color: buttonColor === "destructive" ? theme.color.stroke.filled.critical.hovered : theme.color.stroke.filled.action.hovered,
+          outlineWidth: theme.border.width.active
+        },
+        ":active": {
+          backgroundColor: buttonColor === "destructive" ? theme.color.bg.filled.critical.active : theme.color.bg.filled.action.active,
+          color: buttonColor === "destructive" ? theme.color.stroke.filled.critical.active : theme.color.stroke.filled.action.active,
+          outlineWidth: theme.border.width.active
+        }
+      };
     default:
@@ -232,3 +350,3 @@ return {
       case "primary":
-        return light ? theme.color.stroke.primary.inverse : color;
+        return light ? theme.color.stroke.primary.inverse.default : color;
       case "secondary":
@@ -243,8 +361,11 @@ return theme.color.stroke.secondary.default;
   const pixelsForSize = targetPixelsForSize(size);
+  const kindOverrides = getStylesByKind(kind, theme, color, light, buttonColor);
   const activeInverseColor = buttonColor === "destructive" ? theme.color.stroke.critical.inverse : theme.color.stroke.action.inverse;
   const activeColor = buttonColor === "destructive" ? theme.color.stroke.critical.active : theme.color.stroke.action.active;
-  const kindOverrides = getStylesByKind(kind, theme, color, light);
+  const defaultStrokeColor = light ? theme.color.stroke.inverse : color;
+  const disabledStrokeColor = light ? theme.color.stroke.disabled.inverse : theme.color.stroke.disabled.default;
   const disabledStatesStyles = {
-    color: light ? theme.color.stroke.disabledInverse : theme.color.stroke.disabled,
-    outlineColor: light ? theme.color.stroke.disabledInverse : theme.color.stroke.disabled
+    backgroundColor: theme.color.bg.disabled,
+    color: disabledStrokeColor,
+    outlineColor: disabledStrokeColor
   };
@@ -257,4 +378,10 @@ const newStyles = {
       borderRadius: theme.border.radius.default,
+      ":hover": _extends({
+        boxShadow: "none",
+        color: defaultStrokeColor,
+        borderRadius: theme.border.radius.default,
+        outlineWidth: theme.border.width.default
+      }, kindOverrides[":hover"]),
       ":focus": {
-        boxShadow: `0 0 0 ${theme.border.width.default}px ${light ? theme.color.stroke.inverse : color}`,
+        boxShadow: `0 0 0 ${theme.border.width.default}px ${defaultStrokeColor}`,
         borderRadius: theme.border.radius.default
@@ -267,5 +394,4 @@ },
         boxShadow: "none",
-        color: light ? theme.color.stroke.inverse : color,
         outlineWidth: theme.border.width.default,
-        outlineColor: light ? theme.color.stroke.inverse : color,
+        outlineColor: defaultStrokeColor,
         outlineOffset: 1,
@@ -275,7 +401,2 @@ outlineStyle: "solid",
       }, kindOverrides[":focus-visible"]),
-      ":hover": _extends({
-        boxShadow: "none",
-        color: light ? theme.color.stroke.inverse : color,
-        borderRadius: theme.border.radius.default
-      }, kindOverrides[":hover"]),
       ":active": _extends({
@@ -291,3 +412,3 @@ color: light ? activeInverseColor : activeColor,
     disabled: {
-      color: light ? theme.color.stroke.disabledInverse : theme.color.stroke.disabled,
+      color: disabledStrokeColor,
       cursor: "not-allowed",
@@ -301,3 +422,3 @@ ":hover": _extends({}, disabledStatesStyles, {
       ":focus": {
-        boxShadow: `0 0 0 ${theme.border.width.default}px ${light ? theme.color.stroke.disabledInverse : theme.color.stroke.disabled}`,
+        boxShadow: `0 0 0 ${theme.border.width.default}px ${disabledStrokeColor}`,
         borderRadius: theme.border.radius.default
@@ -304,0 +425,0 @@ },

dist/index.js

@@ -76,7 +76,24 @@ 'use strict';
 
-const theme = {
+const theme$1 = {
   color: {
+    bg: {
+      hovered: "transparent",
+      active: "transparent",
+      disabled: "transparent",
+      filled: {
+        action: {
+          hovered: "transparent",
+          active: "transparent"
+        },
+        critical: {
+          hovered: "transparent",
+          active: "transparent"
+        }
+      }
+    },
     stroke: {
-      disabled: wonderBlocksTheming.tokens.color.offBlack32,
-      disabledInverse: wonderBlocksTheming.tokens.color.white50,
+      disabled: {
+        default: wonderBlocksTheming.tokens.color.offBlack32,
+        inverse: wonderBlocksTheming.tokens.color.white50
+      },
       inverse: wonderBlocksTheming.tokens.color.white,
@@ -94,3 +111,14 @@ action: {
       primary: {
-        inverse: wonderBlocksTheming.tokens.color.white
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.blue,
+          active: wonderBlocksTheming.tokens.color.activeBlue
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.red,
+          active: wonderBlocksTheming.tokens.color.activeRed
+        },
+        inverse: {
+          default: wonderBlocksTheming.tokens.color.white,
+          hovered: wonderBlocksTheming.tokens.color.white
+        }
       },
@@ -102,2 +130,12 @@ secondary: {
         default: wonderBlocksTheming.tokens.color.offBlack64
+      },
+      filled: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.blue,
+          active: wonderBlocksTheming.tokens.color.activeBlue
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.red,
+          active: wonderBlocksTheming.tokens.color.activeRed
+        }
       }
@@ -108,3 +146,6 @@ }
     width: {
-      default: wonderBlocksTheming.tokens.border.width.thin
+      default: wonderBlocksTheming.tokens.border.width.thin,
+      active: wonderBlocksTheming.tokens.border.width.none,
+      hovered: wonderBlocksTheming.tokens.border.width.thin,
+      hoveredInverse: wonderBlocksTheming.tokens.border.width.thin
     },
@@ -117,11 +158,68 @@ radius: {
 
+const theme = wonderBlocksTheming.mergeTheme(theme$1, {
+  color: {
+    bg: {
+      hovered: wonderBlocksTheming.tokens.color.white,
+      active: wonderBlocksTheming.tokens.color.white64,
+      filled: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.blue,
+          active: wonderBlocksTheming.tokens.color.activeBlue
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.red,
+          active: wonderBlocksTheming.tokens.color.activeRed
+        }
+      }
+    },
+    stroke: {
+      action: {
+        inverse: wonderBlocksTheming.tokens.color.eggplant
+      },
+      critical: {
+        inverse: wonderBlocksTheming.tokens.color.eggplant
+      },
+      primary: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.eggplant,
+          active: wonderBlocksTheming.tokens.color.eggplant
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.eggplant,
+          active: wonderBlocksTheming.tokens.color.eggplant
+        },
+        inverse: {
+          hovered: wonderBlocksTheming.tokens.color.eggplant
+        }
+      },
+      filled: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.white,
+          active: wonderBlocksTheming.tokens.color.white
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.white,
+          active: wonderBlocksTheming.tokens.color.white
+        }
+      }
+    }
+  },
+  border: {
+    width: {
+      hovered: wonderBlocksTheming.tokens.border.width.none,
+      hoveredInverse: wonderBlocksTheming.tokens.border.width.none
+    }
+  }
+});
+
 const themes = {
-  default: theme
+  default: theme$1,
+  khanmigo: theme
 };
-const IconButtonThemeContext = wonderBlocksTheming.createThemeContext(theme);
+const IconButtonThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
 function ThemedIconButton(props) {
   const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
-  const theme$1 = themes[currentTheme] || theme;
+  const theme = themes[currentTheme] || theme$1;
   return React__namespace.createElement(IconButtonThemeContext.Provider, {
-    value: theme$1
+    value: theme
   }, props.children);
@@ -221,13 +319,33 @@ }
 const styles = {};
-function getStylesByKind(kind, theme, color, light) {
+function getStylesByKind(kind, theme, color, light, buttonColor) {
   switch (kind) {
     case "primary":
+      const primaryHoveredColor = buttonColor === "destructive" ? theme.color.stroke.primary.critical.hovered : theme.color.stroke.primary.action.hovered;
       return {
         ":hover": {
+          backgroundColor: theme.color.bg.hovered,
+          color: light ? theme.color.stroke.primary.inverse.hovered : primaryHoveredColor,
           outlineColor: light ? theme.color.stroke.inverse : color,
           outlineOffset: 1,
           outlineStyle: "solid",
-          outlineWidth: theme.border.width.default
+          outlineWidth: light ? theme.border.width.hoveredInverse : theme.border.width.hovered
+        },
+        ":active": {
+          backgroundColor: theme.color.bg.active
         }
       };
+    case "secondary":
+    case "tertiary":
+      return {
+        ":hover": {
+          backgroundColor: buttonColor === "destructive" ? theme.color.bg.filled.critical.hovered : theme.color.bg.filled.action.hovered,
+          color: buttonColor === "destructive" ? theme.color.stroke.filled.critical.hovered : theme.color.stroke.filled.action.hovered,
+          outlineWidth: theme.border.width.active
+        },
+        ":active": {
+          backgroundColor: buttonColor === "destructive" ? theme.color.bg.filled.critical.active : theme.color.bg.filled.action.active,
+          color: buttonColor === "destructive" ? theme.color.stroke.filled.critical.active : theme.color.stroke.filled.action.active,
+          outlineWidth: theme.border.width.active
+        }
+      };
     default:
@@ -253,3 +371,3 @@ return {
       case "primary":
-        return light ? theme.color.stroke.primary.inverse : color;
+        return light ? theme.color.stroke.primary.inverse.default : color;
       case "secondary":
@@ -264,8 +382,11 @@ return theme.color.stroke.secondary.default;
   const pixelsForSize = targetPixelsForSize(size);
+  const kindOverrides = getStylesByKind(kind, theme, color, light, buttonColor);
   const activeInverseColor = buttonColor === "destructive" ? theme.color.stroke.critical.inverse : theme.color.stroke.action.inverse;
   const activeColor = buttonColor === "destructive" ? theme.color.stroke.critical.active : theme.color.stroke.action.active;
-  const kindOverrides = getStylesByKind(kind, theme, color, light);
+  const defaultStrokeColor = light ? theme.color.stroke.inverse : color;
+  const disabledStrokeColor = light ? theme.color.stroke.disabled.inverse : theme.color.stroke.disabled.default;
   const disabledStatesStyles = {
-    color: light ? theme.color.stroke.disabledInverse : theme.color.stroke.disabled,
-    outlineColor: light ? theme.color.stroke.disabledInverse : theme.color.stroke.disabled
+    backgroundColor: theme.color.bg.disabled,
+    color: disabledStrokeColor,
+    outlineColor: disabledStrokeColor
   };
@@ -278,4 +399,10 @@ const newStyles = {
       borderRadius: theme.border.radius.default,
+      ":hover": _extends({
+        boxShadow: "none",
+        color: defaultStrokeColor,
+        borderRadius: theme.border.radius.default,
+        outlineWidth: theme.border.width.default
+      }, kindOverrides[":hover"]),
       ":focus": {
-        boxShadow: `0 0 0 ${theme.border.width.default}px ${light ? theme.color.stroke.inverse : color}`,
+        boxShadow: `0 0 0 ${theme.border.width.default}px ${defaultStrokeColor}`,
         borderRadius: theme.border.radius.default
@@ -288,5 +415,4 @@ },
         boxShadow: "none",
-        color: light ? theme.color.stroke.inverse : color,
         outlineWidth: theme.border.width.default,
-        outlineColor: light ? theme.color.stroke.inverse : color,
+        outlineColor: defaultStrokeColor,
         outlineOffset: 1,
@@ -296,7 +422,2 @@ outlineStyle: "solid",
       }, kindOverrides[":focus-visible"]),
-      ":hover": _extends({
-        boxShadow: "none",
-        color: light ? theme.color.stroke.inverse : color,
-        borderRadius: theme.border.radius.default
-      }, kindOverrides[":hover"]),
       ":active": _extends({
@@ -312,3 +433,3 @@ color: light ? activeInverseColor : activeColor,
     disabled: {
-      color: light ? theme.color.stroke.disabledInverse : theme.color.stroke.disabled,
+      color: disabledStrokeColor,
       cursor: "not-allowed",
@@ -322,3 +443,3 @@ ":hover": _extends({}, disabledStatesStyles, {
       ":focus": {
-        boxShadow: `0 0 0 ${theme.border.width.default}px ${light ? theme.color.stroke.disabledInverse : theme.color.stroke.disabled}`,
+        boxShadow: `0 0 0 ${theme.border.width.default}px ${disabledStrokeColor}`,
         borderRadius: theme.border.radius.default
@@ -325,0 +446,0 @@ },

dist/themes/default.d.ts

 declare const theme: {
     color: {
+        bg: {
+            /**
+             * Default
+             */
+            hovered: string;
+            active: string;
+            disabled: string;
+            /**
+             * Kind
+             */
+            filled: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+            };
+        };
         stroke: {
@@ -7,4 +28,6 @@ /**
              */
-            disabled: string;
-            disabledInverse: string;
+            disabled: {
+                default: string;
+                inverse: string;
+            };
             inverse: string;
@@ -28,3 +51,14 @@ /**
             primary: {
-                inverse: string;
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+                inverse: {
+                    default: string;
+                    hovered: string;
+                };
             };
@@ -37,2 +71,12 @@ secondary: {
             };
+            filled: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+            };
         };
@@ -43,2 +87,5 @@ };
             default: number;
+            active: number;
+            hovered: number;
+            hoveredInverse: number;
         };
@@ -45,0 +92,0 @@ radius: {

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

@@ -13,5 +13,25 @@ import * as React from "react";
     color: {
+        bg: {
+            hovered: string;
+            active: string;
+            disabled: string;
+            /**
+             * The themes available to the IconButton component.
+             */
+            filled: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+            };
+        };
         stroke: {
-            disabled: string;
-            disabledInverse: string;
+            disabled: {
+                default: string;
+                inverse: string;
+            };
             inverse: string;
@@ -29,3 +49,14 @@ action: {
             primary: {
-                inverse: string;
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+                inverse: {
+                    default: string;
+                    hovered: string;
+                };
             };
@@ -38,2 +69,12 @@ secondary: {
             };
+            filled: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+            };
         };
@@ -44,2 +85,5 @@ };
             default: number;
+            active: number;
+            hovered: number;
+            hoveredInverse: number;
         };
@@ -46,0 +90,0 @@ radius: {

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "0.0.0-PR2090-20231019161509",
+  "version": "0.0.0-PR2091-20231019164556",
   "design": "v1",
@@ -5,0 +5,0 @@ "publishConfig": {

src/themes/default.ts

@@ -5,2 +5,26 @@ import {tokens} from "@khanacademy/wonder-blocks-theming";
     color: {
+        bg: {
+            /**
+             * Default
+             */
+            hovered: "transparent",
+            active: "transparent",
+            disabled: "transparent",
+            /**
+             * Kind
+             */
+            // Filled icon buttons (secondary, tertiary)
+            // NOTE: Transparent in the default theme, but we want to use the
+            // filled colors for Khanmigo.
+            filled: {
+                action: {
+                    hovered: "transparent",
+                    active: "transparent",
+                },
+                critical: {
+                    hovered: "transparent",
+                    active: "transparent",
+                },
+            },
+        },
         // Shared colors for icon and borders
@@ -11,4 +35,6 @@ stroke: {
              */
-            disabled: tokens.color.offBlack32,
-            disabledInverse: tokens.color.white50,
+            disabled: {
+                default: tokens.color.offBlack32,
+                inverse: tokens.color.white50,
+            },
             // focus, hover
@@ -37,3 +63,17 @@ inverse: tokens.color.white,
             primary: {
-                inverse: tokens.color.white,
+                // primary + action
+                action: {
+                    hovered: tokens.color.blue,
+                    active: tokens.color.activeBlue,
+                },
+                // primary + critical
+                critical: {
+                    hovered: tokens.color.red,
+                    active: tokens.color.activeRed,
+                },
+                // on dark background
+                inverse: {
+                    default: tokens.color.white,
+                    hovered: tokens.color.white,
+                },
             },
@@ -46,2 +86,15 @@ secondary: {
             },
+            // Filled icon buttons (secondary, tertiary)
+            filled: {
+                // filled + action
+                action: {
+                    hovered: tokens.color.blue,
+                    active: tokens.color.activeBlue,
+                },
+                // filled + critical
+                critical: {
+                    hovered: tokens.color.red,
+                    active: tokens.color.activeRed,
+                },
+            },
         },
@@ -52,2 +105,5 @@ },
             default: tokens.border.width.thin,
+            active: tokens.border.width.none,
+            hovered: tokens.border.width.thin,
+            hoveredInverse: tokens.border.width.thin,
         },
@@ -54,0 +110,0 @@ radius: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

381549

increased by7.36%

Number of package files

24

increased by9.09%

Lines of code

2409

increased by32.22%

No dependency changes