@coveord/plasma-mantine 59.8.0 → 60.0.0

package/dist/esm/styles/Alert.module.css

@@ -1,27 +0,0 @@
-.title {
-    font-weight: var(--coveo-fw-bold);
-}
-
-.label {
-    color: var(--mantine-color-text);
-}
-
-.wrapper {
-    gap: var(--mantine-spacing-sm);
-}
-
-.icon {
-    margin-inline-end: 0;
-    margin-top: 0;
-    width: var(--mantine-spacing-md);
-    height: var(--mantine-spacing-md);
-}
-
-.body {
-    gap: var(--mantine-spacing-xxs);
-    padding: var(--mantine-spacing-xxs) 0;
-}
-
-.closeButton {
-    color: var(--mantine-color-text);
-}

package/dist/esm/styles/AppShell.module.css

@@ -1,4 +0,0 @@
-.main {
-    height: calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px));
-    background-color: var(--coveo-app-background);
-}

package/dist/esm/styles/Badge.module.css

@@ -1,6 +0,0 @@
-.root {
-    --badge-fz-md: 12px;
-
-    font-weight: var(--coveo-fw-bold);
-    line-height: 14px;
-}

package/dist/esm/styles/Breadcrumbs.module.css

@@ -1,8 +0,0 @@
-.root {
-    font-size: var(--mantine-font-size-sm);
-    font-weight: var(--coveo-fw-bold);
-}
-
-.breadcrumb {
-    line-height: 16px;
-}

package/dist/esm/styles/Button.module.css

@@ -1,11 +0,0 @@
-.label {
-    font-weight: var(--coveo-fw-bold);
-}
-
-.root {
-    &[data-variant='subtle'] {
-        &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
-            background: transparent;
-        }
-    }
-}

package/dist/esm/styles/Card.module.css

@@ -1,24 +0,0 @@
-.root {
-    transition-property: box-shadow;
-    transition-timing-function: var(--coveo-transition-function);
-    transition-duration: var(--coveo-transition-duration);
-
-    &:not([data-with-border]) {
-        border: 1px solid transparent;
-    }
-
-    &[data-selected] {
-        border: 1px solid var(--mantine-primary-color-filled);
-    }
-
-    &[data-variant='hover']:not([data-disabled]) {
-        &:hover {
-            cursor: pointer;
-            box-shadow: var(--mantine-shadow-sm);
-        }
-    }
-
-    &[data-disabled='true'] {
-        pointer-events: none;
-    }
-}

package/dist/esm/styles/Checkbox.module.css

@@ -1,40 +0,0 @@
-/* 
-`readonly` state on checkboxes is not something that exists in Mantine.
-So we are allowing ourselves some custom style to achieve the desired effect
-*/
-.input {
-    @mixin light {
-        /* targets the default checkbox without overiding mantine's base rules */
-        &:not([data-indeterminate], :checked, [readonly], :disabled, [data-error='true']) {
-            border-color: var(--coveo-color-input-border);
-        }
-
-        /* mantine doesn't have a concept of readonly checkbox */
-        &[readonly] {
-            border-color: var(--mantine-color-default-border);
-            background-color: var(--coveo-color-bg-readonly);
-            color: var(--coveo-color-text-readonly);
-
-            & + .icon {
-                color: var(--coveo-color-text-readonly);
-            }
-        }
-
-        &:disabled {
-            border-color: var(--mantine-color-default-border);
-        }
-    }
-}
-
-.labelWrapper {
-    @mixin light {
-        &[data-disabled] {
-            .label,
-            .description {
-                color: var(--mantine-color-disabled-color);
-            }
-        }
-    }
-
-    --label-offset-start: 8px;
-}

package/dist/esm/styles/CheckboxIndicator.module.css

@@ -1,12 +0,0 @@
-/* 
-`readonly` state on checkboxes is not something that exists in Mantine.
-So we are allowing ourselves some custom style to achieve the desired effect
-*/
-.indicator {
-    @mixin where-light {
-        &[readonly] {
-            border-color: var(--coveo-color-input-border);
-            background-color: var(--checkbox-color);
-        }
-    }
-}

package/dist/esm/styles/Chip.module.css

@@ -1,48 +0,0 @@
-.root {
-    --chip-color: var(--coveo-color-text-primary);
-    --chip-bg: var(--mantine-primary-color-light);
-    --chip-hover: var(--mantine-primary-color-filled-hover);
-    --chip-radius: var(--mantine-radius-lg);
-    --chip-size-xs: 24px;
-    --chip-icon-size-xs: 12px;
-    --chip-spacing-xs: var(--mantine-spacing-xs);
-    --chip-padding-xs: 12px;
-    --chip-checked-padding-xs: 6px 12px;
-    --chip-icon-size-sm: var(--mantine-spacing-sm);
-    --chip-spacing-sm: var(--mantine-spacing-xs);
-    --chip-padding-sm: var(--mantine-spacing-sm);
-    --chip-checked-padding-sm: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-
-    > .label {
-        &:not([data-checked]) {
-            border: 1px solid var(--mantine-color-default-border);
-            border-radius: var(--mantine-radius-lg);
-            background-color: var(--mantine-color-white);
-
-            @mixin hover {
-                &[data-disabled] {
-                    border: none;
-                    color: var(--mantine-color-disabled-color);
-                    background-color: var(--mantine-color-disabled);
-                }
-
-                background-color: var(--mantine-color-gray-light);
-                border-color: var(--coveo-color-input-border);
-            }
-        }
-
-        &:not([data-disabled]) {
-            @mixin hover {
-                &[data-checked] {
-                    color: var(--mantine-color-white);
-                }
-            }
-        }
-
-        &[data-disabled] {
-            border: none;
-            color: var(--mantine-color-disabled-color);
-            background-color: var(--mantine-color-disabled);
-        }
-    }
-}

package/dist/esm/styles/CloseButton.module.css

@@ -1,15 +0,0 @@
-.root {
-    &[data-size='sm'] {
-        & svg {
-            width: 12px;
-            height: 12px;
-        }
-    }
-
-    &[data-size='md'] {
-        & svg {
-            width: 16px;
-            height: 16px;
-        }
-    }
-}

package/dist/esm/styles/Combobox.module.css

@@ -1,12 +0,0 @@
-/* TODO: Plasma Reset, validate if we need the custom style for the search */
-.search {
-    margin: 0 0 var(--mantine-spacing-xs);
-    border-radius: var(--mantine-radius-default);
-    border: 1px solid;
-    width: 100%;
-    border-color: var(--mantine-color-default-border);
-
-    &:focus {
-        border-color: var(--mantine-primary-color-filled);
-    }
-}

package/dist/esm/styles/DatePicker.module.css

@@ -1,17 +0,0 @@
-.day {
-    @mixin hover {
-        &:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
-            @mixin light {
-                background-color: var(--mantine-color-default-hover);
-            }
-        }
-    }
-
-    &:where([data-weekend]) {
-        color: var(--mantine-color-text);
-
-        &:where([data-selected]) {
-            color: var(--mantine-primary-color-contrast);
-        }
-    }
-}

package/dist/esm/styles/DateTimePicker.module.css

@@ -1,17 +0,0 @@
-.day {
-    @mixin hover {
-        &:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
-            @mixin light {
-                background-color: var(--mantine-color-default-hover);
-            }
-        }
-    }
-
-    &:where([data-weekend]) {
-        color: var(--mantine-color-text);
-
-        &:where([data-selected]) {
-            color: var(--mantine-primary-color-contrast);
-        }
-    }
-}

package/dist/esm/styles/Input.module.css

@@ -1,49 +0,0 @@
-.wrapper {
-    @mixin light {
-        --input-disabled-color: var(--mantine-color-disabled-color);
-
-        &[data-variant='default'] {
-            --input-bd: var(--coveo-color-input-border);
-        }
-
-        &[data-disabled],
-        &:read-only {
-            --input-bd: var(--mantine-color-default-border);
-        }
-    }
-
-    &[data-disabled] {
-        > .section {
-            > svg,
-            > [data-combined-clear-section] > svg {
-                color: var(--input-disabled-color);
-            }
-        }
-    }
-
-    &[data-error] {
-        > .section {
-            > svg,
-            > [data-combined-clear-section] > svg {
-                color: var(--mantine-color-error);
-            }
-        }
-    }
-}
-
-.input {
-    @mixin dark {
-        --input-bg: var(--mantine-color-default);
-    }
-
-    &[data-expanded]:not([data-readonly]) ~ .section [data-plasma-combobox-chevron] {
-        transform: rotate(180deg);
-    }
-}
-
-.section {
-    > svg,
-    > [data-combined-clear-section] > svg {
-        color: var(--mantine-color-dimmed);
-    }
-}

package/dist/esm/styles/InputWrapper.module.css

@@ -1,14 +0,0 @@
-.root {
-    display: flex;
-    flex-direction: column;
-    gap: var(--mantine-spacing-xxs);
-}
-
-.description {
-    font-weight: var(--coveo-fw-normal);
-    font-size: var(--mantine-font-size-sm);
-}
-
-.error {
-    font-weight: var(--coveo-fw-normal);
-}

package/dist/esm/styles/List.module.css

@@ -1,7 +0,0 @@
-ul.root {
-    list-style-type: disc;
-}
-
-ol.root {
-    list-style-type: decimal;
-}

package/dist/esm/styles/Modal.module.css

@@ -1,24 +0,0 @@
-.title {
-    font-weight: var(--coveo-fw-bold);
-}
-
-.header {
-    gap: var(--mantine-spacing-sm);
-    min-height: unset;
-}
-
-.close {
-    align-self: flex-start;
-}
-
-.content {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.body {
-    overflow-y: auto;
-    border-end-start-radius: var(--modal-radius, var(--mantine-radius-default));
-    border-end-end-radius: var(--modal-radius, var(--mantine-radius-default));
-}

package/dist/esm/styles/MonthPicker.module.css

@@ -1,11 +0,0 @@
-.monthsListControl {
-    border-radius: var(--mantine-radius-default);
-
-    @mixin hover {
-        &:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
-            @mixin light {
-                background-color: var(--mantine-color-default-hover);
-            }
-        }
-    }
-}

package/dist/esm/styles/NavLink.module.css

@@ -1,15 +0,0 @@
-.root {
-    &:where(:not([data-active]), [data-disabled]) {
-        &:hover {
-            background-color: var(--mantine-color-default-hover);
-        }
-    }
-
-    &:where([data-disabled]) {
-        color: var(--mantine-color-disabled-color);
-    }
-}
-
-.label {
-    font-weight: var(--coveo-fw-bold);
-}

package/dist/esm/styles/Notifications.module.css

@@ -1,37 +0,0 @@
-.root {
-    --notification-radius: var(--mantine-radius-lg);
-    --notification-color: transparent;
-
-    padding: 12px var(--mantine-spacing-sm) 12px;
-
-    @mixin light {
-        background-color: var(--coveo-color-bg-dark-surface);
-    }
-}
-
-.title,
-.closeButton {
-    @mixin light {
-        color: var(--mantine-color-white);
-
-        &:hover {
-            background-color: alpha(var(--mantine-color-gray-4), 0.2);
-        }
-
-        > svg {
-            @mixin light {
-                color: var(--mantine-color-white);
-            }
-        }
-    }
-}
-
-.description {
-    @mixin light {
-        color: var(--mantine-color-gray-2);
-    }
-}
-
-.icon {
-    margin-inline-end: var(--mantine-spacing-xs);
-}

package/dist/esm/styles/NumberInput.module.css

@@ -1,9 +0,0 @@
-.control {
-    @mixin light {
-        color: var(--mantine-color-dimmed);
-
-        @mixin hover {
-            background-color: var(--mantine-color-default-hover);
-        }
-    }
-}

package/dist/esm/styles/Pagination.module.css

@@ -1,37 +0,0 @@
-.root {
-    --pagination-active-bg: var(--mantine-primary-color-light);
-    --pagination-active-color: var(--mantine-primary-color-filled);
-}
-
-.control {
-    @mixin where-light {
-        border-color: var(--mantine-color-default-border);
-
-        @mixin hover {
-            &:not([data-active], [data-disabled]) {
-                background-color: var(--mantine-color-default-hover);
-            }
-        }
-
-        &:not([data-active]) {
-            color: var(--mantine-color-placeholder);
-        }
-
-        &[data-disabled] {
-            opacity: 1;
-            background-color: var(--mantine-color-disabled);
-
-            & + .icon {
-                color: var(--mantine-color-disabled-color);
-            }
-        }
-    }
-
-    &[data-active] {
-        border: none;
-    }
-}
-
-.dots {
-    color: var(--mantine-color-gray-filled);
-}

package/dist/esm/styles/Paper.module.css

@@ -1,5 +0,0 @@
-.root {
-    @mixin light {
-        --paper-border-color: var(--mantine-color-default-border);
-    }
-}

package/dist/esm/styles/Pill.module.css

@@ -1,17 +0,0 @@
-.root {
-    padding: 0 var(--mantine-spacing-xs);
-    color: var(--mantine-color-text);
-    background-color: var(--mantine-color-gray-light);
-
-    &[data-with-remove] {
-        padding: 0 var(--mantine-spacing-xxs) 0 var(--mantine-spacing-xs);
-
-        &[data-size='md'] {
-            padding: 0 2px 0 var(--mantine-spacing-xs);
-        }
-    }
-}
-
-.remove {
-    padding: 0;
-}

package/dist/esm/styles/Popover.module.css

@@ -1,6 +0,0 @@
-.dropdown {
-    --popover-radius: var(--mantine-radius-md);
-    --popover-shadow: var(--mantine-shadow-xs);
-
-    padding: var(--combobox-padding, var(--mantine-spacing-sm, 16));
-}

package/dist/esm/styles/Radio.module.css

@@ -1,37 +0,0 @@
-.labelWrapper {
-    display: flex;
-    align-items: flex-start;
-
-    &[data-disabled] {
-        .label,
-        .description {
-            color: var(--mantine-color-disabled-color);
-        }
-    }
-}
-
-.radio {
-    &:not(:checked, [readonly], :disabled, [data-error='true']) {
-        border-color: var(--coveo-color-input-border);
-    }
-
-    &:disabled {
-        background-color: var(--mantine-color-disabled);
-        border-color: var(--mantine-color-default-border);
-
-        & + .icon {
-            color: var(--mantine-color-placeholder);
-        }
-    }
-
-    /* mantine hardcodes disabled styles so we need to write custom styles */
-    &[readonly] {
-        border-color: var(--mantine-color-default-border);
-        background-color: var(--coveo-color-bg-readonly);
-        color: var(--coveo-color-text-readonly);
-
-        & + .icon {
-            color: var(--coveo-color-text-readonly);
-        }
-    }
-}

package/dist/esm/styles/RadioCard.module.css

@@ -1,76 +0,0 @@
-.card:hover:not([disabled]) {
-    @mixin light {
-        background-color: var(--mantine-color-default-hover);
-    }
-}
-
-.card {
-    --radio-card-outline-color: var(--mantine-color-default-border);
-
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: flex-start;
-    gap: var(--mantine-spacing-sm);
-    padding: var(--mantine-spacing-sm);
-    border-radius: var(--mantine-radius-lg);
-    border-color: var(--radio-card-outline-color);
-    transition: border-color 150ms ease;
-    background-color: var(--mantine-color-body);
-
-    &[data-checked] {
-        --radio-card-outline-color: var(--mantine-primary-color-filled);
-    }
-
-    &[disabled],
-    &[readonly] {
-        --radio-card-outline-color: var(--mantine-color-default-border);
-    }
-
-    &[disabled] {
-        cursor: not-allowed;
-
-        .title,
-        .description {
-            color: var(--mantine-color-disabled-color);
-        }
-    }
-
-    &[readonly] {
-        pointer-events: none;
-
-        .indicator[data-checked] {
-            background-color: var(--mantine-color-default);
-            color: var(--coveo-color-text-readonly);
-
-            & > svg {
-                color: inherit;
-            }
-        }
-    }
-}
-
-.container {
-    gap: var(--mantine-spacing-xs);
-    width: 100%;
-}
-
-.title {
-    line-height: 20px;
-}
-
-.title,
-.description {
-    flex: 1;
-    overflow-wrap: anywhere;
-}
-
-.indicator {
-    cursor: pointer;
-    transition: border-color 150ms ease;
-
-    &,
-    &[data-disabled],
-    &[data-checked] {
-        border-color: var(--radio-card-outline-color);
-    }
-}

package/dist/esm/styles/ReadOnlyInput.module.css

@@ -1,16 +0,0 @@
-.input {
-    cursor: text;
-
-    --input-bd: var(--mantine-color-default-border);
-    --input-bg: var(--coveo-color-bg-readonly);
-    --input-color: var(--mantine-color-text);
-    --input-placeholder-color: var(--mantine-color-text);
-}
-
-.section {
-    --input-section-color: var(--mantine-color-text);
-
-    > svg {
-        color: var(--input-section-color);
-    }
-}

package/dist/esm/styles/ReadOnlyState.module.css

@@ -1,3 +0,0 @@
-.root {
-    pointer-events: none;
-}

package/dist/esm/styles/ScrollArea.module.css

@@ -1,8 +0,0 @@
-.viewport {
-    /* https://github.com/radix-ui/primitives/issues/926 */
-    &[data-radix-scroll-area-viewport] {
-        & > :first-of-type {
-            display: block !important;
-        }
-    }
-}