@khanacademy/wonder-blocks-button 10.0.2 → 10.0.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 (14) hide show
  1. package/.turbo/turbo-build$colon$css.log +5 -0
  2. package/CHANGELOG.md +35 -0
  3. package/dist/components/button-core.d.ts +3 -5
  4. package/dist/components/button.d.ts +2 -1
  5. package/dist/css/vars.css +31 -0
  6. package/dist/es/index.js +6 -9
  7. package/dist/index.js +5 -8
  8. package/dist/theme/default.d.ts +74 -0
  9. package/dist/theme/index.d.ts +74 -0
  10. package/dist/util/button.types.d.ts +2 -0
  11. package/package.json +16 -8
  12. package/dist/themes/default.d.ts +0 -275
  13. package/dist/themes/khanmigo.d.ts +0 -278
  14. package/dist/themes/themed-button.d.ts +0 -289
package/.turbo/turbo-build$colon$css.log ADDED
@@ -0,0 +1,5 @@
1
+
2
+ > @khanacademy/wonder-blocks-button@10.0.4 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-button
3
+ > pnpm exec wonder-blocks-tokens .
4
+
5
+ CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-button/dist/css
package/CHANGELOG.md CHANGED
@@ -1,5 +1,40 @@
1
1
  # @khanacademy/wonder-blocks-button
2
2
 
3
+ ## 10.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - ec3c80c: Removes the `khanmigo` theme from the `Button` component. Switches theming to use CSS variables.
8
+ - 15ac1e6: Reorganizes the Button docs, tests and types to prepare for the upcoming ActivityButton component
9
+ - Updated dependencies [b1ee2b4]
10
+ - Updated dependencies [7abcccf]
11
+ - Updated dependencies [9bacc1a]
12
+ - Updated dependencies [9bacc1a]
13
+ - Updated dependencies [7abcccf]
14
+ - Updated dependencies [1c3c335]
15
+ - Updated dependencies [689f5d3]
16
+ - Updated dependencies [7d2a646]
17
+ - @khanacademy/wonder-blocks-tokens@10.4.0
18
+ - @khanacademy/wonder-blocks-clickable@7.1.5
19
+ - @khanacademy/wonder-blocks-styles@0.2.12
20
+ - @khanacademy/wonder-blocks-typography@4.1.0
21
+ - @khanacademy/wonder-blocks-progress-spinner@3.1.16
22
+
23
+ ## 10.0.3
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies [dd76e7c]
28
+ - Updated dependencies [dd76e7c]
29
+ - @khanacademy/wonder-blocks-typography@4.0.0
30
+ - @khanacademy/wonder-blocks-tokens@10.3.0
31
+ - @khanacademy/wonder-blocks-clickable@7.1.4
32
+ - @khanacademy/wonder-blocks-core@12.3.0
33
+ - @khanacademy/wonder-blocks-icon@5.1.4
34
+ - @khanacademy/wonder-blocks-progress-spinner@3.1.15
35
+ - @khanacademy/wonder-blocks-styles@0.2.11
36
+ - @khanacademy/wonder-blocks-theming@3.4.0
37
+
3
38
  ## 10.0.2
4
39
 
5
40
  ### Patch Changes
package/dist/components/button-core.d.ts CHANGED
@@ -1,9 +1,7 @@
1
1
  import * as React from "react";
2
2
  import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
3
- import { Link } from "react-router-dom-v5-compat";
4
- import type { ButtonActionType, ButtonKind, ButtonSize, ButtonProps } from "../util/button.types";
5
- import { ButtonThemeContract } from "../themes/themed-button";
3
+ import type { ButtonActionType, ButtonKind, ButtonSize, ButtonProps, ButtonRef } from "../util/button.types";
6
4
  type Props = ButtonProps & ChildrenProps & ClickableState;
7
- declare const ButtonCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
5
+ declare const ButtonCore: React.ForwardRefExoticComponent<Props & React.RefAttributes<ButtonRef>>;
8
6
  export default ButtonCore;
9
- export declare const _generateStyles: (actionType: ButtonActionType | undefined, kind: ButtonKind, size: ButtonSize, theme: ButtonThemeContract, themeName: string) => any;
7
+ export declare const _generateStyles: (actionType: ButtonActionType | undefined, kind: ButtonKind, size: ButtonSize) => any;
package/dist/components/button.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
+ import type { ButtonRef } from "../util/button.types";
2
3
  /**
3
4
  * The `Button` component is a reusable button that can be used in various
4
5
  * contexts. It can be used as a link or a button, and it supports various
@@ -39,5 +40,5 @@ declare const Button: React.ForwardRefExoticComponent<Partial<Omit<import("@khan
39
40
  onClick?: (e: React.SyntheticEvent) => unknown;
40
41
  beforeNav?: () => Promise<unknown>;
41
42
  safeWithNav?: () => Promise<unknown>;
42
- } & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | React.ForwardRefExoticComponent<import("react-router-dom-v5-compat").LinkProps & React.RefAttributes<HTMLAnchorElement>>>>;
43
+ } & React.RefAttributes<ButtonRef>>;
43
44
  export default Button;
package/dist/css/vars.css ADDED
@@ -0,0 +1,31 @@
1
+ :root {--wb-c-button-root-border-width-primary-default: var(--wb-border-width-none);
2
+ --wb-c-button-root-border-width-primary-hover: var(--wb-border-width-medium);
3
+ --wb-c-button-root-border-width-primary-press: var(--wb-border-width-medium);
4
+ --wb-c-button-root-border-width-secondary-default: var(--wb-border-width-thin);
5
+ --wb-c-button-root-border-width-secondary-hover: var(--wb-border-width-thin);
6
+ --wb-c-button-root-border-width-secondary-press: var(--wb-border-width-thin);
7
+ --wb-c-button-root-border-width-tertiary-default: var(--wb-border-width-none);
8
+ --wb-c-button-root-border-width-tertiary-hover: var(--wb-border-width-medium);
9
+ --wb-c-button-root-border-width-tertiary-press: var(--wb-border-width-medium);
10
+ --wb-c-button-root-border-offset-primary: var(--wb-border-width-medium);
11
+ --wb-c-button-root-border-offset-secondary: 0;
12
+ --wb-c-button-root-border-offset-tertiary: 0;
13
+ --wb-c-button-root-border-radius-small: var(--wb-border-radius-radius_040);
14
+ --wb-c-button-root-border-radius-medium: var(--wb-border-radius-radius_040);
15
+ --wb-c-button-root-border-radius-large: var(--wb-border-radius-radius_040);
16
+ --wb-c-button-root-sizing-height-small: var(--wb-sizing-size_320);
17
+ --wb-c-button-root-sizing-height-medium: var(--wb-sizing-size_400);
18
+ --wb-c-button-root-sizing-height-large: var(--wb-sizing-size_560);
19
+ --wb-c-button-root-sizing-underline-hover: var(--wb-sizing-size_020);
20
+ --wb-c-button-root-sizing-underline-press: var(--wb-sizing-size_010);
21
+ --wb-c-button-root-padding-medium: var(--wb-sizing-size_160);
22
+ --wb-c-button-root-padding-large: var(--wb-sizing-size_320);
23
+ --wb-c-button-root-font-size-large: 1.8rem;
24
+ --wb-c-button-root-font-lineHeight-small: var(--wb-font-lineHeight-xMedium);
25
+ --wb-c-button-root-font-lineHeight-default: var(--wb-font-lineHeight-large);
26
+ --wb-c-button-root-font-lineHeight-large: 2.6rem;
27
+ --wb-c-button-root-font-weight-default: var(--wb-font-weight-bold);
28
+ --wb-c-button-root-font-offset-default: var(--wb-sizing-size_040);
29
+ --wb-c-button-icon-margin-inline-inner: var(--wb-sizing-size_060);
30
+ --wb-c-button-icon-margin-inline-outer: calc(-1 * var(--wb-border-width-medium));
31
+ --wb-c-button-icon-padding: var(--wb-sizing-size_020);}
package/dist/es/index.js CHANGED
@@ -6,23 +6,20 @@ import { StyleSheet } from 'aphrodite';
6
6
  import { LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
7
7
  import { addStyle, View } from '@khanacademy/wonder-blocks-core';
8
8
  import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
9
- import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
10
9
  import { focusStyles } from '@khanacademy/wonder-blocks-styles';
11
- import { sizing, semanticColor, border, font, color } from '@khanacademy/wonder-blocks-tokens';
10
+ import { sizing, border, font, mapValuesToCssVars, semanticColor } from '@khanacademy/wonder-blocks-tokens';
12
11
  import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
13
12
 
14
- const textUnderlineOffset=sizing.size_040;const theme$1={root:{color:semanticColor.action,border:{width:{primary:{default:border.width.none,hover:border.width.medium,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{default:border.width.none,hover:border.width.medium,press:border.width.medium}},offset:{primary:border.width.medium,secondary:0,tertiary:0},radius:{small:border.radius.radius_040,medium:border.radius.radius_040,large:border.radius.radius_040}},sizing:{height:{small:sizing.size_320,medium:sizing.size_400,large:sizing.size_560},underline:{hover:sizing.size_020,press:sizing.size_010}},padding:{medium:sizing.size_160,large:sizing.size_320},font:{size:{large:"1.8rem"},lineHeight:{small:font.lineHeight.xMedium,default:font.lineHeight.large,large:"2.6rem"},weight:{default:font.weight.bold},offset:{default:textUnderlineOffset}}},icon:{color:{secondary:{progressive:{hover:{background:"transparent",foreground:semanticColor.action.secondary.progressive.hover.foreground}},destructive:{hover:{background:"transparent",foreground:semanticColor.action.secondary.destructive.hover.foreground}},neutral:{hover:{background:"transparent",foreground:semanticColor.action.secondary.neutral.hover.foreground}}}},border:{radius:border.radius.radius_full},margin:{inline:{inner:sizing.size_060,outer:`calc(-1 * ${border.width.medium})`}},padding:sizing.size_020}};
15
-
16
- const secondaryBgColor=color.offWhite;const theme=mergeTheme(theme$1,{root:{color:{secondary:{progressive:{default:{border:color.fadedBlue,background:secondaryBgColor},hover:{background:secondaryBgColor,foreground:semanticColor.action.secondary.progressive.default.foreground},press:{background:color.fadedBlue8}},destructive:{default:{border:color.fadedRed,background:secondaryBgColor},hover:{background:secondaryBgColor,foreground:semanticColor.action.secondary.destructive.default.foreground},press:{background:color.fadedRed8}}}},border:{radius:{medium:border.radius.radius_120,small:border.radius.radius_080,large:border.radius.radius_120}},font:{weight:{default:font.weight.regular}}},icon:{color:{secondary:{progressive:{hover:{background:color.fadedBlue16,foreground:semanticColor.action.secondary.progressive.default.foreground}},destructive:{hover:{background:color.fadedRed16,foreground:semanticColor.action.secondary.destructive.default.foreground}}}},border:{radius:border.radius.radius_full},margin:{inline:{outer:`calc(-1 * ${sizing.size_080})`}},padding:sizing.size_020}});
13
+ function ButtonIcon({icon,size,style,testId}){const commonProps={"aria-hidden":true,color:"currentColor",style:style,testId};switch(size){case"small":return jsx(PhosphorIcon,{...commonProps,size:"small",icon:icon});case"medium":default:return jsx(PhosphorIcon,{...commonProps,size:"medium",icon:icon})}}
17
14
 
18
- const themes={default:theme$1,khanmigo:theme};const ButtonThemeContext=createThemeContext(theme$1);function ThemedButton(props){const currentTheme=React.useContext(ThemeSwitcherContext);const theme=themes[currentTheme]||theme$1;return jsx(ButtonThemeContext.Provider,{value:theme,children:props.children})}
15
+ const textUnderlineOffset=sizing.size_040;const theme$1={root:{border:{width:{primary:{default:border.width.none,hover:border.width.medium,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{default:border.width.none,hover:border.width.medium,press:border.width.medium}},offset:{primary:border.width.medium,secondary:0,tertiary:0},radius:{small:border.radius.radius_040,medium:border.radius.radius_040,large:border.radius.radius_040}},sizing:{height:{small:sizing.size_320,medium:sizing.size_400,large:sizing.size_560},underline:{hover:sizing.size_020,press:sizing.size_010}},padding:{medium:sizing.size_160,large:sizing.size_320},font:{size:{large:"1.8rem"},lineHeight:{small:font.lineHeight.xMedium,default:font.lineHeight.large,large:"2.6rem"},weight:{default:font.weight.bold},offset:{default:textUnderlineOffset}}},icon:{margin:{inline:{inner:sizing.size_060,outer:`calc(-1 * ${border.width.medium})`}},padding:sizing.size_020}};
19
16
 
20
- function ButtonIcon({icon,size,style,testId}){const commonProps={"aria-hidden":true,color:"currentColor",style:style,testId};switch(size){case"small":return jsx(PhosphorIcon,{...commonProps,size:"small",icon:icon});case"medium":default:return jsx(PhosphorIcon,{...commonProps,size:"medium",icon:icon})}}
17
+ var theme = mapValuesToCssVars(theme$1,"--wb-c-button-");
21
18
 
22
19
  const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const ButtonUnstyled=React.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,id:id,role:"button",style:[styles$1.reset,style],...restProps};const inRouterContext=useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsx(StyledButton,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$1=StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});
23
20
 
24
- const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{theme,themeName}=useScopedTheme(ButtonThemeContext);const sharedStyles=useStyles(themedSharedStyles,theme);const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles(actionType,kind,size,theme,themeName);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const Label=size==="small"?LabelSmall:LabelLarge;const label=jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary,!disabled&&(focused||hovered)&&kind!=="primary"&&buttonStyles.iconWrapperHovered],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,children:contents})});const themedSharedStyles=theme=>({shared:{height:theme.root.sizing.height.medium,paddingBlock:0,paddingInline:theme.root.padding.medium},small:{borderRadius:theme.root.border.radius.small,height:theme.root.sizing.height.small},large:{borderRadius:theme.root.border.radius.large,height:theme.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme.root.font.lineHeight.small},largeText:{fontSize:theme.root.font.size.large,lineHeight:theme.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme.icon.margin.inline.outer,marginInlineEnd:theme.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme.icon.margin.inline.inner},iconWrapper:{borderRadius:theme.icon.border.radius,padding:theme.icon.padding,minWidth:"auto"},endIconWrapper:{marginInlineStart:theme.icon.margin.inline.inner,marginInlineEnd:theme.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles={};const _generateStyles=(actionType="progressive",kind,size,theme,themeName)=>{const buttonType=`${actionType}-${kind}-${size}-${themeName}`;if(styles[buttonType]){return styles[buttonType]}const padding=size==="large"?theme.root.padding.large:theme.root.padding.medium;const borderWidthKind=theme.root.border.width[kind];const outlineOffsetKind=theme.root.border.offset[kind];const themeVariant=theme.root.color[kind][actionType];const disabledState=theme.root.color[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const newStyles={default:{borderRadius:theme.root.border.radius[size],paddingInline:kind==="tertiary"?0:padding,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind==="secondary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textDecoration:"underline",textUnderlineOffset:theme.root.font.offset.default,textDecorationThickness:theme.root.sizing.underline.hover}:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":{background:themeVariant.press.background,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind==="secondary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textDecoration:"underline",textUnderlineOffset:theme.root.font.offset.default,textDecorationThickness:theme.root.sizing.underline.press}:undefined},...focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles},iconWrapperHovered:{...kind==="secondary"?{backgroundColor:theme.icon.color[kind][actionType].hover.background,color:theme.icon.color[kind][actionType].hover.foreground}:undefined}};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
21
+ const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const Label=size==="small"?LabelSmall:LabelLarge;const label=jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,children:contents})});const sharedStyles=StyleSheet.create({shared:{height:theme.root.sizing.height.medium,paddingBlock:0,paddingInline:theme.root.padding.medium},small:{borderRadius:theme.root.border.radius.small,height:theme.root.sizing.height.small},large:{borderRadius:theme.root.border.radius.large,height:theme.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme.root.font.lineHeight.small},largeText:{fontSize:theme.root.font.size.large,lineHeight:theme.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme.icon.margin.inline.outer,marginInlineEnd:theme.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme.icon.margin.inline.inner},iconWrapper:{padding:theme.icon.padding,minWidth:"auto"},endIconWrapper:{marginInlineStart:theme.icon.margin.inline.inner,marginInlineEnd:theme.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles={};const _generateStyles=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles[buttonType]){return styles[buttonType]}const padding=size==="large"?theme.root.padding.large:theme.root.padding.medium;const borderWidthKind=theme.root.border.width[kind];const outlineOffsetKind=theme.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const newStyles={default:{borderRadius:theme.root.border.radius[size],paddingInline:kind==="tertiary"?0:padding,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind==="secondary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textDecoration:"underline",textUnderlineOffset:theme.root.font.offset.default,textDecorationThickness:theme.root.sizing.underline.hover}:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":{background:themeVariant.press.background,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind==="secondary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textDecoration:"underline",textUnderlineOffset:theme.root.font.offset.default,textDecorationThickness:theme.root.sizing.underline.press}:undefined},...focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
25
22
 
26
- const Button=React.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>jsx(ThemedButton,{children:jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})})});
23
+ const Button=React.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})});
27
24
 
28
25
  export { Button as default };
package/dist/index.js CHANGED
@@ -8,7 +8,6 @@ var aphrodite = require('aphrodite');
8
8
  var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
9
9
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
10
10
  var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
11
- var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
12
11
  var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
13
12
  var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
14
13
  var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
@@ -33,18 +32,16 @@ function _interopNamespace(e) {
33
32
 
34
33
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
35
34
 
36
- const textUnderlineOffset=wonderBlocksTokens.sizing.size_040;const theme$1={root:{color:wonderBlocksTokens.semanticColor.action,border:{width:{primary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium}},offset:{primary:wonderBlocksTokens.border.width.medium,secondary:0,tertiary:0},radius:{small:wonderBlocksTokens.border.radius.radius_040,medium:wonderBlocksTokens.border.radius.radius_040,large:wonderBlocksTokens.border.radius.radius_040}},sizing:{height:{small:wonderBlocksTokens.sizing.size_320,medium:wonderBlocksTokens.sizing.size_400,large:wonderBlocksTokens.sizing.size_560},underline:{hover:wonderBlocksTokens.sizing.size_020,press:wonderBlocksTokens.sizing.size_010}},padding:{medium:wonderBlocksTokens.sizing.size_160,large:wonderBlocksTokens.sizing.size_320},font:{size:{large:"1.8rem"},lineHeight:{small:wonderBlocksTokens.font.lineHeight.xMedium,default:wonderBlocksTokens.font.lineHeight.large,large:"2.6rem"},weight:{default:wonderBlocksTokens.font.weight.bold},offset:{default:textUnderlineOffset}}},icon:{color:{secondary:{progressive:{hover:{background:"transparent",foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}},destructive:{hover:{background:"transparent",foreground:wonderBlocksTokens.semanticColor.action.secondary.destructive.hover.foreground}},neutral:{hover:{background:"transparent",foreground:wonderBlocksTokens.semanticColor.action.secondary.neutral.hover.foreground}}}},border:{radius:wonderBlocksTokens.border.radius.radius_full},margin:{inline:{inner:wonderBlocksTokens.sizing.size_060,outer:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`}},padding:wonderBlocksTokens.sizing.size_020}};
37
-
38
- const secondaryBgColor=wonderBlocksTokens.color.offWhite;const theme=wonderBlocksTheming.mergeTheme(theme$1,{root:{color:{secondary:{progressive:{default:{border:wonderBlocksTokens.color.fadedBlue,background:secondaryBgColor},hover:{background:secondaryBgColor,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground},press:{background:wonderBlocksTokens.color.fadedBlue8}},destructive:{default:{border:wonderBlocksTokens.color.fadedRed,background:secondaryBgColor},hover:{background:secondaryBgColor,foreground:wonderBlocksTokens.semanticColor.action.secondary.destructive.default.foreground},press:{background:wonderBlocksTokens.color.fadedRed8}}}},border:{radius:{medium:wonderBlocksTokens.border.radius.radius_120,small:wonderBlocksTokens.border.radius.radius_080,large:wonderBlocksTokens.border.radius.radius_120}},font:{weight:{default:wonderBlocksTokens.font.weight.regular}}},icon:{color:{secondary:{progressive:{hover:{background:wonderBlocksTokens.color.fadedBlue16,foreground:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground}},destructive:{hover:{background:wonderBlocksTokens.color.fadedRed16,foreground:wonderBlocksTokens.semanticColor.action.secondary.destructive.default.foreground}}}},border:{radius:wonderBlocksTokens.border.radius.radius_full},margin:{inline:{outer:`calc(-1 * ${wonderBlocksTokens.sizing.size_080})`}},padding:wonderBlocksTokens.sizing.size_020}});
35
+ function ButtonIcon({icon,size,style,testId}){const commonProps={"aria-hidden":true,color:"currentColor",style:style,testId};switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...commonProps,size:"small",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...commonProps,size:"medium",icon:icon})}}
39
36
 
40
- const themes={default:theme$1,khanmigo:theme};const ButtonThemeContext=wonderBlocksTheming.createThemeContext(theme$1);function ThemedButton(props){const currentTheme=React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);const theme=themes[currentTheme]||theme$1;return jsxRuntime.jsx(ButtonThemeContext.Provider,{value:theme,children:props.children})}
37
+ const textUnderlineOffset=wonderBlocksTokens.sizing.size_040;const theme$1={root:{border:{width:{primary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium}},offset:{primary:wonderBlocksTokens.border.width.medium,secondary:0,tertiary:0},radius:{small:wonderBlocksTokens.border.radius.radius_040,medium:wonderBlocksTokens.border.radius.radius_040,large:wonderBlocksTokens.border.radius.radius_040}},sizing:{height:{small:wonderBlocksTokens.sizing.size_320,medium:wonderBlocksTokens.sizing.size_400,large:wonderBlocksTokens.sizing.size_560},underline:{hover:wonderBlocksTokens.sizing.size_020,press:wonderBlocksTokens.sizing.size_010}},padding:{medium:wonderBlocksTokens.sizing.size_160,large:wonderBlocksTokens.sizing.size_320},font:{size:{large:"1.8rem"},lineHeight:{small:wonderBlocksTokens.font.lineHeight.xMedium,default:wonderBlocksTokens.font.lineHeight.large,large:"2.6rem"},weight:{default:wonderBlocksTokens.font.weight.bold},offset:{default:textUnderlineOffset}}},icon:{margin:{inline:{inner:wonderBlocksTokens.sizing.size_060,outer:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`}},padding:wonderBlocksTokens.sizing.size_020}};
41
38
 
42
- function ButtonIcon({icon,size,style,testId}){const commonProps={"aria-hidden":true,color:"currentColor",style:style,testId};switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...commonProps,size:"small",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...commonProps,size:"medium",icon:icon})}}
39
+ var theme = wonderBlocksTokens.mapValuesToCssVars(theme$1,"--wb-c-button-");
43
40
 
44
41
  const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const ButtonUnstyled=React__namespace.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,id:id,role:"button",style:[styles$1.reset,style],...restProps};const inRouterContext=reactRouterDomV5Compat.useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsxRuntime.jsx(StyledButton,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$1=aphrodite.StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});
45
42
 
46
- const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{theme,themeName}=wonderBlocksTheming.useScopedTheme(ButtonThemeContext);const sharedStyles=wonderBlocksTheming.useStyles(themedSharedStyles,theme);const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles(actionType,kind,size,theme,themeName);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const Label=size==="small"?wonderBlocksTypography.LabelSmall:wonderBlocksTypography.LabelLarge;const label=jsxRuntime.jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary,!disabled&&(focused||hovered)&&kind!=="primary"&&buttonStyles.iconWrapperHovered],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,children:contents})});const themedSharedStyles=theme=>({shared:{height:theme.root.sizing.height.medium,paddingBlock:0,paddingInline:theme.root.padding.medium},small:{borderRadius:theme.root.border.radius.small,height:theme.root.sizing.height.small},large:{borderRadius:theme.root.border.radius.large,height:theme.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme.root.font.lineHeight.small},largeText:{fontSize:theme.root.font.size.large,lineHeight:theme.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme.icon.margin.inline.outer,marginInlineEnd:theme.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme.icon.margin.inline.inner},iconWrapper:{borderRadius:theme.icon.border.radius,padding:theme.icon.padding,minWidth:"auto"},endIconWrapper:{marginInlineStart:theme.icon.margin.inline.inner,marginInlineEnd:theme.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles={};const _generateStyles=(actionType="progressive",kind,size,theme,themeName)=>{const buttonType=`${actionType}-${kind}-${size}-${themeName}`;if(styles[buttonType]){return styles[buttonType]}const padding=size==="large"?theme.root.padding.large:theme.root.padding.medium;const borderWidthKind=theme.root.border.width[kind];const outlineOffsetKind=theme.root.border.offset[kind];const themeVariant=theme.root.color[kind][actionType];const disabledState=theme.root.color[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const newStyles={default:{borderRadius:theme.root.border.radius[size],paddingInline:kind==="tertiary"?0:padding,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind==="secondary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textDecoration:"underline",textUnderlineOffset:theme.root.font.offset.default,textDecorationThickness:theme.root.sizing.underline.hover}:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":{background:themeVariant.press.background,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind==="secondary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textDecoration:"underline",textUnderlineOffset:theme.root.font.offset.default,textDecorationThickness:theme.root.sizing.underline.press}:undefined},...wonderBlocksStyles.focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles},iconWrapperHovered:{...kind==="secondary"?{backgroundColor:theme.icon.color[kind][actionType].hover.background,color:theme.icon.color[kind][actionType].hover.foreground}:undefined}};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
43
+ const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const Label=size==="small"?wonderBlocksTypography.LabelSmall:wonderBlocksTypography.LabelLarge;const label=jsxRuntime.jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,children:contents})});const sharedStyles=aphrodite.StyleSheet.create({shared:{height:theme.root.sizing.height.medium,paddingBlock:0,paddingInline:theme.root.padding.medium},small:{borderRadius:theme.root.border.radius.small,height:theme.root.sizing.height.small},large:{borderRadius:theme.root.border.radius.large,height:theme.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme.root.font.lineHeight.small},largeText:{fontSize:theme.root.font.size.large,lineHeight:theme.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme.icon.margin.inline.outer,marginInlineEnd:theme.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme.icon.margin.inline.inner},iconWrapper:{padding:theme.icon.padding,minWidth:"auto"},endIconWrapper:{marginInlineStart:theme.icon.margin.inline.inner,marginInlineEnd:theme.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles={};const _generateStyles=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles[buttonType]){return styles[buttonType]}const padding=size==="large"?theme.root.padding.large:theme.root.padding.medium;const borderWidthKind=theme.root.border.width[kind];const outlineOffsetKind=theme.root.border.offset[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const newStyles={default:{borderRadius:theme.root.border.radius[size],paddingInline:kind==="tertiary"?0:padding,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind==="secondary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textDecoration:"underline",textUnderlineOffset:theme.root.font.offset.default,textDecorationThickness:theme.root.sizing.underline.hover}:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":{background:themeVariant.press.background,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind==="secondary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textDecoration:"underline",textUnderlineOffset:theme.root.font.offset.default,textDecorationThickness:theme.root.sizing.underline.press}:undefined},...wonderBlocksStyles.focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
47
44
 
48
- const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>jsxRuntime.jsx(ThemedButton,{children:jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})})});
45
+ const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})});
49
46
 
50
47
  module.exports = Button;
package/dist/theme/default.d.ts ADDED
@@ -0,0 +1,74 @@
1
+ declare const theme: {
2
+ root: {
3
+ border: {
4
+ width: {
5
+ primary: {
6
+ default: string;
7
+ hover: string;
8
+ press: string;
9
+ };
10
+ secondary: {
11
+ default: string;
12
+ hover: string;
13
+ press: string;
14
+ };
15
+ tertiary: {
16
+ default: string;
17
+ hover: string;
18
+ press: string;
19
+ };
20
+ };
21
+ offset: {
22
+ primary: string;
23
+ secondary: number;
24
+ tertiary: number;
25
+ };
26
+ radius: {
27
+ small: string;
28
+ medium: string;
29
+ large: string;
30
+ };
31
+ };
32
+ sizing: {
33
+ height: {
34
+ small: string;
35
+ medium: string;
36
+ large: string;
37
+ };
38
+ underline: {
39
+ hover: string;
40
+ press: string;
41
+ };
42
+ };
43
+ padding: {
44
+ medium: string;
45
+ large: string;
46
+ };
47
+ font: {
48
+ size: {
49
+ large: string;
50
+ };
51
+ lineHeight: {
52
+ small: string;
53
+ default: string;
54
+ large: string;
55
+ };
56
+ weight: {
57
+ default: number;
58
+ };
59
+ offset: {
60
+ default: string;
61
+ };
62
+ };
63
+ };
64
+ icon: {
65
+ margin: {
66
+ inline: {
67
+ inner: string;
68
+ outer: string;
69
+ };
70
+ };
71
+ padding: string;
72
+ };
73
+ };
74
+ export default theme;
package/dist/theme/index.d.ts ADDED
@@ -0,0 +1,74 @@
1
+ declare const _default: {
2
+ root: {
3
+ border: {
4
+ width: {
5
+ primary: {
6
+ default: string;
7
+ hover: string;
8
+ press: string;
9
+ };
10
+ secondary: {
11
+ default: string;
12
+ hover: string;
13
+ press: string;
14
+ };
15
+ tertiary: {
16
+ default: string;
17
+ hover: string;
18
+ press: string;
19
+ };
20
+ };
21
+ offset: {
22
+ primary: string;
23
+ secondary: number;
24
+ tertiary: number;
25
+ };
26
+ radius: {
27
+ small: string;
28
+ medium: string;
29
+ large: string;
30
+ };
31
+ };
32
+ sizing: {
33
+ height: {
34
+ small: string;
35
+ medium: string;
36
+ large: string;
37
+ };
38
+ underline: {
39
+ hover: string;
40
+ press: string;
41
+ };
42
+ };
43
+ padding: {
44
+ medium: string;
45
+ large: string;
46
+ };
47
+ font: {
48
+ size: {
49
+ large: string;
50
+ };
51
+ lineHeight: {
52
+ small: string;
53
+ default: string;
54
+ large: string;
55
+ };
56
+ weight: {
57
+ default: number;
58
+ };
59
+ offset: {
60
+ default: string;
61
+ };
62
+ };
63
+ };
64
+ icon: {
65
+ margin: {
66
+ inline: {
67
+ inner: string;
68
+ outer: string;
69
+ };
70
+ };
71
+ padding: string;
72
+ };
73
+ };
74
+ export default _default;
package/dist/util/button.types.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as React from "react";
2
2
  import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
3
3
  import type { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
4
+ import { Link } from "react-router-dom-v5-compat";
4
5
  export type ButtonActionType = "progressive" | "destructive" | "neutral";
5
6
  export type ButtonKind = "primary" | "secondary" | "tertiary";
6
7
  export type ButtonSize = "small" | "medium" | "large";
8
+ export type ButtonRef = typeof Link | HTMLButtonElement | HTMLAnchorElement;
7
9
  export type ButtonProps =
8
10
  /**
9
11
  * aria-label should be used when `spinner={true}` to let people using screen
package/package.json CHANGED
@@ -1,25 +1,32 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-button",
3
- "version": "10.0.2",
3
+ "version": "10.0.4",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
8
8
  "description": "",
9
+ "exports": {
10
+ ".": {
11
+ "import": "./dist/es/index.js",
12
+ "require": "./dist/index.js",
13
+ "types": "./dist/index.d.ts"
14
+ },
15
+ "./styles.css": "./dist/css/vars.css"
16
+ },
9
17
  "main": "dist/index.js",
10
18
  "module": "dist/es/index.js",
11
19
  "types": "dist/index.d.ts",
12
20
  "author": "",
13
21
  "license": "MIT",
14
22
  "dependencies": {
15
- "@khanacademy/wonder-blocks-clickable": "7.1.3",
23
+ "@khanacademy/wonder-blocks-clickable": "7.1.5",
16
24
  "@khanacademy/wonder-blocks-core": "12.3.0",
17
25
  "@khanacademy/wonder-blocks-icon": "5.1.4",
18
- "@khanacademy/wonder-blocks-progress-spinner": "3.1.14",
19
- "@khanacademy/wonder-blocks-styles": "0.2.10",
20
- "@khanacademy/wonder-blocks-theming": "3.4.0",
21
- "@khanacademy/wonder-blocks-tokens": "10.2.1",
22
- "@khanacademy/wonder-blocks-typography": "3.2.4"
26
+ "@khanacademy/wonder-blocks-progress-spinner": "3.1.16",
27
+ "@khanacademy/wonder-blocks-styles": "0.2.12",
28
+ "@khanacademy/wonder-blocks-tokens": "10.4.0",
29
+ "@khanacademy/wonder-blocks-typography": "4.1.0"
23
30
  },
24
31
  "peerDependencies": {
25
32
  "aphrodite": "^1.2.5",
@@ -29,9 +36,10 @@
29
36
  "react-router-dom-v5-compat": "^6.30.0"
30
37
  },
31
38
  "devDependencies": {
32
- "@khanacademy/wb-dev-build-settings": "3.1.0"
39
+ "@khanacademy/wb-dev-build-settings": "3.2.0"
33
40
  },
34
41
  "scripts": {
42
+ "build:css": "pnpm exec wonder-blocks-tokens .",
35
43
  "test": "echo \"Error: no test specified\" && exit 1"
36
44
  }
37
45
  }
package/dist/themes/default.d.ts DELETED
@@ -1,275 +0,0 @@
1
- declare const theme: {
2
- root: {
3
- color: {
4
- primary: {
5
- progressive: {
6
- default: {
7
- border: string;
8
- background: string;
9
- foreground: string;
10
- };
11
- hover: {
12
- border: string;
13
- background: string;
14
- foreground: string;
15
- };
16
- press: {
17
- border: string;
18
- background: string;
19
- foreground: string;
20
- };
21
- };
22
- destructive: {
23
- default: {
24
- border: string;
25
- background: string;
26
- foreground: string;
27
- };
28
- hover: {
29
- border: string;
30
- background: string;
31
- foreground: string;
32
- };
33
- press: {
34
- border: string;
35
- background: string;
36
- foreground: string;
37
- };
38
- };
39
- neutral: {
40
- default: {
41
- border: string;
42
- background: string;
43
- foreground: string;
44
- };
45
- hover: {
46
- border: string;
47
- background: string;
48
- foreground: string;
49
- };
50
- press: {
51
- border: string;
52
- background: string;
53
- foreground: string;
54
- };
55
- };
56
- disabled: {
57
- border: string;
58
- background: string;
59
- foreground: string;
60
- };
61
- };
62
- secondary: {
63
- progressive: {
64
- default: {
65
- border: string;
66
- background: string;
67
- foreground: string;
68
- };
69
- hover: {
70
- border: string;
71
- background: string;
72
- foreground: string;
73
- };
74
- press: {
75
- border: string;
76
- background: string;
77
- foreground: string;
78
- };
79
- };
80
- destructive: {
81
- default: {
82
- border: string;
83
- background: string;
84
- foreground: string;
85
- };
86
- hover: {
87
- border: string;
88
- background: string;
89
- foreground: string;
90
- };
91
- press: {
92
- border: string;
93
- background: string;
94
- foreground: string;
95
- };
96
- };
97
- neutral: {
98
- default: {
99
- border: string;
100
- background: string;
101
- foreground: string;
102
- };
103
- hover: {
104
- border: string;
105
- background: string;
106
- foreground: string;
107
- };
108
- press: {
109
- border: string;
110
- background: string;
111
- foreground: string;
112
- };
113
- };
114
- disabled: {
115
- border: string;
116
- background: string;
117
- foreground: string;
118
- };
119
- };
120
- tertiary: {
121
- progressive: {
122
- default: {
123
- border: string;
124
- background: string;
125
- foreground: string;
126
- };
127
- hover: {
128
- border: string;
129
- background: string;
130
- foreground: string;
131
- };
132
- press: {
133
- border: string;
134
- background: string;
135
- foreground: string;
136
- };
137
- };
138
- destructive: {
139
- default: {
140
- border: string;
141
- background: string;
142
- foreground: string;
143
- };
144
- hover: {
145
- border: string;
146
- background: string;
147
- foreground: string;
148
- };
149
- press: {
150
- border: string;
151
- background: string;
152
- foreground: string;
153
- };
154
- };
155
- neutral: {
156
- default: {
157
- border: string;
158
- background: string;
159
- foreground: string;
160
- };
161
- hover: {
162
- border: string;
163
- background: string;
164
- foreground: string;
165
- };
166
- press: {
167
- border: string;
168
- background: string;
169
- foreground: string;
170
- };
171
- };
172
- disabled: {
173
- border: string;
174
- background: string;
175
- foreground: string;
176
- };
177
- };
178
- };
179
- border: {
180
- width: {
181
- primary: {
182
- default: string;
183
- hover: string;
184
- press: string;
185
- };
186
- secondary: {
187
- default: string;
188
- hover: string;
189
- press: string;
190
- };
191
- tertiary: {
192
- default: string;
193
- hover: string;
194
- press: string;
195
- };
196
- };
197
- offset: {
198
- primary: string;
199
- secondary: number;
200
- tertiary: number;
201
- };
202
- radius: {
203
- small: string;
204
- medium: string;
205
- large: string;
206
- };
207
- };
208
- sizing: {
209
- height: {
210
- small: string;
211
- medium: string;
212
- large: string;
213
- };
214
- underline: {
215
- hover: string;
216
- press: string;
217
- };
218
- };
219
- padding: {
220
- medium: string;
221
- large: string;
222
- };
223
- font: {
224
- size: {
225
- large: string;
226
- };
227
- lineHeight: {
228
- small: string;
229
- default: string;
230
- large: string;
231
- };
232
- weight: {
233
- default: number;
234
- };
235
- offset: {
236
- default: string;
237
- };
238
- };
239
- };
240
- icon: {
241
- color: {
242
- secondary: {
243
- progressive: {
244
- hover: {
245
- background: string;
246
- foreground: string;
247
- };
248
- };
249
- destructive: {
250
- hover: {
251
- background: string;
252
- foreground: string;
253
- };
254
- };
255
- neutral: {
256
- hover: {
257
- background: string;
258
- foreground: string;
259
- };
260
- };
261
- };
262
- };
263
- border: {
264
- radius: string;
265
- };
266
- margin: {
267
- inline: {
268
- inner: string;
269
- outer: string;
270
- };
271
- };
272
- padding: string;
273
- };
274
- };
275
- export default theme;
package/dist/themes/khanmigo.d.ts DELETED
@@ -1,278 +0,0 @@
1
- /**
2
- * The overrides for the Khanmigo theme.
3
- */
4
- declare const theme: {
5
- root: {
6
- color: {
7
- primary: {
8
- progressive: {
9
- default: {
10
- border: string;
11
- background: string;
12
- foreground: string;
13
- };
14
- hover: {
15
- border: string;
16
- background: string;
17
- foreground: string;
18
- };
19
- press: {
20
- border: string;
21
- background: string;
22
- foreground: string;
23
- };
24
- };
25
- destructive: {
26
- default: {
27
- border: string;
28
- background: string;
29
- foreground: string;
30
- };
31
- hover: {
32
- border: string;
33
- background: string;
34
- foreground: string;
35
- };
36
- press: {
37
- border: string;
38
- background: string;
39
- foreground: string;
40
- };
41
- };
42
- neutral: {
43
- default: {
44
- border: string;
45
- background: string;
46
- foreground: string;
47
- };
48
- hover: {
49
- border: string;
50
- background: string;
51
- foreground: string;
52
- };
53
- press: {
54
- border: string;
55
- background: string;
56
- foreground: string;
57
- };
58
- };
59
- disabled: {
60
- border: string;
61
- background: string;
62
- foreground: string;
63
- };
64
- };
65
- secondary: {
66
- progressive: {
67
- default: {
68
- border: string;
69
- background: string;
70
- foreground: string;
71
- };
72
- hover: {
73
- border: string;
74
- background: string;
75
- foreground: string;
76
- };
77
- press: {
78
- border: string;
79
- background: string;
80
- foreground: string;
81
- };
82
- };
83
- destructive: {
84
- default: {
85
- border: string;
86
- background: string;
87
- foreground: string;
88
- };
89
- hover: {
90
- border: string;
91
- background: string;
92
- foreground: string;
93
- };
94
- press: {
95
- border: string;
96
- background: string;
97
- foreground: string;
98
- };
99
- };
100
- neutral: {
101
- default: {
102
- border: string;
103
- background: string;
104
- foreground: string;
105
- };
106
- hover: {
107
- border: string;
108
- background: string;
109
- foreground: string;
110
- };
111
- press: {
112
- border: string;
113
- background: string;
114
- foreground: string;
115
- };
116
- };
117
- disabled: {
118
- border: string;
119
- background: string;
120
- foreground: string;
121
- };
122
- };
123
- tertiary: {
124
- progressive: {
125
- default: {
126
- border: string;
127
- background: string;
128
- foreground: string;
129
- };
130
- hover: {
131
- border: string;
132
- background: string;
133
- foreground: string;
134
- };
135
- press: {
136
- border: string;
137
- background: string;
138
- foreground: string;
139
- };
140
- };
141
- destructive: {
142
- default: {
143
- border: string;
144
- background: string;
145
- foreground: string;
146
- };
147
- hover: {
148
- border: string;
149
- background: string;
150
- foreground: string;
151
- };
152
- press: {
153
- border: string;
154
- background: string;
155
- foreground: string;
156
- };
157
- };
158
- neutral: {
159
- default: {
160
- border: string;
161
- background: string;
162
- foreground: string;
163
- };
164
- hover: {
165
- border: string;
166
- background: string;
167
- foreground: string;
168
- };
169
- press: {
170
- border: string;
171
- background: string;
172
- foreground: string;
173
- };
174
- };
175
- disabled: {
176
- border: string;
177
- background: string;
178
- foreground: string;
179
- };
180
- };
181
- };
182
- border: {
183
- width: {
184
- primary: {
185
- default: string;
186
- hover: string;
187
- press: string;
188
- };
189
- secondary: {
190
- default: string;
191
- hover: string;
192
- press: string;
193
- };
194
- tertiary: {
195
- default: string;
196
- hover: string;
197
- press: string;
198
- };
199
- };
200
- offset: {
201
- primary: string;
202
- secondary: number;
203
- tertiary: number;
204
- };
205
- radius: {
206
- small: string;
207
- medium: string;
208
- large: string;
209
- };
210
- };
211
- sizing: {
212
- height: {
213
- small: string;
214
- medium: string;
215
- large: string;
216
- };
217
- underline: {
218
- hover: string;
219
- press: string;
220
- };
221
- };
222
- padding: {
223
- medium: string;
224
- large: string;
225
- };
226
- font: {
227
- size: {
228
- large: string;
229
- };
230
- lineHeight: {
231
- small: string;
232
- default: string;
233
- large: string;
234
- };
235
- weight: {
236
- default: number;
237
- };
238
- offset: {
239
- default: string;
240
- };
241
- };
242
- };
243
- icon: {
244
- color: {
245
- secondary: {
246
- progressive: {
247
- hover: {
248
- background: string;
249
- foreground: string;
250
- };
251
- };
252
- destructive: {
253
- hover: {
254
- background: string;
255
- foreground: string;
256
- };
257
- };
258
- neutral: {
259
- hover: {
260
- background: string;
261
- foreground: string;
262
- };
263
- };
264
- };
265
- };
266
- border: {
267
- radius: string;
268
- };
269
- margin: {
270
- inline: {
271
- inner: string;
272
- outer: string;
273
- };
274
- };
275
- padding: string;
276
- };
277
- };
278
- export default theme;
package/dist/themes/themed-button.d.ts DELETED
@@ -1,289 +0,0 @@
1
- import * as React from "react";
2
- import defaultTheme from "./default";
3
- type Props = {
4
- children: React.ReactNode;
5
- };
6
- export type ButtonThemeContract = typeof defaultTheme;
7
- /**
8
- * The context that provides the theme to the Button component.
9
- * This is generally consumed via the `useScopedTheme` hook.
10
- */
11
- export declare const ButtonThemeContext: React.Context<{
12
- root: {
13
- color: {
14
- primary: {
15
- progressive: {
16
- default: {
17
- border: string;
18
- background: string;
19
- foreground: string;
20
- };
21
- hover: {
22
- border: string;
23
- background: string;
24
- foreground: string;
25
- };
26
- press: {
27
- border: string;
28
- background: string;
29
- foreground: string;
30
- };
31
- };
32
- destructive: {
33
- default: {
34
- border: string;
35
- background: string;
36
- foreground: string;
37
- };
38
- hover: {
39
- border: string;
40
- background: string;
41
- foreground: string;
42
- };
43
- press: {
44
- border: string;
45
- background: string;
46
- foreground: string;
47
- };
48
- };
49
- neutral: {
50
- default: {
51
- border: string;
52
- background: string;
53
- foreground: string;
54
- };
55
- hover: {
56
- border: string;
57
- background: string;
58
- foreground: string;
59
- };
60
- press: {
61
- border: string;
62
- background: string;
63
- foreground: string;
64
- };
65
- };
66
- disabled: {
67
- border: string;
68
- background: string;
69
- foreground: string;
70
- };
71
- };
72
- secondary: {
73
- progressive: {
74
- default: {
75
- border: string;
76
- background: string;
77
- foreground: string;
78
- };
79
- hover: {
80
- border: string;
81
- background: string;
82
- foreground: string;
83
- };
84
- press: {
85
- border: string;
86
- background: string;
87
- foreground: string;
88
- };
89
- };
90
- destructive: {
91
- default: {
92
- border: string;
93
- background: string;
94
- foreground: string;
95
- };
96
- hover: {
97
- border: string;
98
- background: string;
99
- foreground: string;
100
- };
101
- press: {
102
- border: string;
103
- background: string;
104
- foreground: string;
105
- };
106
- };
107
- neutral: {
108
- default: {
109
- border: string;
110
- background: string;
111
- foreground: string;
112
- };
113
- hover: {
114
- border: string;
115
- background: string;
116
- foreground: string;
117
- };
118
- press: {
119
- border: string;
120
- background: string;
121
- foreground: string;
122
- };
123
- };
124
- disabled: {
125
- border: string;
126
- background: string;
127
- foreground: string;
128
- };
129
- };
130
- tertiary: {
131
- progressive: {
132
- default: {
133
- border: string;
134
- background: string;
135
- foreground: string;
136
- };
137
- hover: {
138
- border: string;
139
- background: string;
140
- foreground: string;
141
- };
142
- press: {
143
- border: string;
144
- background: string;
145
- foreground: string;
146
- };
147
- };
148
- destructive: {
149
- default: {
150
- border: string;
151
- background: string;
152
- foreground: string;
153
- };
154
- hover: {
155
- border: string;
156
- background: string;
157
- foreground: string;
158
- };
159
- press: {
160
- border: string;
161
- background: string;
162
- foreground: string;
163
- };
164
- };
165
- neutral: {
166
- default: {
167
- border: string;
168
- background: string;
169
- foreground: string;
170
- };
171
- hover: {
172
- border: string;
173
- background: string;
174
- foreground: string;
175
- };
176
- press: {
177
- border: string;
178
- background: string;
179
- foreground: string;
180
- };
181
- };
182
- disabled: {
183
- border: string;
184
- background: string;
185
- foreground: string;
186
- };
187
- };
188
- };
189
- border: {
190
- width: {
191
- primary: {
192
- default: string;
193
- hover: string;
194
- press: string;
195
- };
196
- secondary: {
197
- default: string;
198
- hover: string;
199
- press: string;
200
- };
201
- tertiary: {
202
- default: string;
203
- hover: string;
204
- press: string;
205
- };
206
- };
207
- offset: {
208
- primary: string;
209
- secondary: number;
210
- tertiary: number;
211
- };
212
- radius: {
213
- small: string;
214
- medium: string;
215
- large: string;
216
- };
217
- };
218
- sizing: {
219
- height: {
220
- small: string;
221
- medium: string;
222
- large: string;
223
- };
224
- underline: {
225
- hover: string;
226
- press: string;
227
- };
228
- };
229
- padding: {
230
- medium: string;
231
- large: string;
232
- };
233
- font: {
234
- size: {
235
- large: string;
236
- };
237
- lineHeight: {
238
- small: string;
239
- default: string;
240
- large: string;
241
- };
242
- weight: {
243
- default: number;
244
- };
245
- offset: {
246
- default: string;
247
- };
248
- };
249
- };
250
- icon: {
251
- color: {
252
- secondary: {
253
- progressive: {
254
- hover: {
255
- background: string;
256
- foreground: string;
257
- };
258
- };
259
- destructive: {
260
- hover: {
261
- background: string;
262
- foreground: string;
263
- };
264
- };
265
- neutral: {
266
- hover: {
267
- background: string;
268
- foreground: string;
269
- };
270
- };
271
- };
272
- };
273
- border: {
274
- radius: string;
275
- };
276
- margin: {
277
- inline: {
278
- inner: string;
279
- outer: string;
280
- };
281
- };
282
- padding: string;
283
- };
284
- }>;
285
- /**
286
- * ThemedButton is a component that provides a theme to the <Button/> component.
287
- */
288
- export default function ThemedButton(props: Props): React.JSX.Element;
289
- export {};