alice.pds.demo.boltless.dev
This repository has no description
1/* pierre's -override properties must land on the diffs-container element
2 itself, its :host stylesheet beats inheriting from a wrapper. these rules
3 must stay UNLAYERED: pierre injects its :host stylesheet unlayered, which
4 beats anything in @layer. the doubled class lifts specificity above it
5 regardless of order */
6
7diffs-container.diffs-container {
8 --diffs-font-family: var(--font-mono);
9 --diffs-font-size: 0.875rem;
10 --diffs-line-height: 1.5;
11 /* the "tangled" theme (pierre.ts) binds --diffs-bg/--diffs-fg to these and
12 forces color-scheme: dark. without them the bg chain goes
13 guaranteed-invalid and light-dark() is stuck on the dark branch */
14 --diffs-background: var(--color-background-default);
15 --diffs-foreground: var(--color-foreground-default);
16 color-scheme: light dark;
17 --diffs-light-bg: var(--color-background-default);
18 --diffs-dark-bg: var(--color-background-default);
19 --diffs-bg-separator-override: var(--color-background-inset);
20 --diffs-fg-number-override: var(--color-foreground-placeholder);
21
22 /* pierre blends line backgrounds 88/12 (light) toward these, so they must
23 be the saturated tokens. the *-color overrides drive the indicators and
24 number gutter */
25 --diffs-bg-addition-override: var(--color-foreground-success);
26 --diffs-bg-deletion-override: var(--color-foreground-danger);
27 --diffs-addition-color-override: var(--color-foreground-success-strong);
28 --diffs-deletion-color-override: var(--color-foreground-danger-strong);
29
30 /* syntax palette for the "tangled" theme registered in pierre.ts */
31 --diffs-token-comment: var(--color-foreground-placeholder);
32 --diffs-token-string: var(--color-foreground-success);
33 --diffs-token-string-expression: var(--color-foreground-success);
34 --diffs-token-keyword: #c084fc;
35 --diffs-token-function: #60a5fa;
36 --diffs-token-constant: #f59e0b;
37 --diffs-token-parameter: var(--color-foreground-default);
38 --diffs-token-punctuation: var(--color-foreground-muted);
39 --diffs-token-link: var(--color-foreground-info);
40 --diffs-token-inserted: var(--color-foreground-success);
41 --diffs-token-deleted: var(--color-foreground-danger);
42 --diffs-token-changed: var(--color-foreground-warning);
43}
44
45@media (prefers-color-scheme: dark) {
46 diffs-container.diffs-container {
47 --diffs-fg-number-override: var(--color-foreground-subtle);
48
49 /* the dark blend is 80/20, hence the subtle backgrounds */
50 --diffs-bg-addition-override: var(--color-background-success-subtle);
51 --diffs-bg-deletion-override: var(--color-background-danger-subtle);
52 --diffs-addition-color-override: var(--color-foreground-success);
53 --diffs-deletion-color-override: var(--color-foreground-danger);
54 }
55}