@olympusoss/canvas 4.0.0 → 5.0.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 (297) hide show
  1. package/README.md +108 -0
  2. package/package.json +14 -3
  3. package/src/atoms/avatar/avatar.md +185 -0
  4. package/src/atoms/avatar/avatar.styles.ts +48 -0
  5. package/src/atoms/avatar/avatar.tsx +99 -0
  6. package/src/atoms/badge/badge.md +237 -0
  7. package/src/atoms/badge/badge.styles.ts +79 -0
  8. package/src/atoms/badge/badge.tsx +86 -0
  9. package/src/atoms/breadcrumb/breadcrumb.md +233 -0
  10. package/src/atoms/breadcrumb/breadcrumb.styles.ts +40 -0
  11. package/src/atoms/breadcrumb/breadcrumb.tsx +130 -0
  12. package/src/atoms/button/button.android.tsx +6 -0
  13. package/src/atoms/button/button.ios.tsx +6 -0
  14. package/src/atoms/button/button.md +184 -0
  15. package/src/atoms/button/button.shared.tsx +79 -0
  16. package/src/atoms/button/button.styles.ts +152 -0
  17. package/src/atoms/button/button.tsx +6 -0
  18. package/src/atoms/button-group/button-group.android.tsx +6 -0
  19. package/src/atoms/button-group/button-group.ios.tsx +6 -0
  20. package/src/atoms/button-group/button-group.md +120 -0
  21. package/src/atoms/button-group/button-group.shared.tsx +398 -0
  22. package/src/atoms/button-group/button-group.styles.ts +483 -0
  23. package/src/atoms/button-group/button-group.tsx +6 -0
  24. package/src/atoms/checkbox/checkbox.android.tsx +6 -0
  25. package/src/atoms/checkbox/checkbox.ios.tsx +6 -0
  26. package/src/atoms/checkbox/checkbox.md +150 -0
  27. package/src/atoms/checkbox/checkbox.shared.tsx +103 -0
  28. package/src/atoms/checkbox/checkbox.styles.ts +106 -0
  29. package/src/atoms/checkbox/checkbox.tsx +6 -0
  30. package/src/atoms/combobox/combobox.android.tsx +6 -0
  31. package/src/atoms/combobox/combobox.ios.tsx +6 -0
  32. package/src/atoms/combobox/combobox.md +213 -0
  33. package/src/atoms/combobox/combobox.shared.tsx +160 -0
  34. package/src/atoms/combobox/combobox.styles.ts +270 -0
  35. package/src/atoms/combobox/combobox.tsx +6 -0
  36. package/src/atoms/divider/divider.md +140 -0
  37. package/src/atoms/divider/divider.styles.ts +35 -0
  38. package/src/atoms/divider/divider.tsx +67 -0
  39. package/src/atoms/dropdown/dropdown.android.tsx +6 -0
  40. package/src/atoms/dropdown/dropdown.ios.tsx +6 -0
  41. package/src/atoms/dropdown/dropdown.md +221 -0
  42. package/src/atoms/dropdown/dropdown.shared.tsx +190 -0
  43. package/src/atoms/dropdown/dropdown.styles.ts +233 -0
  44. package/src/atoms/dropdown/dropdown.tsx +6 -0
  45. package/src/atoms/icon/icon.md +131 -0
  46. package/src/atoms/icon/icon.styles.ts +30 -0
  47. package/src/atoms/icon/icon.tsx +328 -0
  48. package/src/atoms/index.ts +24 -0
  49. package/src/atoms/input/input.android.tsx +6 -0
  50. package/src/atoms/input/input.ios.tsx +6 -0
  51. package/src/atoms/input/input.md +118 -0
  52. package/src/atoms/input/input.shared.tsx +203 -0
  53. package/src/atoms/input/input.styles.ts +286 -0
  54. package/src/atoms/input/input.tsx +6 -0
  55. package/src/atoms/kbd/kbd.md +91 -0
  56. package/src/atoms/kbd/kbd.styles.ts +33 -0
  57. package/src/atoms/kbd/kbd.tsx +27 -0
  58. package/src/atoms/listbox/listbox.md +177 -0
  59. package/src/atoms/listbox/listbox.styles.ts +60 -0
  60. package/src/atoms/listbox/listbox.tsx +113 -0
  61. package/src/atoms/pagination/pagination.android.tsx +6 -0
  62. package/src/atoms/pagination/pagination.ios.tsx +6 -0
  63. package/src/atoms/pagination/pagination.md +133 -0
  64. package/src/atoms/pagination/pagination.shared.tsx +289 -0
  65. package/src/atoms/pagination/pagination.styles.ts +245 -0
  66. package/src/atoms/pagination/pagination.tsx +6 -0
  67. package/src/atoms/popover/popover.android.tsx +8 -0
  68. package/src/atoms/popover/popover.ios.tsx +6 -0
  69. package/src/atoms/popover/popover.md +87 -0
  70. package/src/atoms/popover/popover.shared.tsx +124 -0
  71. package/src/atoms/popover/popover.styles.ts +144 -0
  72. package/src/atoms/popover/popover.tsx +6 -0
  73. package/src/atoms/radio/radio.android.tsx +6 -0
  74. package/src/atoms/radio/radio.ios.tsx +6 -0
  75. package/src/atoms/radio/radio.md +173 -0
  76. package/src/atoms/radio/radio.shared.tsx +98 -0
  77. package/src/atoms/radio/radio.styles.ts +109 -0
  78. package/src/atoms/radio/radio.tsx +6 -0
  79. package/src/atoms/select/select.android.tsx +6 -0
  80. package/src/atoms/select/select.ios.tsx +6 -0
  81. package/src/atoms/select/select.md +156 -0
  82. package/src/atoms/select/select.shared.tsx +143 -0
  83. package/src/atoms/select/select.styles.ts +310 -0
  84. package/src/atoms/select/select.tsx +6 -0
  85. package/src/atoms/skeleton/skeleton.md +135 -0
  86. package/src/atoms/skeleton/skeleton.styles.ts +117 -0
  87. package/src/atoms/skeleton/skeleton.tsx +145 -0
  88. package/src/atoms/spinner/spinner.android.tsx +7 -0
  89. package/src/atoms/spinner/spinner.ios.tsx +7 -0
  90. package/src/atoms/spinner/spinner.md +94 -0
  91. package/src/atoms/spinner/spinner.shared.tsx +92 -0
  92. package/src/atoms/spinner/spinner.styles.tsx +115 -0
  93. package/src/atoms/spinner/spinner.tsx +7 -0
  94. package/src/atoms/switch/switch.android.tsx +6 -0
  95. package/src/atoms/switch/switch.ios.tsx +6 -0
  96. package/src/atoms/switch/switch.md +91 -0
  97. package/src/atoms/switch/switch.shared.tsx +97 -0
  98. package/src/atoms/switch/switch.styles.ts +79 -0
  99. package/src/atoms/switch/switch.tsx +6 -0
  100. package/src/atoms/textarea/textarea.android.tsx +6 -0
  101. package/src/atoms/textarea/textarea.ios.tsx +6 -0
  102. package/src/atoms/textarea/textarea.md +140 -0
  103. package/src/atoms/textarea/textarea.shared.tsx +74 -0
  104. package/src/atoms/textarea/textarea.styles.ts +116 -0
  105. package/src/atoms/textarea/textarea.tsx +6 -0
  106. package/src/atoms/tooltip/tooltip.android.tsx +6 -0
  107. package/src/atoms/tooltip/tooltip.ios.tsx +7 -0
  108. package/src/atoms/tooltip/tooltip.md +122 -0
  109. package/src/atoms/tooltip/tooltip.shared.tsx +113 -0
  110. package/src/atoms/tooltip/tooltip.styles.ts +113 -0
  111. package/src/atoms/tooltip/tooltip.tsx +6 -0
  112. package/src/atoms/typography/typography.md +330 -0
  113. package/src/atoms/typography/typography.styles.ts +95 -0
  114. package/src/atoms/typography/typography.tsx +76 -0
  115. package/src/index.ts +12 -2
  116. package/src/molecules/action-panels/action-panels.md +133 -0
  117. package/src/molecules/action-panels/action-panels.styles.ts +39 -0
  118. package/src/molecules/action-panels/action-panels.tsx +113 -0
  119. package/src/molecules/alert/alert.md +119 -0
  120. package/src/molecules/alert/alert.styles.ts +88 -0
  121. package/src/molecules/alert/alert.tsx +74 -0
  122. package/src/molecules/alert-dialog/alert-dialog.android.tsx +6 -0
  123. package/src/molecules/alert-dialog/alert-dialog.ios.tsx +6 -0
  124. package/src/molecules/alert-dialog/alert-dialog.md +177 -0
  125. package/src/molecules/alert-dialog/alert-dialog.shared.tsx +187 -0
  126. package/src/molecules/alert-dialog/alert-dialog.styles.ts +248 -0
  127. package/src/molecules/alert-dialog/alert-dialog.tsx +6 -0
  128. package/src/molecules/card/card.md +190 -0
  129. package/src/molecules/card/card.styles.ts +67 -0
  130. package/src/molecules/card/card.tsx +176 -0
  131. package/src/molecules/code-block/code-block.md +159 -0
  132. package/src/molecules/code-block/code-block.styles.ts +167 -0
  133. package/src/molecules/code-block/code-block.tsx +176 -0
  134. package/src/molecules/description-lists/description-lists.md +129 -0
  135. package/src/molecules/description-lists/description-lists.styles.ts +102 -0
  136. package/src/molecules/description-lists/description-lists.tsx +133 -0
  137. package/src/molecules/empty-state/empty-state.md +218 -0
  138. package/src/molecules/empty-state/empty-state.styles.ts +63 -0
  139. package/src/molecules/empty-state/empty-state.tsx +77 -0
  140. package/src/molecules/feeds/feeds.md +102 -0
  141. package/src/molecules/feeds/feeds.styles.ts +120 -0
  142. package/src/molecules/feeds/feeds.tsx +167 -0
  143. package/src/molecules/field/field.md +117 -0
  144. package/src/molecules/field/field.styles.ts +85 -0
  145. package/src/molecules/field/field.tsx +175 -0
  146. package/src/molecules/fieldset/fieldset.md +141 -0
  147. package/src/molecules/fieldset/fieldset.styles.ts +79 -0
  148. package/src/molecules/fieldset/fieldset.tsx +182 -0
  149. package/src/molecules/form/form.md +137 -0
  150. package/src/molecules/form/form.styles.ts +39 -0
  151. package/src/molecules/form/form.tsx +246 -0
  152. package/src/molecules/grid-lists/grid-lists.md +114 -0
  153. package/src/molecules/grid-lists/grid-lists.styles.ts +79 -0
  154. package/src/molecules/grid-lists/grid-lists.tsx +157 -0
  155. package/src/molecules/index.ts +16 -0
  156. package/src/molecules/media-objects/media-objects.md +87 -0
  157. package/src/molecules/media-objects/media-objects.styles.ts +94 -0
  158. package/src/molecules/media-objects/media-objects.tsx +128 -0
  159. package/src/molecules/stacked-lists/stacked-lists.md +116 -0
  160. package/src/molecules/stacked-lists/stacked-lists.styles.ts +111 -0
  161. package/src/molecules/stacked-lists/stacked-lists.tsx +195 -0
  162. package/src/molecules/stats/stats.md +166 -0
  163. package/src/molecules/stats/stats.styles.ts +91 -0
  164. package/src/molecules/stats/stats.tsx +88 -0
  165. package/src/organisms/calendar/calendar.android.tsx +6 -0
  166. package/src/organisms/calendar/calendar.ios.tsx +6 -0
  167. package/src/organisms/calendar/calendar.md +114 -0
  168. package/src/organisms/calendar/calendar.shared.tsx +146 -0
  169. package/src/organisms/calendar/calendar.styles.ts +315 -0
  170. package/src/organisms/calendar/calendar.tsx +6 -0
  171. package/src/organisms/charts/charts.md +326 -0
  172. package/src/organisms/charts/charts.styles.ts +135 -0
  173. package/src/organisms/charts/charts.tsx +124 -0
  174. package/src/organisms/command/command.md +117 -0
  175. package/src/organisms/command/command.styles.ts +179 -0
  176. package/src/organisms/command/command.tsx +164 -0
  177. package/src/organisms/data-table/data-table.md +182 -0
  178. package/src/organisms/data-table/data-table.styles.ts +103 -0
  179. package/src/organisms/data-table/data-table.tsx +105 -0
  180. package/src/organisms/dialog/dialog.android.tsx +6 -0
  181. package/src/organisms/dialog/dialog.ios.tsx +6 -0
  182. package/src/organisms/dialog/dialog.md +271 -0
  183. package/src/organisms/dialog/dialog.shared.tsx +230 -0
  184. package/src/organisms/dialog/dialog.styles.ts +272 -0
  185. package/src/organisms/dialog/dialog.tsx +6 -0
  186. package/src/organisms/filter-panel/filter-panel.md +116 -0
  187. package/src/organisms/filter-panel/filter-panel.styles.ts +83 -0
  188. package/src/organisms/filter-panel/filter-panel.tsx +91 -0
  189. package/src/organisms/index.ts +13 -0
  190. package/src/organisms/navbars/navbars.android.tsx +6 -0
  191. package/src/organisms/navbars/navbars.ios.tsx +6 -0
  192. package/src/organisms/navbars/navbars.md +144 -0
  193. package/src/organisms/navbars/navbars.shared.tsx +137 -0
  194. package/src/organisms/navbars/navbars.styles.ts +251 -0
  195. package/src/organisms/navbars/navbars.tsx +6 -0
  196. package/src/organisms/overlays/overlays.android.tsx +6 -0
  197. package/src/organisms/overlays/overlays.ios.tsx +6 -0
  198. package/src/organisms/overlays/overlays.md +123 -0
  199. package/src/organisms/overlays/overlays.shared.tsx +175 -0
  200. package/src/organisms/overlays/overlays.styles.ts +309 -0
  201. package/src/organisms/overlays/overlays.tsx +6 -0
  202. package/src/organisms/row-menu/row-menu.android.tsx +6 -0
  203. package/src/organisms/row-menu/row-menu.ios.tsx +6 -0
  204. package/src/organisms/row-menu/row-menu.md +102 -0
  205. package/src/organisms/row-menu/row-menu.shared.tsx +105 -0
  206. package/src/organisms/row-menu/row-menu.styles.ts +262 -0
  207. package/src/organisms/row-menu/row-menu.tsx +6 -0
  208. package/src/organisms/sidebar/sidebar.android.tsx +6 -0
  209. package/src/organisms/sidebar/sidebar.ios.tsx +6 -0
  210. package/src/organisms/sidebar/sidebar.md +188 -0
  211. package/src/organisms/sidebar/sidebar.shared.tsx +167 -0
  212. package/src/organisms/sidebar/sidebar.styles.ts +262 -0
  213. package/src/organisms/sidebar/sidebar.tsx +6 -0
  214. package/src/organisms/stepper/stepper.android.tsx +6 -0
  215. package/src/organisms/stepper/stepper.ios.tsx +6 -0
  216. package/src/organisms/stepper/stepper.md +150 -0
  217. package/src/organisms/stepper/stepper.shared.tsx +158 -0
  218. package/src/organisms/stepper/stepper.styles.ts +280 -0
  219. package/src/organisms/stepper/stepper.tsx +6 -0
  220. package/src/organisms/tabs/tabs.android.tsx +6 -0
  221. package/src/organisms/tabs/tabs.ios.tsx +6 -0
  222. package/src/organisms/tabs/tabs.md +127 -0
  223. package/src/organisms/tabs/tabs.shared.tsx +281 -0
  224. package/src/organisms/tabs/tabs.styles.ts +398 -0
  225. package/src/organisms/tabs/tabs.tsx +6 -0
  226. package/src/style/color.ts +17 -0
  227. package/src/style/index.ts +14 -0
  228. package/src/style/primitives.ts +26 -0
  229. package/src/style/responsive.ts +45 -0
  230. package/src/style/shadow.ts +21 -0
  231. package/src/style/theme.tsx +56 -0
  232. package/src/style/tokens.ts +487 -0
  233. package/src/theme.ts +21 -0
  234. package/styles/canvas.css +128 -67
  235. package/tsconfig.json +4 -2
  236. package/src/cn.ts +0 -3
  237. package/styles/base.css +0 -17
  238. package/styles/components/alert.css +0 -66
  239. package/styles/components/app-shell.css +0 -46
  240. package/styles/components/avatar.css +0 -15
  241. package/styles/components/badge.css +0 -83
  242. package/styles/components/breadcrumb.css +0 -35
  243. package/styles/components/button-group.css +0 -23
  244. package/styles/components/button.css +0 -107
  245. package/styles/components/calendar.css +0 -73
  246. package/styles/components/card.css +0 -58
  247. package/styles/components/checkbox.css +0 -55
  248. package/styles/components/code-block.css +0 -18
  249. package/styles/components/combobox.css +0 -75
  250. package/styles/components/command.css +0 -94
  251. package/styles/components/data-table.css +0 -142
  252. package/styles/components/dialog.css +0 -72
  253. package/styles/components/dropdown.css +0 -54
  254. package/styles/components/empty-state.css +0 -17
  255. package/styles/components/field.css +0 -27
  256. package/styles/components/filter-panel.css +0 -58
  257. package/styles/components/form.css +0 -27
  258. package/styles/components/icon.css +0 -8
  259. package/styles/components/input-group.css +0 -45
  260. package/styles/components/input.css +0 -56
  261. package/styles/components/kbd.css +0 -15
  262. package/styles/components/page-header.css +0 -52
  263. package/styles/components/pagination.css +0 -48
  264. package/styles/components/popover.css +0 -14
  265. package/styles/components/radio.css +0 -28
  266. package/styles/components/row-menu.css +0 -69
  267. package/styles/components/section-card.css +0 -49
  268. package/styles/components/select.css +0 -57
  269. package/styles/components/separator.css +0 -32
  270. package/styles/components/sheet.css +0 -70
  271. package/styles/components/sidebar.css +0 -146
  272. package/styles/components/skeleton.css +0 -32
  273. package/styles/components/spinner.css +0 -26
  274. package/styles/components/stat-card.css +0 -71
  275. package/styles/components/stepper.css +0 -63
  276. package/styles/components/switch.css +0 -45
  277. package/styles/components/tabs.css +0 -40
  278. package/styles/components/textarea.css +0 -31
  279. package/styles/components/toast.css +0 -95
  280. package/styles/components/tooltip.css +0 -53
  281. package/styles/components/topbar.css +0 -24
  282. package/styles/components/typography.css +0 -105
  283. package/styles/patterns/backdrops.css +0 -35
  284. package/styles/patterns/density.css +0 -66
  285. package/styles/patterns/focus.css +0 -38
  286. package/styles/patterns/glass.css +0 -85
  287. package/styles/patterns/high-contrast.css +0 -70
  288. package/styles/patterns/reduced-motion.css +0 -12
  289. package/styles/patterns/scrollbar.css +0 -10
  290. package/styles/reset.css +0 -89
  291. package/styles/tokens/colors.css +0 -106
  292. package/styles/tokens/motion.css +0 -33
  293. package/styles/tokens/radius.css +0 -10
  294. package/styles/tokens/shadows.css +0 -35
  295. package/styles/tokens/spacing.css +0 -19
  296. package/styles/tokens/typography.css +0 -6
  297. package/styles/tokens/z-index.css +0 -12
package/src/theme.ts CHANGED
@@ -2,12 +2,27 @@ export type Theme = "light" | "dark";
2
2
  export type Surface = "default" | "glass";
3
3
  export type Density = "compact" | "regular" | "comfy";
4
4
 
5
+ const STORAGE_KEY_THEME = "canvas-theme";
6
+ const STORAGE_KEY_SURFACE = "canvas-surface";
7
+ const STORAGE_KEY_DENSITY = "canvas-density";
8
+
9
+ function store(key: string, value: string): void {
10
+ try { localStorage.setItem(key, value); } catch {}
11
+ }
12
+
13
+ function load(key: string): string | null {
14
+ try { return localStorage.getItem(key); } catch { return null; }
15
+ }
16
+
5
17
  export function getTheme(): Theme {
18
+ const saved = load(STORAGE_KEY_THEME);
19
+ if (saved === "light" || saved === "dark") return saved;
6
20
  return document.documentElement.classList.contains("dark") ? "dark" : "light";
7
21
  }
8
22
 
9
23
  export function setTheme(theme: Theme): void {
10
24
  document.documentElement.classList.toggle("dark", theme === "dark");
25
+ store(STORAGE_KEY_THEME, theme);
11
26
  }
12
27
 
13
28
  export function toggleTheme(): Theme {
@@ -17,6 +32,8 @@ export function toggleTheme(): Theme {
17
32
  }
18
33
 
19
34
  export function getSurface(): Surface {
35
+ const saved = load(STORAGE_KEY_SURFACE);
36
+ if (saved === "default" || saved === "glass") return saved;
20
37
  return (document.documentElement.dataset.surface as Surface) ?? "default";
21
38
  }
22
39
 
@@ -26,9 +43,12 @@ export function setSurface(surface: Surface): void {
26
43
  } else {
27
44
  document.documentElement.dataset.surface = surface;
28
45
  }
46
+ store(STORAGE_KEY_SURFACE, surface);
29
47
  }
30
48
 
31
49
  export function getDensity(): Density {
50
+ const saved = load(STORAGE_KEY_DENSITY);
51
+ if (saved === "compact" || saved === "regular" || saved === "comfy") return saved;
32
52
  return (document.documentElement.dataset.density as Density) ?? "regular";
33
53
  }
34
54
 
@@ -38,4 +58,5 @@ export function setDensity(density: Density): void {
38
58
  } else {
39
59
  document.documentElement.dataset.density = density;
40
60
  }
61
+ store(STORAGE_KEY_DENSITY, density);
41
62
  }
package/styles/canvas.css CHANGED
@@ -1,72 +1,133 @@
1
- @layer canvas.reset, canvas.tokens, canvas.base, canvas.components, canvas.patterns;
1
+ @import "tailwindcss";
2
2
 
3
- /* Reset */
4
- @import "./reset.css";
3
+ /* ─────────────────────────────────────────────────────────────────────────
4
+ Canvas theme. Fresh and Tailwind-native: Canvas's own semantic tokens,
5
+ not shadcn's set and not the old v3 values. Indigo brand primary on a
6
+ zinc-neutral base, plus a five-hue chart palette and brand orb colors.
7
+ Light at :root, dark under .dark.
8
+ ───────────────────────────────────────────────────────────────────────── */
5
9
 
6
- /* Tokens */
7
- @import "./tokens/colors.css";
8
- @import "./tokens/typography.css";
9
- @import "./tokens/radius.css";
10
- @import "./tokens/spacing.css";
11
- @import "./tokens/shadows.css";
12
- @import "./tokens/z-index.css";
13
- @import "./tokens/motion.css";
10
+ /* Dark mode keys off a `.dark` class on <html>, not prefers-color-scheme. */
11
+ @custom-variant dark (&:where(.dark, .dark *));
14
12
 
15
- /* Base */
16
- @import "./base.css";
13
+ @theme {
14
+ --radius-sm: 0.25rem;
15
+ --radius-md: 0.375rem;
16
+ --radius-lg: 0.5rem;
17
+ --radius-xl: 0.75rem;
17
18
 
18
- /* Components */
19
- @import "./components/typography.css";
20
- @import "./components/button.css";
21
- @import "./components/input.css";
22
- @import "./components/card.css";
23
- @import "./components/badge.css";
24
- @import "./components/separator.css";
25
- @import "./components/icon.css";
26
- @import "./components/avatar.css";
27
- @import "./components/kbd.css";
28
- @import "./components/code-block.css";
29
- @import "./components/sidebar.css";
30
- @import "./components/topbar.css";
31
- @import "./components/app-shell.css";
32
- @import "./components/stat-card.css";
33
- @import "./components/section-card.css";
34
- @import "./components/data-table.css";
35
- @import "./components/field.css";
36
- @import "./components/page-header.css";
37
- @import "./components/empty-state.css";
38
- @import "./components/row-menu.css";
39
- @import "./components/tooltip.css";
40
- @import "./components/skeleton.css";
41
- @import "./components/spinner.css";
42
- @import "./components/checkbox.css";
43
- @import "./components/radio.css";
44
- @import "./components/switch.css";
45
- @import "./components/select.css";
46
- @import "./components/textarea.css";
47
- @import "./components/combobox.css";
48
- @import "./components/alert.css";
49
- @import "./components/toast.css";
50
- @import "./components/dialog.css";
51
- @import "./components/sheet.css";
52
- @import "./components/popover.css";
53
- @import "./components/dropdown.css";
54
- @import "./components/breadcrumb.css";
55
- @import "./components/pagination.css";
56
- @import "./components/tabs.css";
57
- @import "./components/button-group.css";
58
- @import "./components/form.css";
59
- @import "./components/input-group.css";
60
- @import "./components/command.css";
61
- @import "./components/stepper.css";
62
- @import "./components/calendar.css";
63
- @import "./components/filter-panel.css";
19
+ /* Geist Sans / Geist Mono are the Canvas faces; consumers self-host them
20
+ (the docs do, in fonts.css). Falls back to the system UI font otherwise. */
21
+ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
22
+ "Helvetica Neue", Arial, sans-serif;
23
+ --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas,
24
+ monospace;
25
+ }
64
26
 
65
- /* Patterns */
66
- @import "./patterns/backdrops.css";
67
- @import "./patterns/glass.css";
68
- @import "./patterns/density.css";
69
- @import "./patterns/focus.css";
70
- @import "./patterns/scrollbar.css";
71
- @import "./patterns/reduced-motion.css";
72
- @import "./patterns/high-contrast.css";
27
+ /* Map the semantic tokens into Tailwind so they generate utilities:
28
+ bg-primary, text-muted-foreground, border-border, ring-ring, and so on. */
29
+ @theme inline {
30
+ --color-background: var(--background);
31
+ --color-foreground: var(--foreground);
32
+ --color-card: var(--card);
33
+ --color-card-foreground: var(--card-foreground);
34
+ --color-popover: var(--popover);
35
+ --color-popover-foreground: var(--popover-foreground);
36
+ --color-primary: var(--primary);
37
+ --color-primary-foreground: var(--primary-foreground);
38
+ --color-secondary: var(--secondary);
39
+ --color-secondary-foreground: var(--secondary-foreground);
40
+ --color-muted: var(--muted);
41
+ --color-muted-foreground: var(--muted-foreground);
42
+ --color-accent: var(--accent);
43
+ --color-accent-foreground: var(--accent-foreground);
44
+ --color-destructive: var(--destructive);
45
+ --color-destructive-foreground: var(--destructive-foreground);
46
+ --color-border: var(--border);
47
+ --color-input: var(--input);
48
+ --color-ring: var(--ring);
49
+ --color-chart-1: var(--chart-1);
50
+ --color-chart-2: var(--chart-2);
51
+ --color-chart-3: var(--chart-3);
52
+ --color-chart-4: var(--chart-4);
53
+ --color-chart-5: var(--chart-5);
54
+ }
55
+
56
+ /* Light */
57
+ :root {
58
+ --background: oklch(1 0 0);
59
+ --foreground: oklch(0.141 0.005 285.823);
60
+ --card: oklch(1 0 0);
61
+ --card-foreground: oklch(0.141 0.005 285.823);
62
+ --popover: oklch(1 0 0);
63
+ --popover-foreground: oklch(0.141 0.005 285.823);
64
+ --primary: oklch(0.511 0.262 276.966);
65
+ --primary-foreground: oklch(0.985 0 0);
66
+ --secondary: oklch(0.967 0.001 286.375);
67
+ --secondary-foreground: oklch(0.21 0.006 285.885);
68
+ --muted: oklch(0.967 0.001 286.375);
69
+ --muted-foreground: oklch(0.552 0.016 285.938);
70
+ --accent: oklch(0.967 0.001 286.375);
71
+ --accent-foreground: oklch(0.21 0.006 285.885);
72
+ --destructive: oklch(0.577 0.245 27.325);
73
+ --destructive-foreground: oklch(0.985 0 0);
74
+ --border: oklch(0.92 0.004 286.32);
75
+ --input: oklch(0.92 0.004 286.32);
76
+ --ring: oklch(0.585 0.233 277.117);
77
+
78
+ /* Data-viz palette: five distinct hues tuned for small marks. */
79
+ --chart-1: hsl(12 76% 61%);
80
+ --chart-2: hsl(173 58% 39%);
81
+ --chart-3: hsl(197 37% 24%);
82
+ --chart-4: hsl(43 74% 66%);
83
+ --chart-5: hsl(27 87% 67%);
84
+
85
+ /* Brand constants (do not flip with theme): avatar gradient, sign-in orbs. */
86
+ --orb-indigo: #6366f1;
87
+ --orb-violet: #8b5cf6;
88
+ --orb-cyan: #06b6d4;
89
+ }
90
+
91
+ /* Dark */
92
+ .dark {
93
+ --background: oklch(0.141 0.005 285.823);
94
+ --foreground: oklch(0.985 0 0);
95
+ --card: oklch(0.21 0.006 285.885);
96
+ --card-foreground: oklch(0.985 0 0);
97
+ --popover: oklch(0.21 0.006 285.885);
98
+ --popover-foreground: oklch(0.985 0 0);
99
+ --primary: oklch(0.585 0.233 277.117);
100
+ --primary-foreground: oklch(0.985 0 0);
101
+ --secondary: oklch(0.274 0.006 286.033);
102
+ --secondary-foreground: oklch(0.985 0 0);
103
+ --muted: oklch(0.274 0.006 286.033);
104
+ --muted-foreground: oklch(0.705 0.015 286.067);
105
+ --accent: oklch(0.274 0.006 286.033);
106
+ --accent-foreground: oklch(0.985 0 0);
107
+ --destructive: oklch(0.704 0.191 22.216);
108
+ --destructive-foreground: oklch(0.985 0 0);
109
+ --border: oklch(0.274 0.006 286.033);
110
+ --input: oklch(0.274 0.006 286.033);
111
+ --ring: oklch(0.585 0.233 277.117);
112
+
113
+ /* Data-viz palette: dark-mode set is independently chosen, not lightness-flipped. */
114
+ --chart-1: hsl(220 70% 50%);
115
+ --chart-2: hsl(160 60% 45%);
116
+ --chart-3: hsl(30 80% 55%);
117
+ --chart-4: hsl(280 65% 60%);
118
+ --chart-5: hsl(340 75% 55%);
119
+ }
120
+
121
+ @layer base {
122
+ *,
123
+ ::after,
124
+ ::before {
125
+ border-color: var(--color-border);
126
+ }
127
+ body {
128
+ background-color: var(--color-background);
129
+ color: var(--color-foreground);
130
+ font-family: var(--font-sans);
131
+ -webkit-font-smoothing: antialiased;
132
+ }
133
+ }
package/tsconfig.json CHANGED
@@ -1,6 +1,8 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "target": "ES2020",
4
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
5
+ "jsx": "react-jsx",
4
6
  "module": "ESNext",
5
7
  "moduleResolution": "bundler",
6
8
  "strict": true,
@@ -17,6 +19,6 @@
17
19
  "@/*": ["./src/*"]
18
20
  }
19
21
  },
20
- "include": ["src/**/*.ts"],
21
- "exclude": ["node_modules", "dist"]
22
+ "include": ["src/**/*.ts", "src/**/*.tsx"],
23
+ "exclude": ["node_modules", "dist", "src/**/*.test.ts", "test"]
22
24
  }
package/src/cn.ts DELETED
@@ -1,3 +0,0 @@
1
- export function cn(...inputs: (string | false | null | undefined)[]): string {
2
- return inputs.filter(Boolean).join(" ");
3
- }
package/styles/base.css DELETED
@@ -1,17 +0,0 @@
1
- @layer canvas.base {
2
- *,
3
- ::after,
4
- ::before {
5
- border-color: hsl(var(--border));
6
- }
7
-
8
- body {
9
- font-family: var(--font-sans);
10
- color: hsl(var(--foreground));
11
- background-color: hsl(var(--background));
12
- }
13
-
14
- code, pre, kbd {
15
- font-family: var(--font-mono);
16
- }
17
- }
package/styles/components/alert.css DELETED
@@ -1,66 +0,0 @@
1
- @layer canvas.components {
2
- .alert {
3
- display: flex;
4
- gap: 0.75rem;
5
- padding: 1rem;
6
- border: 1px solid hsl(var(--border));
7
- border-radius: var(--radius-lg, 8px);
8
- font-size: 0.875rem;
9
- line-height: 1.25rem;
10
- }
11
-
12
- .alert-title {
13
- font-weight: 600;
14
- margin-bottom: 0.25rem;
15
- }
16
-
17
- .alert-desc {
18
- font-size: 0.8125rem;
19
- line-height: 1.25rem;
20
- color: hsl(var(--muted-foreground));
21
- }
22
-
23
- .alert-default {
24
- border-color: hsl(var(--border));
25
- background-color: hsl(var(--card));
26
- }
27
-
28
- .alert-destructive {
29
- border-color: hsl(var(--destructive) / 0.5);
30
- color: hsl(var(--destructive));
31
- }
32
-
33
- .alert-destructive .alert-title {
34
- color: hsl(var(--destructive));
35
- }
36
-
37
- .alert-warning {
38
- border-color: hsl(var(--warning-fg) / 0.3);
39
- background-color: hsl(var(--warning-bg));
40
- color: hsl(var(--warning-fg));
41
- }
42
-
43
- .alert-warning .alert-title {
44
- color: hsl(var(--warning-fg));
45
- }
46
-
47
- .alert-success {
48
- border-color: hsl(var(--success-fg) / 0.3);
49
- background-color: hsl(var(--success-bg));
50
- color: hsl(var(--success-fg));
51
- }
52
-
53
- .alert-success .alert-title {
54
- color: hsl(var(--success-fg));
55
- }
56
-
57
- .alert-info {
58
- border-color: hsl(var(--info-fg) / 0.3);
59
- background-color: hsl(var(--info-bg));
60
- color: hsl(var(--info-fg));
61
- }
62
-
63
- .alert-info .alert-title {
64
- color: hsl(var(--info-fg));
65
- }
66
- }
package/styles/components/app-shell.css DELETED
@@ -1,46 +0,0 @@
1
- @layer canvas.components {
2
- .app-shell {
3
- min-height: 100vh;
4
- background-color: hsl(var(--background));
5
- }
6
-
7
- .app-main {
8
- display: flex;
9
- flex-direction: column;
10
- min-height: 100vh;
11
- transition-property: margin-left;
12
- transition-duration: 200ms;
13
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
14
- margin-left: 0;
15
- }
16
-
17
- @media (min-width: 1024px) {
18
- .app-main.collapsed {
19
- margin-left: 3.5rem;
20
- }
21
-
22
- .app-main.expanded {
23
- margin-left: 15rem;
24
- }
25
- }
26
-
27
- .app-content {
28
- flex: 1 1 0%;
29
- width: 100%;
30
- max-width: 1400px;
31
- margin-left: auto;
32
- margin-right: auto;
33
- padding-left: 1rem;
34
- padding-right: 1rem;
35
- padding-top: 1rem;
36
- padding-bottom: 3rem;
37
- }
38
-
39
- @media (min-width: 640px) {
40
- .app-content {
41
- padding-left: 1.75rem;
42
- padding-right: 1.75rem;
43
- padding-top: 1.5rem;
44
- }
45
- }
46
- }
package/styles/components/avatar.css DELETED
@@ -1,15 +0,0 @@
1
- @layer canvas.components {
2
- .avatar {
3
- display: inline-flex;
4
- align-items: center;
5
- justify-content: center;
6
- width: 1.75rem;
7
- height: 1.75rem;
8
- border-radius: 9999px;
9
- color: #fff;
10
- font-size: 11px;
11
- font-weight: 600;
12
- flex-shrink: 0;
13
- background: linear-gradient(135deg, var(--orb-indigo), var(--orb-violet));
14
- }
15
- }
package/styles/components/badge.css DELETED
@@ -1,83 +0,0 @@
1
- @layer canvas.components {
2
- .badge {
3
- display: inline-flex;
4
- align-items: center;
5
- padding-left: 0.625rem;
6
- padding-right: 0.625rem;
7
- padding-top: 0.125rem;
8
- padding-bottom: 0.125rem;
9
- border-radius: var(--radius-md, 6px);
10
- font-size: 0.75rem;
11
- line-height: 1.4;
12
- font-weight: 600;
13
- border-width: 1px;
14
- border-style: solid;
15
- border-color: transparent;
16
- }
17
-
18
- .badge-default {
19
- background-color: hsl(var(--primary));
20
- color: hsl(var(--primary-foreground));
21
- }
22
-
23
- .badge-secondary {
24
- background-color: hsl(var(--secondary));
25
- color: hsl(var(--secondary-foreground));
26
- }
27
-
28
- .badge-outline {
29
- color: hsl(var(--foreground));
30
- border-color: hsl(var(--border));
31
- }
32
-
33
- .badge-destructive {
34
- background-color: hsl(var(--destructive));
35
- color: hsl(var(--destructive-foreground));
36
- }
37
-
38
- .status-badge {
39
- display: inline-flex;
40
- align-items: center;
41
- gap: 0.375rem;
42
- padding-left: 0.625rem;
43
- padding-right: 0.625rem;
44
- padding-top: 0.125rem;
45
- padding-bottom: 0.125rem;
46
- border-radius: 9999px;
47
- font-size: 0.75rem;
48
- line-height: 1.4;
49
- font-weight: 500;
50
- }
51
-
52
- .status-badge .dot {
53
- width: 0.375rem;
54
- height: 0.375rem;
55
- border-radius: 9999px;
56
- background-color: currentColor;
57
- }
58
-
59
- .sb-success {
60
- background-color: hsl(var(--success-bg));
61
- color: hsl(var(--success-fg));
62
- }
63
-
64
- .sb-warning {
65
- background-color: hsl(var(--warning-bg));
66
- color: hsl(var(--warning-fg));
67
- }
68
-
69
- .sb-error {
70
- background-color: hsl(var(--error-bg));
71
- color: hsl(var(--error-fg));
72
- }
73
-
74
- .sb-info {
75
- background-color: hsl(var(--info-bg));
76
- color: hsl(var(--info-fg));
77
- }
78
-
79
- .sb-neutral {
80
- background-color: hsl(var(--muted));
81
- color: hsl(var(--muted-foreground));
82
- }
83
- }
package/styles/components/breadcrumb.css DELETED
@@ -1,35 +0,0 @@
1
- @layer canvas.components {
2
- .breadcrumb {
3
- display: flex;
4
- align-items: center;
5
- gap: 0.375rem;
6
- font-size: 0.875rem;
7
- line-height: 1.25rem;
8
- }
9
-
10
- .breadcrumb-item {
11
- color: hsl(var(--muted-foreground));
12
- }
13
-
14
- .breadcrumb-item a {
15
- color: inherit;
16
- text-decoration: none;
17
- }
18
-
19
- .breadcrumb-item a:hover {
20
- color: hsl(var(--foreground));
21
- text-decoration: underline;
22
- text-underline-offset: 4px;
23
- }
24
-
25
- .breadcrumb-item.active {
26
- color: hsl(var(--foreground));
27
- font-weight: 500;
28
- }
29
-
30
- .breadcrumb-sep {
31
- color: hsl(var(--muted-foreground));
32
- display: flex;
33
- align-items: center;
34
- }
35
- }
package/styles/components/button-group.css DELETED
@@ -1,23 +0,0 @@
1
- @layer canvas.components {
2
- .btn-group {
3
- display: inline-flex;
4
- }
5
-
6
- .btn-group > .btn {
7
- border-radius: 0;
8
- }
9
-
10
- .btn-group > .btn:first-child {
11
- border-top-left-radius: var(--radius-md, 6px);
12
- border-bottom-left-radius: var(--radius-md, 6px);
13
- }
14
-
15
- .btn-group > .btn:last-child {
16
- border-top-right-radius: var(--radius-md, 6px);
17
- border-bottom-right-radius: var(--radius-md, 6px);
18
- }
19
-
20
- .btn-group > .btn + .btn {
21
- margin-left: -1px;
22
- }
23
- }
package/styles/components/button.css DELETED
@@ -1,107 +0,0 @@
1
- @layer canvas.components {
2
- .btn {
3
- display: inline-flex;
4
- align-items: center;
5
- justify-content: center;
6
- gap: 0.5rem;
7
- white-space: nowrap;
8
- font-size: 0.875rem;
9
- line-height: 1.25rem;
10
- font-weight: 500;
11
- border-radius: var(--radius-md, 6px);
12
- border-width: 1px;
13
- border-style: solid;
14
- border-color: transparent;
15
- cursor: pointer;
16
- height: 2.25rem;
17
- padding-left: 1rem;
18
- padding-right: 1rem;
19
- font-family: var(--font-sans);
20
- text-decoration: none;
21
- transition-property: color, background-color, border-color,
22
- text-decoration-color, fill, stroke;
23
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
24
- transition-duration: 150ms;
25
- }
26
-
27
- .btn:focus-visible {
28
- outline: 2px solid hsl(var(--ring));
29
- outline-offset: 2px;
30
- }
31
-
32
- .btn:disabled {
33
- opacity: 0.5;
34
- pointer-events: none;
35
- }
36
-
37
- .btn-default {
38
- background-color: hsl(var(--primary));
39
- color: hsl(var(--primary-foreground));
40
- box-shadow: var(--shadow-xs);
41
- }
42
-
43
- .btn-default:hover {
44
- background-color: hsl(var(--primary) / 0.9);
45
- }
46
-
47
- .btn-outline {
48
- background-color: hsl(var(--background));
49
- color: hsl(var(--foreground));
50
- border-color: hsl(var(--input));
51
- box-shadow: var(--shadow-xs);
52
- }
53
-
54
- .btn-outline:hover {
55
- background-color: hsl(var(--accent));
56
- }
57
-
58
- .btn-secondary {
59
- background-color: hsl(var(--secondary));
60
- color: hsl(var(--secondary-foreground));
61
- box-shadow: var(--shadow-xs);
62
- }
63
-
64
- .btn-ghost {
65
- background-color: transparent;
66
- color: hsl(var(--foreground));
67
- }
68
-
69
- .btn-ghost:hover {
70
- background-color: hsl(var(--accent));
71
- }
72
-
73
- .btn-destructive {
74
- background-color: hsl(var(--destructive));
75
- color: hsl(var(--destructive-foreground));
76
- box-shadow: var(--shadow-xs);
77
- }
78
-
79
- .btn-link {
80
- background-color: transparent;
81
- color: hsl(var(--primary));
82
- height: auto;
83
- padding: 0;
84
- text-decoration-line: underline;
85
- text-underline-offset: 4px;
86
- }
87
-
88
- .btn-sm {
89
- height: 2rem;
90
- padding-left: 0.75rem;
91
- padding-right: 0.75rem;
92
- font-size: 0.75rem;
93
- line-height: 1rem;
94
- }
95
-
96
- .btn-lg {
97
- height: 2.5rem;
98
- padding-left: 2rem;
99
- padding-right: 2rem;
100
- }
101
-
102
- .btn-icon {
103
- width: 2.25rem;
104
- height: 2.25rem;
105
- padding: 0;
106
- }
107
- }