@coveord/plasma-mantine 52.27.4 → 53.0.0

package/dist/cjs/theme/Theme.js

@@ -8,22 +8,48 @@ Object.defineProperty(exports, "plasmaTheme", {
         return plasmaTheme;
     }
 });
-var _define_property = require("@swc/helpers/_/_define_property");
-var _object_destructuring_empty = require("@swc/helpers/_/_object_destructuring_empty");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _plasmatokens = require("@coveord/plasma-tokens");
 var _core = require("@mantine/core");
+var _dates = require("@mantine/dates");
+var _ActionIconmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ActionIcon.module.css"));
+var _Alertmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Alert.module.css"));
+var _Anchormodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Anchor.module.css"));
+var _AppShellNavBarmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/AppShellNavBar.module.css"));
+var _Badgemodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Badge.module.css"));
+var _Buttonmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Button.module.css"));
+var _Checkboxmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Checkbox.module.css"));
+var _Comboboxmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Combobox.module.css"));
+var _DatePickermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/DatePicker.module.css"));
+var _Inputmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Input.module.css"));
+var _InputWrappermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/InputWrapper.module.css"));
+var _Listmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/List.module.css"));
+var _Modalmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Modal.module.css"));
+var _NavLinkmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/NavLink.module.css"));
+var _Notificationmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Notification.module.css"));
+var _Radiomodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Radio.module.css"));
+var _ScrollAreamodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ScrollArea.module.css"));
+var _SegmentedControlmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/SegmentedControl.module.css"));
+var _Selectmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Select.module.css"));
+var _Skeletonmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Skeleton.module.css"));
+var _Steppermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Stepper.module.css"));
+var _Tabsmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Tabs.module.css"));
+var _Textmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Text.module.css"));
+var _Titlemodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Title.module.css"));
+var _Notificationvars = require("../vars/Notification.vars");
+var _Textvars = require("../vars/Text.vars");
 var _PlasmaColors = require("./PlasmaColors");
-var plasmaTheme = {
-    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts
-    colorScheme: "light",
+var plasmaTheme = (0, _core.createTheme)({
+    // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts
     fontFamily: "canada-type-gibson, sans-serif",
     black: _plasmatokens.color.primary.gray[9],
     defaultRadius: 8,
-    lineHeight: 1.5,
+    lineHeights: {
+        md: "1.5"
+    },
+    fontSmoothing: false,
     spacing: {
         xs: "8px",
         sm: "16px",
@@ -31,49 +57,40 @@ var plasmaTheme = {
         lg: "32px",
         xl: "40px"
     },
-    globalStyles: function(theme) {
-        return {
-            body: _object_spread_props._(_object_spread._({}, theme.fn.fontStyles()), {
-                fontSize: theme.fontSizes.sm,
-                lineHeight: theme.lineHeight,
-                fontWeight: 300
-            })
-        };
-    },
     primaryColor: "action",
     headings: {
         fontFamily: "canada-type-gibson, sans-serif",
-        fontWeight: 500,
+        fontWeight: "500",
         sizes: {
             h1: {
                 fontSize: "48px",
-                lineHeight: undefined,
-                fontWeight: 300
+                lineHeight: "1.5",
+                fontWeight: "300"
             },
             h2: {
                 fontSize: "32px",
-                lineHeight: undefined,
-                fontWeight: 500
+                lineHeight: "1.5",
+                fontWeight: "500"
             },
             h3: {
                 fontSize: "24px",
-                lineHeight: undefined,
-                fontWeight: 500
+                lineHeight: "1.5",
+                fontWeight: "500"
             },
             h4: {
                 fontSize: "18px",
-                lineHeight: undefined,
-                fontWeight: 300
+                lineHeight: "1.5",
+                fontWeight: "300"
             },
             h5: {
                 fontSize: "14px",
-                lineHeight: undefined,
-                fontWeight: 500
+                lineHeight: "1.5",
+                fontWeight: "500"
             },
             h6: {
                 fontSize: "12px",
-                lineHeight: undefined,
-                fontWeight: 500
+                lineHeight: "1.5",
+                fontWeight: "500"
             }
         }
     },
@@ -86,424 +103,233 @@ var plasmaTheme = {
     },
     colors: _PlasmaColors.PlasmaColors,
     components: {
-        Alert: {
+        ActionIcon: _core.ActionIcon.extend({
+            classNames: {
+                root: _ActionIconmodulecss.default.root
+            }
+        }),
+        Alert: _core.Alert.extend({
             defaultProps: {
                 icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.InfoSize24Px, {
                     height: 24
                 }),
                 color: "navy"
             },
-            styles: {
-                title: {
-                    fontWeight: 500
-                }
-            }
-        },
-        Title: {
-            styles: {
-                root: {
-                    "&:is(h1,h2,h3,h4,h5,h6)": {
-                        letterSpacing: "0.011em"
-                    }
-                }
+            classNames: {
+                title: _Alertmodulecss.default.title
             }
-        },
-        Text: {
+        }),
+        Anchor: _core.Anchor.extend({
             defaultProps: {
-                weight: 300
-            },
-            styles: function(theme, param, param1) {
-                var ref = _object_destructuring_empty._(param), size = param1.size;
-                return {
-                    root: {
-                        fontSize: (0, _core.getSize)({
-                            size: size !== null && size !== void 0 ? size : "sm",
-                            sizes: theme.fontSizes
-                        })
-                    }
-                };
-            }
-        },
-        Button: {
-            styles: function() {
-                return {
-                    root: {
-                        fontWeight: 400
-                    }
-                };
+                color: "action.6"
             },
-            variants: {
-                outline: function() {
-                    return {
-                        root: {
-                            backgroundColor: "white"
-                        }
-                    };
-                }
+            classNames: {
+                root: _Anchormodulecss.default.root
             }
-        },
-        Modal: {
-            styles: function(theme, param, param1) {
-                var fullScreen = param.fullScreen, padding = param.padding, size = param1.size, variant = param1.variant;
-                return {
-                    content: {
-                        flex: fullScreen ? "0 0 100%" : "0 0 ".concat((0, _core.getSize)({
-                            size: size,
-                            sizes: {
-                                xs: (0, _core.rem)(432),
-                                sm: (0, _core.rem)(664),
-                                md: (0, _core.rem)(896),
-                                lg: (0, _core.rem)(1120),
-                                xl: (0, _core.rem)("88%")
-                            }
-                        })),
-                        overflow: "auto"
-                    },
-                    title: {
-                        width: "100%",
-                        fontSize: theme.headings.sizes.h3.fontSize,
-                        lineHeight: theme.headings.sizes.h3.lineHeight,
-                        fontWeight: 500
-                    },
-                    header: {
-                        borderBottom: variant !== "prompt" ? "1px solid ".concat(_plasmatokens.color.primary.gray[3]) : null
-                    },
-                    body: {
-                        "&:not(:only-child)": {
-                            paddingTop: variant === "prompt" ? 0 : (0, _core.getSize)({
-                                size: padding,
-                                sizes: plasmaTheme.spacing
-                            })
-                        }
-                    }
-                };
+        }),
+        AppShellNavbar: _core.AppShellNavbar.extend({
+            classNames: {
+                navbar: _AppShellNavBarmodulecss.default.navbar
             }
-        },
-        ModalOverlay: {
+        }),
+        Badge: _core.Badge.extend({
+            classNames: {
+                root: _Badgemodulecss.default.root
+            },
             defaultProps: {
-                color: _plasmatokens.color.primary.navy[9],
-                opacity: 0.9
+                variant: "light"
             }
-        },
-        InputWrapper: {
+        }),
+        Button: _core.Button.extend({
+            classNames: _Buttonmodulecss.default
+        }),
+        Checkbox: _core.Checkbox.extend({
             defaultProps: {
-                withAsterisk: false
+                radius: "sm"
             },
-            styles: function(theme) {
-                return {
-                    label: {
-                        marginBottom: theme.spacing.xs
-                    },
-                    description: {
-                        fontSize: theme.fontSizes.sm,
-                        color: theme.colors.gray[7],
-                        marginBottom: theme.spacing.xs,
-                        lineHeight: theme.lineHeight
-                    },
-                    invalid: {
-                        color: theme.colors.red[9],
-                        borderColor: theme.colors.red[6]
-                    },
-                    error: {
-                        color: theme.colors.red[9],
-                        lineHeight: theme.lineHeight
-                    }
-                };
+            classNames: {
+                label: _Checkboxmodulecss.default.label,
+                input: _Checkboxmodulecss.default.input
             }
-        },
-        TextInput: {
+        }),
+        CloseButton: _core.CloseButton.extend({
             defaultProps: {
-                radius: 8
+                icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
+                    height: 16,
+                    "aria-label": "close"
+                })
             }
-        },
-        Tooltip: {
+        }),
+        ColorSwatch: _core.ColorSwatch.extend({
             defaultProps: {
-                color: "navy",
-                maw: 300,
-                multiline: true,
-                withArrow: true,
-                withinPortal: true,
-                zIndex: 10000
+                size: 8,
+                withShadow: false
             }
-        },
-        Loader: {
+        }),
+        Combobox: _core.Combobox.extend({
+            classNames: {
+                option: _Selectmodulecss.default.option,
+                search: _Comboboxmodulecss.default.search
+            }
+        }),
+        ComboboxSearch: _core.ComboboxSearch.extend({
             defaultProps: {
-                variant: "dots",
-                color: "action"
+                placeholder: "Search",
+                rightSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.FilterSize16Px, {
+                    height: 16,
+                    color: "gray.5"
+                })
             }
-        },
-        DateRangePicker: {
-            styles: {
-                cell: {
-                    textAlign: "center"
-                }
+        }),
+        DatePicker: _dates.DatePicker.extend({
+            classNames: {
+                monthCell: _DatePickermodulecss.default.monthCell
             }
-        },
-        Anchor: {
+        }),
+        Divider: _core.Divider.extend({
             defaultProps: {
-                color: "action.6"
-            },
-            styles: function(theme) {
-                return {
-                    root: _object_spread._({}, theme.fn.hover({
-                        textDecoration: "underline",
-                        color: theme.colors.action[8]
-                    }))
-                };
+                color: "gray.3"
             }
-        },
-        Checkbox: {
+        }),
+        Input: _core.Input.extend({
+            classNames: _Inputmodulecss.default
+        }),
+        InputWrapper: _core.InputWrapper.extend({
+            classNames: _InputWrappermodulecss.default
+        }),
+        Loader: _core.Loader.extend({
             defaultProps: {
-                radius: "sm"
-            },
-            styles: function(theme) {
-                return {
-                    label: {
-                        fontSize: theme.fontSizes.sm,
-                        fontWeight: 300
-                    }
-                };
-            }
-        },
-        List: {
-            styles: function() {
-                return {
-                    root: {
-                        listStyleType: "disc"
-                    }
-                };
+                type: "dots",
+                color: "action",
+                role: "presentation"
             }
-        },
-        Radio: {
-            styles: {
-                labelWrapper: {
-                    display: "flex",
-                    alignItems: "flex-start"
-                }
+        }),
+        List: _core.List.extend({
+            classNames: {
+                root: _Listmodulecss.default.root
             }
-        },
-        Popover: {
+        }),
+        MenuItem: _core.MenuItem.extend({
             defaultProps: {
-                shadow: "md",
-                withArrow: true
+                fw: 300
             }
-        },
-        Badge: {
-            styles: {
-                root: {
-                    textTransform: "none",
-                    padding: "4px 8px",
-                    fontWeight: 500
-                }
+        }),
+        Modal: _core.Modal.extend({
+            classNames: _Modalmodulecss.default
+        }),
+        ModalOverlay: _core.Modal.Overlay.extend({
+            defaultProps: {
+                color: _plasmatokens.color.primary.navy[9],
+                backgroundOpacity: 0.9
             }
-        },
-        ColorSwatch: {
+        }),
+        ModalRoot: _core.Modal.Root.extend({
             defaultProps: {
-                size: 8,
-                withShadow: false
+                padding: "lg"
             }
-        },
-        MenuItem: {
+        }),
+        MultiSelect: _core.MultiSelect.extend({
             defaultProps: {
-                fw: 300
+                hidePickedOptions: true
             }
-        },
-        Notification: {
-            styles: function(theme, param) {
-                var notificationType = param.color;
-                var _theme_colors;
-                return {
-                    root: {
-                        borderColor: theme.colors.gray[3],
-                        backgroundColor: theme.colors.gray[0],
-                        boxShadow: theme.shadows.lg,
-                        padding: theme.spacing.sm,
-                        "&[data-with-icon]": {
-                            paddingLeft: theme.spacing.sm
-                        }
-                    },
-                    icon: {
-                        backgroundColor: "transparent",
-                        marginRight: theme.spacing.sm,
-                        color: (_theme_colors = theme.colors) === null || _theme_colors === void 0 ? void 0 : _theme_colors[notificationType][6]
-                    },
-                    closeButton: {
-                        margin: theme.spacing.xs,
-                        color: theme.colors.gray[5]
-                    }
-                };
-            },
+        }),
+        NavLink: _core.NavLink.extend({
+            classNames: _NavLinkmodulecss.default
+        }),
+        Notification: _core.Notification.extend({
             defaultProps: {
                 icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.InfoSize24Px, {
                     height: 24
                 }),
                 color: "info"
+            },
+            classNames: {
+                root: _Notificationmodulecss.default.root,
+                icon: _Notificationmodulecss.default.icon,
+                closeButton: _Notificationmodulecss.default.closeButton
+            },
+            vars: _Notificationvars.NotificationVars
+        }),
+        Popover: _core.Popover.extend({
+            defaultProps: {
+                shadow: "md",
+                withArrow: true
             }
-        },
-        Skeleton: {
-            styles: {
-                visible: {
-                    "&::before": {
-                        zIndex: "unset"
-                    },
-                    "&::after": {
-                        zIndex: "unset"
-                    }
-                }
+        }),
+        Radio: _core.Radio.extend({
+            classNames: {
+                labelWrapper: _Radiomodulecss.default.labelWrapper
             }
-        },
-        SegmentedControl: {
-            styles: function(theme) {
-                return {
-                    root: {
-                        backgroundColor: theme.colors.gray[2]
-                    }
-                };
+        }),
+        ScrollArea: _core.ScrollArea.extend({
+            classNames: {
+                viewport: _ScrollAreamodulecss.default.viewport
             }
-        },
-        Stepper: {
+        }),
+        SegmentedControl: _core.SegmentedControl.extend({
+            classNames: {
+                root: _SegmentedControlmodulecss.default.root
+            }
+        }),
+        Select: _core.Select.extend({
             defaultProps: {
-                size: "xs",
-                completedIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CheckSize16Px, {})
+                withCheckIcon: false,
+                allowDeselect: false
             },
-            styles: function(theme, param, param1) {
-                var ref = _object_destructuring_empty._(param), size = param1.size;
-                return {
-                    step: {
-                        "&[disabled]": {
-                            color: theme.colors.gray[5],
-                            "& .mantine-Stepper-stepDescription": {
-                                color: theme.colors.gray[5]
-                            },
-                            "& .mantine-Stepper-stepIcon": {
-                                borderColor: theme.colors.gray[1]
-                            }
-                        }
-                    },
-                    stepIcon: {
-                        fontWeight: 500,
-                        backgroundColor: theme.colors.gray[1],
-                        color: "inherit",
-                        border: "".concat((0, _core.rem)(1), " solid ").concat(theme.colors.gray[3]),
-                        "&[data-progress]": {
-                            backgroundColor: theme.white
-                        },
-                        "&[data-completed]": {
-                            backgroundColor: theme.white,
-                            borderColor: theme.colors.lime[6],
-                            color: theme.colors.lime[6]
-                        }
-                    },
-                    stepCompletedIcon: {
-                        color: theme.colors.lime[6],
-                        fontSize: (0, _core.rem)(16)
-                    },
-                    stepDescription: {
-                        color: theme.colors.gray[7],
-                        fontSize: (0, _core.getSize)({
-                            size: size,
-                            sizes: theme.fontSizes
-                        })
-                    },
-                    separator: {
-                        height: (0, _core.rem)(1),
-                        backgroundColor: theme.colors.gray[3]
-                    },
-                    separatorActive: {
-                        backgroundColor: theme.colors.gray[3]
-                    },
-                    verticalSeparator: {
-                        borderLeft: "".concat((0, _core.rem)(1), " solid ").concat(theme.colors.gray[3])
-                    },
-                    verticalSeparatorActive: {
-                        borderColor: theme.colors.gray[3]
-                    }
-                };
+            classNames: {
+                input: _Selectmodulecss.default.input,
+                option: _Selectmodulecss.default.option
             }
-        },
-        Tabs: {
-            styles: function(theme, param) {
-                var orientation = param.orientation;
-                var _obj;
-                return {
-                    tabsList: _define_property._({}, orientation === "horizontal" ? "borderBottom" : "borderRight", "".concat((0, _core.rem)(1), " solid ").concat(theme.colors.gray[3])),
-                    tab: (_obj = {}, _define_property._(_obj, orientation === "horizontal" ? "borderBottom" : "borderRight", "".concat((0, _core.rem)(1), " solid transparent")), _define_property._(_obj, orientation === "horizontal" ? "marginBottom" : "marginRight", (0, _core.rem)(-1)), _obj)
-                };
+        }),
+        Skeleton: _core.Skeleton.extend({
+            classNames: {
+                root: _Skeletonmodulecss.default.root
             }
-        },
-        Select: {
-            styles: function(theme) {
-                return {
-                    input: {
-                        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7]
-                    },
-                    item: {
-                        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
-                        "&[data-hovered]": {
-                            backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]
-                        },
-                        "&[data-selected]": _object_spread._({
-                            backgroundColor: theme.fn.variant({
-                                variant: "light"
-                            }).background,
-                            color: theme.fn.variant({
-                                variant: "light"
-                            }).color
-                        }, theme.fn.hover({
-                            backgroundColor: theme.fn.variant({
-                                variant: "light"
-                            }).hover
-                        }))
-                    }
-                };
+        }),
+        Stepper: _core.Stepper.extend({
+            defaultProps: {
+                size: "xs",
+                completedIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CheckSize16Px, {})
+            },
+            classNames: {
+                step: _Steppermodulecss.default.step,
+                stepIcon: _Steppermodulecss.default.stepIcon,
+                stepCompletedIcon: _Steppermodulecss.default.stepCompletedIcon,
+                stepDescription: _Steppermodulecss.default.stepDescription,
+                separator: _Steppermodulecss.default.separator,
+                verticalSeparator: _Steppermodulecss.default.verticalSeparator
             }
-        },
-        NavLink: {
-            styles: function(theme) {
-                return {
-                    root: _object_spread._({
-                        color: theme.colors.gray[6],
-                        borderRadius: "".concat(theme.defaultRadius, "px 0px 0px ").concat(theme.defaultRadius, "px")
-                    }, theme.fn.hover({
-                        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1]
-                    })),
-                    label: {
-                        ref: (0, _core.getStylesRef)("label"),
-                        fontWeight: 500
-                    },
-                    children: _define_property._({}, ".".concat((0, _core.getStylesRef)("label")), {
-                        fontWeight: 300
-                    })
-                };
+        }),
+        Tabs: _core.Tabs.extend({
+            classNames: {
+                list: _Tabsmodulecss.default.list,
+                tab: _Tabsmodulecss.default.tab
             }
-        },
-        Navbar: {
-            styles: function(theme) {
-                return {
-                    root: {
-                        borderColor: theme.colors.gray[3]
-                    }
-                };
+        }),
+        Text: _core.Text.extend({
+            classNames: _Textmodulecss.default,
+            vars: _Textvars.TextVars
+        }),
+        TextInput: _core.TextInput.extend({
+            defaultProps: {
+                radius: 8
             }
-        },
-        ScrollArea: {
-            styles: {
-                viewport: {
-                    // https://github.com/radix-ui/primitives/issues/926
-                    "&[data-radix-scroll-area-viewport]": {
-                        "& > :first-of-type": {
-                            display: "block !important"
-                        }
-                    }
-                }
+        }),
+        Title: _core.Title.extend({
+            classNames: {
+                root: _Titlemodulecss.default.root
             }
-        },
-        Divider: {
+        }),
+        Tooltip: _core.Tooltip.extend({
             defaultProps: {
-                color: "gray.3"
+                color: "navy",
+                maw: 300,
+                multiline: true,
+                withArrow: true,
+                zIndex: 10000
             }
-        }
+        })
     }
-};
+});
 
 //# sourceMappingURL=Theme.js.map