@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
418 lines (417 loc) • 14.1 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { ArrowHeadLeftSize16Px, ArrowHeadRightSize16Px, CheckSize16Px, CrossSize16Px, FilterSize16Px, InfoSize16Px, InfoSize24Px } from '@coveord/plasma-react-icons';
import { color } from '@coveord/plasma-tokens';
import { ActionIcon, Alert, Anchor, AppShellNavbar, Badge, Button, Checkbox, CloseButton, ColorSwatch, Combobox, ComboboxSearch, createTheme, deepMerge, Divider, Input, InputWrapper, List, Loader, MenuItem, Modal, MultiSelect, NavLink, Notification, Pagination, Popover, Radio, ScrollArea, SegmentedControl, Select, Skeleton, Stepper, Switch, Tabs, Text, TextInput, Tooltip } from '@mantine/core';
import { DatePicker } from '@mantine/dates';
import ActionIconClasses from '../styles/ActionIcon.module.css';
import AlertClasses from '../styles/Alert.module.css';
import AnchorClasses from '../styles/Anchor.module.css';
import AppShellNavBarClasses from '../styles/AppShellNavBar.module.css';
import BadgeClasses from '../styles/Badge.module.css';
import ButtonClasses from '../styles/Button.module.css';
import CheckboxClasses from '../styles/Checkbox.module.css';
import ComboboxClasses from '../styles/Combobox.module.css';
import DatePickerClasses from '../styles/DatePicker.module.css';
import InputClasses from '../styles/Input.module.css';
import InputWrapperClasses from '../styles/InputWrapper.module.css';
import ListClasses from '../styles/List.module.css';
import ModalClasses from '../styles/Modal.module.css';
import NavLinkClasses from '../styles/NavLink.module.css';
import NotificationClasses from '../styles/Notification.module.css';
import PaginationClasses from '../styles/Pagination.module.css';
import RadioClasses from '../styles/Radio.module.css';
import ReadOnlyInputClasses from '../styles/ReadOnlyInput.module.css';
import ReadOnlyStateClasses from '../styles/ReadOnlyState.module.css';
import ScrollAreaClasses from '../styles/ScrollArea.module.css';
import SegmentedControlClasses from '../styles/SegmentedControl.module.css';
import SelectClasses from '../styles/Select.module.css';
import SkeletonClasses from '../styles/Skeleton.module.css';
import StepperClasses from '../styles/Stepper.module.css';
import TabsClasses from '../styles/Tabs.module.css';
import TextClasses from '../styles/Text.module.css';
import TooltipClasses from '../styles/Tooltip.module.css';
import { NotificationVars } from '../vars/Notification.vars';
import { TextVars } from '../vars/Text.vars';
import { PlasmaColors } from './PlasmaColors';
export const plasmaTheme = 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: 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,
components: {
ActionIcon: ActionIcon.extend({
classNames: {
root: ActionIconClasses.root
}
}),
Alert: Alert.extend({
defaultProps: {
icon: /*#__PURE__*/ _jsx(InfoSize16Px, {
height: 16
}),
color: 'navy'
},
classNames: AlertClasses
}),
Anchor: Anchor.extend({
defaultProps: {
color: 'action.6'
},
classNames: {
root: AnchorClasses.root
}
}),
AppShellNavbar: AppShellNavbar.extend({
classNames: {
navbar: AppShellNavBarClasses.navbar
}
}),
Badge: Badge.extend({
classNames: {
root: BadgeClasses.root
},
defaultProps: {
variant: 'light'
}
}),
Button: Button.extend({
classNames: ButtonClasses
}),
Checkbox: Checkbox.extend({
defaultProps: {
radius: 'sm'
},
classNames: (theme, props)=>{
if (props.readOnly && !props.disabled) {
return deepMerge(CheckboxClasses, ReadOnlyStateClasses);
}
return CheckboxClasses;
},
vars: (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: CloseButton.extend({
defaultProps: {
icon: /*#__PURE__*/ _jsx(CrossSize16Px, {
height: 16,
"aria-label": "close"
})
}
}),
ColorSwatch: ColorSwatch.extend({
defaultProps: {
size: 8,
withShadow: false
}
}),
Combobox: Combobox.extend({
classNames: {
option: SelectClasses.option,
search: ComboboxClasses.search
}
}),
ComboboxSearch: ComboboxSearch.extend({
defaultProps: {
placeholder: 'Search',
rightSection: /*#__PURE__*/ _jsx(FilterSize16Px, {
height: 16,
color: "gray.5"
})
}
}),
DatePicker: DatePicker.extend({
classNames: {
monthCell: DatePickerClasses.monthCell
}
}),
Divider: Divider.extend({
defaultProps: {
color: 'gray.3'
}
}),
Input: Input.extend({
classNames: (_theme, props)=>{
const anyProps = props;
if (anyProps.readOnly && !props.disabled && ![
'Select'
].includes(anyProps.__staticSelector)) {
return deepMerge(InputClasses, ReadOnlyInputClasses);
}
return InputClasses;
}
}),
InputWrapper: InputWrapper.extend({
classNames: InputWrapperClasses,
vars: (theme, props)=>{
const 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: Loader.extend({
defaultProps: {
type: 'dots',
color: 'action',
role: 'presentation'
}
}),
List: List.extend({
classNames: {
root: ListClasses.root
}
}),
MenuItem: MenuItem.extend({
defaultProps: {
fw: 300
}
}),
Modal: Modal.extend({
classNames: ModalClasses
}),
ModalOverlay: Modal.Overlay.extend({
defaultProps: {
color: color.primary.navy[9],
backgroundOpacity: 0.9
}
}),
ModalRoot: Modal.Root.extend({
defaultProps: {
padding: 'lg'
}
}),
MultiSelect: MultiSelect.extend({
defaultProps: {
hidePickedOptions: true
}
}),
NavLink: NavLink.extend({
classNames: NavLinkClasses
}),
Notification: Notification.extend({
defaultProps: {
icon: /*#__PURE__*/ _jsx(InfoSize24Px, {
height: 24
}),
color: 'info'
},
classNames: {
root: NotificationClasses.root,
icon: NotificationClasses.icon,
closeButton: NotificationClasses.closeButton
},
vars: NotificationVars
}),
Pagination: Pagination.extend({
classNames: PaginationClasses,
vars: ()=>({
root: {
'--pagination-control-fz': 'var(--mantine-font-size-sm)'
}
}),
defaultProps: {
nextIcon: ArrowHeadRightSize16Px,
previousIcon: ArrowHeadLeftSize16Px
}
}),
Popover: Popover.extend({
defaultProps: {
shadow: 'md',
withArrow: true
}
}),
Radio: Radio.extend({
classNames: (theme, props)=>{
if (props.readOnly && !props.disabled) {
return deepMerge(RadioClasses, ReadOnlyStateClasses);
}
return RadioClasses;
},
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: {}
};
}
}),
ScrollArea: ScrollArea.extend({
classNames: {
viewport: ScrollAreaClasses.viewport
}
}),
SegmentedControl: SegmentedControl.extend({
classNames: SegmentedControlClasses
}),
Select: Select.extend({
defaultProps: {
withCheckIcon: false,
allowDeselect: false
},
classNames: {
input: SelectClasses.input,
option: SelectClasses.option
}
}),
Skeleton: Skeleton.extend({
classNames: {
root: SkeletonClasses.root
}
}),
Stepper: Stepper.extend({
defaultProps: {
size: 'xs',
completedIcon: /*#__PURE__*/ _jsx(CheckSize16Px, {})
},
classNames: {
step: StepperClasses.step,
stepIcon: StepperClasses.stepIcon,
stepCompletedIcon: StepperClasses.stepCompletedIcon,
stepDescription: StepperClasses.stepDescription,
separator: StepperClasses.separator,
verticalSeparator: StepperClasses.verticalSeparator
}
}),
Switch: Switch.extend({
classNames: (theme, props)=>{
if (props.readOnly && !props.disabled) {
return ReadOnlyStateClasses;
}
return {};
},
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: {}
};
}
}),
Tabs: Tabs.extend({
classNames: TabsClasses
}),
TabsTab: Tabs.Tab.extend({
defaultProps: {
px: 'sm'
}
}),
Text: Text.extend({
classNames: TextClasses,
vars: TextVars
}),
TextInput: TextInput.extend({
defaultProps: {
radius: 8
}
}),
Tooltip: Tooltip.extend({
defaultProps: {
color: 'navy',
maw: 300,
multiline: true,
withArrow: true,
zIndex: 10000
},
classNames: TooltipClasses
})
}
});
//# sourceMappingURL=Theme.js.map