@odla-ai/ui 0.1.1 → 0.1.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.
- package/css/components/chat.css +15 -5
- package/odla-ui.css +15 -5
- package/package.json +1 -1
- package/themes/clay/styles.css +85 -82
- package/themes/clay/theme.json +1 -1
- package/themes/clay/tokens.css +78 -75
- package/themes/clay/ui.css +4 -14
- package/themes/paper/styles.css +56 -55
- package/themes/paper/tokens.css +54 -54
package/css/components/chat.css
CHANGED
|
@@ -58,11 +58,11 @@
|
|
|
58
58
|
}
|
|
59
59
|
.chat-thinking[open] summary { margin-bottom: 6px; }
|
|
60
60
|
|
|
61
|
-
/* Tool-call card (ToolUseBlock): name + streamed args.
|
|
61
|
+
/* Tool-call card (ToolUseBlock): name + streamed args. The accent-colored
|
|
62
|
+
mono name is the card's signal — no stripe. */
|
|
62
63
|
.chat-tool {
|
|
63
64
|
align-self: stretch;
|
|
64
65
|
border: 1px solid var(--ui-border);
|
|
65
|
-
border-left: 3px solid var(--ui-chat-tool-accent);
|
|
66
66
|
border-radius: var(--ui-radius-md);
|
|
67
67
|
background: var(--ui-surface);
|
|
68
68
|
padding: 8px 12px;
|
|
@@ -85,21 +85,31 @@
|
|
|
85
85
|
white-space: pre-wrap;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
/* Tool-result card (ToolResultBlock); .error for isError results.
|
|
88
|
+
/* Tool-result card (ToolResultBlock); .error for isError results.
|
|
89
|
+
Status reads from a leading dot, not an edge stripe. */
|
|
89
90
|
.chat-result {
|
|
90
91
|
align-self: stretch;
|
|
91
92
|
border: 1px solid var(--ui-border);
|
|
92
|
-
border-left: 3px solid var(--ui-good);
|
|
93
93
|
border-radius: var(--ui-radius-md);
|
|
94
94
|
background: var(--ui-surface-2);
|
|
95
95
|
padding: 8px 12px;
|
|
96
96
|
font-size: var(--ui-text-md);
|
|
97
97
|
}
|
|
98
|
+
.chat-result::before {
|
|
99
|
+
content: "";
|
|
100
|
+
display: inline-block;
|
|
101
|
+
width: 6px;
|
|
102
|
+
height: 6px;
|
|
103
|
+
border-radius: var(--ui-radius-pill);
|
|
104
|
+
background: var(--ui-good);
|
|
105
|
+
margin-right: 8px;
|
|
106
|
+
vertical-align: 1px;
|
|
107
|
+
}
|
|
98
108
|
.chat-result.error {
|
|
99
|
-
border-left-color: var(--ui-danger);
|
|
100
109
|
background: var(--ui-danger-soft);
|
|
101
110
|
color: var(--ui-danger);
|
|
102
111
|
}
|
|
112
|
+
.chat-result.error::before { background: var(--ui-danger); }
|
|
103
113
|
|
|
104
114
|
/* Streaming caret appended during text/thinking deltas. */
|
|
105
115
|
.chat-cursor {
|
package/odla-ui.css
CHANGED
|
@@ -729,11 +729,11 @@
|
|
|
729
729
|
}
|
|
730
730
|
.chat-thinking[open] summary { margin-bottom: 6px; }
|
|
731
731
|
|
|
732
|
-
/* Tool-call card (ToolUseBlock): name + streamed args.
|
|
732
|
+
/* Tool-call card (ToolUseBlock): name + streamed args. The accent-colored
|
|
733
|
+
mono name is the card's signal — no stripe. */
|
|
733
734
|
.chat-tool {
|
|
734
735
|
align-self: stretch;
|
|
735
736
|
border: 1px solid var(--ui-border);
|
|
736
|
-
border-left: 3px solid var(--ui-chat-tool-accent);
|
|
737
737
|
border-radius: var(--ui-radius-md);
|
|
738
738
|
background: var(--ui-surface);
|
|
739
739
|
padding: 8px 12px;
|
|
@@ -756,21 +756,31 @@
|
|
|
756
756
|
white-space: pre-wrap;
|
|
757
757
|
}
|
|
758
758
|
|
|
759
|
-
/* Tool-result card (ToolResultBlock); .error for isError results.
|
|
759
|
+
/* Tool-result card (ToolResultBlock); .error for isError results.
|
|
760
|
+
Status reads from a leading dot, not an edge stripe. */
|
|
760
761
|
.chat-result {
|
|
761
762
|
align-self: stretch;
|
|
762
763
|
border: 1px solid var(--ui-border);
|
|
763
|
-
border-left: 3px solid var(--ui-good);
|
|
764
764
|
border-radius: var(--ui-radius-md);
|
|
765
765
|
background: var(--ui-surface-2);
|
|
766
766
|
padding: 8px 12px;
|
|
767
767
|
font-size: var(--ui-text-md);
|
|
768
768
|
}
|
|
769
|
+
.chat-result::before {
|
|
770
|
+
content: "";
|
|
771
|
+
display: inline-block;
|
|
772
|
+
width: 6px;
|
|
773
|
+
height: 6px;
|
|
774
|
+
border-radius: var(--ui-radius-pill);
|
|
775
|
+
background: var(--ui-good);
|
|
776
|
+
margin-right: 8px;
|
|
777
|
+
vertical-align: 1px;
|
|
778
|
+
}
|
|
769
779
|
.chat-result.error {
|
|
770
|
-
border-left-color: var(--ui-danger);
|
|
771
780
|
background: var(--ui-danger-soft);
|
|
772
781
|
color: var(--ui-danger);
|
|
773
782
|
}
|
|
783
|
+
.chat-result.error::before { background: var(--ui-danger); }
|
|
774
784
|
|
|
775
785
|
/* Streaming caret appended during text/thinking deltas. */
|
|
776
786
|
.chat-cursor {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@odla-ai/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "The odla design system: semantic CSS design tokens, five themes (paper, juniper, salt, chalk, clay), class-scoped component styles, canvas chart helpers, and optional React/Preact form components. CSS and JS helpers ship as source; only /components is compiled.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
package/themes/clay/styles.css
CHANGED
|
@@ -1,39 +1,40 @@
|
|
|
1
1
|
/* ══════════════════════════════════════════════════════════════
|
|
2
|
-
CLAY —
|
|
3
|
-
Iowan Old Style serif titles · system sans body ·
|
|
4
|
-
Light: sand
|
|
5
|
-
Dark:
|
|
2
|
+
CLAY — red-earth editorial shell
|
|
3
|
+
Iowan Old Style serif titles · system sans body · iron-oxide red
|
|
4
|
+
Light: rosy sand, warm cream panels, brick accent, ochre/olive.
|
|
5
|
+
Dark: kiln-fired umber, glowing ember accent — never pure black.
|
|
6
6
|
Zero external font requests: system stacks only.
|
|
7
7
|
══════════════════════════════════════════════════════════════ */
|
|
8
8
|
|
|
9
9
|
/* ─── Tokens ─── */
|
|
10
10
|
:root {
|
|
11
|
-
--bg: #
|
|
12
|
-
--panel: #
|
|
13
|
-
--panel-raised: #
|
|
14
|
-
--border: #
|
|
15
|
-
--text: #
|
|
16
|
-
--muted: #
|
|
17
|
-
--faint: #
|
|
18
|
-
--accent: #
|
|
19
|
-
--accent-deep: #
|
|
20
|
-
--accent-dim: rgba(
|
|
21
|
-
--good: #
|
|
22
|
-
--warn: #
|
|
23
|
-
--
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
--code-
|
|
27
|
-
--
|
|
28
|
-
--hl-
|
|
29
|
-
--hl-
|
|
30
|
-
--hl-
|
|
31
|
-
--hl-
|
|
32
|
-
--hl-
|
|
33
|
-
--hl-
|
|
34
|
-
--hl-
|
|
35
|
-
--hl-
|
|
36
|
-
--hl-
|
|
11
|
+
--bg: #f1e6db;
|
|
12
|
+
--panel: #fbf6ef;
|
|
13
|
+
--panel-raised: #eadccd;
|
|
14
|
+
--border: #ddcab7;
|
|
15
|
+
--text: #322620;
|
|
16
|
+
--muted: #71594a;
|
|
17
|
+
--faint: #a58a75;
|
|
18
|
+
--accent: #9c3b1f;
|
|
19
|
+
--accent-deep: #7f2f18;
|
|
20
|
+
--accent-dim: rgba(156, 59, 31, 0.1);
|
|
21
|
+
--good: #6a7d4d;
|
|
22
|
+
--warn: #a4722a;
|
|
23
|
+
--danger: #a52833;
|
|
24
|
+
--shadow: 0 1px 2px rgba(50, 38, 32, 0.04);
|
|
25
|
+
|
|
26
|
+
--code-bg: #eadccd;
|
|
27
|
+
--code-text: #3c2d23;
|
|
28
|
+
--hl-keyword: #9c3b1f;
|
|
29
|
+
--hl-string: #6a7d4d;
|
|
30
|
+
--hl-comment: #a58a75;
|
|
31
|
+
--hl-number: #a4722a;
|
|
32
|
+
--hl-title: #322620;
|
|
33
|
+
--hl-attr: #4e6b8e;
|
|
34
|
+
--hl-type: #7b568e;
|
|
35
|
+
--hl-meta: #8c6a80;
|
|
36
|
+
--hl-addition: #6a7d4d;
|
|
37
|
+
--hl-deletion: #a52833;
|
|
37
38
|
|
|
38
39
|
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
39
40
|
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
|
|
@@ -43,62 +44,64 @@
|
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
[data-theme="dark"] {
|
|
46
|
-
--bg: #
|
|
47
|
-
--panel: #
|
|
48
|
-
--panel-raised: #
|
|
49
|
-
--border: #
|
|
50
|
-
--text: #
|
|
51
|
-
--muted: #
|
|
52
|
-
--faint: #
|
|
53
|
-
--accent: #
|
|
54
|
-
--accent-deep: #
|
|
55
|
-
--accent-dim: rgba(
|
|
56
|
-
--good: #
|
|
57
|
-
--warn: #
|
|
58
|
-
--
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
--code-
|
|
62
|
-
--
|
|
63
|
-
--hl-
|
|
64
|
-
--hl-
|
|
65
|
-
--hl-
|
|
66
|
-
--hl-
|
|
67
|
-
--hl-
|
|
68
|
-
--hl-
|
|
69
|
-
--hl-
|
|
70
|
-
--hl-
|
|
71
|
-
--hl-
|
|
47
|
+
--bg: #1d1310;
|
|
48
|
+
--panel: #291b15;
|
|
49
|
+
--panel-raised: #33221a;
|
|
50
|
+
--border: #4a3126;
|
|
51
|
+
--text: #f4e7dc;
|
|
52
|
+
--muted: #c2a48f;
|
|
53
|
+
--faint: #8f7261;
|
|
54
|
+
--accent: #e26a3f;
|
|
55
|
+
--accent-deep: #ef8560;
|
|
56
|
+
--accent-dim: rgba(226, 106, 63, 0.16);
|
|
57
|
+
--good: #93ad7b;
|
|
58
|
+
--warn: #d2a052;
|
|
59
|
+
--danger: #e25549;
|
|
60
|
+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
61
|
+
|
|
62
|
+
--code-bg: #291b15;
|
|
63
|
+
--code-text: #e8d6c7;
|
|
64
|
+
--hl-keyword: #e26a3f;
|
|
65
|
+
--hl-string: #93ad7b;
|
|
66
|
+
--hl-comment: #8f7261;
|
|
67
|
+
--hl-number: #d2a052;
|
|
68
|
+
--hl-title: #f4e7dc;
|
|
69
|
+
--hl-attr: #93a9c9;
|
|
70
|
+
--hl-type: #b18fcd;
|
|
71
|
+
--hl-meta: #b092bb;
|
|
72
|
+
--hl-addition: #93ad7b;
|
|
73
|
+
--hl-deletion: #e25549;
|
|
72
74
|
}
|
|
73
75
|
|
|
74
76
|
@media (prefers-color-scheme: dark) {
|
|
75
77
|
:root:not([data-theme="light"]) {
|
|
76
|
-
--bg: #
|
|
77
|
-
--panel: #
|
|
78
|
-
--panel-raised: #
|
|
79
|
-
--border: #
|
|
80
|
-
--text: #
|
|
81
|
-
--muted: #
|
|
82
|
-
--faint: #
|
|
83
|
-
--accent: #
|
|
84
|
-
--accent-deep: #
|
|
85
|
-
--accent-dim: rgba(
|
|
86
|
-
--good: #
|
|
87
|
-
--warn: #
|
|
88
|
-
--
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
--code-
|
|
92
|
-
--
|
|
93
|
-
--hl-
|
|
94
|
-
--hl-
|
|
95
|
-
--hl-
|
|
96
|
-
--hl-
|
|
97
|
-
--hl-
|
|
98
|
-
--hl-
|
|
99
|
-
--hl-
|
|
100
|
-
--hl-
|
|
101
|
-
--hl-
|
|
78
|
+
--bg: #1d1310;
|
|
79
|
+
--panel: #291b15;
|
|
80
|
+
--panel-raised: #33221a;
|
|
81
|
+
--border: #4a3126;
|
|
82
|
+
--text: #f4e7dc;
|
|
83
|
+
--muted: #c2a48f;
|
|
84
|
+
--faint: #8f7261;
|
|
85
|
+
--accent: #e26a3f;
|
|
86
|
+
--accent-deep: #ef8560;
|
|
87
|
+
--accent-dim: rgba(226, 106, 63, 0.16);
|
|
88
|
+
--good: #93ad7b;
|
|
89
|
+
--warn: #d2a052;
|
|
90
|
+
--danger: #e25549;
|
|
91
|
+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
92
|
+
|
|
93
|
+
--code-bg: #291b15;
|
|
94
|
+
--code-text: #e8d6c7;
|
|
95
|
+
--hl-keyword: #e26a3f;
|
|
96
|
+
--hl-string: #93ad7b;
|
|
97
|
+
--hl-comment: #8f7261;
|
|
98
|
+
--hl-number: #d2a052;
|
|
99
|
+
--hl-title: #f4e7dc;
|
|
100
|
+
--hl-attr: #93a9c9;
|
|
101
|
+
--hl-type: #b18fcd;
|
|
102
|
+
--hl-meta: #b092bb;
|
|
103
|
+
--hl-addition: #93ad7b;
|
|
104
|
+
--hl-deletion: #e25549;
|
|
102
105
|
}
|
|
103
106
|
}
|
|
104
107
|
|
package/themes/clay/theme.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "clay",
|
|
3
3
|
"label": "Clay",
|
|
4
|
-
"description": "
|
|
4
|
+
"description": "Red-earth editorial shell. Rosy sand background, iron-oxide brick accent, Iowan Old Style serif titles over a system sans body, hairline borders, soft warm shadows. Zero external font requests. Kiln-fired umber dark mode with a glowing ember accent. Diverged from its agnacl roots to stand apart from paper.",
|
|
5
5
|
"fonts": "System stacks only (Iowan Old Style / Palatino serif, system sans, system mono)"
|
|
6
6
|
}
|
package/themes/clay/tokens.css
CHANGED
|
@@ -3,32 +3,33 @@
|
|
|
3
3
|
for app consumers — pair with ui.css. Blog sites use styles.css instead. */
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--bg: #
|
|
7
|
-
--panel: #
|
|
8
|
-
--panel-raised: #
|
|
9
|
-
--border: #
|
|
10
|
-
--text: #
|
|
11
|
-
--muted: #
|
|
12
|
-
--faint: #
|
|
13
|
-
--accent: #
|
|
14
|
-
--accent-deep: #
|
|
15
|
-
--accent-dim: rgba(
|
|
16
|
-
--good: #
|
|
17
|
-
--warn: #
|
|
18
|
-
--
|
|
6
|
+
--bg: #f1e6db;
|
|
7
|
+
--panel: #fbf6ef;
|
|
8
|
+
--panel-raised: #eadccd;
|
|
9
|
+
--border: #ddcab7;
|
|
10
|
+
--text: #322620;
|
|
11
|
+
--muted: #71594a;
|
|
12
|
+
--faint: #a58a75;
|
|
13
|
+
--accent: #9c3b1f;
|
|
14
|
+
--accent-deep: #7f2f18;
|
|
15
|
+
--accent-dim: rgba(156, 59, 31, 0.1);
|
|
16
|
+
--good: #6a7d4d;
|
|
17
|
+
--warn: #a4722a;
|
|
18
|
+
--danger: #a52833;
|
|
19
|
+
--shadow: 0 1px 2px rgba(50, 38, 32, 0.04);
|
|
19
20
|
|
|
20
|
-
--code-bg: #
|
|
21
|
-
--code-text: #
|
|
22
|
-
--hl-keyword: #
|
|
23
|
-
--hl-string: #
|
|
24
|
-
--hl-comment: #
|
|
25
|
-
--hl-number: #
|
|
26
|
-
--hl-title: #
|
|
27
|
-
--hl-attr: #
|
|
28
|
-
--hl-type: #
|
|
29
|
-
--hl-meta: #
|
|
30
|
-
--hl-addition: #
|
|
31
|
-
--hl-deletion: #
|
|
21
|
+
--code-bg: #eadccd;
|
|
22
|
+
--code-text: #3c2d23;
|
|
23
|
+
--hl-keyword: #9c3b1f;
|
|
24
|
+
--hl-string: #6a7d4d;
|
|
25
|
+
--hl-comment: #a58a75;
|
|
26
|
+
--hl-number: #a4722a;
|
|
27
|
+
--hl-title: #322620;
|
|
28
|
+
--hl-attr: #4e6b8e;
|
|
29
|
+
--hl-type: #7b568e;
|
|
30
|
+
--hl-meta: #8c6a80;
|
|
31
|
+
--hl-addition: #6a7d4d;
|
|
32
|
+
--hl-deletion: #a52833;
|
|
32
33
|
|
|
33
34
|
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
34
35
|
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
|
|
@@ -38,61 +39,63 @@
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
[data-theme="dark"] {
|
|
41
|
-
--bg: #
|
|
42
|
-
--panel: #
|
|
43
|
-
--panel-raised: #
|
|
44
|
-
--border: #
|
|
45
|
-
--text: #
|
|
46
|
-
--muted: #
|
|
47
|
-
--faint: #
|
|
48
|
-
--accent: #
|
|
49
|
-
--accent-deep: #
|
|
50
|
-
--accent-dim: rgba(
|
|
51
|
-
--good: #
|
|
52
|
-
--warn: #
|
|
53
|
-
--
|
|
42
|
+
--bg: #1d1310;
|
|
43
|
+
--panel: #291b15;
|
|
44
|
+
--panel-raised: #33221a;
|
|
45
|
+
--border: #4a3126;
|
|
46
|
+
--text: #f4e7dc;
|
|
47
|
+
--muted: #c2a48f;
|
|
48
|
+
--faint: #8f7261;
|
|
49
|
+
--accent: #e26a3f;
|
|
50
|
+
--accent-deep: #ef8560;
|
|
51
|
+
--accent-dim: rgba(226, 106, 63, 0.16);
|
|
52
|
+
--good: #93ad7b;
|
|
53
|
+
--warn: #d2a052;
|
|
54
|
+
--danger: #e25549;
|
|
55
|
+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
54
56
|
|
|
55
|
-
--code-bg: #
|
|
56
|
-
--code-text: #
|
|
57
|
-
--hl-keyword: #
|
|
58
|
-
--hl-string: #
|
|
59
|
-
--hl-comment: #
|
|
60
|
-
--hl-number: #
|
|
61
|
-
--hl-title: #
|
|
62
|
-
--hl-attr: #
|
|
63
|
-
--hl-type: #
|
|
64
|
-
--hl-meta: #
|
|
65
|
-
--hl-addition: #
|
|
66
|
-
--hl-deletion: #
|
|
57
|
+
--code-bg: #291b15;
|
|
58
|
+
--code-text: #e8d6c7;
|
|
59
|
+
--hl-keyword: #e26a3f;
|
|
60
|
+
--hl-string: #93ad7b;
|
|
61
|
+
--hl-comment: #8f7261;
|
|
62
|
+
--hl-number: #d2a052;
|
|
63
|
+
--hl-title: #f4e7dc;
|
|
64
|
+
--hl-attr: #93a9c9;
|
|
65
|
+
--hl-type: #b18fcd;
|
|
66
|
+
--hl-meta: #b092bb;
|
|
67
|
+
--hl-addition: #93ad7b;
|
|
68
|
+
--hl-deletion: #e25549;
|
|
67
69
|
}
|
|
68
70
|
|
|
69
71
|
@media (prefers-color-scheme: dark) {
|
|
70
72
|
:root:not([data-theme="light"]) {
|
|
71
|
-
--bg: #
|
|
72
|
-
--panel: #
|
|
73
|
-
--panel-raised: #
|
|
74
|
-
--border: #
|
|
75
|
-
--text: #
|
|
76
|
-
--muted: #
|
|
77
|
-
--faint: #
|
|
78
|
-
--accent: #
|
|
79
|
-
--accent-deep: #
|
|
80
|
-
--accent-dim: rgba(
|
|
81
|
-
--good: #
|
|
82
|
-
--warn: #
|
|
83
|
-
--
|
|
73
|
+
--bg: #1d1310;
|
|
74
|
+
--panel: #291b15;
|
|
75
|
+
--panel-raised: #33221a;
|
|
76
|
+
--border: #4a3126;
|
|
77
|
+
--text: #f4e7dc;
|
|
78
|
+
--muted: #c2a48f;
|
|
79
|
+
--faint: #8f7261;
|
|
80
|
+
--accent: #e26a3f;
|
|
81
|
+
--accent-deep: #ef8560;
|
|
82
|
+
--accent-dim: rgba(226, 106, 63, 0.16);
|
|
83
|
+
--good: #93ad7b;
|
|
84
|
+
--warn: #d2a052;
|
|
85
|
+
--danger: #e25549;
|
|
86
|
+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
84
87
|
|
|
85
|
-
--code-bg: #
|
|
86
|
-
--code-text: #
|
|
87
|
-
--hl-keyword: #
|
|
88
|
-
--hl-string: #
|
|
89
|
-
--hl-comment: #
|
|
90
|
-
--hl-number: #
|
|
91
|
-
--hl-title: #
|
|
92
|
-
--hl-attr: #
|
|
93
|
-
--hl-type: #
|
|
94
|
-
--hl-meta: #
|
|
95
|
-
--hl-addition: #
|
|
96
|
-
--hl-deletion: #
|
|
88
|
+
--code-bg: #291b15;
|
|
89
|
+
--code-text: #e8d6c7;
|
|
90
|
+
--hl-keyword: #e26a3f;
|
|
91
|
+
--hl-string: #93ad7b;
|
|
92
|
+
--hl-comment: #8f7261;
|
|
93
|
+
--hl-number: #d2a052;
|
|
94
|
+
--hl-title: #f4e7dc;
|
|
95
|
+
--hl-attr: #93a9c9;
|
|
96
|
+
--hl-type: #b18fcd;
|
|
97
|
+
--hl-meta: #b092bb;
|
|
98
|
+
--hl-addition: #93ad7b;
|
|
99
|
+
--hl-deletion: #e25549;
|
|
97
100
|
}
|
|
98
101
|
}
|
package/themes/clay/ui.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* clay/ui.css — maps clay onto the @odla-ai/ui token contract.
|
|
2
|
-
Load alongside styles.css.
|
|
3
|
-
|
|
2
|
+
Load alongside styles.css. Every alias is var()-based (or constant),
|
|
3
|
+
so dark mode tracks automatically — no dark blocks needed here. */
|
|
4
4
|
:root {
|
|
5
5
|
--ui-bg: var(--bg);
|
|
6
6
|
--ui-surface: var(--panel);
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
--ui-good-soft: color-mix(in srgb, var(--good) 13%, transparent);
|
|
19
19
|
--ui-warn: var(--warn);
|
|
20
20
|
--ui-warn-soft: color-mix(in srgb, var(--warn) 13%, transparent);
|
|
21
|
-
--ui-danger:
|
|
22
|
-
--ui-danger-soft: color-mix(in srgb, var(--
|
|
21
|
+
--ui-danger: var(--danger);
|
|
22
|
+
--ui-danger-soft: color-mix(in srgb, var(--danger) 11%, transparent);
|
|
23
23
|
--ui-code-bg: var(--code-bg);
|
|
24
24
|
--ui-code-text: var(--code-text);
|
|
25
25
|
--ui-shadow: var(--shadow);
|
|
@@ -28,13 +28,3 @@
|
|
|
28
28
|
--ui-font-mono: var(--mono);
|
|
29
29
|
--ui-font-display: var(--serif);
|
|
30
30
|
}
|
|
31
|
-
|
|
32
|
-
[data-theme="dark"] {
|
|
33
|
-
--ui-danger: #d0684d;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@media (prefers-color-scheme: dark) {
|
|
37
|
-
:root:not([data-theme="light"]) {
|
|
38
|
-
--ui-danger: #d0684d;
|
|
39
|
-
}
|
|
40
|
-
}
|
package/themes/paper/styles.css
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
PAPER — warm paper dashboard shell
|
|
3
3
|
IBM Plex Sans UI · IBM Plex Mono data · terracotta accent
|
|
4
4
|
Light: white panels on parchment, clay accent (Atlas scheme).
|
|
5
|
-
Dark: warm charcoal
|
|
5
|
+
Dark: deep warm charcoal with clearly raised panels and a bright
|
|
6
|
+
ember accent — warm but crisp, never muddy, never pure black.
|
|
6
7
|
Fonts load separately via @odla-ai/ui/fonts/plex.css.
|
|
7
8
|
Unlike the blog themes, paper is tokens + base only: components
|
|
8
9
|
come from the ui class sheets, layout from the app.
|
|
@@ -43,66 +44,66 @@
|
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
[data-theme="dark"] {
|
|
46
|
-
--bg: #
|
|
47
|
-
--panel: #
|
|
48
|
-
--panel-2: #
|
|
49
|
-
--border: #
|
|
50
|
-
--text: #
|
|
51
|
-
--muted: #
|
|
52
|
-
--faint: #
|
|
53
|
-
--accent: #
|
|
54
|
-
--accent-deep: #
|
|
55
|
-
--accent-dim: rgba(
|
|
56
|
-
--good: #
|
|
57
|
-
--good-dim: rgba(
|
|
58
|
-
--warn: #
|
|
59
|
-
--danger: #
|
|
60
|
-
--shadow: 0 1px 2px rgba(0, 0, 0, 0.
|
|
47
|
+
--bg: #191613;
|
|
48
|
+
--panel: #242019;
|
|
49
|
+
--panel-2: #2e2820;
|
|
50
|
+
--border: #40372a;
|
|
51
|
+
--text: #f2ecdf;
|
|
52
|
+
--muted: #b9ad99;
|
|
53
|
+
--faint: #877c6a;
|
|
54
|
+
--accent: #e08547;
|
|
55
|
+
--accent-deep: #ec9c68;
|
|
56
|
+
--accent-dim: rgba(224, 133, 71, 0.16);
|
|
57
|
+
--good: #97b984;
|
|
58
|
+
--good-dim: rgba(151, 185, 132, 0.16);
|
|
59
|
+
--warn: #dcae57;
|
|
60
|
+
--danger: #e06a4a;
|
|
61
|
+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
61
62
|
|
|
62
|
-
--code-bg: #
|
|
63
|
-
--code-text: #
|
|
64
|
-
--hl-keyword: #
|
|
65
|
-
--hl-string: #
|
|
66
|
-
--hl-comment: #
|
|
67
|
-
--hl-number: #
|
|
68
|
-
--hl-title: #
|
|
69
|
-
--hl-attr: #
|
|
70
|
-
--hl-type: #
|
|
71
|
-
--hl-meta: #
|
|
72
|
-
--hl-addition: #
|
|
73
|
-
--hl-deletion: #
|
|
63
|
+
--code-bg: #242019;
|
|
64
|
+
--code-text: #e4dbc9;
|
|
65
|
+
--hl-keyword: #e08547;
|
|
66
|
+
--hl-string: #97b984;
|
|
67
|
+
--hl-comment: #877c6a;
|
|
68
|
+
--hl-number: #dcae57;
|
|
69
|
+
--hl-title: #f2ecdf;
|
|
70
|
+
--hl-attr: #94adcf;
|
|
71
|
+
--hl-type: #b295d2;
|
|
72
|
+
--hl-meta: #b499c5;
|
|
73
|
+
--hl-addition: #97b984;
|
|
74
|
+
--hl-deletion: #e06a4a;
|
|
74
75
|
}
|
|
75
76
|
|
|
76
77
|
@media (prefers-color-scheme: dark) {
|
|
77
78
|
:root:not([data-theme="light"]) {
|
|
78
|
-
--bg: #
|
|
79
|
-
--panel: #
|
|
80
|
-
--panel-2: #
|
|
81
|
-
--border: #
|
|
82
|
-
--text: #
|
|
83
|
-
--muted: #
|
|
84
|
-
--faint: #
|
|
85
|
-
--accent: #
|
|
86
|
-
--accent-deep: #
|
|
87
|
-
--accent-dim: rgba(
|
|
88
|
-
--good: #
|
|
89
|
-
--good-dim: rgba(
|
|
90
|
-
--warn: #
|
|
91
|
-
--danger: #
|
|
92
|
-
--shadow: 0 1px 2px rgba(0, 0, 0, 0.
|
|
79
|
+
--bg: #191613;
|
|
80
|
+
--panel: #242019;
|
|
81
|
+
--panel-2: #2e2820;
|
|
82
|
+
--border: #40372a;
|
|
83
|
+
--text: #f2ecdf;
|
|
84
|
+
--muted: #b9ad99;
|
|
85
|
+
--faint: #877c6a;
|
|
86
|
+
--accent: #e08547;
|
|
87
|
+
--accent-deep: #ec9c68;
|
|
88
|
+
--accent-dim: rgba(224, 133, 71, 0.16);
|
|
89
|
+
--good: #97b984;
|
|
90
|
+
--good-dim: rgba(151, 185, 132, 0.16);
|
|
91
|
+
--warn: #dcae57;
|
|
92
|
+
--danger: #e06a4a;
|
|
93
|
+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
93
94
|
|
|
94
|
-
--code-bg: #
|
|
95
|
-
--code-text: #
|
|
96
|
-
--hl-keyword: #
|
|
97
|
-
--hl-string: #
|
|
98
|
-
--hl-comment: #
|
|
99
|
-
--hl-number: #
|
|
100
|
-
--hl-title: #
|
|
101
|
-
--hl-attr: #
|
|
102
|
-
--hl-type: #
|
|
103
|
-
--hl-meta: #
|
|
104
|
-
--hl-addition: #
|
|
105
|
-
--hl-deletion: #
|
|
95
|
+
--code-bg: #242019;
|
|
96
|
+
--code-text: #e4dbc9;
|
|
97
|
+
--hl-keyword: #e08547;
|
|
98
|
+
--hl-string: #97b984;
|
|
99
|
+
--hl-comment: #877c6a;
|
|
100
|
+
--hl-number: #dcae57;
|
|
101
|
+
--hl-title: #f2ecdf;
|
|
102
|
+
--hl-attr: #94adcf;
|
|
103
|
+
--hl-type: #b295d2;
|
|
104
|
+
--hl-meta: #b499c5;
|
|
105
|
+
--hl-addition: #97b984;
|
|
106
|
+
--hl-deletion: #e06a4a;
|
|
106
107
|
}
|
|
107
108
|
}
|
|
108
109
|
|
package/themes/paper/tokens.css
CHANGED
|
@@ -36,65 +36,65 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
[data-theme="dark"] {
|
|
39
|
-
--bg: #
|
|
40
|
-
--panel: #
|
|
41
|
-
--panel-2: #
|
|
42
|
-
--border: #
|
|
43
|
-
--text: #
|
|
44
|
-
--muted: #
|
|
45
|
-
--faint: #
|
|
46
|
-
--accent: #
|
|
47
|
-
--accent-deep: #
|
|
48
|
-
--accent-dim: rgba(
|
|
49
|
-
--good: #
|
|
50
|
-
--good-dim: rgba(
|
|
51
|
-
--warn: #
|
|
52
|
-
--danger: #
|
|
53
|
-
--shadow: 0 1px 2px rgba(0, 0, 0, 0.
|
|
39
|
+
--bg: #191613;
|
|
40
|
+
--panel: #242019;
|
|
41
|
+
--panel-2: #2e2820;
|
|
42
|
+
--border: #40372a;
|
|
43
|
+
--text: #f2ecdf;
|
|
44
|
+
--muted: #b9ad99;
|
|
45
|
+
--faint: #877c6a;
|
|
46
|
+
--accent: #e08547;
|
|
47
|
+
--accent-deep: #ec9c68;
|
|
48
|
+
--accent-dim: rgba(224, 133, 71, 0.16);
|
|
49
|
+
--good: #97b984;
|
|
50
|
+
--good-dim: rgba(151, 185, 132, 0.16);
|
|
51
|
+
--warn: #dcae57;
|
|
52
|
+
--danger: #e06a4a;
|
|
53
|
+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
54
54
|
|
|
55
|
-
--code-bg: #
|
|
56
|
-
--code-text: #
|
|
57
|
-
--hl-keyword: #
|
|
58
|
-
--hl-string: #
|
|
59
|
-
--hl-comment: #
|
|
60
|
-
--hl-number: #
|
|
61
|
-
--hl-title: #
|
|
62
|
-
--hl-attr: #
|
|
63
|
-
--hl-type: #
|
|
64
|
-
--hl-meta: #
|
|
65
|
-
--hl-addition: #
|
|
66
|
-
--hl-deletion: #
|
|
55
|
+
--code-bg: #242019;
|
|
56
|
+
--code-text: #e4dbc9;
|
|
57
|
+
--hl-keyword: #e08547;
|
|
58
|
+
--hl-string: #97b984;
|
|
59
|
+
--hl-comment: #877c6a;
|
|
60
|
+
--hl-number: #dcae57;
|
|
61
|
+
--hl-title: #f2ecdf;
|
|
62
|
+
--hl-attr: #94adcf;
|
|
63
|
+
--hl-type: #b295d2;
|
|
64
|
+
--hl-meta: #b499c5;
|
|
65
|
+
--hl-addition: #97b984;
|
|
66
|
+
--hl-deletion: #e06a4a;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
@media (prefers-color-scheme: dark) {
|
|
70
70
|
:root:not([data-theme="light"]) {
|
|
71
|
-
--bg: #
|
|
72
|
-
--panel: #
|
|
73
|
-
--panel-2: #
|
|
74
|
-
--border: #
|
|
75
|
-
--text: #
|
|
76
|
-
--muted: #
|
|
77
|
-
--faint: #
|
|
78
|
-
--accent: #
|
|
79
|
-
--accent-deep: #
|
|
80
|
-
--accent-dim: rgba(
|
|
81
|
-
--good: #
|
|
82
|
-
--good-dim: rgba(
|
|
83
|
-
--warn: #
|
|
84
|
-
--danger: #
|
|
85
|
-
--shadow: 0 1px 2px rgba(0, 0, 0, 0.
|
|
71
|
+
--bg: #191613;
|
|
72
|
+
--panel: #242019;
|
|
73
|
+
--panel-2: #2e2820;
|
|
74
|
+
--border: #40372a;
|
|
75
|
+
--text: #f2ecdf;
|
|
76
|
+
--muted: #b9ad99;
|
|
77
|
+
--faint: #877c6a;
|
|
78
|
+
--accent: #e08547;
|
|
79
|
+
--accent-deep: #ec9c68;
|
|
80
|
+
--accent-dim: rgba(224, 133, 71, 0.16);
|
|
81
|
+
--good: #97b984;
|
|
82
|
+
--good-dim: rgba(151, 185, 132, 0.16);
|
|
83
|
+
--warn: #dcae57;
|
|
84
|
+
--danger: #e06a4a;
|
|
85
|
+
--shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
86
86
|
|
|
87
|
-
--code-bg: #
|
|
88
|
-
--code-text: #
|
|
89
|
-
--hl-keyword: #
|
|
90
|
-
--hl-string: #
|
|
91
|
-
--hl-comment: #
|
|
92
|
-
--hl-number: #
|
|
93
|
-
--hl-title: #
|
|
94
|
-
--hl-attr: #
|
|
95
|
-
--hl-type: #
|
|
96
|
-
--hl-meta: #
|
|
97
|
-
--hl-addition: #
|
|
98
|
-
--hl-deletion: #
|
|
87
|
+
--code-bg: #242019;
|
|
88
|
+
--code-text: #e4dbc9;
|
|
89
|
+
--hl-keyword: #e08547;
|
|
90
|
+
--hl-string: #97b984;
|
|
91
|
+
--hl-comment: #877c6a;
|
|
92
|
+
--hl-number: #dcae57;
|
|
93
|
+
--hl-title: #f2ecdf;
|
|
94
|
+
--hl-attr: #94adcf;
|
|
95
|
+
--hl-type: #b295d2;
|
|
96
|
+
--hl-meta: #b499c5;
|
|
97
|
+
--hl-addition: #97b984;
|
|
98
|
+
--hl-deletion: #e06a4a;
|
|
99
99
|
}
|
|
100
100
|
}
|