@mirohq/design-system-themes 1.3.4 → 1.3.6

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 +34 -27
  2. package/dark.css +37 -30
  3. package/dist/main.js +123 -111
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +123 -111
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +34 -27
  9. package/metadata.json +56 -47
  10. package/new-dark.css +38 -27
  11. package/new-light.css +38 -27
  12. package/package.json +2 -2
package/new-light.css CHANGED
@@ -38,6 +38,7 @@
38
38
  --colors-background-interactive-primary: var(--colors-blue-500);
39
39
  --colors-background-interactive-primary-hover: var(--colors-blue-550);
40
40
  --colors-background-interactive-primary-pressed: var(--colors-blue-600);
41
+ --colors-background-interactive-secondary-selected: var(--colors-blue-150);
41
42
  --colors-background-interactive-selected: var(--colors-blue-500);
42
43
  --colors-background-interactive-surface-hover: var(--colors-cloud-100);
43
44
  --colors-background-interactive-surface-secondary-hover: var(
@@ -92,6 +93,8 @@
92
93
  --colors-border-disabled: var(--colors-cloud-150);
93
94
  --colors-border-inverted: var(--colors-cloud-900);
94
95
  --colors-border-inverted-subtle: var(--colors-cloud-700);
96
+ --colors-border-option: var(--colors-cloud-450);
97
+ --colors-border-option-hover: var(--colors-blue-550);
95
98
  --colors-border-static-dark: var(--colors-cloud-450);
96
99
  --colors-border-static-dark-subtle: var(--colors-cloud-750);
97
100
  --colors-border-strong: var(--colors-cloud-300);
@@ -206,19 +209,18 @@
206
209
  --colors-format-icon-slides: var(--colors-coral-600);
207
210
  --colors-format-icon-table: var(--colors-moss-600);
208
211
  --colors-format-icon-timeline: var(--colors-moss-600);
209
- --colors-input-background-active: var(--colors-cloud-100);
210
212
  --colors-input-background-alt-active: var(--colors-cloud-100);
211
213
  --colors-input-background-alt-default: var(--colors-cloud-100);
212
214
  --colors-input-background-alt-hover: var(--colors-cloud-100);
213
215
  --colors-input-background-default: var(--colors-cloud-100);
214
216
  --colors-input-background-disabled: var(--colors-cloud-150);
217
+ --colors-input-background-focused: var(--colors-cloud-100);
215
218
  --colors-input-background-hover: var(--colors-cloud-100);
216
- --colors-input-border-active: var(--colors-transparent);
217
219
  --colors-input-border-default: var(--colors-transparent);
218
220
  --colors-input-border-disabled: var(--colors-transparent);
219
221
  --colors-input-border-error: var(--colors-red-500);
222
+ --colors-input-border-focused: var(--colors-transparent);
220
223
  --colors-input-border-hover: var(--colors-transparent);
221
- --colors-input-border-selection-control: var(--colors-cloud-450);
222
224
  --colors-input-border-success: var(--colors-green-500);
223
225
  --colors-notification-background: var(--colors-cloud-850);
224
226
  --colors-notification-border: var(--colors-cloud-450);
@@ -228,6 +230,7 @@
228
230
  --colors-scrollbar-background: var(--colors-cloud-300);
229
231
  --colors-scrollbar-background-hover: var(--colors-cloud-350);
230
232
  --colors-slider-background: var(--colors-cloud-300);
233
+ --colors-slider-control-background: var(--colors-white);
231
234
  --colors-slider-notch-background: var(--colors-cloud-300);
232
235
  --colors-switch-background-default: var(--colors-cloud-300);
233
236
  --colors-switch-background-hover: var(--colors-cloud-350);
@@ -249,19 +252,23 @@
249
252
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
250
253
  --colors-icon-placeholder: var(--colors-cloud-400);
251
254
  --colors-icon-secondary: var(--colors-cloud-700);
255
+ --colors-icon-interactive-on-inverted: var(--colors-white);
256
+ --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-50);
257
+ --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-100);
258
+ --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-300);
259
+ --colors-icon-interactive-on-inverted-secondary-hover: var(
260
+ --colors-cloud-350
261
+ );
262
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
263
+ --colors-cloud-400
264
+ );
265
+ --colors-icon-interactive-primary: var(--colors-blue-500);
266
+ --colors-icon-interactive-primary-hover: var(--colors-blue-550);
267
+ --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
268
+ --colors-icon-interactive-secondary: var(--colors-cloud-700);
269
+ --colors-icon-interactive-secondary-hover: var(--colors-cloud-750);
270
+ --colors-icon-interactive-secondary-pressed: var(--colors-cloud-800);
252
271
  --colors-icon-interactive-selected: var(--colors-blue-550);
253
- --colors-icon-link: var(--colors-blue-500);
254
- --colors-icon-link-hover: var(--colors-blue-550);
255
- --colors-icon-link-on-inverted: var(--colors-white);
256
- --colors-icon-link-on-inverted-hover: var(--colors-cloud-50);
257
- --colors-icon-link-on-inverted-pressed: var(--colors-cloud-100);
258
- --colors-icon-link-on-inverted-secondary: var(--colors-cloud-300);
259
- --colors-icon-link-on-inverted-secondary-hover: var(--colors-cloud-350);
260
- --colors-icon-link-on-inverted-secondary-pressed: var(--colors-cloud-400);
261
- --colors-icon-link-pressed: var(--colors-blue-600);
262
- --colors-icon-link-secondary: var(--colors-cloud-700);
263
- --colors-icon-link-secondary-hover: var(--colors-cloud-750);
264
- --colors-icon-link-secondary-pressed: var(--colors-cloud-800);
265
272
  --colors-icon-on-interactive-danger: var(--colors-white);
266
273
  --colors-icon-on-interactive-primary: var(--colors-white);
267
274
  --colors-icon-on-interactive-secondary: var(--colors-cloud-900);
@@ -309,19 +316,23 @@
309
316
  --colors-text-danger-hover: var(--colors-red-550);
310
317
  --colors-text-danger-inverted: var(--colors-red-50);
311
318
  --colors-text-danger-pressed: var(--colors-red-600);
319
+ --colors-text-interactive-on-inverted: var(--colors-white);
320
+ --colors-text-interactive-on-inverted-hover: var(--colors-cloud-50);
321
+ --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-100);
322
+ --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-300);
323
+ --colors-text-interactive-on-inverted-secondary-hover: var(
324
+ --colors-cloud-350
325
+ );
326
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
327
+ --colors-cloud-400
328
+ );
329
+ --colors-text-interactive-primary: var(--colors-blue-500);
330
+ --colors-text-interactive-primary-hover: var(--colors-blue-550);
331
+ --colors-text-interactive-primary-pressed: var(--colors-blue-600);
332
+ --colors-text-interactive-secondary: var(--colors-cloud-700);
333
+ --colors-text-interactive-secondary-hover: var(--colors-cloud-750);
334
+ --colors-text-interactive-secondary-pressed: var(--colors-cloud-800);
312
335
  --colors-text-interactive-selected: var(--colors-blue-550);
313
- --colors-text-link: var(--colors-blue-500);
314
- --colors-text-link-hover: var(--colors-blue-550);
315
- --colors-text-link-on-inverted: var(--colors-white);
316
- --colors-text-link-on-inverted-hover: var(--colors-cloud-50);
317
- --colors-text-link-on-inverted-pressed: var(--colors-cloud-100);
318
- --colors-text-link-on-inverted-secondary: var(--colors-cloud-300);
319
- --colors-text-link-on-inverted-secondary-hover: var(--colors-cloud-350);
320
- --colors-text-link-on-inverted-secondary-pressed: var(--colors-cloud-400);
321
- --colors-text-link-pressed: var(--colors-blue-600);
322
- --colors-text-link-secondary: var(--colors-cloud-700);
323
- --colors-text-link-secondary-hover: var(--colors-cloud-750);
324
- --colors-text-link-secondary-pressed: var(--colors-cloud-800);
325
336
  --colors-text-on-interactive-danger: var(--colors-white);
326
337
  --colors-text-on-interactive-primary: var(--colors-white);
327
338
  --colors-text-on-interactive-secondary: var(--colors-cloud-900);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-themes",
3
- "version": "1.3.4",
3
+ "version": "1.3.6",
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": "^8.0.1"
37
+ "@mirohq/design-tokens": "^10.0.0"
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/lodash.kebabcase": "4.1.7",