@uipath/apollo-wind 0.10.0 → 0.11.0-pr295.af4e744

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 (187) hide show
  1. package/dist/components/custom/canvas-studio.cjs +133 -0
  2. package/dist/components/custom/canvas-studio.d.ts +99 -0
  3. package/dist/components/custom/canvas-studio.js +93 -0
  4. package/dist/components/custom/canvas.cjs +44 -0
  5. package/dist/components/custom/canvas.d.ts +14 -0
  6. package/dist/components/custom/canvas.js +10 -0
  7. package/dist/components/custom/chat-composer.cjs +105 -0
  8. package/dist/components/custom/chat-composer.d.ts +15 -0
  9. package/dist/components/custom/chat-composer.js +71 -0
  10. package/dist/components/custom/chat-first-experience.cjs +87 -0
  11. package/dist/components/custom/chat-first-experience.d.ts +24 -0
  12. package/dist/components/custom/chat-first-experience.js +53 -0
  13. package/dist/components/custom/chat-prompt-suggestions.cjs +49 -0
  14. package/dist/components/custom/chat-prompt-suggestions.d.ts +18 -0
  15. package/dist/components/custom/chat-prompt-suggestions.js +15 -0
  16. package/dist/components/custom/chat-steps-view.cjs +308 -0
  17. package/dist/components/custom/chat-steps-view.d.ts +38 -0
  18. package/dist/components/custom/chat-steps-view.js +274 -0
  19. package/dist/components/custom/flow-node.cjs +76 -0
  20. package/dist/components/custom/flow-node.d.ts +20 -0
  21. package/dist/components/custom/flow-node.js +42 -0
  22. package/dist/components/custom/flow-properties-bar.cjs +103 -0
  23. package/dist/components/custom/flow-properties-bar.d.ts +21 -0
  24. package/dist/components/custom/flow-properties-bar.js +69 -0
  25. package/dist/components/custom/flow-properties-expanded.cjs +328 -0
  26. package/dist/components/custom/flow-properties-expanded.d.ts +21 -0
  27. package/dist/components/custom/flow-properties-expanded.js +294 -0
  28. package/dist/components/custom/flow-properties-simple.cjs +364 -0
  29. package/dist/components/custom/flow-properties-simple.d.ts +62 -0
  30. package/dist/components/custom/flow-properties-simple.js +330 -0
  31. package/dist/components/custom/flow-properties.cjs +56 -0
  32. package/dist/components/custom/flow-properties.d.ts +28 -0
  33. package/dist/components/custom/flow-properties.js +22 -0
  34. package/dist/components/custom/global-header.cjs +422 -0
  35. package/dist/components/custom/global-header.d.ts +38 -0
  36. package/dist/components/custom/global-header.js +388 -0
  37. package/dist/components/custom/grid-maestro.cjs +62 -0
  38. package/dist/components/custom/grid-maestro.d.ts +19 -0
  39. package/dist/components/custom/grid-maestro.js +22 -0
  40. package/dist/components/custom/page-header.cjs +92 -0
  41. package/dist/components/custom/page-header.d.ts +43 -0
  42. package/dist/components/custom/page-header.js +58 -0
  43. package/dist/components/custom/panel-delegate.cjs +285 -0
  44. package/dist/components/custom/panel-delegate.d.ts +34 -0
  45. package/dist/components/custom/panel-delegate.js +251 -0
  46. package/dist/components/custom/panel-flow.cjs +262 -0
  47. package/dist/components/custom/panel-flow.d.ts +38 -0
  48. package/dist/components/custom/panel-flow.js +225 -0
  49. package/dist/components/custom/panel-maestro.cjs +74 -0
  50. package/dist/components/custom/panel-maestro.d.ts +30 -0
  51. package/dist/components/custom/panel-maestro.js +40 -0
  52. package/dist/components/custom/panel-studio.cjs +122 -0
  53. package/dist/components/custom/panel-studio.d.ts +48 -0
  54. package/dist/components/custom/panel-studio.js +85 -0
  55. package/dist/components/custom/toolbar-canvas.cjs +124 -0
  56. package/dist/components/custom/toolbar-canvas.d.ts +15 -0
  57. package/dist/components/custom/toolbar-canvas.js +90 -0
  58. package/dist/components/custom/toolbar-view.cjs +121 -0
  59. package/dist/components/custom/toolbar-view.d.ts +14 -0
  60. package/dist/components/custom/toolbar-view.js +87 -0
  61. package/dist/components/custom/viewport-guard.cjs +92 -0
  62. package/dist/components/custom/viewport-guard.d.ts +23 -0
  63. package/dist/components/custom/viewport-guard.js +55 -0
  64. package/dist/components/forms/field-renderer.cjs +3 -1
  65. package/dist/components/forms/field-renderer.js +3 -1
  66. package/dist/components/forms/form-designer.cjs +13 -2
  67. package/dist/components/forms/form-designer.js +13 -2
  68. package/dist/components/forms/rules-engine.d.ts +1 -1
  69. package/dist/components/ui/breadcrumb.cjs +1 -2
  70. package/dist/components/ui/breadcrumb.js +1 -2
  71. package/dist/components/ui/button-group.cjs +5 -3
  72. package/dist/components/ui/button-group.d.ts +2 -2
  73. package/dist/components/ui/button-group.js +5 -3
  74. package/dist/components/ui/button.cjs +3 -3
  75. package/dist/components/ui/button.js +3 -3
  76. package/dist/components/ui/chart.cjs +223 -0
  77. package/dist/components/ui/chart.d.ts +40 -0
  78. package/dist/components/ui/chart.js +174 -0
  79. package/dist/components/ui/code-block.cjs +258 -0
  80. package/dist/components/ui/code-block.d.ts +48 -0
  81. package/dist/components/ui/code-block.js +207 -0
  82. package/dist/components/ui/data-table.cjs +22 -4
  83. package/dist/components/ui/data-table.d.ts +5 -2
  84. package/dist/components/ui/data-table.js +23 -5
  85. package/dist/components/ui/editable-cell.cjs +3 -10
  86. package/dist/components/ui/editable-cell.js +3 -10
  87. package/dist/components/ui/empty-state.cjs +17 -6
  88. package/dist/components/ui/empty-state.d.ts +7 -0
  89. package/dist/components/ui/empty-state.js +17 -6
  90. package/dist/components/ui/file-upload.cjs +8 -0
  91. package/dist/components/ui/file-upload.js +8 -0
  92. package/dist/components/ui/index.cjs +289 -149
  93. package/dist/components/ui/index.d.ts +2 -3
  94. package/dist/components/ui/index.js +2 -3
  95. package/dist/components/ui/multi-select.cjs +3 -10
  96. package/dist/components/ui/multi-select.js +3 -10
  97. package/dist/components/ui/pagination.cjs +0 -1
  98. package/dist/components/ui/pagination.js +0 -1
  99. package/dist/components/ui/resizable.d.ts +1 -1
  100. package/dist/components/ui/tree-view.cjs +1117 -0
  101. package/dist/components/ui/tree-view.d.ts +95 -0
  102. package/dist/components/ui/tree-view.js +1083 -0
  103. package/dist/foundation/Future/colors.cjs +92 -0
  104. package/dist/foundation/Future/colors.d.ts +132 -0
  105. package/dist/foundation/Future/colors.js +43 -0
  106. package/dist/foundation/Future/radius.cjs +46 -0
  107. package/dist/foundation/Future/radius.d.ts +33 -0
  108. package/dist/foundation/Future/radius.js +12 -0
  109. package/dist/foundation/Future/responsive.cjs +49 -0
  110. package/dist/foundation/Future/responsive.d.ts +40 -0
  111. package/dist/foundation/Future/responsive.js +12 -0
  112. package/dist/foundation/Future/shadows.cjs +48 -0
  113. package/dist/foundation/Future/shadows.d.ts +29 -0
  114. package/dist/foundation/Future/shadows.js +11 -0
  115. package/dist/foundation/Future/spacing.cjs +71 -0
  116. package/dist/foundation/Future/spacing.d.ts +80 -0
  117. package/dist/foundation/Future/spacing.js +31 -0
  118. package/dist/foundation/Future/strokes.cjs +59 -0
  119. package/dist/foundation/Future/strokes.d.ts +49 -0
  120. package/dist/foundation/Future/strokes.js +19 -0
  121. package/dist/foundation/Future/types.cjs +18 -0
  122. package/dist/foundation/Future/types.d.ts +25 -0
  123. package/dist/foundation/Future/types.js +0 -0
  124. package/dist/foundation/Future/typography.cjs +79 -0
  125. package/dist/foundation/Future/typography.d.ts +86 -0
  126. package/dist/foundation/Future/typography.js +33 -0
  127. package/dist/index.cjs +131 -221
  128. package/dist/index.d.ts +4 -3
  129. package/dist/index.js +3 -4
  130. package/dist/src/foundation/Future/themes.css +279 -0
  131. package/dist/styles.css +1941 -605
  132. package/dist/tailwind.css +874 -87
  133. package/dist/templates/Admin/settings-admin.d.ts +5 -0
  134. package/dist/templates/Admin/template-admin.d.ts +86 -0
  135. package/dist/templates/Delegate/template-delegate.d.ts +26 -0
  136. package/dist/templates/EmptyErrors/error-components.d.ts +3 -0
  137. package/dist/templates/Experiments/ideas-AnimatedGradientText.d.ts +23 -0
  138. package/dist/templates/Flow/template-flow.d.ts +57 -0
  139. package/dist/templates/Maestro/template-maestro.d.ts +52 -0
  140. package/dist/templates/Studio/template-studio.d.ts +102 -0
  141. package/dist/templates/{vscode-example.d.ts → VisualStudio/shell.d.ts} +1 -1
  142. package/package.json +12 -1
  143. package/dist/components/ui/menubar.cjs +0 -210
  144. package/dist/components/ui/menubar.d.ts +0 -28
  145. package/dist/components/ui/menubar.js +0 -131
  146. package/dist/components/ui/navigation-menu.cjs +0 -122
  147. package/dist/components/ui/navigation-menu.d.ts +0 -12
  148. package/dist/components/ui/navigation-menu.js +0 -64
  149. package/dist/examples/admin-layout-example.cjs +0 -490
  150. package/dist/examples/admin-layout-example.d.ts +0 -92
  151. package/dist/examples/admin-layout-example.js +0 -411
  152. package/dist/examples/app-shell-example.cjs +0 -452
  153. package/dist/examples/app-shell-example.d.ts +0 -52
  154. package/dist/examples/app-shell-example.js +0 -418
  155. package/dist/examples/dashboard-example.cjs +0 -590
  156. package/dist/examples/dashboard-example.d.ts +0 -11
  157. package/dist/examples/dashboard-example.js +0 -556
  158. package/dist/examples/data-management-example.cjs +0 -584
  159. package/dist/examples/data-management-example.d.ts +0 -1
  160. package/dist/examples/data-management-example.js +0 -550
  161. package/dist/examples/flow-editor-layout-example.cjs +0 -309
  162. package/dist/examples/flow-editor-layout-example.d.ts +0 -22
  163. package/dist/examples/flow-editor-layout-example.js +0 -269
  164. package/dist/examples/flow-start-example.cjs +0 -467
  165. package/dist/examples/flow-start-example.d.ts +0 -30
  166. package/dist/examples/flow-start-example.js +0 -433
  167. package/dist/examples/form-builder-example.cjs +0 -674
  168. package/dist/examples/form-builder-example.js +0 -640
  169. package/dist/examples/new-project-example.cjs +0 -550
  170. package/dist/examples/new-project-example.d.ts +0 -30
  171. package/dist/examples/new-project-example.js +0 -516
  172. package/dist/examples/settings-example.cjs +0 -864
  173. package/dist/examples/settings-example.d.ts +0 -1
  174. package/dist/examples/settings-example.js +0 -830
  175. package/dist/examples/vscode-example.cjs +0 -340
  176. package/dist/examples/vscode-example.d.ts +0 -80
  177. package/dist/examples/vscode-example.js +0 -270
  178. package/dist/templates/admin-layout-example.d.ts +0 -92
  179. package/dist/templates/app-shell-example.d.ts +0 -52
  180. package/dist/templates/dashboard-example.d.ts +0 -11
  181. package/dist/templates/data-management-example.d.ts +0 -1
  182. package/dist/templates/flow-editor-layout-example.d.ts +0 -22
  183. package/dist/templates/flow-start-example.d.ts +0 -30
  184. package/dist/templates/form-builder-example.d.ts +0 -1
  185. package/dist/templates/new-project-example.d.ts +0 -30
  186. package/dist/templates/settings-example.d.ts +0 -1
  187. /package/dist/{examples → templates/Forms}/form-builder-example.d.ts +0 -0
package/dist/tailwind.css CHANGED
@@ -13,101 +13,867 @@
13
13
  @import "tailwindcss";
14
14
  @import "@uipath/apollo-core/tokens/css/theme-variables.css";
15
15
 
16
+ :root {
17
+ --radius: 0.75rem;
18
+ /* 12px — base border-radius for buttons and UI elements */
19
+ }
20
+
16
21
  /**
17
- * shadcn/ui color mappings
18
- * Maps Apollo Design System tokens to shadcn expected variable names.
19
- * These are defined per-theme so they respond to theme switching.
20
- * Supports theme class on either <html> or <body> for flash-free loading.
21
- */
22
- body.light,
23
- body.dark,
24
- body.light-hc,
22
+ * Individual theme definitions with fallback HEX values
23
+ * Each theme uses semantic tokens from apollo-core with hardcoded fallbacks
24
+ */
25
+
26
+ body.dark {
27
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
28
+ --surface: var(--color-background, #182027);
29
+ --surface-raised: var(--color-background-raised, #273139);
30
+ --surface-overlay: var(--color-background-selected, #374652);
31
+ --surface-hover: var(--color-background-gray, #526069);
32
+ --surface-muted: var(--color-background-gray-emp, #8a97a0);
33
+ --surface-inverse: var(--color-background-inverse, #f8f9fa);
34
+ --surface-disabled: var(--color-background-disabled, #273139);
35
+ --surface-selected: var(--color-background-selected, #374652);
36
+
37
+ /* ── Brand / Primary ─────────────────────────────────────────────────── */
38
+ --brand: var(--color-primary, #66adff);
39
+ --brand-hover: var(--color-primary-hover, #87bfff);
40
+ --brand-lighter: var(--color-primary-lighter, #00489d);
41
+ --brand-darker: var(--color-foreground-link-pressed, #badaff);
42
+
43
+ /* ── Foreground (text / icons) ────────────────────────────────────────── */
44
+ --foreground: var(--color-foreground, #f4f5f7);
45
+ --foreground-emp: var(--color-foreground-emp, #f8f9fa);
46
+ --foreground-muted: var(--color-foreground-de-emp, #cfd8dd);
47
+ --foreground-subtle: var(--color-foreground-disable, #a4b1b8);
48
+ --foreground-inverse: var(--color-foreground-inverse, #182027);
49
+ --foreground-link: var(--color-foreground-link, #66adff);
50
+ --foreground-on-accent: var(--color-foreground-inverse, #182027);
51
+
52
+ /* ── Borders ──────────────────────────────────────────────────────────── */
53
+ --border: var(--color-border, #8a97a0);
54
+ --border-subtle: var(--color-border-de-emp, #526069);
55
+ --border-disabled: var(--color-border-disabled, #526069);
56
+ --border-grid: var(--color-border-grid, #273139);
57
+
58
+ /* ── Status ──────────────────────────────────────────────────────────── */
59
+ --error: var(--color-error-text, #ff8484);
60
+ --success: var(--color-success-icon, #74c94b);
61
+ --warning: var(--color-warning-icon, #ffbb27);
62
+ --info: var(--color-info-foreground, #42a1ff);
63
+
64
+ /* ── Ring / Focus ────────────────────────────────────────────────────── */
65
+ --ring: var(--color-primary, #66adff);
66
+ --logo: var(--color-logo, #ffffff);
67
+
68
+ /* ── Bridge — defines shared token names using core values, so
69
+ components built with bg-surface, text-foreground-secondary, etc.
70
+ resolve correctly under core themes ────────────────────────────── */
71
+ --brand-subtle: var(--brand-lighter);
72
+ --foreground-secondary: var(--foreground-emp);
73
+ --foreground-hover: var(--foreground-muted);
74
+ --foreground-accent: var(--brand);
75
+ --foreground-accent-muted: var(--brand-hover);
76
+ --border-muted: var(--border-grid);
77
+ --border-deep: var(--border-grid);
78
+ --border-inverse: var(--border);
79
+ --border-hover: var(--border);
80
+
81
+ /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
82
+ --background: var(--surface);
83
+ --card: var(--surface-raised);
84
+ --card-foreground: var(--foreground);
85
+ --popover: var(--surface-raised);
86
+ --popover-foreground: var(--foreground);
87
+ --primary: var(--brand);
88
+ --primary-foreground: var(--foreground-on-accent);
89
+ --secondary: var(--surface-overlay);
90
+ --secondary-foreground: var(--foreground-muted);
91
+ --muted: var(--surface-raised);
92
+ --muted-foreground: var(--foreground-muted);
93
+ --accent: var(--surface-selected);
94
+ --accent-foreground: var(--foreground-emp);
95
+ --destructive: var(--error);
96
+ --destructive-foreground: var(--foreground-on-accent);
97
+ --border-de-emp: var(--border-subtle);
98
+ --input: var(--border-subtle);
99
+
100
+ color-scheme: dark;
101
+ }
102
+
25
103
  body.dark-hc {
26
- /* Card colors - map to raised surface */
27
- --color-card: var(--color-background-raised);
28
- --color-card-foreground: var(--color-foreground);
104
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
105
+ --surface: var(--color-background, #182027);
106
+ --surface-raised: var(--color-background-raised, #273139);
107
+ --surface-overlay: var(--color-background-selected, #374652);
108
+ --surface-hover: var(--color-background-gray, #374652);
109
+ --surface-muted: var(--color-background-gray-emp, #a4b1b8);
110
+ --surface-inverse: var(--color-background-inverse, #f8f9fa);
111
+ --surface-disabled: var(--color-background-disabled, #273139);
112
+ --surface-selected: var(--color-background-selected, #374652);
113
+
114
+ /* ── Brand / Primary ─────────────────────────────────────────────────── */
115
+ --brand: var(--color-primary, #badaff);
116
+ --brand-hover: var(--color-primary-hover, #87bfff);
117
+ --brand-lighter: var(--color-primary-lighter, #00336f);
118
+ --brand-darker: var(--color-foreground-link-pressed, #badaff);
119
+
120
+ /* ── Foreground (text / icons) ────────────────────────────────────────── */
121
+ --foreground: var(--color-foreground, #f4f5f7);
122
+ --foreground-emp: var(--color-foreground-emp, #f8f9fa);
123
+ --foreground-muted: var(--color-foreground-de-emp, #cfd8dd);
124
+ --foreground-subtle: var(--color-foreground-disable, #a4b1b8);
125
+ --foreground-inverse: var(--color-foreground-inverse, #182027);
126
+ --foreground-link: var(--color-foreground-link, #87bfff);
127
+ --foreground-on-accent: var(--color-foreground-inverse, #182027);
128
+
129
+ /* ── Borders ──────────────────────────────────────────────────────────── */
130
+ --border: var(--color-border, #bbc7cd);
131
+ --border-subtle: var(--color-border-de-emp, #a4b1b8);
132
+ --border-disabled: var(--color-border-disabled, #8a97a0);
133
+ --border-grid: var(--color-border-grid, #273139);
134
+
135
+ /* ── Status ──────────────────────────────────────────────────────────── */
136
+ --error: var(--color-error-text, #ffadad);
137
+ --success: var(--color-success-icon, #74c94b);
138
+ --warning: var(--color-warning-icon, #ffbb27);
139
+ --info: var(--color-info-foreground, #42a1ff);
140
+
141
+ /* ── Ring / Focus ────────────────────────────────────────────────────── */
142
+ --ring: var(--color-primary, #badaff);
143
+ --logo: var(--color-logo, #ffffff);
144
+
145
+ /* ── Bridge — defines shared token names using core values, so
146
+ components built with bg-surface, text-foreground-secondary, etc.
147
+ resolve correctly under core themes ────────────────────────────── */
148
+ --brand-subtle: var(--brand-lighter);
149
+ --foreground-secondary: var(--foreground-emp);
150
+ --foreground-hover: var(--foreground-muted);
151
+ --foreground-accent: var(--brand);
152
+ --foreground-accent-muted: var(--brand-hover);
153
+ --border-muted: var(--border-grid);
154
+ --border-deep: var(--border-grid);
155
+ --border-inverse: var(--border);
156
+ --border-hover: var(--border);
157
+
158
+ /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
159
+ --background: var(--surface);
160
+ --card: var(--surface-raised);
161
+ --card-foreground: var(--foreground);
162
+ --popover: var(--surface-raised);
163
+ --popover-foreground: var(--foreground);
164
+ --primary: var(--brand);
165
+ --primary-foreground: var(--foreground-on-accent);
166
+ --secondary: var(--surface-overlay);
167
+ --secondary-foreground: var(--foreground-muted);
168
+ --muted: var(--surface-raised);
169
+ --muted-foreground: var(--foreground-muted);
170
+ --accent: var(--surface-selected);
171
+ --accent-foreground: var(--foreground-emp);
172
+ --destructive: var(--error);
173
+ --destructive-foreground: var(--foreground-on-accent);
174
+ --border-de-emp: var(--border-subtle);
175
+ --input: var(--border-subtle);
176
+
177
+ color-scheme: dark;
178
+ }
179
+
180
+ body.light {
181
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
182
+ --surface: var(--color-background, #ffffff);
183
+ --surface-raised: var(--color-background-raised, #ffffff);
184
+ --surface-overlay: var(--color-background-secondary, #f4f5f7);
185
+ --surface-hover: var(--color-background-selected, #e9f1fa);
186
+ --surface-muted: var(--color-background-gray, #cfd8dd);
187
+ --surface-inverse: var(--color-background-inverse, #182027);
188
+ --surface-disabled: var(--color-background-disabled, #ecedee);
189
+ --surface-selected: var(--color-background-selected, #e9f1fa);
190
+
191
+ /* ── Brand / Primary ─────────────────────────────────────────────────── */
192
+ --brand: var(--color-primary, #0067df);
193
+ --brand-hover: var(--color-primary-hover, #0056ba);
194
+ --brand-lighter: var(--color-primary-lighter, #badaff);
195
+ --brand-darker: var(--color-foreground-link-pressed, #00489d);
196
+
197
+ /* ── Foreground (text / icons) ────────────────────────────────────────── */
198
+ --foreground: var(--color-foreground, #273139);
199
+ --foreground-emp: var(--color-foreground-emp, #182027);
200
+ --foreground-muted: var(--color-foreground-de-emp, #526069);
201
+ --foreground-subtle: var(--color-foreground-disable, #8a97a0);
202
+ --foreground-inverse: var(--color-foreground-inverse, #f8f9fa);
203
+ --foreground-link: var(--color-foreground-link, #0067df);
204
+ --foreground-on-accent: var(--color-foreground-inverse, #f8f9fa);
205
+
206
+ /* ── Borders ──────────────────────────────────────────────────────────── */
207
+ --border: var(--color-border, #a4b1b8);
208
+ --border-subtle: var(--color-border-de-emp, #cfd8dd);
209
+ --border-disabled: var(--color-border-disabled, #cfd8dd);
210
+ --border-grid: var(--color-border-grid, #f4f5f7);
211
+
212
+ /* ── Status ──────────────────────────────────────────────────────────── */
213
+ --error: var(--color-error-text, #a6040a);
214
+ --success: var(--color-success-icon, #038108);
215
+ --warning: var(--color-warning-text, #9e6100);
216
+ --info: var(--color-info-foreground, #1665b3);
217
+
218
+ /* ── Ring / Focus ────────────────────────────────────────────────────── */
219
+ --ring: var(--color-primary, #0067df);
220
+ --logo: var(--color-logo, #fa4616);
221
+
222
+ /* ── Bridge — defines shared token names using core values, so
223
+ components built with bg-surface, text-foreground-secondary, etc.
224
+ resolve correctly under core themes ────────────────────────────── */
225
+ --brand-subtle: var(--brand-lighter);
226
+ --foreground-secondary: var(--foreground-emp);
227
+ --foreground-hover: var(--foreground-muted);
228
+ --foreground-accent: var(--brand);
229
+ --foreground-accent-muted: var(--brand-hover);
230
+ --border-muted: var(--border-grid);
231
+ --border-deep: var(--border-grid);
232
+ --border-inverse: var(--border);
233
+ --border-hover: var(--border);
234
+
235
+ /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
236
+ --background: var(--surface);
237
+ --card: var(--surface-raised);
238
+ --card-foreground: var(--foreground);
239
+ --popover: var(--surface-raised);
240
+ --popover-foreground: var(--foreground);
241
+ --primary: var(--brand);
242
+ --primary-foreground: var(--foreground-on-accent);
243
+ --secondary: var(--surface-overlay);
244
+ --secondary-foreground: var(--foreground-muted);
245
+ --muted: var(--surface-raised);
246
+ --muted-foreground: var(--foreground-muted);
247
+ --accent: var(--surface-selected);
248
+ --accent-foreground: var(--foreground-emp);
249
+ --destructive: var(--error);
250
+ --destructive-foreground: var(--foreground-on-accent);
251
+ --border-de-emp: var(--border-subtle);
252
+ --input: var(--border-subtle);
253
+
254
+ color-scheme: light;
255
+ }
256
+
257
+ body.light-hc {
258
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
259
+ --surface: var(--color-background, #ffffff);
260
+ --surface-raised: var(--color-background-raised, #ffffff);
261
+ --surface-overlay: var(--color-background-secondary, #f4f5f7);
262
+ --surface-hover: var(--color-background-selected, #e9f1fa);
263
+ --surface-muted: var(--color-background-gray, #cfd8dd);
264
+ --surface-inverse: var(--color-background-inverse, #182027);
265
+ --surface-disabled: var(--color-background-disabled, #ecedee);
266
+ --surface-selected: var(--color-background-selected, #e9f1fa);
267
+
268
+ /* ── Brand / Primary ─────────────────────────────────────────────────── */
269
+ --brand: var(--color-primary, #00489d);
270
+ --brand-hover: var(--color-primary-hover, #00336f);
271
+ --brand-lighter: var(--color-primary-lighter, #badaff);
272
+ --brand-darker: var(--color-foreground-link-pressed, #00336f);
273
+
274
+ /* ── Foreground (text / icons) ────────────────────────────────────────── */
275
+ --foreground: var(--color-foreground, #273139);
276
+ --foreground-emp: var(--color-foreground-emp, #182027);
277
+ --foreground-muted: var(--color-foreground-de-emp, #374652);
278
+ --foreground-subtle: var(--color-foreground-disable, #8a97a0);
279
+ --foreground-inverse: var(--color-foreground-inverse, #f8f9fa);
280
+ --foreground-link: var(--color-foreground-link, #00489d);
281
+ --foreground-on-accent: var(--color-foreground-inverse, #f8f9fa);
282
+
283
+ /* ── Borders ──────────────────────────────────────────────────────────── */
284
+ --border: var(--color-border, #6b7882);
285
+ --border-subtle: var(--color-border-de-emp, #a4b1b8);
286
+ --border-disabled: var(--color-border-disabled, #cfd8dd);
287
+ --border-grid: var(--color-border-grid, #f4f5f7);
288
+
289
+ /* ── Status ──────────────────────────────────────────────────────────── */
290
+ --error: var(--color-error-text, #a6040a);
291
+ --success: var(--color-success-icon, #005603);
292
+ --warning: var(--color-warning-text, #273139);
293
+ --info: var(--color-info-foreground, #11508d);
294
+
295
+ /* ── Ring / Focus ────────────────────────────────────────────────────── */
296
+ --ring: var(--color-primary, #00489d);
297
+ --logo: var(--color-logo, #fa4616);
298
+
299
+ /* ── Bridge — defines shared token names using core values, so
300
+ components built with bg-surface, text-foreground-secondary, etc.
301
+ resolve correctly under core themes ────────────────────────────── */
302
+ --brand-subtle: var(--brand-lighter);
303
+ --foreground-secondary: var(--foreground-emp);
304
+ --foreground-hover: var(--foreground-muted);
305
+ --foreground-accent: var(--brand);
306
+ --foreground-accent-muted: var(--brand-hover);
307
+ --border-muted: var(--border-grid);
308
+ --border-deep: var(--border-grid);
309
+ --border-inverse: var(--border);
310
+ --border-hover: var(--border);
311
+
312
+ /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
313
+ --background: var(--surface);
314
+ --card: var(--surface-raised);
315
+ --card-foreground: var(--foreground);
316
+ --popover: var(--surface-raised);
317
+ --popover-foreground: var(--foreground);
318
+ --primary: var(--brand);
319
+ --primary-foreground: var(--foreground-on-accent);
320
+ --secondary: var(--surface-overlay);
321
+ --secondary-foreground: var(--foreground-muted);
322
+ --muted: var(--surface-raised);
323
+ --muted-foreground: var(--foreground-muted);
324
+ --accent: var(--surface-selected);
325
+ --accent-foreground: var(--foreground-emp);
326
+ --destructive: var(--error);
327
+ --destructive-foreground: var(--foreground-on-accent);
328
+ --border-de-emp: var(--border-subtle);
329
+ --input: var(--border-subtle);
330
+
331
+ color-scheme: light;
332
+ }
333
+
334
+ /* ============================================================================
335
+ * FUTURE — Dark theme (default for Future templates)
336
+ * ============================================================================ */
337
+
338
+ .future-dark {
339
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
340
+ --surface: #09090b;
341
+ /* zinc-950 — page / canvas */
342
+ --surface-raised: #18181b;
343
+ /* zinc-900 — cards, overlays, panels */
344
+ --surface-overlay: #27272a;
345
+ /* zinc-800 — panels, inputs, tabs */
346
+ --surface-hover: #3f3f46;
347
+ /* zinc-700 — hover, selected nav */
348
+ --surface-muted: #71717a;
349
+ /* zinc-500 — badges, indicators */
350
+ --surface-inverse: #fafafa;
351
+ /* zinc-50 — buttons on dark bg */
352
+
353
+ /* ── Brand ──────────────────────────────────────────────────────────── */
354
+ --brand: #0891b2;
355
+ /* cyan-600 — logo, submit, run */
356
+ --brand-subtle: #083344;
357
+ /* cyan-950 — status badge, active nav */
358
+
359
+ /* ── Foreground (text / icons) ────────────────────────────────────────── */
360
+ --foreground: #fafafa;
361
+ /* zinc-50 — primary headings */
362
+ --foreground-secondary: #f4f4f5;
363
+ /* zinc-100 — body, messages */
364
+ --foreground-hover: #d4d4d8;
365
+ /* zinc-300 — hover states */
366
+ --foreground-muted: #a1a1aa;
367
+ /* zinc-400 — nav, secondary UI */
368
+ --foreground-subtle: #71717a;
369
+ /* zinc-500 — labels, muted */
370
+ --foreground-inverse: #09090b;
371
+ /* zinc-950 — icons on light bg */
372
+ --foreground-on-accent: #fafafa;
373
+ /* zinc-50 — text on accent bg */
374
+ --foreground-accent: #0891b2;
375
+ /* cyan-600 — accent text */
376
+ --foreground-accent-muted: #22d3ee;
377
+ /* cyan-400 — muted accent text */
378
+
379
+ /* ── Borders ──────────────────────────────────────────────────────────── */
380
+ --border: #3f3f46;
381
+ /* zinc-700 — primary borders */
382
+ --border-subtle: #27272a;
383
+ /* zinc-800 — subtle dividers */
384
+ --border-muted: #18181b;
385
+ /* zinc-900 — content borders */
386
+ --border-deep: #09090b;
387
+ /* zinc-950 — nested containers */
388
+ --border-inverse: #e4e4e7;
389
+ /* zinc-200 — borders on inverse bg */
390
+ --border-hover: #52525b;
391
+ /* zinc-600 — border hover state */
392
+
393
+ /* ── Ring ──────────────────────────────────────────────────────────────── */
394
+ --ring: #52525b;
395
+ /* zinc-600 — selection ring */
396
+
397
+ /* ── Gradients ───────────────────────────────────────────────────────── */
398
+ --gradient-1: linear-gradient(127deg, #3f3f47 25.94%, #27272a 74.06%);
399
+ /* zinc-700 → zinc-800 */
400
+ --gradient-2: linear-gradient(128deg, #09090b 1.26%, #18181b 52.69%);
401
+ /* zinc-950 → zinc-900 */
402
+ --gradient-3: linear-gradient(128deg, #3f3f47 1.26%, #18181b 52.69%);
403
+ /* zinc-700 → zinc-900 */
404
+ --gradient-4: linear-gradient(180deg, #18181b 0%, #27272a 100%);
405
+ /* zinc-900 → zinc-800 */
406
+ --gradient-5: linear-gradient(180deg, #09090b 0%, #18181b 100%);
407
+ /* zinc-950 → zinc-900 */
408
+ --gradient-6: linear-gradient(106deg, #0092b8 28.08%, #053345 71.92%);
409
+ /* cyan-600 → cyan-950 */
410
+
411
+ /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
412
+ --background: var(--surface);
413
+ --card: var(--surface-raised);
414
+ --card-foreground: var(--foreground);
415
+ --popover: var(--surface-raised);
416
+ --popover-foreground: var(--foreground);
417
+ --primary: var(--brand);
418
+ --primary-foreground: var(--foreground-on-accent);
419
+ --secondary: var(--surface-overlay);
420
+ --secondary-foreground: var(--foreground);
421
+ --muted: var(--surface-overlay);
422
+ --muted-foreground: var(--foreground-muted);
423
+ --accent: var(--surface-hover);
424
+ --accent-foreground: var(--foreground);
425
+ --destructive: #ef4444;
426
+ --destructive-foreground: #fafafa;
427
+ /* zinc-50 — text on destructive bg */
428
+ --border-de-emp: var(--border-subtle);
429
+ --input: var(--border);
430
+ }
29
431
 
30
- /* Popover colors - map to raised surface */
31
- --color-popover: var(--color-background-raised);
32
- --color-popover-foreground: var(--color-foreground);
432
+ /* ============================================================================
433
+ * FUTURE — Light theme
434
+ * ============================================================================ */
33
435
 
34
- /* Primary foreground - for text on primary backgrounds */
35
- --color-primary-foreground: var(--color-foreground-inverse);
436
+ .future-light {
437
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
438
+ --surface: #fafafa;
439
+ /* zinc-50 — page / canvas */
440
+ --surface-raised: #f4f4f5;
441
+ /* zinc-100 — cards, overlays, panels */
442
+ --surface-overlay: #e4e4e7;
443
+ /* zinc-200 — panels, inputs, tabs */
444
+ --surface-hover: #d4d4d8;
445
+ /* zinc-300 — hover, selected nav */
446
+ --surface-muted: #a1a1aa;
447
+ /* zinc-400 — badges, indicators */
448
+ --surface-inverse: #09090b;
449
+ /* zinc-950 — buttons on light bg */
36
450
 
37
- /* Secondary - map to secondary background */
38
- --color-secondary: var(--color-background-secondary);
39
- --color-secondary-foreground: var(--color-foreground-de-emp);
451
+ /* ── Brand ──────────────────────────────────────────────────────────── */
452
+ --brand: #0891b2;
453
+ /* cyan-600 — logo, submit, run */
454
+ --brand-subtle: #ecfeff;
455
+ /* cyan-50 — status badge, active nav */
40
456
 
41
- /* Muted - map to gray background and de-emphasized foreground */
42
- --color-muted: var(--color-background-secondary);
43
- --color-muted-foreground: var(--color-foreground-de-emp);
457
+ /* ── Foreground (text / icons) ────────────────────────────────────────── */
458
+ --foreground: #09090b;
459
+ /* zinc-950 — primary headings */
460
+ --foreground-secondary: #18181b;
461
+ /* zinc-900 — body, messages */
462
+ --foreground-hover: #52525b;
463
+ /* zinc-600 — hover states */
464
+ --foreground-muted: #71717a;
465
+ /* zinc-500 — nav, secondary UI */
466
+ --foreground-subtle: #a1a1aa;
467
+ /* zinc-400 — labels, muted */
468
+ --foreground-inverse: #fafafa;
469
+ /* zinc-50 — icons on dark bg */
470
+ --foreground-on-accent: #fafafa;
471
+ /* zinc-50 — text on accent bg */
472
+ --foreground-accent: #0891b2;
473
+ /* cyan-600 — accent text */
474
+ --foreground-accent-muted: #0891b2;
475
+ /* cyan-600 — muted accent text */
44
476
 
45
- /* Accent - map to selected background */
46
- --color-accent: var(--color-background-selected);
47
- --color-accent-foreground: var(--color-foreground-emp);
477
+ /* ── Borders ──────────────────────────────────────────────────────────── */
478
+ --border: #d4d4d8;
479
+ /* zinc-300 — primary borders */
480
+ --border-subtle: #e4e4e7;
481
+ /* zinc-200 — subtle dividers */
482
+ --border-muted: #f4f4f5;
483
+ /* zinc-100 — content borders */
484
+ --border-deep: #fafafa;
485
+ /* zinc-50 — nested containers */
486
+ --border-inverse: #3f3f46;
487
+ /* zinc-700 — borders on inverse bg */
488
+ --border-hover: #a1a1aa;
489
+ /* zinc-400 — border hover state */
48
490
 
49
- /* Destructive - map to error colors */
50
- --color-destructive: var(--color-error-text);
51
- --color-destructive-foreground: var(--color-error-foreground-inverse);
491
+ /* ── Ring ──────────────────────────────────────────────────────────────── */
492
+ --ring: #a1a1aa;
493
+ /* zinc-400 — selection ring */
52
494
 
53
- /* Input - map to border for input borders */
54
- --color-input: var(--color-border-de-emp);
495
+ /* ── Gradients ───────────────────────────────────────────────────────── */
496
+ --gradient-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%);
497
+ /* zinc-200 → zinc-100 */
498
+ --gradient-2: linear-gradient(128deg, #fafafa 1.26%, #fafafa 52.69%);
499
+ /* zinc-50 → zinc-50 */
500
+ --gradient-3: linear-gradient(128deg, #e4e4e7 1.26%, #fafafa 52.69%);
501
+ /* zinc-200 → zinc-50 */
502
+ --gradient-4: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
503
+ /* zinc-50 → zinc-100 */
504
+ --gradient-5: linear-gradient(180deg, #fafafa 0%, #fafafa 100%);
505
+ /* zinc-50 → zinc-50 */
506
+ --gradient-6: linear-gradient(106deg, #22d3ee 28.08%, #cffafe 71.92%);
507
+ /* cyan-400 → cyan-100 */
55
508
 
56
- /* Ring - map to focus indicator */
57
- --color-ring: var(--color-focus-indicator);
509
+ /* ── shadcn aliases ──────────────────────────────────────────────────── */
510
+ --background: var(--surface);
511
+ --card: var(--surface-raised);
512
+ --card-foreground: var(--foreground);
513
+ --popover: var(--surface-raised);
514
+ --popover-foreground: var(--foreground);
515
+ --primary: var(--brand);
516
+ --primary-foreground: var(--foreground-on-accent);
517
+ --secondary: var(--surface-overlay);
518
+ --secondary-foreground: var(--foreground);
519
+ --muted: var(--surface-overlay);
520
+ --muted-foreground: var(--foreground-muted);
521
+ --accent: var(--surface-hover);
522
+ --accent-foreground: var(--foreground);
523
+ --destructive: #ef4444;
524
+ --destructive-foreground: #fafafa;
525
+ /* zinc-50 — text on destructive bg */
526
+ --border-de-emp: var(--border-subtle);
527
+ --input: var(--border);
528
+ }
529
+
530
+
531
+ /* ============================================================================
532
+ * DEMO — Wireframe theme (low-fidelity prototyping)
533
+ *
534
+ * Intentionally flat, no accent color, dashed borders. Designed to look like
535
+ * a quick sketch or blueprint so stakeholders focus on layout, not polish.
536
+ * ============================================================================ */
537
+
538
+ .wireframe {
539
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
540
+ --surface: #ffffff;
541
+ --surface-raised: #f9fafb;
542
+ --surface-overlay: #f3f4f6;
543
+ --surface-hover: #e5e7eb;
544
+ --surface-muted: #d1d5db;
545
+ --surface-inverse: #374151;
546
+
547
+ /* ── Brand (deliberately muted — no brand color) ─────────────────────── */
548
+ --brand: #6b7280;
549
+ --brand-subtle: #f3f4f6;
550
+
551
+ /* ── Foreground ─────────────────────────────────────────────────────── */
552
+ --foreground: #1f2937;
553
+ --foreground-secondary: #374151;
554
+ --foreground-hover: #4b5563;
555
+ --foreground-muted: #6b7280;
556
+ --foreground-subtle: #9ca3af;
557
+ --foreground-inverse: #ffffff;
558
+ --foreground-on-accent: #ffffff;
559
+ --foreground-accent: #4b5563;
560
+ --foreground-accent-muted: #6b7280;
561
+
562
+ /* ── Borders (dashed via utility, but color defined here) ───────────── */
563
+ --border: #d1d5db;
564
+ --border-subtle: #e5e7eb;
565
+ --border-muted: #f3f4f6;
566
+ --border-deep: #f9fafb;
567
+ --border-inverse: #4b5563;
568
+ --border-hover: #9ca3af;
569
+
570
+ /* ── Ring ────────────────────────────────────────────────────────────── */
571
+ --ring: #9ca3af;
572
+
573
+ /* ── Gradients (flat — no gradients in wireframe mode) ──────────────── */
574
+ --gradient-1: none;
575
+ --gradient-2: none;
576
+ --gradient-3: none;
577
+ --gradient-4: none;
578
+ --gradient-5: none;
579
+ --gradient-6: none;
580
+
581
+ /* ── shadcn aliases ──────────────────────────────────────────────────── */
582
+ --background: var(--surface);
583
+ --card: var(--surface-raised);
584
+ --card-foreground: var(--foreground);
585
+ --popover: var(--surface-raised);
586
+ --popover-foreground: var(--foreground);
587
+ --primary: var(--brand);
588
+ --primary-foreground: var(--foreground-on-accent);
589
+ --secondary: var(--surface-overlay);
590
+ --secondary-foreground: var(--foreground);
591
+ --muted: var(--surface-overlay);
592
+ --muted-foreground: var(--foreground-muted);
593
+ --accent: var(--surface-hover);
594
+ --accent-foreground: var(--foreground);
595
+ --destructive: #9ca3af;
596
+ --destructive-foreground: #ffffff;
597
+ --border-de-emp: var(--border-subtle);
598
+ --input: var(--border);
599
+ }
600
+
601
+ /* Wireframe overrides: dashed borders everywhere, reduced rounding */
602
+ .wireframe *,
603
+ .wireframe *::before,
604
+ .wireframe *::after {
605
+ border-style: dashed !important;
606
+ box-shadow: none !important;
607
+ }
608
+
609
+ /* ============================================================================
610
+ * DEMO — Vertex theme (Apollo Vertex dark palette)
611
+ *
612
+ * Translates the Vertex design language (oklch-based, teal/blue accent)
613
+ * into token slots so templates render with the Vertex look & feel.
614
+ * Source: apps/apollo-vertex/app/themes.ts (default.config.dark)
615
+ * ============================================================================ */
616
+
617
+ .vertex {
618
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
619
+ --surface: oklch(0.21 0.03 258.5);
620
+ /* deep blue-grey — page / canvas */
621
+ --surface-raised: oklch(0.233 0.036 254.7);
622
+ /* slightly lighter — cards, panels */
623
+ --surface-overlay: oklch(0.2648 0.0329 254.38);
624
+ /* muted — inputs, tabs */
625
+ --surface-hover: oklch(0.3927 0.0289 240.86);
626
+ /* secondary — hover, selected nav */
627
+ --surface-muted: oklch(0.72 0.03 254.38);
628
+ /* muted-foreground — badges, indicators */
629
+ --surface-inverse: oklch(0.985 0 0);
630
+ /* foreground — buttons on dark bg */
631
+
632
+ /* ── Brand ──────────────────────────────────────────────────────────── */
633
+ --brand: oklch(0.692 0.1119 207.06);
634
+ /* primary — teal */
635
+ --brand-subtle: oklch(0.166 0.0283 203.34);
636
+ /* primary-foreground — deep teal bg */
637
+
638
+ /* ── Foreground (text / icons) ────────────────────────────────────────── */
639
+ --foreground: oklch(0.985 0 0);
640
+ /* foreground — primary text */
641
+ --foreground-secondary: oklch(0.9525 0.011 225.98);
642
+ /* card-foreground — body text */
643
+ --foreground-hover: oklch(0.9416 0.0145 244.72);
644
+ /* secondary-foreground — hover states */
645
+ --foreground-muted: oklch(0.72 0.03 254.38);
646
+ /* muted-foreground — nav, secondary UI */
647
+ --foreground-subtle: oklch(0.4594 0.028 264.25);
648
+ /* muted-foreground (light ref) — labels */
649
+ --foreground-inverse: oklch(0.21 0.03 258.5);
650
+ /* background — icons on light bg */
651
+ --foreground-on-accent: oklch(0.166 0.0283 203.34);
652
+ /* primary-foreground — text on accent */
653
+ --foreground-accent: oklch(0.692 0.1119 207.06);
654
+ /* primary — accent text */
655
+ --foreground-accent-muted: oklch(0.573 0.114 211.4);
656
+ /* accent — muted accent text */
657
+
658
+ /* ── Borders ──────────────────────────────────────────────────────────── */
659
+ --border: oklch(0.3068 0.0426 258.29);
660
+ /* border */
661
+ --border-subtle: oklch(0.2648 0.0329 254.38);
662
+ /* muted — subtle dividers */
663
+ --border-muted: oklch(0.233 0.036 254.7);
664
+ /* card — content borders */
665
+ --border-deep: oklch(0.21 0.03 258.5);
666
+ /* background — nested containers */
667
+ --border-inverse: oklch(0.9229 0.0065 252.13);
668
+ /* light border ref */
669
+ --border-hover: oklch(0.3927 0.0289 240.86);
670
+ /* secondary — border hover */
671
+
672
+ /* ── Ring ────────────────────────────────────────────────────────────── */
673
+ --ring: oklch(0.692 0.1119 207.06);
674
+ /* ring — teal focus ring */
675
+
676
+ /* ── Gradients (subtle depth) ──────────────────────────────────────── */
677
+ --gradient-1: linear-gradient(127deg, oklch(0.3927 0.0289 240.86) 25.94%, oklch(0.2648 0.0329 254.38) 74.06%);
678
+ --gradient-2: linear-gradient(128deg, oklch(0.21 0.03 258.5) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
679
+ --gradient-3: linear-gradient(128deg, oklch(0.3927 0.0289 240.86) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
680
+ --gradient-4: linear-gradient(180deg, oklch(0.233 0.036 254.7) 0%, oklch(0.2648 0.0329 254.38) 100%);
681
+ --gradient-5: linear-gradient(180deg, oklch(0.21 0.03 258.5) 0%, oklch(0.233 0.036 254.7) 100%);
682
+ --gradient-6: linear-gradient(106deg, oklch(0.692 0.1119 207.06) 28.08%, oklch(0.166 0.0283 203.34) 71.92%);
683
+
684
+ /* ── shadcn aliases ──────────────────────────────────────────────────── */
685
+ --background: var(--surface);
686
+ --card: var(--surface-raised);
687
+ --card-foreground: var(--foreground);
688
+ --popover: var(--surface-raised);
689
+ --popover-foreground: var(--foreground);
690
+ --primary: var(--brand);
691
+ --primary-foreground: var(--foreground-on-accent);
692
+ --secondary: var(--surface-overlay);
693
+ --secondary-foreground: var(--foreground);
694
+ --muted: var(--surface-overlay);
695
+ --muted-foreground: var(--foreground-muted);
696
+ --accent: var(--surface-hover);
697
+ --accent-foreground: var(--foreground);
698
+ --destructive: oklch(0.6542 0.2321 28.66);
699
+ --destructive-foreground: oklch(1 0 89.88);
700
+ --border-de-emp: var(--border-subtle);
701
+ --input: var(--border);
702
+ }
703
+
704
+ /* ============================================================================
705
+ * DEMO — Canvas theme (Apollo React / MUI dark palette)
706
+ *
707
+ * Maps the classic apollo-react dark theme (apollo-core darkPalette) into
708
+ * token slots. Dark blue-grey base with UiPath orange accent.
709
+ * Source: packages/apollo-core/src/tokens/jss/palette.ts (darkPalette)
710
+ * ============================================================================ */
58
711
 
59
- /* Chart colors - map numbered names to apollo-core chart colors */
60
- --color-chart-1: var(--color-chart-blue-secondary);
61
- --color-chart-2: var(--color-chart-pink);
62
- --color-chart-3: var(--color-chart-purple);
63
- --color-chart-4: var(--color-chart-green);
64
- --color-chart-5: var(--color-chart-yellow);
712
+ .canvas {
713
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
714
+ --surface: #182027;
715
+ /* ColorBackgroundDark — page / canvas */
716
+ --surface-raised: #273139;
717
+ /* ColorBackgroundSecondaryDark — cards, panels */
718
+ --surface-overlay: #334049;
719
+ /* mid-tone — inputs, tabs */
720
+ --surface-hover: #3e4e58;
721
+ /* hover, selected nav */
722
+ --surface-muted: #8a97a0;
723
+ /* ColorBorderDark — badges, indicators */
724
+ --surface-inverse: #f8f9fa;
725
+ /* ColorBackgroundInverseDark — buttons on dark bg */
65
726
 
66
- /* Sidebar colors */
67
- --color-sidebar: var(--color-background-secondary);
68
- --color-sidebar-foreground: var(--color-foreground);
69
- --color-sidebar-primary: var(--color-primary);
70
- --color-sidebar-primary-foreground: var(--color-foreground-inverse);
71
- --color-sidebar-accent: var(--color-background-selected);
72
- --color-sidebar-accent-foreground: var(--color-foreground-emp);
73
- --color-sidebar-border: var(--color-border-de-emp);
74
- --color-sidebar-ring: var(--color-focus-indicator);
727
+ /* ── Brand (UiPath orange) ───────────────────────────────────────────── */
728
+ --brand: #fa4616;
729
+ /* ColorOrange500 — primary brand */
730
+ --brand-subtle: #3c2a1e;
731
+ /* dark warm tone — active nav bg */
732
+
733
+ /* ── Foreground (text / icons) ────────────────────────────────────────── */
734
+ --foreground: #f8f9fa;
735
+ /* ColorForegroundEmpDark — primary text */
736
+ --foreground-secondary: #f4f5f7;
737
+ /* ColorForegroundDark — body text */
738
+ --foreground-hover: #cfd8dd;
739
+ /* ColorForegroundDeEmpDark — hover states */
740
+ --foreground-muted: #a4b1b8;
741
+ /* ColorForegroundDisableDark — nav, secondary UI */
742
+ --foreground-subtle: #8a97a0;
743
+ /* ColorBorderDark — labels, muted */
744
+ --foreground-inverse: #182027;
745
+ /* ColorForegroundInverseDark — icons on light bg */
746
+ --foreground-on-accent: #ffffff;
747
+ /* white — text on accent bg */
748
+ --foreground-accent: #fa4616;
749
+ /* ColorOrange500 — accent text */
750
+ --foreground-accent-muted: #ff8f70;
751
+ /* ColorSelectionDark — muted accent text */
752
+
753
+ /* ── Borders ──────────────────────────────────────────────────────────── */
754
+ --border: #526069;
755
+ /* ColorBorderDeEmpDark */
756
+ --border-subtle: #3e4e58;
757
+ /* mid border */
758
+ --border-muted: #273139;
759
+ /* ColorBackgroundSecondaryDark — content borders */
760
+ --border-deep: #182027;
761
+ /* ColorBackgroundDark — nested containers */
762
+ --border-inverse: #cfd8dd;
763
+ /* ColorForegroundDeEmpDark — borders on inverse bg */
764
+ --border-hover: #8a97a0;
765
+ /* ColorBorderDark — border hover */
766
+
767
+ /* ── Ring ────────────────────────────────────────────────────────────── */
768
+ --ring: #fa4616;
769
+ /* orange focus ring */
770
+
771
+ /* ── Gradients ────────────────────────────────────────────────────────── */
772
+ --gradient-1: linear-gradient(127deg, #3e4e58 25.94%, #334049 74.06%);
773
+ --gradient-2: linear-gradient(128deg, #182027 1.26%, #273139 52.69%);
774
+ --gradient-3: linear-gradient(128deg, #3e4e58 1.26%, #273139 52.69%);
775
+ --gradient-4: linear-gradient(180deg, #273139 0%, #334049 100%);
776
+ --gradient-5: linear-gradient(180deg, #182027 0%, #273139 100%);
777
+ --gradient-6: linear-gradient(106deg, #fa4616 28.08%, #3c2a1e 71.92%);
778
+
779
+ /* ── shadcn aliases ──────────────────────────────────────────────────── */
780
+ --background: var(--surface);
781
+ --card: var(--surface-raised);
782
+ --card-foreground: var(--foreground);
783
+ --popover: var(--surface-raised);
784
+ --popover-foreground: var(--foreground);
785
+ --primary: var(--brand);
786
+ --primary-foreground: var(--foreground-on-accent);
787
+ --secondary: var(--surface-overlay);
788
+ --secondary-foreground: var(--foreground);
789
+ --muted: var(--surface-overlay);
790
+ --muted-foreground: var(--foreground-muted);
791
+ --accent: var(--surface-hover);
792
+ --accent-foreground: var(--foreground);
793
+ --destructive: #ef4444;
794
+ --destructive-foreground: #ffffff;
795
+ --border-de-emp: var(--border-subtle);
796
+ --input: var(--border);
75
797
  }
76
798
 
799
+ /**
800
+ * @theme inline - Tailwind utility generation
801
+ *
802
+ * Combines tokens from themes.css with Apollo-core tokens.
803
+ * Only tokens defined here will generate Tailwind utilities.
804
+ */
805
+
77
806
  @theme inline {
807
+ /* ── Design system tokens ──────────────────────────────────────────── */
78
808
 
79
- /* shadcn inline tokens to generate utilities */
80
- --color-card: var(--color-card);
81
- --color-card-foreground: var(--color-card-foreground);
82
- --color-popover: var(--color-popover);
83
- --color-popover-foreground: var(--color-popover-foreground);
84
- --color-primary-foreground: var(--color-primary-foreground);
85
- --color-secondary: var(--color-secondary);
86
- --color-secondary-foreground: var(--color-secondary-foreground);
87
- --color-muted: var(--color-muted);
88
- --color-muted-foreground: var(--color-muted-foreground);
89
- --color-accent: var(--color-accent);
90
- --color-accent-foreground: var(--color-accent-foreground);
91
- --color-destructive: var(--color-destructive);
92
- --color-destructive-foreground: var(--color-destructive-foreground);
93
- --color-input: var(--color-input);
94
- --color-ring: var(--color-ring);
95
- --color-chart-1: var(--color-chart-1);
96
- --color-chart-2: var(--color-chart-2);
97
- --color-chart-3: var(--color-chart-3);
98
- --color-chart-4: var(--color-chart-4);
99
- --color-chart-5: var(--color-chart-5);
100
- --color-sidebar: var(--color-sidebar);
101
- --color-sidebar-foreground: var(--color-sidebar-foreground);
102
- --color-sidebar-primary: var(--color-sidebar-primary);
103
- --color-sidebar-primary-foreground: var(--color-sidebar-primary-foreground);
104
- --color-sidebar-accent: var(--color-sidebar-accent);
105
- --color-sidebar-accent-foreground: var(--color-sidebar-accent-foreground);
106
- --color-sidebar-border: var(--color-sidebar-border);
107
- --color-sidebar-ring: var(--color-sidebar-ring);
809
+ /* Surfaces */
810
+ --color-surface: var(--surface);
811
+ --color-surface-raised: var(--surface-raised);
812
+ --color-surface-overlay: var(--surface-overlay);
813
+ --color-surface-hover: var(--surface-hover);
814
+ --color-surface-muted: var(--surface-muted);
815
+ --color-surface-inverse: var(--surface-inverse);
816
+
817
+ /* Brand */
818
+ --color-brand: var(--brand);
819
+ --color-brand-subtle: var(--brand-subtle);
820
+
821
+ /* Foreground */
822
+ --color-foreground-secondary: var(--foreground-secondary);
823
+ --color-foreground-hover: var(--foreground-hover);
824
+ --color-foreground-muted: var(--foreground-muted);
825
+ --color-foreground-subtle: var(--foreground-subtle);
826
+ --color-foreground-inverse: var(--foreground-inverse);
827
+ --color-foreground-on-accent: var(--foreground-on-accent);
828
+ --color-foreground-accent: var(--foreground-accent);
829
+ --color-foreground-accent-muted: var(--foreground-accent-muted);
830
+
831
+ /* Borders */
832
+ --color-border-subtle: var(--border-subtle);
833
+ --color-border-muted: var(--border-muted);
834
+ --color-border-deep: var(--border-deep);
835
+ --color-border-inverse: var(--border-inverse);
836
+ --color-border-hover: var(--border-hover);
837
+
838
+ /* ── shadcn standard tokens ────────────────────────────────────────── */
839
+ --color-background: var(--background);
840
+ --color-foreground: var(--foreground);
841
+ --color-card: var(--card);
842
+ --color-card-foreground: var(--card-foreground);
843
+ --color-popover: var(--popover);
844
+ --color-popover-foreground: var(--popover-foreground);
845
+ --color-primary: var(--primary);
846
+ --color-primary-foreground: var(--primary-foreground);
847
+ --color-secondary: var(--secondary);
848
+ --color-secondary-foreground: var(--secondary-foreground);
849
+ --color-muted: var(--muted);
850
+ --color-muted-foreground: var(--muted-foreground);
851
+ --color-accent: var(--accent);
852
+ --color-accent-foreground: var(--accent-foreground);
853
+ --color-destructive: var(--destructive);
854
+ --color-destructive-foreground: var(--destructive-foreground);
855
+ --color-border: var(--border);
856
+ --color-border-de-emp: var(--border-de-emp);
857
+ --color-input: var(--input);
858
+ --color-ring: var(--ring);
859
+
860
+ /* ── Core-specific tokens ─────────────────────────────────────────── */
861
+ --color-surface-disabled: var(--surface-disabled);
862
+ --color-surface-selected: var(--surface-selected);
863
+ --color-brand-hover: var(--brand-hover);
864
+ --color-brand-lighter: var(--brand-lighter);
865
+ --color-brand-darker: var(--brand-darker);
866
+ --color-foreground-emp: var(--foreground-emp);
867
+ --color-foreground-link: var(--foreground-link);
868
+ --color-border-disabled: var(--border-disabled);
869
+ --color-border-grid: var(--border-grid);
870
+ --color-error: var(--error);
871
+ --color-success: var(--success);
872
+ --color-warning: var(--warning);
873
+ --color-info: var(--info);
874
+ --color-logo: var(--logo);
108
875
 
109
876
  /* Apollo inline tokens to generate utilities */
110
- --color-background: var(--color-background);
111
877
  --color-background-secondary: var(--color-background-secondary);
112
878
  --color-background-inverse: var(--color-background-inverse);
113
879
  --color-background-gray: var(--color-background-gray);
@@ -124,25 +890,15 @@ body.dark-hc {
124
890
  --color-notification-indicator: var(--color-notification-indicator);
125
891
  --color-hover: var(--color-hover);
126
892
  --color-curtain: var(--color-curtain);
127
- --color-border: var(--color-border);
128
- --color-border-disabled: var(--color-border-disabled);
129
- --color-border-grid: var(--color-border-grid);
130
- --color-border-de-emp: var(--color-border-de-emp);
131
893
  --color-selection: var(--color-selection);
132
- --color-logo: var(--color-logo);
133
- --color-foreground: var(--color-foreground);
134
894
  --color-foreground-light: var(--color-foreground-light);
135
- --color-foreground-emp: var(--color-foreground-emp);
136
895
  --color-foreground-de-emp: var(--color-foreground-de-emp);
137
896
  --color-foreground-disable: var(--color-foreground-disable);
138
- --color-foreground-inverse: var(--color-foreground-inverse);
139
897
  --color-foreground-highlight: var(--color-foreground-highlight);
140
898
  --color-foreground-highlight-selected: var(--color-foreground-highlight-selected);
141
899
  --color-foreground-highlight-selected-hover: var(--color-foreground-highlight-selected-hover);
142
- --color-foreground-link: var(--color-foreground-link);
143
900
  --color-foreground-link-pressed: var(--color-foreground-link-pressed);
144
901
  --color-foreground-inv-de-emp: var(--color-foreground-inv-de-emp);
145
- --color-primary: var(--color-primary);
146
902
  --color-primary-lighter: var(--color-primary-lighter);
147
903
  --color-primary-darker: var(--color-primary-darker);
148
904
  --color-primary-hover: var(--color-primary-hover);
@@ -236,4 +992,35 @@ body.dark-hc {
236
992
  body {
237
993
  @apply bg-background text-foreground;
238
994
  }
995
+ }
996
+
997
+ /* ============================================================================
998
+ * Gradient utilities
999
+ *
1000
+ * Gradients can't be registered via @theme (they aren't single color values),
1001
+ * so we define them as @utility rules. Usage: bg-gradient-1, etc.
1002
+ * ============================================================================ */
1003
+
1004
+ @utility bg-gradient-1 {
1005
+ background-image: var(--gradient-1);
1006
+ }
1007
+
1008
+ @utility bg-gradient-2 {
1009
+ background-image: var(--gradient-2);
1010
+ }
1011
+
1012
+ @utility bg-gradient-3 {
1013
+ background-image: var(--gradient-3);
1014
+ }
1015
+
1016
+ @utility bg-gradient-4 {
1017
+ background-image: var(--gradient-4);
1018
+ }
1019
+
1020
+ @utility bg-gradient-5 {
1021
+ background-image: var(--gradient-5);
1022
+ }
1023
+
1024
+ @utility bg-gradient-6 {
1025
+ background-image: var(--gradient-6);
239
1026
  }