@mirohq/design-system-base-button 0.2.1 → 0.2.2

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 (6) hide show
  1. package/dist/main.js +29 -29
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +29 -29
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +137 -71
  6. package/package.json +4 -4
package/dist/main.js CHANGED
@@ -18,15 +18,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
 
19
19
  const focusFilled = {
20
20
  "&[data-focused]": {
21
- boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 2px var(--colors-blue-50), inset 0 0 0 3px var(--colors-white)`,
21
+ boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,
22
22
  outline: "none"
23
23
  }
24
24
  };
25
25
  const focusOutline = {
26
26
  "&[data-focused]": {
27
- boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 1px var(--colors-blue-50), inset 0 0 0 2px var(--colors-white)`,
27
+ boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,
28
28
  outline: "none",
29
- borderColor: "$blue-50"
29
+ borderColor: "$blue-500"
30
30
  }
31
31
  };
32
32
  const activeSelector = "&:active, &[data-pressed]";
@@ -43,66 +43,66 @@ const StyledBaseButton = designSystemStitches.styled(designSystemPrimitive.Primi
43
43
  variants: {
44
44
  variant: {
45
45
  "solid-prominent": {
46
- backgroundColor: "#3859FF",
47
- color: "$font-cta-idle",
46
+ backgroundColor: "$background-primary-prominent",
47
+ color: "$icon-primary-inverted",
48
48
  ...focusFilled,
49
49
  "&:hover": {
50
- backgroundColor: "#2436B1"
50
+ backgroundColor: "$background-primary-prominent-hover"
51
51
  },
52
52
  [activeSelector]: {
53
- backgroundColor: "$blue-80"
53
+ backgroundColor: "$background-primary-prominent-active"
54
54
  },
55
55
  "&[disabled]": {
56
- backgroundColor: "$gray-30",
57
- color: "$gray-50"
56
+ backgroundColor: "$background-neutrals-disabled",
57
+ color: "$icon-neutrals-disabled"
58
58
  }
59
59
  },
60
60
  "solid-subtle": {
61
- backgroundColor: "$gray-20",
62
- color: "$font-primary",
61
+ backgroundColor: "$background-neutrals-subtle",
62
+ color: "$icon-neutrals",
63
63
  ...focusFilled,
64
64
  "&:hover": {
65
- backgroundColor: "$gray-30"
65
+ backgroundColor: "$background-neutrals-subtle-hover"
66
66
  },
67
67
  [activeSelector]: {
68
- backgroundColor: "$gray-40"
68
+ backgroundColor: "$background-neutrals-subtle-active"
69
69
  },
70
70
  "&[disabled]": {
71
- backgroundColor: "$gray-30",
72
- color: "$gray-50"
71
+ backgroundColor: "$background-neutrals-disabled",
72
+ color: "$icon-neutrals-disabled"
73
73
  }
74
74
  },
75
75
  outline: {
76
- backgroundColor: "$white",
77
- color: "$font-primary",
78
- border: "1px solid $gray-50",
76
+ backgroundColor: "$background-neutrals",
77
+ color: "$icon-neutrals",
78
+ border: "1px solid $border-neutrals",
79
79
  "&:hover": {
80
- backgroundColor: "$gray-30",
81
- borderColor: "$indigo-20"
80
+ backgroundColor: "$background-neutrals-subtle-hover",
81
+ borderColor: "$border-neutrals-hover"
82
82
  },
83
83
  [activeSelector]: {
84
- backgroundColor: "$gray-40",
85
- borderColor: "$indigo-30"
84
+ backgroundColor: "$background-neutrals-subtle-active",
85
+ borderColor: "$border-neutrals-active"
86
86
  },
87
87
  "&[disabled]": {
88
- backgroundColor: "$gray-30",
89
- color: "$gray-50",
90
- borderColor: "$gray-40"
88
+ backgroundColor: "$background-neutrals-disabled",
89
+ color: "$icon-neutrals-disabled",
90
+ borderColor: "$border-neutrals-disabled"
91
91
  },
92
92
  ...focusOutline
93
93
  },
94
94
  ghost: {
95
- color: "$font-primary",
95
+ color: "$icon-neutrals",
96
96
  backgroundColor: "transparent",
97
97
  ...focusFilled,
98
98
  "&:hover": {
99
- backgroundColor: "$gray-30"
99
+ backgroundColor: "$background-neutrals-subtle-hover"
100
100
  },
101
101
  [activeSelector]: {
102
- backgroundColor: "$gray-40"
102
+ backgroundColor: "$background-neutrals-subtle-active"
103
103
  },
104
104
  "&[disabled]": {
105
- color: "$gray-50"
105
+ color: "$icon-neutrals-disabled"
106
106
  }
107
107
  }
108
108
  },
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 2px var(--colors-blue-50), inset 0 0 0 3px var(--colors-white)`,\n outline: 'none',\n },\n}\n\nconst focusOutline = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 1px var(--colors-blue-50), inset 0 0 0 2px var(--colors-white)`,\n outline: 'none',\n borderColor: '$blue-50',\n },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '#3859FF', // todo after updating color change to 60\n color: '$font-cta-idle',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '#2436B1', // todo after updating color change to 80\n },\n [activeSelector]: {\n backgroundColor: '$blue-80', // todo after updating color change to 90\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n 'solid-subtle': {\n backgroundColor: '$gray-20',\n color: '$font-primary',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n outline: {\n backgroundColor: '$white',\n color: '$font-primary',\n border: '1px solid $gray-50',\n\n '&:hover': {\n backgroundColor: '$gray-30',\n borderColor: '$indigo-20',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n borderColor: '$indigo-30',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n borderColor: '$gray-40',\n },\n\n // order is important because of borderColor\n ...focusOutline,\n },\n ghost: {\n color: '$font-primary',\n backgroundColor: 'transparent',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n color: '$gray-50',\n },\n },\n },\n size: {\n medium: {\n height: '$8',\n paddingX: '$50',\n },\n large: {\n height: '$10',\n paddingX: '$100',\n },\n 'x-large': {\n height: '$12',\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { BadgeProps } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the button style\n */\n variant?: StyledBaseButtonProps['variant']\n\n /**\n * Change the button size\n */\n size?: StyledBaseButtonProps['size']\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n variant,\n size,\n disabled = false,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n const commonProps = {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocusChange,\n onFocus,\n onBlur,\n }\n\n const { buttonProps, isPressed } = useButton(\n {\n href,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...commonProps,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n { ...commonProps, ...restProps },\n // @ts-expect-error\n refWithFallback\n )\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart: e => onHoverStart?.(e),\n onHoverEnd: e => onHoverEnd?.(e),\n onHoverChange: e => onHoverChange?.(e),\n })\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n hoverProps,\n focusPropsRing\n )\n\n const formattedChildren =\n variant === 'solid-prominent'\n ? addPropsToChildren<BadgeProps>(\n children,\n // @ts-expect-error\n child => child?.type?.displayName === 'Badge',\n { inverted: true }\n )\n : children\n\n return (\n <StyledBaseButton\n {...elementProps}\n variant={variant}\n size={size}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {formattedChildren}\n </a>\n ) : (\n formattedChildren\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps","addPropsToChildren"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,\n outline: 'none',\n },\n}\n\nconst focusOutline = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,\n outline: 'none',\n borderColor: '$blue-500',\n },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n '&[disabled]': {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n },\n 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n '&[disabled]': {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n },\n outline: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals',\n border: '1px solid $border-neutrals',\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n borderColor: '$border-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n borderColor: '$border-neutrals-active',\n },\n '&[disabled]': {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n\n // order is important because of borderColor\n ...focusOutline,\n },\n ghost: {\n color: '$icon-neutrals',\n backgroundColor: 'transparent',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n '&[disabled]': {\n color: '$icon-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: '$8',\n paddingX: '$50',\n },\n large: {\n height: '$10',\n paddingX: '$100',\n },\n 'x-large': {\n height: '$12',\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { BadgeProps } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the button style\n */\n variant?: StyledBaseButtonProps['variant']\n\n /**\n * Change the button size\n */\n size?: StyledBaseButtonProps['size']\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n variant,\n size,\n disabled = false,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n const commonProps = {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocusChange,\n onFocus,\n onBlur,\n }\n\n const { buttonProps, isPressed } = useButton(\n {\n href,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...commonProps,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n { ...commonProps, ...restProps },\n // @ts-expect-error\n refWithFallback\n )\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart: e => onHoverStart?.(e),\n onHoverEnd: e => onHoverEnd?.(e),\n onHoverChange: e => onHoverChange?.(e),\n })\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n hoverProps,\n focusPropsRing\n )\n\n const formattedChildren =\n variant === 'solid-prominent'\n ? addPropsToChildren<BadgeProps>(\n children,\n // @ts-expect-error\n child => child?.type?.displayName === 'Badge',\n { inverted: true }\n )\n : children\n\n return (\n <StyledBaseButton\n {...elementProps}\n variant={variant}\n size={size}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {formattedChildren}\n </a>\n ) : (\n formattedChildren\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps","addPropsToChildren"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -10,15 +10,15 @@ import { styled } from '@mirohq/design-system-stitches';
10
10
 
11
11
  const focusFilled = {
12
12
  "&[data-focused]": {
13
- boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 2px var(--colors-blue-50), inset 0 0 0 3px var(--colors-white)`,
13
+ boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,
14
14
  outline: "none"
15
15
  }
16
16
  };
17
17
  const focusOutline = {
18
18
  "&[data-focused]": {
19
- boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 1px var(--colors-blue-50), inset 0 0 0 2px var(--colors-white)`,
19
+ boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,
20
20
  outline: "none",
21
- borderColor: "$blue-50"
21
+ borderColor: "$blue-500"
22
22
  }
23
23
  };
24
24
  const activeSelector = "&:active, &[data-pressed]";
@@ -35,66 +35,66 @@ const StyledBaseButton = styled(Primitive.button, {
35
35
  variants: {
36
36
  variant: {
37
37
  "solid-prominent": {
38
- backgroundColor: "#3859FF",
39
- color: "$font-cta-idle",
38
+ backgroundColor: "$background-primary-prominent",
39
+ color: "$icon-primary-inverted",
40
40
  ...focusFilled,
41
41
  "&:hover": {
42
- backgroundColor: "#2436B1"
42
+ backgroundColor: "$background-primary-prominent-hover"
43
43
  },
44
44
  [activeSelector]: {
45
- backgroundColor: "$blue-80"
45
+ backgroundColor: "$background-primary-prominent-active"
46
46
  },
47
47
  "&[disabled]": {
48
- backgroundColor: "$gray-30",
49
- color: "$gray-50"
48
+ backgroundColor: "$background-neutrals-disabled",
49
+ color: "$icon-neutrals-disabled"
50
50
  }
51
51
  },
52
52
  "solid-subtle": {
53
- backgroundColor: "$gray-20",
54
- color: "$font-primary",
53
+ backgroundColor: "$background-neutrals-subtle",
54
+ color: "$icon-neutrals",
55
55
  ...focusFilled,
56
56
  "&:hover": {
57
- backgroundColor: "$gray-30"
57
+ backgroundColor: "$background-neutrals-subtle-hover"
58
58
  },
59
59
  [activeSelector]: {
60
- backgroundColor: "$gray-40"
60
+ backgroundColor: "$background-neutrals-subtle-active"
61
61
  },
62
62
  "&[disabled]": {
63
- backgroundColor: "$gray-30",
64
- color: "$gray-50"
63
+ backgroundColor: "$background-neutrals-disabled",
64
+ color: "$icon-neutrals-disabled"
65
65
  }
66
66
  },
67
67
  outline: {
68
- backgroundColor: "$white",
69
- color: "$font-primary",
70
- border: "1px solid $gray-50",
68
+ backgroundColor: "$background-neutrals",
69
+ color: "$icon-neutrals",
70
+ border: "1px solid $border-neutrals",
71
71
  "&:hover": {
72
- backgroundColor: "$gray-30",
73
- borderColor: "$indigo-20"
72
+ backgroundColor: "$background-neutrals-subtle-hover",
73
+ borderColor: "$border-neutrals-hover"
74
74
  },
75
75
  [activeSelector]: {
76
- backgroundColor: "$gray-40",
77
- borderColor: "$indigo-30"
76
+ backgroundColor: "$background-neutrals-subtle-active",
77
+ borderColor: "$border-neutrals-active"
78
78
  },
79
79
  "&[disabled]": {
80
- backgroundColor: "$gray-30",
81
- color: "$gray-50",
82
- borderColor: "$gray-40"
80
+ backgroundColor: "$background-neutrals-disabled",
81
+ color: "$icon-neutrals-disabled",
82
+ borderColor: "$border-neutrals-disabled"
83
83
  },
84
84
  ...focusOutline
85
85
  },
86
86
  ghost: {
87
- color: "$font-primary",
87
+ color: "$icon-neutrals",
88
88
  backgroundColor: "transparent",
89
89
  ...focusFilled,
90
90
  "&:hover": {
91
- backgroundColor: "$gray-30"
91
+ backgroundColor: "$background-neutrals-subtle-hover"
92
92
  },
93
93
  [activeSelector]: {
94
- backgroundColor: "$gray-40"
94
+ backgroundColor: "$background-neutrals-subtle-active"
95
95
  },
96
96
  "&[disabled]": {
97
- color: "$gray-50"
97
+ color: "$icon-neutrals-disabled"
98
98
  }
99
99
  }
100
100
  },
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 2px var(--colors-blue-50), inset 0 0 0 3px var(--colors-white)`,\n outline: 'none',\n },\n}\n\nconst focusOutline = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-20), inset 0 0 0 1px var(--colors-blue-50), inset 0 0 0 2px var(--colors-white)`,\n outline: 'none',\n borderColor: '$blue-50',\n },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '#3859FF', // todo after updating color change to 60\n color: '$font-cta-idle',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '#2436B1', // todo after updating color change to 80\n },\n [activeSelector]: {\n backgroundColor: '$blue-80', // todo after updating color change to 90\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n 'solid-subtle': {\n backgroundColor: '$gray-20',\n color: '$font-primary',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n },\n },\n outline: {\n backgroundColor: '$white',\n color: '$font-primary',\n border: '1px solid $gray-50',\n\n '&:hover': {\n backgroundColor: '$gray-30',\n borderColor: '$indigo-20',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n borderColor: '$indigo-30',\n },\n '&[disabled]': {\n backgroundColor: '$gray-30',\n color: '$gray-50',\n borderColor: '$gray-40',\n },\n\n // order is important because of borderColor\n ...focusOutline,\n },\n ghost: {\n color: '$font-primary',\n backgroundColor: 'transparent',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$gray-30',\n },\n [activeSelector]: {\n backgroundColor: '$gray-40',\n },\n '&[disabled]': {\n color: '$gray-50',\n },\n },\n },\n size: {\n medium: {\n height: '$8',\n paddingX: '$50',\n },\n large: {\n height: '$10',\n paddingX: '$100',\n },\n 'x-large': {\n height: '$12',\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { BadgeProps } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the button style\n */\n variant?: StyledBaseButtonProps['variant']\n\n /**\n * Change the button size\n */\n size?: StyledBaseButtonProps['size']\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n variant,\n size,\n disabled = false,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n const commonProps = {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocusChange,\n onFocus,\n onBlur,\n }\n\n const { buttonProps, isPressed } = useButton(\n {\n href,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...commonProps,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n { ...commonProps, ...restProps },\n // @ts-expect-error\n refWithFallback\n )\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart: e => onHoverStart?.(e),\n onHoverEnd: e => onHoverEnd?.(e),\n onHoverChange: e => onHoverChange?.(e),\n })\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n hoverProps,\n focusPropsRing\n )\n\n const formattedChildren =\n variant === 'solid-prominent'\n ? addPropsToChildren<BadgeProps>(\n children,\n // @ts-expect-error\n child => child?.type?.displayName === 'Badge',\n { inverted: true }\n )\n : children\n\n return (\n <StyledBaseButton\n {...elementProps}\n variant={variant}\n size={size}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {formattedChildren}\n </a>\n ) : (\n formattedChildren\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,\n outline: 'none',\n },\n}\n\nconst focusOutline = {\n '&[data-focused]': {\n boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,\n outline: 'none',\n borderColor: '$blue-500',\n },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n '&[disabled]': {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n },\n 'solid-subtle': {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n '&[disabled]': {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n },\n outline: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals',\n border: '1px solid $border-neutrals',\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n borderColor: '$border-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n borderColor: '$border-neutrals-active',\n },\n '&[disabled]': {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n\n // order is important because of borderColor\n ...focusOutline,\n },\n ghost: {\n color: '$icon-neutrals',\n backgroundColor: 'transparent',\n ...focusFilled,\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n '&[disabled]': {\n color: '$icon-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: '$8',\n paddingX: '$50',\n },\n large: {\n height: '$10',\n paddingX: '$100',\n },\n 'x-large': {\n height: '$12',\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { BadgeProps } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n extends FocusEvents,\n HoverEvents,\n Omit<\n ButtonPropsA11y,\n | 'onClick'\n | 'isDisabled'\n | 'elementType'\n | 'onBlur'\n | 'onFocus'\n | 'onPressUp'\n > {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the button style\n */\n variant?: StyledBaseButtonProps['variant']\n\n /**\n * Change the button size\n */\n size?: StyledBaseButtonProps['size']\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<typeof StyledBaseButton>,\n BaseButtonProps\n>(\n (\n {\n variant,\n size,\n disabled = false,\n href,\n target,\n rel,\n children,\n onClick,\n asChild,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n onPress,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocus,\n onBlur,\n onFocusChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n\n const commonProps = {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n onPressStart,\n onPressEnd,\n onPressChange,\n onFocusChange,\n onFocus,\n onBlur,\n }\n\n const { buttonProps, isPressed } = useButton(\n {\n href,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...commonProps,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n { ...commonProps, ...restProps },\n // @ts-expect-error\n refWithFallback\n )\n const tabIndexProp = disabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart: e => onHoverStart?.(e),\n onHoverEnd: e => onHoverEnd?.(e),\n onHoverChange: e => onHoverChange?.(e),\n })\n\n const elementProps = mergeProps(\n restProps,\n asLink ? linkProps : buttonProps,\n hoverProps,\n focusPropsRing\n )\n\n const formattedChildren =\n variant === 'solid-prominent'\n ? addPropsToChildren<BadgeProps>(\n children,\n // @ts-expect-error\n child => child?.type?.displayName === 'Badge',\n { inverted: true }\n )\n : children\n\n return (\n <StyledBaseButton\n {...elementProps}\n variant={variant}\n size={size}\n disabled={disabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {formattedChildren}\n </a>\n ) : (\n formattedChildren\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -21,80 +21,146 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{
21
21
  readonly lg: "4px";
22
22
  };
23
23
  colors: {
24
+ readonly 'blue-100': any;
25
+ readonly 'blue-200': any;
26
+ readonly 'blue-300': any;
27
+ readonly 'blue-400': any;
28
+ readonly 'blue-500': any;
29
+ readonly 'blue-600': any;
30
+ readonly 'blue-700': any;
31
+ readonly 'blue-800': any;
32
+ readonly 'blue-900': any;
33
+ readonly 'blue-1000': any;
34
+ readonly 'gray-100': any;
35
+ readonly 'gray-200': any;
36
+ readonly 'gray-300': any;
37
+ readonly 'gray-400': any;
38
+ readonly 'gray-500': any;
39
+ readonly 'gray-600': any;
40
+ readonly 'gray-700': any;
41
+ readonly 'gray-800': any;
42
+ readonly 'gray-900': any;
43
+ readonly 'indigo-100': any;
44
+ readonly 'indigo-200': any;
45
+ readonly 'indigo-300': any;
46
+ readonly 'indigo-400': any;
47
+ readonly 'indigo-500': any;
48
+ readonly 'indigo-600': any;
49
+ readonly 'indigo-700': any;
50
+ readonly 'indigo-800': any;
51
+ readonly 'indigo-900': any;
52
+ readonly 'red-100': any;
53
+ readonly 'red-200': any;
54
+ readonly 'red-300': any;
55
+ readonly 'red-400': any;
56
+ readonly 'red-500': any;
57
+ readonly 'red-600': any;
58
+ readonly 'red-700': any;
59
+ readonly 'red-800': any;
60
+ readonly 'red-900': any;
61
+ readonly 'yellow-100': any;
62
+ readonly 'yellow-200': any;
63
+ readonly 'yellow-300': any;
64
+ readonly 'yellow-400': any;
65
+ readonly 'yellow-500': any;
66
+ readonly 'yellow-600': any;
67
+ readonly 'yellow-700': any;
68
+ readonly 'yellow-800': any;
69
+ readonly 'yellow-900': any;
70
+ readonly 'green-100': any;
71
+ readonly 'green-200': any;
72
+ readonly 'green-300': any;
73
+ readonly 'green-400': any;
74
+ readonly 'green-500': any;
75
+ readonly 'green-600': any;
76
+ readonly 'green-700': any;
77
+ readonly 'green-800': any;
78
+ readonly 'green-900': any;
24
79
  readonly black: any;
25
- readonly 'blue-10': any;
26
- readonly 'blue-20': any;
27
- readonly 'blue-50': any;
28
- readonly 'blue-60': any;
29
- readonly 'blue-70': any;
30
- readonly 'blue-80': any;
31
- readonly 'gray-20': any;
32
- readonly 'gray-30': any;
33
- readonly 'gray-40': any;
34
- readonly 'gray-50': any;
35
- readonly 'green-70': any;
36
- readonly 'indigo-20': any;
37
- readonly 'indigo-30': any;
38
- readonly 'indigo-50': any;
39
- readonly 'indigo-70': any;
40
- readonly 'indigo-90': any;
41
- readonly 'pink-20': any;
42
- readonly 'pink-50': any;
43
- readonly 'red-10': any;
44
- readonly 'red-20': any;
45
- readonly 'red-30': any;
46
- readonly 'red-50': any;
47
- readonly 'red-60': any;
48
- readonly transparent: any;
49
80
  readonly white: any;
50
- readonly 'yellow-20': any;
51
- readonly 'yellow-60': any;
52
- readonly 'background-cta-active'?: any;
53
- readonly 'background-cta-disabled'?: any;
54
- readonly 'background-cta-hover'?: any;
55
- readonly 'background-cta-idle'?: any;
56
- readonly 'background-danger-active'?: any;
81
+ readonly transparent: any;
82
+ readonly 'background-neutrals'?: any;
83
+ readonly 'background-neutrals-body'?: any;
84
+ readonly 'background-neutrals-container'?: any;
85
+ readonly 'background-neutrals-inverted'?: any;
86
+ readonly 'background-neutrals-inverted-subtle'?: any;
87
+ readonly 'background-neutrals-subtle'?: any;
88
+ readonly 'background-neutrals-subtle-hover'?: any;
89
+ readonly 'background-neutrals-subtle-active'?: any;
90
+ readonly 'background-neutrals-disabled'?: any;
91
+ readonly 'background-neutrals-controls-disabled'?: any;
92
+ readonly 'background-neutrals-scrolls'?: any;
93
+ readonly 'background-neutrals-inactive'?: any;
94
+ readonly 'background-neutrals-inactive-hover'?: any;
95
+ readonly 'background-primary-prominent'?: any;
96
+ readonly 'background-primary-prominent-hover'?: any;
97
+ readonly 'background-primary-prominent-active'?: any;
98
+ readonly 'background-primary-prominent-selected'?: any;
99
+ readonly 'background-primary-subtle'?: any;
100
+ readonly 'background-primary-subtle-hover'?: any;
101
+ readonly 'background-primary-subtle-active'?: any;
102
+ readonly 'background-primary-subtle-selected'?: any;
103
+ readonly 'background-danger-prominent'?: any;
104
+ readonly 'background-danger-prominent-hover'?: any;
105
+ readonly 'background-danger-prominent-active'?: any;
106
+ readonly 'background-danger'?: any;
57
107
  readonly 'background-danger-hover'?: any;
58
- readonly 'background-danger-idle'?: any;
59
- readonly 'background-default-active'?: any;
60
- readonly 'background-default-disabled'?: any;
61
- readonly 'background-default-hover'?: any;
62
- readonly 'background-default-idle'?: any;
63
- readonly 'background-default-selected'?: any;
64
- readonly 'background-default-selected-active'?: any;
65
- readonly 'background-info-idle'?: any;
66
- readonly 'background-primary'?: any;
67
- readonly 'background-secondary'?: any;
68
- readonly 'background-success-idle'?: any;
69
- readonly 'background-warning-idle'?: any;
70
- readonly 'border-cta-idle'?: any;
71
- readonly 'border-default-active'?: any;
72
- readonly 'border-default-error'?: any;
73
- readonly 'border-default-hover'?: any;
74
- readonly 'border-default-idle'?: any;
75
- readonly 'border-default-selected'?: any;
76
- readonly 'canvas-primary'?: any;
77
- readonly 'divider-default'?: any;
78
- readonly 'focus-ring-default'?: any;
79
- readonly 'font-cta-idle'?: any;
80
- readonly 'font-default-active'?: any;
81
- readonly 'font-default-disabled'?: any;
82
- readonly 'font-default-error'?: any;
83
- readonly 'font-default-hover'?: any;
84
- readonly 'font-default-idle'?: any;
85
- readonly 'font-default-selected'?: any;
86
- readonly 'font-default-visited'?: any;
87
- readonly 'font-primary'?: any;
88
- readonly 'font-secondary'?: any;
89
- readonly 'font-tertiary'?: any;
90
- readonly 'icon-cta-idle'?: any;
91
- readonly 'icon-default'?: any;
92
- readonly 'icon-default-active'?: any;
93
- readonly 'icon-default-disabled'?: any;
94
- readonly 'icon-default-error'?: any;
95
- readonly 'icon-default-hover'?: any;
96
- readonly 'icon-default-idle'?: any;
97
- readonly 'icon-default-selected'?: any;
108
+ readonly 'background-success'?: any;
109
+ readonly 'background-warning-subtle'?: any;
110
+ readonly 'background-warning-prominent'?: any;
111
+ readonly 'text-neutrals-inverted'?: any;
112
+ readonly 'text-neutrals'?: any;
113
+ readonly 'text-neutrals-subtle'?: any;
114
+ readonly 'text-neutrals-placeholder-only'?: any;
115
+ readonly 'text-neutrals-placeholder'?: any;
116
+ readonly 'text-neutrals-disabled'?: any;
117
+ readonly 'text-primary-inverted'?: any;
118
+ readonly 'text-primary'?: any;
119
+ readonly 'text-primary-hover'?: any;
120
+ readonly 'text-primary-active'?: any;
121
+ readonly 'text-primary-selected'?: any;
122
+ readonly 'text-primary-inverted-subtle'?: any;
123
+ readonly 'text-danger-inverted'?: any;
124
+ readonly 'text-danger'?: any;
125
+ readonly 'text-danger-hover'?: any;
126
+ readonly 'text-danger-active'?: any;
127
+ readonly 'text-success'?: any;
128
+ readonly 'text-warning'?: any;
129
+ readonly 'icon-neutrals-inverted'?: any;
130
+ readonly 'icon-neutrals'?: any;
131
+ readonly 'icon-neutrals-with-text'?: any;
132
+ readonly 'icon-neutrals-subtle'?: any;
133
+ readonly 'icon-neutrals-disabled'?: any;
134
+ readonly 'icon-neutrals-search'?: any;
135
+ readonly 'icon-neutrals-inactive'?: any;
136
+ readonly 'icon-neutrals-inactive-hover'?: any;
137
+ readonly 'icon-primary-inverted'?: any;
138
+ readonly 'icon-primary'?: any;
139
+ readonly 'icon-primary-hover'?: any;
140
+ readonly 'icon-primary-active'?: any;
141
+ readonly 'icon-primary-selected'?: any;
142
+ readonly 'icon-danger-inverted'?: any;
143
+ readonly 'icon-danger'?: any;
144
+ readonly 'icon-danger-hover'?: any;
145
+ readonly 'icon-danger-active'?: any;
146
+ readonly 'icon-success-inverted'?: any;
147
+ readonly 'icon-success'?: any;
148
+ readonly 'icon-warning'?: any;
149
+ readonly 'border-neutrals'?: any;
150
+ readonly 'border-neutrals-hover'?: any;
151
+ readonly 'border-neutrals-active'?: any;
152
+ readonly 'border-neutrals-disabled'?: any;
153
+ readonly 'border-neutrals-controls'?: any;
154
+ readonly 'border-neutrals-controls-disabled'?: any;
155
+ readonly 'border-neutrals-subtle'?: any;
156
+ readonly 'border-neutrals-inverted'?: any;
157
+ readonly 'border-primary'?: any;
158
+ readonly 'border-primary-hover'?: any;
159
+ readonly 'border-primary-active'?: any;
160
+ readonly 'border-primary-inverted'?: any;
161
+ readonly 'border-danger'?: any;
162
+ readonly 'border-success'?: any;
163
+ readonly 'border-warning'?: any;
98
164
  };
99
165
  'font-sizes': {
100
166
  readonly 150: "0.75rem";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-button",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -33,13 +33,13 @@
33
33
  "@react-aria/utils": "^3.13.0",
34
34
  "@react-types/button": "^3.5.0",
35
35
  "@react-types/shared": "^3.16.0",
36
- "@mirohq/design-system-badge": "^0.1.1",
36
+ "@mirohq/design-system-badge": "^0.1.2",
37
37
  "@mirohq/design-system-primitive": "^1.0.4",
38
- "@mirohq/design-system-stitches": "^2.0.10",
38
+ "@mirohq/design-system-stitches": "^2.0.11",
39
39
  "@mirohq/design-system-utils": "^0.11.0"
40
40
  },
41
41
  "devDependencies": {
42
- "@mirohq/design-system-icons": "^0.2.2"
42
+ "@mirohq/design-system-icons": "^0.3.1"
43
43
  },
44
44
  "scripts": {
45
45
  "build": "rollup -c ../../../../rollup.config.js",