@khanacademy/wonder-blocks-link 9.2.0 → 9.2.1

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-link@9.2.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-link
+> @khanacademy/wonder-blocks-link@9.2.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-link
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-link/dist/css

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-link
 
+## 9.2.1
+
+### Patch Changes
+
+- aa6ad92: Move away from using `foreground.inverse` and `border.inverse` tokens in favour of the new knockout tokens
+- Updated dependencies [5a02279]
+- Updated dependencies [aa6ad92]
+- Updated dependencies [aa6ad92]
+- Updated dependencies [aa6ad92]
+    - @khanacademy/wonder-blocks-tokens@12.2.0
+    - @khanacademy/wonder-blocks-clickable@7.1.23
+    - @khanacademy/wonder-blocks-styles@0.2.29
+    - @khanacademy/wonder-blocks-icon@5.2.17
+    - @khanacademy/wonder-blocks-typography@4.2.19
+
 ## 9.2.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -13,7 +13,7 @@ var themeDefault = {root:{font:{family:"inherit",weight:"inherit"}}};
 
 var theme = mapValuesToCssVars(themeDefault,"--wb-c-link-");
 
-const StyledA=addStyle("a");const StyledLink=addStyle(Link$1);const LinkCore=React.forwardRef(function LinkCore(props,ref){const inRouterContext=useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsx(PhosphorIcon,{icon:externalLinkIcon,size:"small",style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...endIcon.props});}const linkContent=jsxs(Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=StyleSheet.create({startIcon:{marginInlineEnd:spacing.xxxSmall_4},endIcon:{marginInlineStart:spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const states={color:{default:{rest:{foreground:semanticColor.link.rest},hover:{foreground:semanticColor.link.hover},focus:{border:semanticColor.focus.outer},press:{foreground:semanticColor.link.press}},inverse:{rest:{foreground:semanticColor.core.foreground.inverse.strong},hover:{foreground:semanticColor.core.foreground.inverse.strong},focus:{border:semanticColor.core.border.inverse.strong},press:{foreground:color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?states.color.inverse:states.color.default;const focusStyling={...focusStyles.focus[":focus-visible"],borderRadius:border.radius.radius_010,outlineOffset:border.width.medium};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid",textUnderlineOffset:font.textDecoration.underlineOffset};const newStyles={rest:{color:variant.rest.foreground,":hover":{textDecoration:"underline currentcolor solid",color:variant.hover.foreground,textUnderlineOffset:font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:font.textDecoration.thickness,textUnderlineOffset:font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
+const StyledA=addStyle("a");const StyledLink=addStyle(Link$1);const LinkCore=React.forwardRef(function LinkCore(props,ref){const inRouterContext=useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsx(PhosphorIcon,{icon:externalLinkIcon,size:"small",style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...endIcon.props});}const linkContent=jsxs(Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=StyleSheet.create({startIcon:{marginInlineEnd:spacing.xxxSmall_4},endIcon:{marginInlineStart:spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const states={color:{default:{rest:{foreground:semanticColor.link.rest},hover:{foreground:semanticColor.link.hover},focus:{border:semanticColor.focus.outer},press:{foreground:semanticColor.link.press}},inverse:{rest:{foreground:semanticColor.core.foreground.knockout.default},hover:{foreground:semanticColor.core.foreground.knockout.default},press:{foreground:color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?states.color.inverse:states.color.default;const focusStyling={...focusStyles.focus[":focus-visible"],borderRadius:border.radius.radius_010,outlineOffset:border.width.medium};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid",textUnderlineOffset:font.textDecoration.underlineOffset};const newStyles={rest:{color:variant.rest.foreground,":hover":{textDecoration:"underline currentcolor solid",color:variant.hover.foreground,textUnderlineOffset:font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:font.textDecoration.thickness,textUnderlineOffset:font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
 
 const Link=React.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,light=false,viewTransition=false,...sharedProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);if(beforeNav){return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}else {return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}});
 

package/dist/index.js

@@ -38,7 +38,7 @@ var themeDefault = {root:{font:{family:"inherit",weight:"inherit"}}};
 
 var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-link-");
 
-const StyledA=wonderBlocksCore.addStyle("a");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const LinkCore=React__namespace.forwardRef(function LinkCore(props,ref){const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:externalLinkIcon__default["default"],size:"small",style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...endIcon.props});}const linkContent=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=aphrodite.StyleSheet.create({startIcon:{marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},endIcon:{marginInlineStart:wonderBlocksTokens.spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=aphrodite.StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const states={color:{default:{rest:{foreground:wonderBlocksTokens.semanticColor.link.rest},hover:{foreground:wonderBlocksTokens.semanticColor.link.hover},focus:{border:wonderBlocksTokens.semanticColor.focus.outer},press:{foreground:wonderBlocksTokens.semanticColor.link.press}},inverse:{rest:{foreground:wonderBlocksTokens.semanticColor.core.foreground.inverse.strong},hover:{foreground:wonderBlocksTokens.semanticColor.core.foreground.inverse.strong},focus:{border:wonderBlocksTokens.semanticColor.core.border.inverse.strong},press:{foreground:wonderBlocksTokens.color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?states.color.inverse:states.color.default;const focusStyling={...wonderBlocksStyles.focusStyles.focus[":focus-visible"],borderRadius:wonderBlocksTokens.border.radius.radius_010,outlineOffset:wonderBlocksTokens.border.width.medium};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid",textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset};const newStyles={rest:{color:variant.rest.foreground,":hover":{textDecoration:"underline currentcolor solid",color:variant.hover.foreground,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:wonderBlocksTokens.font.textDecoration.thickness,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
+const StyledA=wonderBlocksCore.addStyle("a");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const LinkCore=React__namespace.forwardRef(function LinkCore(props,ref){const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:externalLinkIcon__default["default"],size:"small",style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...endIcon.props});}const linkContent=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=aphrodite.StyleSheet.create({startIcon:{marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},endIcon:{marginInlineStart:wonderBlocksTokens.spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=aphrodite.StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const states={color:{default:{rest:{foreground:wonderBlocksTokens.semanticColor.link.rest},hover:{foreground:wonderBlocksTokens.semanticColor.link.hover},focus:{border:wonderBlocksTokens.semanticColor.focus.outer},press:{foreground:wonderBlocksTokens.semanticColor.link.press}},inverse:{rest:{foreground:wonderBlocksTokens.semanticColor.core.foreground.knockout.default},hover:{foreground:wonderBlocksTokens.semanticColor.core.foreground.knockout.default},press:{foreground:wonderBlocksTokens.color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?states.color.inverse:states.color.default;const focusStyling={...wonderBlocksStyles.focusStyles.focus[":focus-visible"],borderRadius:wonderBlocksTokens.border.radius.radius_010,outlineOffset:wonderBlocksTokens.border.width.medium};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid",textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset};const newStyles={rest:{color:variant.rest.foreground,":hover":{textDecoration:"underline currentcolor solid",color:variant.hover.foreground,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:wonderBlocksTokens.font.textDecoration.thickness,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
 
 const Link=React__namespace.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,light=false,viewTransition=false,...sharedProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);if(beforeNav){return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}else {return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "9.2.0",
+  "version": "9.2.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -20,12 +20,12 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "7.1.22",
+    "@khanacademy/wonder-blocks-clickable": "7.1.23",
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-icon": "5.2.16",
-    "@khanacademy/wonder-blocks-tokens": "12.1.0",
-    "@khanacademy/wonder-blocks-typography": "4.2.18",
-    "@khanacademy/wonder-blocks-styles": "0.2.28"
+    "@khanacademy/wonder-blocks-icon": "5.2.17",
+    "@khanacademy/wonder-blocks-tokens": "12.2.0",
+    "@khanacademy/wonder-blocks-typography": "4.2.19",
+    "@khanacademy/wonder-blocks-styles": "0.2.29"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",