@ilo-org/styles 1.11.4 → 1.12.0

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 (8) hide show
  1. package/css/global.css +1 -1
  2. package/css/global.css.map +1 -1
  3. package/css/index.css +1 -1
  4. package/css/index.css.map +1 -1
  5. package/css/monorepo.css +1 -1
  6. package/css/monorepo.css.map +1 -1
  7. package/package.json +1 -1
  8. package/scss/theme/_foundation.scss +248 -53
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ilo-org/styles",
3
3
  "description": "Styles for products using ILO's Design System",
4
- "version": "1.11.4",
4
+ "version": "1.12.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
package/scss/theme/_foundation.scss CHANGED
@@ -12,54 +12,249 @@
12
12
  --ilo-layout-padding: #{px-to-rem(20px)};
13
13
 
14
14
  /**
15
- * Colors
15
+ * Legacy Colors (aliases pointing to new global colors)
16
16
  */
17
- --ilo-color-white: rgba(255, 255, 255, 1);
18
- --ilo-color-blue: rgba(30, 45, 190, 1);
19
- --ilo-color-blue-lighter: rgba(235, 245, 253, 1);
20
- --ilo-color-blue-light: rgba(190, 220, 250, 1);
21
- --ilo-color-blue-dark: rgba(35, 0, 80, 1);
17
+ --ilo-color-white: var(--ilo-color-neutrals-white);
18
+ --ilo-color-blue: var(--ilo-color-brand-600);
19
+ --ilo-color-blue-lighter: var(--ilo-color-brand-100);
20
+ --ilo-color-blue-light: var(--ilo-color-brand-200);
21
+ --ilo-color-blue-dark: var(--ilo-color-brand-800);
22
22
  --ilo-color-blue-medium: rgba(210, 213, 242, 1);
23
- --ilo-color-blue-ramp: rgba(33, 18, 124, 1);
24
- --ilo-color-blue-dark-ramp: rgba(35, 0, 80, 0.5);
25
- --ilo-color-gray-charcoal: rgba(45, 45, 45, 1);
26
- --ilo-color-gray-accessible: rgba(109, 109, 109, 1);
27
- --ilo-color-gray-light: rgba(237, 240, 242, 1);
23
+ --ilo-color-blue-ramp: var(--ilo-color-brand-700);
24
+ --ilo-color-blue-dark-ramp: var(--ilo-color-brand-800-transparent);
25
+ --ilo-color-gray-charcoal: var(--ilo-color-neutrals-black);
26
+ --ilo-color-gray-accessible: var(--ilo-color-neutrals-700);
27
+ --ilo-color-gray-light: var(--ilo-color-neutrals-200);
28
28
  --ilo-color-gray-light-semi-transparent: rgba(237, 240, 242, 0.25);
29
- --ilo-color-gray-base: rgba(184, 196, 204, 1);
30
- --ilo-color-red: rgba(250, 60, 75, 1);
31
- --ilo-color-red-light: rgba(254, 216, 219, 1);
32
- --ilo-color-red-dark: rgba(200, 48, 60, 1);
33
- --ilo-color-red-ramp: rgba(250, 60, 75, 0.2);
34
- --ilo-color-yellow: rgba(255, 205, 45, 1);
35
- --ilo-color-yellow-light: rgba(255, 245, 200, 1);
36
- --ilo-color-yellow-ramp: rgba(255, 205, 45, 0.2);
37
- --ilo-color-green: rgba(140, 225, 100, 1);
38
- --ilo-color-green-light: rgba(232, 249, 224, 1);
39
- --ilo-color-green-ramp: rgba(140, 225, 100, 0.2);
40
- --ilo-color-turquoise: rgba(5, 210, 210, 1);
41
- --ilo-color-purple: rgba(150, 10, 85, 1);
42
-
43
- /* New colors */
29
+ --ilo-color-gray-base: var(--ilo-color-neutrals-500);
30
+ --ilo-color-red: var(--ilo-color-red-500);
31
+ --ilo-color-red-light: var(--ilo-color-red-100);
32
+ --ilo-color-red-dark: var(--ilo-color-red-600);
33
+ --ilo-color-red-ramp: var(--ilo-color-red-500-transparent);
34
+ --ilo-color-yellow: var(--ilo-color-yellow-400);
35
+ --ilo-color-yellow-light: var(--ilo-color-yellow-100);
36
+ --ilo-color-yellow-ramp: var(--ilo-color-yellow-400-transparent);
37
+ --ilo-color-green: var(--ilo-color-green-400);
38
+ --ilo-color-green-light: var(--ilo-color-green-100);
39
+ --ilo-color-green-ramp: var(--ilo-color-green-400-transparent);
40
+ --ilo-color-turquoise: var(--ilo-color-turquoise-500);
41
+ --ilo-color-purple: var(--ilo-color-purple-600);
42
+
43
+ /**
44
+ * New Global Colors
45
+ */
46
+
47
+ // Brand
44
48
  --ilo-color-brand-800: rgba(35, 0, 80, 1);
49
+ --ilo-color-brand-800-transparent: rgba(35, 0, 80, 0.5);
50
+ --ilo-color-brand-700: rgba(21, 31, 133, 1);
45
51
  --ilo-color-brand-600: rgba(30, 45, 190, 1);
52
+ --ilo-color-brand-600-transparent: rgba(30, 45, 190, 0.4);
53
+ --ilo-color-brand-500: rgba(50, 100, 200, 1);
54
+ --ilo-color-brand-400: rgba(90, 135, 205, 1);
55
+ --ilo-color-brand-300: rgba(130, 175, 220, 1);
56
+ --ilo-color-brand-200: rgba(190, 220, 250, 1);
46
57
  --ilo-color-brand-100: rgba(235, 245, 253, 1);
58
+
59
+ // Neutrals
60
+ --ilo-color-neutrals-black: rgba(45, 45, 45, 1);
61
+ --ilo-color-neutrals-700: rgba(109, 109, 109, 1);
62
+ --ilo-color-neutrals-500: rgba(184, 196, 204, 1);
63
+ --ilo-color-neutrals-200: rgba(237, 240, 242, 1);
64
+ --ilo-color-neutrals-white: rgba(255, 255, 255, 1);
65
+
66
+ // Red
67
+ --ilo-color-red-800: rgba(125, 18, 26, 1);
68
+ --ilo-color-red-700: rgba(150, 36, 45, 1);
69
+ --ilo-color-red-600: rgba(200, 48, 60, 1);
70
+ --ilo-color-red-500: rgba(250, 60, 75, 1);
71
+ --ilo-color-red-500-transparent: rgba(250, 60, 75, 0.2);
72
+ --ilo-color-red-400: rgba(251, 99, 111, 1);
73
+ --ilo-color-red-300: rgba(252, 138, 147, 1);
74
+ --ilo-color-red-200: rgba(253, 177, 183, 1);
75
+ --ilo-color-red-100: rgba(254, 216, 219, 1);
76
+
77
+ // Yellow
78
+ --ilo-color-yellow-800: rgba(165, 104, 3, 1);
79
+ --ilo-color-yellow-700: rgba(215, 135, 0, 1);
80
+ --ilo-color-yellow-600: rgba(228, 148, 40, 1);
47
81
  --ilo-color-yellow-500: rgba(250, 180, 40, 1);
82
+ --ilo-color-yellow-400: rgba(255, 205, 45, 1);
83
+ --ilo-color-yellow-400-transparent: rgba(255, 205, 45, 0.2);
84
+ --ilo-color-yellow-300: rgba(255, 220, 108, 1);
85
+ --ilo-color-yellow-200: rgba(255, 235, 171, 1);
86
+ --ilo-color-yellow-100: rgba(255, 245, 200, 1);
87
+
88
+ // Green
89
+ --ilo-color-green-800: rgba(21, 66, 0, 1);
90
+ --ilo-color-green-700: rgba(56, 90, 40, 1);
91
+ --ilo-color-green-600: rgba(84, 135, 60, 1);
92
+ --ilo-color-green-500: rgba(112, 180, 80, 1);
93
+ --ilo-color-green-400: rgba(140, 225, 100, 1);
94
+ --ilo-color-green-400-transparent: rgba(140, 225, 100, 0.2);
95
+ --ilo-color-green-300: rgba(175, 234, 147, 1);
96
+ --ilo-color-green-200: rgba(209, 243, 193, 1);
97
+ --ilo-color-green-100: rgba(232, 249, 224, 1);
98
+
99
+ // Turquoise
100
+ --ilo-color-turquoise-800: rgba(2, 84, 84, 1);
101
+ --ilo-color-turquoise-700: rgba(4, 147, 147, 1);
102
+ --ilo-color-turquoise-600: rgba(5, 189, 189, 1);
103
+ --ilo-color-turquoise-500: rgba(5, 210, 210, 1);
104
+ --ilo-color-turquoise-400: rgba(105, 228, 228, 1);
105
+ --ilo-color-turquoise-300: rgba(158, 242, 242, 1);
106
+ --ilo-color-turquoise-200: rgba(180, 250, 247, 1);
107
+ --ilo-color-turquoise-100: rgba(210, 251, 251, 1);
108
+
109
+ // Purple
110
+ --ilo-color-purple-800: rgba(95, 0, 55, 1);
111
+ --ilo-color-purple-700: rgba(119, 20, 73, 1);
112
+ --ilo-color-purple-600: rgba(150, 10, 85, 1);
113
+ --ilo-color-purple-500: rgba(171, 59, 119, 1);
114
+ --ilo-color-purple-400: rgba(203, 133, 170, 1);
115
+ --ilo-color-purple-300: rgba(224, 182, 204, 1);
116
+ --ilo-color-purple-200: rgba(240, 210, 224, 1);
117
+ --ilo-color-purple-100: rgba(245, 231, 238, 1);
118
+
119
+ /**
120
+ * Light Semantic Colors
121
+ */
122
+
123
+ // Text
124
+ --ilo-color-light-text-default: var(--ilo-color-neutrals-black);
125
+ --ilo-color-light-text-subtle: var(--ilo-color-neutrals-700);
126
+ --ilo-color-light-text-brand: var(--ilo-color-brand-800);
127
+ --ilo-color-light-text-accent: var(--ilo-color-purple-600);
128
+ --ilo-color-light-text-inverse: var(--ilo-color-neutrals-white);
129
+
130
+ // Action
131
+ --ilo-color-light-action-default: var(--ilo-color-brand-800);
132
+ --ilo-color-light-action-hover: var(--ilo-color-brand-600);
133
+ --ilo-color-light-action-selected: var(--ilo-color-brand-600);
134
+ --ilo-color-light-action-inverse: var(--ilo-color-neutrals-white);
135
+
136
+ // Icon
137
+ --ilo-color-light-icon-default: var(--ilo-color-neutrals-black);
138
+ --ilo-color-light-icon-subtle: var(--ilo-color-neutrals-500);
139
+ --ilo-color-light-icon-accent: var(--ilo-color-purple-600);
140
+ --ilo-color-light-icon-inverse: var(--ilo-color-neutrals-white);
141
+
142
+ // Border
143
+ --ilo-color-light-border-default: var(--ilo-color-neutrals-500);
144
+ --ilo-color-light-border-subtle: var(--ilo-color-neutrals-200);
145
+ --ilo-color-light-border-brand: var(--ilo-color-brand-600);
146
+ --ilo-color-light-border-brand-2: var(--ilo-color-brand-200);
147
+ --ilo-color-light-border-brand-3: var(--ilo-color-brand-800);
148
+ --ilo-color-light-border-brand-4: var(--ilo-color-purple-600);
149
+ --ilo-color-light-border-focus: var(--ilo-color-yellow-400);
150
+ --ilo-color-light-border-inverse: var(--ilo-color-neutrals-white);
151
+
152
+ // Container Background
153
+ --ilo-color-light-container-bg-default: var(--ilo-color-neutrals-white);
154
+ --ilo-color-light-container-bg-subtle: var(--ilo-color-brand-100);
155
+ --ilo-color-light-container-bg-brand: var(--ilo-color-brand-800);
156
+ --ilo-color-light-container-bg-disabled: var(--ilo-color-neutrals-200);
157
+
158
+ // Page Background
159
+ --ilo-color-light-page-bg-default: var(--ilo-color-neutrals-white);
160
+ --ilo-color-light-page-bg-subtle: var(--ilo-color-brand-100);
161
+
162
+ // Supportive Feedback
163
+ --ilo-color-light-feedback-error-dark: var(--ilo-color-red-600);
164
+ --ilo-color-light-feedback-error-default: var(--ilo-color-red-500);
165
+ --ilo-color-light-feedback-error-light: var(--ilo-color-red-100);
166
+ --ilo-color-light-feedback-warning-default: var(--ilo-color-yellow-400);
167
+ --ilo-color-light-feedback-warning-light: var(--ilo-color-yellow-100);
168
+ --ilo-color-light-feedback-success-default: var(--ilo-color-green-400);
169
+ --ilo-color-light-feedback-success-light: var(--ilo-color-green-100);
170
+ --ilo-color-light-feedback-info-default: var(--ilo-color-brand-600);
171
+ --ilo-color-light-feedback-info-light: var(--ilo-color-brand-200);
172
+
173
+ // Generic
174
+ --ilo-color-light-generic-turquoise: var(--ilo-color-turquoise-500);
175
+ --ilo-color-light-generic-purple: var(--ilo-color-purple-600);
176
+ --ilo-color-light-generic-green: var(--ilo-color-green-400);
177
+ --ilo-color-light-generic-yellow: var(--ilo-color-yellow-400);
178
+ --ilo-color-light-generic-ilo-light-blue: var(--ilo-color-brand-100);
179
+
180
+ /**
181
+ * Dark Semantic Colors
182
+ */
183
+
184
+ // Text
185
+ --ilo-color-dark-text-default: var(--ilo-color-neutrals-white);
186
+ --ilo-color-dark-text-subtle: var(--ilo-color-neutrals-200);
187
+ --ilo-color-dark-text-brand: var(--ilo-color-brand-200);
188
+ --ilo-color-dark-text-accent: var(--ilo-color-yellow-400);
189
+ --ilo-color-dark-text-inverse: var(--ilo-color-brand-800);
190
+
191
+ // Action
192
+ --ilo-color-dark-action-default: var(--ilo-color-brand-100);
193
+ --ilo-color-dark-action-hover: var(--ilo-color-brand-200);
194
+ --ilo-color-dark-action-selected: var(--ilo-color-brand-200);
195
+ --ilo-color-dark-action-inverse: var(--ilo-color-brand-800);
196
+
197
+ // Icon
198
+ --ilo-color-dark-icon-default: var(--ilo-color-neutrals-white);
199
+ --ilo-color-dark-icon-subtle: var(--ilo-color-neutrals-700);
200
+ --ilo-color-dark-icon-accent: var(--ilo-color-yellow-400);
201
+ --ilo-color-dark-icon-inverse: var(--ilo-color-brand-800);
202
+
203
+ // Border
204
+ --ilo-color-dark-border-default: var(--ilo-color-neutrals-white);
205
+ --ilo-color-dark-border-subtle: var(--ilo-color-neutrals-700);
206
+ --ilo-color-dark-border-brand: var(--ilo-color-brand-200);
207
+ --ilo-color-dark-border-brand-2: var(--ilo-color-brand-800);
208
+ --ilo-color-dark-border-brand-3: var(--ilo-color-brand-100);
209
+ --ilo-color-dark-border-brand-4: var(--ilo-color-yellow-400);
210
+ --ilo-color-dark-border-focus: var(--ilo-color-yellow-400);
211
+ --ilo-color-dark-border-inverse: var(--ilo-color-brand-800);
212
+
213
+ // Container Background
214
+ --ilo-color-dark-container-bg-default: var(--ilo-color-brand-800);
215
+ --ilo-color-dark-container-bg-subtle: var(--ilo-color-brand-600);
216
+ --ilo-color-dark-container-bg-brand: var(--ilo-color-brand-100);
217
+ --ilo-color-dark-container-bg-disabled: var(--ilo-color-neutrals-black);
218
+
219
+ // Page Background
220
+ --ilo-color-dark-page-bg-default: var(--ilo-color-brand-800);
221
+ --ilo-color-dark-page-bg-subtle: var(--ilo-color-neutrals-black);
222
+
223
+ // Supportive Feedback
224
+ --ilo-color-dark-feedback-error-dark: var(--ilo-color-red-100);
225
+ --ilo-color-dark-feedback-error-default: var(--ilo-color-red-500);
226
+ --ilo-color-dark-feedback-error-light: var(--ilo-color-red-600);
227
+ --ilo-color-dark-feedback-warning-default: var(--ilo-color-yellow-400);
228
+ --ilo-color-dark-feedback-warning-light: var(--ilo-color-yellow-800);
229
+ --ilo-color-dark-feedback-success-default: var(--ilo-color-green-400);
230
+ --ilo-color-dark-feedback-success-light: var(--ilo-color-green-800);
231
+ --ilo-color-dark-feedback-info-default: var(--ilo-color-brand-600);
232
+ --ilo-color-dark-feedback-info-light: var(--ilo-color-brand-800);
233
+
234
+ // Generic
235
+ --ilo-color-dark-generic-turquoise: var(--ilo-color-turquoise-500);
236
+ --ilo-color-dark-generic-purple: var(--ilo-color-purple-600);
237
+ --ilo-color-dark-generic-green: var(--ilo-color-green-400);
238
+ --ilo-color-dark-generic-yellow: var(--ilo-color-yellow-400);
239
+ --ilo-color-dark-generic-ilo-light-blue: var(--ilo-color-brand-200);
240
+
241
+ /**
242
+ * Legacy Semantic Aliases (preserved for backwards compatibility)
243
+ */
244
+ --ilo-color-notification-type-error: var(--ilo-color-red-500);
245
+ --ilo-color-notification-type-info: var(--ilo-color-brand-600);
246
+ --ilo-color-notification-type-success: var(--ilo-color-green-400);
247
+ --ilo-color-notification-type-warning: var(--ilo-color-yellow-400);
248
+ --ilo-color-background-default: var(--ilo-color-neutrals-white);
249
+ --ilo-color-background-active: var(--ilo-color-brand-600);
250
+ --ilo-color-background-highlight: var(--ilo-color-neutrals-200);
251
+ --ilo-color-background-hover: var(--ilo-color-brand-100);
252
+ --ilo-color-background-focus: var(--ilo-color-neutrals-white);
48
253
 
49
- --ilo-color-notification-type-error: var(--ilo-color-red);
50
- --ilo-color-notification-type-info: var(--ilo-color-blue);
51
- --ilo-color-notification-type-success: var(--ilo-color-green);
52
- --ilo-color-notification-type-warning: var(--ilo-color-yellow);
53
- --ilo-color-background-default: var(--ilo-color-white);
54
- --ilo-color-background-active: var(--ilo-color-blue);
55
- --ilo-color-background-highlight: var(--ilo-color-gray-light);
56
- --ilo-color-background-hover: var(--ilo-color-blue-lighter);
57
- --ilo-color-background-focus: var(--ilo-color-white);
58
-
59
- --ilo-color-borders-default: var(--ilo-color-gray-base);
60
- --ilo-color-borders-hover: var(--ilo-color-blue);
61
- --ilo-color-borders-active: var(--ilo-color-blue);
62
- --ilo-color-borders-focus: var(--ilo-color-yellow);
254
+ --ilo-color-borders-default: var(--ilo-color-neutrals-500);
255
+ --ilo-color-borders-hover: var(--ilo-color-brand-600);
256
+ --ilo-color-borders-active: var(--ilo-color-brand-600);
257
+ --ilo-color-borders-focus: var(--ilo-color-yellow-400);
63
258
 
64
259
  /**
65
260
  * Sizing
@@ -134,27 +329,27 @@
134
329
  /**
135
330
  * Links
136
331
  */
137
- --ilo-link-color-default-light: var(--ilo-color-blue-dark);
138
- --ilo-link-color-default-dark: var(--ilo-color-white);
332
+ --ilo-link-color-default-light: var(--ilo-color-brand-800);
333
+ --ilo-link-color-default-dark: var(--ilo-color-neutrals-white);
139
334
 
140
- --ilo-link-color-visited-light: var(--ilo-color-purple);
141
- --ilo-link-color-visited-dark: var(--ilo-color-gray-base);
335
+ --ilo-link-color-visited-light: var(--ilo-color-purple-600);
336
+ --ilo-link-color-visited-dark: var(--ilo-color-neutrals-500);
142
337
 
143
- --ilo-link-color-hover-light: var(--ilo-color-blue);
144
- --ilo-link-color-hover-dark: var(--ilo-color-blue);
338
+ --ilo-link-color-hover-light: var(--ilo-color-brand-600);
339
+ --ilo-link-color-hover-dark: var(--ilo-color-brand-600);
145
340
 
146
- --ilo-link-color-active-light: var(--ilo-color-blue-dark);
147
- --ilo-link-color-active-dark: var(--ilo-color-blue-dark);
341
+ --ilo-link-color-active-light: var(--ilo-color-brand-800);
342
+ --ilo-link-color-active-dark: var(--ilo-color-brand-800);
148
343
 
149
- --ilo-link-color-focus-light: var(--ilo-color-blue-dark);
150
- --ilo-link-color-focus-dark: var(--ilo-color-blue-dark);
344
+ --ilo-link-color-focus-light: var(--ilo-color-brand-800);
345
+ --ilo-link-color-focus-dark: var(--ilo-color-brand-800);
151
346
 
152
347
  --ilo-link-background-default-light: transparent;
153
348
  --ilo-link-background-default-dark: transparent;
154
349
 
155
350
  --ilo-link-background-hover-light: transparent;
156
- --ilo-link-background-hover-dark: var(--ilo-color-white);
351
+ --ilo-link-background-hover-dark: var(--ilo-color-neutrals-white);
157
352
 
158
- --ilo-link-background-focus-light: var(--ilo-color-yellow);
159
- --ilo-link-background-focus-dark: var(--ilo-color-yellow);
353
+ --ilo-link-background-focus-light: var(--ilo-color-yellow-400);
354
+ --ilo-link-background-focus-dark: var(--ilo-color-yellow-400);
160
355
  }