@axinom/mosaic-ui 0.33.0-rc.9 → 0.33.1

package/dist/initialize.d.ts

@@ -1,10 +1,14 @@
 import { AddIndicator, CustomEventEmitter, RemoveIndicator, ShowNotification } from './types/ui-config';
+export declare enum IndicatorType {
+    Saving = "saving",
+    Inactive = "inactive",
+    Dirty = "dirty"
+}
 export declare let showNotification: ShowNotification | (() => void);
 export declare let addIndicator: AddIndicator | (() => void);
 export declare let removeIndicator: RemoveIndicator | (() => void);
 export declare let on: CustomEventEmitter['on'] | (() => void);
-export declare let showSaveIndicator: () => void;
-export declare let hideSaveIndicator: () => void;
+export declare let setSaveIndicator: (type: IndicatorType) => void;
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.
@@ -15,7 +19,6 @@ export interface UiConfig {
     addIndicator: AddIndicator;
     removeIndicator: RemoveIndicator;
     on: CustomEventEmitter['on'];
-    showSaveIndicator: () => void;
-    hideSaveIndicator: () => void;
+    setSaveIndicator: (type: IndicatorType) => void;
 }
 //# sourceMappingURL=initialize.d.ts.map

package/dist/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,iBAAiB,EAAE,MAAM,IAAoC,CAAC;AAEzE,eAAO,IAAI,iBAAiB,EAAE,MAAM,IAAoC,CAAC;AAEzE;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAShD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IACvB,CAAC;AAEhC;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAQhD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CACjD"}

package/dist/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.d.ts

@@ -0,0 +1,9 @@
+import { ErrorMapper } from '../ErrorMapper.type';
+/**
+ * An error mapper that maps errors from the Apollo Client to more user friendly errors.
+ * @param error The error to map
+ * @param mappedError The error that was mapped by a previous error mapper
+ * @returns The mapped error or undefined if the error could not be mapped
+ */
+export declare const ApolloErrorMapper: ErrorMapper;
+//# sourceMappingURL=ApolloErrorMapper.d.ts.map

package/dist/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApolloErrorMapper.d.ts","sourceRoot":"","sources":["../../../../src/utils/ErrorMapper/ApolloClient/ApolloErrorMapper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAuB/B,CAAC"}

package/dist/utils/ErrorMapper/ErrorMapper.d.ts

@@ -0,0 +1,15 @@
+import { ErrorMapper } from './ErrorMapper.type';
+/**
+ * Sets the error mappers to use for mapping errors.
+ * By default the `ApolloErrorMapper` is registered.
+ * @param mappers an array of error mappers that should be used
+ */
+export declare const setErrorMappers: (mappers: ErrorMapper[]) => void;
+/**
+ * Uses the currently registered error mappers to map the given error.
+ * To register error mappers use the `setErrorMappers` function.
+ * @param error the error to map
+ * @returns the mapped error or the original error if no mapper was able to map the error
+ */
+export declare const mapError: ErrorMapper;
+//# sourceMappingURL=ErrorMapper.d.ts.map

package/dist/utils/ErrorMapper/ErrorMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMapper.d.ts","sourceRoot":"","sources":["../../../src/utils/ErrorMapper/ErrorMapper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAIjD;;;;GAIG;AACH,eAAO,MAAM,eAAe,YAAa,WAAW,EAAE,KAAG,IAExD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,WAUtB,CAAC"}

package/dist/utils/ErrorMapper/ErrorMapper.type.d.ts

@@ -0,0 +1,11 @@
+import { ErrorType } from '../../components/models';
+export interface ErrorMapper {
+    /**
+     * Maps the given error to a new error.
+     * @param error the error to map
+     * @param currentlyMappedError the error that was mapped by a previous error mapper
+     * @returns the mapped error or undefined if the error could not be mapped
+     */
+    (error: ErrorType, currentlyMappedError?: ErrorType): ErrorType | undefined;
+}
+//# sourceMappingURL=ErrorMapper.type.d.ts.map

package/dist/utils/ErrorMapper/ErrorMapper.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMapper.type.d.ts","sourceRoot":"","sources":["../../../src/utils/ErrorMapper/ErrorMapper.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,CAAC,KAAK,EAAE,SAAS,EAAE,oBAAoB,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;CAC7E"}

package/dist/utils/ErrorMapper/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ApolloClient/ApolloErrorMapper';
+export * from './ErrorMapper';
+export * from './ErrorMapper.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/ErrorMapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/ErrorMapper/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC;AACjD,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/dist/utils/ErrorTypeToStationError.d.ts

@@ -6,5 +6,5 @@ import { ErrorType, StationError } from '../components/models';
  * @param defaultBody The body that should be used in case the function can not infer the body of the message.
  * @returns A station error object
  */
-export declare const ErrorTypeToStationError: (error?: ErrorType, defaultTitle?: string, defaultBody?: string) => StationError;
+export declare const ErrorTypeToStationError: (originalError?: ErrorType, defaultTitle?: string, defaultBody?: string) => StationError;
 //# sourceMappingURL=ErrorTypeToStationError.d.ts.map

package/dist/utils/ErrorTypeToStationError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorTypeToStationError.d.ts","sourceRoot":"","sources":["../../src/utils/ErrorTypeToStationError.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE/D;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,WAC1B,SAAS,uCAEH,MAAM,KACnB,YAyCF,CAAC"}
+{"version":3,"file":"ErrorTypeToStationError.d.ts","sourceRoot":"","sources":["../../src/utils/ErrorTypeToStationError.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAG/D;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,mBAClB,SAAS,uCAEX,MAAM,KACnB,YA4CF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.33.0-rc.9",
+  "version": "0.33.1",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.6-rc.9",
+    "@axinom/mosaic-core": "^0.4.6",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7c7271e1c257693a5459d96f7c42767770572fd9"
+  "gitHead": "1277233fdf825655ec0fced3bc054853a7a2e867"
 }

package/src/components/Accordion/Accordion.scss

@@ -46,7 +46,7 @@
       }
 
       svg * {
-        stroke: $blue;
+        stroke: var(--accordion-item-arrow-color, $accordion-item-arrow-color);
       }
     }
   }

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

@@ -55,6 +55,6 @@
   }
 
   svg * {
-    stroke: $blue;
+    stroke: var(--accordion-item-arrow-color, $accordion-item-arrow-color);
   }
 }

package/src/components/Actions/Action/Action.scss

@@ -79,8 +79,6 @@
 
     pointer-events: none;
 
-    cursor: not-allowed;
-
     .icon {
       opacity: 0.5;
     }

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

@@ -23,27 +23,45 @@
   }
 
   &.navigation {
-    background-color: $light-blue;
+    background-color: var(
+      --navigation-button-background-color,
+      $navigation-button-background-color
+    );
     box-sizing: border-box;
 
     svg * {
-      stroke: white;
+      stroke: var(
+        --navigation-button-stroke-color,
+        $navigation-button-stroke-color
+      );
     }
 
     &:hover {
-      background-color: lighten($light-blue, 10%);
+      background-color: var(
+        --navigation-button-background-color-hover,
+        $navigation-button-background-color-hover
+      );
     }
 
     &:active {
-      background-color: white;
+      background-color: var(
+        --navigation-button-background-active-color,
+        $navigation-button-background-active-color
+      );
 
       svg * {
-        stroke: $light-blue;
+        stroke: var(
+          --navigation-button-stroke-active-color,
+          $navigation-button-stroke-active-color
+        );
       }
     }
 
     &.disabled {
-      background-color: $gray;
+      background-color: var(
+        --navigation-button-background-disabled-color,
+        $navigation-button-background-disabled-color
+      );
       pointer-events: none;
 
       svg * {
@@ -55,22 +73,34 @@
   &.context {
     padding: 4px;
 
-    border: 1px solid $blue;
+    border: 1px solid
+      var(--context-button-border-color, $context-button-border-color);
     background-color: white;
 
     transition: box-shadow 0.15s ease-in-out 0s;
 
     svg * {
-      stroke: $blue;
+      stroke: var(--context-button-stroke-color, $context-button-stroke-color);
     }
 
     &:hover {
-      border: 1px solid $blue;
-      box-shadow: 0 0 0 2px $blue;
+      border: 1px solid
+        var(
+          --context-button-hover-border-color,
+          $context-button-hover-border-color
+        );
+      box-shadow: 0 0 0 2px
+        var(
+          --context-button-hover-border-color,
+          $context-button-hover-border-color
+        );
     }
 
     &:active {
-      background-color: $blue;
+      background-color: var(
+        --context-button-active-color,
+        $context-button-active-color
+      );
 
       svg * {
         stroke: white;
@@ -97,12 +127,15 @@
     }
 
     svg * {
-      stroke: $blue;
+      stroke: var(--icon-button-stroke-color, $icon-button-stroke-color);
     }
 
     &:hover {
       border: none;
-      background-color: $blue;
+      background-color: var(
+        --icon-button-hover-color,
+        $icon-button-hover-color
+      );
 
       svg * {
         stroke: white;
@@ -127,21 +160,35 @@
   }
 
   &.active {
-    background-color: $blue;
+    background-color: var(
+      --active-button-background-color,
+      $active-button-background-color
+    );
 
     svg * {
-      stroke: white;
+      stroke: var(
+        --active-button-stroke-color,
+        $active-button-stroke-background-color
+      );
     }
 
     &:hover {
-      background-color: lighten($blue, 10%);
+      background-color: var(
+        --active-button-hover-background-color,
+        $active-button-hover-background-color
+      );
     }
 
     &:active {
-      background-color: white;
-
+      background-color: var(
+        --active-button-active-background-color,
+        $active-button-active-background-color
+      );
       svg * {
-        stroke: $blue;
+        stroke: var(
+          --active-button-active-stroke-color,
+          $active-button-active-stroke-color
+        );
       }
     }
 
@@ -158,7 +205,6 @@
   &:disabled.icon,
   &:disabled.context,
   &:disabled.active {
-    cursor: not-allowed;
     pointer-events: none;
   }
 }

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

@@ -32,30 +32,48 @@
 
   &.navigation {
     color: white;
-    background-color: $light-blue;
+    background-color: var(
+      --navigation-button-background-color,
+      $navigation-button-background-color
+    );
     width: fit-content;
     text-decoration: none;
     box-sizing: border-box;
 
     svg * {
-      stroke: white;
+      stroke: var(
+        --navigation-button-stroke-color,
+        $navigation-button-stroke-color
+      );
     }
 
     &:hover {
-      background-color: lighten($light-blue, 10%);
+      background-color: var(
+        --navigation-button-background-color-hover,
+        $navigation-button-background-color-hover
+      );
     }
 
     &:active {
       background-color: white;
-      color: $light-blue;
+      color: var(
+        --navigation-button-background-active-color,
+        $navigation-button-background-active-color
+      );
 
       svg * {
-        stroke: $light-blue;
+        stroke: var(
+          --navigation-button-stroke-active-color,
+          $navigation-button-stroke-active-color
+        );
       }
     }
 
     &.disabled {
-      background-color: $gray;
+      background-color: var(
+        --navigation-button-background-disabled-color,
+        $navigation-button-background-disabled-color
+      );
       pointer-events: none;
       color: rgba(white, 0.5);
 
@@ -66,23 +84,35 @@
   }
 
   &.context {
-    color: $blue;
-    border: 1px solid $blue;
+    color: var(--context-button-border-color, $context-button-border-color);
+    border: 1px solid
+      var(--context-button-border-color, $context-button-border-color);
     background-color: white;
 
     transition: box-shadow 0.15s ease-in-out 0s;
 
     svg * {
-      stroke: $blue;
+      stroke: var(--context-button-stroke-color, $context-button-stroke-color);
     }
 
     &:hover {
-      border: 1px solid $blue;
-      box-shadow: 0 0 0 2px $blue;
+      border: 1px solid
+        var(
+          --context-button-hover-border-color,
+          $context-button-hover-border-color
+        );
+      box-shadow: 0 0 0 2px
+        var(
+          --context-button-hover-border-color,
+          $context-button-hover-border-color
+        );
     }
 
     &:active {
-      background-color: $blue;
+      background-color: var(
+        --context-button-active-color,
+        $context-button-active-color
+      );
       color: white;
 
       svg * {
@@ -102,10 +132,16 @@
 
   &.active {
     color: white;
-    background-color: $blue;
+    background-color: var(
+      --active-button-background-color,
+      $active-button-background-color
+    );
 
     &:hover {
-      background-color: lighten($blue, 10%);
+      background-color: var(
+        --active-button-hover-background-color,
+        $active-button-hover-background-color
+      );
     }
 
     &:active {
@@ -118,8 +154,4 @@
       color: rgba(white, 0.5);
     }
   }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
 }

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

@@ -20,39 +20,66 @@
 
   &.navigation {
     color: white;
-    background-color: $light-blue;
+    background-color: var(
+      --navigation-button-background-color,
+      $navigation-button-background-color
+    );
     width: fit-content;
 
     &:hover {
-      background-color: lighten($light-blue, 10%);
+      background-color: var(
+        --navigation-button-background-color-hover,
+        $navigation-button-background-color-hover
+      );
     }
 
     &:active {
-      background-color: white;
-      color: $light-blue;
+      background-color: var(
+        --navigation-button-background-active-color,
+        $navigation-button-background-active-color
+      );
+      color: var(
+        --navigation-button-background-active-color,
+        $navigation-button-background-active-color
+      );
     }
 
     &.disabled {
-      background-color: $gray;
+      background-color: var(
+        --navigation-button-background-disabled-color,
+        $navigation-button-background-disabled-color
+      );
       pointer-events: none;
       color: rgba(white, 0.5);
     }
   }
 
   &.context {
-    color: $blue;
-    border: 1px solid $blue;
+    color: var(--context-button-border-color, $context-button-border-color);
+    border: 1px solid
+      var(--context-button-border-color, $context-button-border-color);
     background-color: white;
 
     transition: box-shadow 0.15s ease-in-out 0s;
 
     &:hover {
-      border: 1px solid $blue;
-      box-shadow: 0 0 0 2px $blue;
+      border: 1px solid
+        var(
+          --context-button-hover-border-color,
+          $context-button-hover-border-color
+        );
+      box-shadow: 0 0 0 2px
+        var(
+          --context-button-hover-border-color,
+          $context-button-hover-border-color
+        );
     }
 
     &:active {
-      background-color: $blue;
+      background-color: var(
+        --context-button-active-color,
+        $context-button-active-color
+      );
       color: white;
     }
 
@@ -64,10 +91,16 @@
 
   &.active {
     color: white;
-    background-color: $blue;
+    background-color: var(
+      --active-button-background-color,
+      $active-button-background-color
+    );
 
     &:hover {
-      background-color: lighten($blue, 10%);
+      background-color: var(
+        --active-button-hover-background-color,
+        $active-button-hover-background-color
+      );
     }
 
     &:active {
@@ -80,8 +113,4 @@
       color: rgba(white, 0.5);
     }
   }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
 }

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

@@ -16,7 +16,10 @@
     }
 
     &:hover {
-      background-color: rgba($blue, 0.15);
+      background-color: var(
+        --calendar-tile-active-hover,
+        $calendar-tile-active-hover
+      );
     }
   }
 
@@ -26,7 +29,10 @@
     background-color: white;
 
     button:hover {
-      background-color: rgba($blue, 0.15);
+      background-color: var(
+        --calendar-tile-active-hover,
+        $calendar-tile-active-hover
+      );
     }
 
     button,
@@ -35,14 +41,17 @@
       width: 40px;
       font-size: 20px;
       padding: 0;
-      color: $blue;
+      color: var(--calendar-tile-active, $calendar-tile-active);
       font-weight: bold;
 
       svg {
         height: 18px;
 
         * {
-          stroke: $blue;
+          stroke: var(
+            --calendar-button-stroke-color,
+            $calendar-button-stroke-color
+          );
         }
       }
     }
@@ -55,7 +64,7 @@
 
   :global(.react-calendar__month-view__weekdays) {
     font-size: 20px;
-    color: $dark-blue;
+    color: var(--calendar-title-color, $calendar-title-color);
     font-weight: bold;
     text-transform: none;
     height: 40px;
@@ -76,7 +85,7 @@
   :global(.react-calendar__tile--active),
   :global(.react-calendar__tile--hasActive),
   :global(.react-calendar__tile--active:enabled:focus) {
-    background-color: $blue;
+    background-color: var(--calendar-tile-active, $calendar-tile-active);
     color: white;
 
     * {

package/src/components/DateTime/DateTimePicker.scss

@@ -5,9 +5,13 @@
 
   display: grid;
   grid-template-columns: 1fr;
-  background-color: $blue;
+  background-color: var(
+    --calendar-container-bg-color,
+    $calendar-container-bg-color
+  );
   column-gap: 1px;
-  border: 1px solid $blue;
+  border: 1px solid
+    var(--calendar-container-border-color, $calendar-container-border-color);
 
   &.timepicker {
     width: 650px;

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -380,6 +380,7 @@ export const DynamicDataList = <T extends Data>({
               }
               inlineMenuActions={inlineMenuActions}
               rowClassNameProvider={rowClassNameProvider}
+              disabled={disabled}
             />
           </CSSTransition>
         ))}

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.scss

@@ -46,10 +46,10 @@
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: 1fr;
+  }
 
-    svg {
-      height: 60%;
-    }
+  .actionButton svg {
+    height: 60%;
   }
 
   .position {
@@ -60,11 +60,12 @@
     justify-items: start;
     align-items: center;
 
-    opacity: 0.5;
+    //opacity: 0.5;
 
     svg {
+      stroke: var(--input-disabled-border-color, $input-disabled-border-color);
       rect {
-        fill: var(--input-border-color, $input-border-color);
+        fill: var(--input-disabled-border-color, $input-disabled-border-color);
       }
     }
 
@@ -77,6 +78,15 @@
 
       padding: 4px;
       border: 1px solid var(--input-border-color, $input-border-color);
+
+      &:disabled {
+        color: var(--input-disabled-font-color, $input-disabled-font-color);
+
+        border-color: var(
+          --input-disabled-border-color,
+          $input-disabled-border-color
+        );
+      }
     }
 
     /* remove arrows from input