@miljodirektoratet/md-css 6.3.6 → 6.4.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 (34) hide show
  1. package/package.json +1 -1
  2. package/src/accordionitem/accordionitem.css +27 -29
  3. package/src/button/button.css +90 -89
  4. package/src/chips/chips.css +27 -27
  5. package/src/colors.css +26 -18
  6. package/src/filelist/filelist.css +9 -9
  7. package/src/formElements/autocomplete/autocomplete.css +51 -51
  8. package/src/formElements/checkbox/checkbox.css +16 -16
  9. package/src/formElements/checkboxgroup/checkboxgroup.css +9 -9
  10. package/src/formElements/combobox/combobox.css +58 -58
  11. package/src/formElements/fileupload/fileupload.css +20 -20
  12. package/src/formElements/input/input.css +39 -39
  13. package/src/formElements/radiobutton/radiobutton.css +14 -14
  14. package/src/formElements/radiogroup/radiogroup.css +14 -14
  15. package/src/formElements/select/README.md +43 -43
  16. package/src/formElements/select/select.css +40 -40
  17. package/src/formElements/textarea/textarea.css +21 -21
  18. package/src/help/help.css +12 -12
  19. package/src/iconButton/iconButton.css +37 -37
  20. package/src/index.css +2 -0
  21. package/src/infoTag/infoTag.css +19 -14
  22. package/src/link/link.css +13 -13
  23. package/src/messages/alertMessage.css +18 -18
  24. package/src/modal/modal.css +36 -37
  25. package/src/skipToMainContent/skipToMainContent.css +8 -8
  26. package/src/stepper/stepper.css +32 -32
  27. package/src/tabs/tabs.css +34 -34
  28. package/src/tile/tile.css +56 -56
  29. package/src/toggle/toggle.css +20 -20
  30. package/src/tokens/index.css +2 -0
  31. package/src/tokens/tokens.css +104 -0
  32. package/src/tokens/variables.css +70 -0
  33. package/src/tooltip/tooltip.css +7 -7
  34. package/src/typography.css +61 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@miljodirektoratet/md-css",
3
- "version": "6.3.6",
3
+ "version": "6.4.0",
4
4
  "description": "CSS for Miljødirektoratet",
5
5
  "author": "Miljødirektoratet",
6
6
  "main": "./src/index.css",
package/src/accordionitem/accordionitem.css CHANGED
@@ -1,40 +1,38 @@
1
1
  .md-accordion-item {
2
- background-color: var(--mdPrimaryColor10);
3
- border: 1px solid var(--mdGreyColor60);
4
- color: var(--mdGreyColor);
2
+ background-color: var(--md-color-surface-secondary);
3
+ border: 1px solid var(--md-color-border-primary);
4
+ color: var(--md-color-text-primary);
5
5
  font-family: 'Open sans';
6
6
  transition: all 0.2s linear;
7
7
  }
8
8
 
9
9
  .md-accordion-item.md-accordion-item--rounded {
10
- border-radius: 0.25rem;
10
+ border-radius: var(--md-radius-sm);
11
11
  }
12
12
 
13
13
  .md-accordion-item.md-accordion-item--secondary {
14
- background-color: var(--mdSecondaryColor60);
14
+ background-color: var(--md-color-secondary-60);
15
15
  }
16
16
 
17
17
  .md-accordion-item.md-accordion-item--add {
18
18
  background-color: transparent;
19
- border: 1px dashed var(--mdGreyColor80);
19
+ border: 1px dashed var(--md-color-grey-80);
20
20
  transition: all 0.2s linear;
21
21
  }
22
22
  .md-accordion-item[open].md-accordion-item--add {
23
- /* background-color: var(--mdPrimaryColor20);
24
- border: 1px solid var(--mdPrimaryColor20); */
25
23
  background-color: transparent;
26
- border: 1px dashed var(--mdGreyColor80);
24
+ border: 1px dashed var(--md-color-grey-80);
27
25
  transition: all 0.2s linear;
28
26
  }
29
27
 
30
28
  .md-accordion-item:not([open], .md-accordion-item--disabled):hover {
31
29
  transition: all 0.2s linear;
32
- background-color: var(--mdPrimaryColor20);
30
+ background-color: var(--md-color-surface-info-primary);
33
31
  }
34
32
 
35
33
  .md-accordion-item.md-accordion-item--secondary:not([open], .md-accordion-item--disabled):hover {
36
34
  transition: all 0.2s linear;
37
- background-color: var(--mdSecondaryColor);
35
+ background-color: var(--md-color-secondary-100);
38
36
  }
39
37
 
40
38
  .md-accordion-item.md-accordion-item--add:not([open]):hover {
@@ -50,12 +48,12 @@
50
48
  background: none;
51
49
  border: 0;
52
50
  margin: 0;
53
- color: var(--mdGreyColor);
54
- padding: 1em 1.5rem;
51
+ color: var(--md-color-text-primary);
52
+ padding: var(--md-size-16) var(--md-size-24);
55
53
  cursor: pointer;
56
54
  font-family: 'SofiaPro-Regular', 'Sofia Pro';
57
55
  text-align: left;
58
- line-height: 1.5rem;
56
+ line-height: var(--md-typography-line-height-small);
59
57
  user-select: none;
60
58
  }
61
59
  .md-accordion-item__header::-webkit-details-marker {
@@ -63,7 +61,7 @@
63
61
  }
64
62
 
65
63
  .md-accordion-item__header:focus-visible {
66
- outline: 2px solid var(--mdPrimaryColor80);
64
+ outline: var(--md-size-2) solid var(--md-color-primary-80);
67
65
  }
68
66
 
69
67
  .md-accordion-item__header-left {
@@ -72,9 +70,9 @@
72
70
  }
73
71
 
74
72
  .md-accordion-item__header-icon {
75
- color: var(--mdGreyColor);
76
- width: 1.5rem;
77
- height: 1.5rem;
73
+ color: var(--md-color-text-primary);
74
+ width: var(--md-size-24);
75
+ height: var(--md-size-24);
78
76
  }
79
77
  .md-accordion-item > .md-accordion-item__header .md-accordion-item__header-icon__open {
80
78
  display: block;
@@ -90,8 +88,8 @@
90
88
  }
91
89
 
92
90
  .md-accordion-item__header-label {
93
- font-size: 1.25rem;
94
- margin-left: 1em;
91
+ font-size: var(--md-size-20);
92
+ margin-left: var(--md-size-16);
95
93
  }
96
94
  .md-accordion-item:not(.md-accordion-item--disabled) .md-accordion-item__header:hover .md-accordion-item__header-label {
97
95
  text-decoration: underline;
@@ -109,13 +107,13 @@
109
107
 
110
108
  .md-accordion-item__close-button {
111
109
  display: flex;
112
- gap: 1rem;
110
+ gap: var(--md-size-16);
113
111
  padding: 0;
114
112
  background: none;
115
113
  border: 0;
116
114
  margin: 2rem 0 0 -0.2rem;
117
115
  cursor: pointer;
118
- font-size: 1rem;
116
+ font-size: var(--md-typography-size-16);
119
117
  }
120
118
 
121
119
  .md-accordion-item__close-button:hover {
@@ -123,26 +121,26 @@
123
121
  }
124
122
 
125
123
  .md-accordion-item__close-button:focus-visible {
126
- outline: 2px solid var(--mdPrimaryColor80);
127
- outline-offset: 2px;
124
+ outline: var(--md-size-2) solid var(--md-color-primary-80);
125
+ outline-offset: var(--md-size-2);
128
126
  }
129
127
 
130
128
  .md-accordion-item__close-button__icon {
131
- height: 1.25rem;
132
- width: 1.25rem;
129
+ height: var(--md-size-20);
130
+ width: var(--md-size-20);
133
131
  }
134
132
 
135
133
  /* DISABLED */
136
134
  .md-accordion-item--disabled,
137
135
  .md-accordion-item--secondary.md-accordion-item--disabled {
138
- background-color: var(--mdGreyColor20);
136
+ background-color: var(--md-color-disabled-bg);
139
137
  }
140
138
  .md-accordion-item--disabled .md-accordion-item__header,
141
139
  .md-accordion-item--disabled .md-accordion-item__content {
142
- color: var(--mdGreyColor60);
140
+ color: var(--md-color-text-disabled);
143
141
  cursor: default;
144
142
  }
145
143
  .md-accordion-item--disabled .md-accordion-item__header .md-accordion-item__header-icon:before,
146
144
  .md-accordion-item--disabled .md-accordion-item__header .md-accordion-item__header-icon:after {
147
- background-color: var(--mdGreyColor60);
145
+ background-color: var(--md-color-disabled-default);
148
146
  }
package/src/button/button.css CHANGED
@@ -1,20 +1,21 @@
1
1
  .md-button {
2
2
  align-items: center;
3
- background-color: var(--mdPrimaryColor);
4
- color: #ffffff;
3
+ background-color: var(--md-color-cta-primary-default);
4
+ color: var(--md-color-text-inverted);
5
5
  display: flex;
6
- font-weight: 400;
6
+ font-weight: var(--md-typography-weight-regular);
7
7
  font-family: 'Open sans';
8
- font-size: 1rem;
9
- padding: 0.75rem 1rem;
8
+ font-size: var(--md-typography-size-16);
9
+ padding: var(--md-typography-size-12) var(--md-typography-size-16);
10
10
  width: fit-content;
11
- border-radius: 8px;
11
+ border-radius: var(--md-radius-md);
12
12
  border: none;
13
+ transition: all 200ms ease-in-out;
13
14
  }
14
15
 
15
16
  .md-button--column {
16
17
  flex-direction: column;
17
- gap: 0.5rem;
18
+ gap: var(--md-size-8);
18
19
  }
19
20
 
20
21
  .md-button__content {
@@ -24,73 +25,73 @@
24
25
  }
25
26
 
26
27
  .md-button--small {
27
- padding: 0.5rem 0.75rem;
28
- border-radius: 8px;
28
+ padding: var(--md-size-8) var(--md-size-12);
29
+ border-radius: var(--md-radius-sm);
29
30
  }
30
31
 
31
32
  .md-button--large {
32
- padding: 1rem 1.25rem;
33
- border-radius: 8px;
33
+ padding: var(--md-size-16) var(--md-size-20);
34
+ border-radius: var(--md-radius-lg);
34
35
  }
35
36
 
36
37
  .md-button__topIcon {
37
- height: 1.25rem;
38
- width: 1.25rem;
38
+ height: var(--md-size-20);
39
+ width: var(--md-size-20);
39
40
  flex-shrink: 0;
40
41
  }
41
42
  .md-button__topIcon .md-loading-spinner {
42
- width: 1rem;
43
- height: 1rem;
43
+ width: var(--md-size-16);
44
+ height: var(--md-size-16);
44
45
  }
45
46
 
46
47
  .md-button__leftIcon {
47
- height: 1.25rem;
48
+ height: var(--md-size-20);
48
49
  align-content: center;
49
- width: 1.25rem;
50
+ width: var(--md-size-20);
50
51
  flex-shrink: 0;
51
- margin-right: 0.5rem;
52
+ margin-right: var(--md-size-8);
52
53
  }
53
54
 
54
55
  .md-button--small > .md-button__leftIcon {
55
- margin-right: 0.5rem;
56
+ margin-right: var(--md-size-8);
56
57
  }
57
58
 
58
59
  .md-button__rightIcon {
59
- height: 1.25rem;
60
- width: 1.25rem;
60
+ height: var(--md-size-20);
61
+ width: var(--md-size-20);
61
62
  align-content: center;
62
63
  flex-shrink: 0;
63
- margin-left: 0.5rem;
64
+ margin-left: var(--md-size-8);
64
65
  }
65
66
  .md-button__rightIcon .md-loading-spinner {
66
- width: 1rem;
67
- height: 1rem;
67
+ width: var(--md-size-16);
68
+ height: var(--md-size-16);
68
69
  }
69
70
 
70
71
  .md-button--small > .md-button__rightIcon {
71
- margin-left: 0.5rem;
72
+ margin-left: var(--md-size-8);
72
73
  }
73
74
 
74
75
  .md-button:focus-visible {
75
- background-color: var(--mdPrimaryColor80);
76
- outline: 2px white solid;
76
+ background-color: var(--md-color-cta-primary-focus);
77
+ outline: var(--md-size-2) white solid;
77
78
  outline-offset: -4px;
78
79
  }
79
80
 
80
81
  .md-button:hover {
81
82
  cursor: pointer;
82
- background-color: var(--mdPrimaryColor120);
83
- border-color: var(--mdPrimaryColor120);
83
+ background-color: var(--md-color-cta-primary-hover);
84
+ border-color: var(--md-color-cta-primary-hover);
84
85
  }
85
86
 
86
87
  .md-button:active:enabled {
87
- background-color: var(--mdPrimaryColor140);
88
+ background-color: var(--md-color-cta-primary-active);
88
89
  }
89
90
 
90
91
  .md-button[disabled],
91
92
  .md-button:disabled {
92
- background-color: var(--mdGreyColor20);
93
- color: var(--mdGreyColor60);
93
+ background-color: var(--md-color-grey-20);
94
+ color: var(--md-color-text-disabled);
94
95
  cursor: not-allowed;
95
96
  }
96
97
  .md-button:not(.md-button--secondary, .md-button--tertiary)[disabled] .md-loading-spinner,
@@ -99,165 +100,165 @@
99
100
  }
100
101
 
101
102
  .md-button--secondary {
102
- background-color: #ffffff;
103
- border: 2px solid var(--mdPrimaryColor);
104
- color: var(--mdPrimaryColor);
105
- padding: calc(0.75rem - 2px) calc(1rem - 2px);
103
+ background-color: var(--md-color-surface-primary);
104
+ border: var(--md-size-2) solid var(--md-color-border-tertiary);
105
+ color: var(--md-color-text-secondary);
106
+ padding: calc(var(--md-size-12) - 2px) calc(var(--md-size-16) - 2px);
106
107
  }
107
108
 
108
109
  .md-button--small.md-button--secondary {
109
- padding: calc(0.5rem - 2px) calc(0.75rem - 2px);
110
+ padding: calc(var(--md-size-8) - 2px) calc(var(--md-size-12) - 2px);
110
111
  }
111
112
 
112
113
  .md-button--large.md-button--secondary {
113
- padding: calc(1rem - 2px) calc(1.25rem - 2px);
114
+ padding: calc(var(--md-size-16) - 2px) calc(var(--md-size-20) - 2px);
114
115
  }
115
116
 
116
117
  .md-button--secondary:hover:enabled {
117
- background-color: var(--mdPrimaryColor20);
118
+ background-color: var(--md-color-cta-secondary-hover);
118
119
  }
119
120
 
120
121
  .md-button--secondary:focus-visible:enabled {
121
- background-color: #ffffff;
122
- border-color: var(--mdPrimaryColor80);
123
- color: var(--mdPrimaryColor80);
124
- outline: 2px var(--mdPrimaryColor80) solid;
122
+ background-color: var(--md-color-surface-primary);
123
+ border-color: var(--md-color-cta-primary-focus);
124
+ color: var(--md-color-cta-primary-focus);
125
+ outline: var(--md-size-2) var(--md-color-cta-primary-focus) solid;
125
126
  outline-offset: -6px;
126
127
  }
127
128
 
128
129
  .md-button--secondary:active:enabled {
129
- background-color: var(--mdPrimaryColor30);
130
- color: var(--mdPrimaryColor120);
131
- border-color: var(--mdPrimaryColor120);
130
+ background-color: var(--md-color-cta-secondary-active);
131
+ color: var(--md-color-cta-primary-hover);
132
+ border-color: var(--md-color-cta-primary-hover);
132
133
  }
133
134
 
134
135
  .md-button--secondary:disabled {
135
- background-color: #fff;
136
- color: var(--mdGreyColor60);
137
- border-color: var(--mdGreyColor20);
136
+ background-color: var(--md-color-surface-primary);
137
+ color: var(--md-color-text-disabled);
138
+ border-color: var(--md-color-border-secondary);
138
139
  }
139
140
 
140
141
  .md-button--secondary > .md-button__rightIcon {
141
- color: var(--mdPrimaryColor);
142
+ color: var(--md-color-text-secondary);
142
143
  }
143
144
 
144
145
  .md-button--secondary:disabled > .md-button__rightIcon {
145
- color: var(--mdGreyColor60);
146
+ color: var(--md-color-text-disabled);
146
147
  }
147
148
 
148
149
  .md-button--tertiary {
149
150
  background-color: transparent;
150
151
  border: none;
151
- color: var(--mdPrimaryColor);
152
- padding: 0.75rem 1rem;
152
+ color: var(--md-color-text-secondary);
153
+ padding: var(--md-size-12) var(--md-size-16);
153
154
  }
154
155
 
155
156
  .md-button--small.md-button--tertiary {
156
- padding: 0.5rem 0.75rem;
157
+ padding: var(--md-size-8) var(--md-size-12);
157
158
  }
158
159
 
159
160
  .md-button--large.md-button--tertiary {
160
- padding: 1rem 1.25rem;
161
+ padding: var(--md-size-16) var(--md-size-20);
161
162
  }
162
163
 
163
164
  .md-button--tertiary:hover:enabled {
164
165
  text-decoration: underline;
165
- background-color: var(--mdPrimaryColor20);
166
+ background-color: var(--md-color-cta-secondary-hover);
166
167
  }
167
168
 
168
169
  .md-button--tertiary:focus-visible:enabled {
169
- border-color: var(--mdPrimaryColor);
170
- outline: 2px var(--mdPrimaryColor80) solid;
170
+ border-color: var(--md-color-border-tertiary);
171
+ outline: var(--md-size-2) var(--md-color-primary-80) solid;
171
172
  background-color: transparent;
172
173
  outline-offset: 0px;
173
174
  }
174
175
 
175
176
  .md-button--tertiary:focus-visible:hover:enabled {
176
- background-color: var(--mdPrimaryColor20);
177
+ background-color: var(--md-color-surface-info-primary);
177
178
  }
178
179
 
179
180
  .md-button--tertiary:active:enabled {
180
- background-color: var(--mdPrimaryColor30) !important;
181
- color: var(--mdPrimaryColor120) !important;
181
+ background-color: var(--md-color-cta-secondary-active) !important;
182
+ color: var(--md-color-text-visited) !important;
182
183
  }
183
184
 
184
185
  .md-button--tertiary:disabled {
185
186
  background-color: transparent;
186
- color: var(--mdGreyColor20);
187
- border-color: var(--mdGreyColor20);
187
+ color: var(--md-color-text-disabled);
188
+ border-color: transparent;
188
189
  }
189
190
 
190
191
  .md-button--tertiary > .md-button__rightIcon {
191
- color: var(--mdPrimaryColor);
192
+ color: var(--md-color-text-secondary);
192
193
  }
193
194
 
194
195
  .md-button--tertiary:disabled > .md-button__rightIcon {
195
- color: var(--mdGreyColor20);
196
+ color: var(--md-color-disabled-bg);
196
197
  }
197
198
 
198
199
  .md-button--danger {
199
- background-color: var(--mdErrorColor);
200
+ background-color: var(--md-color-attention-error-primary);
200
201
  }
201
202
 
202
203
  .md-button--danger:focus-visible:enabled {
203
- background-color: var(--mdErrorColor);
204
- outline: 2px white solid;
204
+ background-color: var(--md-color-attention-error-primary);
205
+ outline: var(--md-size-2) var(--md-color-text-inverted) solid;
205
206
  outline-offset: -4px;
206
207
  }
207
208
 
208
209
  .md-button--danger:hover:enabled {
209
- background-color: var(--mdErrorColor120);
210
+ background-color: var(--md-color-attention-error-primary-hover);
210
211
  }
211
212
 
212
213
  .md-button--danger:active:enabled {
213
- background-color: var(--mdErrorColor140);
214
+ background-color: var(--md-color-attention-error-primary-active);
214
215
  }
215
216
 
216
217
  /* Danger secondary */
217
218
  .md-button--danger-secondary {
218
- background-color: #ffffff;
219
- border: 2px solid var(--mdErrorColor);
220
- color: var(--mdErrorColor);
221
- padding: calc(0.75rem - 2px) calc(1rem - 2px);
219
+ background-color: var(--md-color-surface-primary);
220
+ border: var(--md-size-2) solid var(--md-color-attention-error-primary);
221
+ color: var(--md-color-attention-error-primary);
222
+ padding: calc(var(--md-size-12) - 2px) calc(var(--md-size-16) - 2px);
222
223
  }
223
224
 
224
225
  .md-button--small.md-button--danger-secondary {
225
- padding: calc(0.5rem - 2px) calc(0.75rem - 2px);
226
+ padding: calc(var(--md-size-8) - 2px) calc(var(--md-size-12) - 2px);
226
227
  }
227
228
 
228
229
  .md-button--large.md-button--danger-secondary {
229
- padding: calc(1rem - 2px) calc(1.25rem - 2px);
230
+ padding: calc(var(--md-size-16) - 2px) calc(var(--md-size-20) - 2px);
230
231
  }
231
232
 
232
233
  .md-button--danger-secondary:hover:enabled {
233
- background-color: var(--mdErrorColor20);
234
- border-color: var(--mdErrorColor);
234
+ background-color: var(--md-color-attention-error-secondary-hover);
235
+ border-color: var(--md-color-attention-error-primary);
235
236
  }
236
237
 
237
238
  .md-button--danger-secondary:focus-visible:enabled {
238
- background-color: #ffffff;
239
- border-color: var(--mdErrorColor);
240
- color: var(--mdErrorColor);
241
- outline: 2px var(--mdErrorColor) solid;
239
+ background-color: var(--md-color-surface-primary);
240
+ border-color: var(--md-color-attention-error-primary);
241
+ color: var(--md-color-attention-error-primary);
242
+ outline: var(--md-size-2) var(--md-color-attention-error-primary) solid;
242
243
  outline-offset: -6px;
243
244
  }
244
245
 
245
246
  .md-button--danger-secondary:active:enabled {
246
- background-color: var(--mdErrorBackgroundColor);
247
- color: var(--mdErrorColor120);
248
- border-color: var(--mdErrorColor120);
247
+ background-color: var(--md-color-attention-error-bg);
248
+ color: var(--md-color-attention-error-primary-hover);
249
+ border-color: var(--md-color-attention-error-primary-hover);
249
250
  }
250
251
 
251
252
  .md-button--danger-secondary:disabled {
252
253
  background-color: #fff;
253
- color: var(--mdGreyColor60);
254
- border-color: var(--mdGreyColor20);
254
+ color: var(--md-color-disabled-default);
255
+ border-color: var(--md-color-border-secondary);
255
256
  }
256
257
 
257
258
  .md-button--danger-secondary > .md-button__rightIcon {
258
- color: var(--mdErrorColor);
259
+ color: var(--md-color-attention-error-primary);
259
260
  }
260
261
 
261
262
  .md-button--danger-secondary:disabled > .md-button__rightIcon {
262
- color: var(--mdGreyColor60);
263
+ color: var(--md-color-text-disabled);
263
264
  }
package/src/chips/chips.css CHANGED
@@ -1,50 +1,50 @@
1
1
  .md-chip {
2
2
  display: flex;
3
3
  align-items: center;
4
- background-color: #fff;
5
- outline: 1px solid var(--mdPrimaryColor);
4
+ background-color: var(--md-color-surface-primary);
5
+ outline: var(--md-size-1) solid var(--md-color-cta-secondary-stroke);
6
6
  outline-offset: -1px;
7
7
  border: none;
8
- border-radius: 10rem;
9
- color: var(--mdPrimaryColor);
10
- font-weight: 400;
11
- font-family: 'Open sans';
12
- font-size: 1rem;
13
- line-height: 1.5rem;
14
- padding: 0.5rem 1rem;
8
+ border-radius: var(--md-radius-xl);
9
+ color: var(--md-color-text-secondary);
10
+ font-weight: var(--md-typography-weight-regular);
11
+ font-family: var(--md-typography-family-label);
12
+ font-size: var(--md-typography-size-16);
13
+ line-height: var(--md-typography-line-height-medium);
14
+ padding: var(--md-size-8) var(--md-size-16);
15
15
  cursor: pointer;
16
16
  text-align: left;
17
17
  }
18
18
 
19
19
  .md-chip.md-chip--solid:not(.md-chip--disabled) {
20
- background-color: var(--mdPrimaryColor80);
21
- color: #fff;
20
+ background-color: var(--md-color-cta-primary-focus);
21
+ color: var(--md-color-text-inverted);
22
22
  }
23
23
  .md-chip.md-chip--solid:not(.md-chip--disabled):hover {
24
- background-color: var(--mdPrimaryColor120);
25
- color: #fff;
24
+ background-color: var(--md-color-cta-primary-hover);
25
+ color: var(--md-color-text-inverted);
26
26
  }
27
27
  .md-chip.md-chip--active:not(.md-chip--disabled):hover {
28
- background-color: var(--mdPrimaryColor120);
29
- color: #fff;
28
+ background-color: var(--md-color-cta-primary-hover);
29
+ color: var(--md-color-text-inverted);
30
30
  }
31
31
  .md-chip.md-chip--solid:not(.md-chip--disabled):focus-visible {
32
32
  outline-offset: 0.1875rem;
33
33
  }
34
34
 
35
35
  .md-chip:not(.md-chip--disabled):hover {
36
- background-color: var(--mdPrimaryColor20);
36
+ background-color: var(--md-color-cta-secondary-hover);
37
37
  }
38
38
 
39
39
  .md-chip:not(.md-chip--disabled):focus-visible {
40
- outline: 0.1875rem solid var(--mdPrimaryColor);
40
+ outline: 0.1875rem solid var(--md-color-cta-primary-focus);
41
41
  outline-offset: -0.1875rem;
42
42
  }
43
43
 
44
44
  .md-chip--disabled {
45
- background-color: var(--mdGreyColor20);
46
- color: var(--mdGreyColor60);
47
- outline: 1px solid var(--mdGreyColor60);
45
+ background-color: var(--md-color-disabled-bg);
46
+ color: var(--md-color-text-disabled);
47
+ outline: var(--md-size-1) solid var(--md-color-disabled-default);
48
48
  cursor: default;
49
49
  }
50
50
 
@@ -53,19 +53,19 @@
53
53
  }
54
54
 
55
55
  .md-chip:not(.md-chip--disabled).md-chip--active {
56
- background-color: var(--mdPrimaryColor80);
57
- color: #fff;
56
+ background-color: var(--md-color-cta-primary-focus);
57
+ color: var(--md-color-text-inverted);
58
58
  }
59
59
 
60
60
  .md-chip:not(.md-chip--disabled).md-chip--active:focus-visible {
61
61
  outline-offset: -0.3125rem;
62
- outline-color: #fff;
62
+ outline-color: var(--md-color-text-inverted);
63
63
  }
64
64
 
65
65
  .md-chip__left-icon {
66
66
  display: flex;
67
- width: 1.25rem;
68
- height: 1.25rem;
67
+ width: var(--md-size-20);
68
+ height: var(--md-size-20);
69
69
  margin-right: 0.66rem;
70
70
  }
71
71
 
@@ -75,7 +75,7 @@
75
75
 
76
76
  .md-chip__right-icon {
77
77
  display: flex;
78
- width: 1.25rem;
79
- height: 1.25rem;
78
+ width: var(--md-size-20);
79
+ height: var(--md-size-20);
80
80
  margin-left: 0.8rem;
81
81
  }
package/src/colors.css CHANGED
@@ -1,8 +1,15 @@
1
+ /*
2
+ * THESE COLOR VARIABLES ARE DEPRECATED
3
+ * Please use tokens from tokens/tokens.css and tokens/variables.css
4
+ * This file will be deleted sometime in the not so distant future 🧑‍🚀
5
+ */
6
+
1
7
  :root {
2
- --mdPrimaryColor: #005e5d;
8
+ /* COLORS */
3
9
  --mdPrimaryColor160: #003b3a;
4
10
  --mdPrimaryColor140: #004646;
5
11
  --mdPrimaryColor120: #005251;
12
+ --mdPrimaryColor100: #005e5d;
6
13
  --mdPrimaryColor90: #196d6c;
7
14
  --mdPrimaryColor80: #337e7d;
8
15
  --mdPrimaryColor70: #4c8e8d;
@@ -12,15 +19,14 @@
12
19
  --mdPrimaryColor30: #b2cece;
13
20
  --mdPrimaryColor20: #ccdfde;
14
21
  --mdPrimaryColor10: #e5eeee;
22
+ --mdPrimaryColor: #005e5d;
15
23
 
16
- --mdLightPrimaryColor: #40c1ac;
17
- --mdDarkPrimaryColor: #005251;
18
-
19
- --mdSecondaryColor: #ece7d2;
24
+ --mdSecondaryColor100: #ece7d2;
20
25
  --mdSecondaryColor80: #efebdb;
21
26
  --mdSecondaryColor60: #f3f0e4;
22
27
  --mdSecondaryColor40: #f7f5ed;
23
28
  --mdSecondaryColor20: #fbfaf6;
29
+ --mdSecondaryColor: #ece7d2;
24
30
 
25
31
  --mdTertiaryBlueColor: #1472ce;
26
32
  --mdTertiaryBlueLightColor: #b9d9eb;
@@ -31,23 +37,25 @@
31
37
  --mdTertiaryBrownColor: #584446;
32
38
  --mdTertiaryBrownLightColor: #d6d2c4;
33
39
 
34
- --mdTextColor: #222222;
35
-
36
- --mdWarningBackgroundColor: #fce4ca;
37
- --mdWarningColor: #de8215;
40
+ --mdWarningLightColor: #fce4ca;
41
+ --mdWarningDarkColor: #de8215;
38
42
 
43
+ --mdErrorColor160: #830000;
44
+ --mdErrorColor120: #a50000;
45
+ --mdErrorColor100: #ca0000;
46
+ --mdErrorColor40: #ea9999;
47
+ --mdErrorColor20: #f5cccc;
48
+ --mdErrorColor10: #f9e3e3;
39
49
  --mdErrorColor: #ca0000;
40
- --mdErrorColor20: #f9e3e3;
41
- --mdErrorColor120: #b7090d;
42
- --mdErrorColor140: #830000;
43
- --mdErrorBackgroundColor: #f5cccc;
44
50
 
45
- --mdGreyColor: #222222;
46
- --mdGreyColor10: #e8e8e8;
47
- --mdGreyColor20: #d2d2d2;
48
- --mdGreyColor40: #a6a6a6;
49
- --mdGreyColor60: #767676;
51
+ --mdGreyColor100: #222222;
50
52
  --mdGreyColor80: #4e4e4e;
53
+ --mdGreyColor60: #767676;
54
+ --mdGreyColor40: #a6a6a6;
55
+ --mdGreyColor20: #d2d2d2;
56
+ --mdGreyColor10: #e8e8e8;
57
+ --mdGreyColor: #222222;
58
+ --mdWhiteColor: #ffffff;
51
59
 
52
60
  --mdGreenColor60: #b3e8c2;
53
61
  }