@mirohq/design-system-themes 1.3.6 → 1.3.8

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 (12) hide show
  1. package/base.css +24 -1
  2. package/dark.css +28 -5
  3. package/dist/main.js +321 -213
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +321 -213
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +24 -1
  9. package/metadata.json +27 -0
  10. package/new-dark.css +183 -178
  11. package/new-light.css +52 -29
  12. package/package.json +2 -2
package/new-light.css CHANGED
@@ -11,13 +11,14 @@
11
11
  --colors-alpha-black-200
12
12
  );
13
13
  --colors-background-alpha-subtle: var(--colors-alpha-gray-50);
14
- --colors-background-canvas: var(--colors-cloud-50);
15
- --colors-background-disabled: var(--colors-gray-150);
14
+ --colors-background-canvas: var(--colors-gray-50);
15
+ --colors-background-disabled: var(--colors-cloud-150);
16
16
  --colors-background-elevated: var(--colors-white);
17
17
  --colors-background-inverted: var(--colors-cloud-950);
18
18
  --colors-background-inverted-secondary: var(--colors-cloud-800);
19
19
  --colors-background-layout: var(--colors-white);
20
20
  --colors-background-overlay: var(--colors-alpha-black-400);
21
+ --colors-background-space: var(--colors-cloud-50);
21
22
  --colors-background-static-dark: var(--colors-cloud-850);
22
23
  --colors-background-static-dark-subtle: var(--colors-cloud-750);
23
24
  --colors-background-static-light: var(--colors-white);
@@ -97,6 +98,7 @@
97
98
  --colors-border-option-hover: var(--colors-blue-550);
98
99
  --colors-border-static-dark: var(--colors-cloud-450);
99
100
  --colors-border-static-dark-subtle: var(--colors-cloud-750);
101
+ --colors-border-static-light: var(--colors-white);
100
102
  --colors-border-strong: var(--colors-cloud-300);
101
103
  --colors-border-subtle: var(--colors-cloud-100);
102
104
  --colors-border-transparent: var(--colors-transparent);
@@ -161,6 +163,8 @@
161
163
  --colors-border-success-subtle: var(--colors-green-250);
162
164
  --colors-border-warning: var(--colors-yellow-500);
163
165
  --colors-border-warning-subtle: var(--colors-yellow-300);
166
+ --colors-badge-border: var(--colors-white);
167
+ --colors-badge-border-inverted: var(--colors-blue-500);
164
168
  --colors-button-background-danger: var(--colors-red-500);
165
169
  --colors-button-background-danger-hover: var(--colors-red-550);
166
170
  --colors-button-background-danger-pressed: var(--colors-red-600);
@@ -170,9 +174,9 @@
170
174
  --colors-button-background-primary: var(--colors-cloud-800);
171
175
  --colors-button-background-primary-hover: var(--colors-cloud-900);
172
176
  --colors-button-background-primary-pressed: var(--colors-cloud-950);
173
- --colors-button-background-secondary: var(--colors-transparent);
174
- --colors-button-background-secondary-hover: var(--colors-cloud-150);
175
- --colors-button-background-secondary-pressed: var(--colors-cloud-200);
177
+ --colors-button-background-secondary: var(--colors-cloud-150);
178
+ --colors-button-background-secondary-hover: var(--colors-cloud-200);
179
+ --colors-button-background-secondary-pressed: var(--colors-cloud-250);
176
180
  --colors-button-background-tertiary: var(--colors-transparent);
177
181
  --colors-button-background-tertiary-hover: var(--colors-cloud-150);
178
182
  --colors-button-background-tertiary-pressed: var(--colors-cloud-200);
@@ -184,12 +188,12 @@
184
188
  --colors-button-border-primary: var(--colors-blue-500);
185
189
  --colors-button-border-primary-hover: var(--colors-blue-550);
186
190
  --colors-button-border-primary-pressed: var(--colors-blue-600);
187
- --colors-button-border-secondary: var(--colors-cloud-700);
188
- --colors-button-border-secondary-hover: var(--colors-cloud-650);
189
- --colors-button-border-secondary-pressed: var(--colors-cloud-650);
190
- --colors-button-border-tertiary: var(--colors-cloud-200);
191
- --colors-button-border-tertiary-hover: var(--colors-cloud-300);
192
- --colors-button-border-tertiary-pressed: var(--colors-cloud-350);
191
+ --colors-button-border-secondary: var(--colors-transparent);
192
+ --colors-button-border-secondary-hover: var(--colors-transparent);
193
+ --colors-button-border-secondary-pressed: var(--colors-transparent);
194
+ --colors-button-border-tertiary: var(--colors-cloud-500);
195
+ --colors-button-border-tertiary-hover: var(--colors-cloud-550);
196
+ --colors-button-border-tertiary-pressed: var(--colors-cloud-600);
193
197
  --colors-button-icon-on-danger: var(--colors-white);
194
198
  --colors-button-icon-on-primary: var(--colors-white);
195
199
  --colors-button-icon-on-secondary: var(--colors-cloud-900);
@@ -198,8 +202,9 @@
198
202
  --colors-button-text-on-primary: var(--colors-white);
199
203
  --colors-button-text-on-secondary: var(--colors-cloud-900);
200
204
  --colors-button-text-on-tertiary: var(--colors-cloud-900);
201
- --colors-chip-background: var(--colors-cloud-100);
202
- --colors-chip-background-hover: var(--colors-cloud-150);
205
+ --colors-chip-background: var(--colors-cloud-150);
206
+ --colors-chip-background-disabled: var(--colors-cloud-50);
207
+ --colors-chip-background-hover: var(--colors-cloud-200);
203
208
  --colors-chip-text: var(--colors-cloud-900);
204
209
  --colors-format-icon-diagram: var(--colors-orange-600);
205
210
  --colors-format-icon-docs: var(--colors-cyan-600);
@@ -209,18 +214,18 @@
209
214
  --colors-format-icon-slides: var(--colors-coral-600);
210
215
  --colors-format-icon-table: var(--colors-moss-600);
211
216
  --colors-format-icon-timeline: var(--colors-moss-600);
212
- --colors-input-background-alt-active: var(--colors-cloud-100);
213
- --colors-input-background-alt-default: var(--colors-cloud-100);
214
- --colors-input-background-alt-hover: var(--colors-cloud-100);
215
- --colors-input-background-default: var(--colors-cloud-100);
217
+ --colors-input-background-alt-active: var(--colors-cloud-200);
218
+ --colors-input-background-alt-default: var(--colors-cloud-150);
219
+ --colors-input-background-alt-hover: var(--colors-cloud-200);
220
+ --colors-input-background-default: var(--colors-white);
216
221
  --colors-input-background-disabled: var(--colors-cloud-150);
217
- --colors-input-background-focused: var(--colors-cloud-100);
218
- --colors-input-background-hover: var(--colors-cloud-100);
219
- --colors-input-border-default: var(--colors-transparent);
222
+ --colors-input-background-focused: var(--colors-white);
223
+ --colors-input-background-hover: var(--colors-white);
224
+ --colors-input-border-default: var(--colors-cloud-425);
220
225
  --colors-input-border-disabled: var(--colors-transparent);
221
226
  --colors-input-border-error: var(--colors-red-500);
222
- --colors-input-border-focused: var(--colors-transparent);
223
- --colors-input-border-hover: var(--colors-transparent);
227
+ --colors-input-border-focused: var(--colors-blue-550);
228
+ --colors-input-border-hover: var(--colors-cloud-450);
224
229
  --colors-input-border-success: var(--colors-green-500);
225
230
  --colors-notification-background: var(--colors-cloud-850);
226
231
  --colors-notification-border: var(--colors-cloud-450);
@@ -232,8 +237,8 @@
232
237
  --colors-slider-background: var(--colors-cloud-300);
233
238
  --colors-slider-control-background: var(--colors-white);
234
239
  --colors-slider-notch-background: var(--colors-cloud-300);
235
- --colors-switch-background-default: var(--colors-cloud-300);
236
- --colors-switch-background-hover: var(--colors-cloud-350);
240
+ --colors-switch-background-default: var(--colors-cloud-425);
241
+ --colors-switch-background-hover: var(--colors-cloud-450);
237
242
  --colors-switch-control-background: var(--colors-white);
238
243
  --colors-tooltip-background: var(--colors-cloud-950);
239
244
  --colors-tooltip-background-inset: var(--colors-cloud-650);
@@ -243,13 +248,15 @@
243
248
  --colors-icon-danger-inverted: var(--colors-red-50);
244
249
  --colors-icon-danger-pressed: var(--colors-red-600);
245
250
  --colors-icon-default: var(--colors-cloud-900);
246
- --colors-icon-disabled: var(--colors-cloud-300);
251
+ --colors-icon-disabled: var(--colors-cloud-450);
247
252
  --colors-icon-inverted: var(--colors-white);
248
253
  --colors-icon-inverted-secondary: var(--colors-cloud-300);
249
254
  --colors-icon-muted: var(--colors-cloud-400);
250
- --colors-icon-on-disabled: var(--colors-cloud-350);
255
+ --colors-icon-on-disabled: var(--colors-cloud-450);
251
256
  --colors-icon-on-static-dark: var(--colors-gray-50);
252
257
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
258
+ --colors-icon-on-static-light: var(--colors-cloud-900);
259
+ --colors-icon-on-static-light-subtle: var(--colors-cloud-700);
253
260
  --colors-icon-placeholder: var(--colors-cloud-400);
254
261
  --colors-icon-secondary: var(--colors-cloud-700);
255
262
  --colors-icon-interactive-on-inverted: var(--colors-white);
@@ -372,17 +379,33 @@
372
379
  --colors-text-success-inverted: var(--colors-green-50);
373
380
  --colors-text-success-pressed: var(--colors-green-700);
374
381
  --colors-text-default: var(--colors-cloud-900);
375
- --colors-text-disabled: var(--colors-cloud-300);
382
+ --colors-text-disabled: var(--colors-cloud-450);
376
383
  --colors-text-inverted: var(--colors-white);
377
384
  --colors-text-inverted-secondary: var(--colors-cloud-300);
378
385
  --colors-text-muted: var(--colors-cloud-400);
379
- --colors-text-on-disabled: var(--colors-cloud-350);
386
+ --colors-text-on-disabled: var(--colors-cloud-450);
380
387
  --colors-text-on-static-dark: var(--colors-cloud-50);
381
388
  --colors-text-on-static-dark-subtle: var(--colors-cloud-300);
382
- --colors-text-placeholder: var(--colors-cloud-400);
389
+ --colors-text-on-static-light: var(--colors-cloud-900);
390
+ --colors-text-on-static-light-subtle: var(--colors-cloud-700);
391
+ --colors-text-placeholder: var(--colors-cloud-475);
383
392
  --colors-text-secondary: var(--colors-cloud-700);
384
393
  --colors-text-warning: var(--colors-yellow-800);
385
394
  --colors-text-warning-subtle: var(--colors-yellow-600);
395
+ --panel-radii: $150;
396
+ --notification-radii: $100;
397
+ --avatar-radii-people: $round;
398
+ --avatar-radii-team: $50;
399
+ --avatar-radii-group: $50;
400
+ --dropdown-radii: $250;
401
+ --toolbar-radii: $200;
402
+ --toolbar-item-radii: $150;
403
+ --input-radii: $150;
404
+ --button-radii: $100;
405
+ --popup-radii: $100;
406
+ --tooltip-radii: $100;
407
+ --checkbox-radii: $75;
408
+ --list-item-radii: $150;
386
409
  --colors-coal-background: var(--colors-coal-500);
387
410
  --colors-coal-background-mild: var(--colors-coal-350);
388
411
  --colors-coal-background-prominent: var(--colors-coal-700);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-themes",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -34,7 +34,7 @@
34
34
  "access": "public"
35
35
  },
36
36
  "dependencies": {
37
- "@mirohq/design-tokens": "^10.0.0"
37
+ "@mirohq/design-tokens": "^10.1.0"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/lodash.kebabcase": "4.1.7",