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: #4c4f69;
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 — catppuccin latte */
31 --diffs-token-comment: #7c7f93; /* overlay2 */
32 --diffs-token-string: #40a02b; /* green */
33 --diffs-token-string-expression: #40a02b; /* green */
34 --diffs-token-keyword: #8839ef; /* mauve */
35 --diffs-token-function: #1e66f5; /* blue */
36 --diffs-token-constant: #fe640b; /* peach */
37 --diffs-token-parameter: #e64553; /* maroon */
38 --diffs-token-punctuation: #7c7f93; /* overlay2 */
39 --diffs-token-link: #1e66f5; /* blue */
40 --diffs-token-inserted: #40a02b; /* green */
41 --diffs-token-deleted: #d20f39; /* red */
42 --diffs-token-changed: #df8e1d; /* yellow */
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 /* catppuccin mocha text (background stays on the app token) */
56 --diffs-foreground: #cdd6f4;
57
58 /* syntax palette — catppuccin mocha */
59 --diffs-token-comment: #9399b2; /* overlay2 */
60 --diffs-token-string: #a6e3a1; /* green */
61 --diffs-token-string-expression: #a6e3a1; /* green */
62 --diffs-token-keyword: #cba6f7; /* mauve */
63 --diffs-token-function: #89b4fa; /* blue */
64 --diffs-token-constant: #fab387; /* peach */
65 --diffs-token-parameter: #eba0ac; /* maroon */
66 --diffs-token-punctuation: #9399b2; /* overlay2 */
67 --diffs-token-link: #89b4fa; /* blue */
68 --diffs-token-inserted: #a6e3a1; /* green */
69 --diffs-token-deleted: #f38ba8; /* red */
70 --diffs-token-changed: #f9e2af; /* yellow */
71 }
72}