1/* ============================================================
2 Terminal chrome — shared by marketing islands (DeployTerminal,
3 DevTerminal, StateStoreBootstrap, …) on the marketing layout
4 and when embedded in docs MDX. Imported from both
5 global.css (docs) and marketing.css (marketing) so a single
6 source of truth styles either context.
7
8 The React/Astro components carry `.not-content` so Starlight's
9 prose plugin leaves them alone in docs.
10 ============================================================ */
11
12/* Terminals are dark in both themes, so status colors always use their
13 dark-theme values (the light-theme moss/brick fail contrast here). */
14.alc-term,
15.prf-win,
16.expressive-code {
17 --alc-success: #8fb15e;
18 --alc-warn: #e8b04a;
19 --alc-danger: #d76a4e;
20 --alc-info: #6da4b4;
21}
22.alc-term {
23 background: var(--alc-bg-code);
24 border: 1px solid var(--alc-hairline);
25 border-radius: 10px;
26 overflow: hidden;
27 box-shadow: var(--alc-shadow-sm);
28 display: flex;
29 flex-direction: column;
30 min-width: 0;
31 max-width: 100%;
32}
33.alc-term__header {
34 display: flex;
35 align-items: center;
36 gap: 6px;
37 padding: 10px 14px;
38 border-bottom: 1px solid rgba(232, 220, 192, 0.08);
39 background: rgba(255, 255, 255, 0.02);
40}
41.alc-term__title {
42 margin-left: 10px;
43 font-family: var(--alc-font-mono);
44 font-size: 11px;
45 color: var(--alc-code-comment);
46}
47.alc-term__body {
48 margin: 0;
49 padding: 14px 18px;
50 font-family: var(--alc-font-mono);
51 font-size: 12.5px;
52 line-height: 1.65;
53 color: var(--alc-code-var);
54 white-space: pre-wrap;
55 background: transparent;
56 border: none;
57 border-radius: 0;
58 min-height: 296px;
59}
60/* Window dots are only drawn in terminals. Elsewhere they had no size but
61 their flex gaps still pushed the filename right, so drop them. */
62.alc-code-block__dot {
63 display: none;
64}
65.alc-term .alc-code-block__dot {
66 display: block;
67 width: 10px;
68 height: 10px;
69 border-radius: 50%;
70 flex-shrink: 0;
71}
72
73/* Docs MDX context: Starlight wraps content in `.sl-markdown-content`
74 which adds vertical rhythm to direct children. Re-add a small
75 margin so embedded terminals breathe like other block elements. */
76.sl-markdown-content > .alc-term {
77 margin: 1rem 0;
78}
79
80/* ============================================================
81 Expressive Code frames (the file-name tab on docs code blocks)
82
83 The default Starlight rendering of the editor-style frame paints
84 the tab title with a very low-contrast walnut on a near-walnut
85 strip — practically unreadable on the cream page. Force the
86 active tab to use the bright sunrise palette so the file name
87 reads cleanly against the dark code surface. Lives here (loaded by
88 both the docs and the marketing layout) so code blocks in marketing
89 .mdx pages match the docs.
90 ============================================================ */
91
92.expressive-code .frame {
93 --ec-frm-edBg: var(--alc-bg-code);
94 --ec-frm-edTabBarBg: var(--alc-bg-code);
95 --ec-frm-edTabBarBrdBtmCol: var(--alc-walnut-700);
96 --ec-frm-edActTabBg: var(--alc-bg-code);
97 --ec-frm-edActTabFg: var(--alc-walnut-100);
98 --ec-frm-edActTabBrdCol: var(--alc-walnut-700);
99 --ec-frm-edActTabIndTopCol: var(--alc-accent-warm);
100 --ec-frm-edActTabIndBtmCol: transparent;
101 --ec-frm-edTabsMargBlkStart: 0;
102 --ec-frm-edTabsMargInlStart: 0;
103 --ec-frm-trmTtbBg: var(--alc-bg-code);
104 --ec-frm-trmTtbBrdBtmCol: var(--alc-walnut-700);
105 --ec-frm-trmTtbFg: var(--alc-walnut-100);
106}
107
108.expressive-code .frame.has-title:not(.is-terminal) .title {
109 color: var(--alc-walnut-100);
110 font-family: var(--alc-font-mono);
111 font-weight: 500;
112}
113
114.expressive-code .frame.is-terminal .title {
115 color: var(--alc-walnut-100);
116}
117
118/* Twoslash inline error boxes: the default red fails contrast on the
119 dark code surface. */
120.expressive-code .twoslash-error-box-content-title,
121.expressive-code .twoslash-error-box-content-message {
122 color: #f08a78 !important;
123}