i-tech-shared-components 1.3.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/package.json +1 -1
  2. package/theme/_ag-grid.scss +10 -10
  3. package/theme/_buttons.scss +14 -4
  4. package/theme/_date_picker.scss +9 -9
  5. package/theme/_date_time_picker.scss +9 -9
  6. package/theme/_form_fields.scss +23 -23
  7. package/theme/_icon-button.scss +24 -12
  8. package/theme/_label.scss +51 -29
  9. package/theme/_mat-selects.scss +18 -18
  10. package/theme/_menu.scss +3 -3
  11. package/theme/_text_input.scss +12 -12
  12. package/theme.scss +16 -17
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "i-tech-shared-components",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "peerDependencies": {
5
5
  "@angular/material": "^19.0.0",
6
6
  "@angular/animations": "^19.0.0",
package/theme/_ag-grid.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '@angular/material' as mat;
2
- @import "./color_themes.scss";
2
+ @use "./color_themes.scss" as color-themes;
3
3
 
4
4
  body {
5
5
 
@@ -11,27 +11,27 @@ body {
11
11
 
12
12
  // Success theme
13
13
  .ag-row.success-row {
14
- background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)};
14
+ background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)};
15
15
  }
16
16
  .ag-row.success-row:hover:before {
17
- background-color: #{mat.get-theme-color($m3-light-theme, primary, 98)};
17
+ background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)};
18
18
  }
19
19
 
20
20
  // Change theme
21
21
  .ag-cell-changed {
22
- background-color: #{mat.get-theme-color($m3-light-theme, secondary, 99)};
22
+ background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, secondary, 99)};
23
23
  &.ag-cell-focus,
24
24
  &:hover {
25
- background-color: #{mat.get-theme-color($m3-light-theme, secondary, 98)};
25
+ background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, secondary, 98)};
26
26
  }
27
27
  }
28
28
 
29
29
  // Error theme
30
30
  .ag-row.error-row {
31
- background-color: #{mat.get-theme-color($m3-light-theme, error, 99)};
31
+ background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 99)};
32
32
  }
33
33
  .ag-row.error-row:hover:before {
34
- background-color: #{mat.get-theme-color($m3-light-theme, error, 98)};
34
+ background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 98)};
35
35
  }
36
36
 
37
37
  .ag-row.not-found-row-even {
@@ -124,7 +124,7 @@ body {
124
124
  }
125
125
 
126
126
  .ag-header, .ag-advanced-filter-header {
127
- --ag-header-background-color: #{mat.get-theme-color($m3-light-theme, neutral, 99)};
127
+ --ag-header-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, neutral, 99)};
128
128
  }
129
129
  }
130
130
 
@@ -141,8 +141,8 @@ body {
141
141
  }
142
142
 
143
143
  .grid-with-selection {
144
- --ag-selected-row-background-color: #{mat.get-theme-color($m3-light-theme, primary, 98)};
145
- --ag-row-hover-color: #{mat.get-theme-color($m3-light-theme, primary, 99)};
144
+ --ag-selected-row-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)};
145
+ --ag-row-hover-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)};
146
146
  }
147
147
 
148
148
  // Overrides for master/detail grid row group for payments
package/theme/_buttons.scss CHANGED
@@ -1,6 +1,6 @@
1
-
2
1
  @use '@angular/material' as mat;
3
- @import "./color_themes.scss";
2
+ @use 'sass:color';
3
+ @use "./color_themes.scss" as color-themes;
4
4
 
5
5
  body {
6
6
  $borderRadius: 5px;
@@ -51,8 +51,18 @@ body {
51
51
 
52
52
  // DEFINE TERTIARY BUTTON
53
53
  .mdc-button.tertiary {
54
- @include mat.button-color($m3-light-theme, $color-variant: tertiary);
55
- --mdc-text-button-label-text-color: mat.get-theme-color($m3-light-theme, 'tertiary', 30) !important;
54
+ @include mat.button-color(color-themes.$m3-light-theme, $color-variant: tertiary);
55
+ & {
56
+ --mdc-text-button-label-text-color: mat.get-theme-color(color-themes.$m3-light-theme, 'tertiary', 30) !important;
57
+ }
56
58
  }
57
59
  // END OF DEFINE TERTIARY BUTTON
58
60
  }
61
+
62
+ // Light Theme Button
63
+ .button_light_theme {
64
+ @include mat.button-color(color-themes.$m3-light-theme, $color-variant: tertiary);
65
+ & {
66
+ --mdc-text-button-label-text-color: mat.get-theme-color(color-themes.$m3-light-theme, 'tertiary', 30) !important;
67
+ }
68
+ }
package/theme/_date_picker.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  @use '@angular/material' as mat;
2
- @import "./color_themes.scss";
2
+ @use "./_color_themes.scss" as color-themes;
3
3
 
4
4
  body {
5
- --mat-datepicker-calendar-container-background-color: #{mat.get-theme-color($m3-light-theme, primary, 100)} !important;
6
- --mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color($m3-light-theme, primary, 35)} !important;
7
- --mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
8
- --mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
9
- --mat-datepicker-range-input-separator-color: #{mat.get-theme-color($m3-light-theme, neutral, 50)} !important;
5
+ --mat-datepicker-calendar-container-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 100)} !important;
6
+ --mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 35)} !important;
7
+ --mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
8
+ --mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
9
+ --mat-datepicker-range-input-separator-color: #{mat.get-theme-color(color-themes.$m3-light-theme, neutral, 50)} !important;
10
10
  --mat-datepicker-calendar-body-label-text-size: 16px;
11
11
  --mat-datepicker-calendar-body-label-text-weight: 400;
12
12
  --mat-datepicker-calendar-period-button-text-size: 16px;
@@ -29,7 +29,7 @@ body {
29
29
  }
30
30
 
31
31
  .mat-date-range-input-inner::placeholder {
32
- color: #{mat.get-theme-color($m3-light-theme, neutral, 50)};
32
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, neutral, 50)};
33
33
  }
34
34
 
35
35
  .mat-mdc-input-element::placeholder {
@@ -53,8 +53,8 @@ body {
53
53
 
54
54
  .mat-datepicker-content {
55
55
  background-color: var(--white-color) !important;
56
- --mat-datepicker-calendar-navigation-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
57
- --mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
56
+ --mat-datepicker-calendar-navigation-button-icon-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 80)};
57
+ --mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 80)};
58
58
  box-shadow: 0 2px 6px 2px rgba(48, 70, 102, 0.10);
59
59
  border: 1px solid var(--Outline, #D7D9DE);
60
60
 
package/theme/_date_time_picker.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  @use '@angular/material' as mat;
2
- @import "./color_themes.scss";
2
+ @use "./color_themes.scss" as color-themes;;
3
3
 
4
4
  .date_time_picker_container {
5
5
 
6
6
  &.readonly_field {
7
7
  .date_time_picker {
8
- border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
9
- --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
10
- --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
8
+ border-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
9
+ --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
10
+ --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
11
11
  }
12
12
 
13
13
  mat-label, .required-input {
14
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
14
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
15
15
  }
16
16
  }
17
17
 
@@ -36,7 +36,7 @@
36
36
  letter-spacing: 0.2px;
37
37
 
38
38
  &:disabled {
39
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
39
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
40
40
  }
41
41
  }
42
42
 
@@ -48,13 +48,13 @@
48
48
  }
49
49
 
50
50
  &.disabled {
51
- border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
51
+ border-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
52
52
  opacity: 0.7;
53
53
 
54
54
  input {
55
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
55
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
56
56
  &::placeholder {
57
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
57
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
58
58
  }
59
59
  }
60
60
  }
package/theme/_form_fields.scss CHANGED
@@ -1,24 +1,24 @@
1
1
  @use '@angular/material' as mat;
2
- @import "./color_themes.scss";
2
+ @use "./color_themes.scss" as color-themes;
3
3
 
4
4
  body {
5
5
  .mat-mdc-form-field {
6
6
  width: 100%;
7
- --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
7
+ --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
8
8
  // Custom outline color intentionally outside of color palette
9
9
  --mdc-outlined-text-field-focus-outline-color: #0060DF;
10
- --mdc-outlined-text-field-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
11
- --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
10
+ --mdc-outlined-text-field-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
11
+ --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 70)};
12
12
  // Set/focused values should be a slightly darker tertiary30
13
- --mat-select-focused-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
14
- --mat-select-enabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
15
- --mdc-filled-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
16
- --mdc-filled-text-field-focus-active-indicator-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
17
- --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
18
- --mdc-outlined-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
19
- --mdc-outlined-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
20
- --mat-form-field-focus-select-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
21
- --mdc-outlined-text-field-input-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
13
+ --mat-select-focused-arrow-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
14
+ --mat-select-enabled-trigger-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
15
+ --mdc-filled-text-field-caret-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
16
+ --mdc-filled-text-field-focus-active-indicator-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
17
+ --mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
18
+ --mdc-outlined-text-field-caret-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
19
+ --mdc-outlined-text-field-focus-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
20
+ --mat-form-field-focus-select-arrow-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
21
+ --mdc-outlined-text-field-input-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
22
22
  --mdc-outlined-text-field-focus-outline-width: 3px !important;
23
23
  --mat-form-field-subscript-text-weight: 500;
24
24
  --mat-form-field-container-text-size: 13px;
@@ -27,7 +27,7 @@ body {
27
27
 
28
28
 
29
29
  mat-hint {
30
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
30
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
31
31
  font-size: 11px;
32
32
  font-weight: 500;
33
33
  letter-spacing: 0.022px;
@@ -38,7 +38,7 @@ body {
38
38
  }
39
39
 
40
40
  mat-label:not(.meu_item_label) {
41
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
41
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
42
42
  position: relative;
43
43
  bottom: 5px;
44
44
  padding-left: 16px;
@@ -47,7 +47,7 @@ body {
47
47
  }
48
48
 
49
49
  .invalid-label-color {
50
- color: #{mat.get-theme-color($m3-light-theme, error, 40)} !important;
50
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 40)} !important;
51
51
  }
52
52
 
53
53
  .mat-mdc-menu-item {
@@ -55,7 +55,7 @@ body {
55
55
  --mat-menu-item-label-text-weight: 500 !important;
56
56
  --mat-menu-item-label-text-line-height: 20px !important;
57
57
  --mat-menu-item-label-text-tracking: 0.2px !important;
58
- --mat-menu-item-label-text-color: #{mat.get-theme-color($m3-light-theme,tertiary, 30)} !important;
58
+ --mat-menu-item-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme,tertiary, 30)} !important;
59
59
  .meu_item_label {
60
60
  text-align: left;
61
61
  text-underline-position: from-font;
@@ -64,7 +64,7 @@ body {
64
64
  }
65
65
 
66
66
  .required-input {
67
- color: #{mat.get-theme-color($m3-light-theme, error, 40)};
67
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 40)};
68
68
  position: relative;
69
69
  bottom: 5px;
70
70
  font-size: 11px;
@@ -74,15 +74,15 @@ body {
74
74
  .mat-form-field-invalid {
75
75
  --mdc-outlined-text-field-outline-width: 3px !important;
76
76
  // See if we can remove this after updating date-picker scss
77
- --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color($m3-light-theme,error,40)} !important;
77
+ --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme,error,40)} !important;
78
78
  }
79
79
 
80
80
  .default-form-icon-color {
81
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
81
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
82
82
  .mat-mdc-icon-button.tonal mat-icon {
83
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
83
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
84
84
  & svg path {
85
- fill: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
85
+ fill: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
86
86
  }
87
87
  }
88
88
  }
@@ -97,7 +97,7 @@ body {
97
97
 
98
98
  .mat-mdc-input-element {
99
99
  overflow: hidden;
100
- color: var(--Text, #{mat.get-theme-color($m3-light-theme,tertiary, 30)});
100
+ color: var(--Text, #{mat.get-theme-color(color-themes.$m3-light-theme,tertiary, 30)});
101
101
  text-overflow: ellipsis;
102
102
  font-size: 13px;
103
103
  font-style: normal;
package/theme/_icon-button.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '@angular/material' as mat;
2
- @import "./color_themes.scss";
2
+ @use "./_color_themes.scss" as color-themes;
3
3
 
4
4
  body {
5
5
  $buttonSize: 40;
@@ -81,23 +81,23 @@ body {
81
81
  // BUTTON ICON TYPES
82
82
 
83
83
  .mat-mdc-icon-button.tonal {
84
- --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, tertiary, 60)};
84
+ --mat-icon-button-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 60)};
85
85
 
86
86
  mat-icon {
87
- color: mat.get-theme-color($m3-light-theme, tertiary, 30);
87
+ color: mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30);
88
88
  & svg path {
89
- fill: mat.get-theme-color($m3-light-theme, tertiary, 30);
89
+ fill: mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30);
90
90
  }
91
91
  }
92
92
  }
93
93
 
94
94
  .mat-mdc-icon-button.standard {
95
- --mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 60)};
95
+ --mat-icon-button-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 60)};
96
96
 
97
97
  mat-icon {
98
- color: mat.get-theme-color($m3-light-theme, primary, 50);
98
+ color: mat.get-theme-color(color-themes.$m3-light-theme, primary, 50);
99
99
  & svg path {
100
- fill: mat.get-theme-color($m3-light-theme, primary, 50);
100
+ fill: mat.get-theme-color(color-themes.$m3-light-theme, primary, 50);
101
101
  }
102
102
  }
103
103
  }
@@ -109,8 +109,8 @@ body {
109
109
  --mdc-fab-hover-container-elevation-shadow: none !important;
110
110
  --mdc-fab-pressed-container-elevation-shadow: none !important;
111
111
  --mdc-fab-focus-container-elevation-shadow: none !important;
112
- --mdc-fab-container-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
113
- --mat-fab-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
112
+ --mdc-fab-container-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 50)};
113
+ --mat-fab-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 50)};
114
114
  mat-icon {
115
115
  color: white;
116
116
  & svg path {
@@ -121,17 +121,29 @@ body {
121
121
  // END OF BUTTON ICON TYPES
122
122
 
123
123
  //.mat-mdc-icon-button:disabled, .mat-mdc-fab-base:disabled {
124
- // background-color: mat.get-theme-color($m3-light-theme, neutral, 95);
124
+ // background-color: mat.get-theme-color(color-themes.$m3-light-theme, neutral, 95);
125
125
  //}
126
126
 
127
127
  .mat-mdc-icon-button:disabled mat-icon,
128
128
  .mat-mdc-fab-base:disabled mat-icon {
129
- color: mat.get-theme-color($m3-light-theme, neutral, 60) !important;
129
+ color: mat.get-theme-color(color-themes.$m3-light-theme, neutral, 60) !important;
130
130
  }
131
131
 
132
132
  // For small size
133
133
  .mat-mdc-icon-button.small:disabled, .mat-mdc-fab-base.small:disabled {
134
- background-color: mat.get-theme-color($m3-light-theme, neutral, 95);
134
+ background-color: mat.get-theme-color(color-themes.$m3-light-theme, neutral, 95);
135
135
  }
136
136
 
137
137
  }
138
+
139
+ .icon_button_tertiary {
140
+ --mat-icon-button-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 60)};
141
+
142
+ &.mat-mdc-icon-button {
143
+ color: mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30);
144
+
145
+ mat-icon {
146
+ fill: mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30);
147
+ }
148
+ }
149
+ }
package/theme/_label.scss CHANGED
@@ -1,160 +1,182 @@
1
- @use "sass:map";
2
1
  @use '@angular/material' as mat;
3
- @import "./color_themes.scss";
2
+ @use 'sass:map';
3
+ @use "./_color_themes.scss" as color-themes;
4
+
5
+ // Define colors with proper hex values to avoid interpolation warnings
6
+ $label-colors: (
7
+ "aqua": #00ffff,
8
+ "blue": #0000ff,
9
+ "gray": #808080,
10
+ "green": #008000,
11
+ "olive": #808000,
12
+ "orange": #ffa500,
13
+ "purple": #800080,
14
+ "red": #ff0000,
15
+ "teal": #008080,
16
+ "white": #ffffff,
17
+ "yellow": #ffff00
18
+ );
19
+
20
+ @each $type-name, $color in $label-colors {
21
+ .label_#{$type-name} {
22
+ background-color: $color;
23
+ color: if($type-name == "white", #000000, #ffffff); // Black text for white labels, white text for others
24
+ }
25
+ }
4
26
 
5
27
  body {
6
28
  $types: (
7
- purple: (
29
+ "purple": (
8
30
  main: #DBD4F3,
9
31
  hover: #E5E0F6,
10
32
  border: #6F5BBF,
11
33
  text: #140063
12
34
  ),
13
- teal: (
35
+ "teal": (
14
36
  main: #D2F3F2,
15
37
  hover: #DFF6F6,
16
38
  border: #00CAC3,
17
39
  text: #006B67
18
40
  ),
19
- olive: (
41
+ "olive": (
20
42
  main: #EFF2D4,
21
43
  hover: #F3F6E0,
22
44
  border: #CDD968,
23
45
  text: #606C00
24
46
  ),
25
- orange: (
47
+ "orange": (
26
48
  main: #FFE4DB,
27
49
  hover: #FFECE5,
28
50
  border: #FC8156,
29
51
  text: #A42B00
30
52
  ),
31
- blue: (
53
+ "blue": (
32
54
  main: #D1E9FF,
33
55
  hover: #DEEFFF,
34
56
  border: #42A5FF,
35
57
  text: #003E77
36
58
  ),
37
- cyan: (
59
+ "cyan": (
38
60
  main: #DBF8FF,
39
61
  hover: #E5FAFF,
40
62
  border: #42D8FF,
41
63
  text: #006681
42
64
  ),
43
- raspberry: (
65
+ "raspberry": (
44
66
  main: #EBD6DB,
45
67
  hover: #F1E1E5,
46
68
  border: #711A2E,
47
69
  text: #4B0011
48
70
  ),
49
- yellow: (
71
+ "yellow": (
50
72
  main: #FFFCCB,
51
73
  hover: #FFFDDA,
52
74
  border: #FFF000,
53
75
  text: #847700
54
76
  ),
55
- wine: (
77
+ "wine": (
56
78
  main: #EDD3E5,
57
79
  hover: #F2DFEC,
58
80
  border: #9D4280,
59
81
  text: #680047
60
82
  ),
61
- green: (
83
+ "green": (
62
84
  main: #CFF1DD,
63
85
  hover: #DCF5E7,
64
86
  border: #2EB265,
65
87
  text: #005D27
66
88
  ),
67
- primary: (
89
+ "primary": (
68
90
  main: #C0E5C7,
69
91
  hover: #EFFAF1,
70
92
  border: #42B963,
71
93
  text: #003A0C
72
94
  ),
73
- red: (
95
+ "red": (
74
96
  main: #FFE5E5,
75
97
  hover: #FFD9D9,
76
98
  border: #FF4D4D,
77
99
  text: #8B0000
78
100
  ),
79
- neutral: (
101
+ "neutral": (
80
102
  main: #E8E8E8,
81
103
  hover: #F2F2F2,
82
104
  border: #B3B3B3,
83
105
  text: #575757
84
106
  ),
85
- white: (
107
+ "white": (
86
108
  main: #FFFFFF,
87
109
  hover: #F8F9FA,
88
110
  border: #D7D9DE,
89
111
  text: #1A1A1A
90
112
  ),
91
- gray: (
113
+ "gray": (
92
114
  main: #F0F0F4,
93
115
  hover: #E5E0F6,
94
116
  border: #fff,
95
117
  text: #647081
96
118
  ),
97
- canceled: (
98
- main: white,
119
+ "canceled": (
120
+ main: #ffffff,
99
121
  hover: #E5E0F6,
100
122
  border: #C11A39,
101
123
  text: #C11A39
102
124
  ),
103
- starts_2m: (
125
+ "starts_2m": (
104
126
  main: rgba(182, 140, 255, 0.7),
105
127
  hover: rgba(195, 167, 255, 0.7),
106
128
  border: #320088,
107
129
  text: #320088
108
130
  ),
109
- starts_10m: (
131
+ "starts_10m": (
110
132
  main: rgba(195, 167, 243, 0.7),
111
133
  hover: rgba(205, 182, 248, 0.7),
112
134
  border: #3E1585,
113
135
  text: #3E1585
114
136
  ),
115
- starts_20m: (
137
+ "starts_20m": (
116
138
  main: rgba(200, 176, 241, 0.7),
117
139
  hover: rgba(210, 190, 246, 0.7),
118
140
  border: #44227D,
119
141
  text: #44227D
120
142
  ),
121
- starts_60m: (
143
+ "starts_60m": (
122
144
  main: rgba(215, 203, 237, 0.7),
123
145
  hover: rgba(225, 215, 242, 0.7),
124
146
  border: #44227D,
125
147
  text: #44227D
126
148
  ),
127
- starts_2h: (
149
+ "starts_2h": (
128
150
  main: rgba(223, 215, 235, 0.7),
129
151
  hover: rgba(230, 224, 240, 0.7),
130
152
  border: #493076,
131
153
  text: #493076
132
154
  ),
133
- starts_5h: (
155
+ "starts_5h": (
134
156
  main: rgba(226, 222, 234, 0.7),
135
157
  hover: rgba(235, 230, 240, 0.7),
136
158
  border: #503E6D,
137
159
  text: #503E6D
138
160
  ),
139
- starts_12h: (
161
+ "starts_12h": (
140
162
  main: rgba(156, 166, 179, 0.16),
141
163
  hover: rgba(170, 180, 190, 0.16),
142
164
  border: #424954,
143
165
  text: #424954
144
166
  ),
145
- starts_24h: (
167
+ "starts_24h": (
146
168
  main: rgba(156, 166, 179, 0.16),
147
169
  hover: rgba(170, 180, 190, 0.16),
148
170
  border: #424954,
149
171
  text: #424954
150
172
  ),
151
- late: (
173
+ "late": (
152
174
  main: #FFE4DB,
153
175
  hover: #FFECE5,
154
176
  border: #FC8156,
155
177
  text: #A42B00
156
178
  ),
157
- late_warning: (
179
+ "late_warning": (
158
180
  main: #A42B00,
159
181
  hover: #FFECE5,
160
182
  border: #FC8156,
package/theme/_mat-selects.scss CHANGED
@@ -1,21 +1,21 @@
1
1
  // Import Material theming
2
2
  @use '@angular/material' as mat;
3
- @import "./color_themes.scss";
3
+ @use "./color_themes.scss" as color-themes;
4
4
 
5
5
 
6
6
  body {
7
- --mat-option-hover-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
8
- --mat-option-selected-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
9
- --mat-option-focus-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
7
+ --mat-option-hover-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
8
+ --mat-option-selected-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
9
+ --mat-option-focus-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 99)} !important;
10
10
  --mat-select-trigger-text-line-height: 20px !important;
11
11
  --mat-select-trigger-text-size: 13px !important;
12
12
  --mat-select-trigger-text-weight: 500 !important;
13
13
  --mat-select-trigger-text-tracking: 0.2px !important;
14
- --mat-select-enabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
15
- --mat-full-pseudo-checkbox-unselected-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)} !important;
16
- --mat-select-placeholder-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
17
- --mat-option-selected-state-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)} !important;
18
- --mat-option-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)} !important;
14
+ --mat-select-enabled-trigger-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
15
+ --mat-full-pseudo-checkbox-unselected-icon-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 80)} !important;
16
+ --mat-select-placeholder-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)} !important;
17
+ --mat-option-selected-state-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)} !important;
18
+ --mat-option-label-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)} !important;
19
19
 
20
20
  .new-mat-autocomplete {
21
21
  .mat-mdc-form-field {
@@ -46,16 +46,16 @@ body {
46
46
  width: 100%;
47
47
  height: 40px;
48
48
  padding: 8px 40px 8px 36px !important;
49
- border: 1px solid #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
49
+ border: 1px solid #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
50
50
  border-radius: 4px;
51
51
  font-size: 13px;
52
52
  line-height: 24px;
53
53
  letter-spacing: 0.5px;
54
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
54
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)};
55
55
  background: white;
56
56
 
57
57
  &:disabled {
58
- border: 1px solid #{mat.get-theme-color($m3-light-theme, tertiary, 99)};
58
+ border: 1px solid #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 99)};
59
59
  }
60
60
 
61
61
  &:focus {
@@ -65,11 +65,11 @@ body {
65
65
  }
66
66
 
67
67
  &:hover:not(:focus):not(:disabled) {
68
- border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
68
+ border-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 70)};
69
69
  }
70
70
 
71
71
  &::placeholder {
72
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
72
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
73
73
  font-size: 13px;
74
74
  font-weight: 500;
75
75
  line-height: 20px;
@@ -83,7 +83,7 @@ body {
83
83
  left: 50px;
84
84
  top: 57%;
85
85
  transform: translateY(-50%);
86
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
86
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
87
87
 
88
88
  mat-icon {
89
89
  font-size: 20px;
@@ -98,7 +98,7 @@ body {
98
98
  right: 0;
99
99
  top: 50%;
100
100
  transform: translateY(-50%);
101
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
101
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 50)};
102
102
 
103
103
  &.rotated {
104
104
  transform: translateY(-50%) rotate(180deg);
@@ -121,14 +121,14 @@ body {
121
121
 
122
122
  &.custom-value {
123
123
  font-weight: 500;
124
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)} !important;
124
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 30)} !important;
125
125
  width: 80%;
126
126
  }
127
127
  }
128
128
 
129
129
  // Error state
130
130
  .mat-mdc-form-field-error {
131
- //color: #{mat.get-theme-color($m3-light-theme, error, 40)};
131
+ //color: #{mat.get-theme-color(color-themes.$m3-light-theme, error, 40)};
132
132
  animation: mat-form-field-animation 900ms cubic-bezier(0.0, 0.0, 0.2, 1);
133
133
  position: absolute;
134
134
  left: 16px;
package/theme/_menu.scss CHANGED
@@ -1,13 +1,13 @@
1
1
  @use '@angular/material' as mat;
2
- @import "./color_themes.scss";
2
+ @use "./color_themes.scss" as color-themes;
3
3
 
4
4
  .mt-4 {
5
5
  margin-top: 4px;
6
6
  }
7
7
 
8
8
  .mat-mdc-menu-panel {
9
- border: 1px solid mat.get-theme-color($m3-light-theme, tertiary, 90) !important;
9
+ border: 1px solid mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90) !important;
10
10
  --mat-app-elevation-shadow-level-2: 0px !important;
11
- --mat-menu-item-hover-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 98)} !important;
11
+ --mat-menu-item-hover-state-layer-color: #{mat.get-theme-color(color-themes.$m3-light-theme, primary, 98)} !important;
12
12
  }
13
13
 
package/theme/_text_input.scss CHANGED
@@ -1,25 +1,25 @@
1
1
  @use '@angular/material' as mat;
2
- @import "./color_themes.scss";
2
+ @use "./_color_themes.scss" as color-themes;
3
3
 
4
4
  body {
5
5
  .readonly-field {
6
- --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
7
- --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
6
+ --mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
7
+ --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
8
8
  --mdc-outlined-text-field-focus-outline-width: 1px;
9
- --mdc-outlined-text-field-error-focus-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
10
- --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
11
- --mdc-outlined-text-field-error-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
12
- --mat-select-disabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
13
- --mat-select-placeholder-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
14
- --mdc-outlined-text-field-disabled-input-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
9
+ --mdc-outlined-text-field-error-focus-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
10
+ --mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
11
+ --mdc-outlined-text-field-error-hover-outline-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
12
+ --mat-select-disabled-trigger-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
13
+ --mat-select-placeholder-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
14
+ --mdc-outlined-text-field-disabled-input-text-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)};
15
15
  }
16
16
 
17
17
  .readonly-color {
18
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
18
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
19
19
  .mat-mdc-icon-button.tonal mat-icon {
20
- color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
20
+ color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
21
21
  }
22
- --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
22
+ --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color(color-themes.$m3-light-theme, tertiary, 90)} !important;
23
23
  }
24
24
 
25
25
  .mat-mdc-form-field-icon-prefix {
package/theme.scss CHANGED
@@ -1,18 +1,18 @@
1
1
  @use '@angular/material' as mat;
2
- @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
2
+ @use "./theme/buttons.scss";
3
+ @use "./theme/variables/colors.scss";
4
+ @use "./theme/label.scss";
5
+ @use "./theme/icon-button.scss";
6
+ @use "./theme/_color_themes.scss" as color-themes;
7
+ @use "./theme/date_picker.scss";
8
+ @use "./theme/text_input.scss";
9
+ @use "./theme/form_fields.scss";
10
+ @use "./theme/mat-selects.scss";
11
+ @use "./theme/menu.scss";
12
+ @use "./theme/ag-grid.scss";
13
+ @use "./theme/date_time_picker.scss";
3
14
 
4
- @import "./theme/buttons.scss";
5
- @import "./theme/variables/colors.scss";
6
- @import "./theme/label.scss";
7
- @import "./theme/icon-button.scss";
8
- @import "./theme/color_themes.scss";
9
- @import "./theme/date_picker.scss";
10
- @import "./theme/text_input.scss";
11
- @import "./theme/form_fields.scss";
12
- @import "./theme/mat-selects.scss";
13
- @import "./theme/menu.scss";
14
- @import "./theme/ag-grid.scss";
15
- @import "./theme/date_time_picker.scss";
15
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
16
16
 
17
17
  @include mat.core();
18
18
 
@@ -23,10 +23,9 @@ body {
23
23
  font-style: normal;
24
24
  font-size: 12px;
25
25
 
26
- @include mat.core-theme($m3-light-theme);
27
- @include mat.all-component-themes($m3-light-theme);
28
- @include mat.color-variants-backwards-compatibility($m3-light-theme);
29
- @include mat.form-field-theme($m3-light-theme, $color-variant: secondary);
26
+ @include mat.core-theme(color-themes.$m3-light-theme);
27
+ @include mat.all-component-themes(color-themes.$m3-light-theme);
28
+ @include mat.color-variants-backwards-compatibility(color-themes.$m3-light-theme);
30
29
  .new-mat-autocomplete {
31
30
  @include mat.button-density(-3);
32
31
  };