@moodlehq/design-system 3.2.0 → 4.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 (20) hide show
  1. package/dist/components/badge/Badge.d.ts +19 -0
  2. package/dist/components/badge/Badge2.js +43 -0
  3. package/dist/components/badge/Badge2.js.map +1 -0
  4. package/dist/components/badge/index.d.ts +1 -0
  5. package/dist/components/badge/index.js +2 -0
  6. package/dist/components/button/Button.d.ts +4 -3
  7. package/dist/components/button/Button.js +25 -11
  8. package/dist/components/button/Button.js.map +1 -1
  9. package/dist/components/checkbox/Checkbox.d.ts +23 -0
  10. package/dist/components/checkbox/Checkbox.js +68 -0
  11. package/dist/components/checkbox/Checkbox.js.map +1 -0
  12. package/dist/components/checkbox/index.d.ts +1 -0
  13. package/dist/components/checkbox/index.js +2 -0
  14. package/dist/components/index.d.ts +4 -0
  15. package/dist/index.css +625 -46
  16. package/dist/index.js +3 -1
  17. package/package.json +2 -1
  18. package/tokens/css/colors.css +1 -1
  19. package/tokens/scss/_colors.scss +1 -1
  20. package/tokens/scss/_index_css_vars.scss +340 -0
package/dist/index.js CHANGED
@@ -2,7 +2,9 @@
2
2
  /* empty css */
3
3
  /* empty css */
4
4
  import { ActivityIcon } from "./components/activity-icon/ActivityIcon.js";
5
+ import { Badge } from "./components/badge/Badge2.js";
5
6
  import { Button } from "./components/button/Button.js";
7
+ import { Checkbox } from "./components/checkbox/Checkbox.js";
6
8
  import { CloseButton } from "./components/close-button/CloseButton.js";
7
9
  import { Radio } from "./components/radio/Radio.js";
8
- export { ActivityIcon, Button, CloseButton, Radio };
10
+ export { ActivityIcon, Badge, Button, Checkbox, CloseButton, Radio };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moodlehq/design-system",
3
- "version": "3.2.0",
3
+ "version": "4.0.0",
4
4
  "description": "The Moodle Design System",
5
5
  "files": [
6
6
  "/dist",
@@ -59,6 +59,7 @@
59
59
  "@storybook/addon-themes": "^10.1.2",
60
60
  "@storybook/addon-vitest": "^10.1.2",
61
61
  "@storybook/react-vite": "^10.1.2",
62
+ "storybook-addon-pseudo-states": "^10.4.1",
62
63
  "@testing-library/dom": "^10.4.1",
63
64
  "@testing-library/jest-dom": "^6.9.1",
64
65
  "@testing-library/react": "^16.3.0",
package/tokens/css/colors.css CHANGED
@@ -20,7 +20,7 @@
20
20
  --mds-activity-icon-resource-icon: var(--mds-color-cyan-500);
21
21
  --mds-bg-feedback-danger-light: var(--mds-color-red-50);
22
22
  --mds-bg-feedback-danger-subtle: var(--mds-color-red-100);
23
- --mds-bg-feedback-info-default: var(--mds-color-cyan-500);
23
+ --mds-bg-feedback-info-default: var(--mds-color-cyan-600);
24
24
  --mds-bg-feedback-info-light: var(--mds-color-cyan-50);
25
25
  --mds-bg-feedback-info-subtle: var(--mds-color-cyan-100);
26
26
  --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
package/tokens/scss/_colors.scss CHANGED
@@ -18,7 +18,7 @@ $mds-activity-icon-resource-icon: #008196 !default;
18
18
  $mds-bg-feedback-danger-default: #ca3120 !default;
19
19
  $mds-bg-feedback-danger-light: #faeae9 !default;
20
20
  $mds-bg-feedback-danger-subtle: #f4d6d2 !default;
21
- $mds-bg-feedback-info-default: #008196 !default;
21
+ $mds-bg-feedback-info-default: #006778 !default;
22
22
  $mds-bg-feedback-info-light: #e5f2f4 !default;
23
23
  $mds-bg-feedback-info-subtle: #cce6ea !default;
24
24
  $mds-bg-feedback-primary-default: #0f6cbf !default;
package/tokens/scss/_index_css_vars.scss ADDED
@@ -0,0 +1,340 @@
1
+
2
+ // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
+
4
+ :root {
5
+ --mds-border-radius-lg: #{$mds-border-radius-lg};
6
+ --mds-border-radius-md: #{$mds-border-radius-md};
7
+ --mds-border-radius-none: #{$mds-border-radius-none};
8
+ --mds-border-radius-pill: #{$mds-border-radius-pill};
9
+ --mds-border-radius-sm: #{$mds-border-radius-sm};
10
+ --mds-border-radius-xl: #{$mds-border-radius-xl};
11
+ --mds-border-radius-xs: #{$mds-border-radius-xs};
12
+ --mds-border-radius-xxl: #{$mds-border-radius-xxl};
13
+ --mds-stroke-weight-lg: #{$mds-stroke-weight-lg};
14
+ --mds-stroke-weight-md: #{$mds-stroke-weight-md};
15
+ --mds-stroke-weight-sm: #{$mds-stroke-weight-sm};
16
+ --mds-stroke-weight-xl: #{$mds-stroke-weight-xl};
17
+ --mds-stroke-weight-xxl: #{$mds-stroke-weight-xxl};
18
+ --mds-breakpoints-lg: #{$mds-breakpoints-lg};
19
+ --mds-breakpoints-md: #{$mds-breakpoints-md};
20
+ --mds-breakpoints-sm: #{$mds-breakpoints-sm};
21
+ --mds-breakpoints-xl: #{$mds-breakpoints-xl};
22
+ --mds-breakpoints-xxl: #{$mds-breakpoints-xxl};
23
+ --mds-activity-icon-assessment-bg: #{$mds-activity-icon-assessment-bg};
24
+ --mds-activity-icon-assessment-icon: #{$mds-activity-icon-assessment-icon};
25
+ --mds-activity-icon-collaboration-bg: #{$mds-activity-icon-collaboration-bg};
26
+ --mds-activity-icon-collaboration-icon: #{$mds-activity-icon-collaboration-icon};
27
+ --mds-activity-icon-communication-bg: #{$mds-activity-icon-communication-bg};
28
+ --mds-activity-icon-communication-icon: #{$mds-activity-icon-communication-icon};
29
+ --mds-activity-icon-file-bg: #{$mds-activity-icon-file-bg};
30
+ --mds-activity-icon-file-icon: #{$mds-activity-icon-file-icon};
31
+ --mds-activity-icon-interactive-bg: #{$mds-activity-icon-interactive-bg};
32
+ --mds-activity-icon-interactive-icon: #{$mds-activity-icon-interactive-icon};
33
+ --mds-activity-icon-other-bg: #{$mds-activity-icon-other-bg};
34
+ --mds-activity-icon-other-icon: #{$mds-activity-icon-other-icon};
35
+ --mds-activity-icon-resource-bg: #{$mds-activity-icon-resource-bg};
36
+ --mds-activity-icon-resource-icon: #{$mds-activity-icon-resource-icon};
37
+ --mds-bg-feedback-danger-default: #{$mds-bg-feedback-danger-default};
38
+ --mds-bg-feedback-danger-light: #{$mds-bg-feedback-danger-light};
39
+ --mds-bg-feedback-danger-subtle: #{$mds-bg-feedback-danger-subtle};
40
+ --mds-bg-feedback-info-default: #{$mds-bg-feedback-info-default};
41
+ --mds-bg-feedback-info-light: #{$mds-bg-feedback-info-light};
42
+ --mds-bg-feedback-info-subtle: #{$mds-bg-feedback-info-subtle};
43
+ --mds-bg-feedback-primary-default: #{$mds-bg-feedback-primary-default};
44
+ --mds-bg-feedback-primary-light: #{$mds-bg-feedback-primary-light};
45
+ --mds-bg-feedback-primary-subtle: #{$mds-bg-feedback-primary-subtle};
46
+ --mds-bg-feedback-secondary-default: #{$mds-bg-feedback-secondary-default};
47
+ --mds-bg-feedback-secondary-subtle: #{$mds-bg-feedback-secondary-subtle};
48
+ --mds-bg-feedback-success-default: #{$mds-bg-feedback-success-default};
49
+ --mds-bg-feedback-success-light: #{$mds-bg-feedback-success-light};
50
+ --mds-bg-feedback-success-subtle: #{$mds-bg-feedback-success-subtle};
51
+ --mds-bg-feedback-warning-default: #{$mds-bg-feedback-warning-default};
52
+ --mds-bg-feedback-warning-light: #{$mds-bg-feedback-warning-light};
53
+ --mds-bg-feedback-warning-subtle: #{$mds-bg-feedback-warning-subtle};
54
+ --mds-bg-interactive-danger-active: #{$mds-bg-interactive-danger-active};
55
+ --mds-bg-interactive-danger-default: #{$mds-bg-interactive-danger-default};
56
+ --mds-bg-interactive-danger-default-light: #{$mds-bg-interactive-danger-default-light};
57
+ --mds-bg-interactive-danger-disabled: #{$mds-bg-interactive-danger-disabled};
58
+ --mds-bg-interactive-danger-hover: #{$mds-bg-interactive-danger-hover};
59
+ --mds-bg-interactive-primary-active: #{$mds-bg-interactive-primary-active};
60
+ --mds-bg-interactive-primary-default: #{$mds-bg-interactive-primary-default};
61
+ --mds-bg-interactive-primary-default-light: #{$mds-bg-interactive-primary-default-light};
62
+ --mds-bg-interactive-primary-disabled: #{$mds-bg-interactive-primary-disabled};
63
+ --mds-bg-interactive-primary-hover: #{$mds-bg-interactive-primary-hover};
64
+ --mds-bg-interactive-secondary-active: #{$mds-bg-interactive-secondary-active};
65
+ --mds-bg-interactive-secondary-default: #{$mds-bg-interactive-secondary-default};
66
+ --mds-bg-interactive-secondary-disabled: #{$mds-bg-interactive-secondary-disabled};
67
+ --mds-bg-interactive-secondary-hover: #{$mds-bg-interactive-secondary-hover};
68
+ --mds-bg-surface-default: #{$mds-bg-surface-default};
69
+ --mds-bg-surface-strong: #{$mds-bg-surface-strong};
70
+ --mds-bg-surface-subtle: #{$mds-bg-surface-subtle};
71
+ --mds-border-default: #{$mds-border-default};
72
+ --mds-border-feedback-danger: #{$mds-border-feedback-danger};
73
+ --mds-border-feedback-info: #{$mds-border-feedback-info};
74
+ --mds-border-feedback-primary: #{$mds-border-feedback-primary};
75
+ --mds-border-feedback-secondary: #{$mds-border-feedback-secondary};
76
+ --mds-border-feedback-success: #{$mds-border-feedback-success};
77
+ --mds-border-feedback-warning: #{$mds-border-feedback-warning};
78
+ --mds-border-interactive-danger-active: #{$mds-border-interactive-danger-active};
79
+ --mds-border-interactive-danger-default: #{$mds-border-interactive-danger-default};
80
+ --mds-border-interactive-danger-disabled: #{$mds-border-interactive-danger-disabled};
81
+ --mds-border-interactive-danger-hover: #{$mds-border-interactive-danger-hover};
82
+ --mds-border-interactive-primary-active: #{$mds-border-interactive-primary-active};
83
+ --mds-border-interactive-primary-default: #{$mds-border-interactive-primary-default};
84
+ --mds-border-interactive-primary-disabled: #{$mds-border-interactive-primary-disabled};
85
+ --mds-border-interactive-primary-hover: #{$mds-border-interactive-primary-hover};
86
+ --mds-border-interactive-secondary-active: #{$mds-border-interactive-secondary-active};
87
+ --mds-border-interactive-secondary-default: #{$mds-border-interactive-secondary-default};
88
+ --mds-border-interactive-secondary-disabled: #{$mds-border-interactive-secondary-disabled};
89
+ --mds-border-interactive-secondary-hover: #{$mds-border-interactive-secondary-hover};
90
+ --mds-border-subtle: #{$mds-border-subtle};
91
+ --mds-border-translucent: #{$mds-border-translucent};
92
+ --mds-focus-danger: #{$mds-focus-danger};
93
+ --mds-focus-default: #{$mds-focus-default};
94
+ --mds-text-danger: #{$mds-text-danger};
95
+ --mds-text-danger-disabled: #{$mds-text-danger-disabled};
96
+ --mds-text-default: #{$mds-text-default};
97
+ --mds-text-emphasis: #{$mds-text-emphasis};
98
+ --mds-text-feedback-danger: #{$mds-text-feedback-danger};
99
+ --mds-text-feedback-info: #{$mds-text-feedback-info};
100
+ --mds-text-feedback-primary: #{$mds-text-feedback-primary};
101
+ --mds-text-feedback-secondary: #{$mds-text-feedback-secondary};
102
+ --mds-text-feedback-success: #{$mds-text-feedback-success};
103
+ --mds-text-feedback-warning: #{$mds-text-feedback-warning};
104
+ --mds-text-inverse: #{$mds-text-inverse};
105
+ --mds-text-link-primary-default: #{$mds-text-link-primary-default};
106
+ --mds-text-link-primary-disabled: #{$mds-text-link-primary-disabled};
107
+ --mds-text-link-primary-hover: #{$mds-text-link-primary-hover};
108
+ --mds-text-muted: #{$mds-text-muted};
109
+ --mds-text-subtle: #{$mds-text-subtle};
110
+ --mds-color-blue-50: #{$mds-color-blue-50};
111
+ --mds-color-blue-100: #{$mds-color-blue-100};
112
+ --mds-color-blue-200: #{$mds-color-blue-200};
113
+ --mds-color-blue-300: #{$mds-color-blue-300};
114
+ --mds-color-blue-400: #{$mds-color-blue-400};
115
+ --mds-color-blue-500: #{$mds-color-blue-500};
116
+ --mds-color-blue-600: #{$mds-color-blue-600};
117
+ --mds-color-blue-700: #{$mds-color-blue-700};
118
+ --mds-color-blue-800: #{$mds-color-blue-800};
119
+ --mds-color-blue-900: #{$mds-color-blue-900};
120
+ --mds-color-cyan-50: #{$mds-color-cyan-50};
121
+ --mds-color-cyan-100: #{$mds-color-cyan-100};
122
+ --mds-color-cyan-200: #{$mds-color-cyan-200};
123
+ --mds-color-cyan-300: #{$mds-color-cyan-300};
124
+ --mds-color-cyan-400: #{$mds-color-cyan-400};
125
+ --mds-color-cyan-500: #{$mds-color-cyan-500};
126
+ --mds-color-cyan-600: #{$mds-color-cyan-600};
127
+ --mds-color-cyan-700: #{$mds-color-cyan-700};
128
+ --mds-color-cyan-800: #{$mds-color-cyan-800};
129
+ --mds-color-cyan-900: #{$mds-color-cyan-900};
130
+ --mds-color-gray-100: #{$mds-color-gray-100};
131
+ --mds-color-gray-200: #{$mds-color-gray-200};
132
+ --mds-color-gray-300: #{$mds-color-gray-300};
133
+ --mds-color-gray-400: #{$mds-color-gray-400};
134
+ --mds-color-gray-500: #{$mds-color-gray-500};
135
+ --mds-color-gray-600: #{$mds-color-gray-600};
136
+ --mds-color-gray-700: #{$mds-color-gray-700};
137
+ --mds-color-gray-800: #{$mds-color-gray-800};
138
+ --mds-color-gray-900: #{$mds-color-gray-900};
139
+ --mds-color-gray-black: #{$mds-color-gray-black};
140
+ --mds-color-gray-white: #{$mds-color-gray-white};
141
+ --mds-color-green-50: #{$mds-color-green-50};
142
+ --mds-color-green-100: #{$mds-color-green-100};
143
+ --mds-color-green-200: #{$mds-color-green-200};
144
+ --mds-color-green-300: #{$mds-color-green-300};
145
+ --mds-color-green-400: #{$mds-color-green-400};
146
+ --mds-color-green-500: #{$mds-color-green-500};
147
+ --mds-color-green-600: #{$mds-color-green-600};
148
+ --mds-color-green-700: #{$mds-color-green-700};
149
+ --mds-color-green-800: #{$mds-color-green-800};
150
+ --mds-color-green-900: #{$mds-color-green-900};
151
+ --mds-color-indigo-100: #{$mds-color-indigo-100};
152
+ --mds-color-indigo-200: #{$mds-color-indigo-200};
153
+ --mds-color-indigo-300: #{$mds-color-indigo-300};
154
+ --mds-color-indigo-400: #{$mds-color-indigo-400};
155
+ --mds-color-indigo-500: #{$mds-color-indigo-500};
156
+ --mds-color-indigo-600: #{$mds-color-indigo-600};
157
+ --mds-color-indigo-700: #{$mds-color-indigo-700};
158
+ --mds-color-indigo-800: #{$mds-color-indigo-800};
159
+ --mds-color-indigo-900: #{$mds-color-indigo-900};
160
+ --mds-color-orange-100: #{$mds-color-orange-100};
161
+ --mds-color-orange-200: #{$mds-color-orange-200};
162
+ --mds-color-orange-300: #{$mds-color-orange-300};
163
+ --mds-color-orange-400: #{$mds-color-orange-400};
164
+ --mds-color-orange-500: #{$mds-color-orange-500};
165
+ --mds-color-orange-600: #{$mds-color-orange-600};
166
+ --mds-color-orange-700: #{$mds-color-orange-700};
167
+ --mds-color-orange-800: #{$mds-color-orange-800};
168
+ --mds-color-orange-900: #{$mds-color-orange-900};
169
+ --mds-color-pink-100: #{$mds-color-pink-100};
170
+ --mds-color-pink-200: #{$mds-color-pink-200};
171
+ --mds-color-pink-300: #{$mds-color-pink-300};
172
+ --mds-color-pink-400: #{$mds-color-pink-400};
173
+ --mds-color-pink-500: #{$mds-color-pink-500};
174
+ --mds-color-pink-600: #{$mds-color-pink-600};
175
+ --mds-color-pink-700: #{$mds-color-pink-700};
176
+ --mds-color-pink-800: #{$mds-color-pink-800};
177
+ --mds-color-pink-900: #{$mds-color-pink-900};
178
+ --mds-color-purple-100: #{$mds-color-purple-100};
179
+ --mds-color-purple-200: #{$mds-color-purple-200};
180
+ --mds-color-purple-300: #{$mds-color-purple-300};
181
+ --mds-color-purple-400: #{$mds-color-purple-400};
182
+ --mds-color-purple-500: #{$mds-color-purple-500};
183
+ --mds-color-purple-600: #{$mds-color-purple-600};
184
+ --mds-color-purple-700: #{$mds-color-purple-700};
185
+ --mds-color-purple-800: #{$mds-color-purple-800};
186
+ --mds-color-purple-900: #{$mds-color-purple-900};
187
+ --mds-color-red-50: #{$mds-color-red-50};
188
+ --mds-color-red-100: #{$mds-color-red-100};
189
+ --mds-color-red-200: #{$mds-color-red-200};
190
+ --mds-color-red-300: #{$mds-color-red-300};
191
+ --mds-color-red-400: #{$mds-color-red-400};
192
+ --mds-color-red-500: #{$mds-color-red-500};
193
+ --mds-color-red-600: #{$mds-color-red-600};
194
+ --mds-color-red-700: #{$mds-color-red-700};
195
+ --mds-color-red-800: #{$mds-color-red-800};
196
+ --mds-color-red-900: #{$mds-color-red-900};
197
+ --mds-color-teal-100: #{$mds-color-teal-100};
198
+ --mds-color-teal-200: #{$mds-color-teal-200};
199
+ --mds-color-teal-300: #{$mds-color-teal-300};
200
+ --mds-color-teal-400: #{$mds-color-teal-400};
201
+ --mds-color-teal-500: #{$mds-color-teal-500};
202
+ --mds-color-teal-600: #{$mds-color-teal-600};
203
+ --mds-color-teal-700: #{$mds-color-teal-700};
204
+ --mds-color-teal-800: #{$mds-color-teal-800};
205
+ --mds-color-teal-900: #{$mds-color-teal-900};
206
+ --mds-color-yellow-50: #{$mds-color-yellow-50};
207
+ --mds-color-yellow-100: #{$mds-color-yellow-100};
208
+ --mds-color-yellow-200: #{$mds-color-yellow-200};
209
+ --mds-color-yellow-300: #{$mds-color-yellow-300};
210
+ --mds-color-yellow-400: #{$mds-color-yellow-400};
211
+ --mds-color-yellow-500: #{$mds-color-yellow-500};
212
+ --mds-color-yellow-600: #{$mds-color-yellow-600};
213
+ --mds-color-yellow-700: #{$mds-color-yellow-700};
214
+ --mds-color-yellow-800: #{$mds-color-yellow-800};
215
+ --mds-color-yellow-900: #{$mds-color-yellow-900};
216
+ --mds-color-lg: #{$mds-color-lg};
217
+ --mds-color-md: #{$mds-color-md};
218
+ --mds-color-sm: #{$mds-color-sm};
219
+ --mds-scale-0: #{$mds-scale-0};
220
+ --mds-scale-50: #{$mds-scale-50};
221
+ --mds-scale-100: #{$mds-scale-100};
222
+ --mds-scale-200: #{$mds-scale-200};
223
+ --mds-scale-300: #{$mds-scale-300};
224
+ --mds-scale-400: #{$mds-scale-400};
225
+ --mds-scale-500: #{$mds-scale-500};
226
+ --mds-scale-600: #{$mds-scale-600};
227
+ --mds-scale-700: #{$mds-scale-700};
228
+ --mds-scale-800: #{$mds-scale-800};
229
+ --mds-scale-900: #{$mds-scale-900};
230
+ --mds-scale-1000: #{$mds-scale-1000};
231
+ --mds-scale-1100: #{$mds-scale-1100};
232
+ --mds-scale-1200: #{$mds-scale-1200};
233
+ --mds-scale-1300: #{$mds-scale-1300};
234
+ --mds-scale-1400: #{$mds-scale-1400};
235
+ --mds-scale-1500: #{$mds-scale-1500};
236
+ --mds-scale-1600: #{$mds-scale-1600};
237
+ --mds-scale-1700: #{$mds-scale-1700};
238
+ --mds-scale-1800: #{$mds-scale-1800};
239
+ --mds-typography-font-family-monospace: #{$mds-typography-font-family-monospace};
240
+ --mds-typography-font-family-sans-serif: #{$mds-typography-font-family-sans-serif};
241
+ --mds-typography-font-size-0: #{$mds-typography-font-size-0};
242
+ --mds-typography-font-size-1: #{$mds-typography-font-size-1};
243
+ --mds-typography-font-size-2: #{$mds-typography-font-size-2};
244
+ --mds-typography-font-size-0-875: #{$mds-typography-font-size-0-875};
245
+ --mds-typography-font-size-1-25: #{$mds-typography-font-size-1-25};
246
+ --mds-typography-font-size-1-5: #{$mds-typography-font-size-1-5};
247
+ --mds-typography-font-size-1-75: #{$mds-typography-font-size-1-75};
248
+ --mds-typography-font-size-2-5: #{$mds-typography-font-size-2-5};
249
+ --mds-typography-font-weight-black: #{$mds-typography-font-weight-black};
250
+ --mds-typography-font-weight-bold: #{$mds-typography-font-weight-bold};
251
+ --mds-typography-font-weight-extrabold: #{$mds-typography-font-weight-extrabold};
252
+ --mds-typography-font-weight-extralight: #{$mds-typography-font-weight-extralight};
253
+ --mds-typography-font-weight-light: #{$mds-typography-font-weight-light};
254
+ --mds-typography-font-weight-medium: #{$mds-typography-font-weight-medium};
255
+ --mds-typography-font-weight-regular: #{$mds-typography-font-weight-regular};
256
+ --mds-typography-font-weight-semibold: #{$mds-typography-font-weight-semibold};
257
+ --mds-typography-font-weight-thin: #{$mds-typography-font-weight-thin};
258
+ --mds-typography-letter-spacing-none: #{$mds-typography-letter-spacing-none};
259
+ --mds-typography-line-height-displays-d1: #{$mds-typography-line-height-displays-d1};
260
+ --mds-typography-line-height-displays-d2: #{$mds-typography-line-height-displays-d2};
261
+ --mds-typography-line-height-displays-d3: #{$mds-typography-line-height-displays-d3};
262
+ --mds-typography-line-height-displays-d4: #{$mds-typography-line-height-displays-d4};
263
+ --mds-typography-line-height-displays-d5: #{$mds-typography-line-height-displays-d5};
264
+ --mds-typography-line-height-displays-d6: #{$mds-typography-line-height-displays-d6};
265
+ --mds-typography-line-height-headings-h1: #{$mds-typography-line-height-headings-h1};
266
+ --mds-typography-line-height-headings-h2: #{$mds-typography-line-height-headings-h2};
267
+ --mds-typography-line-height-headings-h3: #{$mds-typography-line-height-headings-h3};
268
+ --mds-typography-line-height-headings-h4: #{$mds-typography-line-height-headings-h4};
269
+ --mds-typography-line-height-headings-h5: #{$mds-typography-line-height-headings-h5};
270
+ --mds-typography-line-height-headings-h6: #{$mds-typography-line-height-headings-h6};
271
+ --mds-typography-line-height-paragraph-base: #{$mds-typography-line-height-paragraph-base};
272
+ --mds-typography-line-height-paragraph-lg: #{$mds-typography-line-height-paragraph-lg};
273
+ --mds-typography-line-height-paragraph-sm: #{$mds-typography-line-height-paragraph-sm};
274
+ --mds-typography-line-height-paragraph-xs: #{$mds-typography-line-height-paragraph-xs};
275
+ --mds-blur-lg: #{$mds-blur-lg};
276
+ --mds-blur-md: #{$mds-blur-md};
277
+ --mds-blur-sm: #{$mds-blur-sm};
278
+ --mds-offset-lg: #{$mds-offset-lg};
279
+ --mds-offset-md: #{$mds-offset-md};
280
+ --mds-offset-sm: #{$mds-offset-sm};
281
+ --mds-icons-lg: #{$mds-icons-lg};
282
+ --mds-icons-md: #{$mds-icons-md};
283
+ --mds-icons-sm: #{$mds-icons-sm};
284
+ --mds-icons-xl: #{$mds-icons-xl};
285
+ --mds-icons-xs: #{$mds-icons-xs};
286
+ --mds-icons-xxl: #{$mds-icons-xxl};
287
+ --mds-icons-xxs: #{$mds-icons-xxs};
288
+ --mds-icons-xxxl: #{$mds-icons-xxxl};
289
+ --mds-spacing-lg: #{$mds-spacing-lg};
290
+ --mds-spacing-md: #{$mds-spacing-md};
291
+ --mds-spacing-none: #{$mds-spacing-none};
292
+ --mds-spacing-offset: #{$mds-spacing-offset};
293
+ --mds-spacing-sm: #{$mds-spacing-sm};
294
+ --mds-spacing-xl: #{$mds-spacing-xl};
295
+ --mds-spacing-xs: #{$mds-spacing-xs};
296
+ --mds-spacing-xxl: #{$mds-spacing-xxl};
297
+ --mds-spacing-xxs: #{$mds-spacing-xxs};
298
+ --mds-font-family-base: #{$mds-font-family-base};
299
+ --mds-font-family-code: #{$mds-font-family-code};
300
+ --mds-font-size-displays-1: #{$mds-font-size-displays-1};
301
+ --mds-font-size-displays-2: #{$mds-font-size-displays-2};
302
+ --mds-font-size-displays-3: #{$mds-font-size-displays-3};
303
+ --mds-font-size-displays-4: #{$mds-font-size-displays-4};
304
+ --mds-font-size-displays-5: #{$mds-font-size-displays-5};
305
+ --mds-font-size-displays-6: #{$mds-font-size-displays-6};
306
+ --mds-font-size-headings-1: #{$mds-font-size-headings-1};
307
+ --mds-font-size-headings-2: #{$mds-font-size-headings-2};
308
+ --mds-font-size-headings-3: #{$mds-font-size-headings-3};
309
+ --mds-font-size-headings-4: #{$mds-font-size-headings-4};
310
+ --mds-font-size-headings-5: #{$mds-font-size-headings-5};
311
+ --mds-font-size-headings-6: #{$mds-font-size-headings-6};
312
+ --mds-font-size-paragraph-default: #{$mds-font-size-paragraph-default};
313
+ --mds-font-size-paragraph-lead: #{$mds-font-size-paragraph-lead};
314
+ --mds-font-size-paragraph-small: #{$mds-font-size-paragraph-small};
315
+ --mds-font-weight-bold: #{$mds-font-weight-bold};
316
+ --mds-font-weight-light: #{$mds-font-weight-light};
317
+ --mds-font-weight-medium: #{$mds-font-weight-medium};
318
+ --mds-font-weight-regular: #{$mds-font-weight-regular};
319
+ --mds-font-weight-semibold: #{$mds-font-weight-semibold};
320
+ --mds-letter-spacing-default: #{$mds-letter-spacing-default};
321
+ --mds-line-height-displays-1: #{$mds-line-height-displays-1};
322
+ --mds-line-height-displays-2: #{$mds-line-height-displays-2};
323
+ --mds-line-height-displays-3: #{$mds-line-height-displays-3};
324
+ --mds-line-height-displays-4: #{$mds-line-height-displays-4};
325
+ --mds-line-height-displays-5: #{$mds-line-height-displays-5};
326
+ --mds-line-height-displays-6: #{$mds-line-height-displays-6};
327
+ --mds-line-height-headings-1: #{$mds-line-height-headings-1};
328
+ --mds-line-height-headings-2: #{$mds-line-height-headings-2};
329
+ --mds-line-height-headings-3: #{$mds-line-height-headings-3};
330
+ --mds-line-height-headings-4: #{$mds-line-height-headings-4};
331
+ --mds-line-height-headings-5: #{$mds-line-height-headings-5};
332
+ --mds-line-height-headings-6: #{$mds-line-height-headings-6};
333
+ --mds-line-height-paragraph-default: #{$mds-line-height-paragraph-default};
334
+ --mds-line-height-paragraph-lead: #{$mds-line-height-paragraph-lead};
335
+ --mds-line-height-paragraph-small: #{$mds-line-height-paragraph-small};
336
+ --mds-line-height-paragraph-xs: #{$mds-line-height-paragraph-xs};
337
+ --mds-margin-bottom-display: #{$mds-margin-bottom-display};
338
+ --mds-margin-bottom-heading: #{$mds-margin-bottom-heading};
339
+ --mds-margin-bottom-paragraph: #{$mds-margin-bottom-paragraph};
340
+ }