@olympusoss/canvas 2.13.0 → 2.14.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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles/tokens.css +61 -67
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olympusoss/canvas",
3
- "version": "2.13.0",
3
+ "version": "2.14.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/styles/tokens.css CHANGED
@@ -1,19 +1,14 @@
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
  *
@@ -39,7 +34,7 @@
39
34
  --muted-foreground: 240 3.8% 46.1%;
40
35
  --accent: 240 4.8% 95.9%;
41
36
  --accent-foreground: 240 5.9% 10%;
42
- --destructive: 4 78% 50%;
37
+ --destructive: 0 84.2% 60.2%;
43
38
  --destructive-foreground: 0 0% 98%;
44
39
  --brand: 213 94% 68%;
45
40
  --brand-foreground: 0 0% 100%;
@@ -60,14 +55,14 @@
60
55
  * flagged in PR. */
61
56
  --chart-6: 173 70% 42%;
62
57
 
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%;
58
+ /* ── Sidebar (neutral shadcn zinc per Athena handoff) ────── */
59
+ --sidebar-background: 0 0% 98%;
60
+ --sidebar-foreground: 240 5.3% 26.1%;
61
+ --sidebar-primary: 240 5.9% 10%;
67
62
  --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%;
63
+ --sidebar-accent: 240 4.8% 95.9%;
64
+ --sidebar-accent-foreground: 240 5.9% 10%;
65
+ --sidebar-border: 220 13% 91%;
71
66
  --sidebar-ring: 217.2 91.2% 59.8%;
72
67
 
73
68
  /* ── StatCard variant tokens ───────────────────────────────── *
@@ -92,44 +87,43 @@
92
87
  }
93
88
 
94
89
  .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. */
90
+ /* ── Base palette (dark): shadcn neutral zinc per Athena handoff ──
91
+ * Flat shadcn defaults (hue 240, no elevation tiering). Cards sit at
92
+ * the same lightness as the body; the visible separation comes from
93
+ * `--border` (240 3.7% 15.9%). The previous "tiered elevation"
94
+ * design (hue 225, lifted surfaces) was Canvas-only and has been
95
+ * removed in favour of the handoff palette so every consumer
96
+ * inherits the same design system. */
99
97
 
100
- /* L0 — deepest body */
101
- --background: 225 24% 6%;
102
- --foreground: 220 14% 92%;
98
+ --background: 240 10% 3.9%;
99
+ --foreground: 0 0% 98%;
103
100
 
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%;
101
+ --card: 240 10% 3.9%;
102
+ --card-foreground: 0 0% 98%;
103
+ --popover: 240 10% 3.9%;
104
+ --popover-foreground: 0 0% 98%;
109
105
 
110
- /* Primary action — keep light text on dark accent */
111
- --primary: 220 14% 95%;
112
- --primary-foreground: 225 24% 6%;
106
+ --primary: 0 0% 98%;
107
+ --primary-foreground: 240 5.9% 10%;
113
108
 
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%;
109
+ --secondary: 240 3.7% 15.9%;
110
+ --secondary-foreground: 0 0% 98%;
111
+ --muted: 240 3.7% 15.9%;
112
+ --muted-foreground: 240 5% 64.9%;
113
+ --accent: 240 3.7% 15.9%;
114
+ --accent-foreground: 0 0% 98%;
121
115
 
122
- --destructive: 4 88% 62%;
116
+ --destructive: 0 62.8% 30.6%;
123
117
  --destructive-foreground: 0 0% 98%;
124
118
  --brand: 213 94% 68%;
125
119
  --brand-foreground: 0 0% 100%;
126
120
 
127
- /* Borders — visible but subtle separation */
128
- --border: 225 14% 22%;
129
- --input: 225 14% 22%;
130
- --ring: 217 91% 60%;
121
+ --border: 240 3.7% 15.9%;
122
+ --input: 240 3.7% 15.9%;
123
+ --ring: 240 4.9% 83.9%;
131
124
 
132
- /* Chart palette */
125
+ /* Chart palette (Canvas-specific; handoff dashboard uses --primary
126
+ * for bar fills rather than --chart-1, so these stay as-is). */
133
127
  --chart-1: 220 70% 50%;
134
128
  --chart-2: 160 60% 45%;
135
129
  --chart-3: 30 80% 55%;
@@ -137,14 +131,14 @@
137
131
  --chart-5: 340 75% 55%;
138
132
  --chart-6: 173 70% 50%;
139
133
 
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%;
134
+ /* Sidebar (neutral shadcn zinc per Athena handoff) */
135
+ --sidebar-background: 240 5.9% 10%;
136
+ --sidebar-foreground: 240 4.8% 95.9%;
137
+ --sidebar-primary: 224.3 76.3% 48%;
144
138
  --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%;
139
+ --sidebar-accent: 240 3.7% 15.9%;
140
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
141
+ --sidebar-border: 240 3.7% 15.9%;
148
142
  --sidebar-ring: 217.2 91.2% 59.8%;
149
143
 
150
144
  /* StatCard variants — same hex; 10% tint reads on dark via opacity */
@@ -211,24 +205,24 @@
211
205
  * mapping. They mirror the raw HSL triplets above; keep the two in sync.
212
206
  */
213
207
  :root {
214
- --sidebar: hsl(230 25% 97%);
215
- --sidebar-foreground: hsl(230 15% 40%);
216
- --sidebar-primary: hsl(230 45% 25%);
208
+ --sidebar: hsl(0 0% 98%);
209
+ --sidebar-foreground: hsl(240 5.3% 26.1%);
210
+ --sidebar-primary: hsl(240 5.9% 10%);
217
211
  --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%);
212
+ --sidebar-accent: hsl(240 4.8% 95.9%);
213
+ --sidebar-accent-foreground: hsl(240 5.9% 10%);
214
+ --sidebar-border: hsl(220 13% 91%);
221
215
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
222
216
  }
223
217
 
224
218
  .dark {
225
- --sidebar: hsl(225 16% 10%);
226
- --sidebar-foreground: hsl(220 14% 80%);
227
- --sidebar-primary: hsl(217 91% 65%);
219
+ --sidebar: hsl(240 5.9% 10%);
220
+ --sidebar-foreground: hsl(240 4.8% 95.9%);
221
+ --sidebar-primary: hsl(224.3 76.3% 48%);
228
222
  --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%);
223
+ --sidebar-accent: hsl(240 3.7% 15.9%);
224
+ --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
225
+ --sidebar-border: hsl(240 3.7% 15.9%);
232
226
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
233
227
  }
234
228