@uipath/apollo-wind 2.0.1 → 2.1.1

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 (7) hide show
  1. package/README.md +1 -1
  2. package/dist/components/ui/index.cjs +28 -28
  3. package/dist/components/ui/tooltip.cjs +1 -1
  4. package/dist/components/ui/tooltip.js +1 -1
  5. package/dist/styles.css +57 -2
  6. package/dist/tailwind.css +87 -2
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -142,7 +142,7 @@ This package is part of a pnpm workspace. All commands should be run using `pnpm
142
142
  ```bash
143
143
  pnpm install # Install all dependencies
144
144
  pnpm build # Build apollo packages
145
- pnpm storybook:wind # Run Storybook on http://localhost:6006
145
+ pnpm storybook:design # Run Storybook on http://localhost:6006
146
146
  pnpm test --filter=@uipath/apollo-wind # Run tests
147
147
  pnpm lint --filter=@uipath/apollo-wind # Run lint
148
148
  pnpm format --filter=@uipath/apollo-wind # Run biome format
package/dist/components/ui/index.cjs CHANGED
@@ -15,7 +15,7 @@ var __webpack_modules__ = {
15
15
  "./avatar" (module) {
16
16
  module.exports = require("./avatar.cjs");
17
17
  },
18
- "@/components/ui/badge" (module) {
18
+ "./badge" (module) {
19
19
  module.exports = require("./badge.cjs");
20
20
  },
21
21
  "./breadcrumb" (module) {
@@ -24,28 +24,28 @@ var __webpack_modules__ = {
24
24
  "./button-group" (module) {
25
25
  module.exports = require("./button-group.cjs");
26
26
  },
27
- "@/components/ui/button" (module) {
27
+ "./button" (module) {
28
28
  module.exports = require("./button.cjs");
29
29
  },
30
30
  "@/components/ui/calendar" (module) {
31
31
  module.exports = require("./calendar.cjs");
32
32
  },
33
- "@/components/ui/card" (module) {
33
+ "./card" (module) {
34
34
  module.exports = require("./card.cjs");
35
35
  },
36
36
  "./checkbox" (module) {
37
37
  module.exports = require("./checkbox.cjs");
38
38
  },
39
- "@/components/ui/collapsible" (module) {
39
+ "./collapsible" (module) {
40
40
  module.exports = require("./collapsible.cjs");
41
41
  },
42
42
  "./combobox" (module) {
43
43
  module.exports = require("./combobox.cjs");
44
44
  },
45
- "@/components/ui/command" (module) {
45
+ "./command" (module) {
46
46
  module.exports = require("./command.cjs");
47
47
  },
48
- "@/components/ui/context-menu" (module) {
48
+ "./context-menu" (module) {
49
49
  module.exports = require("./context-menu.cjs");
50
50
  },
51
51
  "./data-table" (module) {
@@ -57,13 +57,13 @@ var __webpack_modules__ = {
57
57
  "./datetime-picker" (module) {
58
58
  module.exports = require("./datetime-picker.cjs");
59
59
  },
60
- "@/components/ui/dialog" (module) {
60
+ "./dialog" (module) {
61
61
  module.exports = require("./dialog.cjs");
62
62
  },
63
- "@/components/ui/dropdown-menu" (module) {
63
+ "./dropdown-menu" (module) {
64
64
  module.exports = require("./dropdown-menu.cjs");
65
65
  },
66
- "@/components/ui/editable-cell" (module) {
66
+ "./editable-cell" (module) {
67
67
  module.exports = require("./editable-cell.cjs");
68
68
  },
69
69
  "./empty-state" (module) {
@@ -72,13 +72,13 @@ var __webpack_modules__ = {
72
72
  "./file-upload" (module) {
73
73
  module.exports = require("./file-upload.cjs");
74
74
  },
75
- "@/components/ui/hover-card" (module) {
75
+ "./hover-card" (module) {
76
76
  module.exports = require("./hover-card.cjs");
77
77
  },
78
78
  "./input" (module) {
79
79
  module.exports = require("./input.cjs");
80
80
  },
81
- "@/components/ui/label" (module) {
81
+ "./label" (module) {
82
82
  module.exports = require("./label.cjs");
83
83
  },
84
84
  "./layout" (module) {
@@ -90,7 +90,7 @@ var __webpack_modules__ = {
90
90
  "./pagination" (module) {
91
91
  module.exports = require("./pagination.cjs");
92
92
  },
93
- "@/components/ui/popover" (module) {
93
+ "./popover" (module) {
94
94
  module.exports = require("./popover.cjs");
95
95
  },
96
96
  "./progress" (module) {
@@ -138,7 +138,7 @@ var __webpack_modules__ = {
138
138
  "./switch" (module) {
139
139
  module.exports = require("./switch.cjs");
140
140
  },
141
- "@/components/ui/table" (module) {
141
+ "./table" (module) {
142
142
  module.exports = require("./table.cjs");
143
143
  },
144
144
  "./tabs" (module) {
@@ -150,7 +150,7 @@ var __webpack_modules__ = {
150
150
  "./toggle-group" (module) {
151
151
  module.exports = require("./toggle-group.cjs");
152
152
  },
153
- "@/components/ui/toggle" (module) {
153
+ "./toggle" (module) {
154
154
  module.exports = require("./toggle.cjs");
155
155
  },
156
156
  "./tooltip" (module) {
@@ -241,7 +241,7 @@ var __webpack_exports__ = {};
241
241
  "default"
242
242
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_avatar__rspack_import_4[__rspack_import_key];
243
243
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
244
- var _badge__rspack_import_5 = __webpack_require__("@/components/ui/badge");
244
+ var _badge__rspack_import_5 = __webpack_require__("./badge");
245
245
  var __rspack_reexport = {};
246
246
  for(const __rspack_import_key in _badge__rspack_import_5)if ([
247
247
  "TreeView",
@@ -255,7 +255,7 @@ var __webpack_exports__ = {};
255
255
  "default"
256
256
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_breadcrumb__rspack_import_6[__rspack_import_key];
257
257
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
258
- var _button__rspack_import_7 = __webpack_require__("@/components/ui/button");
258
+ var _button__rspack_import_7 = __webpack_require__("./button");
259
259
  var __rspack_reexport = {};
260
260
  for(const __rspack_import_key in _button__rspack_import_7)if ([
261
261
  "TreeView",
@@ -276,7 +276,7 @@ var __webpack_exports__ = {};
276
276
  "default"
277
277
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
278
278
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
279
- var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
279
+ var _card__rspack_import_10 = __webpack_require__("./card");
280
280
  var __rspack_reexport = {};
281
281
  for(const __rspack_import_key in _card__rspack_import_10)if ([
282
282
  "TreeView",
@@ -290,7 +290,7 @@ var __webpack_exports__ = {};
290
290
  "default"
291
291
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_11[__rspack_import_key];
292
292
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
293
- var _collapsible__rspack_import_12 = __webpack_require__("@/components/ui/collapsible");
293
+ var _collapsible__rspack_import_12 = __webpack_require__("./collapsible");
294
294
  var __rspack_reexport = {};
295
295
  for(const __rspack_import_key in _collapsible__rspack_import_12)if ([
296
296
  "TreeView",
@@ -304,14 +304,14 @@ var __webpack_exports__ = {};
304
304
  "default"
305
305
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_combobox__rspack_import_13[__rspack_import_key];
306
306
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
307
- var _command__rspack_import_14 = __webpack_require__("@/components/ui/command");
307
+ var _command__rspack_import_14 = __webpack_require__("./command");
308
308
  var __rspack_reexport = {};
309
309
  for(const __rspack_import_key in _command__rspack_import_14)if ([
310
310
  "TreeView",
311
311
  "default"
312
312
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
313
313
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
314
- var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
314
+ var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
315
315
  var __rspack_reexport = {};
316
316
  for(const __rspack_import_key in _context_menu__rspack_import_15)if ([
317
317
  "TreeView",
@@ -339,21 +339,21 @@ var __webpack_exports__ = {};
339
339
  "default"
340
340
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
341
341
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
342
- var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
342
+ var _dialog__rspack_import_19 = __webpack_require__("./dialog");
343
343
  var __rspack_reexport = {};
344
344
  for(const __rspack_import_key in _dialog__rspack_import_19)if ([
345
345
  "TreeView",
346
346
  "default"
347
347
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dialog__rspack_import_19[__rspack_import_key];
348
348
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
349
- var _dropdown_menu__rspack_import_20 = __webpack_require__("@/components/ui/dropdown-menu");
349
+ var _dropdown_menu__rspack_import_20 = __webpack_require__("./dropdown-menu");
350
350
  var __rspack_reexport = {};
351
351
  for(const __rspack_import_key in _dropdown_menu__rspack_import_20)if ([
352
352
  "TreeView",
353
353
  "default"
354
354
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
355
355
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
356
- var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
356
+ var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
357
357
  var __rspack_reexport = {};
358
358
  for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
359
359
  "TreeView",
@@ -374,7 +374,7 @@ var __webpack_exports__ = {};
374
374
  "default"
375
375
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_23[__rspack_import_key];
376
376
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
377
- var _hover_card__rspack_import_24 = __webpack_require__("@/components/ui/hover-card");
377
+ var _hover_card__rspack_import_24 = __webpack_require__("./hover-card");
378
378
  var __rspack_reexport = {};
379
379
  for(const __rspack_import_key in _hover_card__rspack_import_24)if ([
380
380
  "TreeView",
@@ -388,7 +388,7 @@ var __webpack_exports__ = {};
388
388
  "default"
389
389
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_25[__rspack_import_key];
390
390
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
391
- var _label__rspack_import_26 = __webpack_require__("@/components/ui/label");
391
+ var _label__rspack_import_26 = __webpack_require__("./label");
392
392
  var __rspack_reexport = {};
393
393
  for(const __rspack_import_key in _label__rspack_import_26)if ([
394
394
  "TreeView",
@@ -416,7 +416,7 @@ var __webpack_exports__ = {};
416
416
  "default"
417
417
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_pagination__rspack_import_29[__rspack_import_key];
418
418
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
419
- var _popover__rspack_import_30 = __webpack_require__("@/components/ui/popover");
419
+ var _popover__rspack_import_30 = __webpack_require__("./popover");
420
420
  var __rspack_reexport = {};
421
421
  for(const __rspack_import_key in _popover__rspack_import_30)if ([
422
422
  "TreeView",
@@ -528,7 +528,7 @@ var __webpack_exports__ = {};
528
528
  "default"
529
529
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_45[__rspack_import_key];
530
530
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
531
- var _table__rspack_import_46 = __webpack_require__("@/components/ui/table");
531
+ var _table__rspack_import_46 = __webpack_require__("./table");
532
532
  var __rspack_reexport = {};
533
533
  for(const __rspack_import_key in _table__rspack_import_46)if ([
534
534
  "TreeView",
@@ -549,7 +549,7 @@ var __webpack_exports__ = {};
549
549
  "default"
550
550
  ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_48[__rspack_import_key];
551
551
  __webpack_require__.d(__webpack_exports__, __rspack_reexport);
552
- var _toggle__rspack_import_49 = __webpack_require__("@/components/ui/toggle");
552
+ var _toggle__rspack_import_49 = __webpack_require__("./toggle");
553
553
  var __rspack_reexport = {};
554
554
  for(const __rspack_import_key in _toggle__rspack_import_49)if ([
555
555
  "TreeView",
package/dist/components/ui/tooltip.cjs CHANGED
@@ -41,7 +41,7 @@ const TooltipPortal = react_tooltip_namespaceObject.Portal;
41
41
  const TooltipContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tooltip_namespaceObject.Content, {
42
42
  ref: ref,
43
43
  sideOffset: sideOffset,
44
- className: (0, index_cjs_namespaceObject.cn)('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]', className),
44
+ className: (0, index_cjs_namespaceObject.cn)('z-50 overflow-hidden rounded-md border border-border-subtle bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]', className),
45
45
  ...props
46
46
  }));
47
47
  TooltipContent.displayName = react_tooltip_namespaceObject.Content.displayName;
package/dist/components/ui/tooltip.js CHANGED
@@ -9,7 +9,7 @@ const TooltipPortal = Portal;
9
9
  const TooltipContent = /*#__PURE__*/ forwardRef(({ className, sideOffset = 4, ...props }, ref)=>/*#__PURE__*/ jsx(Content, {
10
10
  ref: ref,
11
11
  sideOffset: sideOffset,
12
- className: cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]', className),
12
+ className: cn('z-50 overflow-hidden rounded-md border border-border-subtle bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]', className),
13
13
  ...props
14
14
  }));
15
15
  TooltipContent.displayName = Content.displayName;
package/dist/styles.css CHANGED
@@ -7601,7 +7601,7 @@ body.dark-hc, .apollo-design.dark-hc {
7601
7601
  :root {
7602
7602
  --radius: 0.75rem;
7603
7603
  }
7604
- body.dark, .dark {
7604
+ body.dark, .dark:not(.react-flow) {
7605
7605
  --surface: var(--color-background, #182027);
7606
7606
  --surface-raised: var(--color-background-raised, #273139);
7607
7607
  --surface-overlay: var(--color-background-selected, #374652);
@@ -7725,7 +7725,7 @@ body.dark-hc, .dark-hc {
7725
7725
  --input: var(--border-subtle);
7726
7726
  color-scheme: dark;
7727
7727
  }
7728
- body.light, .light {
7728
+ body.light, .light:not(.react-flow) {
7729
7729
  --surface: var(--color-background, #ffffff);
7730
7730
  --surface-raised: var(--color-background-raised, #ffffff);
7731
7731
  --surface-overlay: var(--color-background-secondary, #f4f5f7);
@@ -7911,6 +7911,14 @@ body.future-dark, .future-dark {
7911
7911
  --destructive-foreground: var(--color-zinc-50);
7912
7912
  --border-de-emp: var(--border-subtle);
7913
7913
  --input: var(--ap-wind-border);
7914
+ --color-gradient-general-start: var(--color-gradient-general-start-dark);
7915
+ --color-gradient-general-end: var(--color-gradient-general-end-dark);
7916
+ --color-gradient-agent-start: var(--color-gradient-agent-start-dark);
7917
+ --color-gradient-agent-end: var(--color-gradient-agent-end-dark);
7918
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-dark);
7919
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-dark);
7920
+ --color-gradient-human-start: var(--color-gradient-human-start-dark);
7921
+ --color-gradient-human-end: var(--color-gradient-human-end-dark);
7914
7922
  }
7915
7923
  body.future-light, .future-light {
7916
7924
  --surface: var(--color-zinc-50);
@@ -7974,6 +7982,14 @@ body.future-light, .future-light {
7974
7982
  --destructive-foreground: var(--color-zinc-50);
7975
7983
  --border-de-emp: var(--border-subtle);
7976
7984
  --input: var(--ap-wind-border);
7985
+ --color-gradient-general-start: var(--color-gradient-general-start-light);
7986
+ --color-gradient-general-end: var(--color-gradient-general-end-light);
7987
+ --color-gradient-agent-start: var(--color-gradient-agent-start-light);
7988
+ --color-gradient-agent-end: var(--color-gradient-agent-end-light);
7989
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-light);
7990
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-light);
7991
+ --color-gradient-human-start: var(--color-gradient-human-start-light);
7992
+ --color-gradient-human-end: var(--color-gradient-human-end-light);
7977
7993
  }
7978
7994
  body.wireframe, .wireframe {
7979
7995
  --surface: #ffffff;
@@ -8031,6 +8047,14 @@ body.wireframe, .wireframe {
8031
8047
  --destructive-foreground: #ffffff;
8032
8048
  --border-de-emp: var(--border-subtle);
8033
8049
  --input: var(--ap-wind-border);
8050
+ --color-gradient-general-start: var(--color-gradient-general-start-light);
8051
+ --color-gradient-general-end: var(--color-gradient-general-end-light);
8052
+ --color-gradient-agent-start: var(--color-gradient-agent-start-light);
8053
+ --color-gradient-agent-end: var(--color-gradient-agent-end-light);
8054
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-light);
8055
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-light);
8056
+ --color-gradient-human-start: var(--color-gradient-human-start-light);
8057
+ --color-gradient-human-end: var(--color-gradient-human-end-light);
8034
8058
  }
8035
8059
  body.wireframe *, body.wireframe *::before, body.wireframe *::after, .wireframe *, .wireframe *::before, .wireframe *::after {
8036
8060
  border-style: dashed !important;
@@ -8092,6 +8116,14 @@ body.vertex, .vertex {
8092
8116
  --destructive-foreground: oklch(1 0 89.88);
8093
8117
  --border-de-emp: var(--border-subtle);
8094
8118
  --input: var(--ap-wind-border);
8119
+ --color-gradient-general-start: var(--color-gradient-general-start-dark);
8120
+ --color-gradient-general-end: var(--color-gradient-general-end-dark);
8121
+ --color-gradient-agent-start: var(--color-gradient-agent-start-dark);
8122
+ --color-gradient-agent-end: var(--color-gradient-agent-end-dark);
8123
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-dark);
8124
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-dark);
8125
+ --color-gradient-human-start: var(--color-gradient-human-start-dark);
8126
+ --color-gradient-human-end: var(--color-gradient-human-end-dark);
8095
8127
  }
8096
8128
  body.canvas, .canvas {
8097
8129
  --surface: #182027;
@@ -8149,6 +8181,29 @@ body.canvas, .canvas {
8149
8181
  --destructive-foreground: #ffffff;
8150
8182
  --border-de-emp: var(--border-subtle);
8151
8183
  --input: var(--ap-wind-border);
8184
+ --color-gradient-general-start: var(--color-gradient-general-start-dark);
8185
+ --color-gradient-general-end: var(--color-gradient-general-end-dark);
8186
+ --color-gradient-agent-start: var(--color-gradient-agent-start-dark);
8187
+ --color-gradient-agent-end: var(--color-gradient-agent-end-dark);
8188
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-dark);
8189
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-dark);
8190
+ --color-gradient-human-start: var(--color-gradient-human-start-dark);
8191
+ --color-gradient-human-end: var(--color-gradient-human-end-dark);
8192
+ }
8193
+ .future-light, .future-dark, .wireframe, .vertex, .canvas {
8194
+ --color-foreground: var(--foreground);
8195
+ --color-foreground-emp: var(--foreground-secondary);
8196
+ --color-foreground-de-emp: var(--foreground-muted);
8197
+ --color-background: var(--background);
8198
+ --color-background-secondary: var(--surface-raised);
8199
+ --color-background-hover: var(--surface-hover);
8200
+ --color-border: var(--ap-wind-border);
8201
+ --color-primary: var(--primary);
8202
+ --color-icon-default: var(--foreground-muted);
8203
+ --color-error-icon: var(--destructive);
8204
+ --color-success-icon: var(--success, var(--color-emerald-500));
8205
+ --color-warning-icon: var(--warning, var(--color-amber-500));
8206
+ --color-info-icon: var(--info, var(--color-sky-500));
8152
8207
  }
8153
8208
  @layer base {
8154
8209
  * {
package/dist/tailwind.css CHANGED
@@ -23,7 +23,14 @@
23
23
  * Each theme uses semantic tokens from apollo-core with hardcoded fallbacks
24
24
  */
25
25
 
26
- body.dark, .dark {
26
+ /*
27
+ * Exclude .react-flow from bare .light / .dark selectors.
28
+ * ReactFlow adds a .light or .dark class to its wrapper (via the colorMode
29
+ * prop, which defaults to "light"). Without :not(.react-flow), the wrapper
30
+ * matches these selectors and redefines every semantic token, overriding
31
+ * the body-level theme for all canvas descendants.
32
+ */
33
+ body.dark, .dark:not(.react-flow) {
27
34
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
28
35
  --surface: var(--color-background, #182027);
29
36
  --surface-raised: var(--color-background-raised, #273139);
@@ -185,7 +192,7 @@ body.dark-hc, .dark-hc {
185
192
  color-scheme: dark;
186
193
  }
187
194
 
188
- body.light, .light {
195
+ body.light, .light:not(.react-flow) {
189
196
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
190
197
  --surface: var(--color-background, #ffffff);
191
198
  --surface-raised: var(--color-background-raised, #ffffff);
@@ -467,6 +474,16 @@ body.future-dark, .future-dark {
467
474
  /* text on destructive bg */
468
475
  --border-de-emp: var(--border-subtle);
469
476
  --input: var(--ap-wind-border);
477
+
478
+ /* FIXME: apollo-core should add new themes support for all semantic tokens */
479
+ --color-gradient-general-start: var(--color-gradient-general-start-dark);
480
+ --color-gradient-general-end: var(--color-gradient-general-end-dark);
481
+ --color-gradient-agent-start: var(--color-gradient-agent-start-dark);
482
+ --color-gradient-agent-end: var(--color-gradient-agent-end-dark);
483
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-dark);
484
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-dark);
485
+ --color-gradient-human-start: var(--color-gradient-human-start-dark);
486
+ --color-gradient-human-end: var(--color-gradient-human-end-dark);
470
487
  }
471
488
 
472
489
  /* ============================================================================
@@ -589,6 +606,16 @@ body.future-light, .future-light {
589
606
  /* text on destructive bg */
590
607
  --border-de-emp: var(--border-subtle);
591
608
  --input: var(--ap-wind-border);
609
+
610
+ /* FIXME: apollo-core should add new themes support for all semantic tokens */
611
+ --color-gradient-general-start: var(--color-gradient-general-start-light);
612
+ --color-gradient-general-end: var(--color-gradient-general-end-light);
613
+ --color-gradient-agent-start: var(--color-gradient-agent-start-light);
614
+ --color-gradient-agent-end: var(--color-gradient-agent-end-light);
615
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-light);
616
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-light);
617
+ --color-gradient-human-start: var(--color-gradient-human-start-light);
618
+ --color-gradient-human-end: var(--color-gradient-human-end-light);
592
619
  }
593
620
 
594
621
 
@@ -670,6 +697,16 @@ body.wireframe, .wireframe {
670
697
  --destructive-foreground: #ffffff;
671
698
  --border-de-emp: var(--border-subtle);
672
699
  --input: var(--ap-wind-border);
700
+
701
+ /* FIXME: apollo-core should add new themes support for all semantic tokens */
702
+ --color-gradient-general-start: var(--color-gradient-general-start-light);
703
+ --color-gradient-general-end: var(--color-gradient-general-end-light);
704
+ --color-gradient-agent-start: var(--color-gradient-agent-start-light);
705
+ --color-gradient-agent-end: var(--color-gradient-agent-end-light);
706
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-light);
707
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-light);
708
+ --color-gradient-human-start: var(--color-gradient-human-start-light);
709
+ --color-gradient-human-end: var(--color-gradient-human-end-light);
673
710
  }
674
711
 
675
712
  /* Wireframe overrides: dashed borders everywhere, reduced rounding */
@@ -786,6 +823,16 @@ body.vertex, .vertex {
786
823
  --destructive-foreground: oklch(1 0 89.88);
787
824
  --border-de-emp: var(--border-subtle);
788
825
  --input: var(--ap-wind-border);
826
+
827
+ /* FIXME: apollo-core should add new themes support for all semantic tokens */
828
+ --color-gradient-general-start: var(--color-gradient-general-start-dark);
829
+ --color-gradient-general-end: var(--color-gradient-general-end-dark);
830
+ --color-gradient-agent-start: var(--color-gradient-agent-start-dark);
831
+ --color-gradient-agent-end: var(--color-gradient-agent-end-dark);
832
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-dark);
833
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-dark);
834
+ --color-gradient-human-start: var(--color-gradient-human-start-dark);
835
+ --color-gradient-human-end: var(--color-gradient-human-end-dark);
789
836
  }
790
837
 
791
838
  /* ============================================================================
@@ -891,6 +938,44 @@ body.canvas, .canvas {
891
938
  --destructive-foreground: #ffffff;
892
939
  --border-de-emp: var(--border-subtle);
893
940
  --input: var(--ap-wind-border);
941
+
942
+ /* FIXME: apollo-core should add new themes support for all semantic tokens */
943
+ --color-gradient-general-start: var(--color-gradient-general-start-dark);
944
+ --color-gradient-general-end: var(--color-gradient-general-end-dark);
945
+ --color-gradient-agent-start: var(--color-gradient-agent-start-dark);
946
+ --color-gradient-agent-end: var(--color-gradient-agent-end-dark);
947
+ --color-gradient-invoked-start: var(--color-gradient-invoked-start-dark);
948
+ --color-gradient-invoked-end: var(--color-gradient-invoked-end-dark);
949
+ --color-gradient-human-start: var(--color-gradient-human-start-dark);
950
+ --color-gradient-human-end: var(--color-gradient-human-end-dark);
951
+ }
952
+
953
+ /**
954
+ * FIXME: apollo-core should add new themes support for all semantic tokens.
955
+ *
956
+ * Element themes don't have body.dark / body.light selectors, so the semantic
957
+ * --color-* tokens from theme-variables.css don't apply. Bridge the gap by
958
+ * mapping them to Wind semantic tokens here.
959
+ */
960
+
961
+ .future-light,
962
+ .future-dark,
963
+ .wireframe,
964
+ .vertex,
965
+ .canvas {
966
+ --color-foreground: var(--foreground);
967
+ --color-foreground-emp: var(--foreground-secondary);
968
+ --color-foreground-de-emp: var(--foreground-muted);
969
+ --color-background: var(--background);
970
+ --color-background-secondary: var(--surface-raised);
971
+ --color-background-hover: var(--surface-hover);
972
+ --color-border: var(--ap-wind-border);
973
+ --color-primary: var(--primary);
974
+ --color-icon-default: var(--foreground-muted);
975
+ --color-error-icon: var(--destructive);
976
+ --color-success-icon: var(--success, var(--color-emerald-500));
977
+ --color-warning-icon: var(--warning, var(--color-amber-500));
978
+ --color-info-icon: var(--info, var(--color-sky-500));
894
979
  }
895
980
 
896
981
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-wind",
3
- "version": "2.0.1",
3
+ "version": "2.1.1",
4
4
  "description": "UiPath wind design system - A Tailwind CSS based React component library",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -174,7 +174,7 @@
174
174
  "bugs": {
175
175
  "url": "https://github.com/uipath/apollo-ui/issues"
176
176
  },
177
- "homepage": "https://apollo-wind.vercel.app",
177
+ "homepage": "https://apollo-design.vercel.app",
178
178
  "scripts": {
179
179
  "dev": "rslib build --watch",
180
180
  "build": "rslib build && npm run build:css",