@undrr/undrr-mangrove 1.8.2 → 2.0.0-alpha.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 (145) hide show
  1. package/components/BookCard.js +2 -2
  2. package/components/BookCard.js.LICENSE.txt +1 -1
  3. package/components/Breadcrumbs.js +3 -2
  4. package/components/Checkbox.js +3 -2
  5. package/components/Chips.js +3 -2
  6. package/components/CtaButton.js +3 -2
  7. package/components/EmbedContainer.js +3 -2
  8. package/components/Footer.js +2 -2
  9. package/components/Footer.js.LICENSE.txt +1 -1
  10. package/components/FormAction.js +6 -0
  11. package/components/FormAction.js.LICENSE.txt +9 -0
  12. package/components/FormErrorSummary.js +3 -2
  13. package/components/FormGroup.js +3 -2
  14. package/components/FullWidth.js +3 -2
  15. package/components/Gallery.js +2 -2
  16. package/components/Gallery.js.LICENSE.txt +1 -1
  17. package/components/Hero.js +2 -2
  18. package/components/Hero.js.LICENSE.txt +1 -1
  19. package/components/HighlightBox.js +3 -2
  20. package/components/HorizontalBookCard.js +2 -2
  21. package/components/HorizontalBookCard.js.LICENSE.txt +1 -1
  22. package/components/HorizontalCard.js +2 -2
  23. package/components/HorizontalCard.js.LICENSE.txt +1 -1
  24. package/components/IconCard.js +2 -2
  25. package/components/IconCard.js.LICENSE.txt +1 -1
  26. package/components/Loader.js +3 -2
  27. package/components/MegaMenu.js +2 -2
  28. package/components/MegaMenu.js.LICENSE.txt +1 -1
  29. package/components/PageHeader.js +3 -2
  30. package/components/Pager.js +2 -2
  31. package/components/Pager.js.LICENSE.txt +1 -1
  32. package/components/QuoteHighlight.js +3 -2
  33. package/components/Radio.js +3 -2
  34. package/components/ScrollContainer.js +3 -2
  35. package/components/Select.js +3 -2
  36. package/components/ShareButtons.js +2 -2
  37. package/components/ShareButtons.js.LICENSE.txt +1 -1
  38. package/components/ShowMore.js +3 -2
  39. package/components/StatsCard.js +2 -2
  40. package/components/StatsCard.js.LICENSE.txt +10 -0
  41. package/components/SyndicationSearchWidget.js +2 -2
  42. package/components/SyndicationSearchWidget.js.LICENSE.txt +1 -1
  43. package/components/Tab.js +3 -2
  44. package/components/TextCta.js +2 -2
  45. package/components/TextCta.js.LICENSE.txt +10 -0
  46. package/components/TextInput.js +3 -2
  47. package/components/Textarea.js +3 -2
  48. package/components/UserFeedback.js +6 -0
  49. package/components/UserFeedback.js.LICENSE.txt +9 -0
  50. package/components/VerticalCard.js +2 -2
  51. package/components/VerticalCard.js.LICENSE.txt +1 -1
  52. package/components/hydrate.js +1 -1
  53. package/css/style-all.css +422 -0
  54. package/css/style-all.css.map +1 -0
  55. package/css/style-delta.css +122 -171
  56. package/css/style-delta.css.map +1 -1
  57. package/css/style-gutenberg.css +55 -89
  58. package/css/style-gutenberg.css.map +1 -1
  59. package/css/style-irp.css +122 -161
  60. package/css/style-irp.css.map +1 -1
  61. package/css/style-mcr.css +122 -161
  62. package/css/style-mcr.css.map +1 -1
  63. package/css/style-preventionweb.css +122 -161
  64. package/css/style-preventionweb.css.map +1 -1
  65. package/css/style.css +121 -154
  66. package/css/style.css.map +1 -1
  67. package/package.json +2 -2
  68. package/scss/Atom/BaseTypography/Abbr/abbr.scss +1 -1
  69. package/scss/Atom/BaseTypography/Code/code.scss +41 -36
  70. package/scss/Atom/BaseTypography/Mark/mark.scss +2 -2
  71. package/scss/Atom/Images/AuthorImage/author-image.scss +8 -8
  72. package/scss/Atom/Images/ImageCaptionCredit/image-caption-credit.scss +9 -9
  73. package/scss/Atom/Layout/Container/container.scss +2 -4
  74. package/scss/Atom/Layout/Grid/grid.scss +15 -15
  75. package/scss/Atom/Navigation/MenuItems/menu-items.scss +10 -3
  76. package/scss/Atom/ReachElement/Details/details.scss +44 -39
  77. package/scss/Atom/Table/table.scss +22 -10
  78. package/scss/Atom/Tag/tag.scss +32 -32
  79. package/scss/Components/Boilerplate/boilerplate.scss +7 -7
  80. package/scss/Components/Breadcrumbs/breadcrumbs.scss +9 -9
  81. package/scss/Components/Buttons/Chips/chips.scss +63 -23
  82. package/scss/Components/Buttons/CtaButton/cta-button.scss +142 -20
  83. package/scss/Components/Buttons/ShareButtons/share-buttons.scss +16 -16
  84. package/scss/Components/Cards/Card/card.scss +77 -50
  85. package/scss/Components/Cards/StatsCard/stats-card.scss +32 -34
  86. package/scss/Components/CookieConsentBanner/cookie-consent-banner.scss +75 -74
  87. package/scss/Components/ErrorPages/error-pages.scss +9 -9
  88. package/scss/Components/Footer/footer.scss +12 -12
  89. package/scss/Components/Forms/FormAction/form-action.scss +50 -0
  90. package/scss/Components/Forms/FormGroup/form-group.scss +18 -7
  91. package/scss/Components/Forms/Select/select.scss +1 -1
  92. package/scss/Components/Forms/TextInput/text-input.scss +1 -1
  93. package/scss/Components/Forms/_form-base.scss +68 -61
  94. package/scss/Components/Gallery/gallery.scss +71 -70
  95. package/scss/Components/Hero/hero.scss +241 -74
  96. package/scss/Components/HighlightBox/highlight-box.scss +3 -3
  97. package/scss/Components/MegaMenu/mega-menu.scss +73 -76
  98. package/scss/Components/OnThisPageNav/on-this-page-nav.scss +36 -37
  99. package/scss/Components/PageHeader/page-header.scss +7 -7
  100. package/scss/Components/Pager/pager.scss +85 -62
  101. package/scss/Components/PreviewAccess/preview-access.scss +35 -35
  102. package/scss/Components/QuoteHighlight/quote-highlight.scss +32 -32
  103. package/scss/Components/ScrollContainer/scroll-container.scss +52 -32
  104. package/scss/Components/Snackbar/snackbar.scss +24 -31
  105. package/scss/Components/SyndicationSearchWidget/syndication-search-widget.scss +147 -139
  106. package/scss/Components/Tab/tab.scss +215 -34
  107. package/scss/Components/TableOfContents/table-of-contents.scss +6 -6
  108. package/scss/Components/TextCta/text-cta.scss +69 -23
  109. package/scss/Components/UserFeedback/user-feedback.scss +69 -0
  110. package/scss/Molecules/ImageCaption/image-caption.scss +16 -16
  111. package/scss/Molecules/SectionHeader/section-header.scss +1 -1
  112. package/scss/Utilities/FullWidth/full-width.scss +1 -1
  113. package/scss/Utilities/Loader/loader.scss +4 -4
  114. package/scss/assets/scss/_components.scss +3 -2
  115. package/scss/assets/scss/_foundational.scss +44 -26
  116. package/scss/assets/scss/_mixins.scss +34 -1
  117. package/scss/assets/scss/_theme-delta.scss +68 -0
  118. package/scss/assets/scss/_theme-irp.scss +39 -0
  119. package/scss/assets/scss/_theme-mcr.scss +56 -0
  120. package/scss/assets/scss/_theme-preventionweb.scss +37 -0
  121. package/scss/assets/scss/_utility.scss +112 -112
  122. package/scss/assets/scss/_variables.scss +358 -354
  123. package/scss/assets/scss/style-all.scss +19 -0
  124. package/scss/assets/scss/style-delta.scss +1 -1
  125. package/scss/assets/scss/style-irp.scss +1 -1
  126. package/scss/assets/scss/style-mcr.scss +1 -1
  127. package/scss/assets/scss/style-preventionweb.scss +1 -1
  128. package/css/style-irp-legacy.css +0 -476
  129. package/css/style-irp-legacy.css.map +0 -1
  130. package/css/style-legacy.css +0 -469
  131. package/css/style-legacy.css.map +0 -1
  132. package/css/style-mcr-legacy.css +0 -476
  133. package/css/style-mcr-legacy.css.map +0 -1
  134. package/css/style-preventionweb-legacy.css +0 -476
  135. package/css/style-preventionweb-legacy.css.map +0 -1
  136. package/scss/Components/Forms/_form-legacy.scss +0 -152
  137. package/scss/Components/Pagination/pagination.scss +0 -112
  138. package/scss/assets/scss/_variables-delta.scss +0 -110
  139. package/scss/assets/scss/_variables-irp.scss +0 -50
  140. package/scss/assets/scss/_variables-mcr.scss +0 -65
  141. package/scss/assets/scss/_variables-preventionweb.scss +0 -48
  142. package/scss/assets/scss/style-irp-legacy.scss +0 -20
  143. package/scss/assets/scss/style-legacy.scss +0 -20
  144. package/scss/assets/scss/style-mcr-legacy.scss +0 -20
  145. package/scss/assets/scss/style-preventionweb-legacy.scss +0 -20
package/scss/Components/Forms/_form-base.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  // -----------------------------------------------------------------------------
7
7
  .mg-form-field {
8
8
  display: block;
9
- margin-bottom: $mg-spacing-100;
9
+ margin-bottom: var(--mg-spacing-100);
10
10
  }
11
11
 
12
12
  // -----------------------------------------------------------------------------
@@ -17,11 +17,11 @@
17
17
  font-size: $mg-font-size-300;
18
18
 
19
19
  &--disabled {
20
- color: $mg-color-neutral-400;
20
+ color: rgb(var(--mg-color-neutral-400));
21
21
  }
22
22
 
23
23
  &--required::after {
24
- color: $mg-color-red-900;
24
+ color: rgb(var(--mg-color-red-900));
25
25
  content: " *";
26
26
  }
27
27
  }
@@ -30,26 +30,29 @@
30
30
  // Text input
31
31
  // -----------------------------------------------------------------------------
32
32
  %mg-form-input-base {
33
- @extend %background-white;
34
-
35
33
  appearance: none;
36
- border: 2px solid $mg-color-black;
37
- border-radius: $mg-radius-form-input;
34
+ background-color: rgb(var(--mg-color-neutral-50));
35
+ border: 1px solid rgb(var(--mg-color-neutral-600) / 0.22);
36
+ border-radius: var(--mg-radius-form-input);
38
37
  box-sizing: border-box;
39
38
  display: block;
40
39
  font-family: $mg-font-family;
41
40
  font-size: $mg-font-size-300;
42
41
  height: 46px;
43
- margin-top: $mg-spacing-25;
42
+ margin-top: var(--mg-spacing-25);
44
43
  padding: mg-rem(6.25);
45
44
  width: 100%;
46
45
 
47
46
  &::placeholder {
48
- color: $mg-color-neutral-500;
47
+ color: rgb(var(--mg-color-neutral-500));
49
48
  }
50
49
 
51
50
  &:focus-visible {
52
- box-shadow: 0 0 4px $mg-color-form-focus;
51
+ background-color: rgb(var(--mg-color-neutral-0));
52
+ border-color: rgb(var(--mg-color-form-focus));
53
+ box-shadow:
54
+ 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),
55
+ 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));
53
56
  outline: 0;
54
57
  }
55
58
  }
@@ -58,17 +61,17 @@
58
61
  @extend %mg-form-input-base;
59
62
 
60
63
  &--disabled {
61
- background-color: $mg-color-white;
62
- border-color: $mg-color-neutral-400;
63
- color: $mg-color-neutral-400;
64
+ background-color: rgb(var(--mg-color-white));
65
+ border-color: rgb(var(--mg-color-neutral-400));
66
+ color: rgb(var(--mg-color-neutral-400));
64
67
 
65
68
  &::placeholder {
66
- color: $mg-color-neutral-400;
69
+ color: rgb(var(--mg-color-neutral-400));
67
70
  }
68
71
  }
69
72
 
70
73
  &--error {
71
- border-color: $mg-color-red-900;
74
+ border-color: rgb(var(--mg-color-red-900));
72
75
  }
73
76
  }
74
77
 
@@ -83,17 +86,17 @@
83
86
  resize: vertical;
84
87
 
85
88
  &--disabled {
86
- background-color: $mg-color-white;
87
- border-color: $mg-color-neutral-400;
88
- color: $mg-color-neutral-400;
89
+ background-color: rgb(var(--mg-color-white));
90
+ border-color: rgb(var(--mg-color-neutral-400));
91
+ color: rgb(var(--mg-color-neutral-400));
89
92
 
90
93
  &::placeholder {
91
- color: $mg-color-neutral-400;
94
+ color: rgb(var(--mg-color-neutral-400));
92
95
  }
93
96
  }
94
97
 
95
98
  &--error {
96
- border-color: $mg-color-red-900;
99
+ border-color: rgb(var(--mg-color-red-900));
97
100
  }
98
101
  }
99
102
 
@@ -101,20 +104,19 @@
101
104
  // Select
102
105
  // -----------------------------------------------------------------------------
103
106
  .mg-form-select {
104
- @extend %background-white;
105
-
106
107
  appearance: none;
107
- border: 2px solid $mg-color-black;
108
- border-radius: $mg-radius-form-input;
108
+ background-color: rgb(var(--mg-color-neutral-50));
109
+ border: 1px solid rgb(var(--mg-color-neutral-600) / 0.22);
110
+ border-radius: var(--mg-radius-form-input);
109
111
  box-sizing: border-box;
110
112
  cursor: pointer;
111
113
  display: block;
112
114
  font-family: $mg-font-family;
113
115
  font-size: $mg-font-size-300;
114
116
  height: 46px;
115
- margin-top: $mg-spacing-25;
117
+ margin-top: var(--mg-spacing-25);
116
118
  padding: mg-rem(6.25);
117
- padding-right: $mg-spacing-200;
119
+ padding-right: var(--mg-spacing-200);
118
120
  width: 100%;
119
121
 
120
122
  // Custom dropdown arrow
@@ -123,19 +125,23 @@
123
125
  background-repeat: no-repeat;
124
126
 
125
127
  &:focus-visible {
126
- box-shadow: 0 0 4px $mg-color-form-focus;
128
+ background-color: rgb(var(--mg-color-neutral-0));
129
+ border-color: rgb(var(--mg-color-form-focus));
130
+ box-shadow:
131
+ 0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),
132
+ 0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width)) rgb(var(--mg-color-focus-ring));
127
133
  outline: 0;
128
134
  }
129
135
 
130
136
  &--disabled {
131
- background-color: $mg-color-white;
132
- border-color: $mg-color-neutral-400;
133
- color: $mg-color-neutral-400;
137
+ background-color: rgb(var(--mg-color-white));
138
+ border-color: rgb(var(--mg-color-neutral-400));
139
+ color: rgb(var(--mg-color-neutral-400));
134
140
  cursor: default;
135
141
  }
136
142
 
137
143
  &--error {
138
- border-color: $mg-color-red-900;
144
+ border-color: rgb(var(--mg-color-red-900));
139
145
  }
140
146
  }
141
147
 
@@ -145,50 +151,51 @@
145
151
  .mg-form-check {
146
152
  align-items: center;
147
153
  display: flex;
154
+ min-height: mg-rem(40);
148
155
  position: relative;
149
156
 
150
157
  // Base input (shared between checkbox and radio)
151
158
  &__input {
152
159
  appearance: none;
153
- border: 2px solid $mg-color-form-check;
160
+ border: 2px solid rgb(var(--mg-color-form-check));
154
161
  cursor: pointer;
155
- height: 16px;
162
+ height: mg-rem(24);
156
163
  margin: 0;
157
- width: 16px;
164
+ width: mg-rem(24);
158
165
 
159
166
  &:hover {
160
- border-color: $mg-color-form-check--hover;
167
+ border-color: rgb(var(--mg-color-form-check--hover));
161
168
  }
162
169
 
163
170
  &:focus-visible {
164
- box-shadow: 0 0 4px $mg-color-form-focus;
171
+ box-shadow: 0 0 4px rgb(var(--mg-color-form-focus));
165
172
  outline: 0;
166
173
  }
167
174
 
168
175
  &--checkbox {
169
- border-radius: 0;
176
+ border-radius: var(--mg-radius-form-input);
170
177
  }
171
178
 
172
179
  &--radio {
173
180
  background-color: transparent;
174
181
  border-radius: 100%;
175
- box-shadow: inset 0 0 0 $mg-color-white;
182
+ box-shadow: inset 0 0 0 rgb(var(--mg-color-white));
176
183
  }
177
184
 
178
185
  &--disabled {
179
- border-color: $mg-color-neutral-400;
186
+ border-color: rgb(var(--mg-color-neutral-400));
180
187
  cursor: default;
181
188
 
182
189
  &:hover {
183
- border-color: $mg-color-neutral-400;
190
+ border-color: rgb(var(--mg-color-neutral-400));
184
191
  }
185
192
  }
186
193
 
187
194
  &--error {
188
- border-color: $mg-color-red-900;
195
+ border-color: rgb(var(--mg-color-red-900));
189
196
 
190
197
  &:hover {
191
- border-color: $mg-color-red-900;
198
+ border-color: rgb(var(--mg-color-red-900));
192
199
  }
193
200
  }
194
201
  }
@@ -203,64 +210,64 @@
203
210
 
204
211
  // Checked states (must be outside BEM nesting for specificity)
205
212
  .mg-form-check__input--checkbox:checked {
206
- background-color: $mg-color-form-check--checked;
213
+ background-color: rgb(var(--mg-color-form-check--checked));
207
214
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8l3 3 6-6'/%3E%3C/svg%3E");
208
- border-color: $mg-color-form-check--checked;
215
+ border-color: rgb(var(--mg-color-form-check--checked));
209
216
  }
210
217
 
211
218
  .mg-form-check__input--radio:checked {
212
- background-color: $mg-color-form-check--checked;
213
- box-shadow: inset 0 0 0 3px $mg-color-white;
219
+ background-color: rgb(var(--mg-color-form-check--checked));
220
+ box-shadow: inset 0 0 0 3px rgb(var(--mg-color-white));
214
221
  }
215
222
 
216
223
  // -----------------------------------------------------------------------------
217
224
  // Help text
218
225
  // -----------------------------------------------------------------------------
219
226
  .mg-form-help {
220
- color: $mg-color-neutral-500;
227
+ color: rgb(var(--mg-color-neutral-500));
221
228
  font-size: $mg-font-size-200;
222
229
  margin-bottom: 0;
223
- margin-top: $mg-spacing-25;
230
+ margin-top: var(--mg-spacing-25);
224
231
  }
225
232
 
226
233
  // -----------------------------------------------------------------------------
227
234
  // Error text
228
235
  // -----------------------------------------------------------------------------
229
236
  .mg-form-error {
230
- color: $mg-color-red-900;
237
+ color: rgb(var(--mg-color-red-900));
231
238
  font-size: $mg-font-size-300;
232
239
  margin-bottom: 0;
233
- margin-top: $mg-spacing-25;
240
+ margin-top: var(--mg-spacing-25);
234
241
  }
235
242
 
236
243
  // -----------------------------------------------------------------------------
237
244
  // Form error summary
238
245
  // -----------------------------------------------------------------------------
239
246
  .mg-form-error-summary {
240
- background-color: $mg-color-red-50;
241
- border-left: 4px solid $mg-color-red-900;
242
- margin-bottom: $mg-spacing-200;
243
- padding: $mg-spacing-150;
247
+ background-color: rgb(var(--mg-color-red-50));
248
+ border-left: 4px solid rgb(var(--mg-color-red-900));
249
+ margin-bottom: var(--mg-spacing-200);
250
+ padding: var(--mg-spacing-150);
244
251
 
245
252
  &:focus {
246
- outline: 3px solid $mg-color-blue-800;
253
+ outline: 3px solid rgb(var(--mg-color-blue-800));
247
254
  outline-offset: 0;
248
255
  }
249
256
 
250
257
  &__title {
251
- color: $mg-color-red-900;
258
+ color: rgb(var(--mg-color-red-900));
252
259
  font-size: $mg-font-size-300;
253
260
  font-weight: 700;
254
- margin-bottom: $mg-spacing-75;
261
+ margin-bottom: var(--mg-spacing-75);
255
262
  margin-top: 0;
256
263
  }
257
264
 
258
265
  &__list {
259
266
  margin: 0;
260
- padding-left: $mg-spacing-100;
267
+ padding-left: var(--mg-spacing-100);
261
268
 
262
269
  li {
263
- margin-bottom: $mg-spacing-50;
270
+ margin-bottom: var(--mg-spacing-50);
264
271
 
265
272
  &:last-child {
266
273
  margin-bottom: 0;
@@ -268,7 +275,7 @@
268
275
  }
269
276
 
270
277
  a {
271
- color: $mg-color-red-900;
278
+ color: rgb(var(--mg-color-red-900));
272
279
  font-weight: 600;
273
280
  text-decoration: underline;
274
281
  }
@@ -296,7 +303,7 @@
296
303
  [dir="rtl"] {
297
304
  .mg-form-select {
298
305
  background-position: left mg-rem(6.25) center;
299
- padding-left: $mg-spacing-200;
306
+ padding-left: var(--mg-spacing-200);
300
307
  padding-right: mg-rem(6.25);
301
308
  }
302
309