diff --git a/packages/mantine/src/components/browser-preview/BrowserPreview.module.css b/packages/mantine/src/components/browser-preview/BrowserPreview.module.css
index 57c1ff9cb2..7dd7174e21 100644
--- a/packages/mantine/src/components/browser-preview/BrowserPreview.module.css
+++ b/packages/mantine/src/components/browser-preview/BrowserPreview.module.css
@@ -2,7 +2,7 @@
box-shadow: var(--mantine-shadow-md);
border-radius: var(--mantine-radius-default);
border: 1px solid;
- border-color: var(--mantine-color-gray-3);
+ border-color: var(--mantine-color-default-border);
flex: 1;
}
diff --git a/packages/mantine/src/styles/ActionIcon.module.css b/packages/mantine/src/styles/ActionIcon.module.css
deleted file mode 100644
index d79bbe1f29..0000000000
--- a/packages/mantine/src/styles/ActionIcon.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
- &[data-disabled] {
- color: var(--mantine-color-gray-4);
- background-color: var(--mantine-color-gray-1);
- }
-}
diff --git a/packages/mantine/src/styles/Alert.module.css b/packages/mantine/src/styles/Alert.module.css
index 5de988139c..53bcb747b6 100644
--- a/packages/mantine/src/styles/Alert.module.css
+++ b/packages/mantine/src/styles/Alert.module.css
@@ -1,35 +1,10 @@
.root {
- padding: var(--mantine-spacing-sm);
-
&:not(&[data-variant]) {
+ /* TODO: Plasma Reset, validate if we need the border */
border-color: color-mix(in srgb, var(--alert-color), var(--alert-bg) 85%);
}
}
-.wrapper {
- gap: var(--mantine-spacing-sm);
-}
-
.title {
font-weight: 500;
}
-
-.icon {
- width: 16px;
- height: 16px;
- margin-right: 0;
-}
-
-.message {
- @mixin light {
- color: var(--mantine-color-gray-7);
-
- &:where([data-variant='filled']) {
- color: var(--alert-color);
- }
- }
-
- &:where([data-variant='white']) {
- color: var(--mantine-color-black);
- }
-}
diff --git a/packages/mantine/src/styles/Anchor.module.css b/packages/mantine/src/styles/Anchor.module.css
deleted file mode 100644
index 89fb43e6f1..0000000000
--- a/packages/mantine/src/styles/Anchor.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
- @mixin hover {
- text-decoration: underline;
- color: var(--mantine-color-action-8);
- }
-}
diff --git a/packages/mantine/src/styles/AppShellNavBar.module.css b/packages/mantine/src/styles/AppShellNavBar.module.css
deleted file mode 100644
index 0268eea9b9..0000000000
--- a/packages/mantine/src/styles/AppShellNavBar.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.navbar {
- border-color: var(--mantine-color-gray-3);
-}
diff --git a/packages/mantine/src/styles/Badge.module.css b/packages/mantine/src/styles/Badge.module.css
index 4e0c034258..dfb528185a 100644
--- a/packages/mantine/src/styles/Badge.module.css
+++ b/packages/mantine/src/styles/Badge.module.css
@@ -1,5 +1,3 @@
.root {
- text-transform: none;
- padding: var(--mantine-spacing-xxs) var(--mantine-spacing-xs);
font-weight: 500;
}
diff --git a/packages/mantine/src/styles/Checkbox.module.css b/packages/mantine/src/styles/Checkbox.module.css
index 60d9896bc2..a9e7818930 100644
--- a/packages/mantine/src/styles/Checkbox.module.css
+++ b/packages/mantine/src/styles/Checkbox.module.css
@@ -1,20 +1,3 @@
.label {
- font-size: var(--mantine-font-size-sm);
font-weight: 300;
}
-
-.input {
- &[data-indeterminate] {
- background-color: var(--mantine-color-pureWhite);
- border-color: var(--mantine-color-gray-4);
-
- & + svg {
- color: var(--mantine-color-gray-6);
- }
- }
-
- &[readonly] {
- background-color: var(--mantine-color-gray-2);
- border-color: var(--mantine-color-gray-2);
- }
-}
diff --git a/packages/mantine/src/styles/Combobox.module.css b/packages/mantine/src/styles/Combobox.module.css
index 3f16172f5c..c322816147 100644
--- a/packages/mantine/src/styles/Combobox.module.css
+++ b/packages/mantine/src/styles/Combobox.module.css
@@ -1,9 +1,9 @@
.search {
margin: 0 0 var(--mantine-spacing-xs);
- border-radius: var(--mantine-radius-md);
+ border-radius: var(--mantine-radius-default);
border: 1px solid;
width: 100%;
- border-color: var(--mantine-color-gray-4);
+ border-color: var(--mantine-color-default-border);
&:focus {
border-color: var(--mantine-primary-color-filled);
diff --git a/packages/mantine/src/styles/DatePicker.module.css b/packages/mantine/src/styles/DatePicker.module.css
deleted file mode 100644
index 5812855808..0000000000
--- a/packages/mantine/src/styles/DatePicker.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.monthCell {
- text-align: center;
-}
diff --git a/packages/mantine/src/styles/Input.module.css b/packages/mantine/src/styles/Input.module.css
deleted file mode 100644
index 6011c9f54d..0000000000
--- a/packages/mantine/src/styles/Input.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.input {
- --input-color: var(--mantine-color-gray-7);
-}
diff --git a/packages/mantine/src/styles/Modal.module.css b/packages/mantine/src/styles/Modal.module.css
index 7253451c8c..4dea4585a7 100644
--- a/packages/mantine/src/styles/Modal.module.css
+++ b/packages/mantine/src/styles/Modal.module.css
@@ -1,60 +1,8 @@
-.root {
- &[data-full-screen] {
- .content {
- flex: 0 0 100%;
- }
- }
-
- &[data-size='xs'] {
- .content {
- flex: 0 0 rem(432px);
- }
- }
-
- &[data-size='sm'] {
- .content {
- flex: 0 0 rem(664px);
- }
- }
-
- &[data-size='md'] {
- .content {
- flex: 0 0 rem(896px);
- }
- }
-
- &[data-size='lg'] {
- .content {
- flex: 0 0 rem(1120px);
- }
- }
-
- &[data-size='xl'] {
- .content {
- flex: 0 0 rem(88%);
- }
- }
-
- &:not([data-size]) {
- .content {
- flex: 0 0 rem(896px);
- }
- }
-}
-
-.content {
- overflow: auto;
-}
-
.header {
- border-bottom: 1px solid var(--mantine-color-gray-3);
- align-items: flex-start;
+ border-bottom: 1px solid var(--mantine-color-default-border);
}
.title {
- width: 100%;
- font-size: var(--mantine-h3-font-size);
- line-height: var(--mantine-h3-line-height);
font-weight: 500;
}
diff --git a/packages/mantine/src/styles/NavLink.module.css b/packages/mantine/src/styles/NavLink.module.css
index 82c0ab70d2..598ae6625c 100644
--- a/packages/mantine/src/styles/NavLink.module.css
+++ b/packages/mantine/src/styles/NavLink.module.css
@@ -1,21 +1,3 @@
-.root {
- color: var(--mantine-color-gray-6);
- line-height: var(--mantine-line-height);
- border-radius: var(--mantine-radius-default) 0 0 var(--mantine-radius-default);
-
- &[data-active] {
- color: var(--mantine-primary-color-6);
- }
-
- @mixin hover {
- @mixin light {
- &:where(:not([data-active])) {
- background-color: var(--mantine-color-gray-1);
- }
- }
- }
-}
-
.label {
font-weight: 500;
}
diff --git a/packages/mantine/src/styles/Notification.module.css b/packages/mantine/src/styles/Notification.module.css
index ecdbde5ec7..3d0e16c035 100644
--- a/packages/mantine/src/styles/Notification.module.css
+++ b/packages/mantine/src/styles/Notification.module.css
@@ -1,5 +1,5 @@
.root {
- border-color: var(--mantine-color-gray-3);
+ border-color: var(--mantine-color-default-border);
background-color: var(--mantine-color-gray-0);
box-shadow: var(--mantine-shadow-lg);
padding: var(--mantine-spacing-sm);
diff --git a/packages/mantine/src/styles/Pagination.module.css b/packages/mantine/src/styles/Pagination.module.css
deleted file mode 100644
index 2c8c030db5..0000000000
--- a/packages/mantine/src/styles/Pagination.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.root {
- --pagination-control-fz: var(--mantine-font-size-sm);
-
- color: var(--mantine-color-gray-6);
-}
-
-.control {
- color: var(--mantine-color-gray-6);
-
- @mixin light {
- border-color: var(--mantine-color-gray-3);
-
- @mixin hover {
- &:where(:not(:disabled, [data-disabled])) {
- background-color: var(--mantine-primary-color-1);
- }
- }
- }
-
- &:where([data-active]) {
- @mixin light {
- border-color: var(--pagination-active-bg);
- color: var(--pagination-active-color, var(--mantine-color-white));
-
- @mixin hover {
- background-color: var(--pagination-active-bg);
- }
- }
- }
-}
diff --git a/packages/mantine/src/styles/Radio.module.css b/packages/mantine/src/styles/Radio.module.css
index a08f3e2c66..c53be83314 100644
--- a/packages/mantine/src/styles/Radio.module.css
+++ b/packages/mantine/src/styles/Radio.module.css
@@ -1,10 +1,4 @@
.labelWrapper {
display: flex;
align-items: flex-start;
-
- &:not([data-disabled]) {
- .label {
- color: var(--mantine-color-gray-7);
- }
- }
}
diff --git a/packages/mantine/src/styles/SegmentedControl.module.css b/packages/mantine/src/styles/SegmentedControl.module.css
index 1bc4364b74..a9e7818930 100644
--- a/packages/mantine/src/styles/SegmentedControl.module.css
+++ b/packages/mantine/src/styles/SegmentedControl.module.css
@@ -1,35 +1,3 @@
-.root {
- background-color: var(--mantine-color-gray-2);
-}
-
-.indicator {
- border-radius: var(--sc-radius, var(--mantine-radius-sm));
-}
-
.label {
font-weight: 300;
-
- @mixin light {
- color: var(--mantine-color-gray-6);
- }
-
- &:where([data-disabled]) {
- @mixin light {
- color: var(--mantine-color-gray-5);
- }
- }
-
- &:where([data-active]) {
- @mixin light {
- color: var(--sc-label-color, var(--mantine-color-black));
- }
- }
-
- &:where(:not([data-disabled], [data-active], [data-read-only])) {
- @mixin hover {
- @mixin light {
- color: var(--mantine-color-black);
- }
- }
- }
}
diff --git a/packages/mantine/src/styles/Select.module.css b/packages/mantine/src/styles/Select.module.css
deleted file mode 100644
index aafe8a41cb..0000000000
--- a/packages/mantine/src/styles/Select.module.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.input {
- @mixin light {
- color: var(--mantine-color-gray-7);
- }
-
- @mixin dark {
- color: var(--mantine-color-dark-0);
- }
-}
-
-.option {
- padding: 12px 16px;
-
- @mixin light {
- color: var(--mantine-color-gray-7);
-
- @mixin hover {
- background-color: var(--mantine-color-gray-1);
- }
- }
-
- @mixin dark {
- color: var(--mantine-color-dark-0);
-
- @mixin hover {
- background-color: var(--mantine-color-dark-4);
- }
- }
-
- &[aria-selected='true'] {
- background-color: var(--mantine-color-action-1);
- color: var(--mantine-color-action-6);
-
- @mixin hover {
- color: var(--mantine-color-action-6);
- background-color: rgb(237 246 255 / 65%);
- }
- }
-}
diff --git a/packages/mantine/src/styles/Stepper.module.css b/packages/mantine/src/styles/Stepper.module.css
index 0580c8a80e..67bd9fda6f 100644
--- a/packages/mantine/src/styles/Stepper.module.css
+++ b/packages/mantine/src/styles/Stepper.module.css
@@ -7,7 +7,7 @@
}
& .mantine-Stepper-stepIcon {
- border-color: var(--mantine-color-gray-1);
+ border-color: var(--mantine-color-default-border);
}
}
}
diff --git a/packages/mantine/src/styles/Tabs.module.css b/packages/mantine/src/styles/Tabs.module.css
index 8c1f10dab5..e9eb751787 100644
--- a/packages/mantine/src/styles/Tabs.module.css
+++ b/packages/mantine/src/styles/Tabs.module.css
@@ -1,9 +1,5 @@
.root {
&[data-variant='default'] {
- @mixin light {
- --tab-hover-color: var(--mantine-color-gray-1);
- }
-
--tabs-list-border-width: 1px;
&[data-orientation='horizontal'] {
diff --git a/packages/mantine/src/theme/PlasmaColors.ts b/packages/mantine/src/theme/PlasmaColors.ts
index 6b937a0216..c2b5faad18 100644
--- a/packages/mantine/src/theme/PlasmaColors.ts
+++ b/packages/mantine/src/theme/PlasmaColors.ts
@@ -23,32 +23,157 @@ const lime = [
export const PlasmaColors = {
// Primary
- gray: toMantineColor(color.primary.gray),
- action: [
- color.primary.action[1],
- color.primary.action[1],
- color.primary.action[2],
- color.primary.action[3],
- color.primary.action[4],
- color.primary.action[6],
- color.primary.action[6],
- color.primary.action[8],
- color.primary.action[8],
- color.primary.action[9],
- ] as MantineColorsTuple,
+ blue: toMantineColor({
+ 'blue-0': '#f8f9ff',
+ 'blue-1': '#eef2ff',
+ 'blue-2': '#d5defe',
+ 'blue-3': '#a6bcfe',
+ 'blue-4': '#6e99fd',
+ 'blue-5': '#1169da',
+ 'blue-6': '#063c82',
+ 'blue-7': '#03275a',
+ 'blue-8': '#01193f',
+ 'blue-9': '#010e29',
+ }),
+ red: toMantineColor({
+ 'red-0': '#fff8f8',
+ 'red-1': '#feefee',
+ 'red-2': '#fdd5d5',
+ 'red-3': '#fca7a5',
+ 'red-4': '#fb6f6c',
+ 'red-5': '#d2271b',
+ 'red-6': '#7e0f17',
+ 'red-7': '#58050f',
+ 'red-8': '#3e020a',
+ 'red-9': '#280104',
+ }),
+ gray: toMantineColor({
+ 'gray-0': '#f9f9fa',
+ 'gray-1': '#f1f2f4',
+ 'gray-2': '#dddfe3',
+ 'gray-3': '#b9bdc7',
+ 'gray-4': '#959cab',
+ 'gray-5': '#676d7a',
+ 'gray-6': '#3b3e46',
+ 'gray-7': '#26292f',
+ 'gray-8': '#191b1f',
+ 'gray-9': '#0e0f12',
+ }),
+ dark: toMantineColor({
+ 'dark-0': '#c9c9c9',
+ 'dark-1': '#b8b8b8',
+ 'dark-2': '#828282',
+ 'dark-3': '#696969',
+ 'dark-4': '#424242',
+ 'dark-5': '#3b3b3b',
+ 'dark-6': '#2e2e2e',
+ 'dark-7': '#242424',
+ 'dark-8': '#1f1f1f',
+ 'dark-9': '#141414',
+ }),
+ teal: toMantineColor({
+ 'teal-0': '#e5fff9',
+ 'teal-1': '#bffff0',
+ 'teal-2': '#1efadc',
+ 'teal-3': '#18d4bb',
+ 'teal-4': '#0faf99',
+ 'teal-5': '#077b6b',
+ 'teal-6': '#02473e',
+ 'teal-7': '#012f2a',
+ 'teal-8': '#011f1b',
+ 'teal-9': '#001210',
+ }),
+ yellow: toMantineColor({
+ 'yellow-0': '#fff9e5',
+ 'yellow-1': '#fff2c0',
+ 'yellow-2': '#fbe000',
+ 'yellow-3': '#e5b800',
+ 'yellow-4': '#c89300',
+ 'yellow-5': '#936400',
+ 'yellow-6': '#593700',
+ 'yellow-7': '#3c2301',
+ 'yellow-8': '#291700',
+ 'yellow-9': '#180d00',
+ }),
+ violet: toMantineColor({
+ 'violet-0': '#faf8ff',
+ 'violet-1': '#f4f0ff',
+ 'violet-2': '#e3daff',
+ 'violet-3': '#c7b2ff',
+ 'violet-4': '#ac86ff',
+ 'violet-5': '#8a36ff',
+ 'violet-6': '#5500aa',
+ 'violet-7': '#390076',
+ 'violet-8': '#270054',
+ 'violet-9': '#180037',
+ }),
+ grape: toMantineColor({
+ 'grape-0': '#fbf8fd',
+ 'grape-1': '#f6f0fb',
+ 'grape-2': '#e7d6f5',
+ 'grape-3': '#d2b0ed',
+ 'grape-4': '#bc85e3',
+ 'grape-5': '#9946c7',
+ 'grape-6': '#592676',
+ 'grape-7': '#3c1851',
+ 'grape-8': '#290e38',
+ 'grape-9': '#190624',
+ }),
+ 'cyan (Not used)': toMantineColor({
+ 'cyan-0': '#e3fafc',
+ 'cyan-1': '#c5f6fa',
+ 'cyan-2': '#99e9f2',
+ 'cyan-3': '#66d9e8',
+ 'cyan-4': '#3bc9db',
+ 'cyan-5': '#22b8cf',
+ 'cyan-6': '#15aabf',
+ 'cyan-7': '#1098ad',
+ 'cyan-8': '#0c8599',
+ 'cyan-9': '#0b7285',
+ }),
+ orange: toMantineColor({
+ 'orange-0': '#fff8f5',
+ 'orange-1': '#ffefe8',
+ 'orange-2': '#ffeedd',
+ 'orange-3': '#fea980',
+ 'orange-4': '#f27a38',
+ 'orange-5': '#b84b11',
+ 'orange-6': '#6c2a00',
+ 'orange-7': '#491b02',
+ 'orange-8': '#301301',
+ 'orange-9': '#1c0a00',
+ }),
+ indigo: toMantineColor({
+ 'indigo-0': '#f9f9fb',
+ 'indigo-1': '#f1f1f9',
+ 'indigo-2': '#dbdbf2',
+ 'indigo-3': '#babadf',
+ 'indigo-4': '#9797cb',
+ 'indigo-5': '#6767a4',
+ 'indigo-6': '#393968',
+ 'indigo-7': '#252547',
+ 'indigo-8': '#181831',
+ 'indigo-9': '#0d0d1f',
+ }),
+ green: toMantineColor({
+ 'green-0': '#e9ffed',
+ 'green-1': '#cdfed5',
+ 'green-2': '#73fa84',
+ 'green-3': '#32d961',
+ 'green-4': '#15b43c',
+ 'green-5': '#0b7e2f',
+ 'green-6': '#044918',
+ 'green-7': '#02300f',
+ 'green-8': '#012008',
+ 'green-9': '#001304',
+ }),
navy,
info: navy,
// Accent
- blue: toMantineColor(color.accent.blue),
- red,
critical: red,
- teal,
new: teal,
- yellow,
warning: yellow,
// Secondary
- green: toMantineColor(color.secondary.green),
- indigo: toMantineColor(color.secondary.indigo),
lime,
success: lime,
purple: toMantineColor(color.secondary.purple),
diff --git a/packages/mantine/src/theme/Theme.tsx b/packages/mantine/src/theme/Theme.tsx
index b55ebdfc1e..03e92dbc7c 100644
--- a/packages/mantine/src/theme/Theme.tsx
+++ b/packages/mantine/src/theme/Theme.tsx
@@ -9,10 +9,7 @@ import {
} from '@coveord/plasma-react-icons';
import {color} from '@coveord/plasma-tokens';
import {
- ActionIcon,
Alert,
- Anchor,
- AppShellNavbar,
Badge,
Button,
Checkbox,
@@ -22,13 +19,11 @@ import {
ComboboxSearch,
createTheme,
deepMerge,
- Divider,
Input,
InputWrapper,
List,
Loader,
MantineThemeOverride,
- MenuItem,
Modal,
MultiSelect,
NavLink,
@@ -47,43 +42,34 @@ import {
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: MantineThemeOverride = 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,
+ defaultRadius: 'lg',
lineHeights: {md: '1.5'},
spacing: {
xxs: '4px',
@@ -93,7 +79,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
lg: '32px',
xl: '40px',
},
- primaryColor: 'action',
+ primaryColor: 'blue',
headings: {
fontFamily: 'canada-type-gibson, sans-serif',
fontWeight: '500',
@@ -113,29 +99,18 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',
xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',
},
+ primaryShade: 5,
colors: PlasmaColors,
components: {
- ActionIcon: ActionIcon.extend({
- classNames: {root: ActionIconClasses.root},
- }),
Alert: Alert.extend({
defaultProps: {
icon: ,
- color: 'navy',
+ radius: 'lg',
},
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},
+ classNames: BadgeClasses,
defaultProps: {
variant: 'light',
},
@@ -146,6 +121,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
Checkbox: Checkbox.extend({
defaultProps: {
radius: 'sm',
+ size: 'sm',
},
classNames: (theme, props) => {
if (props.readOnly && !props.disabled) {
@@ -177,7 +153,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
},
}),
Combobox: Combobox.extend({
- classNames: {option: SelectClasses.option, search: ComboboxClasses.search},
+ classNames: ComboboxClasses,
}),
ComboboxSearch: ComboboxSearch.extend({
defaultProps: {
@@ -185,21 +161,13 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
rightSection: ,
},
}),
- DatePicker: DatePicker.extend({
- classNames: {monthCell: DatePickerClasses.monthCell},
- }),
- Divider: Divider.extend({
- defaultProps: {
- color: 'gray.3',
- },
- }),
Input: Input.extend({
classNames: (_theme, props) => {
const anyProps = props as any;
if (anyProps.readOnly && !props.disabled && !['Select'].includes(anyProps.__staticSelector)) {
- return deepMerge(InputClasses, ReadOnlyInputClasses);
+ return ReadOnlyInputClasses;
}
- return InputClasses;
+ return {};
},
}),
InputWrapper: InputWrapper.extend({
@@ -228,12 +196,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
},
}),
List: List.extend({
- classNames: {root: ListClasses.root},
- }),
- MenuItem: MenuItem.extend({
- defaultProps: {
- fw: 300,
- },
+ classNames: ListClasses,
}),
Modal: Modal.extend({
classNames: ModalClasses,
@@ -256,15 +219,10 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
icon: ,
color: 'info',
},
- classNames: {
- root: NotificationClasses.root,
- icon: NotificationClasses.icon,
- closeButton: NotificationClasses.closeButton,
- },
+ classNames: NotificationClasses,
vars: NotificationVars,
}),
Pagination: Pagination.extend({
- classNames: PaginationClasses,
vars: () => ({root: {'--pagination-control-fz': 'var(--mantine-font-size-sm)'}}),
defaultProps: {
nextIcon: ArrowHeadRightSize16Px,
@@ -297,31 +255,23 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
},
}),
ScrollArea: ScrollArea.extend({
- classNames: {viewport: ScrollAreaClasses.viewport},
+ classNames: ScrollAreaClasses,
}),
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},
+ classNames: SkeletonClasses,
}),
Stepper: Stepper.extend({
defaultProps: {
size: 'xs',
completedIcon: ,
},
- classNames: {
- step: StepperClasses.step,
- stepIcon: StepperClasses.stepIcon,
- stepCompletedIcon: StepperClasses.stepCompletedIcon,
- stepDescription: StepperClasses.stepDescription,
- separator: StepperClasses.separator,
- verticalSeparator: StepperClasses.verticalSeparator,
- },
+ classNames: StepperClasses,
}),
Switch: Switch.extend({
classNames: (theme, props) => {
@@ -355,8 +305,10 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
},
}),
Text: Text.extend({
+ defaultProps: {
+ size: 'sm',
+ },
classNames: TextClasses,
- vars: TextVars,
}),
TextInput: TextInput.extend({
defaultProps: {
diff --git a/packages/mantine/src/vars/Text.vars.ts b/packages/mantine/src/vars/Text.vars.ts
deleted file mode 100644
index d2d220e5a4..0000000000
--- a/packages/mantine/src/vars/Text.vars.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {PartialVarsResolver, TextFactory, getFontSize} from '@mantine/core';
-
-export const TextVars: PartialVarsResolver = (theme, props) => {
- if (!props.size) {
- return {root: {'--text-fz': getFontSize('sm')}};
- }
- return {root: {}};
-};
diff --git a/packages/website/src/examples/form/form/Form.demo.tsx b/packages/website/src/examples/form/form/Form.demo.tsx
index 08d4296de5..7e42c3e481 100644
--- a/packages/website/src/examples/form/form/Form.demo.tsx
+++ b/packages/website/src/examples/form/form/Form.demo.tsx
@@ -142,6 +142,13 @@ const Demo = () => {
readOnly={form.values.readOnly}
disabled={form.values.disabled}
/>
+
Switch