@olympusoss/canvas 2.13.0 → 2.15.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 (3) hide show
  1. package/package.json +1 -1
  2. package/styles/fonts/Roboto-VariableFont_wdth_wght.ttf +0 -0
  3. package/styles/tokens.css +79 -69
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olympusoss/canvas",
3
- "version": "2.13.0",
3
+ "version": "2.15.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/styles/tokens.css CHANGED
@@ -1,25 +1,36 @@
1
1
  /* ---------- Canvas tokens — single source of truth ----------
2
2
  *
3
- * Surface elevation (dark mode):
4
- * L0 body background `--background` deepest
5
- * L1 sidebar chrome `--sidebar-background` subtle lift, distinct hue
6
- * L2 cards + popovers `--card` / `--popover` clearly elevated
7
- * L3 inside-card chips `--muted` / `--secondary` / `--accent` topmost
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.
8
7
  *
9
- * In light mode the canonical shadcn convention keeps body and cards both
10
- * pure white — surfaces are differentiated by borders + 1px shadow rather
11
- * than tone. That's intentional.
12
- *
13
- * Dual-form sidebar declaration (load-bearing — do NOT remove either form):
14
- * - Raw HSL triplets like `--sidebar-background: 230 25% 97%` are consumed
8
+ * Dual-form sidebar declaration (load-bearing, do NOT remove either form):
9
+ * - Raw HSL triplets like `--sidebar-background: 0 0% 98%` are consumed
15
10
  * by `hsl(var(--…))` patterns inside component CSS / inline styles.
16
- * - Resolved `hsl()` forms like `--sidebar: hsl(230 25% 97%)` feed Tailwind
11
+ * - Resolved `hsl()` forms like `--sidebar: hsl(0 0% 98%)` feed Tailwind
17
12
  * v4's `@theme inline { --color-sidebar: var(--sidebar) }` mapping so
18
13
  * `bg-sidebar` / `text-sidebar-foreground` utilities resolve.
19
14
  *
20
- * Typography canonical: Inter for surfaces, JetBrains Mono for code.
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).
21
19
  */
22
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
+
23
34
  @layer base {
24
35
  :root {
25
36
  /* ── Base palette (light) ───────────────────────────────────
@@ -39,7 +50,7 @@
39
50
  --muted-foreground: 240 3.8% 46.1%;
40
51
  --accent: 240 4.8% 95.9%;
41
52
  --accent-foreground: 240 5.9% 10%;
42
- --destructive: 4 78% 50%;
53
+ --destructive: 0 84.2% 60.2%;
43
54
  --destructive-foreground: 0 0% 98%;
44
55
  --brand: 213 94% 68%;
45
56
  --brand-foreground: 0 0% 100%;
@@ -60,14 +71,14 @@
60
71
  * flagged in PR. */
61
72
  --chart-6: 173 70% 42%;
62
73
 
63
- /* ── Sidebar — blue-tinted gray (hue 230) per handoff ──────── */
64
- --sidebar-background: 230 25% 97%;
65
- --sidebar-foreground: 230 15% 40%;
66
- --sidebar-primary: 230 45% 25%;
74
+ /* ── Sidebar (neutral shadcn zinc per Athena handoff) ────── */
75
+ --sidebar-background: 0 0% 98%;
76
+ --sidebar-foreground: 240 5.3% 26.1%;
77
+ --sidebar-primary: 240 5.9% 10%;
67
78
  --sidebar-primary-foreground: 0 0% 98%;
68
- --sidebar-accent: 230 40% 92%;
69
- --sidebar-accent-foreground: 230 45% 25%;
70
- --sidebar-border: 230 20% 90%;
79
+ --sidebar-accent: 240 4.8% 95.9%;
80
+ --sidebar-accent-foreground: 240 5.9% 10%;
81
+ --sidebar-border: 220 13% 91%;
71
82
  --sidebar-ring: 217.2 91.2% 59.8%;
72
83
 
73
84
  /* ── StatCard variant tokens ───────────────────────────────── *
@@ -81,7 +92,7 @@
81
92
  --stat-amber: 38 92% 50%; /* #f59e0b */
82
93
 
83
94
  /* ── Typography ────────────────────────────────────────────── */
84
- --font-sans: "Inter", system-ui, -apple-system, sans-serif;
95
+ --font-sans: "Roboto", "Inter", system-ui, -apple-system, sans-serif;
85
96
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
86
97
 
87
98
  /* ── Letter-spacing scale ──────────────────────────────────── *
@@ -92,44 +103,43 @@
92
103
  }
93
104
 
94
105
  .dark {
95
- /* ── Base palette (dark) — tiered elevation ─────────────────
96
- * L0: body L1: sidebar L2: card/popover L3: muted/secondary/accent
97
- * All tiers share hue 225 (slight blue-cool) and step lightness
98
- * by ~4-6% so surfaces visually lift above the body. */
106
+ /* ── Base palette (dark): shadcn neutral zinc per Athena handoff ──
107
+ * Flat shadcn defaults (hue 240, no elevation tiering). Cards sit at
108
+ * the same lightness as the body; the visible separation comes from
109
+ * `--border` (240 3.7% 15.9%). The previous "tiered elevation"
110
+ * design (hue 225, lifted surfaces) was Canvas-only and has been
111
+ * removed in favour of the handoff palette so every consumer
112
+ * inherits the same design system. */
99
113
 
100
- /* L0 — deepest body */
101
- --background: 225 24% 6%;
102
- --foreground: 220 14% 92%;
114
+ --background: 240 10% 3.9%;
115
+ --foreground: 0 0% 98%;
103
116
 
104
- /* L2 — cards & popovers (clearly lifted above body) */
105
- --card: 225 18% 13%;
106
- --card-foreground: 220 14% 92%;
107
- --popover: 225 18% 13%;
108
- --popover-foreground: 220 14% 92%;
117
+ --card: 240 10% 3.9%;
118
+ --card-foreground: 0 0% 98%;
119
+ --popover: 240 10% 3.9%;
120
+ --popover-foreground: 0 0% 98%;
109
121
 
110
- /* Primary action — keep light text on dark accent */
111
- --primary: 220 14% 95%;
112
- --primary-foreground: 225 24% 6%;
122
+ --primary: 0 0% 98%;
123
+ --primary-foreground: 240 5.9% 10%;
113
124
 
114
- /* L3 — chips/inputs/hover surfaces inside cards */
115
- --secondary: 225 14% 19%;
116
- --secondary-foreground: 220 14% 92%;
117
- --muted: 225 14% 19%;
118
- --muted-foreground: 225 9% 64%;
119
- --accent: 225 14% 22%;
120
- --accent-foreground: 220 14% 92%;
125
+ --secondary: 240 3.7% 15.9%;
126
+ --secondary-foreground: 0 0% 98%;
127
+ --muted: 240 3.7% 15.9%;
128
+ --muted-foreground: 240 5% 64.9%;
129
+ --accent: 240 3.7% 15.9%;
130
+ --accent-foreground: 0 0% 98%;
121
131
 
122
- --destructive: 4 88% 62%;
132
+ --destructive: 0 62.8% 30.6%;
123
133
  --destructive-foreground: 0 0% 98%;
124
134
  --brand: 213 94% 68%;
125
135
  --brand-foreground: 0 0% 100%;
126
136
 
127
- /* Borders — visible but subtle separation */
128
- --border: 225 14% 22%;
129
- --input: 225 14% 22%;
130
- --ring: 217 91% 60%;
137
+ --border: 240 3.7% 15.9%;
138
+ --input: 240 3.7% 15.9%;
139
+ --ring: 240 4.9% 83.9%;
131
140
 
132
- /* Chart palette */
141
+ /* Chart palette (Canvas-specific; handoff dashboard uses --primary
142
+ * for bar fills rather than --chart-1, so these stay as-is). */
133
143
  --chart-1: 220 70% 50%;
134
144
  --chart-2: 160 60% 45%;
135
145
  --chart-3: 30 80% 55%;
@@ -137,14 +147,14 @@
137
147
  --chart-5: 340 75% 55%;
138
148
  --chart-6: 173 70% 50%;
139
149
 
140
- /* L1 — sidebar (between body and cards, distinct hue 225) */
141
- --sidebar-background: 225 16% 10%;
142
- --sidebar-foreground: 220 14% 80%;
143
- --sidebar-primary: 217 91% 65%;
150
+ /* Sidebar (neutral shadcn zinc per Athena handoff) */
151
+ --sidebar-background: 240 5.9% 10%;
152
+ --sidebar-foreground: 240 4.8% 95.9%;
153
+ --sidebar-primary: 224.3 76.3% 48%;
144
154
  --sidebar-primary-foreground: 0 0% 100%;
145
- --sidebar-accent: 225 22% 16%;
146
- --sidebar-accent-foreground: 220 14% 92%;
147
- --sidebar-border: 225 14% 18%;
155
+ --sidebar-accent: 240 3.7% 15.9%;
156
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
157
+ --sidebar-border: 240 3.7% 15.9%;
148
158
  --sidebar-ring: 217.2 91.2% 59.8%;
149
159
 
150
160
  /* StatCard variants — same hex; 10% tint reads on dark via opacity */
@@ -211,24 +221,24 @@
211
221
  * mapping. They mirror the raw HSL triplets above; keep the two in sync.
212
222
  */
213
223
  :root {
214
- --sidebar: hsl(230 25% 97%);
215
- --sidebar-foreground: hsl(230 15% 40%);
216
- --sidebar-primary: hsl(230 45% 25%);
224
+ --sidebar: hsl(0 0% 98%);
225
+ --sidebar-foreground: hsl(240 5.3% 26.1%);
226
+ --sidebar-primary: hsl(240 5.9% 10%);
217
227
  --sidebar-primary-foreground: hsl(0 0% 98%);
218
- --sidebar-accent: hsl(230 40% 92%);
219
- --sidebar-accent-foreground: hsl(230 45% 25%);
220
- --sidebar-border: hsl(230 20% 90%);
228
+ --sidebar-accent: hsl(240 4.8% 95.9%);
229
+ --sidebar-accent-foreground: hsl(240 5.9% 10%);
230
+ --sidebar-border: hsl(220 13% 91%);
221
231
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
222
232
  }
223
233
 
224
234
  .dark {
225
- --sidebar: hsl(225 16% 10%);
226
- --sidebar-foreground: hsl(220 14% 80%);
227
- --sidebar-primary: hsl(217 91% 65%);
235
+ --sidebar: hsl(240 5.9% 10%);
236
+ --sidebar-foreground: hsl(240 4.8% 95.9%);
237
+ --sidebar-primary: hsl(224.3 76.3% 48%);
228
238
  --sidebar-primary-foreground: hsl(0 0% 100%);
229
- --sidebar-accent: hsl(225 22% 16%);
230
- --sidebar-accent-foreground: hsl(220 14% 92%);
231
- --sidebar-border: hsl(225 14% 18%);
239
+ --sidebar-accent: hsl(240 3.7% 15.9%);
240
+ --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
241
+ --sidebar-border: hsl(240 3.7% 15.9%);
232
242
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
233
243
  }
234
244