@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
431 lines (430 loc) • 16.4 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 _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 _Paginationmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Pagination.module.css"));
var _Radiomodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Radio.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 _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 _Tooltipmodulecss = /*#__PURE__*/ _interop_require_default._(require("../styles/Tooltip.module.css"));
var _Notificationvars = require("../vars/Notification.vars");
var _Textvars = require("../vars/Text.vars");
var _PlasmaColors = require("./PlasmaColors");
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,
lineHeights: {
md: '1.5'
},
spacing: {
xxs: '4px',
xs: '8px',
sm: '16px',
md: '24px',
lg: '32px',
xl: '40px'
},
primaryColor: 'action',
headings: {
fontFamily: 'canada-type-gibson, sans-serif',
fontWeight: '500',
sizes: {
h1: {
fontSize: '48px',
lineHeight: '1.5',
fontWeight: '300'
},
h2: {
fontSize: '32px',
lineHeight: '1.5',
fontWeight: '500'
},
h3: {
fontSize: '24px',
lineHeight: '1.5',
fontWeight: '500'
},
h4: {
fontSize: '18px',
lineHeight: '1.5',
fontWeight: '300'
},
h5: {
fontSize: '14px',
lineHeight: '1.5',
fontWeight: '500'
},
h6: {
fontSize: '12px',
lineHeight: '1.5',
fontWeight: '500'
}
}
},
shadows: {
xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',
sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',
md: '0px 4px 8px rgba(4, 8, 31, 0.08)',
lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',
xl: '0px 16px 24px rgba(4, 8, 31, 0.06)'
},
colors: _PlasmaColors.PlasmaColors,
components: {
ActionIcon: _core.ActionIcon.extend({
classNames: {
root: _ActionIconmodulecss.default.root
}
}),
Alert: _core.Alert.extend({
defaultProps: {
icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.InfoSize16Px, {
height: 16
}),
color: 'navy'
},
classNames: _Alertmodulecss.default
}),
Anchor: _core.Anchor.extend({
defaultProps: {
color: 'action.6'
},
classNames: {
root: _Anchormodulecss.default.root
}
}),
AppShellNavbar: _core.AppShellNavbar.extend({
classNames: {
navbar: _AppShellNavBarmodulecss.default.navbar
}
}),
Badge: _core.Badge.extend({
classNames: {
root: _Badgemodulecss.default.root
},
defaultProps: {
variant: 'light'
}
}),
Button: _core.Button.extend({
classNames: _Buttonmodulecss.default
}),
Checkbox: _core.Checkbox.extend({
defaultProps: {
radius: 'sm'
},
classNames: function(theme, props) {
if (props.readOnly && !props.disabled) {
return (0, _core.deepMerge)(_Checkboxmodulecss.default, _ReadOnlyStatemodulecss.default);
}
return _Checkboxmodulecss.default;
},
vars: function(theme, props) {
if (props.readOnly && !props.disabled) {
return {
root: {
'--checkbox-icon-color': theme.colors.gray[7],
'--checkbox-color': theme.colors.gray[2]
}
};
}
return {
root: {}
};
}
}),
CloseButton: _core.CloseButton.extend({
defaultProps: {
icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
height: 16,
"aria-label": "close"
})
}
}),
ColorSwatch: _core.ColorSwatch.extend({
defaultProps: {
size: 8,
withShadow: false
}
}),
Combobox: _core.Combobox.extend({
classNames: {
option: _Selectmodulecss.default.option,
search: _Comboboxmodulecss.default.search
}
}),
ComboboxSearch: _core.ComboboxSearch.extend({
defaultProps: {
placeholder: 'Search',
rightSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.FilterSize16Px, {
height: 16,
color: "gray.5"
})
}
}),
DatePicker: _dates.DatePicker.extend({
classNames: {
monthCell: _DatePickermodulecss.default.monthCell
}
}),
Divider: _core.Divider.extend({
defaultProps: {
color: 'gray.3'
}
}),
Input: _core.Input.extend({
classNames: function(_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({
classNames: _InputWrappermodulecss.default,
vars: function(theme, props) {
var anyProps = props;
if (anyProps.disabled || anyProps.readOnly && ![
'Select'
].includes(anyProps.__staticSelector)) {
return {
label: {
'--input-asterisk-color': theme.colors.red[2]
},
error: {},
description: {}
};
}
return {
label: {},
error: {},
description: {}
};
}
}),
Loader: _core.Loader.extend({
defaultProps: {
type: 'dots',
color: 'action',
role: 'presentation'
}
}),
List: _core.List.extend({
classNames: {
root: _Listmodulecss.default.root
}
}),
MenuItem: _core.MenuItem.extend({
defaultProps: {
fw: 300
}
}),
Modal: _core.Modal.extend({
classNames: _Modalmodulecss.default
}),
ModalOverlay: _core.Modal.Overlay.extend({
defaultProps: {
color: _plasmatokens.color.primary.navy[9],
backgroundOpacity: 0.9
}
}),
ModalRoot: _core.Modal.Root.extend({
defaultProps: {
padding: 'lg'
}
}),
MultiSelect: _core.MultiSelect.extend({
defaultProps: {
hidePickedOptions: true
}
}),
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
}),
Pagination: _core.Pagination.extend({
classNames: _Paginationmodulecss.default,
vars: function() {
return {
root: {
'--pagination-control-fz': 'var(--mantine-font-size-sm)'
}
};
},
defaultProps: {
nextIcon: _plasmareacticons.ArrowHeadRightSize16Px,
previousIcon: _plasmareacticons.ArrowHeadLeftSize16Px
}
}),
Popover: _core.Popover.extend({
defaultProps: {
shadow: 'md',
withArrow: true
}
}),
Radio: _core.Radio.extend({
classNames: function(theme, props) {
if (props.readOnly && !props.disabled) {
return (0, _core.deepMerge)(_Radiomodulecss.default, _ReadOnlyStatemodulecss.default);
}
return _Radiomodulecss.default;
},
vars: function(theme, props) {
if (props.readOnly && !props.disabled) {
return {
root: {
'--radio-icon-color': theme.colors.gray[7],
'--radio-color': theme.colors.gray[2]
}
};
}
return {
root: {}
};
}
}),
ScrollArea: _core.ScrollArea.extend({
classNames: {
viewport: _ScrollAreamodulecss.default.viewport
}
}),
SegmentedControl: _core.SegmentedControl.extend({
classNames: _SegmentedControlmodulecss.default
}),
Select: _core.Select.extend({
defaultProps: {
withCheckIcon: false,
allowDeselect: false
},
classNames: {
input: _Selectmodulecss.default.input,
option: _Selectmodulecss.default.option
}
}),
Skeleton: _core.Skeleton.extend({
classNames: {
root: _Skeletonmodulecss.default.root
}
}),
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
}
}),
Switch: _core.Switch.extend({
classNames: function(theme, props) {
if (props.readOnly && !props.disabled) {
return _ReadOnlyStatemodulecss.default;
}
return {};
},
vars: function(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: {}
};
}
}),
Tabs: _core.Tabs.extend({
classNames: _Tabsmodulecss.default
}),
TabsTab: _core.Tabs.Tab.extend({
defaultProps: {
px: 'sm'
}
}),
Text: _core.Text.extend({
classNames: _Textmodulecss.default,
vars: _Textvars.TextVars
}),
TextInput: _core.TextInput.extend({
defaultProps: {
radius: 8
}
}),
Tooltip: _core.Tooltip.extend({
defaultProps: {
color: 'navy',
maw: 300,
multiline: true,
withArrow: true,
zIndex: 10000
},
classNames: _Tooltipmodulecss.default
})
}
});
//# sourceMappingURL=Theme.js.map