@squadbase/vantage 0.6.2-dev1.42c4e48 → 0.6.2-dev1.83509f7
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.
- package/dist/{build-MFWRPYKW.js → build-X5NVCQKT.js} +4 -4
- package/dist/{build-MFWRPYKW.js.map → build-X5NVCQKT.js.map} +1 -1
- package/dist/{chunk-IBGOCWJB.js → chunk-2ICNHUG6.js} +186 -82
- package/dist/chunk-2ICNHUG6.js.map +1 -0
- package/dist/{chunk-5ZOP4SQR.js → chunk-2N72FKLB.js} +12 -7
- package/dist/chunk-2N72FKLB.js.map +1 -0
- package/dist/{chunk-OB6UBJXF.js → chunk-7S52M2SL.js} +127 -36
- package/dist/chunk-7S52M2SL.js.map +1 -0
- package/dist/chunk-MYHFZYS4.js +8005 -0
- package/dist/chunk-MYHFZYS4.js.map +1 -0
- package/dist/{chunk-PXRX5PEC.js → chunk-PDOBHMUQ.js} +3 -3
- package/dist/chunk-PDOBHMUQ.js.map +1 -0
- package/dist/{chunk-A2UUGASH.js → chunk-U736PVHY.js} +2 -2
- package/dist/chunk-U736PVHY.js.map +1 -0
- package/dist/{chunk-QEWCYW3I.js → chunk-WAMZWZJB.js} +13 -3
- package/dist/chunk-WAMZWZJB.js.map +1 -0
- package/dist/cli.js +3 -3
- package/dist/components/index.d.ts +1832 -100
- package/dist/components/index.js +4 -4
- package/dist/{dev-DCTOHQ6W.js → dev-4XEDTELV.js} +4 -4
- package/dist/{dev-DCTOHQ6W.js.map → dev-4XEDTELV.js.map} +1 -1
- package/dist/doc/index.js +2 -2
- package/dist/doc/index.js.map +1 -1
- package/dist/markdown/index.js +1 -1
- package/dist/markdown/index.js.map +1 -1
- package/dist/slide/index.js +2 -2
- package/dist/slide/index.js.map +1 -1
- package/dist/table/index.js +6 -6
- package/dist/table/index.js.map +1 -1
- package/dist/ui/index.d.ts +8 -2
- package/dist/ui/index.js +22 -112
- package/dist/ui/index.js.map +1 -1
- package/dist/{upgrade-DBBE6GIR.js → upgrade-JHXZBGQS.js} +3 -3
- package/dist/{upgrade-DBBE6GIR.js.map → upgrade-JHXZBGQS.js.map} +1 -1
- package/dist/vite/index.js +2 -2
- package/docs/en/components.md +29 -15
- package/docs/en/parts/data-table.md +22 -0
- package/docs/en/parts/delta.md +50 -0
- package/docs/en/parts/format.md +43 -0
- package/docs/en/parts/kpi-card.md +57 -0
- package/docs/en/parts/metric-value.md +3 -2
- package/docs/en/parts/sparkline.md +1 -1
- package/docs/en/parts/trend-indicator.md +17 -1
- package/docs/en/ui-and-theming.md +1 -1
- package/docs/index.json +92 -32
- package/docs/ja/components.md +27 -15
- package/docs/ja/parts/data-table.md +22 -0
- package/docs/ja/parts/delta.md +50 -0
- package/docs/ja/parts/format.md +44 -0
- package/docs/ja/parts/kpi-card.md +55 -0
- package/docs/ja/parts/metric-value.md +3 -2
- package/docs/ja/parts/sparkline.md +1 -1
- package/docs/ja/parts/trend-indicator.md +17 -1
- package/docs/ja/ui-and-theming.md +2 -2
- package/package.json +26 -24
- package/registry/ui/accordion.tsx +4 -2
- package/registry/ui/alert-dialog.tsx +3 -3
- package/registry/ui/alert.tsx +3 -1
- package/registry/ui/app-shell.tsx +7 -1
- package/registry/ui/area-chart.tsx +2852 -166
- package/registry/ui/attention-list.tsx +303 -0
- package/registry/ui/avatar.tsx +1 -1
- package/registry/ui/badge.tsx +3 -1
- package/registry/ui/bar-chart.tsx +2851 -166
- package/registry/ui/bar-list.tsx +3531 -90
- package/registry/ui/box-plot-chart.tsx +3906 -0
- package/registry/ui/breadcrumb.tsx +3 -1
- package/registry/ui/button.tsx +3 -1
- package/registry/ui/calendar.tsx +3 -1
- package/registry/ui/card.tsx +4 -2
- package/registry/ui/category-bar.tsx +1025 -16
- package/registry/ui/chart-frame.tsx +1393 -0
- package/registry/ui/checkbox.tsx +3 -1
- package/registry/ui/collapsible.tsx +3 -1
- package/registry/ui/combobox.tsx +2 -2
- package/registry/ui/command.tsx +3 -1
- package/registry/ui/dashboard-card.tsx +71 -28
- package/registry/ui/data-table.tsx +678 -56
- package/registry/ui/date-range-picker.tsx +245 -64
- package/registry/ui/delta.tsx +188 -0
- package/registry/ui/dialog.tsx +5 -3
- package/registry/ui/donut-chart.tsx +2929 -182
- package/registry/ui/drawer.tsx +1 -1
- package/registry/ui/dropdown-menu.tsx +5 -3
- package/registry/ui/echart.tsx +621 -67
- package/registry/ui/field.tsx +1 -1
- package/registry/ui/filter-bar.tsx +33 -6
- package/registry/ui/funnel-steps.tsx +3344 -49
- package/registry/ui/heatmap.tsx +1786 -0
- package/registry/ui/histogram-chart.tsx +3986 -0
- package/registry/ui/hover-card.tsx +2 -2
- package/registry/ui/input-group.tsx +3 -1
- package/registry/ui/input.tsx +3 -1
- package/registry/ui/kbd.tsx +3 -1
- package/registry/ui/kpi-card.tsx +699 -0
- package/registry/ui/label.tsx +3 -1
- package/registry/ui/legend.tsx +3563 -0
- package/registry/ui/line-chart.tsx +2852 -160
- package/registry/ui/metric-value.tsx +9 -1
- package/registry/ui/multi-select.tsx +11 -5
- package/registry/ui/page-shell.tsx +106 -51
- package/registry/ui/pagination.tsx +3 -1
- package/registry/ui/paired-chart.tsx +3827 -0
- package/registry/ui/placeholder.tsx +8 -2
- package/registry/ui/popover.tsx +4 -2
- package/registry/ui/progress-circle.tsx +607 -12
- package/registry/ui/progress.tsx +3 -1
- package/registry/ui/radio-group.tsx +1 -1
- package/registry/ui/sample-data.tsx +86 -0
- package/registry/ui/scatter-chart.tsx +4212 -0
- package/registry/ui/scroll-area.tsx +3 -2
- package/registry/ui/searchable-select.tsx +8 -3
- package/registry/ui/section-header.tsx +5 -3
- package/registry/ui/segmented-control.tsx +7 -2
- package/registry/ui/select.tsx +4 -2
- package/registry/ui/separator.tsx +3 -1
- package/registry/ui/sheet.tsx +4 -2
- package/registry/ui/sidebar.tsx +4 -2
- package/registry/ui/skeleton.tsx +4 -2
- package/registry/ui/slider.tsx +4 -2
- package/registry/ui/sparkline.tsx +84 -9
- package/registry/ui/spinner.tsx +3 -1
- package/registry/ui/states.tsx +34 -5
- package/registry/ui/status-badge.tsx +83 -41
- package/registry/ui/switch.tsx +3 -1
- package/registry/ui/table.tsx +4 -2
- package/registry/ui/tabs.tsx +5 -3
- package/registry/ui/textarea.tsx +3 -1
- package/registry/ui/toast.tsx +2 -2
- package/registry/ui/toggle-group.tsx +3 -1
- package/registry/ui/toggle.tsx +3 -1
- package/registry/ui/tooltip.tsx +10 -4
- package/registry/ui/tracker.tsx +632 -19
- package/registry/ui/trend-indicator.tsx +15 -3
- package/registry/ui/updated-at.tsx +122 -0
- package/registry/ui/waterfall-chart.tsx +4248 -0
- package/skills/vantage-design/SKILL.md +34 -24
- package/skills/vantage-design/references/extract.md +16 -14
- package/skills/vantage-design/references/format.md +6 -5
- package/skills/vantage-design/references/presets.md +60 -110
- package/templates/AGENTS.md +13 -1
- package/templates/agents/page.md +10 -0
- package/theme.css +244 -149
- package/dist/chunk-5ZOP4SQR.js.map +0 -1
- package/dist/chunk-A2UUGASH.js.map +0 -1
- package/dist/chunk-AG6RZ2RR.js +0 -3208
- package/dist/chunk-AG6RZ2RR.js.map +0 -1
- package/dist/chunk-IBGOCWJB.js.map +0 -1
- package/dist/chunk-OB6UBJXF.js.map +0 -1
- package/dist/chunk-PXRX5PEC.js.map +0 -1
- package/dist/chunk-QEWCYW3I.js.map +0 -1
package/theme.css
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/* GENERATED by scripts/gen-theme.mjs — do not edit. Sources:
|
|
2
|
+
* packages/squadkit/registry/theme/theme.css (UI part tokens)
|
|
3
|
+
* packages/vantage/src/theme/framework.css (slide / document styles) */
|
|
4
|
+
|
|
1
5
|
/**
|
|
2
6
|
* Vantage design tokens. Imported after `@import "tailwindcss"` by the
|
|
3
7
|
* generated runtime.css. Defines CSS variables (light + dark), maps them to
|
|
@@ -18,123 +22,154 @@
|
|
|
18
22
|
`<select>` popup. */
|
|
19
23
|
color-scheme: light;
|
|
20
24
|
|
|
21
|
-
--background: oklch(
|
|
22
|
-
--foreground: oklch(0.
|
|
25
|
+
--background: oklch(0.975 0.004 255);
|
|
26
|
+
--foreground: oklch(0.21 0.02 260);
|
|
23
27
|
--card: oklch(1 0 0);
|
|
24
|
-
--card-foreground: oklch(0.
|
|
28
|
+
--card-foreground: oklch(0.21 0.02 260);
|
|
25
29
|
--popover: oklch(1 0 0);
|
|
26
|
-
--popover-foreground: oklch(0.
|
|
27
|
-
--primary: oklch(0.
|
|
30
|
+
--popover-foreground: oklch(0.21 0.02 260);
|
|
31
|
+
--primary: oklch(0.55 0.2 262);
|
|
28
32
|
--primary-foreground: oklch(0.985 0 0);
|
|
29
|
-
--secondary: oklch(0.
|
|
30
|
-
--secondary-foreground: oklch(0.
|
|
31
|
-
--muted: oklch(0.
|
|
32
|
-
--muted-foreground: oklch(0.
|
|
33
|
-
--accent: oklch(0.
|
|
34
|
-
--accent-foreground: oklch(0.
|
|
35
|
-
--destructive: oklch(0.
|
|
33
|
+
--secondary: oklch(0.965 0.005 255);
|
|
34
|
+
--secondary-foreground: oklch(0.25 0.02 260);
|
|
35
|
+
--muted: oklch(0.965 0.005 255);
|
|
36
|
+
--muted-foreground: oklch(0.5 0.02 258);
|
|
37
|
+
--accent: oklch(0.955 0.01 255);
|
|
38
|
+
--accent-foreground: oklch(0.25 0.02 260);
|
|
39
|
+
--destructive: oklch(0.53 0.21 27.325);
|
|
36
40
|
--destructive-foreground: oklch(0.985 0 0);
|
|
37
|
-
--border: oklch(0.
|
|
38
|
-
--input: oklch(0.
|
|
39
|
-
--ring: oklch(0.
|
|
40
|
-
--radius: 0.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
--
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
These are aliases, not values. Custom properties resolve lazily, so
|
|
59
|
-
pointing them at the tokens above is enough for a deck to follow `.dark`
|
|
60
|
-
and `[data-theme="dark"]` on its own — restating them in the dark block
|
|
61
|
-
below would create two places to keep in step for no gain. A deck
|
|
62
|
-
overrides any of them inline through `<SlideDeck theme>`. */
|
|
63
|
-
--slide-bg: var(--background);
|
|
64
|
-
--slide-fg: var(--foreground);
|
|
65
|
-
--slide-accent: var(--primary);
|
|
66
|
-
--slide-muted: var(--muted-foreground);
|
|
67
|
-
--slide-radius: var(--radius);
|
|
68
|
-
/* A system stack that includes Japanese. The pptx export rasterises through
|
|
69
|
-
an SVG `foreignObject`, where locally installed families resolve by name
|
|
70
|
-
but webfonts must be inlined — so a system default is what makes the
|
|
71
|
-
common path export correctly with nothing embedded. */
|
|
72
|
-
--slide-font-display:
|
|
73
|
-
system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo,
|
|
41
|
+
--border: oklch(0.93 0.006 255);
|
|
42
|
+
--input: oklch(0.9 0.01 255);
|
|
43
|
+
--ring: oklch(0.7 0.12 262);
|
|
44
|
+
--radius: 0.5rem;
|
|
45
|
+
|
|
46
|
+
/* Card elevation: a hairline-soft shadow in light, none in dark (the border does the work there). */
|
|
47
|
+
--shadow-card: 0 1px 2px 0 oklch(0.2 0.02 260 / 0.06);
|
|
48
|
+
|
|
49
|
+
/* Body typeface: a system stack only (no web font is shipped). Presets may swap
|
|
50
|
+
it; `@theme inline` below points `font-sans` at this variable, so overriding
|
|
51
|
+
the variable also moves the utility (and the `html` rule in `@layer base`).
|
|
52
|
+
Latin system faces carry no kana/kanji, so without Japanese families here the
|
|
53
|
+
browser picks a per-locale fallback (lang="en" -> e.g. thin "Yu Gothic" Regular
|
|
54
|
+
on Windows, or a face without a 500 weight on macOS) and kana render thin.
|
|
55
|
+
List the Japanese system faces explicitly, after the Latin ones, and keep
|
|
56
|
+
`ui-sans-serif` / `system-ui` behind them: on Japanese Windows both resolve to
|
|
57
|
+
the menu font, Yu Gothic UI, which is condensed (made to avoid UI resizing)
|
|
58
|
+
and has kana, so it would take the kana before Meiryo is ever reached.
|
|
59
|
+
`-apple-system` is Safari/Firefox; Chrome on macOS needs `BlinkMacSystemFont`. */
|
|
60
|
+
--font-sans:
|
|
61
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui,
|
|
74
62
|
sans-serif;
|
|
75
|
-
--slide-font-body: var(--slide-font-display);
|
|
76
|
-
/* Canvas pixels, on the 1920x1080 canvas — not rem: a slide is scaled as a
|
|
77
|
-
whole, so its type must not also follow the browser's root font size. */
|
|
78
|
-
--slide-size-hero: 168px;
|
|
79
|
-
--slide-size-body: 36px;
|
|
80
63
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
--
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
--
|
|
89
|
-
--
|
|
90
|
-
--
|
|
91
|
-
--
|
|
92
|
-
--
|
|
93
|
-
--
|
|
94
|
-
--
|
|
95
|
-
--
|
|
64
|
+
--chart-1: oklch(0.55 0.2 262);
|
|
65
|
+
--chart-2: oklch(0.62 0.17 118);
|
|
66
|
+
--chart-3: oklch(0.5 0.19 352);
|
|
67
|
+
--chart-4: oklch(0.62 0.1 195);
|
|
68
|
+
--chart-5: oklch(0.44 0.18 300);
|
|
69
|
+
|
|
70
|
+
/* Semantic status tokens — see the contract above the `@theme inline` block. */
|
|
71
|
+
--positive: oklch(0.52 0.14 150);
|
|
72
|
+
--positive-subtle: oklch(0.96 0.04 150);
|
|
73
|
+
--negative: oklch(0.53 0.19 25);
|
|
74
|
+
--negative-subtle: oklch(0.96 0.03 25);
|
|
75
|
+
--warning: oklch(0.53 0.12 70);
|
|
76
|
+
--warning-subtle: oklch(0.96 0.05 85);
|
|
77
|
+
--info: oklch(0.52 0.16 255);
|
|
78
|
+
--info-subtle: oklch(0.96 0.03 250);
|
|
79
|
+
--positive-fill: oklch(0.62 0.15 150);
|
|
80
|
+
--negative-fill: oklch(0.62 0.17 25);
|
|
81
|
+
--warning-fill: oklch(0.79 0.16 82);
|
|
82
|
+
--info-fill: oklch(0.62 0.15 250);
|
|
83
|
+
--neutral-fill: oklch(0.62 0 0);
|
|
84
|
+
--neutral: oklch(0.52 0 0);
|
|
85
|
+
--neutral-subtle: oklch(0.96 0 0);
|
|
86
|
+
|
|
87
|
+
--sidebar: oklch(0.985 0.003 255);
|
|
88
|
+
--sidebar-foreground: oklch(0.21 0.02 260);
|
|
89
|
+
--sidebar-primary: oklch(0.55 0.2 262);
|
|
90
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
91
|
+
--sidebar-accent: oklch(0.955 0.01 255);
|
|
92
|
+
--sidebar-accent-foreground: oklch(0.25 0.02 260);
|
|
93
|
+
--sidebar-border: oklch(0.915 0.008 255);
|
|
94
|
+
--sidebar-ring: oklch(0.7 0.12 262);
|
|
96
95
|
}
|
|
97
96
|
|
|
98
97
|
.dark,
|
|
99
98
|
[data-theme="dark"] {
|
|
100
99
|
color-scheme: dark;
|
|
101
100
|
|
|
102
|
-
--
|
|
103
|
-
|
|
104
|
-
--
|
|
105
|
-
--
|
|
106
|
-
--
|
|
107
|
-
--
|
|
108
|
-
--
|
|
109
|
-
--
|
|
110
|
-
--
|
|
111
|
-
--
|
|
112
|
-
--
|
|
113
|
-
--
|
|
114
|
-
--
|
|
115
|
-
--
|
|
101
|
+
--shadow-card: none;
|
|
102
|
+
|
|
103
|
+
--background: oklch(0.16 0.012 262);
|
|
104
|
+
--foreground: oklch(0.96 0.005 255);
|
|
105
|
+
--card: oklch(0.215 0.015 262);
|
|
106
|
+
--card-foreground: oklch(0.96 0.005 255);
|
|
107
|
+
--popover: oklch(0.235 0.016 262);
|
|
108
|
+
--popover-foreground: oklch(0.96 0.005 255);
|
|
109
|
+
--primary: oklch(0.68 0.19 262);
|
|
110
|
+
--primary-foreground: oklch(0.145 0.02 262);
|
|
111
|
+
--secondary: oklch(0.27 0.016 262);
|
|
112
|
+
--secondary-foreground: oklch(0.96 0.005 255);
|
|
113
|
+
--muted: oklch(0.27 0.016 262);
|
|
114
|
+
--muted-foreground: oklch(0.72 0.02 258);
|
|
115
|
+
--accent: oklch(0.3 0.02 262);
|
|
116
|
+
--accent-foreground: oklch(0.96 0.005 255);
|
|
116
117
|
--destructive: oklch(0.704 0.191 22.216);
|
|
117
|
-
--destructive-foreground: oklch(0.
|
|
118
|
+
--destructive-foreground: oklch(0.145 0.02 262);
|
|
118
119
|
--border: oklch(1 0 0 / 10%);
|
|
119
120
|
--input: oklch(1 0 0 / 15%);
|
|
120
|
-
--ring: oklch(0.
|
|
121
|
-
|
|
122
|
-
--chart-1:
|
|
123
|
-
--chart-2:
|
|
124
|
-
--chart-3:
|
|
125
|
-
--chart-4:
|
|
126
|
-
--chart-5:
|
|
127
|
-
|
|
128
|
-
--
|
|
129
|
-
--
|
|
130
|
-
--
|
|
131
|
-
--
|
|
132
|
-
--
|
|
133
|
-
--
|
|
121
|
+
--ring: oklch(0.6 0.15 262);
|
|
122
|
+
|
|
123
|
+
--chart-1: oklch(0.56 0.19 262);
|
|
124
|
+
--chart-2: oklch(0.75 0.17 118);
|
|
125
|
+
--chart-3: oklch(0.64 0.19 352);
|
|
126
|
+
--chart-4: oklch(0.78 0.105 195);
|
|
127
|
+
--chart-5: oklch(0.71 0.17 300);
|
|
128
|
+
|
|
129
|
+
--positive: oklch(0.76 0.15 150);
|
|
130
|
+
--positive-subtle: oklch(0.27 0.05 150);
|
|
131
|
+
--negative: oklch(0.74 0.15 22);
|
|
132
|
+
--negative-subtle: oklch(0.27 0.06 25);
|
|
133
|
+
--warning: oklch(0.8 0.14 80);
|
|
134
|
+
--warning-subtle: oklch(0.27 0.05 75);
|
|
135
|
+
--info: oklch(0.75 0.12 250);
|
|
136
|
+
--info-subtle: oklch(0.27 0.06 255);
|
|
137
|
+
--positive-fill: oklch(0.56 0.13 150);
|
|
138
|
+
--negative-fill: oklch(0.56 0.15 22);
|
|
139
|
+
--warning-fill: oklch(0.73 0.145 78);
|
|
140
|
+
--info-fill: oklch(0.56 0.13 250);
|
|
141
|
+
--neutral-fill: oklch(0.56 0 0);
|
|
142
|
+
--neutral: oklch(0.85 0 0);
|
|
143
|
+
--neutral-subtle: oklch(0.27 0 0);
|
|
144
|
+
|
|
145
|
+
--sidebar: oklch(0.2 0.014 262);
|
|
146
|
+
--sidebar-foreground: oklch(0.96 0.005 255);
|
|
147
|
+
--sidebar-primary: oklch(0.68 0.19 262);
|
|
148
|
+
--sidebar-primary-foreground: oklch(0.145 0.02 262);
|
|
149
|
+
--sidebar-accent: oklch(0.3 0.02 262);
|
|
150
|
+
--sidebar-accent-foreground: oklch(0.96 0.005 255);
|
|
134
151
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
135
|
-
--sidebar-ring: oklch(0.
|
|
152
|
+
--sidebar-ring: oklch(0.6 0.15 262);
|
|
136
153
|
}
|
|
137
154
|
|
|
155
|
+
/* Semantic status tokens (increase/decrease/status). Every increase, decrease
|
|
156
|
+
and status colour in registry/ comes from these — never a Tailwind palette
|
|
157
|
+
colour like `green-500` (tests/raw-colors.test.ts enforces it).
|
|
158
|
+
--<tone> text colour on --background, --card and --<tone>-subtle
|
|
159
|
+
(>= 4.5:1), and dot / line / icon colour (>= 3:1).
|
|
160
|
+
--<tone>-subtle tinted background behind --<tone> text (badges, callouts).
|
|
161
|
+
--<tone>-fill (incl. --neutral-fill, the grey area) FILL colour for areas (bars, heatmap cells, tracker blocks). Not for
|
|
162
|
+
text or icons — use --<tone>. Same lightness step from the page in both
|
|
163
|
+
modes (light 0.62 / dark 0.56: ~0.36-0.40 OKLCH L away from --background,
|
|
164
|
+
>= 3:1 against --background and --card), so a fill is never strong in one
|
|
165
|
+
mode and faint in the other. Presets may tune hue and chroma within the
|
|
166
|
+
status bands while preserving contrast and fill strength (tests/theme-presets.test.ts).
|
|
167
|
+
--warning-fill is the exception: amber (light 0.79 / dark 0.73, ~#f5b324 / ~#d99a1e) is
|
|
168
|
+
a light colour by nature, so it is ~2:1 on the light page (still >= 0.18 L away)
|
|
169
|
+
and ~7-8:1 on the dark one; dark text (--foreground in light, --background in dark) sits on it at >= 4.5:1.
|
|
170
|
+
Tones: positive (green), negative (red), warning (amber), info (blue),
|
|
171
|
+
neutral (grey). Colour never carries the meaning alone — pair it with an
|
|
172
|
+
arrow or sign. `npm run contrast` prints the measured ratios. */
|
|
138
173
|
@theme inline {
|
|
139
174
|
--color-background: var(--background);
|
|
140
175
|
--color-foreground: var(--foreground);
|
|
@@ -155,6 +190,21 @@
|
|
|
155
190
|
--color-border: var(--border);
|
|
156
191
|
--color-input: var(--input);
|
|
157
192
|
--color-ring: var(--ring);
|
|
193
|
+
--color-positive: var(--positive);
|
|
194
|
+
--color-positive-subtle: var(--positive-subtle);
|
|
195
|
+
--color-negative: var(--negative);
|
|
196
|
+
--color-negative-subtle: var(--negative-subtle);
|
|
197
|
+
--color-warning: var(--warning);
|
|
198
|
+
--color-warning-subtle: var(--warning-subtle);
|
|
199
|
+
--color-info: var(--info);
|
|
200
|
+
--color-info-subtle: var(--info-subtle);
|
|
201
|
+
--color-positive-fill: var(--positive-fill);
|
|
202
|
+
--color-negative-fill: var(--negative-fill);
|
|
203
|
+
--color-warning-fill: var(--warning-fill);
|
|
204
|
+
--color-info-fill: var(--info-fill);
|
|
205
|
+
--color-neutral-fill: var(--neutral-fill);
|
|
206
|
+
--color-neutral: var(--neutral);
|
|
207
|
+
--color-neutral-subtle: var(--neutral-subtle);
|
|
158
208
|
--color-chart-1: var(--chart-1);
|
|
159
209
|
--color-chart-2: var(--chart-2);
|
|
160
210
|
--color-chart-3: var(--chart-3);
|
|
@@ -168,10 +218,7 @@
|
|
|
168
218
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
169
219
|
--color-sidebar-border: var(--sidebar-border);
|
|
170
220
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
171
|
-
--
|
|
172
|
-
--color-slide-fg: var(--slide-fg);
|
|
173
|
-
--color-slide-accent: var(--slide-accent);
|
|
174
|
-
--color-slide-muted: var(--slide-muted);
|
|
221
|
+
--font-sans: var(--font-sans);
|
|
175
222
|
--radius-sm: calc(var(--radius) - 4px);
|
|
176
223
|
--radius-md: calc(var(--radius) - 2px);
|
|
177
224
|
--radius-lg: var(--radius);
|
|
@@ -272,6 +319,100 @@
|
|
|
272
319
|
}
|
|
273
320
|
}
|
|
274
321
|
|
|
322
|
+
/* ------------------------------------------------------------ utilities */
|
|
323
|
+
|
|
324
|
+
@utility no-scrollbar {
|
|
325
|
+
-ms-overflow-style: none;
|
|
326
|
+
scrollbar-width: none;
|
|
327
|
+
|
|
328
|
+
&::-webkit-scrollbar {
|
|
329
|
+
display: none;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
/* Icons that must point the other way when the document is right-to-left. */
|
|
334
|
+
.cn-rtl-flip {
|
|
335
|
+
&:where([dir="rtl"], [dir="rtl"] *) {
|
|
336
|
+
transform: scaleX(-1);
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/* Page defaults live in `@layer base`, like shadcn's own init, so a project's
|
|
341
|
+
`html { @apply font-sans }`, its `next/font` setup and its own border rules
|
|
342
|
+
(all unlayered or later in the layer) win over them instead of losing to an
|
|
343
|
+
unlayered rule here. */
|
|
344
|
+
@layer base {
|
|
345
|
+
html {
|
|
346
|
+
font-family: var(--font-sans);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
body {
|
|
350
|
+
background-color: var(--background);
|
|
351
|
+
color: var(--foreground);
|
|
352
|
+
-webkit-font-smoothing: antialiased;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
* {
|
|
356
|
+
border-color: var(--border);
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/**
|
|
361
|
+
* Vantage framework styles: the slide / document tokens and the document
|
|
362
|
+
* typesetting. The UI parts' tokens live in SquadKit
|
|
363
|
+
* (packages/squadkit/registry/theme/theme.css); scripts/gen-theme.mjs appends
|
|
364
|
+
* this file to them to produce packages/vantage/theme.css.
|
|
365
|
+
*/
|
|
366
|
+
|
|
367
|
+
:root {
|
|
368
|
+
/* Slides (@squadbase/vantage/slide).
|
|
369
|
+
These are aliases, not values. Custom properties resolve lazily, so
|
|
370
|
+
pointing them at the tokens above is enough for a deck to follow `.dark`
|
|
371
|
+
and `[data-theme="dark"]` on its own — restating them in the dark block
|
|
372
|
+
below would create two places to keep in step for no gain. A deck
|
|
373
|
+
overrides any of them inline through `<SlideDeck theme>`. */
|
|
374
|
+
--slide-bg: var(--background);
|
|
375
|
+
--slide-fg: var(--foreground);
|
|
376
|
+
--slide-accent: var(--primary);
|
|
377
|
+
--slide-muted: var(--muted-foreground);
|
|
378
|
+
--slide-radius: var(--radius);
|
|
379
|
+
/* A system stack that includes Japanese. The pptx export rasterises through
|
|
380
|
+
an SVG `foreignObject`, where locally installed families resolve by name
|
|
381
|
+
but webfonts must be inlined — so a system default is what makes the
|
|
382
|
+
common path export correctly with nothing embedded. */
|
|
383
|
+
--slide-font-display:
|
|
384
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo,
|
|
385
|
+
system-ui, sans-serif;
|
|
386
|
+
--slide-font-body: var(--slide-font-display);
|
|
387
|
+
/* Canvas pixels, on the 1920x1080 canvas — not rem: a slide is scaled as a
|
|
388
|
+
whole, so its type must not also follow the browser's root font size. */
|
|
389
|
+
--slide-size-hero: 168px;
|
|
390
|
+
--slide-size-body: 36px;
|
|
391
|
+
|
|
392
|
+
/* Documents (@squadbase/vantage/doc). Aliases, like --slide-*: they follow
|
|
393
|
+
`.dark` through the tokens they point at, so they are not restated in the
|
|
394
|
+
dark block. A document overrides any of them inline through
|
|
395
|
+
`<Document theme>`, an app through its styles.css. */
|
|
396
|
+
--doc-fg: var(--foreground);
|
|
397
|
+
--doc-muted: var(--muted-foreground);
|
|
398
|
+
--doc-accent: var(--primary);
|
|
399
|
+
--doc-border: var(--border);
|
|
400
|
+
--doc-subtle: var(--muted);
|
|
401
|
+
--doc-font-body: inherit;
|
|
402
|
+
--doc-font-heading: var(--doc-font-body);
|
|
403
|
+
--doc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
404
|
+
--doc-size-body: 1rem;
|
|
405
|
+
--doc-line-height: 1.8;
|
|
406
|
+
--doc-max-width: 48rem;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
@theme inline {
|
|
410
|
+
--color-slide-bg: var(--slide-bg);
|
|
411
|
+
--color-slide-fg: var(--slide-fg);
|
|
412
|
+
--color-slide-accent: var(--slide-accent);
|
|
413
|
+
--color-slide-muted: var(--slide-muted);
|
|
414
|
+
}
|
|
415
|
+
|
|
275
416
|
/* ------------------------------------------------------------ documents */
|
|
276
417
|
|
|
277
418
|
/* Typesetting for `<Document>`. Plain elements inside it need no classes.
|
|
@@ -287,17 +428,6 @@
|
|
|
287
428
|
line-height: var(--doc-line-height);
|
|
288
429
|
overflow-wrap: break-word;
|
|
289
430
|
}
|
|
290
|
-
/* On screen the document sits in the app frame's unpadded `<main>`, so it
|
|
291
|
-
brings its own gutter. `content-box` keeps `--doc-max-width` the width of
|
|
292
|
-
the text: the side gutter shows only once the frame is narrower than that.
|
|
293
|
-
The bottom leaves room for the fixed "Save as PDF" button. Paper takes its
|
|
294
|
-
margin from the print rules below instead. */
|
|
295
|
-
@media screen {
|
|
296
|
-
:where([data-slot="document"]) {
|
|
297
|
-
box-sizing: content-box;
|
|
298
|
-
padding: 3rem 1.5rem 5rem;
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
431
|
:where([data-slot="document"]) :where(h1, h2, h3, h4) {
|
|
302
432
|
font-family: var(--doc-font-heading);
|
|
303
433
|
font-weight: 700;
|
|
@@ -451,38 +581,3 @@
|
|
|
451
581
|
overflow: visible;
|
|
452
582
|
}
|
|
453
583
|
}
|
|
454
|
-
|
|
455
|
-
/* ------------------------------------------------------------ utilities */
|
|
456
|
-
|
|
457
|
-
@utility no-scrollbar {
|
|
458
|
-
-ms-overflow-style: none;
|
|
459
|
-
scrollbar-width: none;
|
|
460
|
-
|
|
461
|
-
&::-webkit-scrollbar {
|
|
462
|
-
display: none;
|
|
463
|
-
}
|
|
464
|
-
}
|
|
465
|
-
|
|
466
|
-
/* Icons that must point the other way when the document is right-to-left. */
|
|
467
|
-
.cn-rtl-flip {
|
|
468
|
-
&:where([dir="rtl"], [dir="rtl"] *) {
|
|
469
|
-
transform: scaleX(-1);
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
body {
|
|
474
|
-
background-color: var(--background);
|
|
475
|
-
color: var(--foreground);
|
|
476
|
-
/* Latin system faces carry no kana/kanji, so without Japanese families here the
|
|
477
|
-
browser picks a per-locale fallback (lang="en" → e.g. thin "Yu Gothic" Regular
|
|
478
|
-
on Windows, or a face without a 500 weight on macOS) and kana render thin.
|
|
479
|
-
List the Japanese system faces explicitly, after the Latin ones. */
|
|
480
|
-
font-family:
|
|
481
|
-
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo,
|
|
482
|
-
sans-serif;
|
|
483
|
-
-webkit-font-smoothing: antialiased;
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
* {
|
|
487
|
-
border-color: var(--border);
|
|
488
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ui/states.tsx"],"names":[],"mappings":";;;;AAGO,SAAS,OAAA,CAAQ,EAAE,KAAA,GAAQ,eAAA,EAAY,WAAU,EAA2C;AACjG,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,iDAAiD,SAAS,CAAA,EAAG,IAAA,EAAK,QAAA,EAAS,WAAA,EAAU,QAAA,EACtG,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,gFAAA,EAAiF,CAAA;AAAA,IAChG;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAEO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA,GAAQ,kBAAA;AAAA,EACR,WAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,kEAAA,EAAoE,SAAS,CAAA,EAC7F,QAAA,EAAA;AAAA,IAAA,IAAA,mBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,gBAAK,CAAA,GAAS,IAAA;AAAA,oBACvE,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACjC,8BAAc,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,wCAAA,EAA0C,uBAAY,CAAA,GAAO,IAAA;AAAA,IACxF,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA,GAAA,EACnD,CAAA;AAEJ;AAEO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA,GAAQ,sBAAA;AAAA,EACR,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,8DAAA,EAAgE,SAAS,CAAA;AAAA,MACvF,IAAA,EAAK,OAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,gCAAA,EAAkC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACpD,0BAAU,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAA,EAAsC,mBAAQ,CAAA,GAAO,IAAA;AAAA,QAC5E,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,GACnD;AAEJ","file":"chunk-5ZOP4SQR.js","sourcesContent":["import type { ReactNode } from \"react\"\nimport { cn } from \"./cn\"\n\nexport function Loading({ label = \"Loading…\", className }: { label?: string; className?: string }) {\n return (\n <div className={cn(\"flex min-h-[30vh] items-center justify-center\", className)} role=\"status\" aria-live=\"polite\">\n <div className=\"flex items-center gap-3 text-sm text-muted-foreground\">\n <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n {label}\n </div>\n </div>\n )\n}\n\nexport function Empty({\n title = \"Nothing here yet\",\n description,\n icon,\n action,\n className,\n}: {\n title?: string\n description?: string\n icon?: ReactNode\n action?: ReactNode\n className?: string\n}) {\n return (\n <div className={cn(\"flex flex-col items-center justify-center gap-2 p-10 text-center\", className)}>\n {icon ? <div className=\"text-3xl text-muted-foreground\">{icon}</div> : null}\n <p className=\"font-medium\">{title}</p>\n {description ? <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p> : null}\n {action ? <div className=\"mt-2\">{action}</div> : null}\n </div>\n )\n}\n\nexport function ErrorState({\n title = \"Something went wrong\",\n message,\n action,\n className,\n}: {\n title?: string\n message?: ReactNode\n action?: ReactNode\n className?: string\n}) {\n return (\n <div\n className={cn(\"rounded-xl border border-destructive/30 bg-destructive/5 p-6\", className)}\n role=\"alert\"\n >\n <p className=\"font-semibold text-destructive\">{title}</p>\n {message ? <p className=\"mt-1 text-sm text-muted-foreground\">{message}</p> : null}\n {action ? <div className=\"mt-3\">{action}</div> : null}\n </div>\n )\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ui/cn.ts"],"names":[],"mappings":";;;;;AAUO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-A2UUGASH.js","sourcesContent":["/**\n * Class merger used by every component in the kit. `clsx` resolves conditional\n * class values, `tailwind-merge` drops the earlier of two conflicting Tailwind\n * utilities so a caller's `className` always wins over a component default.\n */\nimport { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport type { ClassValue }\n\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs))\n}\n"]}
|