Skip to content

Commit d529b8e

Browse files
tonytony
committed
style(theme[safety]): Restore safety badge palette and icons
why: libtmux-mcp still emits safety badge markup, but gp-sphinx dropped the styling that made those badges distinct and readable. what: - add scoped safety badge tokens, semantic fills, borders, and icon prefixes - restore heading and inline safety badge sizing for the existing Safety tier markup - reintroduce code-to-badge spacing for safety badge runs in downstream docs
1 parent 7459002 commit d529b8e

2 files changed

Lines changed: 179 additions & 0 deletions

File tree

‎docs/_static/css/custom.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,95 @@ body[data-theme="dark"] {
368368
background-color: var(--badge-beta-bg);
369369
}
370370

371+
/* ── Safety badge compatibility ─────────────────────────────
372+
* Downstream projects like libtmux-mcp emit safety badges via
373+
* a custom extension. Keep the docs-site copy aligned with the
374+
* packaged theme CSS so previews match downstream builds.
375+
* ────────────────────────────────────────────────────────── */
376+
:root {
377+
--badge-safety-readonly-bg: #1f7a3f;
378+
--badge-safety-readonly-border: #2a8d4d;
379+
--badge-safety-readonly-text: #f3fff7;
380+
--badge-safety-mutating-bg: #b96a1a;
381+
--badge-safety-mutating-border: #cf7a23;
382+
--badge-safety-mutating-text: #fff8ef;
383+
--badge-safety-destructive-bg: #b4232c;
384+
--badge-safety-destructive-border: #cb3640;
385+
--badge-safety-destructive-text: #fff5f5;
386+
}
387+
388+
h2:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]),
389+
h3:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]),
390+
h4:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]) {
391+
display: inline-flex;
392+
align-items: center;
393+
gap: 0.45rem;
394+
}
395+
396+
.sd-badge[role="note"][aria-label^="Safety tier:"] {
397+
gap: 0.28rem;
398+
font-weight: 650;
399+
letter-spacing: 0.01em;
400+
border: 1px solid transparent;
401+
}
402+
403+
.sd-badge[role="note"][aria-label^="Safety tier:"]::before {
404+
font-style: normal;
405+
font-weight: normal;
406+
font-size: 1em;
407+
line-height: 1;
408+
flex-shrink: 0;
409+
}
410+
411+
.sd-badge.sd-bg-success[role="note"][aria-label^="Safety tier:"] {
412+
background-color: var(--badge-safety-readonly-bg) !important;
413+
color: var(--badge-safety-readonly-text) !important;
414+
border-color: var(--badge-safety-readonly-border);
415+
}
416+
417+
.sd-badge.sd-bg-warning[role="note"][aria-label^="Safety tier:"] {
418+
background-color: var(--badge-safety-mutating-bg) !important;
419+
color: var(--badge-safety-mutating-text) !important;
420+
border-color: var(--badge-safety-mutating-border);
421+
}
422+
423+
.sd-badge.sd-bg-danger[role="note"][aria-label^="Safety tier:"] {
424+
background-color: var(--badge-safety-destructive-bg) !important;
425+
color: var(--badge-safety-destructive-text) !important;
426+
border-color: var(--badge-safety-destructive-border);
427+
}
428+
429+
.sd-badge.sd-bg-success[role="note"][aria-label^="Safety tier:"]::before {
430+
content: "🔍";
431+
}
432+
433+
.sd-badge.sd-bg-warning[role="note"][aria-label^="Safety tier:"]::before {
434+
content: "✏️";
435+
}
436+
437+
.sd-badge.sd-bg-danger[role="note"][aria-label^="Safety tier:"]::before {
438+
content: "💣";
439+
}
440+
441+
h2 .sd-badge[role="note"][aria-label^="Safety tier:"],
442+
h3 .sd-badge[role="note"][aria-label^="Safety tier:"] {
443+
font-size: 0.68rem;
444+
padding: 0.17rem 0.4rem;
445+
}
446+
447+
p .sd-badge[role="note"][aria-label^="Safety tier:"],
448+
li .sd-badge[role="note"][aria-label^="Safety tier:"],
449+
td .sd-badge[role="note"][aria-label^="Safety tier:"],
450+
a .sd-badge[role="note"][aria-label^="Safety tier:"] {
451+
font-size: 0.62rem;
452+
padding: 0.12rem 0.32rem;
453+
}
454+
455+
code.docutils + .sd-badge[role="note"][aria-label^="Safety tier:"],
456+
.sd-badge[role="note"][aria-label^="Safety tier:"] + code.docutils {
457+
margin-left: 0.4em;
458+
}
459+
371460
/* Type badges (solid fills) — muted gray, scoped to metadata strip only.
372461
* extension: {bdg-primary} → .sd-badge.sd-bg-primary
373462
* coordinator: {bdg-success} → .sd-badge.sd-bg-success (solid fill)

‎packages/sphinx-gptheme/src/sphinx_gptheme/theme/static/css/custom.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,96 @@ img[src*="codecov.io"] {
243243
-webkit-user-select: none;
244244
}
245245

246+
/* ── Safety badge compatibility ─────────────────────────────
247+
* libtmux-mcp's fastmcp_autodoc extension still emits these
248+
* badges with sphinx-design classes plus a "Safety tier"
249+
* aria-label. Restore the compact palette and heading/list
250+
* ergonomics that downstream docs used before gp-sphinx.
251+
* ────────────────────────────────────────────────────────── */
252+
:root {
253+
--badge-safety-readonly-bg: #1f7a3f;
254+
--badge-safety-readonly-border: #2a8d4d;
255+
--badge-safety-readonly-text: #f3fff7;
256+
--badge-safety-mutating-bg: #b96a1a;
257+
--badge-safety-mutating-border: #cf7a23;
258+
--badge-safety-mutating-text: #fff8ef;
259+
--badge-safety-destructive-bg: #b4232c;
260+
--badge-safety-destructive-border: #cb3640;
261+
--badge-safety-destructive-text: #fff5f5;
262+
}
263+
264+
h2:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]),
265+
h3:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]),
266+
h4:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]) {
267+
display: inline-flex;
268+
align-items: center;
269+
gap: 0.45rem;
270+
}
271+
272+
.sd-badge[role="note"][aria-label^="Safety tier:"] {
273+
gap: 0.28rem;
274+
font-weight: 650;
275+
letter-spacing: 0.01em;
276+
border: 1px solid transparent;
277+
}
278+
279+
.sd-badge[role="note"][aria-label^="Safety tier:"]::before {
280+
font-style: normal;
281+
font-weight: normal;
282+
font-size: 1em;
283+
line-height: 1;
284+
flex-shrink: 0;
285+
}
286+
287+
.sd-badge.sd-bg-success[role="note"][aria-label^="Safety tier:"] {
288+
background-color: var(--badge-safety-readonly-bg) !important;
289+
color: var(--badge-safety-readonly-text) !important;
290+
border-color: var(--badge-safety-readonly-border);
291+
}
292+
293+
.sd-badge.sd-bg-warning[role="note"][aria-label^="Safety tier:"] {
294+
background-color: var(--badge-safety-mutating-bg) !important;
295+
color: var(--badge-safety-mutating-text) !important;
296+
border-color: var(--badge-safety-mutating-border);
297+
}
298+
299+
.sd-badge.sd-bg-danger[role="note"][aria-label^="Safety tier:"] {
300+
background-color: var(--badge-safety-destructive-bg) !important;
301+
color: var(--badge-safety-destructive-text) !important;
302+
border-color: var(--badge-safety-destructive-border);
303+
}
304+
305+
.sd-badge.sd-bg-success[role="note"][aria-label^="Safety tier:"]::before {
306+
content: "🔍";
307+
}
308+
309+
.sd-badge.sd-bg-warning[role="note"][aria-label^="Safety tier:"]::before {
310+
content: "✏️";
311+
}
312+
313+
.sd-badge.sd-bg-danger[role="note"][aria-label^="Safety tier:"]::before {
314+
content: "💣";
315+
}
316+
317+
h2 .sd-badge[role="note"][aria-label^="Safety tier:"],
318+
h3 .sd-badge[role="note"][aria-label^="Safety tier:"] {
319+
font-size: 0.68rem;
320+
padding: 0.17rem 0.4rem;
321+
}
322+
323+
p .sd-badge[role="note"][aria-label^="Safety tier:"],
324+
li .sd-badge[role="note"][aria-label^="Safety tier:"],
325+
td .sd-badge[role="note"][aria-label^="Safety tier:"],
326+
a .sd-badge[role="note"][aria-label^="Safety tier:"] {
327+
font-size: 0.62rem;
328+
padding: 0.12rem 0.32rem;
329+
}
330+
331+
code.docutils + .sd-badge[role="note"][aria-label^="Safety tier:"],
332+
.sd-badge[role="note"][aria-label^="Safety tier:"] + code.docutils {
333+
margin-left: 0.4em;
334+
}
335+
246336
/* ── View Transitions (SPA navigation) ────────────────────
247337
* Crossfade between pages during SPA navigation.
248338
* Browsers without View Transitions API get instant swap.

0 commit comments

Comments
 (0)