@olympusoss/canvas 2.20.1 → 3.1.0

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 (214) hide show
  1. package/README.md +69 -35
  2. package/package.json +45 -177
  3. package/src/cn.ts +3 -0
  4. package/src/index.ts +12 -603
  5. package/src/theme.ts +62 -0
  6. package/src/tokens.ts +11 -0
  7. package/styles/base.css +17 -0
  8. package/styles/canvas.css +77 -52
  9. package/styles/components/alert.css +66 -0
  10. package/styles/components/app-shell.css +46 -0
  11. package/styles/components/avatar.css +22 -0
  12. package/styles/components/badge.css +83 -0
  13. package/styles/components/breadcrumb.css +35 -0
  14. package/styles/components/button-group.css +23 -0
  15. package/styles/components/button.css +107 -0
  16. package/styles/components/calendar.css +73 -0
  17. package/styles/components/card.css +58 -0
  18. package/styles/components/checkbox.css +55 -0
  19. package/styles/components/code-block.css +18 -0
  20. package/styles/components/combobox.css +75 -0
  21. package/styles/components/command.css +94 -0
  22. package/styles/components/data-table.css +142 -0
  23. package/styles/components/dialog.css +72 -0
  24. package/styles/components/dropdown.css +54 -0
  25. package/styles/components/empty-state.css +17 -0
  26. package/styles/components/field.css +27 -0
  27. package/styles/components/filter-panel.css +58 -0
  28. package/styles/components/form.css +27 -0
  29. package/styles/components/icon.css +8 -0
  30. package/styles/components/input-group.css +45 -0
  31. package/styles/components/input.css +56 -0
  32. package/styles/components/kbd.css +15 -0
  33. package/styles/components/page-header.css +52 -0
  34. package/styles/components/pagination.css +48 -0
  35. package/styles/components/popover.css +14 -0
  36. package/styles/components/radio.css +28 -0
  37. package/styles/components/row-menu.css +69 -0
  38. package/styles/components/section-card.css +49 -0
  39. package/styles/components/select.css +57 -0
  40. package/styles/components/separator.css +32 -0
  41. package/styles/components/sheet.css +70 -0
  42. package/styles/components/sidebar.css +146 -0
  43. package/styles/components/skeleton.css +32 -0
  44. package/styles/components/spinner.css +26 -0
  45. package/styles/components/stat-card.css +71 -0
  46. package/styles/components/stepper.css +63 -0
  47. package/styles/components/switch.css +45 -0
  48. package/styles/components/tabs.css +40 -0
  49. package/styles/components/textarea.css +31 -0
  50. package/styles/components/toast.css +95 -0
  51. package/styles/components/tooltip.css +53 -0
  52. package/styles/components/topbar.css +24 -0
  53. package/styles/components/typography.css +105 -0
  54. package/styles/patterns/backdrops.css +35 -0
  55. package/styles/patterns/density.css +66 -0
  56. package/styles/patterns/focus.css +22 -0
  57. package/styles/patterns/glass.css +85 -0
  58. package/styles/patterns/high-contrast.css +70 -0
  59. package/styles/patterns/reduced-motion.css +12 -0
  60. package/styles/patterns/scrollbar.css +10 -0
  61. package/styles/reset.css +89 -0
  62. package/styles/tokens/colors.css +106 -0
  63. package/styles/tokens/motion.css +33 -0
  64. package/styles/tokens/radius.css +10 -0
  65. package/styles/tokens/shadows.css +35 -0
  66. package/styles/tokens/spacing.css +19 -0
  67. package/styles/tokens/typography.css +6 -0
  68. package/styles/tokens/z-index.css +12 -0
  69. package/styles/utilities/display.css +66 -0
  70. package/styles/utilities/flexbox.css +240 -0
  71. package/styles/utilities/gap.css +288 -0
  72. package/styles/utilities/grid.css +138 -0
  73. package/styles/utilities/position.css +78 -0
  74. package/styles/utilities/sizing.css +138 -0
  75. package/tsconfig.json +20 -21
  76. package/src/components/atoms/README.md +0 -11
  77. package/src/components/atoms/aspect-ratio.tsx +0 -32
  78. package/src/components/atoms/avatar.tsx +0 -98
  79. package/src/components/atoms/badge.tsx +0 -44
  80. package/src/components/atoms/brand-mark.tsx +0 -74
  81. package/src/components/atoms/button.tsx +0 -105
  82. package/src/components/atoms/checkbox.tsx +0 -63
  83. package/src/components/atoms/flex-box.tsx +0 -105
  84. package/src/components/atoms/icon.tsx +0 -34
  85. package/src/components/atoms/input.tsx +0 -92
  86. package/src/components/atoms/label.tsx +0 -41
  87. package/src/components/atoms/logo.tsx +0 -89
  88. package/src/components/atoms/progress.tsx +0 -55
  89. package/src/components/atoms/radio-group.tsx +0 -122
  90. package/src/components/atoms/scroll-area.tsx +0 -106
  91. package/src/components/atoms/section.tsx +0 -48
  92. package/src/components/atoms/separator.tsx +0 -45
  93. package/src/components/atoms/skeleton.tsx +0 -17
  94. package/src/components/atoms/slider.tsx +0 -93
  95. package/src/components/atoms/spinner.tsx +0 -47
  96. package/src/components/atoms/switch.tsx +0 -60
  97. package/src/components/atoms/textarea.tsx +0 -78
  98. package/src/components/atoms/toggle.tsx +0 -80
  99. package/src/components/charts/activity-heatmap.tsx +0 -186
  100. package/src/components/charts/axes.tsx +0 -21
  101. package/src/components/charts/chart-container.tsx +0 -254
  102. package/src/components/charts/chart-legend.tsx +0 -67
  103. package/src/components/charts/chart-tooltip.tsx +0 -161
  104. package/src/components/charts/chart-types.tsx +0 -49
  105. package/src/components/charts/containers.tsx +0 -11
  106. package/src/components/charts/data.tsx +0 -16
  107. package/src/components/charts/details.tsx +0 -25
  108. package/src/components/charts/dot-pulse.tsx +0 -61
  109. package/src/components/charts/gauge.tsx +0 -106
  110. package/src/components/charts/grids.tsx +0 -8
  111. package/src/components/charts/index.ts +0 -62
  112. package/src/components/charts/labeled-bar-list.tsx +0 -85
  113. package/src/components/charts/metric-breakdown.tsx +0 -316
  114. package/src/components/charts/references.tsx +0 -8
  115. package/src/components/charts/service-health-list.tsx +0 -85
  116. package/src/components/charts/sparkline-area.tsx +0 -80
  117. package/src/components/charts/sparkline.tsx +0 -52
  118. package/src/components/charts/stacked-bar.tsx +0 -104
  119. package/src/components/charts/text.tsx +0 -10
  120. package/src/components/charts/world-heat-map-inner.tsx +0 -317
  121. package/src/components/charts/world-heat-map.tsx +0 -184
  122. package/src/components/molecules/README.md +0 -12
  123. package/src/components/molecules/action-bar.tsx +0 -73
  124. package/src/components/molecules/activity-item.tsx +0 -74
  125. package/src/components/molecules/alert.tsx +0 -86
  126. package/src/components/molecules/animated-background.tsx +0 -92
  127. package/src/components/molecules/auth-shell.tsx +0 -95
  128. package/src/components/molecules/brand-lockup.tsx +0 -48
  129. package/src/components/molecules/breadcrumb.tsx +0 -157
  130. package/src/components/molecules/button-group.tsx +0 -104
  131. package/src/components/molecules/calendar.tsx +0 -217
  132. package/src/components/molecules/card.tsx +0 -102
  133. package/src/components/molecules/client-brand.tsx +0 -95
  134. package/src/components/molecules/code-block.tsx +0 -86
  135. package/src/components/molecules/countdown-button.tsx +0 -92
  136. package/src/components/molecules/empty-state.tsx +0 -56
  137. package/src/components/molecules/error-state.tsx +0 -42
  138. package/src/components/molecules/field-display.tsx +0 -35
  139. package/src/components/molecules/input-otp.tsx +0 -74
  140. package/src/components/molecules/launcher-card.tsx +0 -152
  141. package/src/components/molecules/loading-state.tsx +0 -36
  142. package/src/components/molecules/notification-item.tsx +0 -67
  143. package/src/components/molecules/notification-list.tsx +0 -45
  144. package/src/components/molecules/number-badge.tsx +0 -53
  145. package/src/components/molecules/or-separator.tsx +0 -38
  146. package/src/components/molecules/page-header.tsx +0 -88
  147. package/src/components/molecules/page-tabs.tsx +0 -94
  148. package/src/components/molecules/pagination.tsx +0 -150
  149. package/src/components/molecules/password-input.tsx +0 -83
  150. package/src/components/molecules/password-strength-meter.tsx +0 -104
  151. package/src/components/molecules/phone-input.tsx +0 -200
  152. package/src/components/molecules/search-bar.tsx +0 -64
  153. package/src/components/molecules/secret-field.tsx +0 -158
  154. package/src/components/molecules/section-card.tsx +0 -91
  155. package/src/components/molecules/social-buttons.tsx +0 -165
  156. package/src/components/molecules/stat-card.tsx +0 -100
  157. package/src/components/molecules/status-badge.tsx +0 -42
  158. package/src/components/molecules/stepper.tsx +0 -96
  159. package/src/components/molecules/table.tsx +0 -157
  160. package/src/components/molecules/terminal.tsx +0 -74
  161. package/src/components/molecules/toggle-group.tsx +0 -145
  162. package/src/components/molecules/tooltip.tsx +0 -155
  163. package/src/components/molecules/user-avatar-chip.tsx +0 -71
  164. package/src/components/organisms/README.md +0 -14
  165. package/src/components/organisms/accordion.tsx +0 -154
  166. package/src/components/organisms/alert-dialog.tsx +0 -277
  167. package/src/components/organisms/carousel.tsx +0 -244
  168. package/src/components/organisms/collapsible.tsx +0 -69
  169. package/src/components/organisms/command.tsx +0 -144
  170. package/src/components/organisms/context-menu.tsx +0 -339
  171. package/src/components/organisms/dashboard-grid.tsx +0 -369
  172. package/src/components/organisms/data-table.tsx +0 -330
  173. package/src/components/organisms/dialog.tsx +0 -312
  174. package/src/components/organisms/drawer.tsx +0 -123
  175. package/src/components/organisms/dropdown-menu.tsx +0 -440
  176. package/src/components/organisms/editors/code-editor.tsx +0 -144
  177. package/src/components/organisms/editors/index.ts +0 -4
  178. package/src/components/organisms/editors/markdown-editor.tsx +0 -153
  179. package/src/components/organisms/editors/markdown-renderer.ts +0 -27
  180. package/src/components/organisms/editors/prose-canvas-classes.ts +0 -45
  181. package/src/components/organisms/editors/rich-text-editor.tsx +0 -126
  182. package/src/components/organisms/editors/toolbar/md-toolbar.tsx +0 -129
  183. package/src/components/organisms/editors/toolbar/rte-toolbar.tsx +0 -211
  184. package/src/components/organisms/editors/toolbar/toolbar-shell.tsx +0 -45
  185. package/src/components/organisms/editors/use-codemirror-theme.ts +0 -61
  186. package/src/components/organisms/error-boundary.tsx +0 -61
  187. package/src/components/organisms/form.tsx +0 -174
  188. package/src/components/organisms/hover-card.tsx +0 -115
  189. package/src/components/organisms/menubar.tsx +0 -498
  190. package/src/components/organisms/navbar.tsx +0 -104
  191. package/src/components/organisms/navigation-menu.tsx +0 -235
  192. package/src/components/organisms/popover.tsx +0 -149
  193. package/src/components/organisms/resizable.tsx +0 -58
  194. package/src/components/organisms/schema-form.tsx +0 -232
  195. package/src/components/organisms/select.tsx +0 -309
  196. package/src/components/organisms/sheet.tsx +0 -265
  197. package/src/components/organisms/sidebar.tsx +0 -1040
  198. package/src/components/organisms/sonner.tsx +0 -96
  199. package/src/components/organisms/tabs.tsx +0 -133
  200. package/src/components/organisms/theme-provider.tsx +0 -101
  201. package/src/hooks/use-mobile.tsx +0 -19
  202. package/src/lib/portal-container.tsx +0 -35
  203. package/src/lib/utils.ts +0 -6
  204. package/src/native.ts +0 -23
  205. package/src/tokens/colors.ts +0 -91
  206. package/src/tokens/index.ts +0 -3
  207. package/src/tokens/spacing.ts +0 -55
  208. package/src/tokens/typography.ts +0 -27
  209. package/styles/dashboard-grid.css +0 -47
  210. package/styles/fonts/Roboto-VariableFont_wdth_wght.ttf +0 -0
  211. package/styles/glass.css +0 -171
  212. package/styles/leaflet.css +0 -13
  213. package/styles/tokens.css +0 -317
  214. package/tailwind.config.ts +0 -70
package/styles/glass.css DELETED
@@ -1,171 +0,0 @@
1
- /* ---------- Glass surface mode ----------
2
- *
3
- * Activated by `html[data-surface="glass"]`. The conceit: an aurora-tinted
4
- * backdrop shows through every chrome surface (sidebar, topbar, cards,
5
- * tables) via `backdrop-filter: blur(...)`. Surfaces become tinted glass,
6
- * with a low-alpha card color so the page palette bleeds through, plus a
7
- * 1-px inner highlight on the top edge to suggest a refractive lip.
8
- * Borders drop to white/black at low alpha so the layout reads as layered
9
- * panes rather than rectangles drawn on flat paint.
10
- *
11
- * Two palettes:
12
- * - Light: pastel peach + sky + lavender washes on near-white
13
- * - Dark : deep indigo + violet + teal washes on near-black
14
- *
15
- * Surfaces opt in via `data-slot` attributes already present on Canvas
16
- * components (`card`, `sidebar`, `data-table`, `input`, `popover-content`,
17
- * `sheet-content`, `drawer-content`, `empty-state`, `code-block`). Consumer
18
- * apps activate the mode by toggling the `data-surface` attribute on
19
- * `<html>` (e.g. `document.documentElement.dataset.surface = "glass"`).
20
- *
21
- * Mirrors the Athena design handoff's `app.css` glass block; do not
22
- * tighten these values without checking against the handoff bundle.
23
- *
24
- * Deliberately unlayered so glass backgrounds override Tailwind
25
- * utilities like `bg-card` (which live in @layer utilities).
26
- */
27
-
28
- html[data-surface="glass"] {
29
- --glass-tint: 0 0% 100%;
30
- --glass-tint-alpha: 0.55;
31
- --glass-border: 0 0% 100%;
32
- --glass-border-alpha: 0.45;
33
- --glass-highlight: 0 0% 100%;
34
- --glass-highlight-alpha: 0.55;
35
- --glass-shadow: 220 30% 20%;
36
- --glass-blur: 18px;
37
- --glass-saturate: 140%;
38
- }
39
-
40
- html[data-surface="glass"].dark {
41
- --glass-tint: 222 22% 18%;
42
- --glass-tint-alpha: 0.55;
43
- --glass-border: 0 0% 100%;
44
- --glass-border-alpha: 0.1;
45
- --glass-highlight: 0 0% 100%;
46
- --glass-highlight-alpha: 0.1;
47
- --glass-shadow: 222 60% 4%;
48
- }
49
-
50
- /* ──────────────────────────────────────────────────────────────
51
- * Aurora backdrop
52
- * ──────────────────────────────────────────────────────────── */
53
- html[data-surface="glass"] body {
54
- background:
55
- radial-gradient(60% 50% at 12% 10%, hsl(28 100% 80% / 0.55), transparent 60%),
56
- radial-gradient(55% 55% at 88% 8%, hsl(210 100% 78% / 0.55), transparent 60%),
57
- radial-gradient(70% 60% at 50% 100%, hsl(270 90% 82% / 0.45), transparent 65%),
58
- hsl(220 30% 97%);
59
- background-attachment: fixed;
60
- }
61
-
62
- html[data-surface="glass"].dark body {
63
- background:
64
- radial-gradient(55% 50% at 10% 8%, hsl(245 90% 60% / 0.4), transparent 60%),
65
- radial-gradient(50% 55% at 92% 12%, hsl(280 85% 55% / 0.35), transparent 60%),
66
- radial-gradient(70% 60% at 50% 100%, hsl(190 90% 45% / 0.28), transparent 70%),
67
- hsl(222 30% 6%);
68
- background-attachment: fixed;
69
- }
70
-
71
- /* ──────────────────────────────────────────────────────────────
72
- * Frosted-pane surfaces
73
- * ──────────────────────────────────────────────────────────── */
74
- html[data-surface="glass"] [data-slot="card"],
75
- html[data-surface="glass"] [data-slot="sidebar"],
76
- html[data-surface="glass"] [data-slot="topbar"],
77
- html[data-surface="glass"] [data-slot="data-table"],
78
- html[data-surface="glass"] [data-slot="empty-state"],
79
- html[data-surface="glass"] [data-slot="popover-content"],
80
- html[data-surface="glass"] [data-slot="sheet-content"],
81
- html[data-surface="glass"] [data-slot="drawer-content"],
82
- html[data-surface="glass"] [data-slot="alert"],
83
- html[data-surface="glass"] [data-slot="alert-dialog-content"],
84
- html[data-surface="glass"] [data-slot="dialog-content"],
85
- html[data-surface="glass"] [data-slot="dropdown-menu-content"],
86
- html[data-surface="glass"] [data-slot="dropdown-menu-sub-content"],
87
- html[data-surface="glass"] [data-slot="context-menu-content"],
88
- html[data-surface="glass"] [data-slot="context-menu-sub-content"],
89
- html[data-surface="glass"] [data-slot="hover-card-content"],
90
- html[data-surface="glass"] [data-slot="select-content"],
91
- html[data-surface="glass"] [data-slot="menubar"],
92
- html[data-surface="glass"] [data-slot="menubar-content"],
93
- html[data-surface="glass"] [data-slot="menubar-sub-content"],
94
- html[data-surface="glass"] [data-slot="navigation-menu-viewport"],
95
- html[data-surface="glass"] [data-slot="tooltip-content"],
96
- html[data-surface="glass"] [data-slot="command"],
97
- html[data-surface="glass"] [data-slot="calendar"],
98
- html[data-surface="glass"] [data-slot="terminal"] {
99
- background: hsl(var(--glass-tint) / var(--glass-tint-alpha));
100
- backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
101
- -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
102
- border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
103
- box-shadow:
104
- inset 0 1px 0 hsl(var(--glass-highlight) / var(--glass-highlight-alpha)),
105
- 0 1px 2px hsl(var(--glass-shadow) / 0.06),
106
- 0 8px 24px -12px hsl(var(--glass-shadow) / 0.18);
107
- }
108
-
109
- html[data-surface="glass"] [data-slot="sidebar"],
110
- html[data-surface="glass"] [data-slot="topbar"] {
111
- background: hsl(var(--glass-tint) / calc(var(--glass-tint-alpha) - 0.1));
112
- border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
113
- }
114
-
115
- /* SidebarInset (the main content column) is fully transparent in glass
116
- * mode so the aurora gradient on <body> reads through unimpeded. No
117
- * backdrop-filter is applied: the content area is a window onto the
118
- * aurora, not a frosted pane. The Tailwind `bg-background` utility on
119
- * the component is overridden here by the higher-specificity selector
120
- * and the unlayered cascade of glass.css. */
121
- html[data-surface="glass"] [data-slot="sidebar-inset"] {
122
- background: transparent;
123
- }
124
-
125
- /* DataTable internal rules */
126
- html[data-surface="glass"] [data-slot="data-table"] thead tr {
127
- background: hsl(var(--glass-highlight) / 0.1);
128
- border-bottom: 1px solid hsl(var(--glass-border) / var(--glass-border-alpha));
129
- }
130
- html[data-surface="glass"] [data-slot="data-table"] tbody tr {
131
- border-bottom: 1px solid hsl(var(--glass-border) / calc(var(--glass-border-alpha) - 0.2));
132
- }
133
- html[data-surface="glass"] [data-slot="data-table"] tbody tr:hover {
134
- background: hsl(var(--glass-highlight) / 0.1);
135
- }
136
-
137
- html[data-surface="glass"] [data-slot="card"] [data-slot="card-divider"] {
138
- background: hsl(var(--glass-border) / var(--glass-border-alpha));
139
- }
140
-
141
- html[data-surface="glass"] [data-slot="input"],
142
- html[data-surface="glass"] [data-slot="code-block"],
143
- html[data-surface="glass"] [data-slot="tabs-list"] {
144
- background: hsl(var(--glass-tint) / 0.35);
145
- border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
146
- backdrop-filter: blur(8px);
147
- -webkit-backdrop-filter: blur(8px);
148
- }
149
-
150
- html[data-surface="glass"] [data-slot="accordion-item"] {
151
- border-bottom-color: hsl(var(--glass-border) / var(--glass-border-alpha));
152
- }
153
-
154
- html[data-surface="glass"] [data-slot="popover-content"],
155
- html[data-surface="glass"] [data-slot="sheet-content"],
156
- html[data-surface="glass"] [data-slot="drawer-content"],
157
- html[data-surface="glass"] [data-slot="alert-dialog-content"],
158
- html[data-surface="glass"] [data-slot="dialog-content"],
159
- html[data-surface="glass"] [data-slot="dropdown-menu-content"],
160
- html[data-surface="glass"] [data-slot="dropdown-menu-sub-content"],
161
- html[data-surface="glass"] [data-slot="context-menu-content"],
162
- html[data-surface="glass"] [data-slot="context-menu-sub-content"],
163
- html[data-surface="glass"] [data-slot="hover-card-content"],
164
- html[data-surface="glass"] [data-slot="select-content"],
165
- html[data-surface="glass"] [data-slot="menubar-content"],
166
- html[data-surface="glass"] [data-slot="menubar-sub-content"],
167
- html[data-surface="glass"] [data-slot="navigation-menu-viewport"],
168
- html[data-surface="glass"] [data-slot="tooltip-content"],
169
- html[data-surface="glass"] [data-slot="command"] {
170
- background: hsl(var(--glass-tint) / 0.85);
171
- }
package/styles/leaflet.css DELETED
@@ -1,13 +0,0 @@
1
- /**
2
- * Re-export of Leaflet's base stylesheet.
3
- *
4
- * Consumers of `<WorldHeatMap>` import this once at app entry:
5
- *
6
- * import "@olympusoss/canvas/styles/leaflet.css";
7
- *
8
- * The actual import resolves through the consumer's bundler — `leaflet` is a
9
- * peer-optional dependency, so an app that doesn't use the map doesn't
10
- * incur this stylesheet. If `leaflet` isn't installed, the @import errors at
11
- * build time, which is the right signal.
12
- */
13
- @import "leaflet/dist/leaflet.css";
package/styles/tokens.css DELETED
@@ -1,317 +0,0 @@
1
- /* ---------- Canvas tokens — single source of truth ----------
2
- *
3
- * The values mirror the Athena design handoff's `colors_and_type.css`
4
- * (shadcn zinc, neutral hue 240). Both light and dark modes use flat
5
- * surfaces: body, cards, popovers all share the same lightness within
6
- * each mode and are differentiated by `--border` instead of tonal lift.
7
- *
8
- * Dual-form sidebar declaration (load-bearing, do NOT remove either form):
9
- * - Raw HSL triplets like `--sidebar-background: 0 0% 98%` are consumed
10
- * by `hsl(var(--…))` patterns inside component CSS / inline styles.
11
- * - Resolved `hsl()` forms like `--sidebar: hsl(0 0% 98%)` feed Tailwind
12
- * v4's `@theme inline { --color-sidebar: var(--sidebar) }` mapping so
13
- * `bg-sidebar` / `text-sidebar-foreground` utilities resolve.
14
- *
15
- * Typography canonical (per handoff): Roboto for surfaces with Inter as a
16
- * fallback while a consumer migrates, JetBrains Mono for code. The Roboto
17
- * variable font is self-hosted at ./fonts/Roboto-VariableFont_wdth_wght.ttf
18
- * and ships with the package (covered by the `styles` files entry).
19
- */
20
-
21
- /* Roboto variable font, self-hosted. Same axis range as the handoff
22
- * (wght 100–900, wdth 75–100). JetBrains Mono is NOT loaded here:
23
- * consumer apps own how they pull it in (e.g. Next.js `next/font/google`)
24
- * so Canvas does not introduce an external @import dependency. */
25
- @font-face {
26
- font-family: "Roboto";
27
- src: url("./fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations");
28
- font-weight: 100 900;
29
- font-stretch: 75% 100%;
30
- font-style: normal;
31
- font-display: swap;
32
- }
33
-
34
- @layer base {
35
- :root {
36
- /* ── Base palette (light) ───────────────────────────────────
37
- * Light mode keeps body and surfaces both white — borders +
38
- * shadow define cards. */
39
- --background: 0 0% 100%;
40
- --foreground: 240 10% 3.9%;
41
- --card: 0 0% 100%;
42
- --card-foreground: 240 10% 3.9%;
43
- --popover: 0 0% 100%;
44
- --popover-foreground: 240 10% 3.9%;
45
- /* Vivid blue primary (per handoff's rendered theme, not the canonical
46
- * dark-zinc default in colors_and_type.css). The handoff prototype
47
- * runs a runtime theme picker that overrides --primary + --ring inline
48
- * on <html>; this bakes that override into Canvas so every consumer
49
- * gets the same blue accent without the picker. */
50
- --primary: 240 79% 60%;
51
- --primary-foreground: 0 0% 100%;
52
- --secondary: 240 4.8% 95.9%;
53
- --secondary-foreground: 240 5.9% 10%;
54
- --muted: 240 4.8% 95.9%;
55
- --muted-foreground: 240 3.8% 46.1%;
56
- --accent: 240 4.8% 95.9%;
57
- --accent-foreground: 240 5.9% 10%;
58
- --destructive: 0 84.2% 60.2%;
59
- --destructive-foreground: 0 0% 98%;
60
- --brand: 213 94% 68%;
61
- --brand-foreground: 0 0% 100%;
62
- --border: 240 5.9% 90%;
63
- --input: 240 5.9% 90%;
64
- --ring: 240 79% 60%;
65
- --radius: 0.5rem;
66
-
67
- /* ── Chart palette ─────────────────────────────────────────── */
68
- --chart-1: 12 76% 61%;
69
- --chart-2: 173 58% 39%;
70
- --chart-3: 197 37% 24%;
71
- --chart-4: 43 74% 66%;
72
- --chart-5: 27 87% 67%;
73
- /* Sixth slot added for Athena dashboard charts (CHARTS.md). The 1-5
74
- * triplets above are canonical canvas values and intentionally diverge
75
- * from CHARTS.md's recommended palette per the "Canvas wins" rule —
76
- * flagged in PR. */
77
- --chart-6: 173 70% 42%;
78
-
79
- /* ── Sidebar (neutral shadcn zinc per Athena handoff) ────── */
80
- --sidebar-background: 0 0% 98%;
81
- --sidebar-foreground: 240 5.3% 26.1%;
82
- --sidebar-primary: 240 5.9% 10%;
83
- --sidebar-primary-foreground: 0 0% 98%;
84
- --sidebar-accent: 240 4.8% 95.9%;
85
- --sidebar-accent-foreground: 240 5.9% 10%;
86
- --sidebar-border: 220 13% 91%;
87
- --sidebar-ring: 217.2 91.2% 59.8%;
88
-
89
- /* ── StatCard variant tokens ───────────────────────────────── *
90
- * Used by molecules/stat-card.tsx via
91
- * bg-[hsl(var(--stat-blue)/0.1)] text-[hsl(var(--stat-blue))]
92
- * to render a 10%-tint background with full-saturation icon. */
93
- --stat-blue: 217 91% 60%; /* #3b82f6 */
94
- --stat-success: 160 84% 39%; /* #10b981 */
95
- --stat-purple: 258 90% 66%; /* #8b5cf6 */
96
- --stat-destructive: 4 78% 50%; /* #df341d */
97
- --stat-amber: 38 92% 50%; /* #f59e0b */
98
-
99
- /* ── Typography ────────────────────────────────────────────── */
100
- --font-sans: "Roboto", "Inter", system-ui, -apple-system, sans-serif;
101
- --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
102
-
103
- /* ── Letter-spacing scale ──────────────────────────────────── *
104
- * Used by display, h2, page title, stat-card.value. */
105
- --tracking-tighter: -0.02em;
106
- --tracking-tight: -0.015em;
107
- --tracking-normal: 0;
108
- }
109
-
110
- .dark {
111
- /* ── Base palette (dark): shadcn neutral zinc per Athena handoff ──
112
- * Flat shadcn defaults (hue 240, no elevation tiering). Cards sit at
113
- * the same lightness as the body; the visible separation comes from
114
- * `--border` (240 3.7% 15.9%). The previous "tiered elevation"
115
- * design (hue 225, lifted surfaces) was Canvas-only and has been
116
- * removed in favour of the handoff palette so every consumer
117
- * inherits the same design system. */
118
-
119
- --background: 240 10% 3.9%;
120
- --foreground: 0 0% 98%;
121
-
122
- --card: 240 10% 3.9%;
123
- --card-foreground: 0 0% 98%;
124
- --popover: 240 10% 3.9%;
125
- --popover-foreground: 0 0% 98%;
126
-
127
- /* Same vivid blue as light mode so the accent stays consistent
128
- * across themes (per handoff runtime override). The brighter blue
129
- * still contrasts white text in dark mode. */
130
- --primary: 240 79% 60%;
131
- --primary-foreground: 0 0% 100%;
132
-
133
- --secondary: 240 3.7% 15.9%;
134
- --secondary-foreground: 0 0% 98%;
135
- --muted: 240 3.7% 15.9%;
136
- --muted-foreground: 240 5% 64.9%;
137
- --accent: 240 3.7% 15.9%;
138
- --accent-foreground: 0 0% 98%;
139
-
140
- --destructive: 0 62.8% 30.6%;
141
- --destructive-foreground: 0 0% 98%;
142
- --brand: 213 94% 68%;
143
- --brand-foreground: 0 0% 100%;
144
-
145
- --border: 240 3.7% 15.9%;
146
- --input: 240 3.7% 15.9%;
147
- --ring: 240 79% 60%;
148
-
149
- /* Chart palette (Canvas-specific; handoff dashboard uses --primary
150
- * for bar fills rather than --chart-1, so these stay as-is). */
151
- --chart-1: 220 70% 50%;
152
- --chart-2: 160 60% 45%;
153
- --chart-3: 30 80% 55%;
154
- --chart-4: 280 65% 60%;
155
- --chart-5: 340 75% 55%;
156
- --chart-6: 173 70% 50%;
157
-
158
- /* Sidebar (neutral shadcn zinc per Athena handoff) */
159
- --sidebar-background: 240 5.9% 10%;
160
- --sidebar-foreground: 240 4.8% 95.9%;
161
- --sidebar-primary: 224.3 76.3% 48%;
162
- --sidebar-primary-foreground: 0 0% 100%;
163
- --sidebar-accent: 240 3.7% 15.9%;
164
- --sidebar-accent-foreground: 240 4.8% 95.9%;
165
- --sidebar-border: 240 3.7% 15.9%;
166
- --sidebar-ring: 217.2 91.2% 59.8%;
167
-
168
- /* StatCard variants — same hex; 10% tint reads on dark via opacity */
169
- --stat-blue: 217 91% 60%;
170
- --stat-success: 160 84% 39%;
171
- --stat-purple: 258 90% 66%;
172
- --stat-destructive: 4 88% 62%;
173
- --stat-amber: 38 92% 50%;
174
- }
175
-
176
- * {
177
- border-color: hsl(var(--border));
178
- }
179
-
180
- body {
181
- background: hsl(var(--background));
182
- color: hsl(var(--foreground));
183
- }
184
-
185
- /* ──────────────────────────────────────────────────────────────
186
- * Themed scrollbars — applied globally so every overflow:auto /
187
- * overflow:scroll element in canvas (and consumer apps that load
188
- * tokens.css) gets canvas-token-tinted scrollbars instead of the
189
- * stark OS defaults. WebKit (Chrome/Safari) uses pseudo-elements;
190
- * Firefox uses the `scrollbar-*` properties. Both target the
191
- * `--muted-foreground` token at 30%/45%/60% opacity for
192
- * idle/hover/active so scrollbars stay subtle in dark mode and
193
- * still legible in light mode.
194
- * ────────────────────────────────────────────────────────────── */
195
- * {
196
- scrollbar-width: thin;
197
- scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
198
- }
199
- *::-webkit-scrollbar {
200
- width: 10px;
201
- height: 10px;
202
- }
203
- *::-webkit-scrollbar-track {
204
- background: transparent;
205
- }
206
- *::-webkit-scrollbar-thumb {
207
- background-color: hsl(var(--muted-foreground) / 0.3);
208
- border-radius: 6px;
209
- /* Border creates the inset gap that makes the thumb feel like a
210
- * floating pill rather than filling the gutter. */
211
- border: 2px solid transparent;
212
- background-clip: content-box;
213
- }
214
- *::-webkit-scrollbar-thumb:hover {
215
- background-color: hsl(var(--muted-foreground) / 0.45);
216
- }
217
- *::-webkit-scrollbar-thumb:active {
218
- background-color: hsl(var(--muted-foreground) / 0.6);
219
- }
220
- *::-webkit-scrollbar-corner {
221
- background: transparent;
222
- }
223
- }
224
-
225
- @custom-variant dark (&:is(.dark *));
226
-
227
- /* ---------- Resolved hsl() forms ----------
228
- * These feed Tailwind v4's `@theme inline { --color-sidebar: var(--sidebar) }`
229
- * mapping. They mirror the raw HSL triplets above; keep the two in sync.
230
- */
231
- :root {
232
- --sidebar: hsl(0 0% 98%);
233
- --sidebar-foreground: hsl(240 5.3% 26.1%);
234
- --sidebar-primary: hsl(240 5.9% 10%);
235
- --sidebar-primary-foreground: hsl(0 0% 98%);
236
- --sidebar-accent: hsl(240 4.8% 95.9%);
237
- --sidebar-accent-foreground: hsl(240 5.9% 10%);
238
- --sidebar-border: hsl(220 13% 91%);
239
- --sidebar-ring: hsl(217.2 91.2% 59.8%);
240
- }
241
-
242
- .dark {
243
- --sidebar: hsl(240 5.9% 10%);
244
- --sidebar-foreground: hsl(240 4.8% 95.9%);
245
- --sidebar-primary: hsl(224.3 76.3% 48%);
246
- --sidebar-primary-foreground: hsl(0 0% 100%);
247
- --sidebar-accent: hsl(240 3.7% 15.9%);
248
- --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
249
- --sidebar-border: hsl(240 3.7% 15.9%);
250
- --sidebar-ring: hsl(217.2 91.2% 59.8%);
251
- }
252
-
253
- @theme inline {
254
- --color-sidebar: var(--sidebar);
255
- --color-sidebar-foreground: var(--sidebar-foreground);
256
- --color-sidebar-primary: var(--sidebar-primary);
257
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
258
- --color-sidebar-accent: var(--sidebar-accent);
259
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
260
- --color-sidebar-border: var(--sidebar-border);
261
- --color-sidebar-ring: var(--sidebar-ring);
262
-
263
- /* StatCard variant colors — exposed as Tailwind utilities
264
- * (e.g. text-stat-blue, bg-stat-success) for ergonomic access. */
265
- --color-stat-blue: hsl(var(--stat-blue));
266
- --color-stat-success: hsl(var(--stat-success));
267
- --color-stat-purple: hsl(var(--stat-purple));
268
- --color-stat-destructive: hsl(var(--stat-destructive));
269
- --color-stat-amber: hsl(var(--stat-amber));
270
-
271
- /* ── Shadow scale (per handoff canvas.css) ──────────────────
272
- * Two base tones, both single-layer at the small end:
273
- * - `2xs` / `xs` / `sm`: 0 1px 2px / 5% — inputs, outline /
274
- * secondary buttons (matches handoff `.input` and
275
- * `.btn-outline` / `.btn-secondary`).
276
- * - DEFAULT (`shadow`): 0 1px 3px / 8% — cards and primary /
277
- * destructive buttons (matches handoff `.card`,
278
- * `.btn-default`, `.btn-destructive`).
279
- * - `md` / `lg` / `xl`: two-layer stacks softened to 8% / 6%
280
- * opacity so popovers, dialogs, and drawers sit on the same
281
- * depth ramp as cards instead of feeling heavier (Tailwind
282
- * defaults use 10%).
283
- * - `inner`: keeps Tailwind default (no handoff override).
284
- *
285
- * Overriding the @theme tokens propagates through every Canvas
286
- * component class (`shadow-sm`, `shadow-md`, etc.) without
287
- * touching component sources.
288
- */
289
- --shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
290
- --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
291
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
292
- --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
293
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
294
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
295
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.06);
296
- }
297
-
298
- @keyframes orb-float-1 {
299
- 0%, 100% {
300
- transform: translate3d(0, 0, 0) scale(1);
301
- }
302
- 33% {
303
- transform: translate3d(40px, -30px, 0) scale(1.05);
304
- }
305
- 66% {
306
- transform: translate3d(-20px, 20px, 0) scale(0.95);
307
- }
308
- }
309
-
310
- @keyframes orb-float-2 {
311
- 0%, 100% {
312
- transform: translate3d(0, 0, 0) scale(1);
313
- }
314
- 50% {
315
- transform: translate3d(-30px, -40px, 0) scale(1.08);
316
- }
317
- }
package/tailwind.config.ts DELETED
@@ -1,70 +0,0 @@
1
- import type { Config } from "tailwindcss";
2
-
3
- const config: Config = {
4
- content: ["./src/**/*.{ts,tsx}"],
5
- darkMode: "class",
6
- theme: {
7
- extend: {
8
- colors: {
9
- background: "hsl(var(--background))",
10
- foreground: "hsl(var(--foreground))",
11
- card: {
12
- DEFAULT: "hsl(var(--card))",
13
- foreground: "hsl(var(--card-foreground))",
14
- },
15
- popover: {
16
- DEFAULT: "hsl(var(--popover))",
17
- foreground: "hsl(var(--popover-foreground))",
18
- },
19
- primary: {
20
- DEFAULT: "hsl(var(--primary))",
21
- foreground: "hsl(var(--primary-foreground))",
22
- },
23
- secondary: {
24
- DEFAULT: "hsl(var(--secondary))",
25
- foreground: "hsl(var(--secondary-foreground))",
26
- },
27
- muted: {
28
- DEFAULT: "hsl(var(--muted))",
29
- foreground: "hsl(var(--muted-foreground))",
30
- },
31
- accent: {
32
- DEFAULT: "hsl(var(--accent))",
33
- foreground: "hsl(var(--accent-foreground))",
34
- },
35
- destructive: {
36
- DEFAULT: "hsl(var(--destructive))",
37
- foreground: "hsl(var(--destructive-foreground))",
38
- },
39
- border: "hsl(var(--border))",
40
- input: "hsl(var(--input))",
41
- ring: "hsl(var(--ring))",
42
- chart: {
43
- "1": "hsl(var(--chart-1))",
44
- "2": "hsl(var(--chart-2))",
45
- "3": "hsl(var(--chart-3))",
46
- "4": "hsl(var(--chart-4))",
47
- "5": "hsl(var(--chart-5))",
48
- },
49
- sidebar: {
50
- DEFAULT: "hsl(var(--sidebar-background))",
51
- foreground: "hsl(var(--sidebar-foreground))",
52
- primary: "hsl(var(--sidebar-primary))",
53
- "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
54
- accent: "hsl(var(--sidebar-accent))",
55
- "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
56
- border: "hsl(var(--sidebar-border))",
57
- ring: "hsl(var(--sidebar-ring))",
58
- },
59
- },
60
- borderRadius: {
61
- lg: "var(--radius)",
62
- md: "calc(var(--radius) - 2px)",
63
- sm: "calc(var(--radius) - 4px)",
64
- },
65
- },
66
- },
67
- plugins: [],
68
- };
69
-
70
- export default config;