@igo2/sdg-theme 2.0.0-next.10
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.
- package/README.md +97 -0
- package/_index.scss +35 -0
- package/fesm2022/igo2-sdg-theme.mjs +13 -0
- package/fesm2022/igo2-sdg-theme.mjs.map +1 -0
- package/package.json +34 -0
- package/src/igo2-lib/_index.scss +9 -0
- package/src/igo2-lib/_list.scss +22 -0
- package/src/igo2-lib/_panel.scss +7 -0
- package/src/igo2-lib/_search-bar.scss +72 -0
- package/src/material/_button.scss +137 -0
- package/src/material/_checkbox.scss +120 -0
- package/src/material/_chip.scss +122 -0
- package/src/material/_dialog.scss +37 -0
- package/src/material/_divider.scss +11 -0
- package/src/material/_expansion-panel.scss +62 -0
- package/src/material/_form-field.scss +140 -0
- package/src/material/_icon.scss +34 -0
- package/src/material/_index.scss +35 -0
- package/src/material/_radio-button.scss +124 -0
- package/src/material/_select.scss +74 -0
- package/src/material/_sidenav.scss +9 -0
- package/src/material/_tab.scss +95 -0
- package/src/material/_theme.scss +225 -0
- package/types/igo2-sdg-theme.d.ts +6 -0
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@use 'sass:map';
|
|
3
|
+
@use 'sass:color';
|
|
4
|
+
@use '@igo2/sdg-core' as sdg-core;
|
|
5
|
+
|
|
6
|
+
// This file was generated by running 'ng generate @angular/material:theme-color'.
|
|
7
|
+
// Proceed with caution if making changes to this file.
|
|
8
|
+
// Note: Color palettes are generated from primary: #095797, error: #bb3a23
|
|
9
|
+
// But was adjusted manually to fit the _sys_palette.scss files
|
|
10
|
+
$_palettes: (
|
|
11
|
+
primary: (
|
|
12
|
+
0: #000000,
|
|
13
|
+
10: map.get(sdg-core.$palettes, 'blue', 800),
|
|
14
|
+
20: map.get(sdg-core.$palettes, 'blue', 700),
|
|
15
|
+
25: color.adjust(map.get(sdg-core.$palettes, 'blue', 700), $lightness: 1%),
|
|
16
|
+
30: color.adjust(map.get(sdg-core.$palettes, 'blue', 700), $lightness: 2%),
|
|
17
|
+
35: map.get(sdg-core.$palettes, 'blue', 650),
|
|
18
|
+
// Button background
|
|
19
|
+
40: map.get(sdg-core.$palettes, 'blue', 600),
|
|
20
|
+
50: map.get(sdg-core.$palettes, 'blue', 550),
|
|
21
|
+
60: map.get(sdg-core.$palettes, 'blue', 500),
|
|
22
|
+
70: map.get(sdg-core.$palettes, 'blue', 400),
|
|
23
|
+
80: map.get(sdg-core.$palettes, 'blue', 350),
|
|
24
|
+
90: map.get(sdg-core.$palettes, 'blue', 300),
|
|
25
|
+
95: map.get(sdg-core.$palettes, 'blue', 200),
|
|
26
|
+
98: map.get(sdg-core.$palettes, 'blue', 150),
|
|
27
|
+
99: map.get(sdg-core.$palettes, 'blue', 100),
|
|
28
|
+
100: #ffffff
|
|
29
|
+
),
|
|
30
|
+
secondary: (
|
|
31
|
+
0: #000000,
|
|
32
|
+
10: #061c34,
|
|
33
|
+
20: #1d314a,
|
|
34
|
+
25: #293d56,
|
|
35
|
+
30: #344861,
|
|
36
|
+
35: #40546e,
|
|
37
|
+
40: #4c607a,
|
|
38
|
+
50: #657894,
|
|
39
|
+
60: #7e92af,
|
|
40
|
+
70: #99adca,
|
|
41
|
+
80: #b4c8e7,
|
|
42
|
+
90: #d3e4ff,
|
|
43
|
+
95: #eaf1ff,
|
|
44
|
+
98: #ffffff,
|
|
45
|
+
99: #ffffff,
|
|
46
|
+
100: #ffffff
|
|
47
|
+
),
|
|
48
|
+
neutral: (
|
|
49
|
+
0: #000000,
|
|
50
|
+
10: #191c20,
|
|
51
|
+
20: #2e3035,
|
|
52
|
+
25: #393b40,
|
|
53
|
+
30: #44474c,
|
|
54
|
+
35: #505257,
|
|
55
|
+
40: #5c5e63,
|
|
56
|
+
50: #75777c,
|
|
57
|
+
60: #8f9196,
|
|
58
|
+
70: #a9abb1,
|
|
59
|
+
80: #c5c6cc,
|
|
60
|
+
90: #e1e2e8,
|
|
61
|
+
95: #f0f0f6,
|
|
62
|
+
98: #ffffff,
|
|
63
|
+
99: #ffffff,
|
|
64
|
+
100: #ffffff,
|
|
65
|
+
4: #0c0e12,
|
|
66
|
+
6: #111418,
|
|
67
|
+
12: #1d2024,
|
|
68
|
+
17: #272a2f,
|
|
69
|
+
22: #323539,
|
|
70
|
+
24: #37393e,
|
|
71
|
+
87: #d9dae0,
|
|
72
|
+
92: #e7e8ee,
|
|
73
|
+
94: #ededf4,
|
|
74
|
+
96: #f2f3f9
|
|
75
|
+
),
|
|
76
|
+
neutral-variant: (
|
|
77
|
+
0: #000000,
|
|
78
|
+
10: #161c24,
|
|
79
|
+
20: #2b3139,
|
|
80
|
+
25: #363c45,
|
|
81
|
+
30: #414750,
|
|
82
|
+
35: #4d535c,
|
|
83
|
+
40: #595f68,
|
|
84
|
+
50: #727781,
|
|
85
|
+
60: #8b919b,
|
|
86
|
+
70: #a6abb6,
|
|
87
|
+
80: #c1c7d2,
|
|
88
|
+
90: #dee3ee,
|
|
89
|
+
95: #ecf1fc,
|
|
90
|
+
98: #ffffff,
|
|
91
|
+
99: #ffffff,
|
|
92
|
+
100: #ffffff
|
|
93
|
+
),
|
|
94
|
+
error: (
|
|
95
|
+
0: #000000,
|
|
96
|
+
10: map.get(sdg-core.$palettes, 'red', 800),
|
|
97
|
+
20: color.adjust(map.get(sdg-core.$palettes, 'red', 800), $lightness: 2%),
|
|
98
|
+
25: map.get(sdg-core.$palettes, 'red', 700),
|
|
99
|
+
30: color.adjust(map.get(sdg-core.$palettes, 'red', 700), $lightness: 2%),
|
|
100
|
+
35: map.get(sdg-core.$palettes, 'red', 550),
|
|
101
|
+
40: color.adjust(map.get(sdg-core.$palettes, 'red', 550), $lightness: 2%),
|
|
102
|
+
50: map.get(sdg-core.$palettes, 'red', 500),
|
|
103
|
+
60: map.get(sdg-core.$palettes, 'red', 400),
|
|
104
|
+
70: map.get(sdg-core.$palettes, 'red', 300),
|
|
105
|
+
80: map.get(sdg-core.$palettes, 'red', 200),
|
|
106
|
+
90: map.get(sdg-core.$palettes, 'red', 50),
|
|
107
|
+
95: #ffede9,
|
|
108
|
+
98: #fff8f6,
|
|
109
|
+
99: #fffbff,
|
|
110
|
+
100: #ffffff
|
|
111
|
+
)
|
|
112
|
+
);
|
|
113
|
+
|
|
114
|
+
$_rest: (
|
|
115
|
+
secondary: map.get($_palettes, secondary),
|
|
116
|
+
neutral: map.get($_palettes, neutral),
|
|
117
|
+
neutral-variant: map.get($_palettes, neutral-variant),
|
|
118
|
+
error: map.get($_palettes, error)
|
|
119
|
+
);
|
|
120
|
+
|
|
121
|
+
$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
|
|
122
|
+
|
|
123
|
+
@function _high-contrast-value($light, $dark, $theme-type) {
|
|
124
|
+
@if ($theme-type == light) {
|
|
125
|
+
@return $light;
|
|
126
|
+
}
|
|
127
|
+
@if ($theme-type == dark) {
|
|
128
|
+
@return $dark;
|
|
129
|
+
}
|
|
130
|
+
@if ($theme-type == color-scheme) {
|
|
131
|
+
@return light-dark(#{$light}, #{$dark});
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme';
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@mixin high-contrast-overrides($theme-type) {
|
|
138
|
+
@include mat.theme-overrides(
|
|
139
|
+
(
|
|
140
|
+
primary: _high-contrast-value(#002d54, #e9f0ff, $theme-type),
|
|
141
|
+
on-primary: _high-contrast-value(#ffffff, #000000, $theme-type),
|
|
142
|
+
primary-container: _high-contrast-value(#004b85, #9ac5ff, $theme-type),
|
|
143
|
+
on-primary-container: _high-contrast-value(#ffffff, #000c1c, $theme-type),
|
|
144
|
+
inverse-primary: _high-contrast-value(#a2c9ff, #004982, $theme-type),
|
|
145
|
+
primary-fixed: _high-contrast-value(#004b85, #d3e4ff, $theme-type),
|
|
146
|
+
primary-fixed-dim: _high-contrast-value(#00345f, #a2c9ff, $theme-type),
|
|
147
|
+
on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
|
|
148
|
+
on-primary-fixed-variant: _high-contrast-value(
|
|
149
|
+
#ffffff,
|
|
150
|
+
#001226,
|
|
151
|
+
$theme-type
|
|
152
|
+
),
|
|
153
|
+
secondary: _high-contrast-value(#192d45, #e9f0ff, $theme-type),
|
|
154
|
+
on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type),
|
|
155
|
+
secondary-container: _high-contrast-value(#374a64, #b0c4e3, $theme-type),
|
|
156
|
+
on-secondary-container: _high-contrast-value(
|
|
157
|
+
#ffffff,
|
|
158
|
+
#000c1c,
|
|
159
|
+
$theme-type
|
|
160
|
+
),
|
|
161
|
+
secondary-fixed: _high-contrast-value(#374a64, #d3e4ff, $theme-type),
|
|
162
|
+
secondary-fixed-dim: _high-contrast-value(#20344c, #b4c8e7, $theme-type),
|
|
163
|
+
on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
|
|
164
|
+
on-secondary-fixed-variant: _high-contrast-value(
|
|
165
|
+
#ffffff,
|
|
166
|
+
#001226,
|
|
167
|
+
$theme-type
|
|
168
|
+
),
|
|
169
|
+
tertiary: _high-contrast-value(#46135a, #feeaff, $theme-type),
|
|
170
|
+
on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type),
|
|
171
|
+
tertiary-container: _high-contrast-value(#67337a, #eaadfd, $theme-type),
|
|
172
|
+
on-tertiary-container: _high-contrast-value(#ffffff, #190025, $theme-type),
|
|
173
|
+
tertiary-fixed: _high-contrast-value(#67337a, #f9d8ff, $theme-type),
|
|
174
|
+
tertiary-fixed-dim: _high-contrast-value(#4e1b61, #edb1ff, $theme-type),
|
|
175
|
+
on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type),
|
|
176
|
+
on-tertiary-fixed-variant: _high-contrast-value(
|
|
177
|
+
#ffffff,
|
|
178
|
+
#220031,
|
|
179
|
+
$theme-type
|
|
180
|
+
),
|
|
181
|
+
background: _high-contrast-value(#f8f9ff, #111418, $theme-type),
|
|
182
|
+
on-background: _high-contrast-value(#191c20, #e1e2e8, $theme-type),
|
|
183
|
+
surface: _high-contrast-value(#f8f9ff, #111418, $theme-type),
|
|
184
|
+
surface-dim: _high-contrast-value(#b7b8be, #111418, $theme-type),
|
|
185
|
+
surface-bright: _high-contrast-value(#f8f9ff, #4e5055, $theme-type),
|
|
186
|
+
surface-container-low: _high-contrast-value(#f0f0f6, #1d2024, $theme-type),
|
|
187
|
+
surface-container-lowest: _high-contrast-value(
|
|
188
|
+
#ffffff,
|
|
189
|
+
#000000,
|
|
190
|
+
$theme-type
|
|
191
|
+
),
|
|
192
|
+
surface-container: _high-contrast-value(#e1e2e8, #2e3035, $theme-type),
|
|
193
|
+
surface-container-high: _high-contrast-value(
|
|
194
|
+
#d3d4da,
|
|
195
|
+
#393b40,
|
|
196
|
+
$theme-type
|
|
197
|
+
),
|
|
198
|
+
surface-container-highest: _high-contrast-value(
|
|
199
|
+
#c5c6cc,
|
|
200
|
+
#44474c,
|
|
201
|
+
$theme-type
|
|
202
|
+
),
|
|
203
|
+
on-surface: _high-contrast-value(#000000, #ffffff, $theme-type),
|
|
204
|
+
shadow: _high-contrast-value(#000000, #000000, $theme-type),
|
|
205
|
+
scrim: _high-contrast-value(#000000, #000000, $theme-type),
|
|
206
|
+
surface-tint: _high-contrast-value(#1c60a1, #a2c9ff, $theme-type),
|
|
207
|
+
inverse-surface: _high-contrast-value(#2e3035, #e1e2e8, $theme-type),
|
|
208
|
+
inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type),
|
|
209
|
+
outline: _high-contrast-value(#272c35, #ebf0fc, $theme-type),
|
|
210
|
+
outline-variant: _high-contrast-value(#444953, #bec3ce, $theme-type),
|
|
211
|
+
error: _high-contrast-value(#5d0900, #ffece8, $theme-type),
|
|
212
|
+
on-error: _high-contrast-value(#ffffff, #000000, $theme-type),
|
|
213
|
+
error-container: _high-contrast-value(#901a06, #ffaf9e, $theme-type),
|
|
214
|
+
on-error-container: _high-contrast-value(#ffffff, #200100, $theme-type),
|
|
215
|
+
surface-variant: _high-contrast-value(#dee3ee, #414750, $theme-type),
|
|
216
|
+
on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type)
|
|
217
|
+
)
|
|
218
|
+
);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
$theme: (
|
|
222
|
+
color: $primary-palette,
|
|
223
|
+
typography: var(--sdg-font-family-text),
|
|
224
|
+
density: 0
|
|
225
|
+
);
|