@mirohq/design-system-themes 1.3.3 → 1.3.5

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 +32 -26
  2. package/dark.css +35 -29
  3. package/dist/main.js +115 -107
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +115 -107
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +1 -1
  8. package/light.css +32 -26
  9. package/metadata.json +1103 -0
  10. package/new-dark.css +36 -26
  11. package/new-light.css +36 -26
  12. package/package.json +6 -4
package/new-dark.css CHANGED
@@ -92,6 +92,8 @@
92
92
  --colors-border-disabled: var(--colors-cloud-750);
93
93
  --colors-border-inverted: var(--colors-cloud-100);
94
94
  --colors-border-inverted-subtle: var(--colors-cloud-500);
95
+ --colors-border-option: var(--colors-cloud-450);
96
+ --colors-border-option-hover: var(--colors-blue-450);
95
97
  --colors-border-static-dark: var(--colors-cloud-450);
96
98
  --colors-border-static-dark-subtle: var(--colors-cloud-750);
97
99
  --colors-border-strong: var(--colors-cloud-450);
@@ -213,12 +215,11 @@
213
215
  --colors-input-background-default: var(--colors-cloud-850);
214
216
  --colors-input-background-disabled: var(--colors-cloud-850);
215
217
  --colors-input-background-hover: var(--colors-cloud-850);
216
- --colors-input-border-active: var(--colors-transparent);
217
218
  --colors-input-border-default: var(--colors-transparent);
218
219
  --colors-input-border-disabled: var(--colors-transparent);
219
220
  --colors-input-border-error: var(--colors-red-400);
221
+ --colors-input-border-focused: var(--colors-transparent);
220
222
  --colors-input-border-hover: var(--colors-transparent);
221
- --colors-input-border-selection-control: var(--colors-cloud-450);
222
223
  --colors-input-border-success: var(--colors-green-400);
223
224
  --colors-notification-background: var(--colors-cloud-150);
224
225
  --colors-notification-border: var(--colors-cloud-450);
@@ -228,6 +229,7 @@
228
229
  --colors-scrollbar-background: var(--colors-gray-700);
229
230
  --colors-scrollbar-background-hover: var(--colors-gray-650);
230
231
  --colors-slider-background: var(--colors-gray-700);
232
+ --colors-slider-control-background: var(--colors-cloud-900);
231
233
  --colors-slider-notch-background: var(--colors-gray-700);
232
234
  --colors-switch-background-default: var(--colors-gray-700);
233
235
  --colors-switch-background-hover: var(--colors-gray-650);
@@ -249,19 +251,23 @@
249
251
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
250
252
  --colors-icon-placeholder: var(--colors-cloud-400);
251
253
  --colors-icon-secondary: var(--colors-cloud-300);
254
+ --colors-icon-interactive-on-inverted: var(--colors-cloud-900);
255
+ --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-850);
256
+ --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-800);
257
+ --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-700);
258
+ --colors-icon-interactive-on-inverted-secondary-hover: var(
259
+ --colors-cloud-650
260
+ );
261
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
262
+ --colors-cloud-600
263
+ );
264
+ --colors-icon-interactive-primary: var(--colors-blue-500);
265
+ --colors-icon-interactive-primary-hover: var(--colors-blue-450);
266
+ --colors-icon-interactive-primary-pressed: var(--colors-blue-400);
267
+ --colors-icon-interactive-secondary: var(--colors-cloud-300);
268
+ --colors-icon-interactive-secondary-hover: var(--colors-cloud-250);
269
+ --colors-icon-interactive-secondary-pressed: var(--colors-cloud-200);
252
270
  --colors-icon-interactive-selected: var(--colors-blue-400);
253
- --colors-icon-link: var(--colors-blue-500);
254
- --colors-icon-link-hover: var(--colors-blue-450);
255
- --colors-icon-link-on-inverted: var(--colors-cloud-900);
256
- --colors-icon-link-on-inverted-hover: var(--colors-cloud-850);
257
- --colors-icon-link-on-inverted-pressed: var(--colors-cloud-800);
258
- --colors-icon-link-on-inverted-secondary: var(--colors-cloud-700);
259
- --colors-icon-link-on-inverted-secondary-hover: var(--colors-cloud-650);
260
- --colors-icon-link-on-inverted-secondary-pressed: var(--colors-cloud-600);
261
- --colors-icon-link-pressed: var(--colors-blue-400);
262
- --colors-icon-link-secondary: var(--colors-cloud-300);
263
- --colors-icon-link-secondary-hover: var(--colors-cloud-250);
264
- --colors-icon-link-secondary-pressed: var(--colors-cloud-200);
265
271
  --colors-icon-on-interactive-danger: var(--colors-white);
266
272
  --colors-icon-on-interactive-primary: var(--colors-white);
267
273
  --colors-icon-on-interactive-secondary: var(--colors-white);
@@ -309,19 +315,23 @@
309
315
  --colors-text-danger-hover: var(--colors-red-350);
310
316
  --colors-text-danger-inverted: var(--colors-red-900);
311
317
  --colors-text-danger-pressed: var(--colors-red-300);
318
+ --colors-text-interactive-on-inverted: var(--colors-cloud-900);
319
+ --colors-text-interactive-on-inverted-hover: var(--colors-cloud-850);
320
+ --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-800);
321
+ --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-700);
322
+ --colors-text-interactive-on-inverted-secondary-hover: var(
323
+ --colors-cloud-650
324
+ );
325
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
326
+ --colors-cloud-600
327
+ );
328
+ --colors-text-interactive-primary: var(--colors-blue-500);
329
+ --colors-text-interactive-primary-hover: var(--colors-blue-450);
330
+ --colors-text-interactive-primary-pressed: var(--colors-blue-400);
331
+ --colors-text-interactive-secondary: var(--colors-cloud-300);
332
+ --colors-text-interactive-secondary-hover: var(--colors-cloud-250);
333
+ --colors-text-interactive-secondary-pressed: var(--colors-cloud-200);
312
334
  --colors-text-interactive-selected: var(--colors-blue-400);
313
- --colors-text-link: var(--colors-blue-500);
314
- --colors-text-link-hover: var(--colors-blue-450);
315
- --colors-text-link-on-inverted: var(--colors-cloud-900);
316
- --colors-text-link-on-inverted-hover: var(--colors-cloud-850);
317
- --colors-text-link-on-inverted-pressed: var(--colors-cloud-800);
318
- --colors-text-link-on-inverted-secondary: var(--colors-cloud-700);
319
- --colors-text-link-on-inverted-secondary-hover: var(--colors-cloud-650);
320
- --colors-text-link-on-inverted-secondary-pressed: var(--colors-cloud-600);
321
- --colors-text-link-pressed: var(--colors-blue-400);
322
- --colors-text-link-secondary: var(--colors-cloud-300);
323
- --colors-text-link-secondary-hover: var(--colors-cloud-250);
324
- --colors-text-link-secondary-pressed: var(--colors-cloud-200);
325
335
  --colors-text-on-interactive-danger: var(--colors-white);
326
336
  --colors-text-on-interactive-primary: var(--colors-white);
327
337
  --colors-text-on-interactive-secondary: var(--colors-white);
package/new-light.css CHANGED
@@ -92,6 +92,8 @@
92
92
  --colors-border-disabled: var(--colors-cloud-150);
93
93
  --colors-border-inverted: var(--colors-cloud-900);
94
94
  --colors-border-inverted-subtle: var(--colors-cloud-700);
95
+ --colors-border-option: var(--colors-cloud-450);
96
+ --colors-border-option-hover: var(--colors-blue-550);
95
97
  --colors-border-static-dark: var(--colors-cloud-450);
96
98
  --colors-border-static-dark-subtle: var(--colors-cloud-750);
97
99
  --colors-border-strong: var(--colors-cloud-300);
@@ -213,12 +215,11 @@
213
215
  --colors-input-background-default: var(--colors-cloud-100);
214
216
  --colors-input-background-disabled: var(--colors-cloud-150);
215
217
  --colors-input-background-hover: var(--colors-cloud-100);
216
- --colors-input-border-active: var(--colors-transparent);
217
218
  --colors-input-border-default: var(--colors-transparent);
218
219
  --colors-input-border-disabled: var(--colors-transparent);
219
220
  --colors-input-border-error: var(--colors-red-500);
221
+ --colors-input-border-focused: var(--colors-transparent);
220
222
  --colors-input-border-hover: var(--colors-transparent);
221
- --colors-input-border-selection-control: var(--colors-cloud-450);
222
223
  --colors-input-border-success: var(--colors-green-500);
223
224
  --colors-notification-background: var(--colors-cloud-850);
224
225
  --colors-notification-border: var(--colors-cloud-450);
@@ -228,6 +229,7 @@
228
229
  --colors-scrollbar-background: var(--colors-cloud-300);
229
230
  --colors-scrollbar-background-hover: var(--colors-cloud-350);
230
231
  --colors-slider-background: var(--colors-cloud-300);
232
+ --colors-slider-control-background: var(--colors-white);
231
233
  --colors-slider-notch-background: var(--colors-cloud-300);
232
234
  --colors-switch-background-default: var(--colors-cloud-300);
233
235
  --colors-switch-background-hover: var(--colors-cloud-350);
@@ -249,19 +251,23 @@
249
251
  --colors-icon-on-static-dark-subtle: var(--colors-gray-300);
250
252
  --colors-icon-placeholder: var(--colors-cloud-400);
251
253
  --colors-icon-secondary: var(--colors-cloud-700);
254
+ --colors-icon-interactive-on-inverted: var(--colors-white);
255
+ --colors-icon-interactive-on-inverted-hover: var(--colors-cloud-50);
256
+ --colors-icon-interactive-on-inverted-pressed: var(--colors-cloud-100);
257
+ --colors-icon-interactive-on-inverted-secondary: var(--colors-cloud-300);
258
+ --colors-icon-interactive-on-inverted-secondary-hover: var(
259
+ --colors-cloud-350
260
+ );
261
+ --colors-icon-interactive-on-inverted-secondary-pressed: var(
262
+ --colors-cloud-400
263
+ );
264
+ --colors-icon-interactive-primary: var(--colors-blue-500);
265
+ --colors-icon-interactive-primary-hover: var(--colors-blue-550);
266
+ --colors-icon-interactive-primary-pressed: var(--colors-blue-600);
267
+ --colors-icon-interactive-secondary: var(--colors-cloud-700);
268
+ --colors-icon-interactive-secondary-hover: var(--colors-cloud-750);
269
+ --colors-icon-interactive-secondary-pressed: var(--colors-cloud-800);
252
270
  --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
271
  --colors-icon-on-interactive-danger: var(--colors-white);
266
272
  --colors-icon-on-interactive-primary: var(--colors-white);
267
273
  --colors-icon-on-interactive-secondary: var(--colors-cloud-900);
@@ -309,19 +315,23 @@
309
315
  --colors-text-danger-hover: var(--colors-red-550);
310
316
  --colors-text-danger-inverted: var(--colors-red-50);
311
317
  --colors-text-danger-pressed: var(--colors-red-600);
318
+ --colors-text-interactive-on-inverted: var(--colors-white);
319
+ --colors-text-interactive-on-inverted-hover: var(--colors-cloud-50);
320
+ --colors-text-interactive-on-inverted-pressed: var(--colors-cloud-100);
321
+ --colors-text-interactive-on-inverted-secondary: var(--colors-cloud-300);
322
+ --colors-text-interactive-on-inverted-secondary-hover: var(
323
+ --colors-cloud-350
324
+ );
325
+ --colors-text-interactive-on-inverted-secondary-pressed: var(
326
+ --colors-cloud-400
327
+ );
328
+ --colors-text-interactive-primary: var(--colors-blue-500);
329
+ --colors-text-interactive-primary-hover: var(--colors-blue-550);
330
+ --colors-text-interactive-primary-pressed: var(--colors-blue-600);
331
+ --colors-text-interactive-secondary: var(--colors-cloud-700);
332
+ --colors-text-interactive-secondary-hover: var(--colors-cloud-750);
333
+ --colors-text-interactive-secondary-pressed: var(--colors-cloud-800);
312
334
  --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
335
  --colors-text-on-interactive-danger: var(--colors-white);
326
336
  --colors-text-on-interactive-primary: var(--colors-white);
327
337
  --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.3",
3
+ "version": "1.3.5",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -18,7 +18,8 @@
18
18
  "./light.css": "./light.css",
19
19
  "./dark.css": "./dark.css",
20
20
  "./new-light.css": "./new-light.css",
21
- "./new-dark.css": "./new-dark.css"
21
+ "./new-dark.css": "./new-dark.css",
22
+ "./metadata.json": "./metadata.json"
22
23
  },
23
24
  "files": [
24
25
  "dist",
@@ -26,13 +27,14 @@
26
27
  "light.css",
27
28
  "dark.css",
28
29
  "new-light.css",
29
- "new-dark.css"
30
+ "new-dark.css",
31
+ "metadata.json"
30
32
  ],
31
33
  "publishConfig": {
32
34
  "access": "public"
33
35
  },
34
36
  "dependencies": {
35
- "@mirohq/design-tokens": "^8.0.1"
37
+ "@mirohq/design-tokens": "^9.0.0"
36
38
  },
37
39
  "devDependencies": {
38
40
  "@types/lodash.kebabcase": "4.1.7",