From 1dc32ac4175d28a0ef84c89e9d1f885795748eac Mon Sep 17 00:00:00 2001 From: Germain Bergeron Date: Tue, 17 Dec 2024 13:49:09 -0500 Subject: [PATCH] feat(mantine): remove a lot of custom style to get a vanilla style --- .../browser-preview/BrowserPreview.module.css | 2 +- .../mantine/src/styles/ActionIcon.module.css | 6 - packages/mantine/src/styles/Alert.module.css | 27 +-- packages/mantine/src/styles/Anchor.module.css | 6 - .../src/styles/AppShellNavBar.module.css | 3 - packages/mantine/src/styles/Badge.module.css | 2 - .../mantine/src/styles/Checkbox.module.css | 17 -- .../mantine/src/styles/Combobox.module.css | 4 +- .../mantine/src/styles/DatePicker.module.css | 3 - packages/mantine/src/styles/Input.module.css | 3 - packages/mantine/src/styles/Modal.module.css | 54 +----- .../mantine/src/styles/NavLink.module.css | 18 -- .../src/styles/Notification.module.css | 2 +- .../mantine/src/styles/Pagination.module.css | 30 ---- packages/mantine/src/styles/Radio.module.css | 6 - .../src/styles/SegmentedControl.module.css | 32 ---- packages/mantine/src/styles/Select.module.css | 39 ----- .../mantine/src/styles/Stepper.module.css | 2 +- packages/mantine/src/styles/Tabs.module.css | 4 - packages/mantine/src/theme/PlasmaColors.ts | 163 ++++++++++++++++-- packages/mantine/src/theme/Theme.tsx | 82 ++------- packages/mantine/src/vars/Text.vars.ts | 8 - .../src/examples/form/form/Form.demo.tsx | 7 + 23 files changed, 175 insertions(+), 345 deletions(-) delete mode 100644 packages/mantine/src/styles/ActionIcon.module.css delete mode 100644 packages/mantine/src/styles/Anchor.module.css delete mode 100644 packages/mantine/src/styles/AppShellNavBar.module.css delete mode 100644 packages/mantine/src/styles/DatePicker.module.css delete mode 100644 packages/mantine/src/styles/Input.module.css delete mode 100644 packages/mantine/src/styles/Pagination.module.css delete mode 100644 packages/mantine/src/styles/Select.module.css delete mode 100644 packages/mantine/src/vars/Text.vars.ts 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