@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
601 lines (600 loc) • 24.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "plasmaTheme", {
enumerable: true,
get: function() {
return plasmaTheme;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
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 _Accordion = require("../components/Accordion/Accordion.js");
var _CheckboxIcon = require("../components/CheckboxIcon/CheckboxIcon.js");
var _CircleLoader = require("../components/CircleLoader/CircleLoader.js");
var _InfoToken = require("../components/InfoToken/InfoToken.js");
var _PlasmaComboboxChevron = require("../components/Combobox/PlasmaComboboxChevron.js");
var _Accordionmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Accordion.module.css"));
var _ActionIconmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ActionIcon.module.css"));
var _Alertmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Alert.module.css"));
var _AppShellmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/AppShell.module.css"));
var _Badgemodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Badge.module.css"));
var _Breadcrumbsmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Breadcrumbs.module.css"));
var _Buttonmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Button.module.css"));
var _Cardmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Card.module.css"));
var _Checkboxmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Checkbox.module.css"));
var _CheckboxIndicatormodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/CheckboxIndicator.module.css"));
var _Chipmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Chip.module.css"));
var _CloseButtonmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/CloseButton.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 _DateTimePickermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/DateTimePicker.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 _MonthPickermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/MonthPicker.module.css"));
var _NavLinkmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/NavLink.module.css"));
var _Notificationsmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Notifications.module.css"));
var _NumberInputmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/NumberInput.module.css"));
var _Paginationmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Pagination.module.css"));
var _Papermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Paper.module.css"));
var _Pillmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Pill.module.css"));
var _Popovermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Popover.module.css"));
var _Radiomodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Radio.module.css"));
var _RadioCardmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/RadioCard.module.css"));
var _ReadOnlyInputmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ReadOnlyInput.module.css"));
var _ReadOnlyStatemodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/ReadOnlyState.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 _Slidermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Slider.module.css"));
var _Steppermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Stepper.module.css"));
var _Tablemodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Table.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 _TimePickermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/TimePicker.module.css"));
var _Tooltipmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Tooltip.module.css"));
var _YearPickermodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/YearPicker.module.css"));
var _PlasmaColors = require("./PlasmaColors.js");
var _placeholdersvg = /*#__PURE__*/ _interop_require_default._(require("../images/placeholder.svg"));
var _plasmaVariantColorResolver = require("./plasmaVariantColorResolver.js");
var plasmaTheme = (0, _core.createTheme)({
variantColorResolver: _plasmaVariantColorResolver.plasmaVariantColorResolver,
// 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: 'md',
lineHeights: {
xxs: '1.2',
xs: '1.16',
sm: '1.14',
md: '1.14',
lg: '1.11',
xl: '1.2'
},
spacing: {
xxs: '4px',
xs: '8px',
sm: '16px',
md: '24px',
lg: '32px',
xl: '40px'
},
radius: {
none: '0px',
xs: '2px',
sm: '4px',
md: '8px',
lg: '16px',
xl: '24px',
xxl: '32px'
},
primaryColor: 'blue',
headings: {
fontFamily: 'canada-type-gibson, sans-serif',
fontWeight: 'var(--coveo-fw-bold)',
sizes: {
h1: {
fontSize: '40px',
lineHeight: '1.2',
fontWeight: 'var(--coveo-fw-bold)'
},
h2: {
fontSize: '32px',
lineHeight: '1.35',
fontWeight: 'var(--coveo-fw-normal)'
},
h3: {
fontSize: '24px',
lineHeight: '1.33',
fontWeight: 'var(--coveo-fw-bold)'
},
h4: {
fontSize: '18px',
lineHeight: '1.2',
fontWeight: 'var(--coveo-fw-bold)'
},
h5: {
fontSize: '16px',
lineHeight: '1.25',
fontWeight: 'var(--coveo-fw-bold)'
},
h6: {
fontSize: '12px',
lineHeight: '1.33',
fontWeight: 'var(--coveo-fw-bold)'
}
}
},
fontSizes: {
xxs: '10px',
xs: '12px',
sm: '14px',
md: '16px',
lg: '18px',
xl: '20px'
},
shadows: {
xs: '0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05), 0px -0.5px 1px 0px rgba(0, 0, 0, 0.02)',
sm: '0px 7px 7px -5px rgba(0, 0, 0, 0.04), 0px 10px 15px -5px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05)',
md: '0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05)',
lg: '0px 12px 12px -7px rgba(0, 0, 0, 0.04), 0px 28px 23px -7px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05)',
xl: '0px 17px 17px -7px rgba(0, 0, 0, 0.04), 0px 36px 28px -7px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05)'
},
primaryShade: 5,
colors: _PlasmaColors.PlasmaColors,
components: {
Accordion: _Accordion.Accordion.extend({
classNames: _Accordionmodulecss.default
}),
ActionIcon: _core.ActionIcon.extend({
defaultProps: {
size: 'md'
},
classNames: _ActionIconmodulecss.default
}),
AppShell: _core.AppShell.extend({
classNames: _AppShellmodulecss.default,
defaultProps: {
header: {
height: 60
},
navbar: {
width: 240,
breakpoint: 0
},
layout: 'alt',
withBorder: false
},
vars: function vars(theme) {
return {
root: {
'--app-shell-border-color': theme.colors.gray[2]
}
};
}
}),
Alert: _core.Alert.extend({
defaultProps: {
icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoToken.InfoToken.Advice, {}),
p: 'sm'
},
classNames: _Alertmodulecss.default
}),
Badge: _core.Badge.extend({
classNames: _Badgemodulecss.default,
defaultProps: {
variant: 'light',
tt: 'none'
}
}),
Breadcrumbs: _core.Breadcrumbs.extend({
classNames: _Breadcrumbsmodulecss.default,
defaultProps: {
separator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconSlash, {
size: 20,
color: "var(--mantine-color-dimmed)"
}),
separatorMargin: 'xxs'
}
}),
Button: _core.Button.extend({
defaultProps: {
size: 'sm',
vars: function vars(theme) {
return {
root: {
'--button-padding-x': theme.spacing.sm
}
};
}
},
classNames: _Buttonmodulecss.default
}),
Card: _core.Card.extend({
defaultProps: {
radius: 'lg',
shadow: 'xs',
padding: 'sm',
withBorder: true
},
classNames: _Cardmodulecss.default
}),
Checkbox: _core.Checkbox.extend({
defaultProps: {
radius: 'sm',
icon: _CheckboxIcon.CheckboxIcon
},
classNames: function classNames(theme, props) {
if (props.readOnly && !props.disabled) {
return (0, _core.deepMerge)(_Checkboxmodulecss.default, _ReadOnlyStatemodulecss.default);
}
return _Checkboxmodulecss.default;
}
}),
CheckboxIndicator: _core.Checkbox.Indicator.extend({
defaultProps: {
radius: 'sm',
icon: _CheckboxIcon.CheckboxIcon
},
classNames: _CheckboxIndicatormodulecss.default
}),
Chip: _core.Chip.extend({
defaultProps: {
icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconCheck, {
size: 16
})
},
classNames: _Chipmodulecss.default
}),
CloseButton: _core.CloseButton.extend({
defaultProps: {
icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
height: 16,
"aria-label": "close"
})
},
classNames: _CloseButtonmodulecss.default
}),
ColorSwatch: _core.ColorSwatch.extend({
defaultProps: {
size: 8,
withShadow: false
}
}),
Combobox: _core.Combobox.extend({
classNames: _Comboboxmodulecss.default,
defaultProps: {
middlewares: {
inline: true
}
}
}),
ComboboxChevron: _core.ComboboxChevron.extend({
defaultProps: {
component: _PlasmaComboboxChevron.PlasmaComboboxChevron
}
}),
ComboboxSearch: _core.ComboboxSearch.extend({
defaultProps: {
placeholder: 'Search',
rightSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.FilterSize16Px, {
height: 16,
color: "gray.5"
})
}
}),
DateInput: _dates.DateInput.extend({
defaultProps: {
miw: 250,
leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconCalendarWeek, {
size: 16
})
}
}),
DatePicker: _dates.DatePicker.extend({
defaultProps: {
firstDayOfWeek: 0
},
classNames: _DatePickermodulecss.default
}),
DateTimePicker: _dates.DateTimePicker.extend({
classNames: _DateTimePickermodulecss.default
}),
Divider: _core.Divider.extend({
defaultProps: {
color: 'var(--mantine-color-default-border)'
}
}),
Image: _core.Image.extend({
defaultProps: {
fallbackSrc: _placeholdersvg.default
}
}),
Input: _core.Input.extend({
defaultProps: {
size: 'sm'
},
classNames: function classNames(_theme, props) {
var anyProps = props;
if (anyProps.readOnly && !props.disabled && ![
'Select'
].includes(anyProps.__staticSelector)) {
return (0, _core.deepMerge)(_Inputmodulecss.default, _ReadOnlyInputmodulecss.default);
}
return _Inputmodulecss.default;
}
}),
InputWrapper: _core.InputWrapper.extend({
defaultProps: {
size: 'sm'
},
classNames: _InputWrappermodulecss.default,
vars: function vars(theme, props) {
var anyProps = props;
if (anyProps.disabled || anyProps.readOnly && ![
'Select'
].includes(anyProps.__staticSelector)) {
return {
root: {
'--input-margin-top': (props === null || props === void 0 ? void 0 : props.label) || (props === null || props === void 0 ? void 0 : props.description) ? theme.spacing.xxs : undefined
},
label: {
'--input-asterisk-color': theme.colors.red[2]
},
error: {},
description: {}
};
}
return {
root: {
'--input-margin-top': (props === null || props === void 0 ? void 0 : props.label) || (props === null || props === void 0 ? void 0 : props.description) ? theme.spacing.xxs : undefined
},
label: {},
error: {},
description: {}
};
}
}),
PasswordInput: _core.PasswordInput.extend({
vars: function vars() {
return {
root: {
'--psi-button-size': 'var(--mantine-spacing-lg)'
}
};
}
}),
Loader: _core.Loader.extend({
defaultProps: {
loaders: _object_spread_props._(_object_spread._({}, _core.Loader.defaultLoaders), {
circle: _CircleLoader.CircleLoader
}),
type: 'circle',
role: 'presentation'
}
}),
List: _core.List.extend({
classNames: _Listmodulecss.default
}),
Modal: _core.Modal.extend({
classNames: _Modalmodulecss.default,
vars: function vars() {
var sizes = {
'--modal-size-xs': '432px',
'--modal-size-sm': '664px',
'--modal-size-md': '896px',
'--modal-size-lg': '1120px',
'--modal-size-xl': '88%'
};
return {
root: _object_spread._({}, sizes)
};
}
}),
ModalOverlay: _core.Modal.Overlay.extend({
defaultProps: {
color: _PlasmaColors.PlasmaColors.indigo[8],
backgroundOpacity: 0.7,
blur: 2
}
}),
ModalRoot: _core.Modal.Root.extend({
defaultProps: {
padding: 'md'
}
}),
MonthPicker: _dates.MonthPicker.extend({
classNames: _MonthPickermodulecss.default
}),
MultiSelect: _core.MultiSelect.extend({
defaultProps: {
hidePickedOptions: true
}
}),
NavLink: _core.NavLink.extend({
classNames: _NavLinkmodulecss.default
}),
Notification: _core.Notification.extend({
classNames: _Notificationsmodulecss.default,
defaultProps: {
icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconInfoCircleFilled, {
height: 20
})
}
}),
NumberInput: _core.NumberInput.extend({
classNames: _NumberInputmodulecss.default
}),
Pagination: _core.Pagination.extend({
classNames: _Paginationmodulecss.default,
defaultProps: {
nextIcon: _plasmareacticons.ArrowHeadRightSize16Px,
previousIcon: _plasmareacticons.ArrowHeadLeftSize16Px
}
}),
Paper: _core.Paper.extend({
classNames: _Papermodulecss.default
}),
PickerInputBase: _dates.PickerInputBase.extend({
defaultProps: {
miw: 250,
leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconCalendarWeek, {
size: 16
})
}
}),
Pill: _core.Pill.extend({
classNames: _Pillmodulecss.default
}),
Popover: _core.Popover.extend({
classNames: _Popovermodulecss.default,
defaultProps: {
middlewares: {
inline: true
},
position: 'bottom-start'
}
}),
Radio: _core.Radio.extend({
classNames: function classNames(theme, props) {
if (props.readOnly && !props.disabled) {
return (0, _core.deepMerge)(_Radiomodulecss.default, _ReadOnlyStatemodulecss.default);
}
return _Radiomodulecss.default;
},
vars: function vars(theme, props) {
if (props.readOnly && !props.disabled) {
return {
root: {
'--radio-icon-color': theme.colors.gray[7],
'--radio-color': theme.colors.gray[2]
}
};
}
return {
root: {}
};
}
}),
RadioCard: _core.Radio.Card.extend({
classNames: _RadioCardmodulecss.default
}),
ScrollArea: _core.ScrollArea.extend({
classNames: _ScrollAreamodulecss.default
}),
SegmentedControl: _core.SegmentedControl.extend({
classNames: _SegmentedControlmodulecss.default
}),
Select: _core.Select.extend({
defaultProps: {
allowDeselect: false,
withCheckIcon: false
},
classNames: _Selectmodulecss.default
}),
Skeleton: _core.Skeleton.extend({
classNames: _Skeletonmodulecss.default
}),
Slider: _core.Slider.extend({
defaultProps: {
size: 'md'
},
classNames: _Slidermodulecss.default
}),
Stepper: _core.Stepper.extend({
defaultProps: {
size: 'xs',
completedIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconCheck, {
size: 16
})
},
classNames: _Steppermodulecss.default
}),
Switch: _core.Switch.extend({
classNames: function classNames(theme, props) {
if (props.readOnly && !props.disabled) {
return _ReadOnlyStatemodulecss.default;
}
return {};
},
vars: function vars(theme, props) {
if (props.readOnly && !props.disabled) {
return {
root: {},
track: {
'--switch-bg': theme.colors.gray[2],
'--switch-bd': 'transparent'
},
thumb: {
'--switch-thumb-bd': 'transparent'
}
};
}
return {
root: {},
track: {},
thumb: {}
};
},
defaultProps: {
withThumbIndicator: false
}
}),
Table: _core.Table.extend({
classNames: _Tablemodulecss.default,
vars: function vars() {
return {
table: {
'--table-border-color': 'var(--mantine-color-default-border)'
}
};
}
}),
Tabs: _core.Tabs.extend({
classNames: _Tabsmodulecss.default
}),
Text: _core.Text.extend({
defaultProps: {
size: 'sm'
},
classNames: _Textmodulecss.default
}),
TimeInput: _dates.TimeInput.extend({
defaultProps: {
rightSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconClock, {
size: 16
})
}
}),
TimePicker: _dates.TimePicker.extend({
defaultProps: {
withDropdown: true,
format: '12h'
},
classNames: _TimePickermodulecss.default
}),
Tooltip: _core.Tooltip.extend({
defaultProps: {
maw: 280,
multiline: true,
withArrow: true,
zIndex: 10000
},
classNames: _Tooltipmodulecss.default
}),
YearPicker: _dates.YearPicker.extend({
classNames: _YearPickermodulecss.default
})
}
});
//# sourceMappingURL=Theme.js.map