@transferwise/components 46.90.0 → 46.91.0

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 (17) hide show
  1. package/build/button/LegacyButton.js.map +1 -1
  2. package/build/button/LegacyButton.mjs.map +1 -1
  3. package/build/main.css +18 -8
  4. package/build/styles/button/Button.css +18 -8
  5. package/build/styles/button/Button.vars.css +8 -8
  6. package/build/styles/main.css +18 -8
  7. package/build/types/button/Button.resolver.d.ts +0 -1
  8. package/build/types/button/Button.resolver.d.ts.map +1 -1
  9. package/build/types/button/LegacyButton.d.ts +0 -1
  10. package/build/types/button/LegacyButton.d.ts.map +1 -1
  11. package/package.json +2 -2
  12. package/src/button/Button.css +18 -8
  13. package/src/button/Button.less +10 -0
  14. package/src/button/Button.vars.css +8 -8
  15. package/src/button/Button.vars.less +8 -11
  16. package/src/button/LegacyButton.tsx +0 -1
  17. package/src/main.css +18 -8
package/build/button/LegacyButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n href?: string;\n };\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
1
+ {"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
package/build/button/LegacyButton.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n href?: string;\n };\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;EACEC,EAAE,EAAEC,SAAS,GAAG,QAAQ;AACxBC,EAAAA,KAAK,GAAG,KAAK;EACbC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzBC,OAAO;EACP,GAAGC,IAAAA;AACe,CAAA,EACpBC,GAAG,KACD;AACF,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtBC,EAAAA,qBAAqB,CAAC;IAAEX,IAAI;AAAEG,IAAAA,IAAAA;AAAI,GAAE,CAAC,CAAA;AAErC,EAAA,MAAMS,OAAO,GAAGC,gBAAgB,CAACV,IAAI,CAAC,CAAA;AACtC,EAAA,MAAMW,WAAW,GAAGC,oBAAoB,CAAClB,QAAQ,EAAEM,IAAI,CAAC,CAAA;EAExD,MAAMa,OAAO,GAAGC,IAAI,CAClB,CAAA,QAAA,EAAWjB,IAAI,CAAA,CAAE,EACjB,CAAA,cAAA,EAAiBA,IAAI,CAAA,CAAE,EACvB;AACE,IAAA,aAAa,EAAEJ,OAAO;AACtB,IAAA,wBAAwB,EAAEJ,KAAK;AAC/BG,IAAAA,QAAAA;GACD;AACD;AACA;EACAuB,YAAY,CAACN,OAAO,CAAC;AACrB;AACA;AACAO,EAAAA,gBAAgB,CAACL,WAAW,CAAC,EAC7BpB,SAAS,CACV,CAAA;EAED,SAAS0B,oBAAoBA,GAAA;AAC3B,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAACC,QAAQ,CAACrB,IAAI,CAAC,GAAG,KAAK,GAAG,IAAI,CAAA;AACnD,GAAA;AAEA,EAAA,MAAMsB,OAAO,GAAI/B,SAAyB,IAAI,QAAQ,CAAA;AACtD,EAAA,IAAIgC,KAAK,CAAA;EAET,IAAID,OAAO,KAAK,QAAQ,EAAE;IACxB,MAAM;AAAEE,MAAAA,QAAQ,GAAG,QAAQ;MAAE,GAAGC,SAAAA;AAAS,KAAE,GAAGlB,IAAmB,CAAA;AACjEgB,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGE,SAAS;MACZ9B,QAAQ;AACR,MAAA,eAAe,EAAEC,OAAO;AACxBO,MAAAA,IAAI,EAAEqB,QAAAA;KACP,CAAA;AACH,GAAC,MAAM;AACLD,IAAAA,KAAK,GAAG;AACN,MAAA,GAAGhB,IAAI;AACP,MAAA,eAAe,EAAEX,OAAAA;KACH,CAAA;AAClB,GAAA;AAEA;;;AAGG;AACH,EAAA,MAAM8B,WAAW,GACdC,OAAqC,IACrCC,KAAoE,IAAI;IACvE,IAAIjC,QAAQ,IAAIC,OAAO,EAAE;MACvBgC,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM,IAAI,OAAOF,OAAO,KAAK,UAAU,EAAE;MACxCA,OAAO,CAACC,KAAK,CAAC,CAAA;AAChB,KAAA;GACD,CAAA;EAEH,oBACEE,IAAA,CAACR,OAAO,EAAA;AACNd,IAAAA,GAAG,EAAEA,GAAsC;AAC3Cd,IAAAA,SAAS,EAAEsB,OAAQ;AACnBV,IAAAA,OAAO,EAAEoB,WAAW,CAACpB,OAAO,CAAE;AAAA,IAAA,GAC1BiB,KAAK;AACT,IAAA,WAAA,EAAW3B,OAAO,GAAG,QAAQ,GAAG,KAAM;AACtC,IAAA,WAAA,EAAWA,OAAQ;AACnB,IAAA,YAAA,EAAYA,OAAO,GAAGa,IAAI,CAACsB,aAAa,CAACC,QAAQ,CAACC,gBAAgB,CAAC,GAAG1B,IAAI,CAAC,YAAY,CAAE;AAAAd,IAAAA,QAAA,GAExFA,QAAQ,EACRG,OAAO,iBACNsC,GAAA,CAACC,gBAAgB,EAAA;MACfnC,IAAI,EAAEoB,oBAAoB,EAAG;AAC7B1B,MAAAA,SAAS,EAAC,YAAY;MACtB,aAAY,EAAA,yBAAA;AAAyB,KACrC,CACH,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type CommonProps = {\n v2?: false;\n\n /** Makes the button take up the full width of its container */\n block?: boolean;\n\n /**\n * The `target` attribute for HTML anchor.\n * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n */\n target?: string;\n /**\n * Toggles the disabled state\n * @default false\n */\n\n disabled?: boolean;\n /**\n * Toggles the loading state\n * @default false\n */\n loading?: boolean;\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\n/**\n * @deprecated use new button instead APIs\n * @example\n * ```\n * import { Button, ButtonProps } from '@transferwise/components';\n *\n * <Button v2>...</Button>\n * ```\n */\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
package/build/main.css CHANGED
@@ -690,6 +690,8 @@
690
690
  --Button-background-hover: var(--color-interactive-accent-hover);
691
691
  --Button-background-active: var(--color-interactive-accent-active);
692
692
  --Button-color: var(--color-interactive-control);
693
+ --Button-color-hover: var(--color-interactive-control-hover);
694
+ --Button-color-active: var(--color-interactive-control-active);
693
695
  --Button-border-radius: var(--radius-full);
694
696
  --Button-label-gap: var(--size-4);
695
697
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -702,6 +704,8 @@
702
704
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
703
705
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
704
706
  --Button-secondary-color: var(--color-interactive-primary);
707
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
708
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
705
709
  --Button-secondary-neutral-background: var(--color-background-neutral);
706
710
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
707
711
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -710,6 +714,8 @@
710
714
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
711
715
  --Button-tertiary-background-active: var(--color-background-screen-active);
712
716
  --Button-tertiary-color: var(--color-interactive-primary);
717
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
718
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
713
719
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
714
720
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
715
721
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -718,19 +724,13 @@
718
724
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
719
725
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
720
726
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
727
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
728
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
721
729
  }
722
730
  .np-theme-personal--bright-green .wds-Button {
723
731
  --Button-primary-negative-color: var(--color-white);
724
- --Button-secondary-color: var(--color-interactive-control);
725
732
  --Button-secondary-negative-color: var(--color-white);
726
733
  }
727
- .np-theme-personal--forest-green .wds-Button {
728
- --Button-secondary-background: var(--color-interactive-neutral);
729
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
730
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
731
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
732
- --Button-secondary-negative-color: var(--color-contrast-overlay);
733
- }
734
734
  /* Button Styles */
735
735
  .wds-Button {
736
736
  display: inline-flex;
@@ -761,9 +761,11 @@
761
761
  color: var(--Button-color);
762
762
  }
763
763
  .wds-Button:hover {
764
+ --Button-color: var(--Button-color-hover);
764
765
  background-color: var(--Button-background-hover);
765
766
  }
766
767
  .wds-Button:active {
768
+ --Button-color: var(--Button-color-active);
767
769
  background-color: var(--Button-background-active);
768
770
  }
769
771
  .wds-Button.wds-Button--disabled,
@@ -786,12 +788,16 @@
786
788
  --Button-background-hover: var(--Button-secondary-background-hover);
787
789
  --Button-background-active: var(--Button-secondary-background-active);
788
790
  --Button-color: var(--Button-secondary-color);
791
+ --Button-color-hover: var(--Button-secondary-color-hover);
792
+ --Button-color-active: var(--Button-secondary-color-active);
789
793
  }
790
794
  .wds-Button--secondary-neutral {
791
795
  --Button-background: var(--Button-secondary-neutral-background);
792
796
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
793
797
  --Button-background-active: var(--Button-secondary-neutral-background-active);
794
798
  --Button-color: var(--Button-secondary-neutral-color);
799
+ --Button-color-hover: var(--Button-secondary-neutral-color);
800
+ --Button-color-active: var(--Button-secondary-neutral-color);
795
801
  }
796
802
  .wds-Button--secondary-neutral .wds-Button-icon--end {
797
803
  color: var(--color-interactive-primary);
@@ -801,6 +807,8 @@
801
807
  --Button-background-hover: var(--Button-tertiary-background-hover);
802
808
  --Button-background-active: var(--Button-tertiary-background-active);
803
809
  --Button-color: var(--Button-tertiary-color);
810
+ --Button-color-hover: var(--Button-tertiary-color-hover);
811
+ --Button-color-active: var(--Button-tertiary-color-active);
804
812
  }
805
813
  .wds-Button--tertiary .wds-Button-labelText,
806
814
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -822,6 +830,8 @@
822
830
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
823
831
  --Button-background-active: var(--Button-secondary-negative-background-active);
824
832
  --Button-color: var(--Button-secondary-negative-color);
833
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
834
+ --Button-color-active: var(--Button-secondary-negative-color-active);
825
835
  }
826
836
  .wds-Button--large {
827
837
  padding: var(--Button-large-padding);
package/build/styles/button/Button.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -15,6 +17,8 @@
15
17
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
18
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
19
  --Button-secondary-color: var(--color-interactive-primary);
20
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
18
22
  --Button-secondary-neutral-background: var(--color-background-neutral);
19
23
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
24
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -23,6 +27,8 @@
23
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
25
29
  --Button-tertiary-color: var(--color-interactive-primary);
30
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
26
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -31,19 +37,13 @@
31
37
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
38
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
39
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
41
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
34
42
  }
35
43
  .np-theme-personal--bright-green .wds-Button {
36
44
  --Button-primary-negative-color: var(--color-white);
37
- --Button-secondary-color: var(--color-interactive-control);
38
45
  --Button-secondary-negative-color: var(--color-white);
39
46
  }
40
- .np-theme-personal--forest-green .wds-Button {
41
- --Button-secondary-background: var(--color-interactive-neutral);
42
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
43
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
44
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
45
- --Button-secondary-negative-color: var(--color-contrast-overlay);
46
- }
47
47
  /* Button Styles */
48
48
  .wds-Button {
49
49
  display: inline-flex;
@@ -74,9 +74,11 @@
74
74
  color: var(--Button-color);
75
75
  }
76
76
  .wds-Button:hover {
77
+ --Button-color: var(--Button-color-hover);
77
78
  background-color: var(--Button-background-hover);
78
79
  }
79
80
  .wds-Button:active {
81
+ --Button-color: var(--Button-color-active);
80
82
  background-color: var(--Button-background-active);
81
83
  }
82
84
  .wds-Button.wds-Button--disabled,
@@ -99,12 +101,16 @@
99
101
  --Button-background-hover: var(--Button-secondary-background-hover);
100
102
  --Button-background-active: var(--Button-secondary-background-active);
101
103
  --Button-color: var(--Button-secondary-color);
104
+ --Button-color-hover: var(--Button-secondary-color-hover);
105
+ --Button-color-active: var(--Button-secondary-color-active);
102
106
  }
103
107
  .wds-Button--secondary-neutral {
104
108
  --Button-background: var(--Button-secondary-neutral-background);
105
109
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
106
110
  --Button-background-active: var(--Button-secondary-neutral-background-active);
107
111
  --Button-color: var(--Button-secondary-neutral-color);
112
+ --Button-color-hover: var(--Button-secondary-neutral-color);
113
+ --Button-color-active: var(--Button-secondary-neutral-color);
108
114
  }
109
115
  .wds-Button--secondary-neutral .wds-Button-icon--end {
110
116
  color: var(--color-interactive-primary);
@@ -114,6 +120,8 @@
114
120
  --Button-background-hover: var(--Button-tertiary-background-hover);
115
121
  --Button-background-active: var(--Button-tertiary-background-active);
116
122
  --Button-color: var(--Button-tertiary-color);
123
+ --Button-color-hover: var(--Button-tertiary-color-hover);
124
+ --Button-color-active: var(--Button-tertiary-color-active);
117
125
  }
118
126
  .wds-Button--tertiary .wds-Button-labelText,
119
127
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -135,6 +143,8 @@
135
143
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
136
144
  --Button-background-active: var(--Button-secondary-negative-background-active);
137
145
  --Button-color: var(--Button-secondary-negative-color);
146
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
147
+ --Button-color-active: var(--Button-secondary-negative-color-active);
138
148
  }
139
149
  .wds-Button--large {
140
150
  padding: var(--Button-large-padding);
package/build/styles/button/Button.vars.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -15,6 +17,8 @@
15
17
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
18
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
19
  --Button-secondary-color: var(--color-interactive-primary);
20
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
18
22
  --Button-secondary-neutral-background: var(--color-background-neutral);
19
23
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
24
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -23,6 +27,8 @@
23
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
25
29
  --Button-tertiary-color: var(--color-interactive-primary);
30
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
26
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -31,16 +37,10 @@
31
37
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
38
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
39
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
41
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
34
42
  }
35
43
  .np-theme-personal--bright-green .wds-Button {
36
44
  --Button-primary-negative-color: var(--color-white);
37
- --Button-secondary-color: var(--color-interactive-control);
38
45
  --Button-secondary-negative-color: var(--color-white);
39
46
  }
40
- .np-theme-personal--forest-green .wds-Button {
41
- --Button-secondary-background: var(--color-interactive-neutral);
42
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
43
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
44
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
45
- --Button-secondary-negative-color: var(--color-contrast-overlay);
46
- }
package/build/styles/main.css CHANGED
@@ -690,6 +690,8 @@
690
690
  --Button-background-hover: var(--color-interactive-accent-hover);
691
691
  --Button-background-active: var(--color-interactive-accent-active);
692
692
  --Button-color: var(--color-interactive-control);
693
+ --Button-color-hover: var(--color-interactive-control-hover);
694
+ --Button-color-active: var(--color-interactive-control-active);
693
695
  --Button-border-radius: var(--radius-full);
694
696
  --Button-label-gap: var(--size-4);
695
697
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -702,6 +704,8 @@
702
704
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
703
705
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
704
706
  --Button-secondary-color: var(--color-interactive-primary);
707
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
708
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
705
709
  --Button-secondary-neutral-background: var(--color-background-neutral);
706
710
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
707
711
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -710,6 +714,8 @@
710
714
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
711
715
  --Button-tertiary-background-active: var(--color-background-screen-active);
712
716
  --Button-tertiary-color: var(--color-interactive-primary);
717
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
718
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
713
719
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
714
720
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
715
721
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -718,19 +724,13 @@
718
724
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
719
725
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
720
726
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
727
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
728
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
721
729
  }
722
730
  .np-theme-personal--bright-green .wds-Button {
723
731
  --Button-primary-negative-color: var(--color-white);
724
- --Button-secondary-color: var(--color-interactive-control);
725
732
  --Button-secondary-negative-color: var(--color-white);
726
733
  }
727
- .np-theme-personal--forest-green .wds-Button {
728
- --Button-secondary-background: var(--color-interactive-neutral);
729
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
730
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
731
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
732
- --Button-secondary-negative-color: var(--color-contrast-overlay);
733
- }
734
734
  /* Button Styles */
735
735
  .wds-Button {
736
736
  display: inline-flex;
@@ -761,9 +761,11 @@
761
761
  color: var(--Button-color);
762
762
  }
763
763
  .wds-Button:hover {
764
+ --Button-color: var(--Button-color-hover);
764
765
  background-color: var(--Button-background-hover);
765
766
  }
766
767
  .wds-Button:active {
768
+ --Button-color: var(--Button-color-active);
767
769
  background-color: var(--Button-background-active);
768
770
  }
769
771
  .wds-Button.wds-Button--disabled,
@@ -786,12 +788,16 @@
786
788
  --Button-background-hover: var(--Button-secondary-background-hover);
787
789
  --Button-background-active: var(--Button-secondary-background-active);
788
790
  --Button-color: var(--Button-secondary-color);
791
+ --Button-color-hover: var(--Button-secondary-color-hover);
792
+ --Button-color-active: var(--Button-secondary-color-active);
789
793
  }
790
794
  .wds-Button--secondary-neutral {
791
795
  --Button-background: var(--Button-secondary-neutral-background);
792
796
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
793
797
  --Button-background-active: var(--Button-secondary-neutral-background-active);
794
798
  --Button-color: var(--Button-secondary-neutral-color);
799
+ --Button-color-hover: var(--Button-secondary-neutral-color);
800
+ --Button-color-active: var(--Button-secondary-neutral-color);
795
801
  }
796
802
  .wds-Button--secondary-neutral .wds-Button-icon--end {
797
803
  color: var(--color-interactive-primary);
@@ -801,6 +807,8 @@
801
807
  --Button-background-hover: var(--Button-tertiary-background-hover);
802
808
  --Button-background-active: var(--Button-tertiary-background-active);
803
809
  --Button-color: var(--Button-tertiary-color);
810
+ --Button-color-hover: var(--Button-tertiary-color-hover);
811
+ --Button-color-active: var(--Button-tertiary-color-active);
804
812
  }
805
813
  .wds-Button--tertiary .wds-Button-labelText,
806
814
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -822,6 +830,8 @@
822
830
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
823
831
  --Button-background-active: var(--Button-secondary-negative-background-active);
824
832
  --Button-color: var(--Button-secondary-negative-color);
833
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
834
+ --Button-color-active: var(--Button-secondary-negative-color-active);
825
835
  }
826
836
  .wds-Button--large {
827
837
  padding: var(--Button-large-padding);
package/build/types/button/Button.resolver.d.ts CHANGED
@@ -5,7 +5,6 @@ declare const Button: import("react").ForwardRefExoticComponent<(NewButtonProps
5
5
  ref?: ((instance: HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
6
6
  }, "type"> & {
7
7
  as?: "a";
8
- href?: string;
9
8
  }, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
10
9
  export default Button;
11
10
  //# sourceMappingURL=Button.resolver.d.ts.map
package/build/types/button/Button.resolver.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.resolver.d.ts","sourceRoot":"","sources":["../../../src/button/Button.resolver.tsx"],"names":[],"mappings":"AACA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGpF,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAwD7D,QAAA,MAAM,MAAM;;;;;gEAOV,CAAC;AAIH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.resolver.d.ts","sourceRoot":"","sources":["../../../src/button/Button.resolver.tsx"],"names":[],"mappings":"AACA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGpF,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAwD7D,QAAA,MAAM,MAAM;;;;gEAOV,CAAC;AAIH,eAAe,MAAM,CAAC"}
package/build/types/button/LegacyButton.d.ts CHANGED
@@ -51,7 +51,6 @@ export type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button
51
51
  };
52
52
  type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
53
53
  as?: 'a';
54
- href?: string;
55
54
  };
56
55
  /**
57
56
  * @deprecated use new button instead APIs
package/build/types/button/LegacyButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LegacyButton.d.ts","sourceRoot":"","sources":["../../../src/button/LegacyButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAMnB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,KAAK,CAAC;IAEX,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;IAC5D,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEJ,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D;;GAEG;AACH,QAAA,MAAM,YAAY,uJAkGjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"LegacyButton.d.ts","sourceRoot":"","sources":["../../../src/button/LegacyButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAMnB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,KAAK,CAAC;IAEX,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;IAC5D,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEJ,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,GAAG,CAAC;CACV,CAAC;AAEJ;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D;;GAEG;AACH,QAAA,MAAM,YAAY,uJAkGjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.90.0",
3
+ "version": "46.91.0",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,7 +92,7 @@
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
94
  "@transferwise/less-config": "3.1.0",
95
- "@transferwise/neptune-css": "14.21.1",
95
+ "@transferwise/neptune-css": "14.22.0",
96
96
  "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
package/src/button/Button.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -15,6 +17,8 @@
15
17
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
18
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
19
  --Button-secondary-color: var(--color-interactive-primary);
20
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
18
22
  --Button-secondary-neutral-background: var(--color-background-neutral);
19
23
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
24
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -23,6 +27,8 @@
23
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
25
29
  --Button-tertiary-color: var(--color-interactive-primary);
30
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
26
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -31,19 +37,13 @@
31
37
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
38
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
39
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
41
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
34
42
  }
35
43
  .np-theme-personal--bright-green .wds-Button {
36
44
  --Button-primary-negative-color: var(--color-white);
37
- --Button-secondary-color: var(--color-interactive-control);
38
45
  --Button-secondary-negative-color: var(--color-white);
39
46
  }
40
- .np-theme-personal--forest-green .wds-Button {
41
- --Button-secondary-background: var(--color-interactive-neutral);
42
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
43
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
44
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
45
- --Button-secondary-negative-color: var(--color-contrast-overlay);
46
- }
47
47
  /* Button Styles */
48
48
  .wds-Button {
49
49
  display: inline-flex;
@@ -74,9 +74,11 @@
74
74
  color: var(--Button-color);
75
75
  }
76
76
  .wds-Button:hover {
77
+ --Button-color: var(--Button-color-hover);
77
78
  background-color: var(--Button-background-hover);
78
79
  }
79
80
  .wds-Button:active {
81
+ --Button-color: var(--Button-color-active);
80
82
  background-color: var(--Button-background-active);
81
83
  }
82
84
  .wds-Button.wds-Button--disabled,
@@ -99,12 +101,16 @@
99
101
  --Button-background-hover: var(--Button-secondary-background-hover);
100
102
  --Button-background-active: var(--Button-secondary-background-active);
101
103
  --Button-color: var(--Button-secondary-color);
104
+ --Button-color-hover: var(--Button-secondary-color-hover);
105
+ --Button-color-active: var(--Button-secondary-color-active);
102
106
  }
103
107
  .wds-Button--secondary-neutral {
104
108
  --Button-background: var(--Button-secondary-neutral-background);
105
109
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
106
110
  --Button-background-active: var(--Button-secondary-neutral-background-active);
107
111
  --Button-color: var(--Button-secondary-neutral-color);
112
+ --Button-color-hover: var(--Button-secondary-neutral-color);
113
+ --Button-color-active: var(--Button-secondary-neutral-color);
108
114
  }
109
115
  .wds-Button--secondary-neutral .wds-Button-icon--end {
110
116
  color: var(--color-interactive-primary);
@@ -114,6 +120,8 @@
114
120
  --Button-background-hover: var(--Button-tertiary-background-hover);
115
121
  --Button-background-active: var(--Button-tertiary-background-active);
116
122
  --Button-color: var(--Button-tertiary-color);
123
+ --Button-color-hover: var(--Button-tertiary-color-hover);
124
+ --Button-color-active: var(--Button-tertiary-color-active);
117
125
  }
118
126
  .wds-Button--tertiary .wds-Button-labelText,
119
127
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -135,6 +143,8 @@
135
143
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
136
144
  --Button-background-active: var(--Button-secondary-negative-background-active);
137
145
  --Button-color: var(--Button-secondary-negative-color);
146
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
147
+ --Button-color-active: var(--Button-secondary-negative-color-active);
138
148
  }
139
149
  .wds-Button--large {
140
150
  padding: var(--Button-large-padding);
package/src/button/Button.less CHANGED
@@ -28,10 +28,12 @@
28
28
  }
29
29
 
30
30
  &:hover {
31
+ --Button-color: var(--Button-color-hover);
31
32
  background-color: var(--Button-background-hover);
32
33
  }
33
34
 
34
35
  &:active {
36
+ --Button-color: var(--Button-color-active);
35
37
  background-color: var(--Button-background-active);
36
38
  }
37
39
 
@@ -59,6 +61,8 @@
59
61
  --Button-background-hover: var(--Button-secondary-background-hover);
60
62
  --Button-background-active: var(--Button-secondary-background-active);
61
63
  --Button-color: var(--Button-secondary-color);
64
+ --Button-color-hover: var(--Button-secondary-color-hover);
65
+ --Button-color-active: var(--Button-secondary-color-active);
62
66
  }
63
67
 
64
68
  &--secondary-neutral {
@@ -66,6 +70,8 @@
66
70
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
67
71
  --Button-background-active: var(--Button-secondary-neutral-background-active);
68
72
  --Button-color: var(--Button-secondary-neutral-color);
73
+ --Button-color-hover: var(--Button-secondary-neutral-color);
74
+ --Button-color-active: var(--Button-secondary-neutral-color);
69
75
 
70
76
  .wds-Button-icon--end {
71
77
  color: var(--color-interactive-primary);
@@ -77,6 +83,8 @@
77
83
  --Button-background-hover: var(--Button-tertiary-background-hover);
78
84
  --Button-background-active: var(--Button-tertiary-background-active);
79
85
  --Button-color: var(--Button-tertiary-color);
86
+ --Button-color-hover: var(--Button-tertiary-color-hover);
87
+ --Button-color-active: var(--Button-tertiary-color-active);
80
88
 
81
89
  &,
82
90
  &:hover,
@@ -104,6 +112,8 @@
104
112
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
105
113
  --Button-background-active: var(--Button-secondary-negative-background-active);
106
114
  --Button-color: var(--Button-secondary-negative-color);
115
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
116
+ --Button-color-active: var(--Button-secondary-negative-color-active);
107
117
  }
108
118
  }
109
119
 
package/src/button/Button.vars.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -15,6 +17,8 @@
15
17
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
18
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
19
  --Button-secondary-color: var(--color-interactive-primary);
20
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
21
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
18
22
  --Button-secondary-neutral-background: var(--color-background-neutral);
19
23
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
24
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -23,6 +27,8 @@
23
27
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
28
  --Button-tertiary-background-active: var(--color-background-screen-active);
25
29
  --Button-tertiary-color: var(--color-interactive-primary);
30
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
26
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -31,16 +37,10 @@
31
37
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
32
38
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
33
39
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
41
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
34
42
  }
35
43
  .np-theme-personal--bright-green .wds-Button {
36
44
  --Button-primary-negative-color: var(--color-white);
37
- --Button-secondary-color: var(--color-interactive-control);
38
45
  --Button-secondary-negative-color: var(--color-white);
39
46
  }
40
- .np-theme-personal--forest-green .wds-Button {
41
- --Button-secondary-background: var(--color-interactive-neutral);
42
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
43
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
44
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
45
- --Button-secondary-negative-color: var(--color-contrast-overlay);
46
- }
package/src/button/Button.vars.less CHANGED
@@ -3,6 +3,8 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
+ --Button-color-hover: var(--color-interactive-control-hover);
7
+ --Button-color-active: var(--color-interactive-control-active);
6
8
  --Button-border-radius: var(--radius-full);
7
9
  --Button-label-gap: var(--size-4);
8
10
 
@@ -18,6 +20,8 @@
18
20
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
19
21
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
20
22
  --Button-secondary-color: var(--color-interactive-primary);
23
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
24
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
21
25
 
22
26
  --Button-secondary-neutral-background: var(--color-background-neutral);
23
27
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
@@ -28,6 +32,8 @@
28
32
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
29
33
  --Button-tertiary-background-active: var(--color-background-screen-active);
30
34
  --Button-tertiary-color: var(--color-interactive-primary);
35
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
36
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
31
37
 
32
38
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
39
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
@@ -38,22 +44,13 @@
38
44
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
39
45
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
40
46
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
41
-
47
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
48
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
42
49
 
43
50
  .np-theme-personal--bright-green & {
44
51
  --Button-primary-negative-color: var(--color-white);
45
- --Button-secondary-color: var(--color-interactive-control);
46
52
  --Button-secondary-negative-color: var(--color-white);
47
53
  }
48
-
49
-
50
- .np-theme-personal--forest-green & {
51
- --Button-secondary-background: var(--color-interactive-neutral);
52
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
53
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
54
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
55
- --Button-secondary-negative-color: var(--color-contrast-overlay);
56
- }
57
54
  }
58
55
 
59
56
 
package/src/button/LegacyButton.tsx CHANGED
@@ -84,7 +84,6 @@ export type ButtonProps = CommonProps &
84
84
  type AnchorProps = CommonProps &
85
85
  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
86
86
  as?: 'a';
87
- href?: string;
88
87
  };
89
88
 
90
89
  /**
package/src/main.css CHANGED
@@ -690,6 +690,8 @@
690
690
  --Button-background-hover: var(--color-interactive-accent-hover);
691
691
  --Button-background-active: var(--color-interactive-accent-active);
692
692
  --Button-color: var(--color-interactive-control);
693
+ --Button-color-hover: var(--color-interactive-control-hover);
694
+ --Button-color-active: var(--color-interactive-control-active);
693
695
  --Button-border-radius: var(--radius-full);
694
696
  --Button-label-gap: var(--size-4);
695
697
  --Button-large-padding: var(--size-12) var(--size-16);
@@ -702,6 +704,8 @@
702
704
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
703
705
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
704
706
  --Button-secondary-color: var(--color-interactive-primary);
707
+ --Button-secondary-color-hover: var(--color-interactive-primary-hover);
708
+ --Button-secondary-color-active: var(--color-interactive-primary-active);
705
709
  --Button-secondary-neutral-background: var(--color-background-neutral);
706
710
  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
707
711
  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
@@ -710,6 +714,8 @@
710
714
  --Button-tertiary-background-hover: var(--color-background-screen-hover);
711
715
  --Button-tertiary-background-active: var(--color-background-screen-active);
712
716
  --Button-tertiary-color: var(--color-interactive-primary);
717
+ --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
718
+ --Button-tertiary-color-active: var(--color-interactive-primary-active);
713
719
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
714
720
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
715
721
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -718,19 +724,13 @@
718
724
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
719
725
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
720
726
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
727
+ --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
728
+ --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
721
729
  }
722
730
  .np-theme-personal--bright-green .wds-Button {
723
731
  --Button-primary-negative-color: var(--color-white);
724
- --Button-secondary-color: var(--color-interactive-control);
725
732
  --Button-secondary-negative-color: var(--color-white);
726
733
  }
727
- .np-theme-personal--forest-green .wds-Button {
728
- --Button-secondary-background: var(--color-interactive-neutral);
729
- --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
730
- --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
731
- --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
732
- --Button-secondary-negative-color: var(--color-contrast-overlay);
733
- }
734
734
  /* Button Styles */
735
735
  .wds-Button {
736
736
  display: inline-flex;
@@ -761,9 +761,11 @@
761
761
  color: var(--Button-color);
762
762
  }
763
763
  .wds-Button:hover {
764
+ --Button-color: var(--Button-color-hover);
764
765
  background-color: var(--Button-background-hover);
765
766
  }
766
767
  .wds-Button:active {
768
+ --Button-color: var(--Button-color-active);
767
769
  background-color: var(--Button-background-active);
768
770
  }
769
771
  .wds-Button.wds-Button--disabled,
@@ -786,12 +788,16 @@
786
788
  --Button-background-hover: var(--Button-secondary-background-hover);
787
789
  --Button-background-active: var(--Button-secondary-background-active);
788
790
  --Button-color: var(--Button-secondary-color);
791
+ --Button-color-hover: var(--Button-secondary-color-hover);
792
+ --Button-color-active: var(--Button-secondary-color-active);
789
793
  }
790
794
  .wds-Button--secondary-neutral {
791
795
  --Button-background: var(--Button-secondary-neutral-background);
792
796
  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
793
797
  --Button-background-active: var(--Button-secondary-neutral-background-active);
794
798
  --Button-color: var(--Button-secondary-neutral-color);
799
+ --Button-color-hover: var(--Button-secondary-neutral-color);
800
+ --Button-color-active: var(--Button-secondary-neutral-color);
795
801
  }
796
802
  .wds-Button--secondary-neutral .wds-Button-icon--end {
797
803
  color: var(--color-interactive-primary);
@@ -801,6 +807,8 @@
801
807
  --Button-background-hover: var(--Button-tertiary-background-hover);
802
808
  --Button-background-active: var(--Button-tertiary-background-active);
803
809
  --Button-color: var(--Button-tertiary-color);
810
+ --Button-color-hover: var(--Button-tertiary-color-hover);
811
+ --Button-color-active: var(--Button-tertiary-color-active);
804
812
  }
805
813
  .wds-Button--tertiary .wds-Button-labelText,
806
814
  .wds-Button--tertiary:hover .wds-Button-labelText,
@@ -822,6 +830,8 @@
822
830
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
823
831
  --Button-background-active: var(--Button-secondary-negative-background-active);
824
832
  --Button-color: var(--Button-secondary-negative-color);
833
+ --Button-color-hover: var(--Button-secondary-negative-color-hover);
834
+ --Button-color-active: var(--Button-secondary-negative-color-active);
825
835
  }
826
836
  .wds-Button--large {
827
837
  padding: var(--Button-large-padding);