@design-factory/design-factory 20.0.0-next.1 → 20.0.0-next.2

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 (67) hide show
  1. package/design-factory-initial-branding.css +1 -1
  2. package/design-factory-initial-branding.scss +1 -1
  3. package/design-factory.css +2 -2
  4. package/fesm2022/design-factory-design-factory-tokens-style-dictionary.mjs +358 -0
  5. package/fesm2022/design-factory-design-factory-tokens-style-dictionary.mjs.map +1 -0
  6. package/fesm2022/design-factory.mjs +327 -417
  7. package/fesm2022/design-factory.mjs.map +1 -1
  8. package/index.d.ts +10 -50
  9. package/package.json +14 -2
  10. package/schematics/migrations/15_0_0/remove-ngx-slider/index.js +11 -5
  11. package/schematics/migrations/16_0_0/revert-to-old-brand/index.js +2 -2
  12. package/schematics/migrations/20_0_0/colors-new-branding/index.d.ts +14 -0
  13. package/schematics/migrations/20_0_0/colors-new-branding/index.js +108 -0
  14. package/schematics/migrations/20_0_0/navbar-toggler-logo-svg/index.js +6 -5
  15. package/schematics/migrations/20_0_0/spinner-new-branding/index.d.ts +7 -0
  16. package/schematics/migrations/20_0_0/spinner-new-branding/index.js +41 -0
  17. package/schematics/migrations/helpers.js +1 -1
  18. package/schematics/migrations/migration.json +12 -0
  19. package/schematics/migrations/utils/component-resource-collector.js +2 -2
  20. package/schematics/migrations/utils/project_tsconfig_paths.js +4 -0
  21. package/schematics/migrations/utils/style-updater.js +3 -1
  22. package/schematics/migrations/utils/template-updater.js +3 -1
  23. package/schematics/migrations/utils/typescript/compiler_host.js +6 -4
  24. package/schematics/ng-add/index.js +3 -6
  25. package/styles/scss/_common.root.scss +20 -3
  26. package/styles/scss/_common.scss +1 -1
  27. package/styles/scss/bootstrap/_utilities-override.scss +14 -8
  28. package/styles/scss/bootstrap/_variables.scss +2 -2
  29. package/styles/scss/components/alert/_alert.scss +23 -11
  30. package/styles/scss/components/badge/_badge.mixins.scss +2 -4
  31. package/styles/scss/components/badge/_badge.scss +87 -23
  32. package/styles/scss/components/button/_button.scss +382 -75
  33. package/styles/scss/components/button/_button.utils.scss +20 -1
  34. package/styles/scss/components/button/_button_container.scss +22 -5
  35. package/styles/scss/components/card/_card.scss +28 -10
  36. package/styles/scss/components/checkbox/_checkbox.scss +2 -1
  37. package/styles/scss/components/dropdown/_dropdown.scss +17 -0
  38. package/styles/scss/components/fonts/_font-faces.mixins.scss +108 -54
  39. package/styles/scss/components/inputs/_inputs.root.scss +1 -1
  40. package/styles/scss/components/inputs/_inputs.scss +7 -1
  41. package/styles/scss/components/link/_link.mixins.scss +7 -3
  42. package/styles/scss/components/link/_link.scss +6 -0
  43. package/styles/scss/components/media/_media.scss +4 -0
  44. package/styles/scss/components/media/_media.variables.scss +1 -0
  45. package/styles/scss/components/modal/_modal.scss +38 -11
  46. package/styles/scss/components/navbar/_navbar.scss +12 -0
  47. package/styles/scss/components/pagination/_pagination_container.scss +1 -1
  48. package/styles/scss/components/progressbar/_progressbar.variables.scss +13 -4
  49. package/styles/scss/components/rating/_rating.scss +3 -3
  50. package/styles/scss/components/rating/_rating.variables.scss +1 -1
  51. package/styles/scss/components/select/_select.scss +14 -19
  52. package/styles/scss/components/separator/_separator.variables.scss +1 -1
  53. package/styles/scss/components/sidenav/_sidenav.scss +1 -1
  54. package/styles/scss/components/sidenav/_sidenav.variables.scss +6 -4
  55. package/styles/scss/components/spinner/_spinner.scss +14 -0
  56. package/styles/scss/components/spinner/_spinner.variables.scss +7 -4
  57. package/styles/scss/components/tabs/_tabs.scss +3 -0
  58. package/styles/scss/components/toast/_toast.scss +21 -30
  59. package/styles/scss/components/tooltip/_tooltip_container.scss +17 -13
  60. package/styles/scss/themes/brand2023/_variables.scss +50 -26
  61. package/styles/scss/themes/brand2023/tokens/_mapping.gen.scss +156 -186
  62. package/styles/scss/themes/brand2023/tokens/_root.gen.scss +1708 -0
  63. package/styles/scss/themes/brand2023/tokens/_sass-vars.gen.scss +1467 -0
  64. package/styles/scss/utilities/_common.utilities.scss +3 -10
  65. package/styles/scss/utilities/_rgb.scss +10 -0
  66. package/tokens/style-dictionary/index.d.ts +60 -0
  67. package/styles/scss/themes/brand2023/tokens/_figma.gen.scss +0 -3028
package/styles/scss/components/fonts/_font-faces.mixins.scss CHANGED
@@ -26,7 +26,8 @@
26
26
  @mixin df-fonts-multi-lang-font-faces-source-sans-pro-full() {
27
27
  @font-face {
28
28
  font-family: 'Source Sans Pro Full';
29
- src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-light.woff2') format('woff2'),
29
+ src:
30
+ url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-light.woff2') format('woff2'),
30
31
  url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-light.woff') format('woff');
31
32
  font-weight: 300;
32
33
  font-style: normal;
@@ -34,7 +35,8 @@
34
35
  }
35
36
  @font-face {
36
37
  font-family: 'Source Sans Pro Full';
37
- src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-lightitalic.woff2') format('woff2'),
38
+ src:
39
+ url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-lightitalic.woff2') format('woff2'),
38
40
  url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-lightitalic.woff') format('woff');
39
41
  font-weight: 300;
40
42
  font-style: italic;
@@ -42,7 +44,8 @@
42
44
  }
43
45
  @font-face {
44
46
  font-family: 'Source Sans Pro Full';
45
- src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-regular.woff2') format('woff2'),
47
+ src:
48
+ url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-regular.woff2') format('woff2'),
46
49
  url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-regular.woff') format('woff');
47
50
  font-weight: normal;
48
51
  font-style: normal;
@@ -50,7 +53,8 @@
50
53
  }
51
54
  @font-face {
52
55
  font-family: 'Source Sans Pro Full';
53
- src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-italic.woff2') format('woff2'),
56
+ src:
57
+ url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-italic.woff2') format('woff2'),
54
58
  url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-italic.woff') format('woff');
55
59
  font-weight: normal;
56
60
  font-style: italic;
@@ -58,7 +62,8 @@
58
62
  }
59
63
  @font-face {
60
64
  font-family: 'Source Sans Pro Full';
61
- src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bold.woff2') format('woff2'),
65
+ src:
66
+ url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bold.woff2') format('woff2'),
62
67
  url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bold.woff') format('woff');
63
68
  font-weight: bold;
64
69
  font-style: normal;
@@ -66,7 +71,8 @@
66
71
  }
67
72
  @font-face {
68
73
  font-family: 'Source Sans Pro Full';
69
- src: url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bolditalic.woff2') format('woff2'),
74
+ src:
75
+ url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bolditalic.woff2') format('woff2'),
70
76
  url('#{$font-path}/source-sans-pro-full/sourcesanspro-full-bolditalic.woff') format('woff');
71
77
  font-weight: bold;
72
78
  font-style: italic;
@@ -77,7 +83,8 @@
77
83
  @mixin df-fonts-multi-lang-font-faces-amadeus-full() {
78
84
  @font-face {
79
85
  font-family: 'Amadeus Full';
80
- src: url('#{$font-path}/amadeus-full/amadeus-full-thin.woff2') format('woff2'),
86
+ src:
87
+ url('#{$font-path}/amadeus-full/amadeus-full-thin.woff2') format('woff2'),
81
88
  url('#{$font-path}/amadeus-full/amadeus-full-thin.woff') format('woff');
82
89
  font-weight: 100;
83
90
  font-style: normal;
@@ -85,7 +92,8 @@
85
92
  }
86
93
  @font-face {
87
94
  font-family: 'Amadeus Full';
88
- src: url('#{$font-path}/amadeus-full/amadeus-full-thinitalic.woff2') format('woff2'),
95
+ src:
96
+ url('#{$font-path}/amadeus-full/amadeus-full-thinitalic.woff2') format('woff2'),
89
97
  url('#{$font-path}/amadeus-full/amadeus-full-thinitalic.woff') format('woff');
90
98
  font-weight: 100;
91
99
  font-style: italic;
@@ -93,7 +101,8 @@
93
101
  }
94
102
  @font-face {
95
103
  font-family: 'Amadeus Full';
96
- src: url('#{$font-path}/amadeus-full/amadeus-full-light.woff2') format('woff2'),
104
+ src:
105
+ url('#{$font-path}/amadeus-full/amadeus-full-light.woff2') format('woff2'),
97
106
  url('#{$font-path}/amadeus-full/amadeus-full-light.woff') format('woff');
98
107
  font-weight: 300;
99
108
  font-style: normal;
@@ -101,7 +110,8 @@
101
110
  }
102
111
  @font-face {
103
112
  font-family: 'Amadeus Full';
104
- src: url('#{$font-path}/amadeus-full/amadeus-full-lightitalic.woff2') format('woff2'),
113
+ src:
114
+ url('#{$font-path}/amadeus-full/amadeus-full-lightitalic.woff2') format('woff2'),
105
115
  url('#{$font-path}/amadeus-full/amadeus-full-lightitalic.woff') format('woff');
106
116
  font-weight: 300;
107
117
  font-style: italic;
@@ -109,7 +119,8 @@
109
119
  }
110
120
  @font-face {
111
121
  font-family: 'Amadeus Full';
112
- src: url('#{$font-path}/amadeus-full/amadeus-full-regular.woff2') format('woff2'),
122
+ src:
123
+ url('#{$font-path}/amadeus-full/amadeus-full-regular.woff2') format('woff2'),
113
124
  url('#{$font-path}/amadeus-full/amadeus-full-regular.woff') format('woff');
114
125
  font-weight: normal;
115
126
  font-style: normal;
@@ -117,7 +128,8 @@
117
128
  }
118
129
  @font-face {
119
130
  font-family: 'Amadeus Full';
120
- src: url('#{$font-path}/amadeus-full/amadeus-full-italic.woff2') format('woff2'),
131
+ src:
132
+ url('#{$font-path}/amadeus-full/amadeus-full-italic.woff2') format('woff2'),
121
133
  url('#{$font-path}/amadeus-full/amadeus-full-italic.woff') format('woff');
122
134
  font-weight: normal;
123
135
  font-style: italic;
@@ -125,7 +137,8 @@
125
137
  }
126
138
  @font-face {
127
139
  font-family: 'Amadeus Full';
128
- src: url('#{$font-path}/amadeus-full/amadeus-full-bold.woff2') format('woff2'),
140
+ src:
141
+ url('#{$font-path}/amadeus-full/amadeus-full-bold.woff2') format('woff2'),
129
142
  url('#{$font-path}/amadeus-full/amadeus-full-bold.woff') format('woff');
130
143
  font-weight: bold;
131
144
  font-style: normal;
@@ -133,7 +146,8 @@
133
146
  }
134
147
  @font-face {
135
148
  font-family: 'Amadeus Full';
136
- src: url('#{$font-path}/amadeus-full/amadeus-full-bolditalic.woff2') format('woff2'),
149
+ src:
150
+ url('#{$font-path}/amadeus-full/amadeus-full-bolditalic.woff2') format('woff2'),
137
151
  url('#{$font-path}/amadeus-full/amadeus-full-bolditalic.woff') format('woff');
138
152
  font-weight: bold;
139
153
  font-style: italic;
@@ -144,7 +158,8 @@
144
158
  @mixin df-fonts-multi-lang-font-faces-noto-sans() {
145
159
  @font-face {
146
160
  font-family: 'Noto Sans';
147
- src: url('#{$font-path}/noto/notosans-thin.woff2') format('woff2'),
161
+ src:
162
+ url('#{$font-path}/noto/notosans-thin.woff2') format('woff2'),
148
163
  url('#{$font-path}/noto/notosans-thin.woff') format('woff');
149
164
  font-weight: 100;
150
165
  font-style: normal;
@@ -152,7 +167,8 @@
152
167
  }
153
168
  @font-face {
154
169
  font-family: 'Noto Sans';
155
- src: url('#{$font-path}/noto/notosans-thinitalic.woff2') format('woff2'),
170
+ src:
171
+ url('#{$font-path}/noto/notosans-thinitalic.woff2') format('woff2'),
156
172
  url('#{$font-path}/noto/notosans-thinitalic.woff') format('woff');
157
173
  font-weight: 100;
158
174
  font-style: italic;
@@ -160,7 +176,8 @@
160
176
  }
161
177
  @font-face {
162
178
  font-family: 'Noto Sans';
163
- src: url('#{$font-path}/noto/notosans-light.woff2') format('woff2'),
179
+ src:
180
+ url('#{$font-path}/noto/notosans-light.woff2') format('woff2'),
164
181
  url('#{$font-path}/noto/notosans-light.woff') format('woff');
165
182
  font-weight: 300;
166
183
  font-style: normal;
@@ -168,7 +185,8 @@
168
185
  }
169
186
  @font-face {
170
187
  font-family: 'Noto Sans';
171
- src: url('#{$font-path}/noto/notosans-lightitalic.woff2') format('woff2'),
188
+ src:
189
+ url('#{$font-path}/noto/notosans-lightitalic.woff2') format('woff2'),
172
190
  url('#{$font-path}/noto/notosans-lightitalic.woff') format('woff');
173
191
  font-weight: 300;
174
192
  font-style: italic;
@@ -176,7 +194,8 @@
176
194
  }
177
195
  @font-face {
178
196
  font-family: 'Noto Sans';
179
- src: url('#{$font-path}/noto/notosans-regular.woff2') format('woff2'),
197
+ src:
198
+ url('#{$font-path}/noto/notosans-regular.woff2') format('woff2'),
180
199
  url('#{$font-path}/noto/notosans-regular.woff') format('woff');
181
200
  font-weight: normal;
182
201
  font-style: normal;
@@ -184,7 +203,8 @@
184
203
  }
185
204
  @font-face {
186
205
  font-family: 'Noto Sans';
187
- src: url('#{$font-path}/noto/notosans-italic.woff2') format('woff2'),
206
+ src:
207
+ url('#{$font-path}/noto/notosans-italic.woff2') format('woff2'),
188
208
  url('#{$font-path}/noto/notosans-italic.woff') format('woff');
189
209
  font-weight: normal;
190
210
  font-style: italic;
@@ -192,7 +212,8 @@
192
212
  }
193
213
  @font-face {
194
214
  font-family: 'Noto Sans';
195
- src: url('#{$font-path}/noto/notosans-bold.woff2') format('woff2'),
215
+ src:
216
+ url('#{$font-path}/noto/notosans-bold.woff2') format('woff2'),
196
217
  url('#{$font-path}/noto/notosans-bold.woff') format('woff');
197
218
  font-weight: bold;
198
219
  font-style: normal;
@@ -200,7 +221,8 @@
200
221
  }
201
222
  @font-face {
202
223
  font-family: 'Noto Sans';
203
- src: url('#{$font-path}/noto/notosans-bolditalic.woff2') format('woff2'),
224
+ src:
225
+ url('#{$font-path}/noto/notosans-bolditalic.woff2') format('woff2'),
204
226
  url('#{$font-path}/noto/notosans-bolditalic.woff') format('woff');
205
227
  font-weight: bold;
206
228
  font-style: italic;
@@ -211,7 +233,8 @@
211
233
  @mixin df-fonts-multi-lang-font-faces-noto-sans-hebrew() {
212
234
  @font-face {
213
235
  font-family: 'Noto Sans';
214
- src: url('#{$font-path}/noto/notosanshebrew-thin.woff2') format('woff2'),
236
+ src:
237
+ url('#{$font-path}/noto/notosanshebrew-thin.woff2') format('woff2'),
215
238
  url('#{$font-path}/noto/notosanshebrew-thin.woff') format('woff');
216
239
  font-weight: 100;
217
240
  font-style: normal;
@@ -220,7 +243,8 @@
220
243
  }
221
244
  @font-face {
222
245
  font-family: 'Noto Sans';
223
- src: url('#{$font-path}/noto/notosanshebrew-light.woff2') format('woff2'),
246
+ src:
247
+ url('#{$font-path}/noto/notosanshebrew-light.woff2') format('woff2'),
224
248
  url('#{$font-path}/noto/notosanshebrew-light.woff') format('woff');
225
249
  font-weight: 300;
226
250
  font-style: normal;
@@ -229,7 +253,8 @@
229
253
  }
230
254
  @font-face {
231
255
  font-family: 'Noto Sans';
232
- src: url('#{$font-path}/noto/notosanshebrew-regular.woff2') format('woff2'),
256
+ src:
257
+ url('#{$font-path}/noto/notosanshebrew-regular.woff2') format('woff2'),
233
258
  url('#{$font-path}/noto/notosanshebrew-regular.woff') format('woff');
234
259
  font-weight: normal;
235
260
  font-style: normal;
@@ -239,7 +264,8 @@
239
264
 
240
265
  @font-face {
241
266
  font-family: 'Noto Sans';
242
- src: url('#{$font-path}/noto/notosanshebrew-bold.woff2') format('woff2'),
267
+ src:
268
+ url('#{$font-path}/noto/notosanshebrew-bold.woff2') format('woff2'),
243
269
  url('#{$font-path}/noto/notosanshebrew-bold.woff') format('woff');
244
270
  font-weight: bold;
245
271
  font-style: normal;
@@ -249,7 +275,8 @@
249
275
 
250
276
  @font-face {
251
277
  font-family: 'Noto Sans';
252
- src: url('#{$font-path}/noto/notosanshebrew-thin.woff2') format('woff2'),
278
+ src:
279
+ url('#{$font-path}/noto/notosanshebrew-thin.woff2') format('woff2'),
253
280
  url('#{$font-path}/noto/notosanshebrew-thin.woff') format('woff');
254
281
  font-weight: 100;
255
282
  font-style: italic;
@@ -259,7 +286,8 @@
259
286
 
260
287
  @font-face {
261
288
  font-family: 'Noto Sans';
262
- src: url('#{$font-path}/noto/notosanshebrew-light.woff2') format('woff2'),
289
+ src:
290
+ url('#{$font-path}/noto/notosanshebrew-light.woff2') format('woff2'),
263
291
  url('#{$font-path}/noto/notosanshebrew-light.woff') format('woff');
264
292
  font-weight: 300;
265
293
  font-style: italic;
@@ -269,7 +297,8 @@
269
297
 
270
298
  @font-face {
271
299
  font-family: 'Noto Sans';
272
- src: url('#{$font-path}/noto/notosanshebrew-regular.woff2') format('woff2'),
300
+ src:
301
+ url('#{$font-path}/noto/notosanshebrew-regular.woff2') format('woff2'),
273
302
  url('#{$font-path}/noto/notosanshebrew-regular.woff') format('woff');
274
303
  font-weight: normal;
275
304
  font-style: italic;
@@ -279,7 +308,8 @@
279
308
 
280
309
  @font-face {
281
310
  font-family: 'Noto Sans';
282
- src: url('#{$font-path}/noto/notosanshebrew-bold.woff2') format('woff2'),
311
+ src:
312
+ url('#{$font-path}/noto/notosanshebrew-bold.woff2') format('woff2'),
283
313
  url('#{$font-path}/noto/notosanshebrew-bold.woff') format('woff');
284
314
  font-weight: bold;
285
315
  font-style: italic;
@@ -291,7 +321,8 @@
291
321
  @mixin df-fonts-multi-lang-font-faces-noto-sans-arabic() {
292
322
  @font-face {
293
323
  font-family: 'Noto Sans';
294
- src: url('#{$font-path}/noto/notosansarabic-thin.woff2') format('woff2'),
324
+ src:
325
+ url('#{$font-path}/noto/notosansarabic-thin.woff2') format('woff2'),
295
326
  url('#{$font-path}/noto/notosansarabic-thin.woff') format('woff');
296
327
  font-weight: 100;
297
328
  font-style: italic;
@@ -301,7 +332,8 @@
301
332
 
302
333
  @font-face {
303
334
  font-family: 'Noto Sans';
304
- src: url('#{$font-path}/noto/notosansarabic-thin.woff2') format('woff2'),
335
+ src:
336
+ url('#{$font-path}/noto/notosansarabic-thin.woff2') format('woff2'),
305
337
  url('#{$font-path}/noto/notosansarabic-thin.woff') format('woff');
306
338
  font-weight: 100;
307
339
  font-style: normal;
@@ -310,7 +342,8 @@
310
342
  }
311
343
  @font-face {
312
344
  font-family: 'Noto Sans';
313
- src: url('#{$font-path}/noto/notosansarabic-light.woff2') format('woff2'),
345
+ src:
346
+ url('#{$font-path}/noto/notosansarabic-light.woff2') format('woff2'),
314
347
  url('#{$font-path}/noto/notosansarabic-light.woff') format('woff');
315
348
  font-weight: 300;
316
349
  font-style: normal;
@@ -319,7 +352,8 @@
319
352
  }
320
353
  @font-face {
321
354
  font-family: 'Noto Sans';
322
- src: url('#{$font-path}/noto/notosansarabic-regular.woff2') format('woff2'),
355
+ src:
356
+ url('#{$font-path}/noto/notosansarabic-regular.woff2') format('woff2'),
323
357
  url('#{$font-path}/noto/notosansarabic-regular.woff') format('woff');
324
358
  font-weight: normal;
325
359
  font-style: normal;
@@ -328,7 +362,8 @@
328
362
  }
329
363
  @font-face {
330
364
  font-family: 'Noto Sans';
331
- src: url('#{$font-path}/noto/notosansarabic-bold.woff2') format('woff2'),
365
+ src:
366
+ url('#{$font-path}/noto/notosansarabic-bold.woff2') format('woff2'),
332
367
  url('#{$font-path}/noto/notosansarabic-bold.woff') format('woff');
333
368
  font-weight: bold;
334
369
  font-style: normal;
@@ -337,7 +372,8 @@
337
372
  }
338
373
  @font-face {
339
374
  font-family: 'Noto Sans';
340
- src: url('#{$font-path}/noto/notosansarabic-regular.woff2') format('woff2'),
375
+ src:
376
+ url('#{$font-path}/noto/notosansarabic-regular.woff2') format('woff2'),
341
377
  url('#{$font-path}/noto/notosansarabic-regular.woff') format('woff');
342
378
  font-weight: normal;
343
379
  font-style: italic;
@@ -347,7 +383,8 @@
347
383
 
348
384
  @font-face {
349
385
  font-family: 'Noto Sans';
350
- src: url('#{$font-path}/noto/notosansarabic-bold.woff2') format('woff2'),
386
+ src:
387
+ url('#{$font-path}/noto/notosansarabic-bold.woff2') format('woff2'),
351
388
  url('#{$font-path}/noto/notosansarabic-bold.woff') format('woff');
352
389
  font-weight: bold;
353
390
  font-style: italic;
@@ -357,7 +394,8 @@
357
394
 
358
395
  @font-face {
359
396
  font-family: 'Noto Sans';
360
- src: url('#{$font-path}/noto/notosansarabic-light.woff2') format('woff2'),
397
+ src:
398
+ url('#{$font-path}/noto/notosansarabic-light.woff2') format('woff2'),
361
399
  url('#{$font-path}/noto/notosansarabic-light.woff') format('woff');
362
400
  font-weight: 300;
363
401
  font-style: italic;
@@ -369,7 +407,8 @@
369
407
  @mixin df-fonts-multi-lang-font-faces-noto-sans-georgian() {
370
408
  @font-face {
371
409
  font-family: 'Noto Sans';
372
- src: url('#{$font-path}/noto/notosansgeorgian-thin.woff2') format('woff2'),
410
+ src:
411
+ url('#{$font-path}/noto/notosansgeorgian-thin.woff2') format('woff2'),
373
412
  url('#{$font-path}/noto/notosansgeorgian-thin.woff') format('woff');
374
413
  font-weight: 100;
375
414
  font-style: normal;
@@ -379,7 +418,8 @@
379
418
 
380
419
  @font-face {
381
420
  font-family: 'Noto Sans';
382
- src: url('#{$font-path}/noto/notosansgeorgian-light.woff2') format('woff2'),
421
+ src:
422
+ url('#{$font-path}/noto/notosansgeorgian-light.woff2') format('woff2'),
383
423
  url('#{$font-path}/noto/notosansgeorgian-light.woff') format('woff');
384
424
  font-weight: 300;
385
425
  font-style: normal;
@@ -388,7 +428,8 @@
388
428
  }
389
429
  @font-face {
390
430
  font-family: 'Noto Sans';
391
- src: url('#{$font-path}/noto/notosansgeorgian-regular.woff2') format('woff2'),
431
+ src:
432
+ url('#{$font-path}/noto/notosansgeorgian-regular.woff2') format('woff2'),
392
433
  url('#{$font-path}/noto/notosansgeorgian-regular.woff') format('woff');
393
434
  font-weight: normal;
394
435
  font-style: normal;
@@ -397,7 +438,8 @@
397
438
  }
398
439
  @font-face {
399
440
  font-family: 'Noto Sans';
400
- src: url('#{$font-path}/noto/notosansgeorgian-bold.woff2') format('woff2'),
441
+ src:
442
+ url('#{$font-path}/noto/notosansgeorgian-bold.woff2') format('woff2'),
401
443
  url('#{$font-path}/noto/notosansgeorgian-bold.woff') format('woff');
402
444
  font-weight: bold;
403
445
  font-style: normal;
@@ -406,7 +448,8 @@
406
448
  }
407
449
  @font-face {
408
450
  font-family: 'Noto Sans';
409
- src: url('#{$font-path}/noto/notosansgeorgian-bold.woff2') format('woff2'),
451
+ src:
452
+ url('#{$font-path}/noto/notosansgeorgian-bold.woff2') format('woff2'),
410
453
  url('#{$font-path}/noto/notosansgeorgian-bold.woff') format('woff');
411
454
  font-weight: bold;
412
455
  font-style: italic;
@@ -416,7 +459,8 @@
416
459
 
417
460
  @font-face {
418
461
  font-family: 'Noto Sans';
419
- src: url('#{$font-path}/noto/notosansgeorgian-regular.woff2') format('woff2'),
462
+ src:
463
+ url('#{$font-path}/noto/notosansgeorgian-regular.woff2') format('woff2'),
420
464
  url('#{$font-path}/noto/notosansgeorgian-regular.woff') format('woff');
421
465
  font-weight: normal;
422
466
  font-style: italic;
@@ -426,7 +470,8 @@
426
470
 
427
471
  @font-face {
428
472
  font-family: 'Noto Sans';
429
- src: url('#{$font-path}/noto/notosansgeorgian-light.woff2') format('woff2'),
473
+ src:
474
+ url('#{$font-path}/noto/notosansgeorgian-light.woff2') format('woff2'),
430
475
  url('#{$font-path}/noto/notosansgeorgian-light.woff') format('woff');
431
476
  font-weight: 300;
432
477
  font-style: italic;
@@ -436,7 +481,8 @@
436
481
 
437
482
  @font-face {
438
483
  font-family: 'Noto Sans';
439
- src: url('#{$font-path}/noto/notosansgeorgian-thin.woff2') format('woff2'),
484
+ src:
485
+ url('#{$font-path}/noto/notosansgeorgian-thin.woff2') format('woff2'),
440
486
  url('#{$font-path}/noto/notosansgeorgian-thin.woff') format('woff');
441
487
  font-weight: 100;
442
488
  font-style: italic;
@@ -448,7 +494,8 @@
448
494
  @mixin df-fonts-multi-lang-font-faces-noto-sans-armenian() {
449
495
  @font-face {
450
496
  font-family: 'Noto Sans';
451
- src: url('#{$font-path}/noto/notosansarmenian-thin.woff2') format('woff2'),
497
+ src:
498
+ url('#{$font-path}/noto/notosansarmenian-thin.woff2') format('woff2'),
452
499
  url('#{$font-path}/noto/notosansarmenian-thin.woff') format('woff');
453
500
  font-weight: 100;
454
501
  font-style: normal;
@@ -457,7 +504,8 @@
457
504
  }
458
505
  @font-face {
459
506
  font-family: 'Noto Sans';
460
- src: url('#{$font-path}/noto/notosansarmenian-light.woff2') format('woff2'),
507
+ src:
508
+ url('#{$font-path}/noto/notosansarmenian-light.woff2') format('woff2'),
461
509
  url('#{$font-path}/noto/notosansarmenian-light.woff') format('woff');
462
510
  font-weight: 300;
463
511
  font-style: normal;
@@ -466,7 +514,8 @@
466
514
  }
467
515
  @font-face {
468
516
  font-family: 'Noto Sans';
469
- src: url('#{$font-path}/noto/notosansarmenian-regular.woff2') format('woff2'),
517
+ src:
518
+ url('#{$font-path}/noto/notosansarmenian-regular.woff2') format('woff2'),
470
519
  url('#{$font-path}/noto/notosansarmenian-regular.woff') format('woff');
471
520
  font-weight: normal;
472
521
  font-style: normal;
@@ -475,7 +524,8 @@
475
524
  }
476
525
  @font-face {
477
526
  font-family: 'Noto Sans';
478
- src: url('#{$font-path}/noto/notosansarmenian-thin.woff2') format('woff2'),
527
+ src:
528
+ url('#{$font-path}/noto/notosansarmenian-thin.woff2') format('woff2'),
479
529
  url('#{$font-path}/noto/notosansarmenian-thin.woff') format('woff');
480
530
  font-weight: 100;
481
531
  font-style: italic;
@@ -485,7 +535,8 @@
485
535
 
486
536
  @font-face {
487
537
  font-family: 'Noto Sans';
488
- src: url('#{$font-path}/noto/notosansarmenian-light.woff2') format('woff2'),
538
+ src:
539
+ url('#{$font-path}/noto/notosansarmenian-light.woff2') format('woff2'),
489
540
  url('#{$font-path}/noto/notosansarmenian-light.woff') format('woff');
490
541
  font-weight: 300;
491
542
  font-style: italic;
@@ -495,7 +546,8 @@
495
546
 
496
547
  @font-face {
497
548
  font-family: 'Noto Sans';
498
- src: url('#{$font-path}/noto/notosansarmenian-bold.woff2') format('woff2'),
549
+ src:
550
+ url('#{$font-path}/noto/notosansarmenian-bold.woff2') format('woff2'),
499
551
  url('#{$font-path}/noto/notosansarmenian-bold.woff') format('woff');
500
552
  font-weight: bold;
501
553
  font-style: italic;
@@ -505,7 +557,8 @@
505
557
 
506
558
  @font-face {
507
559
  font-family: 'Noto Sans';
508
- src: url('#{$font-path}/noto/notosansarmenian-regular.woff2') format('woff2'),
560
+ src:
561
+ url('#{$font-path}/noto/notosansarmenian-regular.woff2') format('woff2'),
509
562
  url('#{$font-path}/noto/notosansarmenian-regular.woff') format('woff');
510
563
  font-weight: normal;
511
564
  font-style: italic;
@@ -515,7 +568,8 @@
515
568
 
516
569
  @font-face {
517
570
  font-family: 'Noto Sans';
518
- src: url('#{$font-path}/noto/notosansarmenian-bold.woff2') format('woff2'),
571
+ src:
572
+ url('#{$font-path}/noto/notosansarmenian-bold.woff2') format('woff2'),
519
573
  url('#{$font-path}/noto/notosansarmenian-bold.woff') format('woff');
520
574
  font-weight: bold;
521
575
  font-style: normal;
package/styles/scss/components/inputs/_inputs.root.scss CHANGED
@@ -5,4 +5,4 @@
5
5
  --#{$prefix}focused-cross-hover-background-color: #{$df-focused-cross-hover-background-color};
6
6
  --#{$prefix}iwi-icon-height: #{$df-iwi-icon-height};
7
7
  --#{$prefix}iwi-icon-width: #{$df-iwi-icon-width};
8
- }
8
+ }
package/styles/scss/components/inputs/_inputs.scss CHANGED
@@ -109,7 +109,13 @@ input[type='search']::-webkit-search-decoration {
109
109
 
110
110
  $validation-messages: '';
111
111
  @each $state in map.keys($form-validation-states) {
112
- $validation-messages: $validation-messages + ':not(.' + string.unquote($state) + '-tooltip)' + ':not(.' + string.unquote($state) + '-feedback)';
112
+ $validation-messages: $validation-messages +
113
+ ':not(.' +
114
+ string.unquote($state) +
115
+ '-tooltip)' +
116
+ ':not(.' +
117
+ string.unquote($state) +
118
+ '-feedback)';
113
119
  }
114
120
 
115
121
  // RTL support
package/styles/scss/components/link/_link.mixins.scss CHANGED
@@ -3,7 +3,9 @@
3
3
  font-family: $df-link-external-font-family;
4
4
  position: relative;
5
5
  bottom: var(--#{$prefix}link-external-icon-bottom);
6
- font-size: var(--#{$prefix}link-external-icon-size);
6
+ @if not meta.variable-exists($name: 'df-enableBranding2023') or not $df-enableBranding2023 {
7
+ font-size: var(--#{$prefix}link-external-icon-size);
8
+ }
7
9
  }
8
10
 
9
11
  %df-disabled-link-style {
@@ -80,17 +82,19 @@
80
82
  //TODO remove mixin when we find change the web portal to avoid using links as buttons or make a different decision
81
83
  @mixin a-btn {
82
84
  &:visited {
83
- color: var(--#{$prefix}link-color);
84
- border-color: var(--#{$prefix}btn-hover-border-color);
85
+ color: var(--#{$prefix}btn-color);
86
+ border-color: var(--#{$prefix}btn-border-color);
85
87
 
86
88
  &:hover {
87
89
  color: var(--#{$prefix}btn-hover-color);
88
90
  background-color: var(--#{$prefix}btn-hover-bg);
91
+ border-color: var(--#{$prefix}btn-hover-border-color);
89
92
  }
90
93
 
91
94
  &:active {
92
95
  color: var(--#{$prefix}btn-active-color);
93
96
  background-color: var(--#{$prefix}btn-active-bg);
97
+ border-color: var(--#{$prefix}btn-active-border-color);
94
98
  }
95
99
  }
96
100
  &:hover,
package/styles/scss/components/link/_link.scss CHANGED
@@ -72,6 +72,12 @@ a {
72
72
  &.active {
73
73
  --#{$prefix}box-shadow-color: #{shades-css-var('links', 'box-shadow-active-color')};
74
74
  }
75
+ transition:
76
+ color 0.15s ease-in-out,
77
+ background-color 0.15s ease-in-out,
78
+ border-color 0.15s ease-in-out,
79
+ border-width 0.15s ease-in-out,
80
+ box-shadow 0.15s ease-in-out;
75
81
  }
76
82
 
77
83
  &[href*='//'], &[href*='mailto'], &.df-link-external
package/styles/scss/components/media/_media.scss CHANGED
@@ -33,6 +33,10 @@
33
33
 
34
34
  &:hover {
35
35
  background-color: var(--#{$prefix}interactive-media-hover-background-color);
36
+
37
+ time {
38
+ color: #{$df-interactive-media-hover-date-color};
39
+ }
36
40
  }
37
41
 
38
42
  @include heading {
package/styles/scss/components/media/_media.variables.scss CHANGED
@@ -10,6 +10,7 @@ $df-media-border-radius-sm: 0 !default;
10
10
  $df-media-border-radius: 0 !default;
11
11
  $df-media-border-radius-lg: 0 !default;
12
12
  $df-interactive-media-date-color: var(--#{$prefix}gray-600) !default;
13
+ $df-interactive-media-hover-date-color: var(--#{$prefix}gray-600) !default;
13
14
  $df-interactive-media-heading-font-size-sm: 1.125rem !default;
14
15
  $df-interactive-media-heading-font-size: 1.25rem !default;
15
16
  $df-interactive-media-heading-font-size-lg: 1.5rem !default;