@moodlehq/design-system 3.1.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.
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.1.0",
3
+ "version": "4.0.0",
4
4
  "description": "The Moodle Design System",
5
5
  "files": [
6
6
  "/dist",
@@ -45,7 +45,7 @@
45
45
  "devDependencies": {
46
46
  "@chromatic-com/storybook": "^5.0.0",
47
47
  "@modelcontextprotocol/sdk": "^1.0.0",
48
- "@commitlint/cli": "^20.1.0",
48
+ "@commitlint/cli": "^21.0.1",
49
49
  "@commitlint/config-conventional": "^20.0.0",
50
50
  "@eslint/compat": "^2.0.0",
51
51
  "@eslint/eslintrc": "^3.3.3",
@@ -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",
@@ -82,7 +83,7 @@
82
83
  "globals": "^17.1.0",
83
84
  "husky": "^9.1.7",
84
85
  "jsdom": "^29.0.0",
85
- "lint-staged": "^16.2.7",
86
+ "lint-staged": "^17.0.5",
86
87
  "playwright": "^1.57.0",
87
88
  "prettier": "^3.7.3",
88
89
  "prettier-plugin-organize-imports": "^4.3.0",
@@ -18,23 +18,30 @@
18
18
  --mds-activity-icon-other-icon: var(--mds-color-gray-900);
19
19
  --mds-activity-icon-resource-bg: var(--mds-color-cyan-100);
20
20
  --mds-activity-icon-resource-icon: var(--mds-color-cyan-500);
21
+ --mds-bg-feedback-danger-light: var(--mds-color-red-50);
21
22
  --mds-bg-feedback-danger-subtle: var(--mds-color-red-100);
22
- --mds-bg-feedback-info-default: var(--mds-color-cyan-500);
23
+ --mds-bg-feedback-info-default: var(--mds-color-cyan-600);
24
+ --mds-bg-feedback-info-light: var(--mds-color-cyan-50);
23
25
  --mds-bg-feedback-info-subtle: var(--mds-color-cyan-100);
24
26
  --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
27
+ --mds-bg-feedback-primary-light: var(--mds-color-blue-50);
25
28
  --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
26
29
  --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
27
30
  --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
28
31
  --mds-bg-feedback-success-default: var(--mds-color-green-500);
32
+ --mds-bg-feedback-success-light: var(--mds-color-green-50);
29
33
  --mds-bg-feedback-success-subtle: var(--mds-color-green-100);
30
34
  --mds-bg-feedback-warning-default: var(--mds-color-yellow-500);
35
+ --mds-bg-feedback-warning-light: var(--mds-color-yellow-50);
31
36
  --mds-bg-feedback-warning-subtle: var(--mds-color-yellow-100);
32
37
  --mds-bg-interactive-danger-active: var(--mds-color-red-700);
33
38
  --mds-bg-interactive-danger-default: var(--mds-color-red-500);
39
+ --mds-bg-interactive-danger-default-light: var(--mds-color-red-50);
34
40
  --mds-bg-interactive-danger-disabled: var(--mds-color-red-200);
35
41
  --mds-bg-interactive-danger-hover: var(--mds-color-red-600);
36
42
  --mds-bg-interactive-primary-active: var(--mds-color-blue-700);
37
43
  --mds-bg-interactive-primary-default: var(--mds-color-blue-500);
44
+ --mds-bg-interactive-primary-default-light: var(--mds-color-blue-50);
38
45
  --mds-bg-interactive-primary-disabled: var(--mds-color-blue-200);
39
46
  --mds-bg-interactive-primary-hover: var(--mds-color-blue-600);
40
47
  --mds-bg-interactive-secondary-default: var(--mds-color-gray-400);
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --mds-color-blue-50: #e7f0f9;
6
7
  --mds-color-blue-100: #cfe2f2;
7
8
  --mds-color-blue-200: #9fc4e5;
8
9
  --mds-color-blue-300: #6fa7d9;
@@ -12,6 +13,7 @@
12
13
  --mds-color-blue-700: #094173;
13
14
  --mds-color-blue-800: #062b4c;
14
15
  --mds-color-blue-900: #031626;
16
+ --mds-color-cyan-50: #e5f2f4;
15
17
  --mds-color-cyan-100: #cce6ea;
16
18
  --mds-color-cyan-200: #99cdd5;
17
19
  --mds-color-cyan-300: #66b3c0;
@@ -32,6 +34,7 @@
32
34
  --mds-color-gray-900: #1d2125;
33
35
  --mds-color-gray-black: #000000;
34
36
  --mds-color-gray-white: #ffffff;
37
+ --mds-color-green-50: #ebf2ea;
35
38
  --mds-color-green-100: #d7e4d6;
36
39
  --mds-color-green-200: #aecaad;
37
40
  --mds-color-green-300: #86af84;
@@ -77,6 +80,7 @@
77
80
  --mds-color-purple-700: #3a254a;
78
81
  --mds-color-purple-800: #271832;
79
82
  --mds-color-purple-900: #130c19;
83
+ --mds-color-red-50: #faeae9;
80
84
  --mds-color-red-100: #f4d6d2;
81
85
  --mds-color-red-200: #eaada6;
82
86
  --mds-color-red-300: #df8379;
@@ -95,6 +99,7 @@
95
99
  --mds-color-teal-700: #13795b;
96
100
  --mds-color-teal-800: #0d503c;
97
101
  --mds-color-teal-900: #06281e;
102
+ --mds-color-yellow-50: #fdf7ed;
98
103
  --mds-color-yellow-100: #fcefdc;
99
104
  --mds-color-yellow-200: #f9deb8;
100
105
  --mds-color-yellow-300: #f6ce95;
@@ -159,4 +164,5 @@
159
164
  --mds-typography-line-height-paragraph-base: 1.5rem;
160
165
  --mds-typography-line-height-paragraph-lg: 2.5rem;
161
166
  --mds-typography-line-height-paragraph-sm: 1.0875rem;
167
+ --mds-typography-line-height-paragraph-xs: 0.75rem;
162
168
  }
@@ -41,6 +41,7 @@
41
41
  --mds-line-height-paragraph-default: var(--mds-typography-line-height-paragraph-base); /** Comfortable line height for paragraphs. */
42
42
  --mds-line-height-paragraph-lead: var(--mds-typography-line-height-paragraph-lg); /** Extended line height for large body text. */
43
43
  --mds-line-height-paragraph-small: var(--mds-typography-line-height-paragraph-sm); /** Compact line height for small text. */
44
+ --mds-line-height-paragraph-xs: var(--mds-typography-line-height-paragraph-xs);
44
45
  --mds-margin-bottom-display: var(--mds-spacing-none); /** Default margin below a Displays. */
45
46
  --mds-margin-bottom-heading: var(--mds-spacing-xs); /** Default margin below a Headings. */
46
47
  --mds-margin-bottom-paragraph: var(--mds-spacing-md); /** Default margin below a paragraph. */
@@ -16,23 +16,30 @@ $mds-activity-icon-other-icon: #1d2125 !default;
16
16
  $mds-activity-icon-resource-bg: #cce6ea !default;
17
17
  $mds-activity-icon-resource-icon: #008196 !default;
18
18
  $mds-bg-feedback-danger-default: #ca3120 !default;
19
+ $mds-bg-feedback-danger-light: #faeae9 !default;
19
20
  $mds-bg-feedback-danger-subtle: #f4d6d2 !default;
20
- $mds-bg-feedback-info-default: #008196 !default;
21
+ $mds-bg-feedback-info-default: #006778 !default;
22
+ $mds-bg-feedback-info-light: #e5f2f4 !default;
21
23
  $mds-bg-feedback-info-subtle: #cce6ea !default;
22
24
  $mds-bg-feedback-primary-default: #0f6cbf !default;
25
+ $mds-bg-feedback-primary-light: #e7f0f9 !default;
23
26
  $mds-bg-feedback-primary-subtle: #cfe2f2 !default;
24
27
  $mds-bg-feedback-secondary-default: #ced4da !default;
25
28
  $mds-bg-feedback-secondary-subtle: #f8f9fa !default;
26
29
  $mds-bg-feedback-success-default: #357a32 !default;
30
+ $mds-bg-feedback-success-light: #ebf2ea !default;
27
31
  $mds-bg-feedback-success-subtle: #d7e4d6 !default;
28
32
  $mds-bg-feedback-warning-default: #f0ad4e !default;
33
+ $mds-bg-feedback-warning-light: #fdf7ed !default;
29
34
  $mds-bg-feedback-warning-subtle: #fcefdc !default;
30
35
  $mds-bg-interactive-danger-active: #791d13 !default;
31
36
  $mds-bg-interactive-danger-default: #ca3120 !default;
37
+ $mds-bg-interactive-danger-default-light: #faeae9 !default;
32
38
  $mds-bg-interactive-danger-disabled: #eaada6 !default;
33
39
  $mds-bg-interactive-danger-hover: #a2271a !default;
34
40
  $mds-bg-interactive-primary-active: #094173 !default;
35
41
  $mds-bg-interactive-primary-default: #0f6cbf !default;
42
+ $mds-bg-interactive-primary-default-light: #e7f0f9 !default;
36
43
  $mds-bg-interactive-primary-disabled: #9fc4e5 !default;
37
44
  $mds-bg-interactive-primary-hover: #0c5699 !default;
38
45
  $mds-bg-interactive-secondary-active: #ced4da !default;
@@ -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
+ }
@@ -1,6 +1,7 @@
1
1
 
2
2
  // THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
3
3
 
4
+ $mds-color-blue-50: #e7f0f9 !default;
4
5
  $mds-color-blue-100: #cfe2f2 !default;
5
6
  $mds-color-blue-200: #9fc4e5 !default;
6
7
  $mds-color-blue-300: #6fa7d9 !default;
@@ -10,6 +11,7 @@ $mds-color-blue-600: #0c5699 !default;
10
11
  $mds-color-blue-700: #094173 !default;
11
12
  $mds-color-blue-800: #062b4c !default;
12
13
  $mds-color-blue-900: #031626 !default;
14
+ $mds-color-cyan-50: #e5f2f4 !default;
13
15
  $mds-color-cyan-100: #cce6ea !default;
14
16
  $mds-color-cyan-200: #99cdd5 !default;
15
17
  $mds-color-cyan-300: #66b3c0 !default;
@@ -30,6 +32,7 @@ $mds-color-gray-800: #343a40 !default;
30
32
  $mds-color-gray-900: #1d2125 !default;
31
33
  $mds-color-gray-black: #000000 !default;
32
34
  $mds-color-gray-white: #ffffff !default;
35
+ $mds-color-green-50: #ebf2ea !default;
33
36
  $mds-color-green-100: #d7e4d6 !default;
34
37
  $mds-color-green-200: #aecaad !default;
35
38
  $mds-color-green-300: #86af84 !default;
@@ -75,6 +78,7 @@ $mds-color-purple-600: #4e3163 !default;
75
78
  $mds-color-purple-700: #3a254a !default;
76
79
  $mds-color-purple-800: #271832 !default;
77
80
  $mds-color-purple-900: #130c19 !default;
81
+ $mds-color-red-50: #faeae9 !default;
78
82
  $mds-color-red-100: #f4d6d2 !default;
79
83
  $mds-color-red-200: #eaada6 !default;
80
84
  $mds-color-red-300: #df8379 !default;
@@ -93,6 +97,7 @@ $mds-color-teal-600: #1aa179 !default;
93
97
  $mds-color-teal-700: #13795b !default;
94
98
  $mds-color-teal-800: #0d503c !default;
95
99
  $mds-color-teal-900: #06281e !default;
100
+ $mds-color-yellow-50: #fdf7ed !default;
96
101
  $mds-color-yellow-100: #fcefdc !default;
97
102
  $mds-color-yellow-200: #f9deb8 !default;
98
103
  $mds-color-yellow-300: #f6ce95 !default;
@@ -157,3 +162,4 @@ $mds-typography-line-height-headings-h6: 1.2rem !default;
157
162
  $mds-typography-line-height-paragraph-base: 1.5rem !default;
158
163
  $mds-typography-line-height-paragraph-lg: 2.5rem !default;
159
164
  $mds-typography-line-height-paragraph-sm: 1.0875rem !default;
165
+ $mds-typography-line-height-paragraph-xs: 0.75rem !default;
@@ -39,6 +39,7 @@ $mds-line-height-headings-6: 1.2rem !default; // Tight line height for headings.
39
39
  $mds-line-height-paragraph-default: 1.5rem !default; // Comfortable line height for paragraphs.
40
40
  $mds-line-height-paragraph-lead: 2.5rem !default; // Extended line height for large body text.
41
41
  $mds-line-height-paragraph-small: 1.0875rem !default; // Compact line height for small text.
42
+ $mds-line-height-paragraph-xs: 0.75rem !default;
42
43
  $mds-margin-bottom-display: 0rem !default; // Default margin below a Displays.
43
44
  $mds-margin-bottom-heading: 0.5rem !default; // Default margin below a Headings.
44
45
  $mds-margin-bottom-paragraph: 1rem !default; // Default margin below a paragraph.