Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100/* Override Pierre's unlayered :host stylesheet using unlayered :root diffs-container. */
:root 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 */}
/* a card whose hunks are still on the wire has pierre's reserved height and nothing to draw in it. the rows it is waiting for are 21px apart, so the wait paints as those rows: a striped fill under a transparent diff background, breathing until the real hunks replace it. geometry is untouched - this is the host's own background, and pierre keeps measuring exactly what it did */:root .codeview diffs-container[data-pending] { --diffs-background: transparent; --diffs-light-bg: transparent; --diffs-dark-bg: transparent; background-image: repeating-linear-gradient( to bottom, var(--color-background-muted) 0 0.75rem, transparent 0.75rem calc(var(--diffs-font-size) * var(--diffs-line-height)) ); animation: bone-breathe 1.6s ease-in-out infinite;}
@keyframes bone-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.7; }}
:root .codeview diffs-container { border-radius: var(--radius-sm, 0.25rem);}
:root diffs-container { @variant dark { --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 */ }}