i-tech-shared-components 1.3.0 → 1.3.2

package/lib/components/autocomplete-select/autocomplete-select.component.d.ts

@@ -17,6 +17,7 @@ export declare class AutocompleteSelectComponent implements OnChanges, AfterView
     set configs(data: AutocompleteConfigsInterface);
     detectChanges: boolean;
     selectionChange: EventEmitter<any>;
+    multiSelectSelectionChange: EventEmitter<any>;
     emitAction: EventEmitter<any>;
     allSelected: MatSelect;
     pending: boolean;
@@ -30,6 +31,7 @@ export declare class AutocompleteSelectComponent implements OnChanges, AfterView
     isNeededForRecall: boolean;
     showingValue: any;
     selectedOptionForMultipleSelection: Array<any>;
+    multiSelectedValues: Array<any>;
     searchTimeoutId: any;
     tabVisibility: boolean;
     accessToNextRequest: boolean;
@@ -83,5 +85,5 @@ export declare class AutocompleteSelectComponent implements OnChanges, AfterView
         isErrorState: (control: any, form: any) => boolean;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteSelectComponent, "i-tech-autocomplete-select", never, { "className": { "alias": "className"; "required": false; }; "submitValue": { "alias": "submitValue"; "required": false; }; "configs": { "alias": "configs"; "required": false; }; "detectChanges": { "alias": "detectChanges"; "required": false; }; }, { "selectionChange": "selectionChange"; "emitAction": "emitAction"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteSelectComponent, "i-tech-autocomplete-select", never, { "className": { "alias": "className"; "required": false; }; "submitValue": { "alias": "submitValue"; "required": false; }; "configs": { "alias": "configs"; "required": false; }; "detectChanges": { "alias": "detectChanges"; "required": false; }; }, { "selectionChange": "selectionChange"; "multiSelectSelectionChange": "multiSelectSelectionChange"; "emitAction": "emitAction"; }, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i-tech-shared-components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "peerDependencies": {
     "@angular/material": "^19.0.0",
     "@angular/animations": "^19.0.0",

package/theme/_ag-grid.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use "./color_themes.scss" as color-themes;
 
 body {
 
@@ -11,27 +11,27 @@ body {
 
     // Success theme
     .ag-row.success-row {
-      background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)};
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)};
     }
     .ag-row.success-row:hover:before {
-      background-color: #{mat.get-theme-color($m3-light-theme, primary, 98)};
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)};
     }
 
     // Change theme
     .ag-cell-changed {
-      background-color: #{mat.get-theme-color($m3-light-theme, secondary, 99)};
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, secondary, 99)};
       &.ag-cell-focus,
       &:hover {
-        background-color: #{mat.get-theme-color($m3-light-theme, secondary, 98)};
+        background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, secondary, 98)};
       }
     }
 
     // Error theme
     .ag-row.error-row {
-      background-color: #{mat.get-theme-color($m3-light-theme, error, 99)};
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 99)};
     }
     .ag-row.error-row:hover:before {
-      background-color: #{mat.get-theme-color($m3-light-theme, error, 98)};
+      background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 98)};
     }
 
     .ag-row.not-found-row-even {
@@ -124,7 +124,7 @@ body {
       }
 
       .ag-header, .ag-advanced-filter-header {
-        --ag-header-background-color: #{mat.get-theme-color($m3-light-theme, neutral, 99)};
+        --ag-header-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, neutral, 99)};
       }
     }
 
@@ -141,8 +141,8 @@ body {
   }
 
   .grid-with-selection {
-    --ag-selected-row-background-color: #{mat.get-theme-color($m3-light-theme, primary, 98)};
-    --ag-row-hover-color: #{mat.get-theme-color($m3-light-theme, primary, 99)};
+    --ag-selected-row-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)};
+    --ag-row-hover-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)};
   }
 
   // Overrides for master/detail grid row group for payments

package/theme/_buttons.scss

@@ -1,6 +1,6 @@
-
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use 'sass:color';
+@use "./color_themes.scss" as color-themes;
 
 body {
   $borderRadius: 5px;
@@ -51,8 +51,18 @@ body {
 
   // DEFINE TERTIARY BUTTON
   .mdc-button.tertiary {
-    @include mat.button-color($m3-light-theme, $color-variant: tertiary);
-    --mdc-text-button-label-text-color: mat.get-theme-color($m3-light-theme, 'tertiary', 30) !important;
+    @include mat.button-color(color-themes.$m3-light-theme, $color-variant: tertiary);
+    & {
+      --mdc-text-button-label-text-color: mat.get-theme-color(color-themes.$m3-light-theme, 'tertiary', 30) !important;
+    }
   }
   // END OF DEFINE TERTIARY BUTTON
 }
+
+// Light Theme Button
+.button_light_theme {
+  @include mat.button-color(color-themes.$m3-light-theme, $color-variant: tertiary);
+  & {
+    --mdc-text-button-label-text-color: mat.get-theme-color(color-themes.$m3-light-theme, 'tertiary', 30) !important;
+  }
+}

package/theme/_date_picker.scss

@@ -1,12 +1,12 @@
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use "./_color_themes.scss" as color-themes;
 
 body {
-  --mat-datepicker-calendar-container-background-color: #{mat.get-theme-color($m3-light-theme, primary, 100)} !important;
-  --mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color($m3-light-theme, primary, 35)} !important;
-  --mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
-  --mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
-  --mat-datepicker-range-input-separator-color: #{mat.get-theme-color($m3-light-theme, neutral, 50)} !important;
+  --mat-datepicker-calendar-container-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 100)} !important;
+  --mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 35)} !important;
+  --mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
+  --mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
+  --mat-datepicker-range-input-separator-color: #{mat.get-theme-color(color-themes.$m3-light-theme, neutral, 50)} !important;
   --mat-datepicker-calendar-body-label-text-size: 16px;
   --mat-datepicker-calendar-body-label-text-weight: 400;
   --mat-datepicker-calendar-period-button-text-size: 16px;
@@ -29,7 +29,7 @@ body {
     }
 
     .mat-date-range-input-inner::placeholder {
-      color:  #{mat.get-theme-color($m3-light-theme, neutral, 50)};
+      color:  #{mat.get-theme-color(color-themes.$m3-light-theme, neutral, 50)};
     }
 
     .mat-mdc-input-element::placeholder {
@@ -53,8 +53,8 @@ body {
 
   .mat-datepicker-content {
     background-color: var(--white-color) !important;
-    --mat-datepicker-calendar-navigation-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
-    --mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
+    --mat-datepicker-calendar-navigation-button-icon-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 80)};
+    --mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 80)};
     box-shadow: 0 2px 6px 2px rgba(48, 70, 102, 0.10);
     border: 1px solid var(--Outline, #D7D9DE);
 

package/theme/_date_time_picker.scss

@@ -1,17 +1,17 @@
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use "./color_themes.scss" as color-themes;;
 
 .date_time_picker_container {
 
   &.readonly_field {
     .date_time_picker {
-      border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-      --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-      --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
+      border-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+      --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+      --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
     }
 
     mat-label, .required-input {
-      color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+      color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
     }
   }
 
@@ -36,7 +36,7 @@
       letter-spacing: 0.2px;
 
       &:disabled {
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
       }
     }
 
@@ -48,13 +48,13 @@
     }
 
     &.disabled {
-      border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
+      border-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
       opacity: 0.7;
 
       input {
-        color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+        color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
         &::placeholder {
-          color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
+          color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
         }
       }
     }

package/theme/_form_fields.scss

@@ -1,24 +1,24 @@
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use "./color_themes.scss" as color-themes;
 
 body {
   .mat-mdc-form-field {
     width: 100%;
-    --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+    --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
     // Custom outline color intentionally outside of color palette
     --mdc-outlined-text-field-focus-outline-color: #0060DF;
-    --mdc-outlined-text-field-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
-    --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
+    --mdc-outlined-text-field-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
+    --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 70)};
     // Set/focused values should be a slightly darker tertiary30
-    --mat-select-focused-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mat-select-enabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-filled-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-filled-text-field-focus-active-indicator-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-outlined-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-outlined-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mat-form-field-focus-select-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
-    --mdc-outlined-text-field-input-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
+    --mat-select-focused-arrow-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
+    --mat-select-enabled-trigger-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
+    --mdc-filled-text-field-caret-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
+    --mdc-filled-text-field-focus-active-indicator-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
+    --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
+    --mdc-outlined-text-field-caret-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
+    --mdc-outlined-text-field-focus-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
+    --mat-form-field-focus-select-arrow-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
+    --mdc-outlined-text-field-input-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
     --mdc-outlined-text-field-focus-outline-width: 3px !important;
     --mat-form-field-subscript-text-weight: 500;
     --mat-form-field-container-text-size: 13px;
@@ -27,7 +27,7 @@ body {
 
 
   mat-hint {
-    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+    color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.022px;
@@ -38,7 +38,7 @@ body {
   }
 
   mat-label:not(.meu_item_label) {
-    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
+    color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
     position: relative;
     bottom: 5px;
     padding-left: 16px;
@@ -47,7 +47,7 @@ body {
   }
 
   .invalid-label-color {
-    color: #{mat.get-theme-color($m3-light-theme, error, 40)} !important;
+    color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 40)} !important;
   }
 
   .mat-mdc-menu-item {
@@ -55,7 +55,7 @@ body {
     --mat-menu-item-label-text-weight: 500 !important;
     --mat-menu-item-label-text-line-height: 20px !important;
     --mat-menu-item-label-text-tracking: 0.2px !important;
-    --mat-menu-item-label-text-color: #{mat.get-theme-color($m3-light-theme,tertiary, 30)} !important;
+    --mat-menu-item-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme,tertiary, 30)} !important;
     .meu_item_label {
       text-align: left;
       text-underline-position: from-font;
@@ -64,7 +64,7 @@ body {
   }
 
   .required-input {
-    color: #{mat.get-theme-color($m3-light-theme, error, 40)};
+    color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 40)};
     position: relative;
     bottom: 5px;
     font-size: 11px;
@@ -74,15 +74,15 @@ body {
   .mat-form-field-invalid {
     --mdc-outlined-text-field-outline-width: 3px !important;
     // See if we can remove this after updating date-picker scss
-    --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color($m3-light-theme,error,40)} !important;
+    --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme,error,40)} !important;
   }
 
   .default-form-icon-color {
-    color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
+    color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
     .mat-mdc-icon-button.tonal mat-icon {
-      color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
+      color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
       & svg path {
-        fill: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
+        fill: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
       }
     }
   }
@@ -97,7 +97,7 @@ body {
 
   .mat-mdc-input-element {
     overflow: hidden;
-    color: var(--Text, #{mat.get-theme-color($m3-light-theme,tertiary, 30)});
+    color: var(--Text, #{mat.get-theme-color(color-themes.$m3-light-theme,tertiary, 30)});
     text-overflow: ellipsis;
     font-size: 13px;
     font-style: normal;

package/theme/_icon-button.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use "./_color_themes.scss" as color-themes;
 
 body {
   $buttonSize: 40;
@@ -81,23 +81,23 @@ body {
   // BUTTON ICON TYPES
 
   .mat-mdc-icon-button.tonal {
-    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, tertiary, 60)};
+    --mat-icon-button-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 60)};
 
     mat-icon {
-      color: mat.get-theme-color($m3-light-theme, tertiary, 30);
+      color: mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30);
       & svg path {
-        fill: mat.get-theme-color($m3-light-theme, tertiary, 30);
+        fill: mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30);
       }
     }
   }
 
   .mat-mdc-icon-button.standard {
-    --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 60)};
+    --mat-icon-button-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 60)};
 
     mat-icon {
-      color: mat.get-theme-color($m3-light-theme, primary, 50);
+      color: mat.get-theme-color(color-themes.$m3-light-theme, primary, 50);
       & svg path {
-        fill: mat.get-theme-color($m3-light-theme, primary, 50);
+        fill: mat.get-theme-color(color-themes.$m3-light-theme, primary, 50);
       }
     }
   }
@@ -109,8 +109,8 @@ body {
     --mdc-fab-hover-container-elevation-shadow: none !important;
     --mdc-fab-pressed-container-elevation-shadow: none !important;
     --mdc-fab-focus-container-elevation-shadow: none !important;
-    --mdc-fab-container-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
-    --mat-fab-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
+    --mdc-fab-container-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 50)};
+    --mat-fab-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 50)};
     mat-icon {
       color: white;
       & svg path {
@@ -121,17 +121,29 @@ body {
   // END OF BUTTON ICON TYPES
 
   //.mat-mdc-icon-button:disabled, .mat-mdc-fab-base:disabled {
-  //  background-color: mat.get-theme-color($m3-light-theme, neutral, 95);
+  //  background-color: mat.get-theme-color(color-themes.$m3-light-theme, neutral, 95);
   //}
 
   .mat-mdc-icon-button:disabled mat-icon,
   .mat-mdc-fab-base:disabled mat-icon {
-    color: mat.get-theme-color($m3-light-theme, neutral, 60) !important;
+    color: mat.get-theme-color(color-themes.$m3-light-theme, neutral, 60) !important;
   }
 
   // For small size
   .mat-mdc-icon-button.small:disabled, .mat-mdc-fab-base.small:disabled {
-    background-color: mat.get-theme-color($m3-light-theme, neutral, 95);
+    background-color: mat.get-theme-color(color-themes.$m3-light-theme, neutral, 95);
   }
 
 }
+
+.icon_button_tertiary {
+  --mat-icon-button-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 60)};
+
+  &.mat-mdc-icon-button {
+    color: mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30);
+
+    mat-icon {
+      fill: mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30);
+    }
+  }
+}

package/theme/_label.scss

@@ -1,160 +1,182 @@
-@use "sass:map";
 @use '@angular/material' as mat;
-@import "./color_themes.scss";
+@use 'sass:map';
+@use "./_color_themes.scss" as color-themes;
+
+// Define colors with proper hex values to avoid interpolation warnings
+$label-colors: (
+  "aqua": #00ffff,
+  "blue": #0000ff,
+  "gray": #808080,
+  "green": #008000,
+  "olive": #808000,
+  "orange": #ffa500,
+  "purple": #800080,
+  "red": #ff0000,
+  "teal": #008080,
+  "white": #ffffff,
+  "yellow": #ffff00
+);
+
+@each $type-name, $color in $label-colors {
+  .label_#{$type-name} {
+    background-color: $color;
+    color: if($type-name == "white", #000000, #ffffff); // Black text for white labels, white text for others
+  }
+}
 
 body {
   $types: (
-    purple: (
+    "purple": (
       main: #DBD4F3,
       hover: #E5E0F6,
       border: #6F5BBF,
       text: #140063
     ),
-    teal: (
+    "teal": (
       main: #D2F3F2,
       hover: #DFF6F6,
       border: #00CAC3,
       text: #006B67
     ),
-    olive: (
+    "olive": (
       main: #EFF2D4,
       hover: #F3F6E0,
       border: #CDD968,
       text: #606C00
     ),
-    orange: (
+    "orange": (
       main: #FFE4DB,
       hover: #FFECE5,
       border: #FC8156,
       text: #A42B00
     ),
-    blue: (
+    "blue": (
       main: #D1E9FF,
       hover: #DEEFFF,
       border: #42A5FF,
       text: #003E77
     ),
-    cyan: (
+    "cyan": (
       main: #DBF8FF,
       hover: #E5FAFF,
       border: #42D8FF,
       text: #006681
     ),
-    raspberry: (
+    "raspberry": (
       main: #EBD6DB,
       hover: #F1E1E5,
       border: #711A2E,
       text: #4B0011
     ),
-    yellow: (
+    "yellow": (
       main: #FFFCCB,
       hover: #FFFDDA,
       border: #FFF000,
       text: #847700
     ),
-    wine: (
+    "wine": (
       main: #EDD3E5,
       hover: #F2DFEC,
       border: #9D4280,
       text: #680047
     ),
-    green: (
+    "green": (
       main: #CFF1DD,
       hover: #DCF5E7,
       border: #2EB265,
       text: #005D27
     ),
-    primary: (
+    "primary": (
       main: #C0E5C7,
       hover: #EFFAF1,
       border: #42B963,
       text: #003A0C
     ),
-    red: (
+    "red": (
       main: #FFE5E5,
       hover: #FFD9D9,
       border: #FF4D4D,
       text: #8B0000
     ),
-    neutral: (
+    "neutral": (
       main: #E8E8E8,
       hover: #F2F2F2,
       border: #B3B3B3,
       text: #575757
     ),
-    white: (
+    "white": (
       main: #FFFFFF,
       hover: #F8F9FA,
       border: #D7D9DE,
       text: #1A1A1A
     ),
-    gray: (
+    "gray": (
       main: #F0F0F4,
       hover: #E5E0F6,
       border: #fff,
       text: #647081
     ),
-    canceled: (
-      main: white,
+    "canceled": (
+      main: #ffffff,
       hover: #E5E0F6,
       border: #C11A39,
       text: #C11A39
     ),
-    starts_2m: (
+    "starts_2m": (
       main: rgba(182, 140, 255, 0.7),
       hover: rgba(195, 167, 255, 0.7),
       border: #320088,
       text: #320088
     ),
-    starts_10m: (
+    "starts_10m": (
       main: rgba(195, 167, 243, 0.7),
       hover: rgba(205, 182, 248, 0.7),
       border: #3E1585,
       text: #3E1585
     ),
-    starts_20m: (
+    "starts_20m": (
       main: rgba(200, 176, 241, 0.7),
       hover: rgba(210, 190, 246, 0.7),
       border: #44227D,
       text: #44227D
     ),
-    starts_60m: (
+    "starts_60m": (
       main: rgba(215, 203, 237, 0.7),
       hover: rgba(225, 215, 242, 0.7),
       border: #44227D,
       text: #44227D
     ),
-    starts_2h: (
+    "starts_2h": (
       main: rgba(223, 215, 235, 0.7),
       hover: rgba(230, 224, 240, 0.7),
       border: #493076,
       text: #493076
     ),
-    starts_5h: (
+    "starts_5h": (
       main: rgba(226, 222, 234, 0.7),
       hover: rgba(235, 230, 240, 0.7),
       border: #503E6D,
       text: #503E6D
     ),
-    starts_12h: (
+    "starts_12h": (
       main: rgba(156, 166, 179, 0.16),
       hover: rgba(170, 180, 190, 0.16),
       border: #424954,
       text: #424954
     ),
-    starts_24h: (
+    "starts_24h": (
       main: rgba(156, 166, 179, 0.16),
       hover: rgba(170, 180, 190, 0.16),
       border: #424954,
       text: #424954
     ),
-    late: (
+    "late": (
       main: #FFE4DB,
       hover: #FFECE5,
       border: #FC8156,
       text: #A42B00
     ),
-    late_warning: (
+    "late_warning": (
       main: #A42B00,
       hover: #FFECE5,
       border: #FC8156,