@madgex/design-system 5.11.3 → 6.0.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 (69) hide show
  1. package/README.md +4 -10
  2. package/dist/_tokens/css/_tokens.css +62 -96
  3. package/dist/_tokens/js/_tokens-module.js +1342 -1406
  4. package/dist/_tokens/sketch/_tokens.sketchpalette +1 -1
  5. package/dist/assets/icons.json +1 -1
  6. package/dist/css/index.css +1 -1
  7. package/dist/js/index-fractal.js +1 -1
  8. package/dist/js/index.js +1 -1
  9. package/package.json +4 -4
  10. package/src/components/_preview.njk +1 -0
  11. package/src/components/button/button.scss +50 -37
  12. package/src/components/card/README.md +1 -1
  13. package/src/components/card/_template.njk +1 -1
  14. package/src/components/card/card.config.js +1 -2
  15. package/src/components/card/card.scss +29 -39
  16. package/src/components/icons/README.md +3 -3
  17. package/src/components/icons/icons.scss +26 -19
  18. package/src/components/inputs/_form-elements.scss +44 -44
  19. package/src/components/inputs/checkbox-pill/checkbox-pill.scss +14 -14
  20. package/src/components/inputs/combobox/combobox.scss +13 -13
  21. package/src/components/inputs/file-upload/file-upload.scss +14 -14
  22. package/src/components/inputs/input-number/input-number.scss +10 -10
  23. package/src/components/inputs/text-editor/text-editor.scss +16 -16
  24. package/src/components/modal/modal.js +1 -1
  25. package/src/components/modal/modal.scss +4 -4
  26. package/src/components/notification/notification.scss +1 -1
  27. package/src/components/pagination/pagination.scss +8 -8
  28. package/src/components/popover/popover.js +1 -1
  29. package/src/components/popover/popover.scss +13 -13
  30. package/src/components/section-title/section-title.scss +1 -1
  31. package/src/components/skip-link/skip-link.scss +4 -4
  32. package/src/components/tabs/tabs.js +1 -1
  33. package/src/components/tabs/tabs.scss +16 -16
  34. package/src/components/toggle-button-links/toggle-button-links.scss +20 -20
  35. package/src/helpers/spacing/README.md +2 -2
  36. package/src/layout/grid/README.md +4 -4
  37. package/src/scss/constants/__index.scss +2 -0
  38. package/src/scss/constants/_sd-tokens.scss +81 -0
  39. package/src/scss/constants/_vars.scss +4 -0
  40. package/src/scss/core/_containers.scss +35 -38
  41. package/src/scss/core/_defaults.scss +14 -8
  42. package/src/scss/core/_grid.scss +20 -23
  43. package/src/scss/core/_lists.scss +13 -13
  44. package/src/scss/core/_message.scss +32 -32
  45. package/src/scss/core/_typography.scss +13 -13
  46. package/src/scss/functions/__index.scss +0 -2
  47. package/src/scss/functions/_media-queries.scss +4 -4
  48. package/src/scss/functions/_text-contrast.scss +6 -7
  49. package/src/scss/helpers/_borders.scss +5 -38
  50. package/src/scss/helpers/_display.scss +0 -1
  51. package/src/scss/helpers/_edited-text.scss +5 -5
  52. package/src/scss/helpers/_floats.scss +0 -1
  53. package/src/scss/helpers/_font-types.scss +15 -15
  54. package/src/scss/helpers/_spacing.scss +33 -36
  55. package/src/scss/helpers/_text-align.scss +0 -1
  56. package/src/scss/helpers/_vertical-align.scss +0 -2
  57. package/src/scss/helpers/_width-height.scss +4 -6
  58. package/src/scss/import.scss +1 -0
  59. package/src/scss/index.scss +0 -2
  60. package/src/tokens/_config.js +22 -9
  61. package/src/tokens/_constants.json +130 -0
  62. package/src/tokens/color.json +8 -76
  63. package/src/tokens/custom.json +0 -8
  64. package/src/tokens/size.json +0 -16
  65. package/src/tokens/typography.json +3 -1
  66. package/tasks/registerTransforms.js +28 -1
  67. package/dist/_tokens/scss/_tokens.scss +0 -741
  68. package/src/scss/functions/_color.scss +0 -0
  69. package/src/scss/functions/_px2rem.scss +0 -20
package/README.md CHANGED
@@ -14,18 +14,12 @@ npm install @madgex/design-system --save
14
14
 
15
15
  ## Importing styles
16
16
 
17
- You'll need to import the Madgex DS styles into your project scss file.
17
+ You'll need to use the Madgex DS CSS file in your project (which you will find in `@madgex/design-system/dist/css/index.css`)
18
18
 
19
- Use the DS tokens to change DS variables.
19
+ The design system is using CSS Custom Properties to apply the brand styling of each site so you will need to import the custom properties file found in S3 for each client property id as well.
20
20
 
21
- e.g. import the Madgex DS to your Sass file & overload variables:
21
+ if you want to use the default styling set in the design system, you can use the `_tokens.css` file found in `dist/_tokens/css`.
22
22
 
23
- ```scss
24
- $mds-color-brand-colour-1: #ff0000; // my primary brand colour is RED
25
- $mds-size-font-md: 20px; // my base font-size is 20px
26
-
27
- @import 'node_modules/@madgex/design-system/src/scss/index.scss';
28
- ```
29
23
 
30
24
  ## Working with [hapi.js](https://hapijs.com/), [vision](https://github.com/hapijs/vision) and [Nunjucks](https://mozilla.github.io/nunjucks/)
31
25
 
@@ -77,7 +71,7 @@ Then you should be able to use components as such:
77
71
  {% endblock %}
78
72
  ```
79
73
 
80
- Note you'll need the scss for the component styles.
74
+ Note you'll need the CSS for the component styles.
81
75
 
82
76
  ## Working with [vue.js](https://vuejs.org/)
83
77
 
package/dist/_tokens/css/_tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 16 Nov 2023 11:39:48 GMT
3
+ * Generated on Thu, 04 Jan 2024 14:57:02 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -19,32 +19,10 @@
19
19
  --mds-color-brand-3-dark: #119389;
20
20
  --mds-color-brand-3-darkest: #063733;
21
21
  --mds-color-brand-3-base: #16c1b4;
22
- --mds-color-status-error-light: #fd0826;
23
- --mds-color-status-error-lightest: #ffe3e6;
24
- --mds-color-status-error-dark: #d0021b;
25
- --mds-color-status-error-darkest: #ae0216;
26
- --mds-color-status-error-base: #e1021d;
27
- --mds-color-status-success-light: #6ac52d;
28
- --mds-color-status-success-lightest: #f0faea;
29
- --mds-color-status-success-dark: #549b24;
30
- --mds-color-status-success-darkest: #40791b;
31
- --mds-color-status-success-base: #5ba927;
32
- --mds-color-status-info-light: #ffc442;
33
- --mds-color-status-info-lightest: #fff7e5;
34
- --mds-color-status-info-dark: #f4aa08;
35
- --mds-color-status-info-darkest: #946500;
36
- --mds-color-status-info-base: #ffb411;
37
22
  --mds-color-background-body: #ffffff;
38
23
  --mds-color-background-site-container: #f8f8f8;
39
24
  --mds-color-background-surface: #ffffff;
40
25
  --mds-color-background-main: rgba(0, 0, 0, 0);
41
- --mds-color-neutral-white: #ffffff;
42
- --mds-color-neutral-black: #000000;
43
- --mds-color-neutral-base: #707070;
44
- --mds-color-neutral-light: #949494;
45
- --mds-color-neutral-lighter: #dddddd;
46
- --mds-color-neutral-lightest: #f8f8f8;
47
- --mds-color-neutral-darker: #333333;
48
26
  --mds-color-text-base: #343433;
49
27
  --mds-color-text-invert: #ffffff;
50
28
  --mds-color-text-headers-1: #222222;
@@ -80,10 +58,25 @@
80
58
  --mds-color-pill-bg-hover: #2990e0;
81
59
  --mds-color-pill-text-base: #ffffff;
82
60
  --mds-color-pill-text-hover: #ffffff;
61
+ --mds-color-new-badge-background: #40791b;
62
+ --mds-color-new-badge-text: #ffffff;
63
+ --mds-size-border-width-base: 1px;
64
+ --mds-size-border-width-button: 1px;
65
+ --mds-size-border-radius-base: 4px;
66
+ --mds-size-border-radius-button: 4px;
67
+ --mds-size-border-radius-main: 0;
68
+ --mds-size-container-width: 100%;
69
+ --mds-size-container-min-width: 0;
70
+ --mds-size-container-max-width: 100%;
71
+ --mds-size-wrapper-width: 97%;
72
+ --mds-size-wrapper-max-width: 1240px;
73
+ --mds-size-surface-padding: 16px;
74
+ --mds-size-main-max-width: 100%;
75
+ --mds-size-main-padding: 0;
76
+ --mds-size-main-margin: 0 auto;
77
+ --mds-size-height-ad-container-leaderboard-min: 0;
83
78
  --mds-custom-badge-1-background: #000000;
84
79
  --mds-custom-badge-1-color: #fff;
85
- --mds-custom-badge-2-background: #40791B;
86
- --mds-custom-badge-2-color: #fff;
87
80
  --mds-custom-card-1-background: #e9f3fc;
88
81
  --mds-custom-card-1-border: 1px solid #1b75bb;
89
82
  --mds-shadow-base: 0 2px 5px 0 #dddddd;
@@ -111,33 +104,6 @@
111
104
  --mds-email-font-family-heading-base: "Helvetica", Arial, sans-serif;
112
105
  --mds-email-size-button-border-radius: 4px;
113
106
  --mds-email-size-button-border-width: 1px;
114
- --mds-size-baseline: 4px;
115
- --mds-size-breakpoint-sm: 400px;
116
- --mds-size-breakpoint-md: 600px;
117
- --mds-size-breakpoint-lg: 1008px;
118
- --mds-size-breakpoint-xl: 1280px;
119
- --mds-size-border-width-base: 1px;
120
- --mds-size-border-width-button: 1px;
121
- --mds-size-border-radius-base: 4px;
122
- --mds-size-border-radius-button: 4px;
123
- --mds-size-border-radius-main: 0;
124
- --mds-size-gutter-width: 20px;
125
- --mds-size-container-width: 100%;
126
- --mds-size-container-min-width: 0;
127
- --mds-size-container-max-width: 100%;
128
- --mds-size-wrapper-width: 97%;
129
- --mds-size-wrapper-max-width: 1240px;
130
- --mds-size-surface-padding: 16px;
131
- --mds-size-main-max-width: 100%;
132
- --mds-size-main-padding: 0;
133
- --mds-size-main-margin: 0 auto;
134
- --mds-size-icon-default: 1em;
135
- --mds-size-icon-sm: 16px;
136
- --mds-size-icon-md: 24px;
137
- --mds-size-icon-lg: 32px;
138
- --mds-size-icon-xl: 48px;
139
- --mds-size-icon-xxl: 72px;
140
- --mds-size-height-ad-container-leaderboard-min: 0;
141
107
  --mds-font-family-base: "Helvetica", Arial, sans-serif;
142
108
  --mds-font-family-heading-1: "Helvetica", Arial, sans-serif;
143
109
  --mds-font-family-heading-2: "Helvetica", Arial, sans-serif;
@@ -152,93 +118,93 @@
152
118
  --mds-font-weight-button-base: 400;
153
119
  --mds-font-weight-link-base: inherit;
154
120
  --mds-font-size-base: 16px;
155
- --mds-font-type-canon-default-size: 28px;
121
+ --mds-font-type-canon-default-size: 1.75rem;
156
122
  --mds-font-type-canon-default-line-height: 1.15;
157
- --mds-font-type-canon-sm-size: 32px;
123
+ --mds-font-type-canon-sm-size: 2rem;
158
124
  --mds-font-type-canon-sm-line-height: 1.13;
159
- --mds-font-type-canon-md-size: 52px;
125
+ --mds-font-type-canon-md-size: 3.25rem;
160
126
  --mds-font-type-canon-md-line-height: 1.08;
161
- --mds-font-type-canon-lg-size: 44px;
127
+ --mds-font-type-canon-lg-size: 2.75rem;
162
128
  --mds-font-type-canon-lg-line-height: 1.1;
163
- --mds-font-type-trafalgar-default-size: 20px;
129
+ --mds-font-type-trafalgar-default-size: 1.25rem;
164
130
  --mds-font-type-trafalgar-default-line-height: 1.2;
165
- --mds-font-type-trafalgar-sm-size: 24px;
131
+ --mds-font-type-trafalgar-sm-size: 1.5rem;
166
132
  --mds-font-type-trafalgar-sm-line-height: 1.17;
167
- --mds-font-type-trafalgar-md-size: 36px;
133
+ --mds-font-type-trafalgar-md-size: 2.25rem;
168
134
  --mds-font-type-trafalgar-md-line-height: 1.12;
169
- --mds-font-type-trafalgar-lg-size: 32px;
135
+ --mds-font-type-trafalgar-lg-size: 2rem;
170
136
  --mds-font-type-trafalgar-lg-line-height: 1.13;
171
- --mds-font-type-paragon-default-size: 20px;
137
+ --mds-font-type-paragon-default-size: 1.25rem;
172
138
  --mds-font-type-paragon-default-line-height: 1.2;
173
- --mds-font-type-paragon-sm-size: 22px;
139
+ --mds-font-type-paragon-sm-size: 1.375rem;
174
140
  --mds-font-type-paragon-sm-line-height: 1.19;
175
- --mds-font-type-paragon-md-size: 28px;
141
+ --mds-font-type-paragon-md-size: 1.75rem;
176
142
  --mds-font-type-paragon-md-line-height: 1.15;
177
- --mds-font-type-paragon-lg-size: 28px;
143
+ --mds-font-type-paragon-lg-size: 1.75rem;
178
144
  --mds-font-type-paragon-lg-line-height: 1.15;
179
- --mds-font-type-double-pica-default-size: 20px;
145
+ --mds-font-type-double-pica-default-size: 1.25rem;
180
146
  --mds-font-type-double-pica-default-line-height: 1.2;
181
- --mds-font-type-double-pica-sm-size: 20px;
147
+ --mds-font-type-double-pica-sm-size: 1.25rem;
182
148
  --mds-font-type-double-pica-sm-line-height: 1.2;
183
- --mds-font-type-double-pica-md-size: 26px;
149
+ --mds-font-type-double-pica-md-size: 1.625rem;
184
150
  --mds-font-type-double-pica-md-line-height: 1.16;
185
- --mds-font-type-double-pica-lg-size: 24px;
151
+ --mds-font-type-double-pica-lg-size: 1.5rem;
186
152
  --mds-font-type-double-pica-lg-line-height: 1.17;
187
- --mds-font-type-great-primer-default-size: 18px;
153
+ --mds-font-type-great-primer-default-size: 1.125rem;
188
154
  --mds-font-type-great-primer-default-line-height: 1.23;
189
- --mds-font-type-great-primer-sm-size: 18px;
155
+ --mds-font-type-great-primer-sm-size: 1.125rem;
190
156
  --mds-font-type-great-primer-sm-line-height: 1.23;
191
- --mds-font-type-great-primer-md-size: 21px;
157
+ --mds-font-type-great-primer-md-size: 1.3125rem;
192
158
  --mds-font-type-great-primer-md-line-height: 1.15;
193
- --mds-font-type-great-primer-lg-size: 20px;
159
+ --mds-font-type-great-primer-lg-size: 1.25rem;
194
160
  --mds-font-type-great-primer-lg-line-height: 1.2;
195
- --mds-font-type-body-copy-default-size: 16px;
161
+ --mds-font-type-body-copy-default-size: 1rem;
196
162
  --mds-font-type-body-copy-default-line-height: 1.38;
197
- --mds-font-type-body-copy-sm-size: 16px;
163
+ --mds-font-type-body-copy-sm-size: 1rem;
198
164
  --mds-font-type-body-copy-sm-line-height: 1.38;
199
- --mds-font-type-body-copy-md-size: 18px;
165
+ --mds-font-type-body-copy-md-size: 1.125rem;
200
166
  --mds-font-type-body-copy-md-line-height: 1.34;
201
- --mds-font-type-body-copy-lg-size: 16px;
167
+ --mds-font-type-body-copy-lg-size: 1rem;
202
168
  --mds-font-type-body-copy-lg-line-height: 1.38;
203
- --mds-font-type-body-copy-bulk-default-size: 16px;
169
+ --mds-font-type-body-copy-bulk-default-size: 1rem;
204
170
  --mds-font-type-body-copy-bulk-default-line-height: 1.75;
205
- --mds-font-type-body-copy-bulk-sm-size: 16px;
171
+ --mds-font-type-body-copy-bulk-sm-size: 1rem;
206
172
  --mds-font-type-body-copy-bulk-sm-line-height: 1.75;
207
- --mds-font-type-body-copy-bulk-md-size: 18px;
173
+ --mds-font-type-body-copy-bulk-md-size: 1.125rem;
208
174
  --mds-font-type-body-copy-bulk-md-line-height: 1.67;
209
- --mds-font-type-body-copy-bulk-lg-size: 16px;
175
+ --mds-font-type-body-copy-bulk-lg-size: 1rem;
210
176
  --mds-font-type-body-copy-bulk-lg-line-height: 1.75;
211
- --mds-font-type-pica-default-size: 15px;
177
+ --mds-font-type-pica-default-size: 0.9375rem;
212
178
  --mds-font-type-pica-default-line-height: 1.34;
213
- --mds-font-type-pica-sm-size: 16px;
179
+ --mds-font-type-pica-sm-size: 1rem;
214
180
  --mds-font-type-pica-sm-line-height: 1.25;
215
- --mds-font-type-pica-md-size: 18px;
181
+ --mds-font-type-pica-md-size: 1.125rem;
216
182
  --mds-font-type-pica-md-line-height: 1.23;
217
- --mds-font-type-pica-lg-size: 16px;
183
+ --mds-font-type-pica-lg-size: 1rem;
218
184
  --mds-font-type-pica-lg-line-height: 1.25;
219
- --mds-font-type-long-primer-default-size: 15px;
185
+ --mds-font-type-long-primer-default-size: 0.9375rem;
220
186
  --mds-font-type-long-primer-default-line-height: 1.2;
221
- --mds-font-type-long-primer-sm-size: 15px;
187
+ --mds-font-type-long-primer-sm-size: 0.9375rem;
222
188
  --mds-font-type-long-primer-sm-line-height: 1.2;
223
- --mds-font-type-long-primer-md-size: 15px;
189
+ --mds-font-type-long-primer-md-size: 0.9375rem;
224
190
  --mds-font-type-long-primer-md-line-height: 1.34;
225
- --mds-font-type-long-primer-lg-size: 14px;
191
+ --mds-font-type-long-primer-lg-size: 0.875rem;
226
192
  --mds-font-type-long-primer-lg-line-height: 1.29;
227
- --mds-font-type-brevier-default-size: 14px;
193
+ --mds-font-type-brevier-default-size: 0.875rem;
228
194
  --mds-font-type-brevier-default-line-height: 1.15;
229
- --mds-font-type-brevier-sm-size: 14px;
195
+ --mds-font-type-brevier-sm-size: 0.875rem;
230
196
  --mds-font-type-brevier-sm-line-height: 1.29;
231
- --mds-font-type-brevier-md-size: 14px;
197
+ --mds-font-type-brevier-md-size: 0.875rem;
232
198
  --mds-font-type-brevier-md-line-height: 1.29;
233
- --mds-font-type-brevier-lg-size: 13px;
199
+ --mds-font-type-brevier-lg-size: 0.8125rem;
234
200
  --mds-font-type-brevier-lg-line-height: 1.24;
235
- --mds-font-type-minion-default-size: 12px;
201
+ --mds-font-type-minion-default-size: 0.75rem;
236
202
  --mds-font-type-minion-default-line-height: 1.34;
237
- --mds-font-type-minion-sm-size: 12px;
203
+ --mds-font-type-minion-sm-size: 0.75rem;
238
204
  --mds-font-type-minion-sm-line-height: 1.34;
239
- --mds-font-type-minion-md-size: 13px;
205
+ --mds-font-type-minion-md-size: 0.8125rem;
240
206
  --mds-font-type-minion-md-line-height: 1.24;
241
- --mds-font-type-minion-lg-size: 12px;
207
+ --mds-font-type-minion-lg-size: 0.75rem;
242
208
  --mds-font-type-minion-lg-line-height: 1.34;
243
209
  --mds-text-transform-button: none;
244
210
  }