@madgex/design-system 5.11.3 → 6.0.1

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 +5 -21
  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 +24 -10
  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/dist/_tokens/scss/_tokens.scss DELETED
@@ -1,741 +0,0 @@
1
-
2
- /**
3
- * Do not edit directly
4
- * Generated on Thu, 16 Nov 2023 11:39:48 GMT
5
- */
6
-
7
- $mds-color-brand-1-light: #2990e0 !default;
8
- $mds-color-brand-1-lightest: #e9f3fc !default;
9
- $mds-color-brand-1-dark: #15598e !default;
10
- $mds-color-brand-1-darkest: #082135 !default;
11
- $mds-color-brand-1-base: #1b75bb !default;
12
- $mds-color-brand-2-light: #f9007b !default;
13
- $mds-color-brand-2-lightest: #ffe5f2 !default;
14
- $mds-color-brand-2-dark: #930049 !default;
15
- $mds-color-brand-2-darkest: #3d001e !default;
16
- $mds-color-brand-2-base: #c60062 !default;
17
- $mds-color-brand-3-light: #24e6d7 !default;
18
- $mds-color-brand-3-lightest: #e8fcfb !default;
19
- $mds-color-brand-3-dark: #119389 !default;
20
- $mds-color-brand-3-darkest: #063733 !default;
21
- $mds-color-brand-3-base: #16c1b4 !default;
22
- $mds-color-status-error-light: #fd0826 !default;
23
- $mds-color-status-error-lightest: #ffe3e6 !default;
24
- $mds-color-status-error-dark: #d0021b !default;
25
- $mds-color-status-error-darkest: #ae0216 !default;
26
- $mds-color-status-error-base: #e1021d !default;
27
- $mds-color-status-success-light: #6ac52d !default;
28
- $mds-color-status-success-lightest: #f0faea !default;
29
- $mds-color-status-success-dark: #549b24 !default;
30
- $mds-color-status-success-darkest: #40791b !default;
31
- $mds-color-status-success-base: #5ba927 !default;
32
- $mds-color-status-info-light: #ffc442 !default;
33
- $mds-color-status-info-lightest: #fff7e5 !default;
34
- $mds-color-status-info-dark: #f4aa08 !default;
35
- $mds-color-status-info-darkest: #946500 !default;
36
- $mds-color-status-info-base: #ffb411 !default;
37
- $mds-color-background-body: #ffffff !default;
38
- $mds-color-background-site-container: #f8f8f8 !default;
39
- $mds-color-background-surface: #ffffff !default;
40
- $mds-color-background-main: rgba(0, 0, 0, 0) !default;
41
- $mds-color-neutral-white: #ffffff !default;
42
- $mds-color-neutral-black: #000000 !default;
43
- $mds-color-neutral-base: #707070 !default;
44
- $mds-color-neutral-light: #949494 !default;
45
- $mds-color-neutral-lighter: #dddddd !default;
46
- $mds-color-neutral-lightest: #f8f8f8 !default;
47
- $mds-color-neutral-darker: #333333 !default;
48
- $mds-color-text-base: #343433 !default;
49
- $mds-color-text-invert: #ffffff !default;
50
- $mds-color-text-headers-1: #222222 !default;
51
- $mds-color-text-headers-2: #222222 !default;
52
- $mds-color-text-headers-3: #222222 !default;
53
- $mds-color-text-headers-base: #222222 !default;
54
- $mds-color-border: #dddddd !default;
55
- $mds-color-button-bg-base: #c60062 !default;
56
- $mds-color-button-bg-hover: #f9007b !default;
57
- $mds-color-button-text-base: #ffffff !default;
58
- $mds-color-button-text-hover: #ffffff !default;
59
- $mds-color-button-border-base: rgba(0, 0, 0, 0) !default;
60
- $mds-color-button-border-top: rgba(0, 0, 0, 0) !default;
61
- $mds-color-button-border-right: rgba(0, 0, 0, 0) !default;
62
- $mds-color-button-border-bottom: rgba(0, 0, 0, 0) !default;
63
- $mds-color-button-border-left: rgba(0, 0, 0, 0) !default;
64
- $mds-color-button-border-hover-base: rgba(0, 0, 0, 0) !default;
65
- $mds-color-button-border-hover-top: rgba(0, 0, 0, 0) !default;
66
- $mds-color-button-border-hover-right: rgba(0, 0, 0, 0) !default;
67
- $mds-color-button-border-hover-bottom: rgba(0, 0, 0, 0) !default;
68
- $mds-color-button-border-hover-left: rgba(0, 0, 0, 0) !default;
69
- $mds-color-link-base: #1b75bb !default;
70
- $mds-color-link-hover: #15598e !default;
71
- $mds-color-branded-container-1-background: #1b75bb !default;
72
- $mds-color-branded-container-1-text: #ffffff !default;
73
- $mds-color-ad-container-leaderboard-background: #ffffff !default;
74
- $mds-color-input-checked: #000000 !default;
75
- $mds-color-input-border: #707070 !default;
76
- $mds-color-input-focus: #5092fd !default;
77
- $mds-color-input-disabled-label: rgba(84, 84, 84, 0.5) !default;
78
- $mds-color-input-disabled-field: rgba(176, 176, 176, 0.5) !default;
79
- $mds-color-pill-bg-base: #1b75bb !default;
80
- $mds-color-pill-bg-hover: #2990e0 !default;
81
- $mds-color-pill-text-base: #ffffff !default;
82
- $mds-color-pill-text-hover: #ffffff !default;
83
- $mds-custom-badge-1-background: #000000 !default;
84
- $mds-custom-badge-1-color: #fff !default;
85
- $mds-custom-badge-2-background: #40791B !default;
86
- $mds-custom-badge-2-color: #fff !default;
87
- $mds-custom-card-1-background: #e9f3fc !default;
88
- $mds-custom-card-1-border: 1px solid #1b75bb !default;
89
- $mds-shadow-base: 0 2px 5px 0 #dddddd !default;
90
- $mds-shadow-site-container: none !default;
91
- $mds-shadow-main: none !default;
92
- $mds-email-color-link-base: #1b75bb !default;
93
- $mds-email-color-link-hover: #15598e !default;
94
- $mds-email-color-button-bg-base: #c60062 !default;
95
- $mds-email-color-button-bg-hover: #f9007b !default;
96
- $mds-email-color-button-text-base: #ffffff !default;
97
- $mds-email-color-button-text-hover: #ffffff !default;
98
- $mds-email-color-button-border-base: rgba(0, 0, 0, 0) !default;
99
- $mds-email-color-button-border-top: rgba(0, 0, 0, 0) !default;
100
- $mds-email-color-button-border-right: rgba(0, 0, 0, 0) !default;
101
- $mds-email-color-button-border-bottom: rgba(0, 0, 0, 0) !default;
102
- $mds-email-color-button-border-left: rgba(0, 0, 0, 0) !default;
103
- $mds-email-color-button-border-hover-base: rgba(0, 0, 0, 0) !default;
104
- $mds-email-color-button-border-hover-top: rgba(0, 0, 0, 0) !default;
105
- $mds-email-color-button-border-hover-right: rgba(0, 0, 0, 0) !default;
106
- $mds-email-color-button-border-hover-bottom: rgba(0, 0, 0, 0) !default;
107
- $mds-email-color-button-border-hover-left: rgba(0, 0, 0, 0) !default;
108
- $mds-email-font-family-heading-1: "Helvetica", Arial, sans-serif !default;
109
- $mds-email-font-family-heading-2: "Helvetica", Arial, sans-serif !default;
110
- $mds-email-font-family-heading-3: "Helvetica", Arial, sans-serif !default;
111
- $mds-email-font-family-heading-base: "Helvetica", Arial, sans-serif !default;
112
- $mds-email-size-button-border-radius: 4px !default;
113
- $mds-email-size-button-border-width: 1px !default;
114
- $mds-size-baseline: 4px !default;
115
- $mds-size-breakpoint-sm: 400px !default;
116
- $mds-size-breakpoint-md: 600px !default;
117
- $mds-size-breakpoint-lg: 1008px !default;
118
- $mds-size-breakpoint-xl: 1280px !default;
119
- $mds-size-border-width-base: 1px !default;
120
- $mds-size-border-width-button: 1px !default;
121
- $mds-size-border-radius-base: 4px !default;
122
- $mds-size-border-radius-button: 4px !default;
123
- $mds-size-border-radius-main: 0 !default;
124
- $mds-size-gutter-width: 20px !default;
125
- $mds-size-container-width: 100% !default;
126
- $mds-size-container-min-width: 0 !default;
127
- $mds-size-container-max-width: 100% !default;
128
- $mds-size-wrapper-width: 97% !default;
129
- $mds-size-wrapper-max-width: 1240px !default;
130
- $mds-size-surface-padding: 16px !default;
131
- $mds-size-main-max-width: 100% !default;
132
- $mds-size-main-padding: 0 !default;
133
- $mds-size-main-margin: 0 auto !default;
134
- $mds-size-icon-default: 1em !default;
135
- $mds-size-icon-sm: 16px !default;
136
- $mds-size-icon-md: 24px !default;
137
- $mds-size-icon-lg: 32px !default;
138
- $mds-size-icon-xl: 48px !default;
139
- $mds-size-icon-xxl: 72px !default;
140
- $mds-size-height-ad-container-leaderboard-min: 0 !default;
141
- $mds-font-family-base: "Helvetica", Arial, sans-serif !default;
142
- $mds-font-family-heading-1: "Helvetica", Arial, sans-serif !default;
143
- $mds-font-family-heading-2: "Helvetica", Arial, sans-serif !default;
144
- $mds-font-family-heading-3: "Helvetica", Arial, sans-serif !default;
145
- $mds-font-family-heading-base: "Helvetica", Arial, sans-serif !default;
146
- $mds-font-family-button-base: "Helvetica", Arial, sans-serif !default;
147
- $mds-font-weight-base: 400 !default;
148
- $mds-font-weight-heading-1: 400 !default;
149
- $mds-font-weight-heading-2: 400 !default;
150
- $mds-font-weight-heading-3: 400 !default;
151
- $mds-font-weight-heading-base: 400 !default;
152
- $mds-font-weight-button-base: 400 !default;
153
- $mds-font-weight-link-base: inherit !default;
154
- $mds-font-size-base: 16px !default;
155
- $mds-font-type-canon-default-size: 28px !default;
156
- $mds-font-type-canon-default-line-height: 1.15 !default;
157
- $mds-font-type-canon-sm-size: 32px !default;
158
- $mds-font-type-canon-sm-line-height: 1.13 !default;
159
- $mds-font-type-canon-md-size: 52px !default;
160
- $mds-font-type-canon-md-line-height: 1.08 !default;
161
- $mds-font-type-canon-lg-size: 44px !default;
162
- $mds-font-type-canon-lg-line-height: 1.1 !default;
163
- $mds-font-type-trafalgar-default-size: 20px !default;
164
- $mds-font-type-trafalgar-default-line-height: 1.2 !default;
165
- $mds-font-type-trafalgar-sm-size: 24px !default;
166
- $mds-font-type-trafalgar-sm-line-height: 1.17 !default;
167
- $mds-font-type-trafalgar-md-size: 36px !default;
168
- $mds-font-type-trafalgar-md-line-height: 1.12 !default;
169
- $mds-font-type-trafalgar-lg-size: 32px !default;
170
- $mds-font-type-trafalgar-lg-line-height: 1.13 !default;
171
- $mds-font-type-paragon-default-size: 20px !default;
172
- $mds-font-type-paragon-default-line-height: 1.2 !default;
173
- $mds-font-type-paragon-sm-size: 22px !default;
174
- $mds-font-type-paragon-sm-line-height: 1.19 !default;
175
- $mds-font-type-paragon-md-size: 28px !default;
176
- $mds-font-type-paragon-md-line-height: 1.15 !default;
177
- $mds-font-type-paragon-lg-size: 28px !default;
178
- $mds-font-type-paragon-lg-line-height: 1.15 !default;
179
- $mds-font-type-double-pica-default-size: 20px !default;
180
- $mds-font-type-double-pica-default-line-height: 1.2 !default;
181
- $mds-font-type-double-pica-sm-size: 20px !default;
182
- $mds-font-type-double-pica-sm-line-height: 1.2 !default;
183
- $mds-font-type-double-pica-md-size: 26px !default;
184
- $mds-font-type-double-pica-md-line-height: 1.16 !default;
185
- $mds-font-type-double-pica-lg-size: 24px !default;
186
- $mds-font-type-double-pica-lg-line-height: 1.17 !default;
187
- $mds-font-type-great-primer-default-size: 18px !default;
188
- $mds-font-type-great-primer-default-line-height: 1.23 !default;
189
- $mds-font-type-great-primer-sm-size: 18px !default;
190
- $mds-font-type-great-primer-sm-line-height: 1.23 !default;
191
- $mds-font-type-great-primer-md-size: 21px !default;
192
- $mds-font-type-great-primer-md-line-height: 1.15 !default;
193
- $mds-font-type-great-primer-lg-size: 20px !default;
194
- $mds-font-type-great-primer-lg-line-height: 1.2 !default;
195
- $mds-font-type-body-copy-default-size: 16px !default;
196
- $mds-font-type-body-copy-default-line-height: 1.38 !default;
197
- $mds-font-type-body-copy-sm-size: 16px !default;
198
- $mds-font-type-body-copy-sm-line-height: 1.38 !default;
199
- $mds-font-type-body-copy-md-size: 18px !default;
200
- $mds-font-type-body-copy-md-line-height: 1.34 !default;
201
- $mds-font-type-body-copy-lg-size: 16px !default;
202
- $mds-font-type-body-copy-lg-line-height: 1.38 !default;
203
- $mds-font-type-body-copy-bulk-default-size: 16px !default;
204
- $mds-font-type-body-copy-bulk-default-line-height: 1.75 !default;
205
- $mds-font-type-body-copy-bulk-sm-size: 16px !default;
206
- $mds-font-type-body-copy-bulk-sm-line-height: 1.75 !default;
207
- $mds-font-type-body-copy-bulk-md-size: 18px !default;
208
- $mds-font-type-body-copy-bulk-md-line-height: 1.67 !default;
209
- $mds-font-type-body-copy-bulk-lg-size: 16px !default;
210
- $mds-font-type-body-copy-bulk-lg-line-height: 1.75 !default;
211
- $mds-font-type-pica-default-size: 15px !default;
212
- $mds-font-type-pica-default-line-height: 1.34 !default;
213
- $mds-font-type-pica-sm-size: 16px !default;
214
- $mds-font-type-pica-sm-line-height: 1.25 !default;
215
- $mds-font-type-pica-md-size: 18px !default;
216
- $mds-font-type-pica-md-line-height: 1.23 !default;
217
- $mds-font-type-pica-lg-size: 16px !default;
218
- $mds-font-type-pica-lg-line-height: 1.25 !default;
219
- $mds-font-type-long-primer-default-size: 15px !default;
220
- $mds-font-type-long-primer-default-line-height: 1.2 !default;
221
- $mds-font-type-long-primer-sm-size: 15px !default;
222
- $mds-font-type-long-primer-sm-line-height: 1.2 !default;
223
- $mds-font-type-long-primer-md-size: 15px !default;
224
- $mds-font-type-long-primer-md-line-height: 1.34 !default;
225
- $mds-font-type-long-primer-lg-size: 14px !default;
226
- $mds-font-type-long-primer-lg-line-height: 1.29 !default;
227
- $mds-font-type-brevier-default-size: 14px !default;
228
- $mds-font-type-brevier-default-line-height: 1.15 !default;
229
- $mds-font-type-brevier-sm-size: 14px !default;
230
- $mds-font-type-brevier-sm-line-height: 1.29 !default;
231
- $mds-font-type-brevier-md-size: 14px !default;
232
- $mds-font-type-brevier-md-line-height: 1.29 !default;
233
- $mds-font-type-brevier-lg-size: 13px !default;
234
- $mds-font-type-brevier-lg-line-height: 1.24 !default;
235
- $mds-font-type-minion-default-size: 12px !default;
236
- $mds-font-type-minion-default-line-height: 1.34 !default;
237
- $mds-font-type-minion-sm-size: 12px !default;
238
- $mds-font-type-minion-sm-line-height: 1.34 !default;
239
- $mds-font-type-minion-md-size: 13px !default;
240
- $mds-font-type-minion-md-line-height: 1.24 !default;
241
- $mds-font-type-minion-lg-size: 12px !default;
242
- $mds-font-type-minion-lg-line-height: 1.34 !default;
243
- $mds-text-transform-button: none !default;
244
-
245
- $tokens: (
246
- 'color': (
247
- 'brand': (
248
- '1': (
249
- 'light': $mds-color-brand-1-light,
250
- 'lightest': $mds-color-brand-1-lightest,
251
- 'dark': $mds-color-brand-1-dark,
252
- 'darkest': $mds-color-brand-1-darkest,
253
- 'base': $mds-color-brand-1-base
254
- ),
255
- '2': (
256
- 'light': $mds-color-brand-2-light,
257
- 'lightest': $mds-color-brand-2-lightest,
258
- 'dark': $mds-color-brand-2-dark,
259
- 'darkest': $mds-color-brand-2-darkest,
260
- 'base': $mds-color-brand-2-base
261
- ),
262
- '3': (
263
- 'light': $mds-color-brand-3-light,
264
- 'lightest': $mds-color-brand-3-lightest,
265
- 'dark': $mds-color-brand-3-dark,
266
- 'darkest': $mds-color-brand-3-darkest,
267
- 'base': $mds-color-brand-3-base
268
- )
269
- ),
270
- 'status': (
271
- 'error': (
272
- 'light': $mds-color-status-error-light,
273
- 'lightest': $mds-color-status-error-lightest,
274
- 'dark': $mds-color-status-error-dark,
275
- 'darkest': $mds-color-status-error-darkest,
276
- 'base': $mds-color-status-error-base
277
- ),
278
- 'success': (
279
- 'light': $mds-color-status-success-light,
280
- 'lightest': $mds-color-status-success-lightest,
281
- 'dark': $mds-color-status-success-dark,
282
- 'darkest': $mds-color-status-success-darkest,
283
- 'base': $mds-color-status-success-base
284
- ),
285
- 'info': (
286
- 'light': $mds-color-status-info-light,
287
- 'lightest': $mds-color-status-info-lightest,
288
- 'dark': $mds-color-status-info-dark,
289
- 'darkest': $mds-color-status-info-darkest,
290
- 'base': $mds-color-status-info-base
291
- )
292
- ),
293
- 'background': (
294
- 'body': $mds-color-background-body,
295
- 'site-container': $mds-color-background-site-container,
296
- 'surface': $mds-color-background-surface,
297
- 'main': $mds-color-background-main
298
- ),
299
- 'neutral': (
300
- 'white': $mds-color-neutral-white,
301
- 'black': $mds-color-neutral-black,
302
- 'base': $mds-color-neutral-base,
303
- 'light': $mds-color-neutral-light,
304
- 'lighter': $mds-color-neutral-lighter,
305
- 'lightest': $mds-color-neutral-lightest,
306
- 'darker': $mds-color-neutral-darker
307
- ),
308
- 'text': (
309
- 'base': $mds-color-text-base,
310
- 'invert': $mds-color-text-invert,
311
- 'headers': (
312
- '1': $mds-color-text-headers-1,
313
- '2': $mds-color-text-headers-2,
314
- '3': $mds-color-text-headers-3,
315
- 'base': $mds-color-text-headers-base
316
- )
317
- ),
318
- 'border': $mds-color-border,
319
- 'button': (
320
- 'bg': (
321
- 'base': $mds-color-button-bg-base,
322
- 'hover': $mds-color-button-bg-hover
323
- ),
324
- 'text': (
325
- 'base': $mds-color-button-text-base,
326
- 'hover': $mds-color-button-text-hover
327
- ),
328
- 'border': (
329
- 'base': $mds-color-button-border-base,
330
- 'top': $mds-color-button-border-top,
331
- 'right': $mds-color-button-border-right,
332
- 'bottom': $mds-color-button-border-bottom,
333
- 'left': $mds-color-button-border-left,
334
- 'hover': (
335
- 'base': $mds-color-button-border-hover-base,
336
- 'top': $mds-color-button-border-hover-top,
337
- 'right': $mds-color-button-border-hover-right,
338
- 'bottom': $mds-color-button-border-hover-bottom,
339
- 'left': $mds-color-button-border-hover-left
340
- )
341
- )
342
- ),
343
- 'link': (
344
- 'base': $mds-color-link-base,
345
- 'hover': $mds-color-link-hover
346
- ),
347
- 'branded-container': (
348
- '1': (
349
- 'background': $mds-color-branded-container-1-background,
350
- 'text': $mds-color-branded-container-1-text
351
- )
352
- ),
353
- 'ad-container': (
354
- 'leaderboard': (
355
- 'background': $mds-color-ad-container-leaderboard-background
356
- )
357
- ),
358
- 'input': (
359
- 'checked': $mds-color-input-checked,
360
- 'border': $mds-color-input-border,
361
- 'focus': $mds-color-input-focus,
362
- 'disabled': (
363
- 'label': $mds-color-input-disabled-label,
364
- 'field': $mds-color-input-disabled-field
365
- )
366
- ),
367
- 'pill': (
368
- 'bg': (
369
- 'base': $mds-color-pill-bg-base,
370
- 'hover': $mds-color-pill-bg-hover
371
- ),
372
- 'text': (
373
- 'base': $mds-color-pill-text-base,
374
- 'hover': $mds-color-pill-text-hover
375
- )
376
- )
377
- ),
378
- 'custom': (
379
- 'badge': (
380
- '1': (
381
- 'background': $mds-custom-badge-1-background,
382
- 'color': $mds-custom-badge-1-color
383
- ),
384
- '2': (
385
- 'background': $mds-custom-badge-2-background,
386
- 'color': $mds-custom-badge-2-color
387
- )
388
- ),
389
- 'card': (
390
- '1': (
391
- 'background': $mds-custom-card-1-background,
392
- 'border': $mds-custom-card-1-border
393
- )
394
- )
395
- ),
396
- 'shadow': (
397
- 'base': $mds-shadow-base,
398
- 'site-container': $mds-shadow-site-container,
399
- 'main': $mds-shadow-main
400
- ),
401
- 'email': (
402
- 'color': (
403
- 'link': (
404
- 'base': $mds-email-color-link-base,
405
- 'hover': $mds-email-color-link-hover
406
- ),
407
- 'button': (
408
- 'bg': (
409
- 'base': $mds-email-color-button-bg-base,
410
- 'hover': $mds-email-color-button-bg-hover
411
- ),
412
- 'text': (
413
- 'base': $mds-email-color-button-text-base,
414
- 'hover': $mds-email-color-button-text-hover
415
- ),
416
- 'border': (
417
- 'base': $mds-email-color-button-border-base,
418
- 'top': $mds-email-color-button-border-top,
419
- 'right': $mds-email-color-button-border-right,
420
- 'bottom': $mds-email-color-button-border-bottom,
421
- 'left': $mds-email-color-button-border-left,
422
- 'hover': (
423
- 'base': $mds-email-color-button-border-hover-base,
424
- 'top': $mds-email-color-button-border-hover-top,
425
- 'right': $mds-email-color-button-border-hover-right,
426
- 'bottom': $mds-email-color-button-border-hover-bottom,
427
- 'left': $mds-email-color-button-border-hover-left
428
- )
429
- )
430
- )
431
- ),
432
- 'font': (
433
- 'family': (
434
- 'heading': (
435
- '1': $mds-email-font-family-heading-1,
436
- '2': $mds-email-font-family-heading-2,
437
- '3': $mds-email-font-family-heading-3,
438
- 'base': $mds-email-font-family-heading-base
439
- )
440
- )
441
- ),
442
- 'size': (
443
- 'button': (
444
- 'border': (
445
- 'radius': $mds-email-size-button-border-radius,
446
- 'width': $mds-email-size-button-border-width
447
- )
448
- )
449
- )
450
- ),
451
- 'size': (
452
- 'baseline': $mds-size-baseline,
453
- 'breakpoint': (
454
- 'sm': $mds-size-breakpoint-sm,
455
- 'md': $mds-size-breakpoint-md,
456
- 'lg': $mds-size-breakpoint-lg,
457
- 'xl': $mds-size-breakpoint-xl
458
- ),
459
- 'border': (
460
- 'width': (
461
- 'base': $mds-size-border-width-base,
462
- 'button': $mds-size-border-width-button
463
- ),
464
- 'radius': (
465
- 'base': $mds-size-border-radius-base,
466
- 'button': $mds-size-border-radius-button,
467
- 'main': $mds-size-border-radius-main
468
- )
469
- ),
470
- 'gutter-width': $mds-size-gutter-width,
471
- 'container': (
472
- 'width': $mds-size-container-width,
473
- 'min-width': $mds-size-container-min-width,
474
- 'max-width': $mds-size-container-max-width
475
- ),
476
- 'wrapper': (
477
- 'width': $mds-size-wrapper-width,
478
- 'max-width': $mds-size-wrapper-max-width
479
- ),
480
- 'surface': (
481
- 'padding': $mds-size-surface-padding
482
- ),
483
- 'main': (
484
- 'max-width': $mds-size-main-max-width,
485
- 'padding': $mds-size-main-padding,
486
- 'margin': $mds-size-main-margin
487
- ),
488
- 'icon': (
489
- 'default': $mds-size-icon-default,
490
- 'sm': $mds-size-icon-sm,
491
- 'md': $mds-size-icon-md,
492
- 'lg': $mds-size-icon-lg,
493
- 'xl': $mds-size-icon-xl,
494
- 'xxl': $mds-size-icon-xxl
495
- ),
496
- 'height': (
497
- 'ad-container': (
498
- 'leaderboard': (
499
- 'min': $mds-size-height-ad-container-leaderboard-min
500
- )
501
- )
502
- )
503
- ),
504
- 'font': (
505
- 'family': (
506
- 'base': $mds-font-family-base,
507
- 'heading': (
508
- '1': $mds-font-family-heading-1,
509
- '2': $mds-font-family-heading-2,
510
- '3': $mds-font-family-heading-3,
511
- 'base': $mds-font-family-heading-base
512
- ),
513
- 'button': (
514
- 'base': $mds-font-family-button-base
515
- )
516
- ),
517
- 'weight': (
518
- 'base': $mds-font-weight-base,
519
- 'heading': (
520
- '1': $mds-font-weight-heading-1,
521
- '2': $mds-font-weight-heading-2,
522
- '3': $mds-font-weight-heading-3,
523
- 'base': $mds-font-weight-heading-base
524
- ),
525
- 'button': (
526
- 'base': $mds-font-weight-button-base
527
- ),
528
- 'link': (
529
- 'base': $mds-font-weight-link-base
530
- )
531
- ),
532
- 'size': (
533
- 'base': $mds-font-size-base
534
- ),
535
- 'type': (
536
- 'canon': (
537
- 'default': (
538
- 'size': $mds-font-type-canon-default-size,
539
- 'line-height': $mds-font-type-canon-default-line-height
540
- ),
541
- 'sm': (
542
- 'size': $mds-font-type-canon-sm-size,
543
- 'line-height': $mds-font-type-canon-sm-line-height
544
- ),
545
- 'md': (
546
- 'size': $mds-font-type-canon-md-size,
547
- 'line-height': $mds-font-type-canon-md-line-height
548
- ),
549
- 'lg': (
550
- 'size': $mds-font-type-canon-lg-size,
551
- 'line-height': $mds-font-type-canon-lg-line-height
552
- )
553
- ),
554
- 'trafalgar': (
555
- 'default': (
556
- 'size': $mds-font-type-trafalgar-default-size,
557
- 'line-height': $mds-font-type-trafalgar-default-line-height
558
- ),
559
- 'sm': (
560
- 'size': $mds-font-type-trafalgar-sm-size,
561
- 'line-height': $mds-font-type-trafalgar-sm-line-height
562
- ),
563
- 'md': (
564
- 'size': $mds-font-type-trafalgar-md-size,
565
- 'line-height': $mds-font-type-trafalgar-md-line-height
566
- ),
567
- 'lg': (
568
- 'size': $mds-font-type-trafalgar-lg-size,
569
- 'line-height': $mds-font-type-trafalgar-lg-line-height
570
- )
571
- ),
572
- 'paragon': (
573
- 'default': (
574
- 'size': $mds-font-type-paragon-default-size,
575
- 'line-height': $mds-font-type-paragon-default-line-height
576
- ),
577
- 'sm': (
578
- 'size': $mds-font-type-paragon-sm-size,
579
- 'line-height': $mds-font-type-paragon-sm-line-height
580
- ),
581
- 'md': (
582
- 'size': $mds-font-type-paragon-md-size,
583
- 'line-height': $mds-font-type-paragon-md-line-height
584
- ),
585
- 'lg': (
586
- 'size': $mds-font-type-paragon-lg-size,
587
- 'line-height': $mds-font-type-paragon-lg-line-height
588
- )
589
- ),
590
- 'double-pica': (
591
- 'default': (
592
- 'size': $mds-font-type-double-pica-default-size,
593
- 'line-height': $mds-font-type-double-pica-default-line-height
594
- ),
595
- 'sm': (
596
- 'size': $mds-font-type-double-pica-sm-size,
597
- 'line-height': $mds-font-type-double-pica-sm-line-height
598
- ),
599
- 'md': (
600
- 'size': $mds-font-type-double-pica-md-size,
601
- 'line-height': $mds-font-type-double-pica-md-line-height
602
- ),
603
- 'lg': (
604
- 'size': $mds-font-type-double-pica-lg-size,
605
- 'line-height': $mds-font-type-double-pica-lg-line-height
606
- )
607
- ),
608
- 'great-primer': (
609
- 'default': (
610
- 'size': $mds-font-type-great-primer-default-size,
611
- 'line-height': $mds-font-type-great-primer-default-line-height
612
- ),
613
- 'sm': (
614
- 'size': $mds-font-type-great-primer-sm-size,
615
- 'line-height': $mds-font-type-great-primer-sm-line-height
616
- ),
617
- 'md': (
618
- 'size': $mds-font-type-great-primer-md-size,
619
- 'line-height': $mds-font-type-great-primer-md-line-height
620
- ),
621
- 'lg': (
622
- 'size': $mds-font-type-great-primer-lg-size,
623
- 'line-height': $mds-font-type-great-primer-lg-line-height
624
- )
625
- ),
626
- 'body-copy': (
627
- 'default': (
628
- 'size': $mds-font-type-body-copy-default-size,
629
- 'line-height': $mds-font-type-body-copy-default-line-height
630
- ),
631
- 'sm': (
632
- 'size': $mds-font-type-body-copy-sm-size,
633
- 'line-height': $mds-font-type-body-copy-sm-line-height
634
- ),
635
- 'md': (
636
- 'size': $mds-font-type-body-copy-md-size,
637
- 'line-height': $mds-font-type-body-copy-md-line-height
638
- ),
639
- 'lg': (
640
- 'size': $mds-font-type-body-copy-lg-size,
641
- 'line-height': $mds-font-type-body-copy-lg-line-height
642
- )
643
- ),
644
- 'body-copy-bulk': (
645
- 'default': (
646
- 'size': $mds-font-type-body-copy-bulk-default-size,
647
- 'line-height': $mds-font-type-body-copy-bulk-default-line-height
648
- ),
649
- 'sm': (
650
- 'size': $mds-font-type-body-copy-bulk-sm-size,
651
- 'line-height': $mds-font-type-body-copy-bulk-sm-line-height
652
- ),
653
- 'md': (
654
- 'size': $mds-font-type-body-copy-bulk-md-size,
655
- 'line-height': $mds-font-type-body-copy-bulk-md-line-height
656
- ),
657
- 'lg': (
658
- 'size': $mds-font-type-body-copy-bulk-lg-size,
659
- 'line-height': $mds-font-type-body-copy-bulk-lg-line-height
660
- )
661
- ),
662
- 'pica': (
663
- 'default': (
664
- 'size': $mds-font-type-pica-default-size,
665
- 'line-height': $mds-font-type-pica-default-line-height
666
- ),
667
- 'sm': (
668
- 'size': $mds-font-type-pica-sm-size,
669
- 'line-height': $mds-font-type-pica-sm-line-height
670
- ),
671
- 'md': (
672
- 'size': $mds-font-type-pica-md-size,
673
- 'line-height': $mds-font-type-pica-md-line-height
674
- ),
675
- 'lg': (
676
- 'size': $mds-font-type-pica-lg-size,
677
- 'line-height': $mds-font-type-pica-lg-line-height
678
- )
679
- ),
680
- 'long-primer': (
681
- 'default': (
682
- 'size': $mds-font-type-long-primer-default-size,
683
- 'line-height': $mds-font-type-long-primer-default-line-height
684
- ),
685
- 'sm': (
686
- 'size': $mds-font-type-long-primer-sm-size,
687
- 'line-height': $mds-font-type-long-primer-sm-line-height
688
- ),
689
- 'md': (
690
- 'size': $mds-font-type-long-primer-md-size,
691
- 'line-height': $mds-font-type-long-primer-md-line-height
692
- ),
693
- 'lg': (
694
- 'size': $mds-font-type-long-primer-lg-size,
695
- 'line-height': $mds-font-type-long-primer-lg-line-height
696
- )
697
- ),
698
- 'brevier': (
699
- 'default': (
700
- 'size': $mds-font-type-brevier-default-size,
701
- 'line-height': $mds-font-type-brevier-default-line-height
702
- ),
703
- 'sm': (
704
- 'size': $mds-font-type-brevier-sm-size,
705
- 'line-height': $mds-font-type-brevier-sm-line-height
706
- ),
707
- 'md': (
708
- 'size': $mds-font-type-brevier-md-size,
709
- 'line-height': $mds-font-type-brevier-md-line-height
710
- ),
711
- 'lg': (
712
- 'size': $mds-font-type-brevier-lg-size,
713
- 'line-height': $mds-font-type-brevier-lg-line-height
714
- )
715
- ),
716
- 'minion': (
717
- 'default': (
718
- 'size': $mds-font-type-minion-default-size,
719
- 'line-height': $mds-font-type-minion-default-line-height
720
- ),
721
- 'sm': (
722
- 'size': $mds-font-type-minion-sm-size,
723
- 'line-height': $mds-font-type-minion-sm-line-height
724
- ),
725
- 'md': (
726
- 'size': $mds-font-type-minion-md-size,
727
- 'line-height': $mds-font-type-minion-md-line-height
728
- ),
729
- 'lg': (
730
- 'size': $mds-font-type-minion-lg-size,
731
- 'line-height': $mds-font-type-minion-lg-line-height
732
- )
733
- )
734
- )
735
- ),
736
- 'text': (
737
- 'transform': (
738
- 'button': $mds-text-transform-button
739
- )
740
- )
741
- );