@coveord/plasma-mantine 55.7.2-next.2 → 55.7.3

package/src/styles/Pagination.module.css

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

package/src/styles/Radio.module.css

@@ -1,4 +1,10 @@
 .labelWrapper {
     display: flex;
     align-items: flex-start;
+
+    &:not([data-disabled]) {
+        .label {
+            color: var(--mantine-color-gray-7);
+        }
+    }
 }

package/src/styles/ReadOnlyInput.module.css

@@ -2,7 +2,7 @@
     cursor: text;
 
     --input-bd: transparent;
-    --input-bg: var(--mantine-color-dark-light);
-    --input-color: var(--mantine-color-dimmed);
-    --input-placeholder-color: var(--mantine-color-dimmed);
+    --input-bg: var(--mantine-color-gray-2);
+    --input-color: var(--mantine-color-gray-7);
+    --input-placeholder-color: var(--mantine-color-gray-7);
 }

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/styles/Select.module.css

@@ -0,0 +1,39 @@
+.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%);
+        }
+    }
+}

package/src/styles/Stepper.module.css

@@ -1,3 +1,69 @@
+.step {
+    &[disabled] {
+        color: var(--mantine-color-gray-5);
+
+        & .mantine-Stepper-stepDescription {
+            color: var(--mantine-color-gray-5);
+        }
+
+        & .mantine-Stepper-stepIcon {
+            border-color: var(--mantine-color-gray-1);
+        }
+    }
+}
+
 .stepIcon {
     font-weight: 500;
+    background-color: var(--mantine-color-gray-1);
+    color: inherit;
+    border: rem(1) solid var(--mantine-color-gray-3);
+
+    &[data-progress] {
+        background-color: var(--mantine-color-white);
+        border-color: var(--step-color);
+    }
+
+    &[data-completed] {
+        background-color: var(--mantine-color-white);
+        border-color: var(--mantine-color-lime-6);
+        color: var(--mantine-color-lime-6);
+    }
+}
+
+.stepCompletedIcon {
+    color: var(--mantine-color-lime-6);
+    font-size: rem(16);
+}
+
+.stepDescription {
+    color: var(--mantine-color-gray-7);
+
+    &[data-size='xs'] {
+        font-size: var(--mantine-font-size-xs);
+    }
+
+    &[data-size='sm'] {
+        font-size: var(--mantine-font-size-sm);
+    }
+
+    &[data-size='md'] {
+        font-size: var(--mantine-font-size-md);
+    }
+
+    &[data-size='lg'] {
+        font-size: var(--mantine-font-size-lg);
+    }
+
+    &[data-size='xl'] {
+        font-size: var(--mantine-font-size-xl);
+    }
+}
+
+.separator {
+    height: rem(1);
+    background-color: var(--mantine-color-gray-3);
+}
+
+.verticalSeparator {
+    border-left: rem(1) solid var(--mantine-color-gray-3);
 }

package/src/styles/Tabs.module.css

@@ -1,5 +1,11 @@
 .root {
     &[data-variant='default'] {
+        @mixin light {
+            --tab-hover-color: var(--mantine-color-gray-1);
+        }
+
+        --tabs-list-border-width: 1px;
+
         &[data-orientation='horizontal'] {
             .list {
                 margin-bottom: calc(-1 * var(--tabs-list-border-width));
@@ -9,6 +15,5 @@
 }
 
 .tab {
-    font-weight: 500;
     line-height: 1.5;
 }

package/src/styles/Text.module.css

@@ -1,7 +1,3 @@
 .root {
     font-weight: 300;
-
-    &:where([data-inherit]) {
-        font-weight: inherit;
-    }
 }

package/src/theme/PlasmaColors.ts

@@ -23,157 +23,32 @@ const lime = [
 
 export const PlasmaColors = {
     // Primary
-    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',
-    }),
+    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,
     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),