@mirohq/design-system-badge 0.1.0 → 0.1.2-colors.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 (6) hide show
  1. package/dist/main.js +1 -0
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +1 -0
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +137 -71
  6. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -22,6 +22,7 @@ const sharedStyles = {
22
22
  display: "flex",
23
23
  justifyContent: "center",
24
24
  position: "absolute",
25
+ pointerEvents: "none",
25
26
  zIndex: 1,
26
27
  variants: {
27
28
  inverted: {
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$blue-60',\n borderColor: '$white',\n borderRadius: '$half',\n color: '$white',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$white',\n borderColor: '$blue-60',\n color: '$blue-60',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n border: '2px solid #fff',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(({ show, content, children, ...restProps }, forwardRef) => {\n if (!show) {\n return children as ReactElement\n }\n\n return (\n <StyledBadgeContainer data-testid='badge'>\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...restProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...restProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n})\n"],"names":["styled","Primitive","React"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$blue-60',\n borderColor: '$white',\n borderRadius: '$half',\n color: '$white',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$white',\n borderColor: '$blue-60',\n color: '$blue-60',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n border: '2px solid #fff',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(({ show, content, children, ...restProps }, forwardRef) => {\n if (!show) {\n return children as ReactElement\n }\n\n return (\n <StyledBadgeContainer data-testid='badge'>\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...restProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...restProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n})\n"],"names":["styled","Primitive","React"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -14,6 +14,7 @@ const sharedStyles = {
14
14
  display: "flex",
15
15
  justifyContent: "center",
16
16
  position: "absolute",
17
+ pointerEvents: "none",
17
18
  zIndex: 1,
18
19
  variants: {
19
20
  inverted: {
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$blue-60',\n borderColor: '$white',\n borderRadius: '$half',\n color: '$white',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$white',\n borderColor: '$blue-60',\n color: '$blue-60',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n border: '2px solid #fff',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(({ show, content, children, ...restProps }, forwardRef) => {\n if (!show) {\n return children as ReactElement\n }\n\n return (\n <StyledBadgeContainer data-testid='badge'>\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...restProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...restProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n})\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$blue-60',\n borderColor: '$white',\n borderRadius: '$half',\n color: '$white',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$white',\n borderColor: '$blue-60',\n color: '$blue-60',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n border: '2px solid #fff',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type { ElementRef, ReactNode, ReactElement } from 'react'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n}\n\nexport const Badge = React.forwardRef<\n ElementRef<typeof StyledBadge>,\n BadgeProps\n>(({ show, content, children, ...restProps }, forwardRef) => {\n if (!show) {\n return children as ReactElement\n }\n\n return (\n <StyledBadgeContainer data-testid='badge'>\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...restProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...restProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n})\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -13,80 +13,146 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Pick<Omit<{}, never>
13
13
  readonly lg: "4px";
14
14
  };
15
15
  colors: {
16
+ readonly 'blue-100': any;
17
+ readonly 'blue-200': any;
18
+ readonly 'blue-300': any;
19
+ readonly 'blue-400': any;
20
+ readonly 'blue-500': any;
21
+ readonly 'blue-600': any;
22
+ readonly 'blue-700': any;
23
+ readonly 'blue-800': any;
24
+ readonly 'blue-900': any;
25
+ readonly 'blue-1000': any;
26
+ readonly 'gray-100': any;
27
+ readonly 'gray-200': any;
28
+ readonly 'gray-300': any;
29
+ readonly 'gray-400': any;
30
+ readonly 'gray-500': any;
31
+ readonly 'gray-600': any;
32
+ readonly 'gray-700': any;
33
+ readonly 'gray-800': any;
34
+ readonly 'gray-900': any;
35
+ readonly 'indigo-100': any;
36
+ readonly 'indigo-200': any;
37
+ readonly 'indigo-300': any;
38
+ readonly 'indigo-400': any;
39
+ readonly 'indigo-500': any;
40
+ readonly 'indigo-600': any;
41
+ readonly 'indigo-700': any;
42
+ readonly 'indigo-800': any;
43
+ readonly 'indigo-900': any;
44
+ readonly 'red-100': any;
45
+ readonly 'red-200': any;
46
+ readonly 'red-300': any;
47
+ readonly 'red-400': any;
48
+ readonly 'red-500': any;
49
+ readonly 'red-600': any;
50
+ readonly 'red-700': any;
51
+ readonly 'red-800': any;
52
+ readonly 'red-900': any;
53
+ readonly 'yellow-100': any;
54
+ readonly 'yellow-200': any;
55
+ readonly 'yellow-300': any;
56
+ readonly 'yellow-400': any;
57
+ readonly 'yellow-500': any;
58
+ readonly 'yellow-600': any;
59
+ readonly 'yellow-700': any;
60
+ readonly 'yellow-800': any;
61
+ readonly 'yellow-900': any;
62
+ readonly 'green-100': any;
63
+ readonly 'green-200': any;
64
+ readonly 'green-300': any;
65
+ readonly 'green-400': any;
66
+ readonly 'green-500': any;
67
+ readonly 'green-600': any;
68
+ readonly 'green-700': any;
69
+ readonly 'green-800': any;
70
+ readonly 'green-900': any;
16
71
  readonly black: any;
17
- readonly 'blue-10': any;
18
- readonly 'blue-20': any;
19
- readonly 'blue-50': any;
20
- readonly 'blue-60': any;
21
- readonly 'blue-70': any;
22
- readonly 'blue-80': any;
23
- readonly 'gray-20': any;
24
- readonly 'gray-30': any;
25
- readonly 'gray-40': any;
26
- readonly 'gray-50': any;
27
- readonly 'green-70': any;
28
- readonly 'indigo-20': any;
29
- readonly 'indigo-30': any;
30
- readonly 'indigo-50': any;
31
- readonly 'indigo-70': any;
32
- readonly 'indigo-90': any;
33
- readonly 'pink-20': any;
34
- readonly 'pink-50': any;
35
- readonly 'red-10': any;
36
- readonly 'red-20': any;
37
- readonly 'red-30': any;
38
- readonly 'red-50': any;
39
- readonly 'red-60': any;
40
- readonly transparent: any;
41
72
  readonly white: any;
42
- readonly 'yellow-20': any;
43
- readonly 'yellow-60': any;
44
- readonly 'background-cta-active'?: any;
45
- readonly 'background-cta-disabled'?: any;
46
- readonly 'background-cta-hover'?: any;
47
- readonly 'background-cta-idle'?: any;
48
- readonly 'background-danger-active'?: any;
73
+ readonly transparent: any;
74
+ readonly 'background-neutrals'?: any;
75
+ readonly 'background-neutrals-body'?: any;
76
+ readonly 'background-neutrals-container'?: any;
77
+ readonly 'background-neutrals-inverted'?: any;
78
+ readonly 'background-neutrals-inverted-subtle'?: any;
79
+ readonly 'background-neutrals-subtle'?: any;
80
+ readonly 'background-neutrals-subtle-hover'?: any;
81
+ readonly 'background-neutrals-subtle-active'?: any;
82
+ readonly 'background-neutrals-disabled'?: any;
83
+ readonly 'background-neutrals-controls-disabled'?: any;
84
+ readonly 'background-neutrals-scrolls'?: any;
85
+ readonly 'background-neutrals-inactive'?: any;
86
+ readonly 'background-neutrals-inactive-hover'?: any;
87
+ readonly 'background-primary-prominent'?: any;
88
+ readonly 'background-primary-prominent-hover'?: any;
89
+ readonly 'background-primary-prominent-active'?: any;
90
+ readonly 'background-primary-prominent-selected'?: any;
91
+ readonly 'background-primary-subtle'?: any;
92
+ readonly 'background-primary-subtle-hover'?: any;
93
+ readonly 'background-primary-subtle-active'?: any;
94
+ readonly 'background-primary-subtle-selected'?: any;
95
+ readonly 'background-danger-prominent'?: any;
96
+ readonly 'background-danger-prominent-hover'?: any;
97
+ readonly 'background-danger-prominent-active'?: any;
98
+ readonly 'background-danger'?: any;
49
99
  readonly 'background-danger-hover'?: any;
50
- readonly 'background-danger-idle'?: any;
51
- readonly 'background-default-active'?: any;
52
- readonly 'background-default-disabled'?: any;
53
- readonly 'background-default-hover'?: any;
54
- readonly 'background-default-idle'?: any;
55
- readonly 'background-default-selected'?: any;
56
- readonly 'background-default-selected-active'?: any;
57
- readonly 'background-info-idle'?: any;
58
- readonly 'background-primary'?: any;
59
- readonly 'background-secondary'?: any;
60
- readonly 'background-success-idle'?: any;
61
- readonly 'background-warning-idle'?: any;
62
- readonly 'border-cta-idle'?: any;
63
- readonly 'border-default-active'?: any;
64
- readonly 'border-default-error'?: any;
65
- readonly 'border-default-hover'?: any;
66
- readonly 'border-default-idle'?: any;
67
- readonly 'border-default-selected'?: any;
68
- readonly 'canvas-primary'?: any;
69
- readonly 'divider-default'?: any;
70
- readonly 'focus-ring-default'?: any;
71
- readonly 'font-cta-idle'?: any;
72
- readonly 'font-default-active'?: any;
73
- readonly 'font-default-disabled'?: any;
74
- readonly 'font-default-error'?: any;
75
- readonly 'font-default-hover'?: any;
76
- readonly 'font-default-idle'?: any;
77
- readonly 'font-default-selected'?: any;
78
- readonly 'font-default-visited'?: any;
79
- readonly 'font-primary'?: any;
80
- readonly 'font-secondary'?: any;
81
- readonly 'font-tertiary'?: any;
82
- readonly 'icon-cta-idle'?: any;
83
- readonly 'icon-default'?: any;
84
- readonly 'icon-default-active'?: any;
85
- readonly 'icon-default-disabled'?: any;
86
- readonly 'icon-default-error'?: any;
87
- readonly 'icon-default-hover'?: any;
88
- readonly 'icon-default-idle'?: any;
89
- readonly 'icon-default-selected'?: any;
100
+ readonly 'background-success'?: any;
101
+ readonly 'background-warning-subtle'?: any;
102
+ readonly 'background-warning-prominent'?: any;
103
+ readonly 'text-neutrals-inverted'?: any;
104
+ readonly 'text-neutrals'?: any;
105
+ readonly 'text-neutrals-subtle'?: any;
106
+ readonly 'text-neutrals-placeholder-only'?: any;
107
+ readonly 'text-neutrals-placeholder'?: any;
108
+ readonly 'text-neutrals-disabled'?: any;
109
+ readonly 'text-primary-inverted'?: any;
110
+ readonly 'text-primary'?: any;
111
+ readonly 'text-primary-hover'?: any;
112
+ readonly 'text-primary-active'?: any;
113
+ readonly 'text-primary-selected'?: any;
114
+ readonly 'text-primary-inverted-subtle'?: any;
115
+ readonly 'text-danger-inverted'?: any;
116
+ readonly 'text-danger'?: any;
117
+ readonly 'text-danger-hover'?: any;
118
+ readonly 'text-danger-active'?: any;
119
+ readonly 'text-success'?: any;
120
+ readonly 'text-warning'?: any;
121
+ readonly 'icon-neutrals-inverted'?: any;
122
+ readonly 'icon-neutrals'?: any;
123
+ readonly 'icon-neutrals-with-text'?: any;
124
+ readonly 'icon-neutrals-subtle'?: any;
125
+ readonly 'icon-neutrals-disabled'?: any;
126
+ readonly 'icon-neutrals-search'?: any;
127
+ readonly 'icon-neutrals-inactive'?: any;
128
+ readonly 'icon-neutrals-inactive-hover'?: any;
129
+ readonly 'icon-primary-inverted'?: any;
130
+ readonly 'icon-primary'?: any;
131
+ readonly 'icon-primary-hover'?: any;
132
+ readonly 'icon-primary-active'?: any;
133
+ readonly 'icon-primary-selected'?: any;
134
+ readonly 'icon-danger-inverted'?: any;
135
+ readonly 'icon-danger'?: any;
136
+ readonly 'icon-danger-hover'?: any;
137
+ readonly 'icon-danger-active'?: any;
138
+ readonly 'icon-success-inverted'?: any;
139
+ readonly 'icon-success'?: any;
140
+ readonly 'icon-warning'?: any;
141
+ readonly 'border-neutrals'?: any;
142
+ readonly 'border-neutrals-hover'?: any;
143
+ readonly 'border-neutrals-active'?: any;
144
+ readonly 'border-neutrals-disabled'?: any;
145
+ readonly 'border-neutrals-controls'?: any;
146
+ readonly 'border-neutrals-controls-disabled'?: any;
147
+ readonly 'border-neutrals-subtle'?: any;
148
+ readonly 'border-neutrals-inverted'?: any;
149
+ readonly 'border-primary'?: any;
150
+ readonly 'border-primary-hover'?: any;
151
+ readonly 'border-primary-active'?: any;
152
+ readonly 'border-primary-inverted'?: any;
153
+ readonly 'border-danger'?: any;
154
+ readonly 'border-success'?: any;
155
+ readonly 'border-warning'?: any;
90
156
  };
91
157
  'font-sizes': {
92
158
  readonly 150: "0.75rem";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-badge",
3
- "version": "0.1.0",
3
+ "version": "0.1.2-colors.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,10 +27,10 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@mirohq/design-system-primitive": "^1.0.4",
30
- "@mirohq/design-system-stitches": "^2.0.10"
30
+ "@mirohq/design-system-stitches": "^2.0.11-colors.0"
31
31
  },
32
32
  "devDependencies": {
33
- "@mirohq/design-system-button": "^2.0.16"
33
+ "@mirohq/design-system-button": "^2.0.17-colors.0"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "rollup -c ../../../../rollup.config.js",