Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
CSS
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273/* pierre's -override properties must land on the diffs-container element itself, its :host stylesheet beats inheriting from a wrapper. these rules must stay UNLAYERED: pierre injects its :host stylesheet unlayered, which beats anything in @layer. the doubled class lifts specificity above it regardless of order */
diffs-container.diffs-container { --diffs-font-family: var(--font-mono); --diffs-font-size: 0.875rem; --diffs-line-height: 1.5; /* the "tangled" theme (pierre.ts) binds --diffs-bg/--diffs-fg to these and forces color-scheme: dark. without them the bg chain goes guaranteed-invalid and light-dark() is stuck on the dark branch */ --diffs-background: var(--color-background-default); --diffs-foreground: #4c4f69; color-scheme: light dark; --diffs-light-bg: var(--color-background-default); --diffs-dark-bg: var(--color-background-default); --diffs-bg-separator-override: var(--color-background-inset); --diffs-fg-number-override: var(--color-foreground-placeholder);
/* pierre blends line backgrounds 88/12 (light) toward these, so they must be the saturated tokens. the *-color overrides drive the indicators and number gutter */ --diffs-bg-addition-override: var(--color-foreground-success); --diffs-bg-deletion-override: var(--color-foreground-danger); --diffs-addition-color-override: var(--color-foreground-success-strong); --diffs-deletion-color-override: var(--color-foreground-danger-strong);
/* syntax palette — catppuccin latte */ --diffs-token-comment: #7c7f93; /* overlay2 */ --diffs-token-string: #40a02b; /* green */ --diffs-token-string-expression: #40a02b; /* green */ --diffs-token-keyword: #8839ef; /* mauve */ --diffs-token-function: #1e66f5; /* blue */ --diffs-token-constant: #fe640b; /* peach */ --diffs-token-parameter: #e64553; /* maroon */ --diffs-token-punctuation: #7c7f93; /* overlay2 */ --diffs-token-link: #1e66f5; /* blue */ --diffs-token-inserted: #40a02b; /* green */ --diffs-token-deleted: #d20f39; /* red */ --diffs-token-changed: #df8e1d; /* yellow */}
@media (prefers-color-scheme: dark) { diffs-container.diffs-container { --diffs-fg-number-override: var(--color-foreground-subtle);
/* the dark blend is 80/20, hence the subtle backgrounds */ --diffs-bg-addition-override: var(--color-background-success-subtle); --diffs-bg-deletion-override: var(--color-background-danger-subtle); --diffs-addition-color-override: var(--color-foreground-success); --diffs-deletion-color-override: var(--color-foreground-danger);
/* catppuccin mocha text (background stays on the app token) */ --diffs-foreground: #cdd6f4;
/* syntax palette — catppuccin mocha */ --diffs-token-comment: #9399b2; /* overlay2 */ --diffs-token-string: #a6e3a1; /* green */ --diffs-token-string-expression: #a6e3a1; /* green */ --diffs-token-keyword: #cba6f7; /* mauve */ --diffs-token-function: #89b4fa; /* blue */ --diffs-token-constant: #fab387; /* peach */ --diffs-token-parameter: #eba0ac; /* maroon */ --diffs-token-punctuation: #9399b2; /* overlay2 */ --diffs-token-link: #89b4fa; /* blue */ --diffs-token-inserted: #a6e3a1; /* green */ --diffs-token-deleted: #f38ba8; /* red */ --diffs-token-changed: #f9e2af; /* yellow */ }}