ng-configcat-publicapi-ui 6.0.2 → 6.0.3

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 (24) hide show
  1. package/package.json +1 -1
  2. package/src/css/button.scss +73 -70
  3. package/src/css/controls.scss +318 -310
  4. package/src/css/dialog.scss +50 -46
  5. package/src/css/icon.scss +11 -8
  6. package/src/css/snackbar.scss +14 -11
  7. package/src/css/table.scss +107 -104
  8. package/src/css/theme.scss +12 -7
  9. package/src/css/tooltip.scss +21 -16
  10. package/src/css/variables.scss +267 -261
  11. package/src/css/variation.scss +22 -17
  12. package/src/css/vars/auth.scss +6 -3
  13. package/src/css/vars/banner.scss +6 -3
  14. package/src/css/vars/box.scss +8 -5
  15. package/src/css/vars/config-overview.scss +6 -3
  16. package/src/css/vars/flag.scss +6 -3
  17. package/src/css/vars/header.scss +6 -3
  18. package/src/css/vars/icon.scss +11 -8
  19. package/src/css/vars/logo.scss +6 -3
  20. package/src/css/vars/notification.scss +6 -3
  21. package/src/css/vars/overview.scss +7 -4
  22. package/src/css/vars/prism.scss +7 -4
  23. package/src/css/vars/sidenav.scss +6 -3
  24. package/src/public-api.scss +105 -59
package/src/css/variables.scss CHANGED
@@ -15,319 +15,325 @@
15
15
  @use "./vars/notification.scss";
16
16
  @use "./vars/theme.scss";
17
17
 
18
- :root {
19
- --color-scheme: light;
20
- --theme-color: #{theme.$primary-color};
21
- --page-background-color: white;
22
- --boxed-management-page-background-color: #f8f8f8;
23
- --code-highlight-background-color: #e0e0e0;
24
- --link-color: var(--theme-color);
25
- --text-color: #{theme.$text-color};
26
- --error-text-color: red;
27
- --success-text-color: #4caf50;
28
- --menu-icon-color: #0000008a;
29
- --tab-border-bottom-color: #0000001f;
30
- --reorder-icon-color: #6b6b6b;
31
- --environment-color-opacity: 0.8;
32
- --breadcrumb-dropdown-colored-shade-background: #9c9c9c;
33
- --environment-color-bar-shade-background: #9c9c9c;
34
- --saving-indicator-backdrop-color: #{color.adjust(black, $alpha: -0.3)};
35
- --popup-panel-border: none;
36
-
37
- // ==== PANEL ====
38
- --panel-hint-color: #{color.adjust(theme.$text-color, $lightness: 30%)};
39
- --panel-description-color: #{color.adjust(theme.$text-color, $lightness: 10%)};
40
- --panel-background-color: white;
41
- --panel-border-color: #d4d4d4;
42
- --panel-content-box-background-color: #f5f5f5;
43
- --panel-content-box-border-color: #d4d4d4;
44
-
45
- // ==== TABLE ====
46
- --table-header-color: #ffe2bc;
47
- --table-border-color: #e0c7a5;
48
- --table-border-height: 1px;
49
- --table-border: solid var(--table-border-height) var(--table-border-color);
50
- --table-even-row-color: #f8f8f8;
51
- --table-border-radius: 4px;
52
- --table-cell-border-color: #e0e0e0;
53
- --table-status-green: var(--success-text-color);
54
- --table-status-red: var(--error-text-color);
55
- --table-header-font-weight: 600;
56
- --table-row-height: 48px;
57
- --table-odd-row-color: white;
58
- --table-detail-background: white;
59
- --table-row-hover-background: #f5f5f5;
60
- --table-row-active-background: #efefef;
61
-
62
- // ==== BUTTON ====
63
- --action-icon-button-color: #9e9e9e;
64
- --action-icon-button-disabled-opacity: 0.5;
65
- --outlined-button-color: #{theme.$primary-color};
66
- --diabled-button-color: #99999981;
67
- --primary-button-state-layer-color: black;
68
- --warn-button-state-layer-color: white;
69
- --green-button-background-color: #47a34a;
70
- --green-button-background-hover-color: #3b863e;
71
-
72
- // ==== CONTROLS ====
73
- --input-outline-focused-color: #{color.adjust(theme.$primary-color, $lightness: 5%)};
74
- --input-outline-invalid-color: var(--error-text-color);
75
- --input-background: #{theme.$input-background};
76
- --input-border-color: #dbdbdb;
77
- --input-transparent-background: #{color.adjust(theme.$input-background, $alpha: -0.2)};
78
- --input-placeholder-opacity: 0.9;
79
- --input-disabled-background-color: #ebebeb;
80
- --input-disabled-border-color: #d1d1d1;
81
- --input-disabled-color: #0000009c;
82
-
83
- // ==== NAV ====
84
- --nav-background-color: var(--panel-background-color);
85
- --nav-bottom-border-color: var(--panel-border-color);
86
-
87
- --nav-menu-item-font-weight: 500;
88
- --nav-menu-item-color: #4d4d4d;
89
- --nav-menu-item-active-color: black;
90
- --nav-menu-item-active-border-color: #f14321;
91
-
92
- // ==== COPYABLE CONTROL ====
93
- --copyable-text-color: #000000be;
94
- --copyable-icon-opacity: 0.6;
95
- --copyable-border-color: #d6d6d6;
96
- --copyable-background-color: #f0f0f0;
97
- --copyable-border-color-darker: #b8bdc9;
98
- --copyable-background-color-darker: #d9dadf;
99
-
100
- // ==== NEWS ====
101
- --news-card-background: #fff3e2;
102
- --news-card-border: #e7c697;
103
- --news-table-border: #b4b4b4;
104
-
105
- // ==== CODE REFERENCES ====
106
- --code-reference-header-background: #fdfdfd;
107
- --code-reference-border: #d6d6d6;
108
- --code-reference-line-number-highlight: #555555;
109
- --code-reference-line-number-separator: #e6e6e6;
110
- --code-reference-line-highlight: #77bbd6;
111
- --code-reference-line-highlight-border: #acd5e6;
112
-
113
- // ==== REORDER DIALOG ====
114
- --reorder-item-background: var(--panel-background-color);
115
- --reorder-item-border: var(--panel-border-color);
116
-
117
- // ==== INTEGRATIONS ====
118
- --integration-box-background: #fcfcfc;
119
-
120
- // ==== NEW DASHBOARD SNACK ====
121
- --new-dashboard-snack-background-color: #f7ec9a;
122
- --new-dashboard-snack-text-color: #000000;
123
- --new-dashboard-snack-button-background-color: #fdb64b;
124
- --new-dashboard-snack-button-background-color-hover: #ffaf38;
125
-
126
- // ==== BO =====
127
- --invoice-box-background: #e7e7e7;
128
-
129
- // ==== LD Migrator ====
130
- --ld-migrator-environment-circle-border-color: #666;
131
-
132
- // ==== MATERIAL OVERRIDES ====
133
- @include mat.form-field-overrides(
134
- (
135
- outlined-focus-label-text-color: theme.$primary-color,
136
- )
137
- );
138
- @include mat.snack-bar-overrides(
139
- (
140
- supporting-text-weight: 500,
141
- )
142
- );
143
- @include mat.checkbox-overrides(
144
- (
145
- label-text-size: 13px,
146
- )
147
- );
148
-
149
- [data-theme="dark"] {
150
- --color-scheme: dark;
151
- --theme-color: #{theme.$primary-color-dark};
152
- --page-background-color: #0d1117;
153
- --boxed-management-page-background-color: #0f1113;
154
- --code-highlight-background-color: #52555a;
18
+ /// @param {String} $scope-selector
19
+ @mixin apply-package-variables-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
20
+ #{$scope-selector} {
21
+ --color-scheme: light;
22
+ --theme-color: #{theme.$primary-color};
23
+ --page-background-color: white;
24
+ --boxed-management-page-background-color: #f8f8f8;
25
+ --code-highlight-background-color: #e0e0e0;
155
26
  --link-color: var(--theme-color);
156
- --text-color: #{theme.$text-color-dark};
157
- --error-text-color: #ff6a6a;
158
- --success-text-color: #50c053;
159
- --menu-icon-color: white;
160
- --tab-border-bottom-color: #30363d;
161
- --environment-color-opacity: 0.7;
162
- --breadcrumb-dropdown-colored-shade-background: #3b3b3b;
163
- --environment-color-bar-shade-background: #3b3b3b;
164
- --saving-indicator-backdrop-color: #{color.adjust(black, $alpha: -0.25)};
165
- --popup-panel-border: 1px solid #424952;
27
+ --text-color: #{theme.$text-color};
28
+ --error-text-color: red;
29
+ --success-text-color: #4caf50;
30
+ --menu-icon-color: #0000008a;
31
+ --tab-border-bottom-color: #0000001f;
32
+ --reorder-icon-color: #6b6b6b;
33
+ --environment-color-opacity: 0.8;
34
+ --breadcrumb-dropdown-colored-shade-background: #9c9c9c;
35
+ --environment-color-bar-shade-background: #9c9c9c;
36
+ --saving-indicator-backdrop-color: #{color.adjust(black, $alpha: -0.3)};
37
+ --popup-panel-border: none;
166
38
 
167
39
  // ==== PANEL ====
168
- --panel-hint-color: #{color.adjust(theme.$text-color-dark, $lightness: -15%)};
169
- --panel-description-color: #{color.adjust(theme.$text-color-dark, $lightness: -10%)};
170
- --panel-background-color: #1b1f25;
171
- --panel-border-color: #30363d;
172
- --panel-content-box-background-color: #22262e;
173
- --panel-content-box-border-color: #394049;
40
+ --panel-hint-color: #{color.adjust(theme.$text-color, $lightness: 30%)};
41
+ --panel-description-color: #{color.adjust(theme.$text-color, $lightness: 10%)};
42
+ --panel-background-color: white;
43
+ --panel-border-color: #d4d4d4;
44
+ --panel-content-box-background-color: #f5f5f5;
45
+ --panel-content-box-border-color: #d4d4d4;
174
46
 
175
47
  // ==== TABLE ====
176
- --table-header-color: #273e4b;
177
- --table-border-color: #364c53;
48
+ --table-header-color: #ffe2bc;
49
+ --table-border-color: #e0c7a5;
178
50
  --table-border-height: 1px;
179
51
  --table-border: solid var(--table-border-height) var(--table-border-color);
180
- --table-even-row-color: #252a31;
181
- --table-odd-row-color: #1f242b;
52
+ --table-even-row-color: #f8f8f8;
182
53
  --table-border-radius: 4px;
183
- --table-cell-border-color: #363c44;
54
+ --table-cell-border-color: #e0e0e0;
184
55
  --table-status-green: var(--success-text-color);
185
56
  --table-status-red: var(--error-text-color);
186
57
  --table-header-font-weight: 600;
187
58
  --table-row-height: 48px;
188
- --table-detail-background: #1b1f25;
189
- --table-row-hover-background: #272c35;
190
- --table-row-active-background: #272c35;
59
+ --table-odd-row-color: white;
60
+ --table-detail-background: white;
61
+ --table-row-hover-background: #f5f5f5;
62
+ --table-row-active-background: #efefef;
191
63
 
192
64
  // ==== BUTTON ====
193
65
  --action-icon-button-color: #9e9e9e;
194
66
  --action-icon-button-disabled-opacity: 0.5;
195
- --outlined-button-color: #{theme.$primary-color-dark};
67
+ --outlined-button-color: #{theme.$primary-color};
196
68
  --diabled-button-color: #99999981;
197
- --primary-button-state-layer-color: white;
198
- --warn-button-state-layer-color: black;
69
+ --primary-button-state-layer-color: black;
70
+ --warn-button-state-layer-color: white;
71
+ --green-button-background-color: #47a34a;
72
+ --green-button-background-hover-color: #3b863e;
199
73
 
200
74
  // ==== CONTROLS ====
201
- --input-outline-focused-color: #{color.adjust(theme.$primary-color-dark, $lightness: -10%)};
75
+ --input-outline-focused-color: #{color.adjust(theme.$primary-color, $lightness: 5%)};
202
76
  --input-outline-invalid-color: var(--error-text-color);
203
- --input-background: #{theme.$input-background-dark};
204
- --input-border-color: #474e57;
205
- --input-transparent-background: #{color.adjust(theme.$input-background-dark, $alpha: -0.2)};
206
- --input-placeholder-opacity: 0.6;
207
- --input-disabled-background-color: #2f3135;
208
- --input-disabled-border-color: #4d4d4e;
209
- --input-disabled-color: #bdbdbd;
77
+ --input-background: #{theme.$input-background};
78
+ --input-border-color: #dbdbdb;
79
+ --input-transparent-background: #{color.adjust(theme.$input-background, $alpha: -0.2)};
80
+ --input-placeholder-opacity: 0.9;
81
+ --input-disabled-background-color: #ebebeb;
82
+ --input-disabled-border-color: #d1d1d1;
83
+ --input-disabled-color: #0000009c;
210
84
 
211
85
  // ==== NAV ====
212
86
  --nav-background-color: var(--panel-background-color);
213
87
  --nav-bottom-border-color: var(--panel-border-color);
214
88
 
215
89
  --nav-menu-item-font-weight: 500;
216
- --nav-menu-item-color: #c2c2c2;
217
- --nav-menu-item-active-color: #ebebeb;
218
- --nav-menu-item-active-border-color: #af3356;
90
+ --nav-menu-item-color: #4d4d4d;
91
+ --nav-menu-item-active-color: black;
92
+ --nav-menu-item-active-border-color: #f14321;
219
93
 
220
94
  // ==== COPYABLE CONTROL ====
221
- --copyable-text-color: var(--text-color);
222
- --copyable-icon-opacity: 0.74;
223
- --copyable-border-color: var(--input-border-color);
224
- --copyable-background-color: #252a31;
225
- --copyable-border-color-darker: #565e69;
226
- --copyable-background-color-darker: #343a42;
95
+ --copyable-text-color: #000000be;
96
+ --copyable-icon-opacity: 0.6;
97
+ --copyable-border-color: #d6d6d6;
98
+ --copyable-background-color: #f0f0f0;
99
+ --copyable-border-color-darker: #b8bdc9;
100
+ --copyable-background-color-darker: #d9dadf;
227
101
 
228
102
  // ==== NEWS ====
229
- --news-card-background: #1b1f25;
230
- --news-card-border: #30363d;
231
- --news-table-border: #7a7a7a;
103
+ --news-card-background: #fff3e2;
104
+ --news-card-border: #e7c697;
105
+ --news-table-border: #b4b4b4;
232
106
 
233
107
  // ==== CODE REFERENCES ====
234
- --code-reference-header-background: #1b1f25;
235
- --code-reference-border: #363e46;
236
- --code-reference-line-number-highlight: #a8a8a8;
237
- --code-reference-line-number-separator: #2b333a;
108
+ --code-reference-header-background: #fdfdfd;
109
+ --code-reference-border: #d6d6d6;
110
+ --code-reference-line-number-highlight: #555555;
111
+ --code-reference-line-number-separator: #e6e6e6;
238
112
  --code-reference-line-highlight: #77bbd6;
239
- --code-reference-line-highlight-border: #3e6675;
113
+ --code-reference-line-highlight-border: #acd5e6;
240
114
 
241
- // ==== REORDER ====
242
- --reorder-item-background: #242a31;
243
- --reorder-item-border: var(--panel-content-box-border-color);
244
- --reorder-icon-color: var(--action-icon-button-color);
115
+ // ==== REORDER DIALOG ====
116
+ --reorder-item-background: var(--panel-background-color);
117
+ --reorder-item-border: var(--panel-border-color);
245
118
 
246
119
  // ==== INTEGRATIONS ====
247
- --integration-box-background: var(--panel-content-box-background-color);
120
+ --integration-box-background: #fcfcfc;
248
121
 
249
122
  // ==== NEW DASHBOARD SNACK ====
250
- --new-dashboard-snack-background-color: #ebde80;
251
- --new-dashboard-snack-button-background-color: #ffa726;
123
+ --new-dashboard-snack-background-color: #f7ec9a;
124
+ --new-dashboard-snack-text-color: #000000;
125
+ --new-dashboard-snack-button-background-color: #fdb64b;
252
126
  --new-dashboard-snack-button-background-color-hover: #ffaf38;
253
127
 
254
128
  // ==== BO =====
255
- --invoice-box-background: #2c313b;
129
+ --invoice-box-background: #e7e7e7;
256
130
 
257
131
  // ==== LD Migrator ====
258
- --ld-migrator-environment-circle-border-color: #bebebe;
132
+ --ld-migrator-environment-circle-border-color: #666;
259
133
 
260
- // ==== MATERIAL OVERRIDES ====
261
- $mat-panel-background-override: #272d35;
262
-
263
- @include mat.dialog-overrides(
264
- (
265
- container-color: $mat-panel-background-override,
266
- )
267
- );
268
- @include mat.menu-overrides(
269
- (
270
- container-color: $mat-panel-background-override,
271
- )
272
- );
273
- @include mat.tooltip-overrides(
274
- (
275
- supporting-text-color: white,
276
- container-color: color.adjust($mat-panel-background-override, $lightness: 20%),
277
- )
278
- );
279
- @include mat.button-toggle-overrides(
280
- (
281
- background-color: transparent,
282
- divider-color: var(--input-border-color),
283
- selected-state-background-color: #21252c,
284
- selected-state-text-color: #{color.adjust(theme.$primary-color, $lightness: 10%)},
285
- text-color: var(--text-color),
286
- disabled-state-background-color: transparent,
287
- )
288
- );
289
- @include mat.stepper-overrides(
290
- (
291
- container-color: $mat-panel-background-override,
292
- )
293
- );
294
- @include mat.autocomplete-overrides(
295
- (
296
- background-color: $mat-panel-background-override,
297
- )
298
- );
299
- @include mat.select-overrides(
300
- (
301
- panel-background-color: $mat-panel-background-override,
302
- )
303
- );
304
- @include mat.datepicker-overrides(
134
+ // ==== MATERIAL OVERRIDES (Light) ====
135
+ @include mat.form-field-overrides(
305
136
  (
306
- calendar-container-background-color: $mat-panel-background-override,
137
+ outlined-focus-label-text-color: theme.$primary-color,
307
138
  )
308
139
  );
309
- @include mat.timepicker-overrides(
140
+ @include mat.snack-bar-overrides(
310
141
  (
311
- container-background-color: $mat-panel-background-override,
142
+ supporting-text-weight: 500,
312
143
  )
313
144
  );
314
- @include mat.form-field-overrides(
145
+ @include mat.checkbox-overrides(
315
146
  (
316
- outlined-focus-label-text-color: theme.$primary-color-dark,
147
+ label-text-size: 13px,
317
148
  )
318
149
  );
150
+
151
+ // ==== DARK THEME VARS & OVERRIDES WITHIN SCOPE ====
152
+ &[data-theme="dark"],
153
+ [data-theme="dark"] & {
154
+ --color-scheme: dark;
155
+ --theme-color: #{theme.$primary-color-dark};
156
+ --page-background-color: #0d1117;
157
+ --boxed-management-page-background-color: #0f1113;
158
+ --code-highlight-background-color: #52555a;
159
+ --link-color: var(--theme-color);
160
+ --text-color: #{theme.$text-color-dark};
161
+ --error-text-color: #ff6a6a;
162
+ --success-text-color: #50c053;
163
+ --menu-icon-color: white;
164
+ --tab-border-bottom-color: #30363d;
165
+ --environment-color-opacity: 0.7;
166
+ --breadcrumb-dropdown-colored-shade-background: #3b3b3b;
167
+ --environment-color-bar-shade-background: #3b3b3b;
168
+ --saving-indicator-backdrop-color: #{color.adjust(black, $alpha: -0.25)};
169
+ --popup-panel-border: 1px solid #424952;
170
+
171
+ // ==== PANEL (Dark) ====
172
+ --panel-hint-color: #{color.adjust(theme.$text-color-dark, $lightness: -15%)};
173
+ --panel-description-color: #{color.adjust(theme.$text-color-dark, $lightness: -10%)};
174
+ --panel-background-color: #1b1f25;
175
+ --panel-border-color: #30363d;
176
+ --panel-content-box-background-color: #22262e;
177
+ --panel-content-box-border-color: #394049;
178
+
179
+ // ==== TABLE (Dark) ====
180
+ --table-header-color: #273e4b;
181
+ --table-border-color: #364c53;
182
+ --table-border-height: 1px;
183
+ --table-border: solid var(--table-border-height) var(--table-border-color);
184
+ --table-even-row-color: #252a31;
185
+ --table-odd-row-color: #1f242b;
186
+ --table-border-radius: 4px;
187
+ --table-cell-border-color: #363c44;
188
+ --table-status-green: var(--success-text-color);
189
+ --table-status-red: var(--error-text-color);
190
+ --table-header-font-weight: 600;
191
+ --table-row-height: 48px;
192
+ --table-detail-background: #1b1f25;
193
+ --table-row-hover-background: #272c35;
194
+ --table-row-active-background: #272c35;
195
+
196
+ // ==== BUTTON (Dark) ====
197
+ --action-icon-button-color: #9e9e9e;
198
+ --action-icon-button-disabled-opacity: 0.5;
199
+ --outlined-button-color: #{theme.$primary-color-dark};
200
+ --diabled-button-color: #99999981;
201
+ --primary-button-state-layer-color: white;
202
+ --warn-button-state-layer-color: black;
203
+
204
+ // ==== CONTROLS (Dark) ====
205
+ --input-outline-focused-color: #{color.adjust(theme.$primary-color-dark, $lightness: -10%)};
206
+ --input-outline-invalid-color: var(--error-text-color);
207
+ --input-background: #{theme.$input-background-dark};
208
+ --input-border-color: #474e57;
209
+ --input-transparent-background: #{color.adjust(theme.$input-background-dark, $alpha: -0.2)};
210
+ --input-placeholder-opacity: 0.6;
211
+ --input-disabled-background-color: #2f3135;
212
+ --input-disabled-border-color: #4d4d4e;
213
+ --input-disabled-color: #bdbdbd;
214
+
215
+ // ==== NAV (Dark) ====
216
+ --nav-background-color: var(--panel-background-color);
217
+ --nav-bottom-border-color: var(--panel-border-color);
218
+
219
+ --nav-menu-item-font-weight: 500;
220
+ --nav-menu-item-color: #c2c2c2;
221
+ --nav-menu-item-active-color: #ebebeb;
222
+ --nav-menu-item-active-border-color: #af3356;
223
+
224
+ // ==== COPYABLE CONTROL (Dark) ====
225
+ --copyable-text-color: var(--text-color);
226
+ --copyable-icon-opacity: 0.74;
227
+ --copyable-border-color: var(--input-border-color);
228
+ --copyable-background-color: #252a31;
229
+ --copyable-border-color-darker: #565e69;
230
+ --copyable-background-color-darker: #343a42;
231
+
232
+ // ==== NEWS (Dark) ====
233
+ --news-card-background: #1b1f25;
234
+ --news-card-border: #30363d;
235
+ --news-table-border: #7a7a7a;
236
+
237
+ // ==== CODE REFERENCES (Dark) ====
238
+ --code-reference-header-background: #1b1f25;
239
+ --code-reference-border: #363e46;
240
+ --code-reference-line-number-highlight: #a8a8a8;
241
+ --code-reference-line-number-separator: #2b333a;
242
+ --code-reference-line-highlight: #77bbd6;
243
+ --code-reference-line-highlight-border: #3e6675;
244
+
245
+ // ==== REORDER (Dark) ====
246
+ --reorder-item-background: #242a31;
247
+ --reorder-item-border: var(--panel-content-box-border-color);
248
+ --reorder-icon-color: var(--action-icon-button-color);
249
+
250
+ // ==== INTEGRATIONS (Dark) ====
251
+ --integration-box-background: var(--panel-content-box-background-color);
252
+
253
+ // ==== NEW DASHBOARD SNACK (Dark) ====
254
+ --new-dashboard-snack-background-color: #ebde80;
255
+ --new-dashboard-snack-button-background-color: #ffa726;
256
+ --new-dashboard-snack-button-background-color-hover: #ffaf38;
257
+
258
+ // ==== BO (Dark) =====
259
+ --invoice-box-background: #2c313b;
260
+
261
+ // ==== LD Migrator (Dark) ====
262
+ --ld-migrator-environment-circle-border-color: #bebebe;
263
+
264
+ // ==== MATERIAL OVERRIDES (Dark) ====
265
+ $mat-panel-background-override: #272d35;
266
+
267
+ @include mat.dialog-overrides(
268
+ (
269
+ container-color: $mat-panel-background-override,
270
+ )
271
+ );
272
+ @include mat.menu-overrides(
273
+ (
274
+ container-color: $mat-panel-background-override,
275
+ )
276
+ );
277
+ @include mat.tooltip-overrides(
278
+ (
279
+ supporting-text-color: white,
280
+ container-color: color.adjust($mat-panel-background-override, $lightness: 20%),
281
+ )
282
+ );
283
+ @include mat.button-toggle-overrides(
284
+ (
285
+ background-color: transparent,
286
+ divider-color: var(--input-border-color),
287
+ selected-state-background-color: #21252c,
288
+ selected-state-text-color: #{color.adjust(theme.$primary-color, $lightness: 10%)},
289
+ text-color: var(--text-color),
290
+ disabled-state-background-color: transparent,
291
+ )
292
+ );
293
+ @include mat.stepper-overrides(
294
+ (
295
+ container-color: $mat-panel-background-override,
296
+ )
297
+ );
298
+ @include mat.autocomplete-overrides(
299
+ (
300
+ background-color: $mat-panel-background-override,
301
+ )
302
+ );
303
+ @include mat.select-overrides(
304
+ (
305
+ panel-background-color: $mat-panel-background-override,
306
+ )
307
+ );
308
+ @include mat.datepicker-overrides(
309
+ (
310
+ calendar-container-background-color: $mat-panel-background-override,
311
+ )
312
+ );
313
+ @include mat.timepicker-overrides(
314
+ (
315
+ container-background-color: $mat-panel-background-override,
316
+ )
317
+ );
318
+ @include mat.form-field-overrides(
319
+ (
320
+ outlined-focus-label-text-color: theme.$primary-color-dark,
321
+ )
322
+ );
323
+ }
319
324
  }
320
- }
321
325
 
322
- @include icon.render-css-vars();
323
- @include box.render-css-vars();
324
- @include banner.render-css-vars();
325
- @include auth.render-css-vars();
326
- @include header.render-css-vars();
327
- @include co.render-css-vars();
328
- @include flag.render-css-vars();
329
- @include overview.render-css-vars();
330
- @include sidenav.render-css-vars();
331
- @include prism.render-css-vars();
332
- @include logo.render-css-vars();
333
- @include notification.render-css-vars();
326
+ // Pass scope selector into all sub-variable mixins so they render inside the wrapper
327
+ @include icon.render-css-vars($scope-selector);
328
+ @include box.render-css-vars($scope-selector);
329
+ @include banner.render-css-vars($scope-selector);
330
+ @include auth.render-css-vars($scope-selector);
331
+ @include header.render-css-vars($scope-selector);
332
+ @include co.render-css-vars($scope-selector);
333
+ @include flag.render-css-vars($scope-selector);
334
+ @include overview.render-css-vars($scope-selector);
335
+ @include sidenav.render-css-vars($scope-selector);
336
+ @include prism.render-css-vars($scope-selector);
337
+ @include logo.render-css-vars($scope-selector);
338
+ @include notification.render-css-vars($scope-selector);
339
+ }
package/src/css/variation.scss CHANGED
@@ -3,28 +3,33 @@
3
3
  $colors: #71c95b, #ff5252, #a482e7, #48b6b6, #a19180, #23afdd, #e08ba9, #97b0df, #e0ae17, #e46bb2;
4
4
  $colorsDark: #5ca12e, #e04f4f, #866fcf, #399, #837361, #008fb3, #c77a8b, #7d8ebb, #bd8e02, #bd509c;
5
5
 
6
- html > body {
7
- .variation-indicator {
8
- display: flex;
9
- min-width: 8px;
10
- width: 8px;
11
- height: 8px;
12
- border-radius: 50%;
13
- }
14
-
15
- @each $color in $colors {
16
- $index: list.index($colors, $color);
17
- .variation-color-#{$index} {
18
- background-color: $color;
6
+ /// @param {String} $scope-selector
7
+ @mixin apply-variation-theme($scope-selector: ".ng-configcat-publicapi-ui-scope") {
8
+ #{$scope-selector} {
9
+ .variation-indicator {
10
+ display: flex;
11
+ min-width: 8px;
12
+ width: 8px;
13
+ height: 8px;
14
+ border-radius: 50%;
19
15
  }
20
- }
21
16
 
22
- &[data-theme="dark"] {
23
- @each $color in $colorsDark {
24
- $index: list.index($colorsDark, $color);
17
+ @each $color in $colors {
18
+ $index: list.index($colors, $color);
25
19
  .variation-color-#{$index} {
26
20
  background-color: $color;
27
21
  }
28
22
  }
23
+
24
+ &[data-theme="dark"],
25
+ [data-theme="dark"] &,
26
+ & [data-theme="dark"] {
27
+ @each $color in $colorsDark {
28
+ $index: list.index($colorsDark, $color);
29
+ .variation-color-#{$index} {
30
+ background-color: $color;
31
+ }
32
+ }
33
+ }
29
34
  }
30
35
  }
package/src/css/vars/auth.scss CHANGED
@@ -1,12 +1,15 @@
1
- @mixin render-css-vars {
2
- :root {
1
+ /// @param {String} $scope-selector
2
+ @mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
3
+ #{$scope-selector} {
3
4
  --auth-panel-background: white;
4
5
  --auth-panel-border: #dadada;
5
6
  --auth-panel-shadow: drop-shadow(1px 0px 10px lightgrey);
6
7
  --auth-saml-login-error-description: #e7e7e7;
7
8
  --auth-saml-login-error-hint: #f3f2f2;
8
9
 
9
- [data-theme='dark'] {
10
+ &[data-theme="dark"],
11
+ [data-theme="dark"] &,
12
+ & [data-theme="dark"] {
10
13
  --auth-panel-background: #1b1f25;
11
14
  --auth-panel-border: #30363d;
12
15
  --auth-panel-shadow: none;
package/src/css/vars/banner.scss CHANGED
@@ -2,8 +2,9 @@
2
2
  @use "icon";
3
3
  @use "box";
4
4
 
5
- @mixin render-css-vars {
6
- :root {
5
+ /// @param {String} $scope-selector
6
+ @mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
7
+ #{$scope-selector} {
7
8
  --banner-warn-background-color: #{color.adjust(
8
9
  box.$admonition-box-warn-background-color,
9
10
  $alpha: 1,
@@ -19,7 +20,9 @@
19
20
  rgba(64, 61, 222, 1) 100%
20
21
  );
21
22
 
22
- [data-theme="dark"] {
23
+ &[data-theme="dark"],
24
+ [data-theme="dark"] &,
25
+ & [data-theme="dark"] {
23
26
  --banner-warn-background-color: #{color.adjust(
24
27
  box.$admonition-box-warn-background-color-dark,
25
28
  $alpha: 1,