i-tech-shared-components 1.4.41 → 1.4.42

package/theme/_label.scss

@@ -1,238 +1,238 @@
-@use '@angular/material' as mat;
-@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,
-  "black": black,
-);
-
-@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": (
-      main: #DBD4F3,
-      hover: #E5E0F6,
-      border: #6F5BBF,
-      text: #140063
-    ),
-    "teal": (
-      main: #D2F3F2,
-      hover: #DFF6F6,
-      border: #00CAC3,
-      text: #006B67
-    ),
-    "olive": (
-      main: #EFF2D4,
-      hover: #F3F6E0,
-      border: #CDD968,
-      text: #606C00
-    ),
-    "orange": (
-      main: #FFE4DB,
-      hover: #FFECE5,
-      border: #FC8156,
-      text: #A42B00
-    ),
-    "blue": (
-      main: #D1E9FF,
-      hover: #DEEFFF,
-      border: #42A5FF,
-      text: #003E77
-    ),
-    "cyan": (
-      main: #DBF8FF,
-      hover: #E5FAFF,
-      border: #42D8FF,
-      text: #006681
-    ),
-    "black": (
-      main: #000000,
-      hover: #FFFFFF,
-      border: #000000,
-      text: #FFFFFF
-    ),
-    "raspberry": (
-      main: #EBD6DB,
-      hover: #F1E1E5,
-      border: #711A2E,
-      text: #4B0011
-    ),
-    "yellow": (
-      main: #FFFCCB,
-      hover: #FFFDDA,
-      border: #FFF000,
-      text: #847700
-    ),
-    "wine": (
-      main: #EDD3E5,
-      hover: #F2DFEC,
-      border: #9D4280,
-      text: #680047
-    ),
-    "green": (
-      main: #CFF1DD,
-      hover: #DCF5E7,
-      border: #2EB265,
-      text: #005D27
-    ),
-    "primary": (
-      main: #C0E5C7,
-      hover: #EFFAF1,
-      border: #42B963,
-      text: #003A0C
-    ),
-    "red": (
-      main: #FFE5E5,
-      hover: #FFD9D9,
-      border: #FF4D4D,
-      text: #8B0000
-    ),
-    "neutral": (
-      main: #E8E8E8,
-      hover: #F2F2F2,
-      border: #B3B3B3,
-      text: #575757
-    ),
-    "white": (
-      main: #FFFFFF,
-      hover: #F8F9FA,
-      border: #D7D9DE,
-      text: #1A1A1A
-    ),
-    "gray": (
-      main: #F0F0F4,
-      hover: #E5E0F6,
-      border: #fff,
-      text: #647081
-    ),
-    "canceled": (
-      main: #ffffff,
-      hover: #E5E0F6,
-      border: #C11A39,
-      text: #C11A39
-    ),
-    "starts_2m": (
-      main: rgba(182, 140, 255, 0.7),
-      hover: rgba(195, 167, 255, 0.7),
-      border: #320088,
-      text: #320088
-    ),
-    "starts_10m": (
-      main: rgba(195, 167, 243, 0.7),
-      hover: rgba(205, 182, 248, 0.7),
-      border: #3E1585,
-      text: #3E1585
-    ),
-    "starts_20m": (
-      main: rgba(200, 176, 241, 0.7),
-      hover: rgba(210, 190, 246, 0.7),
-      border: #44227D,
-      text: #44227D
-    ),
-    "starts_60m": (
-      main: rgba(215, 203, 237, 0.7),
-      hover: rgba(225, 215, 242, 0.7),
-      border: #44227D,
-      text: #44227D
-    ),
-    "starts_2h": (
-      main: rgba(223, 215, 235, 0.7),
-      hover: rgba(230, 224, 240, 0.7),
-      border: #493076,
-      text: #493076
-    ),
-    "starts_5h": (
-      main: rgba(226, 222, 234, 0.7),
-      hover: rgba(235, 230, 240, 0.7),
-      border: #503E6D,
-      text: #503E6D
-    ),
-    "starts_12h": (
-      main: rgba(156, 166, 179, 0.16),
-      hover: rgba(170, 180, 190, 0.16),
-      border: #424954,
-      text: #424954
-    ),
-    "starts_24h": (
-      main: rgba(156, 166, 179, 0.16),
-      hover: rgba(170, 180, 190, 0.16),
-      border: #424954,
-      text: #424954
-    ),
-    "late": (
-      main: #FFE4DB,
-      hover: #FFECE5,
-      border: #FC8156,
-      text: #A42B00
-    ),
-    "late_warning": (
-      main: #A42B00,
-      hover: #FFECE5,
-      border: #FC8156,
-      text: #FFFFFF
-    )
-  );
-
-  --mdc-chip-container-shape-radius: 8px !important;
-  --mdc-chip-label-text-line-height: 16px !important;
-  --mdc-chip-label-text-size: 11px !important;
-  --mdc-chip-label-text-weight: 700 !important;
-  --mdc-chip-label-text-tracking: 0.3 !important;
-  --mdc-chip-outline-width: 0 !important;
-  --mdc-chip-container-height: 32px !important;
-
-  @each $type, $value in $types {
-    .label_#{$type} {
-      --mdc-chip-elevated-container-color: #{map.get($value, "main")};
-      --mdc-chip-outline-color: #{map.get($value, "border")};
-      --mdc-chip-label-text-color: #{map.get($value, "text")};
-
-      mat-icon {
-        width: 18px;
-        height: 18px;
-        font-size: 18px;
-      }
-    }
-  }
-
-  .mat-mdc-chip.small {
-    // TODO need to review
-    --mdc-chip-container-height: 28px !important;
-  }
-
-  .table_row_item {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-
-  .trailing-icon {
-    .mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
-      // Chips with trailing icon have -4 right padding per Figma
-      padding-right: 8px;
-    }
-  }
-
-  .mat-mdc-chip.bordered {
-    --mdc-chip-outline-width: 2.5px !important;
-  }
-
-}
+@use '@angular/material' as mat;
+@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,
+  "black": black,
+);
+
+@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": (
+      main: #DBD4F3,
+      hover: #E5E0F6,
+      border: #6F5BBF,
+      text: #140063
+    ),
+    "teal": (
+      main: #D2F3F2,
+      hover: #DFF6F6,
+      border: #00CAC3,
+      text: #006B67
+    ),
+    "olive": (
+      main: #EFF2D4,
+      hover: #F3F6E0,
+      border: #CDD968,
+      text: #606C00
+    ),
+    "orange": (
+      main: #FFE4DB,
+      hover: #FFECE5,
+      border: #FC8156,
+      text: #A42B00
+    ),
+    "blue": (
+      main: #D1E9FF,
+      hover: #DEEFFF,
+      border: #42A5FF,
+      text: #003E77
+    ),
+    "cyan": (
+      main: #DBF8FF,
+      hover: #E5FAFF,
+      border: #42D8FF,
+      text: #006681
+    ),
+    "black": (
+      main: #000000,
+      hover: #FFFFFF,
+      border: #000000,
+      text: #FFFFFF
+    ),
+    "raspberry": (
+      main: #EBD6DB,
+      hover: #F1E1E5,
+      border: #711A2E,
+      text: #4B0011
+    ),
+    "yellow": (
+      main: #FFFCCB,
+      hover: #FFFDDA,
+      border: #FFF000,
+      text: #847700
+    ),
+    "wine": (
+      main: #EDD3E5,
+      hover: #F2DFEC,
+      border: #9D4280,
+      text: #680047
+    ),
+    "green": (
+      main: #CFF1DD,
+      hover: #DCF5E7,
+      border: #2EB265,
+      text: #005D27
+    ),
+    "primary": (
+      main: #C0E5C7,
+      hover: #EFFAF1,
+      border: #42B963,
+      text: #003A0C
+    ),
+    "red": (
+      main: #FFE5E5,
+      hover: #FFD9D9,
+      border: #FF4D4D,
+      text: #8B0000
+    ),
+    "neutral": (
+      main: #E8E8E8,
+      hover: #F2F2F2,
+      border: #B3B3B3,
+      text: #575757
+    ),
+    "white": (
+      main: #FFFFFF,
+      hover: #F8F9FA,
+      border: #D7D9DE,
+      text: #1A1A1A
+    ),
+    "gray": (
+      main: #F0F0F4,
+      hover: #E5E0F6,
+      border: #fff,
+      text: #647081
+    ),
+    "canceled": (
+      main: #ffffff,
+      hover: #E5E0F6,
+      border: #C11A39,
+      text: #C11A39
+    ),
+    "starts_2m": (
+      main: rgba(182, 140, 255, 0.7),
+      hover: rgba(195, 167, 255, 0.7),
+      border: #320088,
+      text: #320088
+    ),
+    "starts_10m": (
+      main: rgba(195, 167, 243, 0.7),
+      hover: rgba(205, 182, 248, 0.7),
+      border: #3E1585,
+      text: #3E1585
+    ),
+    "starts_20m": (
+      main: rgba(200, 176, 241, 0.7),
+      hover: rgba(210, 190, 246, 0.7),
+      border: #44227D,
+      text: #44227D
+    ),
+    "starts_60m": (
+      main: rgba(215, 203, 237, 0.7),
+      hover: rgba(225, 215, 242, 0.7),
+      border: #44227D,
+      text: #44227D
+    ),
+    "starts_2h": (
+      main: rgba(223, 215, 235, 0.7),
+      hover: rgba(230, 224, 240, 0.7),
+      border: #493076,
+      text: #493076
+    ),
+    "starts_5h": (
+      main: rgba(226, 222, 234, 0.7),
+      hover: rgba(235, 230, 240, 0.7),
+      border: #503E6D,
+      text: #503E6D
+    ),
+    "starts_12h": (
+      main: rgba(156, 166, 179, 0.16),
+      hover: rgba(170, 180, 190, 0.16),
+      border: #424954,
+      text: #424954
+    ),
+    "starts_24h": (
+      main: rgba(156, 166, 179, 0.16),
+      hover: rgba(170, 180, 190, 0.16),
+      border: #424954,
+      text: #424954
+    ),
+    "late": (
+      main: #FFE4DB,
+      hover: #FFECE5,
+      border: #FC8156,
+      text: #A42B00
+    ),
+    "late_warning": (
+      main: #A42B00,
+      hover: #FFECE5,
+      border: #FC8156,
+      text: #FFFFFF
+    )
+  );
+
+  --mdc-chip-container-shape-radius: 8px !important;
+  --mdc-chip-label-text-line-height: 16px !important;
+  --mdc-chip-label-text-size: 11px !important;
+  --mdc-chip-label-text-weight: 700 !important;
+  --mdc-chip-label-text-tracking: 0.3 !important;
+  --mdc-chip-outline-width: 0 !important;
+  --mdc-chip-container-height: 32px !important;
+
+  @each $type, $value in $types {
+    .label_#{$type} {
+      --mdc-chip-elevated-container-color: #{map.get($value, "main")};
+      --mdc-chip-outline-color: #{map.get($value, "border")};
+      --mdc-chip-label-text-color: #{map.get($value, "text")};
+
+      mat-icon {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+
+  .mat-mdc-chip.small {
+    // TODO need to review
+    --mdc-chip-container-height: 28px !important;
+  }
+
+  .table_row_item {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  .trailing-icon {
+    .mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
+      // Chips with trailing icon have -4 right padding per Figma
+      padding-right: 8px;
+    }
+  }
+
+  .mat-mdc-chip.bordered {
+    --mdc-chip-outline-width: 2.5px !important;
+  }
+
+}