@axinom/mosaic-ui 0.67.0-rc.1 → 0.67.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.67.0-rc.1",
+  "version": "0.67.0-rc.6",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "05c979ef28af7f6460faba7b3dbd034ffcb7bd38"
+  "gitHead": "41f4fdec6d54a9d6c3222f37b3b0388e2874e802"
 }

package/src/components/Accordion/Accordion.scss

@@ -33,7 +33,7 @@
       color: var(--accordion-header-text-color, $accordion-header-text-color);
       font-weight: bold;
 
-      border-bottom: solid 1px color-mix(in srgb, var(--ax-neutral) 85%, white);
+      border-bottom: solid 1px var(--accordion-header-border-color, $accordion-header-border-color);
 
       top: 0;
       position: sticky;

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -4,7 +4,7 @@
   display: grid;
   grid-template-columns: 50px auto;
   align-items: center;
-  background-color: var(--ax-neutral-light);
+  background-color: var(--accordion-item-row-background-color, $accordion-item-row-background-color);
   margin-top: 4px;
   height: 50px;
   cursor: pointer;
@@ -19,7 +19,7 @@
   }
 
   &.rowExpanded {
-    background-color: var(--ax-neutral-lighter);
+    background-color: var(--accordion-item-row-expanded-background-color, $accordion-item-row-expanded-background-color);
   }
 
   &.sticky {

package/src/components/Buttons/Button/Button.scss

@@ -108,10 +108,10 @@
     }
 
     &:disabled {
-      border: 1px solid var(--ax-neutral);
+      border: 1px solid var(--button-context-disabled-border-color, $button-context-disabled-border-color);
 
       svg * {
-        stroke: var(--ax-neutral);
+        stroke: var(--button-context-disabled-stroke-color, $button-context-disabled-stroke-color);
       }
     }
   }
@@ -146,7 +146,7 @@
       background-color: white;
 
       svg * {
-        stroke: var(--ax-primary);
+        stroke: var(--button-icon-active-stroke-color, $button-icon-active-stroke-color);
       }
     }
 
@@ -154,7 +154,7 @@
       border: none;
 
       svg * {
-        stroke: var(--ax-neutral);
+        stroke: var(--button-icon-disabled-stroke-color, $button-icon-disabled-stroke-color);
       }
     }
   }
@@ -193,7 +193,7 @@
     }
 
     &:disabled {
-      background-color: var(--ax-neutral);
+      background-color: var(--button-active-disabled-background-color, $button-active-disabled-background-color);
 
       svg * {
         opacity: 0.5;

package/src/components/Buttons/CompositeButton/CompositeButton.scss

@@ -121,11 +121,11 @@
     }
 
     &:disabled {
-      border: 1px solid var(--ax-neutral);
-      color: var(--ax-neutral);
+      border: 1px solid var(--composite-button-context-disabled-border-color, $composite-button-context-disabled-border-color);
+      color: var(--composite-button-context-disabled-color, $composite-button-context-disabled-color);
 
       svg * {
-        stroke: var(--ax-neutral);
+        stroke: var(--composite-button-context-disabled-color, $composite-button-context-disabled-color);
       }
     }
   }
@@ -146,11 +146,11 @@
 
     &:active {
       background-color: white;
-      color: var(--ax-primary);
+      color: var(--composite-button-active-color, $composite-button-active-color);
     }
 
     &:disabled {
-      background-color: var(--ax-neutral);
+      background-color: var(--composite-button-active-disabled-background-color, $composite-button-active-disabled-background-color);
       color: color-mix(in srgb, white 50%, transparent);
     }
   }

package/src/components/Buttons/TextButton/TextButton.scss

@@ -84,8 +84,8 @@
     }
 
     &:disabled {
-      border: 1px solid var(--ax-neutral);
-      color: var(--ax-neutral);
+      border: 1px solid var(--text-button-context-disabled-border-color, $text-button-context-disabled-border-color);
+      color: var(--text-button-context-disabled-color, $text-button-context-disabled-color);
     }
   }
 
@@ -105,11 +105,11 @@
 
     &:active {
       background-color: white;
-      color: var(--ax-primary);
+      color: var(--text-button-active-color, $text-button-active-color);
     }
 
     &:disabled {
-      background-color: var(--ax-neutral);
+      background-color: var(--text-button-active-disabled-background-color, $text-button-active-disabled-background-color);
       color: color-mix(in srgb, white 50%, transparent);
     }
   }

package/src/components/ConfirmDialog/ConfirmDialog.scss

@@ -32,7 +32,7 @@ $pop-up-horizontal-arrow: 47%;
 
       padding: 5px;
 
-      color: var(--ax-neutral-dark);
+      color: var(--confirm-dialog-body-text-color, $confirm-dialog-body-text-color);
       font-size: 14px;
 
       .defaultText {

package/src/components/DateTime/DatePicker/DatePicker.scss

@@ -36,7 +36,7 @@
     cursor: pointer;
   }
   :global(.react-calendar__navigation) button[disabled] {
-    background-color: var(--ax-neutral-lighter);
+    background-color: var(--datepicker-navigation-button-disabled-bg, $datepicker-navigation-button-disabled-bg);
   }
   :global(.react-calendar__month-view__weekdays) {
     text-align: center;
@@ -59,7 +59,7 @@
     padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
   }
   :global(.react-calendar__month-view__days__day--neighboringMonth) {
-    color: var(--ax-neutral);
+    color: var(--datepicker-neighbor-month-color, $datepicker-neighbor-month-color);
   }
   :global(.react-calendar__year-view) :global(.react-calendar__tile),
   :global(.react-calendar__decade-view) :global(.react-calendar__tile),
@@ -74,37 +74,37 @@
     background: none;
   }
   :global(.react-calendar__tile):disabled {
-    background-color: var(--ax-neutral-lighter);
+    background-color: var(--datepicker-tile-disabled-bg, $datepicker-tile-disabled-bg);
   }
   :global(.react-calendar__tile):enabled:hover {
-    background-color: var(--ax-neutral-light);
+    background-color: var(--datepicker-tile-hover-bg, $datepicker-tile-hover-bg);
   }
   :global(.react-calendar__tile--hasActive) {
-    background: var(--ax-primary-light);
+    background: var(--datepicker-tile-has-active-bg, $datepicker-tile-has-active-bg);
   }
   :global(.react-calendar__tile--hasActive):enabled:hover,
   :global(.react-calendar__tile--hasActive):enabled:focus {
-    background: color-mix(in srgb, var(--ax-primary-light), white 30%);
+    background: var(--datepicker-tile-has-active-hover-bg, $datepicker-tile-has-active-hover-bg);
   }
   :global(.react-calendar__tile--active) {
-    background: var(--ax-primary-dark);
+    background: var(--datepicker-tile-active-bg, $datepicker-tile-active-bg);
     color: white;
   }
   :global(.react-calendar__tile--active):enabled:hover,
   :global(.react-calendar__tile--active):enabled:focus {
-    background: var(--ax-primary);
+    background: var(--datepicker-tile-active-hover-bg, $datepicker-tile-active-hover-bg);
   }
   :global(.react-calendar--selectRange) :global(.react-calendar__tile--hover) {
-    background-color: var(--ax-neutral-light);
+    background-color: var(--datepicker-select-range-hover-bg, $datepicker-select-range-hover-bg);
   }
 
   :global(.react-calendar__tile) {
     transition: background-color 0.15s ease-in-out 0s;
 
-    color: var(--ax-neutral-dark);
+    color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
 
     * {
-      color: var(--ax-neutral-dark);
+      color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
     }
 
     &:hover {
@@ -171,7 +171,7 @@
   }
 
   :global(.react-calendar__month-view__days__day--neighboringMonth) * {
-    color: var(--ax-neutral-light);
+    color: var(--datepicker-neighbor-month-light-color, $datepicker-neighbor-month-light-color);
   }
 
   :global(.react-calendar__tile--active),

package/src/components/DateTime/TimePicker/ScrollColumn/ScrollColumn.scss

@@ -13,7 +13,7 @@
 .inactive-title {
   display: grid;
   font-size: 12px;
-  color: var(--ax-neutral);
+  color: var(--timepicker-inactive-title-color, $timepicker-inactive-title-color);
   text-align: center;
   align-items: center;
 }
@@ -23,7 +23,7 @@
 
   display: grid;
   font-size: 18px;
-  color: var(--ax-neutral-dark);
+  color: var(--timepicker-item-color, $timepicker-item-color);
   text-align: center;
   align-items: center;
 
@@ -35,10 +35,10 @@
 
   &.active {
     visibility: visible;
-    background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
+    background-color: var(--timepicker-item-active-bg, $timepicker-item-active-bg);
 
     &.selected {
-      background-color: var(--ax-primary);
+      background-color: var(--timepicker-item-selected-bg, $timepicker-item-selected-bg);
       color: white;
     }
   }
@@ -46,11 +46,11 @@
   &.selected {
     visibility: visible;
 
-    border: 1px solid var(--ax-primary);
+    border: 1px solid var(--timepicker-item-selected-border, $timepicker-item-selected-border);
   }
 
   &:hover {
-    background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
+    background-color: var(--timepicker-item-hover-bg, $timepicker-item-hover-bg);
   }
 }
 
@@ -70,7 +70,7 @@
     }
 
     svg * {
-      stroke: var(--ax-primary);
+      stroke: var(--timepicker-button-stroke-color, $timepicker-button-stroke-color);
     }
 
     &.hidden {

package/src/components/DateTime/TimePicker/TimePicker.scss

@@ -12,7 +12,7 @@
   display: grid;
   grid-column: 1 / 5;
   font-size: 20px;
-  color: var(--ax-neutral-dark);
+  color: var(--timepicker-title-color, $timepicker-title-color);
   text-align: center;
   height: 40px;
   align-items: center;

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.scss

@@ -13,7 +13,7 @@
   grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
   column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
 
-  border-bottom: solid 1px var(--ax-neutral-light);
+  border-bottom: solid 1px var(--dynamic-list-header-border-color, $dynamic-list-header-border-color);
 
   justify-items: left;
   align-items: center;
@@ -36,7 +36,7 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
+      border-right: var(--explorer-list-row-border, 1px solid var(--dynamic-list-header-resize-border-color, $dynamic-list-header-resize-border-color));
       position: absolute;
       right: 0;
 

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss

@@ -79,10 +79,10 @@
     }
 
     .dragIcon {
-      stroke: var(--ax-neutral-light);
+      stroke: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
 
       rect {
-        fill: var(--ax-neutral-light);
+        fill: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
       }
     }
   }

package/src/components/Filters/Filter/Filter.scss

@@ -109,7 +109,7 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
   }
 }
 
-.content {
+.contentContainer {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -118,6 +118,12 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
     grid-template-rows: 1fr;
   }
 
+  .content {
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
   .active {
     display: grid;
     overflow: hidden;

package/src/components/Filters/Filter/Filter.tsx

@@ -274,7 +274,9 @@ export const Filter = <T extends Data>({
         />
       </div>
       <div
-        className={clsx(classes.content, { [classes.expanded]: isExpanded })}
+        className={clsx(classes.contentContainer, {
+          [classes.expanded]: isExpanded,
+        })}
       >
         {hasValue && !isExpanded && (
           <div
@@ -299,7 +301,7 @@ export const Filter = <T extends Data>({
         {isExpanded && (
           <div
             data-test-id="filter-content"
-            className={clsx({ [classes.active]: isActive })}
+            className={clsx({ [classes.active]: isActive }, classes.content)}
           >
             {renderFilterContent()}
           </div>

package/src/components/Filters/SelectionTypes/DateTimeFilter/DateTimeFilter.scss

@@ -4,13 +4,24 @@
 .container {
   display: grid;
 
+  .dateTimeInputWrapper {
+    border: $input-inactive;
+
+    &:focus-within {
+      border: $input-active;
+    }
+  }
   .dateTimeInput {
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: 1fr min-content;
 
     place-items: center;
-    border: $input-inactive;
+    border: 2px solid transparent;
+
+    &:focus-within {
+      border: none;
+    }
 
     .inputValue {
       &:focus {
@@ -40,10 +51,6 @@
       }
     }
 
-    &:focus-within {
-      border: $input-active;
-    }
-
     &.hasError {
       border: 3px solid
         var(--input-invalid-border-color, $input-invalid-border-color);

package/src/components/Filters/SelectionTypes/DateTimeFilter/DateTimeFilter.tsx

@@ -106,32 +106,34 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
           className,
         )}
       >
-        <div
-          className={clsx(
-            classes.dateTimeInput,
-            'datetime-border-wrapper',
-            errorMsg && classes.hasError,
-          )}
-          ref={container}
-        >
-          <input
-            id={inputId}
-            autoFocus
-            className={clsx(classes.inputValue)}
-            onKeyDown={handleKeyDown}
-            onChange={(e) => setValue(e.target.value)}
-            value={value}
-          />
-          <Button
-            className={clsx(classes.button)}
-            buttonContext={ButtonContext.None}
-            icon={IconName.Calendar}
-            onButtonClicked={(e) => {
-              e.persist();
-              e.preventDefault();
-              setShowPicker(!showPicker);
-            }}
-          />
+        <div className={clsx(classes.dateTimeInputWrapper)}>
+          <div
+            className={clsx(
+              classes.dateTimeInput,
+              'datetime-border-wrapper',
+              errorMsg && classes.hasError,
+            )}
+            ref={container}
+          >
+            <input
+              id={inputId}
+              autoFocus
+              className={clsx(classes.inputValue)}
+              onKeyDown={handleKeyDown}
+              onChange={(e) => setValue(e.target.value)}
+              value={value}
+            />
+            <Button
+              className={clsx(classes.button)}
+              buttonContext={ButtonContext.None}
+              icon={IconName.Calendar}
+              onButtonClicked={(e) => {
+                e.persist();
+                e.preventDefault();
+                setShowPicker(!showPicker);
+              }}
+            />
+          </div>
         </div>
         {errorMsg !== undefined && <small>{errorMsg}</small>}
       </div>

package/src/components/FormElements/Checkbox/Checkbox.scss

@@ -26,7 +26,7 @@
     // transition: background-color 0.15s ease-in-out 0s;
 
     &.hasConfirm {
-      border: 1px solid var(--ax-warning);
+      border: 1px solid var(--checkbox-warning-border-color, $checkbox-warning-border-color);
     }
 
     &.hasError {
@@ -54,8 +54,8 @@
     box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
 
     &.hasConfirm {
-      border: 1px solid var(--ax-warning);
-      box-shadow: 0 0 0 2px var(--ax-warning);
+      border: 1px solid var(--checkbox-warning-hover-border-color, $checkbox-warning-hover-border-color);
+      box-shadow: 0 0 0 2px var(--checkbox-warning-hover-border-color, $checkbox-warning-hover-border-color);
     }
 
     &.hasError {
@@ -70,7 +70,7 @@
     background-color: var(--input-hover-color, $input-hover-color);
 
     &.hasConfirm {
-      background-color: var(--ax-warning);
+      background-color: var(--checkbox-warning-checked-bg-color, $checkbox-warning-checked-bg-color);
     }
 
     &.hasError {

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -145,7 +145,7 @@
         &.hasError {
           background-color: white;
           svg * {
-            stroke: color-mix(in srgb, var(--ax-neutral) 50%, transparent);
+            stroke: var(--custom-tags-disabled-button-stroke-color, $custom-tags-disabled-button-stroke-color);
           }
         }
 

package/src/components/FormElements/FileUploadControl/FileUploadControl.scss

@@ -19,7 +19,7 @@
 
       margin-left: -50px;
       border: none;
-      background-color: var(--ax-primary);
+      background-color: var(--file-upload-button-bg-color, $file-upload-button-bg-color);
 
       transition: box-shadow 0.15s ease-in-out 0s;
 
@@ -35,12 +35,12 @@
 
       &:hover {
         border: none;
-        background-color: color-mix(in srgb, var(--ax-primary) 75%, transparent);
+        background-color: var(--file-upload-button-hover-bg-color, $file-upload-button-hover-bg-color);
       }
 
       &.disabled {
         border: none;
-        background-color: var(--ax-neutral);
+        background-color: var(--file-upload-button-disabled-bg-color, $file-upload-button-disabled-bg-color);
         cursor: default;
 
         svg * {

package/src/components/FormElements/Radio/Radio.scss

@@ -27,7 +27,7 @@
         grid: 1fr / 30px 1fr;
         column-gap: 8px;
 
-        color: var(--ax-neutral-dark);
+        color: var(--radio-label-color, $radio-label-color);
         font-size: 16px;
         font-weight: unset;
 
@@ -37,12 +37,12 @@
 
         &.disabled {
           .radioOutline {
-            fill: var(--ax-neutral-lighter);
+            fill: var(--radio-disabled-outline-color, $radio-disabled-outline-color);
           }
 
           .checked {
             .radioDot {
-              fill: var(--ax-neutral-light);
+              fill: var(--radio-disabled-dot-color, $radio-disabled-dot-color);
             }
           }
         }
@@ -60,7 +60,7 @@
 
     .radioOutline {
       fill: none;
-      stroke: var(--ax-neutral);
+      stroke: var(--radio-outline-stroke-color, $radio-outline-stroke-color);
       stroke-width: 1;
     }
 
@@ -87,7 +87,7 @@
 
     &.hasConfirm {
       .radioOutline {
-        stroke: var(--ax-warning);
+        stroke: var(--radio-warning-stroke-color, $radio-warning-stroke-color);
         stroke-width: 3;
       }
     }

package/src/components/FormElements/ToggleButton/ToggleButton.scss

@@ -94,13 +94,13 @@
           }
         }
         &.off {
-          border-top: 1px solid var(--ax-warning);
-          border-bottom: 1px solid var(--ax-warning);
-          border-left: 1px solid var(--ax-warning);
+          border-top: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
+          border-bottom: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
+          border-left: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
           transition: border $confirmation-transition linear;
         }
         &.on {
-          border: 1px solid var(--ax-warning);
+          border: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
           transition: border $confirmation-transition linear;
         }
       }
@@ -108,19 +108,19 @@
       div.active.off {
         svg {
           .svgText {
-            fill: var(--ax-warning);
+            fill: var(--toggle-button-warning-text-color, $toggle-button-warning-text-color);
             transition: fill $confirmation-transition linear;
           }
         }
       }
 
       div.active.on {
-        background-color: var(--ax-warning) !important;
+        background-color: var(--toggle-button-warning-bg-color, $toggle-button-warning-bg-color) !important;
         transition: background-color $confirmation-transition linear;
       }
 
       &:hover {
-        box-shadow: 0 0 0 2px var(--ax-warning);
+        box-shadow: 0 0 0 2px var(--toggle-button-warning-hover-shadow-color, $toggle-button-warning-hover-shadow-color);
         transition: box-shadow $confirmation-transition linear;
       }
     }

package/src/components/List/List.scss

@@ -42,10 +42,10 @@
     p {
       margin-left: 10px;
 
-      color: var(--ax-neutral-dark);
+      color: var(--list-no-data-text-color, $list-no-data-text-color);
     }
 
-    background-color: var(--ax-neutral-light) !important;
+    background-color: var(--list-no-data-bg-color, $list-no-data-bg-color) !important;
   }
 
   .error {
@@ -56,9 +56,9 @@
     p {
       margin: 10px 0px 10px 10px;
 
-      color: var(--ax-error);
+      color: var(--list-error-text-color, $list-error-text-color);
     }
 
-    background-color: color-mix(in srgb, var(--ax-error) 15%, transparent) !important;
+    background-color: var(--list-error-bg-color, $list-error-bg-color) !important;
   }
 }

package/src/components/List/ListHeader/ListHeader.scss

@@ -12,7 +12,7 @@
   );
 
   box-sizing: border-box;
-  border-bottom: solid 1px var(--ax-neutral-light);
+  border-bottom: solid 1px var(--list-header-border-color, $list-header-border-color);
 
   .columnLabel {
     box-sizing: border-box;
@@ -28,7 +28,7 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
+      border-right: var(--explorer-list-row-border, 1px solid var(--list-header-resize-handle-border-color, $list-header-resize-handle-border-color));
       position: absolute;
       right: 0;
 

package/src/components/List/ListRow/ListRow.scss

@@ -29,7 +29,7 @@
 
   &.disabled {
     cursor: not-allowed;
-    color: var(--disabled-text-color, var(--ax-neutral));
+    color: var(--disabled-text-color, var(--list-row-disabled-text-color, $list-row-disabled-text-color));
   }
 
   .actions {