@mattermost/compass-ui 0.1.0-alpha.1 → 0.1.0-alpha.2

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 (4) hide show
  1. package/README.md +6 -6
  2. package/dist/compass-ui-standalone.css +207 -0
  3. package/dist/compass-ui.css +0 -206
  4. package/package.json +5 -1
package/README.md CHANGED
@@ -19,15 +19,15 @@ import '@mattermost/compass-ui/styles';
19
19
  import '@mattermost/compass-ui/component-styles';
20
20
  ```
21
21
 
22
- Standalone hosts (Storybook, playground) also need document chrome:
22
+ Standalone hosts (Storybook, playground) also need theme presets and document chrome:
23
23
 
24
24
  ```tsx
25
25
  import '@mattermost/compass-ui/styles/standalone';
26
26
  ```
27
27
 
28
- Do not load `/styles/standalone` into Mattermost webapp.
28
+ Do not load `/styles/standalone` into Mattermost webapp (it already owns themes, reset, and document styles).
29
29
 
30
- Set a theme on `<html>`:
30
+ Set a theme on `<html>` (standalone hosts):
31
31
 
32
32
  ```html
33
33
  <html data-theme="denim">
@@ -51,8 +51,8 @@ npm run storybook # component catalog on :6006
51
51
  ## Package layout
52
52
 
53
53
  - `dist/index.js` / `dist/index.cjs` — component bundle (ESM + CJS)
54
- - `dist/compass-ui.css` — tokens, themes, and webapp-compat defaults (`./styles`)
55
- - `dist/compass-ui-standalone.css` — CSS reset + `body` / heading chrome for standalone hosts (`./styles/standalone`)
54
+ - `dist/compass-ui.css` — tokens and webapp-compat defaults (`./styles`)
55
+ - `dist/compass-ui-standalone.css` — theme presets + CSS reset + `body` / heading chrome for standalone hosts (`./styles/standalone`)
56
56
  - `dist/index.css` — component CSS modules (injected at build; also available as `./component-styles`)
57
57
 
58
58
  ## Storybook
@@ -76,7 +76,7 @@ npm run storybook --workspace=@mattermost/compass-ui
76
76
 
77
77
  ## Integration and releases
78
78
 
79
- - [INTEGRATION.md](./INTEGRATION.md) — Vite + webapp consumer setup
79
+ - [INTEGRATION.md](./INTEGRATION.md) — Vite + webapp consumer setup, **release → CI publish** flow
80
80
  - [CHANGELOG.md](./CHANGELOG.md) — release history
81
81
 
82
82
  Validate a publishable tarball from the monorepo root:
package/dist/compass-ui-standalone.css CHANGED
@@ -1,3 +1,210 @@
1
+ :root,
2
+ [data-theme=denim] {
3
+ --sidebar-bg: var(--color-indigo-500);
4
+ --sidebar-bg-rgb: var(--color-indigo-500-rgb);
5
+ --sidebar-header-bg: #192a4d;
6
+ --sidebar-header-bg-rgb: 25, 42, 77;
7
+ --sidebar-teambar-bg: #162545;
8
+ --sidebar-teambar-bg-rgb: 22, 37, 69;
9
+ --sidebar-text: var(--color-neutral-0);
10
+ --sidebar-text-rgb: var(--color-neutral-0-rgb);
11
+ --sidebar-text-hover-bg: var(--color-indigo-400);
12
+ --sidebar-text-hover-bg-rgb: var(--color-indigo-400-rgb);
13
+ --sidebar-text-active-border: var(--color-blue-300);
14
+ --sidebar-text-active-border-rgb: var(--color-blue-300-rgb);
15
+ --sidebar-text-active-color: var(--color-neutral-0);
16
+ --sidebar-unread-text: var(--color-neutral-0);
17
+ --sidebar-header-text-color: var(--color-neutral-0);
18
+ --center-channel-bg: var(--color-neutral-0);
19
+ --center-channel-bg-rgb: var(--color-neutral-0-rgb);
20
+ --center-channel-color: var(--color-neutral-900);
21
+ --center-channel-color-rgb: var(--color-neutral-900-rgb);
22
+ --button-bg: var(--color-blue-500);
23
+ --button-bg-rgb: var(--color-blue-500-rgb);
24
+ --button-color: var(--color-neutral-0);
25
+ --button-color-rgb: var(--color-neutral-0-rgb);
26
+ --link-color: var(--color-blue-600);
27
+ --link-color-rgb: var(--color-blue-600-rgb);
28
+ --error-text: var(--color-red-400);
29
+ --error-text-color-rgb: var(--color-red-400-rgb);
30
+ --mention-bg: var(--color-neutral-0);
31
+ --mention-bg-rgb: var(--color-neutral-0-rgb);
32
+ --mention-color: var(--color-indigo-500);
33
+ --mention-color-rgb: var(--color-indigo-500-rgb);
34
+ --mention-highlight-bg: var(--color-yellow-200);
35
+ --mention-highlight-link: var(--color-neutral-1100);
36
+ --new-message-separator: var(--color-yellow-600);
37
+ --online-indicator: var(--color-green-500);
38
+ --away-indicator: var(--color-yellow-500);
39
+ --dnd-indicator: var(--color-red-400);
40
+ --calls-bg: var(--color-indigo-600);
41
+ --calls-bg-rgb: var(--color-indigo-600-rgb);
42
+ }
43
+
44
+ [data-theme=sapphire] {
45
+ --sidebar-bg: #1543a3;
46
+ --sidebar-bg-rgb: 21, 67, 163;
47
+ --sidebar-header-bg: #123b91;
48
+ --sidebar-header-bg-rgb: 18, 59, 145;
49
+ --sidebar-teambar-bg: #123582;
50
+ --sidebar-teambar-bg-rgb: 18, 53, 130;
51
+ --sidebar-text: var(--color-neutral-0);
52
+ --sidebar-text-rgb: var(--color-neutral-0-rgb);
53
+ --sidebar-text-hover-bg: #2a58ba;
54
+ --sidebar-text-hover-bg-rgb: 42, 88, 186;
55
+ --sidebar-text-active-border: var(--color-cyan-300);
56
+ --sidebar-text-active-border-rgb: var(--color-cyan-300-rgb);
57
+ --sidebar-text-active-color: var(--color-neutral-0);
58
+ --sidebar-unread-text: var(--color-neutral-0);
59
+ --sidebar-header-text-color: var(--color-neutral-0);
60
+ --center-channel-bg: var(--color-neutral-0);
61
+ --center-channel-bg-rgb: var(--color-neutral-0-rgb);
62
+ --center-channel-color: var(--color-neutral-900);
63
+ --center-channel-color-rgb: var(--color-neutral-900-rgb);
64
+ --button-bg: var(--color-blue-500);
65
+ --button-bg-rgb: var(--color-blue-500-rgb);
66
+ --button-color: var(--color-neutral-0);
67
+ --link-color: var(--color-blue-600);
68
+ --link-color-rgb: var(--color-blue-600-rgb);
69
+ --error-text: var(--color-red-300);
70
+ --error-text-color-rgb: var(--color-red-300-rgb);
71
+ --mention-bg: var(--color-neutral-0);
72
+ --mention-bg-rgb: var(--color-neutral-0-rgb);
73
+ --mention-color: #1543a3;
74
+ --mention-color-rgb: 21, 67, 163;
75
+ --mention-highlight-bg: var(--color-teal-200);
76
+ --mention-highlight-link: var(--color-teal-800);
77
+ --new-message-separator: var(--color-yellow-400);
78
+ --online-indicator: var(--color-green-500);
79
+ --away-indicator: var(--color-yellow-500);
80
+ --dnd-indicator: var(--color-red-400);
81
+ --calls-bg: #091d48;
82
+ --calls-bg-rgb: 9, 29, 72;
83
+ }
84
+
85
+ [data-theme=quartz] {
86
+ --sidebar-bg: var(--color-neutral-50);
87
+ --sidebar-bg-rgb: var(--color-neutral-50-rgb);
88
+ --sidebar-header-bg: #ebecef;
89
+ --sidebar-header-bg-rgb: 235, 236, 239;
90
+ --sidebar-teambar-bg: #e5e7eb;
91
+ --sidebar-teambar-bg-rgb: 229, 231, 235;
92
+ --sidebar-text: var(--color-neutral-1100);
93
+ --sidebar-text-rgb: var(--color-neutral-1100-rgb);
94
+ --sidebar-text-hover-bg: #e8eaed;
95
+ --sidebar-text-hover-bg-rgb: 232, 234, 237;
96
+ --sidebar-text-active-border: var(--color-cyan-500);
97
+ --sidebar-text-active-border-rgb: var(--color-cyan-500-rgb);
98
+ --sidebar-text-active-color: var(--color-neutral-1100);
99
+ --sidebar-unread-text: var(--color-neutral-1100);
100
+ --sidebar-header-text-color: var(--color-neutral-1100);
101
+ --center-channel-bg: var(--color-neutral-0);
102
+ --center-channel-bg-rgb: var(--color-neutral-0-rgb);
103
+ --center-channel-color: var(--color-neutral-900);
104
+ --center-channel-color-rgb: var(--color-neutral-900-rgb);
105
+ --button-bg: var(--color-blue-500);
106
+ --button-bg-rgb: var(--color-blue-500-rgb);
107
+ --button-color: var(--color-neutral-0);
108
+ --link-color: var(--color-blue-600);
109
+ --link-color-rgb: var(--color-blue-600-rgb);
110
+ --error-text: var(--color-red-400);
111
+ --error-text-color-rgb: var(--color-red-400-rgb);
112
+ --mention-bg: var(--color-blue-500);
113
+ --mention-bg-rgb: var(--color-blue-500-rgb);
114
+ --mention-color: var(--color-neutral-0);
115
+ --mention-color-rgb: var(--color-neutral-0-rgb);
116
+ --mention-highlight-bg: var(--color-teal-200);
117
+ --mention-highlight-link: var(--color-teal-800);
118
+ --new-message-separator: var(--color-teal-600);
119
+ --online-indicator: var(--color-green-500);
120
+ --away-indicator: var(--color-yellow-500);
121
+ --dnd-indicator: var(--color-red-400);
122
+ --calls-bg: var(--color-neutral-1050);
123
+ --calls-bg-rgb: var(--color-neutral-1050-rgb);
124
+ }
125
+
126
+ [data-theme=indigo] {
127
+ --sidebar-bg: #151e32;
128
+ --sidebar-bg-rgb: 21, 30, 50;
129
+ --sidebar-header-bg: #182339;
130
+ --sidebar-header-bg-rgb: 24, 35, 57;
131
+ --sidebar-teambar-bg: #1c2740;
132
+ --sidebar-teambar-bg-rgb: 28, 39, 64;
133
+ --sidebar-text: var(--color-neutral-0);
134
+ --sidebar-text-rgb: var(--color-neutral-0-rgb);
135
+ --sidebar-text-hover-bg: #222c3f;
136
+ --sidebar-text-hover-bg-rgb: 34, 44, 63;
137
+ --sidebar-text-active-border: #4a7ce8;
138
+ --sidebar-text-active-border-rgb: 74, 124, 232;
139
+ --sidebar-text-active-color: var(--color-neutral-0);
140
+ --sidebar-unread-text: var(--color-neutral-0);
141
+ --sidebar-header-text-color: var(--color-neutral-0);
142
+ --center-channel-bg: #111827;
143
+ --center-channel-bg-rgb: 17, 24, 39;
144
+ --center-channel-color: var(--color-neutral-150);
145
+ --center-channel-color-rgb: var(--color-neutral-150-rgb);
146
+ --button-bg: #4a7ce8;
147
+ --button-bg-rgb: 74, 124, 232;
148
+ --button-color: var(--color-neutral-0);
149
+ --link-color: var(--color-blue-300);
150
+ --link-color-rgb: var(--color-blue-300-rgb);
151
+ --error-text: var(--color-red-300);
152
+ --error-text-color-rgb: var(--color-red-300-rgb);
153
+ --mention-bg: #4a7ce8;
154
+ --mention-bg-rgb: 74, 124, 232;
155
+ --mention-color: var(--color-neutral-0);
156
+ --mention-color-rgb: var(--color-neutral-0-rgb);
157
+ --mention-highlight-bg: var(--color-blue-700);
158
+ --mention-highlight-link: var(--color-teal-100);
159
+ --new-message-separator: var(--color-yellow-400);
160
+ --online-indicator: var(--color-green-500);
161
+ --away-indicator: var(--color-yellow-500);
162
+ --dnd-indicator: var(--color-red-400);
163
+ --calls-bg: #222c3f;
164
+ --calls-bg-rgb: 34, 44, 63;
165
+ }
166
+
167
+ [data-theme=onyx] {
168
+ --sidebar-bg: #202228;
169
+ --sidebar-bg-rgb: 32, 34, 40;
170
+ --sidebar-header-bg: #24272d;
171
+ --sidebar-header-bg-rgb: 36, 39, 45;
172
+ --sidebar-teambar-bg: #292c33;
173
+ --sidebar-teambar-bg-rgb: 41, 44, 51;
174
+ --sidebar-text: var(--color-neutral-0);
175
+ --sidebar-text-rgb: var(--color-neutral-0-rgb);
176
+ --sidebar-text-hover-bg: #25262a;
177
+ --sidebar-text-hover-bg-rgb: 37, 38, 42;
178
+ --sidebar-text-active-border: #4a7ce8;
179
+ --sidebar-text-active-border-rgb: 74, 124, 232;
180
+ --sidebar-text-active-color: var(--color-neutral-0);
181
+ --sidebar-unread-text: var(--color-neutral-0);
182
+ --sidebar-header-text-color: var(--color-neutral-0);
183
+ --center-channel-bg: #191b1f;
184
+ --center-channel-bg-rgb: 25, 27, 31;
185
+ --center-channel-color: var(--color-neutral-150);
186
+ --center-channel-color-rgb: var(--color-neutral-150-rgb);
187
+ --button-bg: #4a7ce8;
188
+ --button-bg-rgb: 74, 124, 232;
189
+ --button-color: var(--color-neutral-0);
190
+ --link-color: var(--color-blue-300);
191
+ --link-color-rgb: var(--color-blue-300-rgb);
192
+ --error-text: var(--color-red-300);
193
+ --error-text-color-rgb: var(--color-red-300-rgb);
194
+ --mention-bg: #4a7ce8;
195
+ --mention-bg-rgb: 74, 124, 232;
196
+ --mention-color: var(--color-neutral-0);
197
+ --mention-color-rgb: var(--color-neutral-0-rgb);
198
+ --mention-highlight-bg: var(--color-teal-800);
199
+ --mention-highlight-link: var(--color-teal-100);
200
+ --new-message-separator: var(--color-yellow-400);
201
+ --online-indicator: var(--color-green-500);
202
+ --away-indicator: var(--color-yellow-500);
203
+ --dnd-indicator: var(--color-red-400);
204
+ --calls-bg: #24262d;
205
+ --calls-bg-rgb: 36, 38, 45;
206
+ }
207
+
1
208
  *,
2
209
  *::before,
3
210
  *::after {
package/dist/compass-ui.css CHANGED
@@ -300,209 +300,3 @@
300
300
  --semantic-color-danger: var(--color-red-500-rgb);
301
301
  }
302
302
  }
303
- :root,
304
- [data-theme=denim] {
305
- --sidebar-bg: var(--color-indigo-500);
306
- --sidebar-bg-rgb: var(--color-indigo-500-rgb);
307
- --sidebar-header-bg: #192a4d;
308
- --sidebar-header-bg-rgb: 25, 42, 77;
309
- --sidebar-teambar-bg: #162545;
310
- --sidebar-teambar-bg-rgb: 22, 37, 69;
311
- --sidebar-text: var(--color-neutral-0);
312
- --sidebar-text-rgb: var(--color-neutral-0-rgb);
313
- --sidebar-text-hover-bg: var(--color-indigo-400);
314
- --sidebar-text-hover-bg-rgb: var(--color-indigo-400-rgb);
315
- --sidebar-text-active-border: var(--color-blue-300);
316
- --sidebar-text-active-border-rgb: var(--color-blue-300-rgb);
317
- --sidebar-text-active-color: var(--color-neutral-0);
318
- --sidebar-unread-text: var(--color-neutral-0);
319
- --sidebar-header-text-color: var(--color-neutral-0);
320
- --center-channel-bg: var(--color-neutral-0);
321
- --center-channel-bg-rgb: var(--color-neutral-0-rgb);
322
- --center-channel-color: var(--color-neutral-900);
323
- --center-channel-color-rgb: var(--color-neutral-900-rgb);
324
- --button-bg: var(--color-blue-500);
325
- --button-bg-rgb: var(--color-blue-500-rgb);
326
- --button-color: var(--color-neutral-0);
327
- --button-color-rgb: var(--color-neutral-0-rgb);
328
- --link-color: var(--color-blue-600);
329
- --link-color-rgb: var(--color-blue-600-rgb);
330
- --error-text: var(--color-red-400);
331
- --error-text-color-rgb: var(--color-red-400-rgb);
332
- --mention-bg: var(--color-neutral-0);
333
- --mention-bg-rgb: var(--color-neutral-0-rgb);
334
- --mention-color: var(--color-indigo-500);
335
- --mention-color-rgb: var(--color-indigo-500-rgb);
336
- --mention-highlight-bg: var(--color-yellow-200);
337
- --mention-highlight-link: var(--color-neutral-1100);
338
- --new-message-separator: var(--color-yellow-600);
339
- --online-indicator: var(--color-green-500);
340
- --away-indicator: var(--color-yellow-500);
341
- --dnd-indicator: var(--color-red-400);
342
- --calls-bg: var(--color-indigo-600);
343
- --calls-bg-rgb: var(--color-indigo-600-rgb);
344
- }
345
-
346
- [data-theme=sapphire] {
347
- --sidebar-bg: #1543a3;
348
- --sidebar-bg-rgb: 21, 67, 163;
349
- --sidebar-header-bg: #123b91;
350
- --sidebar-header-bg-rgb: 18, 59, 145;
351
- --sidebar-teambar-bg: #123582;
352
- --sidebar-teambar-bg-rgb: 18, 53, 130;
353
- --sidebar-text: var(--color-neutral-0);
354
- --sidebar-text-rgb: var(--color-neutral-0-rgb);
355
- --sidebar-text-hover-bg: #2a58ba;
356
- --sidebar-text-hover-bg-rgb: 42, 88, 186;
357
- --sidebar-text-active-border: var(--color-cyan-300);
358
- --sidebar-text-active-border-rgb: var(--color-cyan-300-rgb);
359
- --sidebar-text-active-color: var(--color-neutral-0);
360
- --sidebar-unread-text: var(--color-neutral-0);
361
- --sidebar-header-text-color: var(--color-neutral-0);
362
- --center-channel-bg: var(--color-neutral-0);
363
- --center-channel-bg-rgb: var(--color-neutral-0-rgb);
364
- --center-channel-color: var(--color-neutral-900);
365
- --center-channel-color-rgb: var(--color-neutral-900-rgb);
366
- --button-bg: var(--color-blue-500);
367
- --button-bg-rgb: var(--color-blue-500-rgb);
368
- --button-color: var(--color-neutral-0);
369
- --link-color: var(--color-blue-600);
370
- --link-color-rgb: var(--color-blue-600-rgb);
371
- --error-text: var(--color-red-300);
372
- --error-text-color-rgb: var(--color-red-300-rgb);
373
- --mention-bg: var(--color-neutral-0);
374
- --mention-bg-rgb: var(--color-neutral-0-rgb);
375
- --mention-color: #1543a3;
376
- --mention-color-rgb: 21, 67, 163;
377
- --mention-highlight-bg: var(--color-teal-200);
378
- --mention-highlight-link: var(--color-teal-800);
379
- --new-message-separator: var(--color-yellow-400);
380
- --online-indicator: var(--color-green-500);
381
- --away-indicator: var(--color-yellow-500);
382
- --dnd-indicator: var(--color-red-400);
383
- --calls-bg: #091d48;
384
- --calls-bg-rgb: 9, 29, 72;
385
- }
386
-
387
- [data-theme=quartz] {
388
- --sidebar-bg: var(--color-neutral-50);
389
- --sidebar-bg-rgb: var(--color-neutral-50-rgb);
390
- --sidebar-header-bg: #ebecef;
391
- --sidebar-header-bg-rgb: 235, 236, 239;
392
- --sidebar-teambar-bg: #e5e7eb;
393
- --sidebar-teambar-bg-rgb: 229, 231, 235;
394
- --sidebar-text: var(--color-neutral-1100);
395
- --sidebar-text-rgb: var(--color-neutral-1100-rgb);
396
- --sidebar-text-hover-bg: #e8eaed;
397
- --sidebar-text-hover-bg-rgb: 232, 234, 237;
398
- --sidebar-text-active-border: var(--color-cyan-500);
399
- --sidebar-text-active-border-rgb: var(--color-cyan-500-rgb);
400
- --sidebar-text-active-color: var(--color-neutral-1100);
401
- --sidebar-unread-text: var(--color-neutral-1100);
402
- --sidebar-header-text-color: var(--color-neutral-1100);
403
- --center-channel-bg: var(--color-neutral-0);
404
- --center-channel-bg-rgb: var(--color-neutral-0-rgb);
405
- --center-channel-color: var(--color-neutral-900);
406
- --center-channel-color-rgb: var(--color-neutral-900-rgb);
407
- --button-bg: var(--color-blue-500);
408
- --button-bg-rgb: var(--color-blue-500-rgb);
409
- --button-color: var(--color-neutral-0);
410
- --link-color: var(--color-blue-600);
411
- --link-color-rgb: var(--color-blue-600-rgb);
412
- --error-text: var(--color-red-400);
413
- --error-text-color-rgb: var(--color-red-400-rgb);
414
- --mention-bg: var(--color-blue-500);
415
- --mention-bg-rgb: var(--color-blue-500-rgb);
416
- --mention-color: var(--color-neutral-0);
417
- --mention-color-rgb: var(--color-neutral-0-rgb);
418
- --mention-highlight-bg: var(--color-teal-200);
419
- --mention-highlight-link: var(--color-teal-800);
420
- --new-message-separator: var(--color-teal-600);
421
- --online-indicator: var(--color-green-500);
422
- --away-indicator: var(--color-yellow-500);
423
- --dnd-indicator: var(--color-red-400);
424
- --calls-bg: var(--color-neutral-1050);
425
- --calls-bg-rgb: var(--color-neutral-1050-rgb);
426
- }
427
-
428
- [data-theme=indigo] {
429
- --sidebar-bg: #151e32;
430
- --sidebar-bg-rgb: 21, 30, 50;
431
- --sidebar-header-bg: #182339;
432
- --sidebar-header-bg-rgb: 24, 35, 57;
433
- --sidebar-teambar-bg: #1c2740;
434
- --sidebar-teambar-bg-rgb: 28, 39, 64;
435
- --sidebar-text: var(--color-neutral-0);
436
- --sidebar-text-rgb: var(--color-neutral-0-rgb);
437
- --sidebar-text-hover-bg: #222c3f;
438
- --sidebar-text-hover-bg-rgb: 34, 44, 63;
439
- --sidebar-text-active-border: #4a7ce8;
440
- --sidebar-text-active-border-rgb: 74, 124, 232;
441
- --sidebar-text-active-color: var(--color-neutral-0);
442
- --sidebar-unread-text: var(--color-neutral-0);
443
- --sidebar-header-text-color: var(--color-neutral-0);
444
- --center-channel-bg: #111827;
445
- --center-channel-bg-rgb: 17, 24, 39;
446
- --center-channel-color: var(--color-neutral-150);
447
- --center-channel-color-rgb: var(--color-neutral-150-rgb);
448
- --button-bg: #4a7ce8;
449
- --button-bg-rgb: 74, 124, 232;
450
- --button-color: var(--color-neutral-0);
451
- --link-color: var(--color-blue-300);
452
- --link-color-rgb: var(--color-blue-300-rgb);
453
- --error-text: var(--color-red-300);
454
- --error-text-color-rgb: var(--color-red-300-rgb);
455
- --mention-bg: #4a7ce8;
456
- --mention-bg-rgb: 74, 124, 232;
457
- --mention-color: var(--color-neutral-0);
458
- --mention-color-rgb: var(--color-neutral-0-rgb);
459
- --mention-highlight-bg: var(--color-blue-700);
460
- --mention-highlight-link: var(--color-teal-100);
461
- --new-message-separator: var(--color-yellow-400);
462
- --online-indicator: var(--color-green-500);
463
- --away-indicator: var(--color-yellow-500);
464
- --dnd-indicator: var(--color-red-400);
465
- --calls-bg: #222c3f;
466
- --calls-bg-rgb: 34, 44, 63;
467
- }
468
-
469
- [data-theme=onyx] {
470
- --sidebar-bg: #202228;
471
- --sidebar-bg-rgb: 32, 34, 40;
472
- --sidebar-header-bg: #24272d;
473
- --sidebar-header-bg-rgb: 36, 39, 45;
474
- --sidebar-teambar-bg: #292c33;
475
- --sidebar-teambar-bg-rgb: 41, 44, 51;
476
- --sidebar-text: var(--color-neutral-0);
477
- --sidebar-text-rgb: var(--color-neutral-0-rgb);
478
- --sidebar-text-hover-bg: #25262a;
479
- --sidebar-text-hover-bg-rgb: 37, 38, 42;
480
- --sidebar-text-active-border: #4a7ce8;
481
- --sidebar-text-active-border-rgb: 74, 124, 232;
482
- --sidebar-text-active-color: var(--color-neutral-0);
483
- --sidebar-unread-text: var(--color-neutral-0);
484
- --sidebar-header-text-color: var(--color-neutral-0);
485
- --center-channel-bg: #191b1f;
486
- --center-channel-bg-rgb: 25, 27, 31;
487
- --center-channel-color: var(--color-neutral-150);
488
- --center-channel-color-rgb: var(--color-neutral-150-rgb);
489
- --button-bg: #4a7ce8;
490
- --button-bg-rgb: 74, 124, 232;
491
- --button-color: var(--color-neutral-0);
492
- --link-color: var(--color-blue-300);
493
- --link-color-rgb: var(--color-blue-300-rgb);
494
- --error-text: var(--color-red-300);
495
- --error-text-color-rgb: var(--color-red-300-rgb);
496
- --mention-bg: #4a7ce8;
497
- --mention-bg-rgb: 74, 124, 232;
498
- --mention-color: var(--color-neutral-0);
499
- --mention-color-rgb: var(--color-neutral-0-rgb);
500
- --mention-highlight-bg: var(--color-teal-800);
501
- --mention-highlight-link: var(--color-teal-100);
502
- --new-message-separator: var(--color-yellow-400);
503
- --online-indicator: var(--color-green-500);
504
- --away-indicator: var(--color-yellow-500);
505
- --dnd-indicator: var(--color-red-400);
506
- --calls-bg: #24262d;
507
- --calls-bg-rgb: 36, 38, 45;
508
- }
package/package.json CHANGED
@@ -1,7 +1,11 @@
1
1
  {
2
2
  "name": "@mattermost/compass-ui",
3
- "version": "0.1.0-alpha.1",
3
+ "version": "0.1.0-alpha.2",
4
4
  "description": "Compass design system UI components for Mattermost products",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "git+https://github.com/mattermost/compass-design.git"
8
+ },
5
9
  "type": "module",
6
10
  "sideEffects": [
7
11
  "**/*.css",