@coveord/plasma-mantine 52.4.2 → 52.5.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.
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +29 -79
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/prompt/Prompt.d.ts +6 -1
- package/dist/cjs/components/prompt/Prompt.d.ts.map +1 -1
- package/dist/cjs/components/prompt/Prompt.js +6 -8
- package/dist/cjs/components/prompt/Prompt.js.map +1 -1
- package/dist/cjs/components/table/Th.d.ts.map +1 -1
- package/dist/cjs/components/table/Th.js +5 -2
- package/dist/cjs/components/table/Th.js.map +1 -1
- package/dist/cjs/theme/Theme.d.ts +1 -1
- package/dist/cjs/theme/Theme.d.ts.map +1 -1
- package/dist/cjs/theme/Theme.js +88 -6
- package/dist/cjs/theme/Theme.js.map +1 -1
- package/dist/esm/components/prompt/Prompt.d.ts +6 -1
- package/dist/esm/components/prompt/Prompt.d.ts.map +1 -1
- package/dist/esm/components/prompt/Prompt.js +6 -8
- package/dist/esm/components/prompt/Prompt.js.map +1 -1
- package/dist/esm/components/table/Th.d.ts.map +1 -1
- package/dist/esm/components/table/Th.js +5 -2
- package/dist/esm/components/table/Th.js.map +1 -1
- package/dist/esm/theme/Theme.d.ts +1 -1
- package/dist/esm/theme/Theme.d.ts.map +1 -1
- package/dist/esm/theme/Theme.js +89 -7
- package/dist/esm/theme/Theme.js.map +1 -1
- package/package.json +26 -26
- package/src/components/prompt/Prompt.tsx +10 -7
- package/src/components/table/Th.tsx +7 -4
- package/src/theme/Theme.tsx +90 -7
package/dist/esm/theme/Theme.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { _ as _define_property } from "@swc/helpers/_/_define_property";
|
|
1
2
|
import { _ as _object_destructuring_empty } from "@swc/helpers/_/_object_destructuring_empty";
|
|
2
3
|
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
-
import { InfoSize24Px } from "@coveord/plasma-react-icons";
|
|
5
|
+
import { CheckSize16Px, InfoSize24Px } from "@coveord/plasma-react-icons";
|
|
5
6
|
import { color } from "@coveord/plasma-tokens";
|
|
6
7
|
import { getSize, rem } from "@mantine/core";
|
|
7
8
|
import { PlasmaColors } from "./PlasmaColors";
|
|
@@ -123,7 +124,7 @@ export var plasmaTheme = {
|
|
|
123
124
|
},
|
|
124
125
|
Modal: {
|
|
125
126
|
styles: function(theme, param, param1) {
|
|
126
|
-
var fullScreen = param.fullScreen, size = param1.size;
|
|
127
|
+
var fullScreen = param.fullScreen, padding = param.padding, size = param1.size, variant = param1.variant;
|
|
127
128
|
return {
|
|
128
129
|
content: {
|
|
129
130
|
flex: fullScreen ? "0 0 100%" : "0 0 ".concat(getSize({
|
|
@@ -143,14 +144,25 @@ export var plasmaTheme = {
|
|
|
143
144
|
fontSize: theme.headings.sizes.h3.fontSize,
|
|
144
145
|
lineHeight: theme.headings.sizes.h3.lineHeight,
|
|
145
146
|
fontWeight: 500
|
|
147
|
+
},
|
|
148
|
+
header: {
|
|
149
|
+
borderBottom: variant !== "prompt" ? "1px solid ".concat(color.primary.gray[3]) : null
|
|
150
|
+
},
|
|
151
|
+
body: {
|
|
152
|
+
"&:not(:only-child)": {
|
|
153
|
+
paddingTop: variant === "prompt" ? 0 : getSize({
|
|
154
|
+
size: padding,
|
|
155
|
+
sizes: plasmaTheme.spacing
|
|
156
|
+
})
|
|
157
|
+
}
|
|
146
158
|
}
|
|
147
159
|
};
|
|
148
|
-
}
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
ModalOverlay: {
|
|
149
163
|
defaultProps: {
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
opacity: 0.9
|
|
153
|
-
}
|
|
164
|
+
color: color.primary.navy[9],
|
|
165
|
+
opacity: 0.9
|
|
154
166
|
}
|
|
155
167
|
},
|
|
156
168
|
InputWrapper: {
|
|
@@ -323,6 +335,76 @@ export var plasmaTheme = {
|
|
|
323
335
|
zIndex: "unset"
|
|
324
336
|
}
|
|
325
337
|
}
|
|
338
|
+
},
|
|
339
|
+
Stepper: {
|
|
340
|
+
defaultProps: {
|
|
341
|
+
size: "xs",
|
|
342
|
+
completedIcon: /*#__PURE__*/ _jsx(CheckSize16Px, {})
|
|
343
|
+
},
|
|
344
|
+
styles: function(theme, param, param1) {
|
|
345
|
+
var ref = _object_destructuring_empty(param), size = param1.size;
|
|
346
|
+
return {
|
|
347
|
+
step: {
|
|
348
|
+
"&[disabled]": {
|
|
349
|
+
color: theme.colors.gray[5],
|
|
350
|
+
"& .mantine-Stepper-stepDescription": {
|
|
351
|
+
color: theme.colors.gray[5]
|
|
352
|
+
},
|
|
353
|
+
"& .mantine-Stepper-stepIcon": {
|
|
354
|
+
borderColor: theme.colors.gray[1]
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
},
|
|
358
|
+
stepIcon: {
|
|
359
|
+
fontWeight: 500,
|
|
360
|
+
backgroundColor: theme.colors.gray[1],
|
|
361
|
+
color: "inherit",
|
|
362
|
+
border: "".concat(rem(1), " solid ").concat(theme.colors.gray[3]),
|
|
363
|
+
"&[data-progress]": {
|
|
364
|
+
backgroundColor: theme.white
|
|
365
|
+
},
|
|
366
|
+
"&[data-completed]": {
|
|
367
|
+
backgroundColor: theme.white,
|
|
368
|
+
borderColor: theme.colors.lime[6],
|
|
369
|
+
color: theme.colors.lime[6]
|
|
370
|
+
}
|
|
371
|
+
},
|
|
372
|
+
stepCompletedIcon: {
|
|
373
|
+
color: theme.colors.lime[6],
|
|
374
|
+
fontSize: rem(16)
|
|
375
|
+
},
|
|
376
|
+
stepDescription: {
|
|
377
|
+
color: theme.colors.gray[7],
|
|
378
|
+
fontSize: getSize({
|
|
379
|
+
size: size,
|
|
380
|
+
sizes: theme.fontSizes
|
|
381
|
+
})
|
|
382
|
+
},
|
|
383
|
+
separator: {
|
|
384
|
+
height: rem(1),
|
|
385
|
+
backgroundColor: theme.colors.gray[3]
|
|
386
|
+
},
|
|
387
|
+
separatorActive: {
|
|
388
|
+
backgroundColor: theme.colors.gray[3]
|
|
389
|
+
},
|
|
390
|
+
verticalSeparator: {
|
|
391
|
+
borderLeft: "".concat(rem(1), " solid ").concat(theme.colors.gray[3])
|
|
392
|
+
},
|
|
393
|
+
verticalSeparatorActive: {
|
|
394
|
+
borderColor: theme.colors.gray[3]
|
|
395
|
+
}
|
|
396
|
+
};
|
|
397
|
+
}
|
|
398
|
+
},
|
|
399
|
+
Tabs: {
|
|
400
|
+
styles: function(theme, param) {
|
|
401
|
+
var orientation = param.orientation;
|
|
402
|
+
var _obj;
|
|
403
|
+
return {
|
|
404
|
+
tabsList: _define_property({}, orientation === "horizontal" ? "borderBottom" : "borderRight", "".concat(rem(1), " solid ").concat(theme.colors.gray[3])),
|
|
405
|
+
tab: (_obj = {}, _define_property(_obj, orientation === "horizontal" ? "borderBottom" : "borderRight", "".concat(rem(1), " solid transparent")), _define_property(_obj, orientation === "horizontal" ? "marginBottom" : "marginRight", rem(-1)), _obj)
|
|
406
|
+
};
|
|
407
|
+
}
|
|
326
408
|
}
|
|
327
409
|
}
|
|
328
410
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {getSize, MantineThemeOverride, NotificationProps, rem} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeight: 1.5,\n spacing: {\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},\n h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: {\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n },\n },\n },\n Text: {\n defaultProps: {\n weight: 300,\n },\n styles: (theme, {}, {size}) => ({\n root: {\n fontSize: getSize({size: size ?? 'sm', sizes: theme.fontSizes}),\n },\n }),\n },\n Button: {\n styles: () => ({\n root: {\n fontWeight: 400,\n },\n }),\n variants: {\n outline: () => ({\n root: {\n backgroundColor: 'white',\n },\n }),\n },\n },\n Modal: {\n styles: (theme, {fullScreen}, {size}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(440),\n sm: rem(550),\n md: rem(800),\n lg: rem(1334),\n xl: rem('85%'),\n },\n })}`,\n overflow: 'auto',\n },\n title: {\n width: '100%',\n fontSize: theme.headings.sizes.h3.fontSize,\n lineHeight: theme.headings.sizes.h3.lineHeight,\n fontWeight: 500,\n },\n }),\n defaultProps: {\n overlayProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\n },\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n },\n description: {\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n zIndex: 10000,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action.6',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n styles: (theme) => ({\n label: {\n fontSize: theme.fontSizes.sm,\n fontWeight: 300,\n },\n }),\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n Notification: {\n styles: (theme, {color: notificationType}: NotificationProps) => ({\n root: {\n borderColor: theme.colors.gray[3],\n backgroundColor: theme.colors.gray[0],\n boxShadow: theme.shadows.lg,\n padding: theme.spacing.sm,\n '&[data-with-icon]': {\n paddingLeft: theme.spacing.sm,\n },\n },\n icon: {\n backgroundColor: 'transparent',\n marginRight: theme.spacing.sm,\n color: theme.colors?.[notificationType][6],\n },\n closeButton: {\n margin: theme.spacing.xs,\n color: theme.colors.gray[5],\n },\n }),\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n },\n Skeleton: {\n styles: {\n visible: {\n '&::before': {zIndex: 'unset'},\n '&::after': {zIndex: 'unset'},\n },\n },\n },\n Segmented: {\n styles: {\n control: {\n zIndex: 'unset',\n },\n },\n },\n },\n};\n"],"names":["InfoSize24Px","color","getSize","rem","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","root","letterSpacing","Text","weight","theme","size","fontSizes","Button","variants","outline","backgroundColor","Modal","fullScreen","content","flex","overflow","width","overlayProps","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","zIndex","Loader","variant","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","Segmented","control"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {CheckSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n getSize,\n rem,\n type MantineThemeOverride,\n type NotificationProps,\n type StepperStylesParams,\n type TabsStylesParams,\n} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeight: 1.5,\n spacing: {\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},\n h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: {\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n },\n },\n },\n Text: {\n defaultProps: {\n weight: 300,\n },\n styles: (theme, {}, {size}) => ({\n root: {\n fontSize: getSize({size: size ?? 'sm', sizes: theme.fontSizes}),\n },\n }),\n },\n Button: {\n styles: () => ({\n root: {\n fontWeight: 400,\n },\n }),\n variants: {\n outline: () => ({\n root: {\n backgroundColor: 'white',\n },\n }),\n },\n },\n Modal: {\n styles: (theme, {fullScreen, padding}, {size, variant}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(440),\n sm: rem(550),\n md: rem(800),\n lg: rem(1334),\n xl: rem('85%'),\n },\n })}`,\n overflow: 'auto',\n },\n title: {\n width: '100%',\n fontSize: theme.headings.sizes.h3.fontSize,\n lineHeight: theme.headings.sizes.h3.lineHeight,\n fontWeight: 500,\n },\n header: {\n borderBottom: variant !== 'prompt' ? `1px solid ${color.primary.gray[3]}` : null,\n },\n body: {\n '&:not(:only-child)': {\n paddingTop: variant === 'prompt' ? 0 : getSize({size: padding, sizes: plasmaTheme.spacing}),\n },\n },\n }),\n },\n ModalOverlay: {\n defaultProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n },\n description: {\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n zIndex: 10000,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action.6',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n styles: (theme) => ({\n label: {\n fontSize: theme.fontSizes.sm,\n fontWeight: 300,\n },\n }),\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n Notification: {\n styles: (theme, {color: notificationType}: NotificationProps) => ({\n root: {\n borderColor: theme.colors.gray[3],\n backgroundColor: theme.colors.gray[0],\n boxShadow: theme.shadows.lg,\n padding: theme.spacing.sm,\n '&[data-with-icon]': {\n paddingLeft: theme.spacing.sm,\n },\n },\n icon: {\n backgroundColor: 'transparent',\n marginRight: theme.spacing.sm,\n color: theme.colors?.[notificationType][6],\n },\n closeButton: {\n margin: theme.spacing.xs,\n color: theme.colors.gray[5],\n },\n }),\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n },\n Skeleton: {\n styles: {\n visible: {\n '&::before': {zIndex: 'unset'},\n '&::after': {zIndex: 'unset'},\n },\n },\n },\n Segmented: {\n styles: {\n control: {\n zIndex: 'unset',\n },\n },\n },\n Stepper: {\n defaultProps: {\n size: 'xs',\n completedIcon: <CheckSize16Px />,\n },\n styles: (theme, {}: StepperStylesParams, {size}) => ({\n step: {\n '&[disabled]': {\n color: theme.colors.gray[5],\n '& .mantine-Stepper-stepDescription': {\n color: theme.colors.gray[5],\n },\n '& .mantine-Stepper-stepIcon': {\n borderColor: theme.colors.gray[1],\n },\n },\n },\n stepIcon: {\n fontWeight: 500,\n backgroundColor: theme.colors.gray[1],\n color: 'inherit',\n border: `${rem(1)} solid ${theme.colors.gray[3]}`,\n '&[data-progress]': {\n backgroundColor: theme.white,\n },\n\n '&[data-completed]': {\n backgroundColor: theme.white,\n borderColor: theme.colors.lime[6],\n color: theme.colors.lime[6],\n },\n },\n stepCompletedIcon: {\n color: theme.colors.lime[6],\n fontSize: rem(16),\n },\n stepDescription: {\n color: theme.colors.gray[7],\n fontSize: getSize({size, sizes: theme.fontSizes}),\n },\n separator: {\n height: rem(1),\n backgroundColor: theme.colors.gray[3],\n },\n separatorActive: {\n backgroundColor: theme.colors.gray[3],\n },\n verticalSeparator: {\n borderLeft: `${rem(1)} solid ${theme.colors.gray[3]}`,\n },\n verticalSeparatorActive: {\n borderColor: theme.colors.gray[3],\n },\n }),\n },\n Tabs: {\n styles: (theme, {orientation}: TabsStylesParams) => ({\n tabsList: {\n [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid ${\n theme.colors.gray[3]\n }`,\n },\n tab: {\n [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid transparent`,\n [orientation === 'horizontal' ? 'marginBottom' : 'marginRight']: rem(-1),\n },\n }),\n },\n },\n};\n"],"names":["CheckSize16Px","InfoSize24Px","color","getSize","rem","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","root","letterSpacing","Text","weight","theme","size","fontSizes","Button","variants","outline","backgroundColor","Modal","fullScreen","padding","variant","content","flex","overflow","width","header","borderBottom","body","paddingTop","ModalOverlay","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","zIndex","Loader","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","Segmented","control","Stepper","completedIcon","step","stepIcon","border","white","lime","stepCompletedIcon","stepDescription","separator","separatorActive","verticalSeparator","borderLeft","verticalSeparatorActive","Tabs","orientation","tabsList","tab"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coveord/plasma-mantine",
|
|
3
|
-
"version": "52.
|
|
3
|
+
"version": "52.5.0",
|
|
4
4
|
"description": "A Plasma flavoured Mantine theme",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"plasma",
|
|
@@ -31,57 +31,57 @@
|
|
|
31
31
|
"@dnd-kit/modifiers": "6.0.1",
|
|
32
32
|
"@dnd-kit/sortable": "7.0.2",
|
|
33
33
|
"@dnd-kit/utilities": "3.2.1",
|
|
34
|
-
"@mantine/utils": "6.0.
|
|
35
|
-
"@monaco-editor/react": "4.5.
|
|
34
|
+
"@mantine/utils": "6.0.11",
|
|
35
|
+
"@monaco-editor/react": "4.5.1",
|
|
36
36
|
"@swc/helpers": "0.5.1",
|
|
37
|
-
"@tanstack/react-table": "8.
|
|
38
|
-
"@tanstack/table-core": "8.
|
|
37
|
+
"@tanstack/react-table": "8.9.1",
|
|
38
|
+
"@tanstack/table-core": "8.9.1",
|
|
39
39
|
"dayjs": "1.11.7",
|
|
40
40
|
"fast-deep-equal": "3.1.3",
|
|
41
41
|
"lodash.debounce": "4.0.8",
|
|
42
42
|
"lodash.defaultsdeep": "4.6.1",
|
|
43
|
-
"monaco-editor": "0.
|
|
44
|
-
"@coveord/plasma-react-icons": "52.
|
|
45
|
-
"@coveord/plasma-tokens": "52.
|
|
43
|
+
"monaco-editor": "0.38.0",
|
|
44
|
+
"@coveord/plasma-react-icons": "52.5.0",
|
|
45
|
+
"@coveord/plasma-tokens": "52.5.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@emotion/react": "11.10.
|
|
49
|
-
"@mantine/carousel": "6.0.
|
|
50
|
-
"@mantine/core": "6.0.
|
|
51
|
-
"@mantine/dates": "6.0.
|
|
52
|
-
"@mantine/form": "6.0.
|
|
53
|
-
"@mantine/hooks": "6.0.
|
|
54
|
-
"@mantine/modals": "6.0.
|
|
55
|
-
"@mantine/notifications": "6.0.
|
|
48
|
+
"@emotion/react": "11.10.8",
|
|
49
|
+
"@mantine/carousel": "6.0.11",
|
|
50
|
+
"@mantine/core": "6.0.11",
|
|
51
|
+
"@mantine/dates": "6.0.11",
|
|
52
|
+
"@mantine/form": "6.0.11",
|
|
53
|
+
"@mantine/hooks": "6.0.11",
|
|
54
|
+
"@mantine/modals": "6.0.11",
|
|
55
|
+
"@mantine/notifications": "6.0.11",
|
|
56
56
|
"@swc/cli": "0.1.62",
|
|
57
|
-
"@swc/core": "1.3.
|
|
57
|
+
"@swc/core": "1.3.58",
|
|
58
58
|
"@swc/jest": "0.2.26",
|
|
59
|
-
"@testing-library/dom": "8.20.0",
|
|
60
59
|
"@testing-library/jest-dom": "5.16.5",
|
|
61
60
|
"@testing-library/react": "13.4.0",
|
|
62
61
|
"@testing-library/user-event": "14.4.3",
|
|
63
|
-
"@types/jest": "29.1
|
|
62
|
+
"@types/jest": "29.5.1",
|
|
64
63
|
"@types/lodash.debounce": "^4.0.7",
|
|
65
64
|
"@types/lodash.defaultsdeep": "4.6.7",
|
|
66
|
-
"@types/react": "18.2.
|
|
67
|
-
"@types/react-dom": "18.2.
|
|
65
|
+
"@types/react": "18.2.6",
|
|
66
|
+
"@types/react-dom": "18.2.4",
|
|
68
67
|
"@types/testing-library__jest-dom": "5.14.5",
|
|
69
68
|
"csstype": "3.1.2",
|
|
70
69
|
"embla-carousel-react": "7.1.0",
|
|
71
|
-
"eslint-plugin-testing-library": "5.
|
|
72
|
-
"eslint-plugin-vitest": "0.
|
|
70
|
+
"eslint-plugin-testing-library": "5.11.0",
|
|
71
|
+
"eslint-plugin-vitest": "0.2.2",
|
|
73
72
|
"eslint-plugin-vitest-globals": "1.3.1",
|
|
74
73
|
"identity-obj-proxy": "3.0.0",
|
|
75
|
-
"jest": "29.
|
|
76
|
-
"jest-environment-jsdom": "29.
|
|
74
|
+
"jest": "29.5.0",
|
|
75
|
+
"jest-environment-jsdom": "29.5.0",
|
|
77
76
|
"jest-junit": "13.2.0",
|
|
78
77
|
"npm-run-all": "4.1.5",
|
|
78
|
+
"publint": "0.1.11",
|
|
79
79
|
"react": "18.2.0",
|
|
80
80
|
"react-dom": "18.2.0",
|
|
81
81
|
"rimraf": "3.0.2",
|
|
82
82
|
"tslib": "2.5.0",
|
|
83
83
|
"typescript": "5.0.3",
|
|
84
|
-
"vitest": "0.
|
|
84
|
+
"vitest": "0.31.0"
|
|
85
85
|
},
|
|
86
86
|
"peerDependencies": {
|
|
87
87
|
"@emotion/react": "^11.10.0",
|
|
@@ -18,7 +18,6 @@ const useStyles = createStyles((theme) => ({
|
|
|
18
18
|
fontSize: theme.headings.sizes.h3.fontSize,
|
|
19
19
|
lineHeight: theme.headings.sizes.h3.lineHeight,
|
|
20
20
|
},
|
|
21
|
-
default: {},
|
|
22
21
|
success: {backgroundColor: theme.colors.lime[6], color: color.primary.pureWhite},
|
|
23
22
|
warning: {backgroundColor: theme.colors.yellow[5], color: color.primary.pureWhite},
|
|
24
23
|
critical: {
|
|
@@ -33,7 +32,12 @@ const useStyles = createStyles((theme) => ({
|
|
|
33
32
|
}));
|
|
34
33
|
|
|
35
34
|
export interface PromptProps extends ModalProps {
|
|
36
|
-
|
|
35
|
+
/**
|
|
36
|
+
* Controls prompt appearance
|
|
37
|
+
*
|
|
38
|
+
* @default "info"
|
|
39
|
+
*/
|
|
40
|
+
variant?: 'success' | 'warning' | 'critical' | 'info';
|
|
37
41
|
children: ReactNode;
|
|
38
42
|
}
|
|
39
43
|
interface PromptType {
|
|
@@ -41,9 +45,8 @@ interface PromptType {
|
|
|
41
45
|
Footer: typeof PromptFooter;
|
|
42
46
|
}
|
|
43
47
|
|
|
44
|
-
export const Prompt: PromptType = ({children, variant
|
|
48
|
+
export const Prompt: PromptType = ({children, variant = 'info', ...otherProps}) => {
|
|
45
49
|
const {classes, cx} = useStyles();
|
|
46
|
-
const defaultVariant = variant === 'default';
|
|
47
50
|
const convertedChildren = Children.toArray(children) as ReactElement[];
|
|
48
51
|
|
|
49
52
|
const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);
|
|
@@ -51,14 +54,14 @@ export const Prompt: PromptType = ({children, variant, size, ...otherProps}) =>
|
|
|
51
54
|
|
|
52
55
|
const classNames = {
|
|
53
56
|
header: cx(classes.header, classes[variant]),
|
|
54
|
-
close:
|
|
57
|
+
close: classes.whiteClose,
|
|
55
58
|
body: classes.body,
|
|
56
|
-
modal:
|
|
59
|
+
modal: classes.modalType,
|
|
57
60
|
title: classes.title,
|
|
58
61
|
};
|
|
59
62
|
|
|
60
63
|
return (
|
|
61
|
-
<Modal padding={0} classNames={classNames} size={
|
|
64
|
+
<Modal variant="prompt" padding={0} classNames={classNames} size={'sm'} {...otherProps}>
|
|
62
65
|
<div className={classes.innerBody}>{otherChildren}</div>
|
|
63
66
|
{footer}
|
|
64
67
|
</Modal>
|
|
@@ -6,7 +6,6 @@ const useStyles = createStyles((theme) => ({
|
|
|
6
6
|
th: {
|
|
7
7
|
fontWeight: '400 !important' as any,
|
|
8
8
|
padding: '0 !important',
|
|
9
|
-
color: theme.black + '!important',
|
|
10
9
|
verticalAlign: 'middle',
|
|
11
10
|
},
|
|
12
11
|
|
|
@@ -14,9 +13,11 @@ const useStyles = createStyles((theme) => ({
|
|
|
14
13
|
width: '100%',
|
|
15
14
|
padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
|
|
16
15
|
whiteSpace: 'nowrap',
|
|
16
|
+
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],
|
|
17
|
+
color: theme.colors.gray[6],
|
|
17
18
|
|
|
18
19
|
'&:hover': {
|
|
19
|
-
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[
|
|
20
|
+
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],
|
|
20
21
|
},
|
|
21
22
|
},
|
|
22
23
|
}));
|
|
@@ -49,7 +50,7 @@ export const Th = <T,>({header}: ThProps<T>) => {
|
|
|
49
50
|
if (!header.column.getCanSort()) {
|
|
50
51
|
return (
|
|
51
52
|
<th className={classes.th} style={{width}}>
|
|
52
|
-
<Text size="xs" py="xs" px="sm">
|
|
53
|
+
<Text size="xs" py="xs" px="sm" fw={500}>
|
|
53
54
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
|
54
55
|
</Text>
|
|
55
56
|
</th>
|
|
@@ -64,7 +65,9 @@ export const Th = <T,>({header}: ThProps<T>) => {
|
|
|
64
65
|
<th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>
|
|
65
66
|
<UnstyledButton onClick={onSort} className={classes.control}>
|
|
66
67
|
<Group position="apart" noWrap>
|
|
67
|
-
<Text size="xs"
|
|
68
|
+
<Text size="xs" fw={500}>
|
|
69
|
+
{flexRender(header.column.columnDef.header, header.getContext())}
|
|
70
|
+
</Text>
|
|
68
71
|
<Center>
|
|
69
72
|
<Icon height={14} />
|
|
70
73
|
</Center>
|
package/src/theme/Theme.tsx
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
import {InfoSize24Px} from '@coveord/plasma-react-icons';
|
|
1
|
+
import {CheckSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';
|
|
2
2
|
import {color} from '@coveord/plasma-tokens';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
getSize,
|
|
5
|
+
rem,
|
|
6
|
+
type MantineThemeOverride,
|
|
7
|
+
type NotificationProps,
|
|
8
|
+
type StepperStylesParams,
|
|
9
|
+
type TabsStylesParams,
|
|
10
|
+
} from '@mantine/core';
|
|
4
11
|
|
|
5
12
|
import {PlasmaColors} from './PlasmaColors';
|
|
6
13
|
|
|
@@ -83,7 +90,7 @@ export const plasmaTheme: MantineThemeOverride = {
|
|
|
83
90
|
},
|
|
84
91
|
},
|
|
85
92
|
Modal: {
|
|
86
|
-
styles: (theme, {fullScreen}, {size}) => ({
|
|
93
|
+
styles: (theme, {fullScreen, padding}, {size, variant}) => ({
|
|
87
94
|
content: {
|
|
88
95
|
flex: fullScreen
|
|
89
96
|
? '0 0 100%'
|
|
@@ -105,12 +112,20 @@ export const plasmaTheme: MantineThemeOverride = {
|
|
|
105
112
|
lineHeight: theme.headings.sizes.h3.lineHeight,
|
|
106
113
|
fontWeight: 500,
|
|
107
114
|
},
|
|
115
|
+
header: {
|
|
116
|
+
borderBottom: variant !== 'prompt' ? `1px solid ${color.primary.gray[3]}` : null,
|
|
117
|
+
},
|
|
118
|
+
body: {
|
|
119
|
+
'&:not(:only-child)': {
|
|
120
|
+
paddingTop: variant === 'prompt' ? 0 : getSize({size: padding, sizes: plasmaTheme.spacing}),
|
|
121
|
+
},
|
|
122
|
+
},
|
|
108
123
|
}),
|
|
124
|
+
},
|
|
125
|
+
ModalOverlay: {
|
|
109
126
|
defaultProps: {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
opacity: 0.9,
|
|
113
|
-
},
|
|
127
|
+
color: color.primary.navy[9],
|
|
128
|
+
opacity: 0.9,
|
|
114
129
|
},
|
|
115
130
|
},
|
|
116
131
|
InputWrapper: {
|
|
@@ -268,5 +283,73 @@ export const plasmaTheme: MantineThemeOverride = {
|
|
|
268
283
|
},
|
|
269
284
|
},
|
|
270
285
|
},
|
|
286
|
+
Stepper: {
|
|
287
|
+
defaultProps: {
|
|
288
|
+
size: 'xs',
|
|
289
|
+
completedIcon: <CheckSize16Px />,
|
|
290
|
+
},
|
|
291
|
+
styles: (theme, {}: StepperStylesParams, {size}) => ({
|
|
292
|
+
step: {
|
|
293
|
+
'&[disabled]': {
|
|
294
|
+
color: theme.colors.gray[5],
|
|
295
|
+
'& .mantine-Stepper-stepDescription': {
|
|
296
|
+
color: theme.colors.gray[5],
|
|
297
|
+
},
|
|
298
|
+
'& .mantine-Stepper-stepIcon': {
|
|
299
|
+
borderColor: theme.colors.gray[1],
|
|
300
|
+
},
|
|
301
|
+
},
|
|
302
|
+
},
|
|
303
|
+
stepIcon: {
|
|
304
|
+
fontWeight: 500,
|
|
305
|
+
backgroundColor: theme.colors.gray[1],
|
|
306
|
+
color: 'inherit',
|
|
307
|
+
border: `${rem(1)} solid ${theme.colors.gray[3]}`,
|
|
308
|
+
'&[data-progress]': {
|
|
309
|
+
backgroundColor: theme.white,
|
|
310
|
+
},
|
|
311
|
+
|
|
312
|
+
'&[data-completed]': {
|
|
313
|
+
backgroundColor: theme.white,
|
|
314
|
+
borderColor: theme.colors.lime[6],
|
|
315
|
+
color: theme.colors.lime[6],
|
|
316
|
+
},
|
|
317
|
+
},
|
|
318
|
+
stepCompletedIcon: {
|
|
319
|
+
color: theme.colors.lime[6],
|
|
320
|
+
fontSize: rem(16),
|
|
321
|
+
},
|
|
322
|
+
stepDescription: {
|
|
323
|
+
color: theme.colors.gray[7],
|
|
324
|
+
fontSize: getSize({size, sizes: theme.fontSizes}),
|
|
325
|
+
},
|
|
326
|
+
separator: {
|
|
327
|
+
height: rem(1),
|
|
328
|
+
backgroundColor: theme.colors.gray[3],
|
|
329
|
+
},
|
|
330
|
+
separatorActive: {
|
|
331
|
+
backgroundColor: theme.colors.gray[3],
|
|
332
|
+
},
|
|
333
|
+
verticalSeparator: {
|
|
334
|
+
borderLeft: `${rem(1)} solid ${theme.colors.gray[3]}`,
|
|
335
|
+
},
|
|
336
|
+
verticalSeparatorActive: {
|
|
337
|
+
borderColor: theme.colors.gray[3],
|
|
338
|
+
},
|
|
339
|
+
}),
|
|
340
|
+
},
|
|
341
|
+
Tabs: {
|
|
342
|
+
styles: (theme, {orientation}: TabsStylesParams) => ({
|
|
343
|
+
tabsList: {
|
|
344
|
+
[orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid ${
|
|
345
|
+
theme.colors.gray[3]
|
|
346
|
+
}`,
|
|
347
|
+
},
|
|
348
|
+
tab: {
|
|
349
|
+
[orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid transparent`,
|
|
350
|
+
[orientation === 'horizontal' ? 'marginBottom' : 'marginRight']: rem(-1),
|
|
351
|
+
},
|
|
352
|
+
}),
|
|
353
|
+
},
|
|
271
354
|
},
|
|
272
355
|
};
|