@coveord/plasma-mantine 53.0.0 → 53.0.1

package/src/styles/SegmentedControl.module.css

@@ -1,3 +1,35 @@
 .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);
+            }
+        }
+    }
+}

package/src/theme/Theme.tsx

@@ -1,4 +1,12 @@
-import {CheckSize16Px, CrossSize16Px, FilterSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';
+import {
+    ArrowHeadLeftSize16Px,
+    ArrowHeadRightSize16Px,
+    CheckSize16Px,
+    CrossSize16Px,
+    FilterSize16Px,
+    InfoSize16Px,
+    InfoSize24Px,
+} from '@coveord/plasma-react-icons';
 import {color} from '@coveord/plasma-tokens';
 import {
     ActionIcon,
@@ -23,6 +31,7 @@ import {
     MultiSelect,
     NavLink,
     Notification,
+    Pagination,
     Popover,
     Radio,
     ScrollArea,
@@ -53,6 +62,7 @@ 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 ScrollAreaClasses from '../styles/ScrollArea.module.css';
 import SegmentedControlClasses from '../styles/SegmentedControl.module.css';
@@ -107,10 +117,10 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         }),
         Alert: Alert.extend({
             defaultProps: {
-                icon: <InfoSize24Px height={24} />,
+                icon: <InfoSize16Px height={16} />,
                 color: 'navy',
             },
-            classNames: {title: AlertClasses.title},
+            classNames: AlertClasses,
         }),
         Anchor: Anchor.extend({
             defaultProps: {
@@ -213,6 +223,14 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             },
             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',
@@ -226,7 +244,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             classNames: {viewport: ScrollAreaClasses.viewport},
         }),
         SegmentedControl: SegmentedControl.extend({
-            classNames: {root: SegmentedControlClasses.root},
+            classNames: SegmentedControlClasses,
         }),
         Select: Select.extend({
             defaultProps: {withCheckIcon: false, allowDeselect: false},