@xmesh/system-design 0.0.1

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 (175) hide show
  1. package/README.md +472 -0
  2. package/assets/brand-lockup-dark.svg +9 -0
  3. package/assets/brand-lockup-light.svg +9 -0
  4. package/assets/brand-mark.svg +9 -0
  5. package/colors_and_type.css +11 -0
  6. package/dist/lit/components/alert/index.css +201 -0
  7. package/dist/lit/components/alert/index.d.ts +25 -0
  8. package/dist/lit/components/alert/index.js +191 -0
  9. package/dist/lit/components/app-bar/index.css +80 -0
  10. package/dist/lit/components/app-bar/index.d.ts +19 -0
  11. package/dist/lit/components/app-bar/index.js +120 -0
  12. package/dist/lit/components/artifact/index.css +166 -0
  13. package/dist/lit/components/artifact/index.d.ts +37 -0
  14. package/dist/lit/components/artifact/index.js +294 -0
  15. package/dist/lit/components/autocomplete/index.css +171 -0
  16. package/dist/lit/components/autocomplete/index.d.ts +47 -0
  17. package/dist/lit/components/autocomplete/index.js +404 -0
  18. package/dist/lit/components/avatar/index.css +62 -0
  19. package/dist/lit/components/avatar/index.d.ts +19 -0
  20. package/dist/lit/components/avatar/index.js +112 -0
  21. package/dist/lit/components/avatar-group/index.css +60 -0
  22. package/dist/lit/components/avatar-group/index.d.ts +19 -0
  23. package/dist/lit/components/avatar-group/index.js +97 -0
  24. package/dist/lit/components/badge/index.css +72 -0
  25. package/dist/lit/components/badge/index.d.ts +18 -0
  26. package/dist/lit/components/badge/index.js +115 -0
  27. package/dist/lit/components/brand-mark/index.css +109 -0
  28. package/dist/lit/components/brand-mark/index.d.ts +24 -0
  29. package/dist/lit/components/brand-mark/index.js +116 -0
  30. package/dist/lit/components/breadcrumbs/index.css +91 -0
  31. package/dist/lit/components/breadcrumbs/index.d.ts +19 -0
  32. package/dist/lit/components/breadcrumbs/index.js +104 -0
  33. package/dist/lit/components/bubble/index.css +182 -0
  34. package/dist/lit/components/bubble/index.d.ts +72 -0
  35. package/dist/lit/components/bubble/index.js +617 -0
  36. package/dist/lit/components/button/index.css +342 -0
  37. package/dist/lit/components/button/index.d.ts +32 -0
  38. package/dist/lit/components/button/index.js +202 -0
  39. package/dist/lit/components/card/index.css +99 -0
  40. package/dist/lit/components/card/index.d.ts +20 -0
  41. package/dist/lit/components/card/index.js +133 -0
  42. package/dist/lit/components/chat/index.css +292 -0
  43. package/dist/lit/components/chat/index.d.ts +74 -0
  44. package/dist/lit/components/chat/index.js +589 -0
  45. package/dist/lit/components/checkbox/index.css +126 -0
  46. package/dist/lit/components/checkbox/index.d.ts +21 -0
  47. package/dist/lit/components/checkbox/index.js +138 -0
  48. package/dist/lit/components/chip/index.css +145 -0
  49. package/dist/lit/components/chip/index.d.ts +30 -0
  50. package/dist/lit/components/chip/index.js +230 -0
  51. package/dist/lit/components/chip-group/index.css +19 -0
  52. package/dist/lit/components/chip-group/index.d.ts +24 -0
  53. package/dist/lit/components/chip-group/index.js +171 -0
  54. package/dist/lit/components/code/index.css +42 -0
  55. package/dist/lit/components/code/index.d.ts +12 -0
  56. package/dist/lit/components/code/index.js +68 -0
  57. package/dist/lit/components/composer/index.css +548 -0
  58. package/dist/lit/components/composer/index.d.ts +67 -0
  59. package/dist/lit/components/composer/index.js +713 -0
  60. package/dist/lit/components/data-table/index.css +166 -0
  61. package/dist/lit/components/data-table/index.d.ts +55 -0
  62. package/dist/lit/components/data-table/index.js +390 -0
  63. package/dist/lit/components/dialog/index.css +124 -0
  64. package/dist/lit/components/dialog/index.d.ts +24 -0
  65. package/dist/lit/components/dialog/index.js +199 -0
  66. package/dist/lit/components/divider/index.css +27 -0
  67. package/dist/lit/components/divider/index.d.ts +13 -0
  68. package/dist/lit/components/divider/index.js +67 -0
  69. package/dist/lit/components/empty-state/index.css +69 -0
  70. package/dist/lit/components/empty-state/index.d.ts +21 -0
  71. package/dist/lit/components/empty-state/index.js +123 -0
  72. package/dist/lit/components/expansion-panel/index.css +120 -0
  73. package/dist/lit/components/expansion-panel/index.d.ts +22 -0
  74. package/dist/lit/components/expansion-panel/index.js +174 -0
  75. package/dist/lit/components/field/index.css +223 -0
  76. package/dist/lit/components/field/index.d.ts +106 -0
  77. package/dist/lit/components/field/index.js +388 -0
  78. package/dist/lit/components/file-input/index.css +257 -0
  79. package/dist/lit/components/file-input/index.d.ts +30 -0
  80. package/dist/lit/components/file-input/index.js +298 -0
  81. package/dist/lit/components/form/index.css +29 -0
  82. package/dist/lit/components/form/index.d.ts +38 -0
  83. package/dist/lit/components/form/index.js +192 -0
  84. package/dist/lit/components/grid/index.css +53 -0
  85. package/dist/lit/components/grid/index.d.ts +14 -0
  86. package/dist/lit/components/grid/index.js +82 -0
  87. package/dist/lit/components/kbd/index.css +35 -0
  88. package/dist/lit/components/kbd/index.d.ts +11 -0
  89. package/dist/lit/components/kbd/index.js +43 -0
  90. package/dist/lit/components/list/index.css +15 -0
  91. package/dist/lit/components/list/index.d.ts +28 -0
  92. package/dist/lit/components/list/index.js +188 -0
  93. package/dist/lit/components/list-item/index.css +119 -0
  94. package/dist/lit/components/list-item/index.d.ts +20 -0
  95. package/dist/lit/components/list-item/index.js +127 -0
  96. package/dist/lit/components/menu/index.css +94 -0
  97. package/dist/lit/components/menu/index.d.ts +47 -0
  98. package/dist/lit/components/menu/index.js +386 -0
  99. package/dist/lit/components/navigation-drawer/index.css +114 -0
  100. package/dist/lit/components/navigation-drawer/index.d.ts +29 -0
  101. package/dist/lit/components/navigation-drawer/index.js +218 -0
  102. package/dist/lit/components/overlay/index.css +171 -0
  103. package/dist/lit/components/overlay/index.d.ts +65 -0
  104. package/dist/lit/components/overlay/index.js +566 -0
  105. package/dist/lit/components/pagination/index.css +102 -0
  106. package/dist/lit/components/pagination/index.d.ts +22 -0
  107. package/dist/lit/components/pagination/index.js +184 -0
  108. package/dist/lit/components/primitives/index.css +504 -0
  109. package/dist/lit/components/primitives/index.d.ts +25 -0
  110. package/dist/lit/components/primitives/index.js +283 -0
  111. package/dist/lit/components/progress/index.css +143 -0
  112. package/dist/lit/components/progress/index.d.ts +23 -0
  113. package/dist/lit/components/progress/index.js +180 -0
  114. package/dist/lit/components/radio-group/index.css +178 -0
  115. package/dist/lit/components/radio-group/index.d.ts +35 -0
  116. package/dist/lit/components/radio-group/index.js +292 -0
  117. package/dist/lit/components/select/index.css +151 -0
  118. package/dist/lit/components/select/index.d.ts +50 -0
  119. package/dist/lit/components/select/index.js +390 -0
  120. package/dist/lit/components/sidebar-item/index.css +133 -0
  121. package/dist/lit/components/sidebar-item/index.d.ts +20 -0
  122. package/dist/lit/components/sidebar-item/index.js +105 -0
  123. package/dist/lit/components/skeleton/index.css +81 -0
  124. package/dist/lit/components/skeleton/index.d.ts +19 -0
  125. package/dist/lit/components/skeleton/index.js +119 -0
  126. package/dist/lit/components/slider/index.css +171 -0
  127. package/dist/lit/components/slider/index.d.ts +36 -0
  128. package/dist/lit/components/slider/index.js +302 -0
  129. package/dist/lit/components/snackbar/index.css +279 -0
  130. package/dist/lit/components/snackbar/index.d.ts +33 -0
  131. package/dist/lit/components/snackbar/index.js +195 -0
  132. package/dist/lit/components/stack/index.css +41 -0
  133. package/dist/lit/components/stack/index.d.ts +20 -0
  134. package/dist/lit/components/stack/index.js +103 -0
  135. package/dist/lit/components/switch/index.css +126 -0
  136. package/dist/lit/components/switch/index.d.ts +17 -0
  137. package/dist/lit/components/switch/index.js +116 -0
  138. package/dist/lit/components/table/index.css +85 -0
  139. package/dist/lit/components/table/index.d.ts +25 -0
  140. package/dist/lit/components/table/index.js +139 -0
  141. package/dist/lit/components/tabs/index.css +116 -0
  142. package/dist/lit/components/tabs/index.d.ts +49 -0
  143. package/dist/lit/components/tabs/index.js +320 -0
  144. package/dist/lit/components/text-field/index.css +90 -0
  145. package/dist/lit/components/text-field/index.d.ts +17 -0
  146. package/dist/lit/components/text-field/index.js +101 -0
  147. package/dist/lit/components/textarea/index.css +55 -0
  148. package/dist/lit/components/textarea/index.d.ts +26 -0
  149. package/dist/lit/components/textarea/index.js +124 -0
  150. package/dist/lit/components/tooltip/index.css +37 -0
  151. package/dist/lit/components/tooltip/index.d.ts +31 -0
  152. package/dist/lit/components/tooltip/index.js +196 -0
  153. package/dist/lit/components/validation/index.css +386 -0
  154. package/dist/lit/components/validation/index.d.ts +45 -0
  155. package/dist/lit/components/validation/index.js +318 -0
  156. package/dist/lit/index.d.ts +50 -0
  157. package/dist/lit/index.js +59 -0
  158. package/package.json +81 -0
  159. package/styles/README.md +346 -0
  160. package/styles/_elevation.css +24 -0
  161. package/styles/_fonts.css +6 -0
  162. package/styles/_layout.css +37 -0
  163. package/styles/_primitives.css +154 -0
  164. package/styles/_scroll.css +75 -0
  165. package/styles/_semantic.css +146 -0
  166. package/styles/_space.css +61 -0
  167. package/styles/_type.css +139 -0
  168. package/styles/_xmesh-extensions.css +232 -0
  169. package/styles/index.css +44 -0
  170. package/styles/md3/_color.css +102 -0
  171. package/styles/md3/_elevation.css +26 -0
  172. package/styles/md3/_motion.css +35 -0
  173. package/styles/md3/_shape.css +22 -0
  174. package/styles/md3/_state.css +22 -0
  175. package/styles/md3/_type.css +111 -0
package/styles/README.md ADDED
@@ -0,0 +1,346 @@
1
+ # xmesh design tokens — Material Design 3 reference
2
+
3
+ The role tier is **canonical Material Design 3**. Components reference `--md-sys-*`
4
+ (canonical MD3 system tokens) and `--xm-*` (xmesh extensions for non-MD3 concepts).
5
+ Primitives (`--x-*`) are not part of this contract — they exist as the source of
6
+ truth (`_primitives.css`) and feed the MD3 layer below.
7
+
8
+ Theme switches via `<html data-theme="dark|light">` (default: dark). Primitives
9
+ flip per theme; the MD3 role tokens stay constant.
10
+
11
+ ---
12
+
13
+ ## `--md-sys-color-*` — Material Design 3 color (`md3/_color.css`)
14
+
15
+ ### Surface family — the "desk"
16
+
17
+ | Token | Role |
18
+ | --- | --- |
19
+ | `--md-sys-color-background` | Top-level page background. |
20
+ | `--md-sys-color-surface` | Default surface — chat shell, sidebar, top bar. |
21
+ | `--md-sys-color-on-surface` | Primary text/icon on `surface*`. |
22
+ | `--md-sys-color-on-surface-variant` | Secondary text/icon on `surface*`. |
23
+ | `--md-sys-color-surface-variant` | Lower-emphasis surface variant. |
24
+ | `--md-sys-color-surface-dim` | Recessed area behind cards. |
25
+ | `--md-sys-color-surface-bright` | Most-elevated reading surface. |
26
+ | `--md-sys-color-surface-container-lowest` | Trough (sidebar hover, user bubble recess). |
27
+ | `--md-sys-color-surface-container-low` | Slight raise (composer rest, bot bubble). |
28
+ | `--md-sys-color-surface-container` | Default container tier. |
29
+ | `--md-sys-color-surface-container-high` | Composer field, drawer chrome, snackbar bg. |
30
+ | `--md-sys-color-surface-container-highest` | Hover/active raised tier. |
31
+
32
+ ### Inverse surface — the "card stack"
33
+
34
+ | Token | Role |
35
+ | --- | --- |
36
+ | `--md-sys-color-inverse-surface` | The card / drawer / popover / composer tier. |
37
+ | `--md-sys-color-inverse-on-surface` | Text/icon on `inverse-surface`. |
38
+ | `--md-sys-color-inverse-primary` | Primary action sitting on `inverse-surface`. |
39
+
40
+ ### Outline
41
+
42
+ | Token | Role |
43
+ | --- | --- |
44
+ | `--md-sys-color-outline-variant` | Default 1px hairline. |
45
+ | `--md-sys-color-outline` | Hover / emphasized borders. |
46
+
47
+ ### Primary (the coral accent)
48
+
49
+ | Token | Role |
50
+ | --- | --- |
51
+ | `--md-sys-color-primary` | Coral CTA / focus border source. |
52
+ | `--md-sys-color-on-primary` | Text/icon on `primary` (white). |
53
+ | `--md-sys-color-primary-container` | Tinted accent — focus halo, selected pill. |
54
+ | `--md-sys-color-on-primary-container` | Text/icon on `primary-container`. |
55
+
56
+ ### Secondary (defined, unused in components)
57
+
58
+ | Token | Role |
59
+ | --- | --- |
60
+ | `--md-sys-color-secondary*` | Deep olive — kept for canonical MD3 compliance. |
61
+
62
+ ### Tertiary
63
+
64
+ Alias of secondary; reserved for future categorical accent. Components must not
65
+ reference unless adding a documented categorical role.
66
+
67
+ ### Error (defined, FORBIDDEN in components)
68
+
69
+ | Token | Role |
70
+ | --- | --- |
71
+ | `--md-sys-color-error*` | Red severity stack. **POLICIES.md rule 3a** forbids component references — severity is icon + copy. |
72
+
73
+ ### Utility
74
+
75
+ | Token | Role |
76
+ | --- | --- |
77
+ | `--md-sys-color-scrim` | Modal backdrop. Apply alpha at use site. |
78
+ | `--md-sys-color-shadow` | Shadow base color. |
79
+
80
+ ---
81
+
82
+ ## `--xm-*` — xmesh extensions (`_xmesh-extensions.css`)
83
+
84
+ Non-MD3 concepts kept under their own namespace so canonicality is preserved.
85
+
86
+ ### Surface / on-surface auxiliary tiers
87
+
88
+ | Token | Role |
89
+ | --- | --- |
90
+ | `--xm-color-on-surface-soft` | Fourth on-surface tier — meta text. (MD3 ships only two.) |
91
+ | `--xm-color-inverse-on-surface-muted` | Third inverse-on-surface tier. |
92
+ | `--xm-color-primary-pressed` | Pressed primary fill (MD3 has no "strong" tier). |
93
+ | `--xm-color-bubble-outline` | Slightly stronger user-bubble hairline. |
94
+ | `--xm-color-paper` | Warm cream artboard for design previews. |
95
+
96
+ ### Categorical badges (category, not severity)
97
+
98
+ `--xm-method-{get,post,put,delete,patch}-{bg,ink}` — HTTP method badges.
99
+ `--xm-ext-{yml,json}-{bg,ink}` — file-extension badges.
100
+
101
+ ### Snackbar scrim (the single intentional gradient)
102
+
103
+ `--xm-snackbar-scrim*` — three-stop neutral backdrop behind snackbars.
104
+
105
+ ### Photo overlay
106
+
107
+ `--xm-photo-overlay` / `-ink` — image artifact backdrop.
108
+
109
+ ### Mono typescale
110
+
111
+ `--xm-typescale-mono-{font,size,line-height,tracking,weight}` — JetBrains Mono.
112
+ MD3 has no mono concept.
113
+
114
+ ### Wordmark
115
+
116
+ `--xm-typescale-wordmark-*` — display family at button size, weight 500, lh 1.
117
+
118
+ ### xmesh-specific elevations
119
+
120
+ | Token | Role |
121
+ | --- | --- |
122
+ | `--xm-elevation-drawer` | Directional shadow for slide-in drawers. |
123
+ | `--xm-elevation-snackbar` | Composite snackbar shadow + rim. |
124
+ | `--xm-elevation-pressed` / `-soft` | Inset shadow for the button :active feel. |
125
+
126
+ ### Focus ring
127
+
128
+ `--xm-state-focus-ring` — 3px halo of `--md-sys-color-primary-container`.
129
+
130
+ ### Switch (`xm-switch`)
131
+
132
+ MD3 ships no switch role tokens, so the off-track fill + thumb shadow live as
133
+ extensions. On-track is the coral `--md-sys-color-primary`; the thumb uses MD3
134
+ roles directly (`--md-sys-color-outline` when off, `--md-sys-color-on-primary`
135
+ when on).
136
+
137
+ | Token | Role |
138
+ | --- | --- |
139
+ | `--xm-switch-track-off` | Off-track fill — muted neutral on the inverse-surface card. |
140
+ | `--xm-switch-thumb-shadow` | Thumb drop shadow so it reads above either track. |
141
+
142
+ ### Slider (`xm-slider`)
143
+
144
+ MD3 ships no slider role tokens. The active fill + thumb are the coral
145
+ `--md-sys-color-primary`; these are the sub-values with no MD3 home.
146
+
147
+ | Token | Role |
148
+ | --- | --- |
149
+ | `--xm-slider-track-inactive` | Unfilled track color — muted neutral on the inverse-surface card. |
150
+ | `--xm-slider-track-height` | Track thickness (4px). |
151
+ | `--xm-slider-thumb-size` | Thumb diameter (16px). |
152
+ | `--xm-slider-thumb-shadow` | Thumb drop shadow so it reads above the track. |
153
+
154
+ ### Overlay stacking tier
155
+
156
+ `--xm-overlay-z-tooltip` (1000) `<` `--xm-overlay-z-menu` (1100) `<`
157
+ `--xm-overlay-z-dialog` (1200) — the fixed stacking order for `xm-overlay`
158
+ non-modal popovers (AD-5a): a menu always sits above a tooltip. Modal
159
+ `<dialog>`s ride the native top layer above every popover by spec, so they
160
+ need no z-index. An escape-hatch Floating-UI-positioned overlay must reuse
161
+ these values, never invent its own z-index.
162
+
163
+ ---
164
+
165
+ ## `--xm-*` layout tokens (`_layout.css`)
166
+
167
+ The layout tier — breakpoints, the content reading width, and grid gutters.
168
+ Consumed by `xm-grid` / `xm-stack` and available to any component. Gutters
169
+ alias the `--s-N` ladder (no new px); layout is theme-invariant (no light
170
+ override).
171
+
172
+ ### Breakpoints
173
+
174
+ | Token | Value | Formalizes |
175
+ | --- | --- | --- |
176
+ | `--xm-breakpoint-sm` | `520px` | alert compact row |
177
+ | `--xm-breakpoint-md` | `640px` | snackbar / condensed layouts |
178
+
179
+ > **Caveat — `@media` cannot read these.** A CSS `@media` (or `@container`)
180
+ > condition does not resolve `var()`, so `@media (max-width: var(--xm-breakpoint-sm))`
181
+ > is invalid and silently fails. These tokens are the documented **source of
182
+ > truth**; each `@media` block repeats the literal with a comment citing the
183
+ > token (see `alert/index.css`, `snackbar/index.css`, `grid/index.css`). They
184
+ > ARE usable wherever `var()` works — `max-width`, `width`, JS
185
+ > `getComputedStyle`. See `docs/adr/0001`.
186
+
187
+ ### Container
188
+
189
+ | Token | Value | Role |
190
+ | --- | --- | --- |
191
+ | `--xm-container-max` | `720px` | Comfortable reading column (chat thread + bubbles). Usable directly in `max-width`. |
192
+
193
+ ### Grid gutters (alias `--s-N`)
194
+
195
+ | Token | Aliases | Value |
196
+ | --- | --- | --- |
197
+ | `--xm-gutter-none` | — | `0` |
198
+ | `--xm-gutter-xs` | `--s-1` | `4px` |
199
+ | `--xm-gutter-sm` | `--s-2` | `8px` |
200
+ | `--xm-gutter-md` | `--s-4` | `16px` (default grid / stack gap) |
201
+ | `--xm-gutter-lg` | `--s-6` | `24px` |
202
+ | `--xm-gutter-xl` | `--s-8` | `32px` |
203
+
204
+ ---
205
+
206
+ ## `--md-sys-typescale-*` — Material Design 3 type (`md3/_type.css`)
207
+
208
+ 15 roles × 5 sub-tokens. Each role exposes `-font`, `-size`, `-line-height`,
209
+ `-tracking`, `-weight`. Compose into `font:` shorthand or reference sub-tokens
210
+ directly. The xmesh chat overrides several MD3 sizes for chat density (see
211
+ plan + inline comments in `md3/_type.css`).
212
+
213
+ ### Roles
214
+
215
+ | Role | Family | Size (px) | Use |
216
+ | --- | --- | --- | --- |
217
+ | `display-large` | Source Serif 4 | 57 | Hero (unused in chat). |
218
+ | `display-medium` | Source Serif 4 | 45 | Hero (unused in chat). |
219
+ | `display-small` | Source Serif 4 | 36 | xmesh H1 (rounded up from 34). |
220
+ | `headline-large` | Source Serif 4 | 32 | xmesh H2. |
221
+ | `headline-medium` | Source Serif 4 | 22 | xmesh H3 (override of MD3 28). |
222
+ | `headline-small` | Source Serif 4 | 18 | xmesh H4 (override of MD3 24). |
223
+ | `title-large` | Source Serif 4 | 18 | xmesh title-large (override of MD3 sans). |
224
+ | `title-medium` | Inter | 15 | Card titles. |
225
+ | `title-small` | Inter | 14 | List-item titles. |
226
+ | `body-large` | Inter | 15 | xmesh prose baseline (override of MD3 16). |
227
+ | `body-medium` | Inter | 13 | UI rows. |
228
+ | `body-small` | Inter | 12 | Captions. |
229
+ | `label-large` | Inter | 15 | xmesh button text (override of MD3 14). |
230
+ | `label-medium` | Inter | 12 | Inline labels. |
231
+ | `label-small` | Inter | 11 | xmesh eyebrow (uppercase via helper class). |
232
+
233
+ ### Composite shorthands (`styles/_type.css`)
234
+
235
+ `--t-h1` (display-small) · `--t-h2` (headline-large) · `--t-h3` (headline-medium) ·
236
+ `--t-h4` (title-large) · `--t-display` (headline-medium) · `--t-wordmark` ·
237
+ `--t-body` (body-large) · `--t-body-strong` · `--t-small` (body-small) ·
238
+ `--t-button` (label-large) · `--t-eyebrow` (label-small) · `--t-mono` (xmesh ext).
239
+
240
+ ### Helper classes
241
+
242
+ `.x-h1` … `.x-h4`, `.x-display`, `.x-wordmark`, `.x-body`, `.x-small`,
243
+ `.x-eyebrow`, `.x-mono` — apply role shorthand + correct text color.
244
+
245
+ ### Family primitives
246
+
247
+ `--t-family-display` (Source Serif 4 — display/headline), `--t-family-ui`
248
+ (Inter — title/body/label), `--t-family-mono` (JetBrains Mono — non-MD3, used
249
+ via `--xm-typescale-mono-font`).
250
+
251
+ ---
252
+
253
+ ## `--md-sys-shape-corner-*` — Material Design 3 shape (`md3/_shape.css`)
254
+
255
+ | Token | Value | Use |
256
+ | --- | --- | --- |
257
+ | `extra-small` | 6px | Square icon backplates (override of MD3 4). |
258
+ | `small` | 8px | Token chips, swatches. |
259
+ | `button` | 10px | Buttons, inputs (xmesh extension). |
260
+ | `medium` | 14px | Cards, drawers, modals (override of MD3 12). |
261
+ | `large` | 18px | Chat bubbles (override of MD3 16). |
262
+ | `extra-large` | 20px | Composer card (override of MD3 28). |
263
+ | `full` | 9999px | Pills, dots, scrollbar thumbs. |
264
+
265
+ ---
266
+
267
+ ## `--s-N` — spacing (`_space.css`)
268
+
269
+ 4px base scale (xmesh primitive — MD3 has no spacing scale): `--s-1` 4px,
270
+ `--s-2` 8px, `--s-3` 12px, `--s-4` 16px, `--s-5` 20px, `--s-6` 24px,
271
+ `--s-8` 32px, `--s-10` 40px, `--s-12` 48px.
272
+
273
+ ---
274
+
275
+ ## `--md-sys-elevation-level0..5` — Material Design 3 elevation (`md3/_elevation.css`)
276
+
277
+ | Token | dp | Use |
278
+ | --- | --- | --- |
279
+ | `level0` | 0 | Flat — default buttons, idle composer. |
280
+ | `level1` | 1 | Inline chips, file rows. |
281
+ | `level2` | 3 | Default card lift. |
282
+ | `level3` | 6 | Menus, popovers. |
283
+ | `level4` | 8 | Drawers (composes with `--xm-elevation-drawer`). |
284
+ | `level5` | 12 | Top-most popovers. |
285
+
286
+ Pressed states use `--xm-elevation-pressed` (inset). Focus rings use
287
+ `--xm-state-focus-ring`. Snackbar uses `--xm-elevation-snackbar` for the
288
+ composite rim shadow.
289
+
290
+ ---
291
+
292
+ ## `--md-sys-motion-*` — Material Design 3 motion (`md3/_motion.css`)
293
+
294
+ ### Durations
295
+
296
+ `short1` (50) · `short2` (100) · `short3` (150) · `short4` (200) · `medium1`
297
+ (250) · `medium2` (300) · `medium3` (350) · `medium4` (400) · `long1..4`
298
+ (450/500/550/600) · `extra-long1..4` (700/800/900/1000).
299
+
300
+ ### Easing
301
+
302
+ `linear` · `standard` · `standard-accelerate` · `standard-decelerate` ·
303
+ `emphasized` · `emphasized-accelerate` · `emphasized-decelerate`.
304
+
305
+ Default for hover/focus is `standard` at `short3` (150ms). Slide-ins use
306
+ `emphasized-decelerate`.
307
+
308
+ ### Legacy aliases (`styles/_space.css`)
309
+
310
+ `--m-fast` → `short3`, `--m-base` → `short4`, `--m-slow` → `medium1`,
311
+ `--m-ease` → `easing-standard`, `--m-ease-out` → `easing-emphasized-decelerate`.
312
+ These delete in the lockdown phase.
313
+
314
+ ---
315
+
316
+ ## `--md-sys-state-*` — state-layer opacities (`md3/_state.css`)
317
+
318
+ | Token | Value | Use |
319
+ | --- | --- | --- |
320
+ | `--md-sys-state-hover-state-layer-opacity` | 8% | Hover overlay. |
321
+ | `--md-sys-state-focus-state-layer-opacity` | 10% | Focus overlay. |
322
+ | `--md-sys-state-pressed-state-layer-opacity` | 10% | Pressed overlay. |
323
+ | `--md-sys-state-dragged-state-layer-opacity` | 16% | Drag overlay. |
324
+
325
+ Compose into a `color-mix()` recipe over the resting background:
326
+
327
+ ```css
328
+ background-color: color-mix(
329
+ in oklab,
330
+ var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
331
+ var(--md-sys-color-surface)
332
+ );
333
+ ```
334
+
335
+ ---
336
+
337
+ ## What you don't reference from a consuming site
338
+
339
+ - **`--x-*`** primitives — the palette source. They swap under `data-theme`;
340
+ downstream code should not pin to these.
341
+ - **`--md-sys-color-error*`** — defined for canonical compliance, forbidden in
342
+ components. Severity stays icon + copy.
343
+
344
+ If a role you need doesn't exist at `--md-sys-*`, check `--xm-*` first; if
345
+ neither has it, add it to `_xmesh-extensions.css` (don't pretend it's MD3) or
346
+ open a discussion.
package/styles/_elevation.css ADDED
@@ -0,0 +1,24 @@
1
+ /* ============================================================
2
+ xmesh DS · _elevation.css — shadow + focus aliases.
3
+
4
+ Aliases `--md-sys-elevation-level*` and `--xm-elevation-*`. The
5
+ `--e-*` namespace stays for unmigrated components; deletes in
6
+ Phase 10. Pressed states are kept under `--xm-elevation-pressed*`
7
+ (the xmesh inset feel) rather than the MD3 state-layer recipe —
8
+ button migration in Phase 7 picks one per variant.
9
+ ============================================================ */
10
+ :root {
11
+ --e-subtle: var(--md-sys-elevation-level1);
12
+ --e-subtle-md: var(--md-sys-elevation-level1);
13
+ --e-btn-accent: var(--md-sys-elevation-level0);
14
+ --e-btn-accent-press: var(--xm-elevation-pressed);
15
+ --e-card: var(--md-sys-elevation-level2);
16
+ --e-card-soft: var(--md-sys-elevation-level0);
17
+ --e-popover: var(--md-sys-elevation-level3);
18
+ --e-popover-strong: var(--md-sys-elevation-level5);
19
+ --e-drawer: var(--xm-elevation-drawer);
20
+ --e-pressed: var(--xm-elevation-pressed);
21
+ --e-pressed-soft: var(--xm-elevation-pressed-soft);
22
+ --e-focus-ring: var(--xm-state-focus-ring);
23
+ --e-snackbar: var(--xm-elevation-snackbar);
24
+ }
package/styles/_fonts.css ADDED
@@ -0,0 +1,6 @@
1
+ /* ============================================================
2
+ xmesh DS · _fonts.css — Google Fonts import.
3
+ For an offline build, replace with @font-face blocks pointing
4
+ at /fonts/*.woff2.
5
+ ============================================================ */
6
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Ubuntu:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
package/styles/_layout.css ADDED
@@ -0,0 +1,37 @@
1
+ /* ============================================================
2
+ xmesh DS · _layout.css — layout token tier (--xm-*).
3
+
4
+ Formalizes the geometry that was previously hard-coded across
5
+ components: the two responsive breakpoints, the content reading
6
+ width, and the grid gutter steps. Gutters ALIAS the --s-N ladder
7
+ (no new px) so grid spacing stays on the 4px scale.
8
+
9
+ NOTE — breakpoints cannot be consumed by @media. A CSS @media (or
10
+ @container) condition does not read var(), so
11
+ `@media (max-width: var(--xm-breakpoint-sm))` is invalid and
12
+ silently fails. These tokens are the documented SOURCE OF TRUTH
13
+ for the literals that @media blocks repeat (each such site cites
14
+ the token in a comment), and are directly usable wherever var()
15
+ IS allowed — max-width / width / JS getComputedStyle. See
16
+ docs/adr/0001.
17
+ ============================================================ */
18
+ :root {
19
+ /* ---------- Breakpoints (reference values — see NOTE) ----------
20
+ Formalizes the only two literals in the tree: 520px (alert
21
+ compact row) and 640px (snackbar / condensed layouts). */
22
+ --xm-breakpoint-sm: 520px;
23
+ --xm-breakpoint-md: 640px;
24
+
25
+ /* ---------- Content container max-width ----------
26
+ The comfortable reading column — formalizes the 720px used by
27
+ the chat thread + bubbles. Usable directly in max-width. */
28
+ --xm-container-max: 720px;
29
+
30
+ /* ---------- Grid gutters (alias --s-N — no new px) ---------- */
31
+ --xm-gutter-none: 0;
32
+ --xm-gutter-xs: var(--s-1); /* 4px */
33
+ --xm-gutter-sm: var(--s-2); /* 8px */
34
+ --xm-gutter-md: var(--s-4); /* 16px — default grid / stack gap */
35
+ --xm-gutter-lg: var(--s-6); /* 24px */
36
+ --xm-gutter-xl: var(--s-8); /* 32px */
37
+ }
package/styles/_primitives.css ADDED
@@ -0,0 +1,154 @@
1
+ /* ============================================================
2
+ xmesh DS · _primitives.css — raw `--x-*` literals.
3
+ Theme overrides at the bottom switch primitives in place;
4
+ semantic tokens (in _semantic.css) reference these and stay
5
+ constant.
6
+ DO NOT reference --x-* from components — use --c-* instead.
7
+ ============================================================ */
8
+
9
+ /* ---------- DARK (default) ---------- */
10
+ :root {
11
+ /* Canvas — the dark "desk" the chat sits on.
12
+ Ramp starts at 0.22 (the previous canvas-2) so the default surface
13
+ reads as a softer dark rather than near-black, then walks ~0.04 per
14
+ step. Steps 0–4 carry the interactive band (default / raised / hover
15
+ / active); 5–8 fan out for borders and elevated chrome.
16
+ `--x-canvas-deep` sits below step 0 — the near-black "trough" used
17
+ by recessed chrome (e.g. neutral pill) that should read deeper than
18
+ the canvas itself. */
19
+ --x-canvas-deep: oklch(0.132 0.003 60);
20
+ --x-canvas-0: oklch(0.212 0.003 60);
21
+ --x-canvas-1: oklch(0.252 0.003 60);
22
+ --x-canvas-2: oklch(0.292 0.003 60); /* #2c2c2a anchor */
23
+ --x-canvas-3: oklch(0.332 0.003 60);
24
+ --x-canvas-4: oklch(0.372 0.003 60);
25
+ --x-canvas-5: oklch(0.412 0.003 60);
26
+ --x-canvas-6: oklch(0.452 0.003 60);
27
+ --x-canvas-7: oklch(0.492 0.003 60);
28
+ --x-canvas-8: oklch(0.532 0.003 60);
29
+
30
+ /* Surface — the white / near-white ramp. The card stack in LIGHT theme
31
+ (dark theme's card now rides the canvas ramp — ADR 0006), plus the muted
32
+ neutrals (switch / slider tracks) that sit on the card. Steps 0–4 widened
33
+ so the card / soft-card / border tier separates visually. */
34
+ --x-surface-0: #ffffff;
35
+ --x-surface-1: oklch(0.97 0.003 70);
36
+ --x-surface-2: oklch(0.93 0.005 70);
37
+ --x-surface-3: oklch(0.88 0.005 70);
38
+ --x-surface-4: oklch(0.82 0.006 70);
39
+ --x-surface-5: oklch(0.74 0.008 70);
40
+ --x-surface-6: oklch(0.66 0.010 70);
41
+ --x-surface-7: oklch(0.58 0.012 70);
42
+ --x-surface-8: oklch(0.50 0.012 70);
43
+
44
+ /* Paper — warm cream sheet for artboards */
45
+ --x-paper: oklch(0.95 0.014 78);
46
+
47
+ /* Ink — text on light surfaces */
48
+ --x-ink-0: oklch(0.22 0.01 60);
49
+ --x-ink-1: oklch(0.32 0.01 60);
50
+ --x-ink-2: oklch(0.42 0.01 60);
51
+ --x-ink-3: oklch(0.58 0.01 60);
52
+ --x-ink-4: oklch(0.70 0.01 60);
53
+
54
+ /* Inverse ink — text on canvas surface */
55
+ --x-ink-canvas-0: oklch(0.99 0.005 70);
56
+ --x-ink-canvas-1: oklch(0.92 0.005 70);
57
+ --x-ink-canvas-2: oklch(0.78 0.01 60);
58
+ --x-ink-canvas-3: oklch(0.55 0.01 60);
59
+ --x-ink-canvas-4: oklch(0.40 0.01 60);
60
+
61
+ /* Brand — coral (Claude-aligned ~40° hue, narrower than terracotta) */
62
+ --x-accent-soft: #f0d4c5;
63
+ --x-accent: #cc785c;
64
+ --x-accent-strong: #a9583e;
65
+ --x-accent-ink: #ffffff;
66
+ --x-accent-disabled: #e6dfd8;
67
+
68
+ /* Primary alias of accent — main CTA */
69
+ --x-primary-soft: #f0d4c5;
70
+ --x-primary: #cc785c;
71
+ --x-primary-strong: #a9583e;
72
+ --x-primary-ink: #ffffff;
73
+ --x-primary-disabled: #e6dfd8;
74
+
75
+ /* Secondary — deep olive */
76
+ --x-secondary-soft: #c4cdb0;
77
+ --x-secondary: #5f6e46;
78
+ --x-secondary-strong: #475333;
79
+ --x-secondary-ink: #ffffff;
80
+
81
+ }
82
+
83
+ /* ---------- LIGHT theme override ----------
84
+ Inverted ramp: canvas = warm cream backdrop (page/sidebar), surface =
85
+ near-white raised cards on top. Surface is always lighter than canvas
86
+ so cards/composers/buttons read as elevated on the cream backdrop —
87
+ mirroring the dark theme's "dark canvas + light card" relationship.
88
+ Hue shifted 70 → 85 for the editorial cream cast. */
89
+ :root[data-theme="light"] {
90
+ /* Canvas — the warm cream "desk" the cards sit on (page chrome, sidebar).
91
+ Step 0 is a near-white cool off-cream (#f8f8f6); 1..4 interpolate
92
+ into the warm-cream family; 5..7 are the existing deep-cream tail;
93
+ 8 extends the ramp one step darker. In light theme `--x-canvas-deep`
94
+ is pure white (#fff) — it sits *above* the cream canvas as a raised
95
+ card-tier well, used by sidebar hover/active fills and the user
96
+ bubble to read as elevated against the warm cream backdrop. (Dark
97
+ theme keeps the opposite semantic — `deep` is the darkest trough.) */
98
+ --x-canvas-deep: #ffffff;
99
+ --x-canvas-0: #f8f8f6;
100
+ --x-canvas-1: oklch(0.96 0.006 90);
101
+ --x-canvas-2: oklch(0.94 0.010 88);
102
+ --x-canvas-3: oklch(0.92 0.013 87);
103
+ --x-canvas-4: oklch(0.89 0.015 86);
104
+ --x-canvas-5: oklch(0.85 0.017 85);
105
+ --x-canvas-6: oklch(0.78 0.018 85);
106
+ --x-canvas-7: oklch(0.70 0.018 85);
107
+ --x-canvas-8: oklch(0.62 0.018 85);
108
+
109
+ /* Surface — the near-white card stack raised above canvas */
110
+ --x-surface-0: #ffffff;
111
+ --x-surface-1: oklch(0.995 0.002 85);
112
+ --x-surface-2: oklch(0.985 0.004 85);
113
+ --x-surface-3: oklch(0.97 0.006 85);
114
+ --x-surface-4: oklch(0.91 0.010 85);
115
+ --x-surface-5: oklch(0.86 0.013 85);
116
+ --x-surface-6: oklch(0.78 0.015 85);
117
+ --x-surface-7: oklch(0.66 0.018 85);
118
+ --x-surface-8: oklch(0.58 0.020 85);
119
+
120
+ --x-paper: oklch(0.99 0.005 85);
121
+
122
+ /* Ink on cards (light theme) — same role as dark theme's --x-ink-* */
123
+ --x-ink-0: oklch(0.20 0.010 60);
124
+ --x-ink-1: oklch(0.30 0.010 60);
125
+ --x-ink-2: oklch(0.42 0.010 60);
126
+ --x-ink-3: oklch(0.55 0.010 60);
127
+ --x-ink-4: oklch(0.68 0.010 60);
128
+
129
+ /* Inverse ink — text on the warm cream canvas in light theme */
130
+ --x-ink-canvas-0: oklch(0.18 0.005 80);
131
+ --x-ink-canvas-1: oklch(0.28 0.005 80);
132
+ --x-ink-canvas-2: oklch(0.42 0.005 80);
133
+ --x-ink-canvas-3: oklch(0.55 0.006 80);
134
+ --x-ink-canvas-4: oklch(0.68 0.006 80);
135
+
136
+ /* Brand — coral, slightly deeper for higher contrast on cream canvas */
137
+ --x-accent-soft: oklch(0.92 0.045 45);
138
+ --x-accent: oklch(0.62 0.110 40);
139
+ --x-accent-strong: oklch(0.50 0.115 38);
140
+ --x-accent-ink: #ffffff;
141
+ --x-accent-disabled: oklch(0.88 0.015 60);
142
+
143
+ --x-primary-soft: oklch(0.92 0.045 45);
144
+ --x-primary: oklch(0.62 0.110 40);
145
+ --x-primary-strong: oklch(0.50 0.115 38);
146
+ --x-primary-ink: #ffffff;
147
+ --x-primary-disabled: oklch(0.88 0.015 60);
148
+
149
+ /* Secondary — deep olive, pulled darker for cream-canvas contrast */
150
+ --x-secondary-soft: oklch(0.88 0.045 120);
151
+ --x-secondary: oklch(0.42 0.055 125);
152
+ --x-secondary-strong: oklch(0.32 0.050 125);
153
+ --x-secondary-ink: #ffffff;
154
+ }
package/styles/_scroll.css ADDED
@@ -0,0 +1,75 @@
1
+ /* ============================================================
2
+ xmesh DS · _scroll.css — scrollbar appearance + helpers.
3
+
4
+ Two opt-in classes plus a token set. Components don't write
5
+ `::-webkit-scrollbar` rules ad-hoc — they pick a class:
6
+
7
+ .scroll-canvas thin overlay scrollbar tuned for canvas /
8
+ sidebar / artifact surfaces (uses the
9
+ --c-text-canvas family so the thumb is
10
+ visible against the dark canvas in dark
11
+ theme and against the cream canvas in
12
+ light theme — single set of rules covers
13
+ both modes via the canvas token flip).
14
+
15
+ .scroll-hidden hide the scrollbar entirely (still
16
+ scrollable). Use for inline single-line
17
+ textareas / horizontal strips where the
18
+ scrollbar would compete with the chrome.
19
+
20
+ Tokens (overridable per-host if needed):
21
+ --c-scrollbar-thumb resting thumb
22
+ --c-scrollbar-thumb-hover hover thumb
23
+ --s-scrollbar-w track width
24
+ --r-scrollbar thumb radius
25
+ ============================================================ */
26
+
27
+ :root {
28
+ --s-scrollbar-w: 10px;
29
+ --r-scrollbar: var(--r-pill);
30
+
31
+ /* Card-surface scrollbars — used by .scroll-on-card (not yet wired,
32
+ but reserved). The canvas variant below covers every current
33
+ scrollable in this repo. */
34
+ --c-scrollbar-thumb: color-mix(in oklab, var(--c-text) 18%, transparent);
35
+ --c-scrollbar-thumb-hover: color-mix(in oklab, var(--c-text) 32%, transparent);
36
+ }
37
+
38
+ /* ----- Canvas-rooted scrollables -----
39
+ Thumb uses the canvas ink wash so it auto-flips per theme:
40
+ light-on-dark in dark mode, dark-on-cream in light mode. */
41
+ .scroll-canvas {
42
+ scrollbar-width: thin;
43
+ scrollbar-color:
44
+ color-mix(in oklab, var(--c-text-canvas) 22%, transparent)
45
+ transparent;
46
+ }
47
+ .scroll-canvas::-webkit-scrollbar {
48
+ width: var(--s-scrollbar-w);
49
+ height: var(--s-scrollbar-w);
50
+ }
51
+ .scroll-canvas::-webkit-scrollbar-track {
52
+ background: transparent;
53
+ }
54
+ .scroll-canvas::-webkit-scrollbar-thumb {
55
+ background: color-mix(in oklab, var(--c-text-canvas) 22%, transparent);
56
+ border-radius: var(--r-scrollbar);
57
+ border: 2px solid transparent;
58
+ background-clip: content-box;
59
+ }
60
+ .scroll-canvas::-webkit-scrollbar-thumb:hover {
61
+ background: color-mix(in oklab, var(--c-text-canvas) 38%, transparent);
62
+ background-clip: content-box;
63
+ }
64
+ .scroll-canvas::-webkit-scrollbar-corner {
65
+ background: transparent;
66
+ }
67
+
68
+ /* ----- Hide the scrollbar entirely (still scrollable) ----- */
69
+ .scroll-hidden {
70
+ scrollbar-width: none;
71
+ -ms-overflow-style: none;
72
+ }
73
+ .scroll-hidden::-webkit-scrollbar {
74
+ display: none;
75
+ }