@bugabinga/pi-ext-diff-review 0.1.0

package/browser/shadow-css.ts

@@ -0,0 +1,179 @@
+import { CODE_FONT, NUGU_DARK, NUGU_LIGHT } from "./theme.js";
+
+export const DIFF_FONT_CSS = `
+  :host {
+    --diffs-font-family: ${CODE_FONT};
+    --diffs-header-font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+    --diffs-light: ${NUGU_LIGHT.fg};
+    --diffs-dark: ${NUGU_DARK.fg};
+    --diffs-light-bg: ${NUGU_LIGHT.bg};
+    --diffs-dark-bg: ${NUGU_DARK.bg};
+    --diffs-light-addition-color: ${NUGU_LIGHT.info};
+    --diffs-dark-addition-color: ${NUGU_DARK.info};
+    --diffs-light-deletion-color: ${NUGU_LIGHT.error};
+    --diffs-dark-deletion-color: ${NUGU_DARK.error};
+    --diffs-light-modified-color: ${NUGU_LIGHT.accent};
+    --diffs-dark-modified-color: ${NUGU_DARK.accent};
+    --diffs-bg-context-override: light-dark(color-mix(in srgb, ${NUGU_LIGHT.bg} 88%, white), color-mix(in srgb, ${NUGU_DARK.bg} 82%, ${NUGU_DARK.panel}));
+    --diffs-bg-context-gutter-override: light-dark(color-mix(in srgb, ${NUGU_LIGHT.panel} 80%, white), color-mix(in srgb, ${NUGU_DARK.panel} 80%, ${NUGU_DARK.bg}));
+    --diffs-bg-separator-override: light-dark(${NUGU_LIGHT.panel}, ${NUGU_DARK.panel});
+    --diffs-fg-number-override: light-dark(${NUGU_LIGHT.muted}, ${NUGU_DARK.muted});
+    --diffs-foreground: light-dark(${NUGU_LIGHT.fg}, ${NUGU_DARK.fg});
+    --diffs-background: light-dark(${NUGU_LIGHT.bg}, ${NUGU_DARK.bg});
+    --diffs-token-string: light-dark(${NUGU_LIGHT.focus}, ${NUGU_DARK.focus});
+    --diffs-token-string-expression: light-dark(${NUGU_LIGHT.focus}, ${NUGU_DARK.focus});
+    --diffs-token-comment: light-dark(${NUGU_LIGHT.important}, ${NUGU_DARK.important});
+    --diffs-token-constant: light-dark(${NUGU_LIGHT.focus}, ${NUGU_DARK.focus});
+    --diffs-token-keyword: light-dark(${NUGU_LIGHT.muted}, ${NUGU_DARK.muted});
+    --diffs-token-parameter: light-dark(${NUGU_LIGHT.warning}, ${NUGU_DARK.warning});
+    --diffs-token-function: light-dark(${NUGU_LIGHT.fg}, ${NUGU_DARK.fg});
+    --diffs-token-punctuation: light-dark(${NUGU_LIGHT.muted}, ${NUGU_DARK.muted});
+    --diffs-token-link: light-dark(${NUGU_LIGHT.info}, ${NUGU_DARK.info});
+    --diffs-token-inserted: light-dark(${NUGU_LIGHT.info}, ${NUGU_DARK.info});
+    --diffs-token-deleted: light-dark(${NUGU_LIGHT.error}, ${NUGU_DARK.error});
+    --diffs-token-changed: light-dark(${NUGU_LIGHT.accent}, ${NUGU_DARK.accent});
+  }
+  pre, code, [data-line], [data-code], [data-content], [data-line-number] {
+    font-family: ${CODE_FONT} !important;
+    font-size: 12px;
+    line-height: 1.55;
+  }
+  @keyframes diff-review-search-highlight {
+    0%, 72% {
+      background-color: #c026d3;
+      color: #fff;
+      box-shadow: inset 0 0 0 2px #f0abfc, 0 0 0 2px #c026d3;
+      outline-color: #f0abfc;
+    }
+    100% {
+      background-color: transparent;
+      box-shadow: none;
+      outline-color: transparent;
+    }
+  }
+  [data-line].search-highlight,
+  [data-column-number].search-highlight {
+    animation: diff-review-search-highlight 2.4s ease-out;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+  [data-line].search-highlight *,
+  [data-column-number].search-highlight * {
+    color: inherit !important;
+  }
+`;
+
+export const TREE_CSS = `
+  :host {
+    --trees-fg-override: var(--fg);
+    --trees-fg-muted-override: var(--muted);
+    --trees-bg-override: transparent;
+    --trees-bg-muted-override: color-mix(in srgb, var(--focus) 14%, transparent);
+    --trees-input-bg-override: color-mix(in srgb, var(--bg) 74%, var(--panel-2));
+    --trees-search-bg-override: color-mix(in srgb, var(--bg) 74%, var(--panel-2));
+    --trees-search-fg-override: var(--fg);
+    --trees-search-font-weight-override: 500;
+    --trees-density-override: .82;
+    --trees-font-size-override: 12px;
+    --trees-level-gap-override: 5px;
+    --trees-item-padding-x-override: 4px;
+    --trees-item-margin-x-override: 1px;
+    --trees-item-row-gap-override: 3px;
+    --trees-icon-width-override: 13px;
+    --trees-git-lane-width-override: 8px;
+    --trees-action-lane-width-override: 8px;
+    --trees-padding-inline-override: 4px;
+    --trees-accent-override: var(--accent);
+    --trees-selected-bg-override: color-mix(in srgb, var(--accent) 18%, transparent);
+    --trees-selected-fg-override: var(--fg);
+    --trees-focus-ring-color-override: var(--focus);
+    --trees-border-color-override: var(--border);
+    --trees-status-added-override: var(--nugu-info);
+    --trees-status-modified-override: var(--nugu-warning);
+    --trees-status-renamed-override: var(--nugu-content-important-local);
+    --trees-status-deleted-override: var(--nugu-error);
+    --trees-git-added-color-override: var(--nugu-info);
+    --trees-git-modified-color-override: var(--nugu-warning);
+    --trees-git-renamed-color-override: var(--nugu-content-important-local);
+    --trees-git-deleted-color-override: var(--nugu-error);
+    --trees-font-family-override: ${CODE_FONT};
+  }
+  [data-file-tree-virtualized-scroll='true'] {
+    overflow-x: auto;
+  }
+  [data-item-git-status='renamed'] [data-item-section='decoration'] {
+    color: var(--trees-git-renamed-color);
+    font-size: 10px;
+    letter-spacing: .04em;
+    text-transform: uppercase;
+  }
+  [data-item-git-status='ignored'] {
+    opacity: .58;
+    cursor: not-allowed;
+  }
+  [data-item-git-status='ignored'] [data-item-section='content'] {
+    color: var(--trees-fg-muted);
+    text-decoration: line-through;
+    text-decoration-thickness: 1px;
+  }
+  [data-item-git-status='ignored'] [data-item-section='decoration'] {
+    color: var(--trees-fg-muted);
+    font-size: 10px;
+    letter-spacing: .04em;
+    text-transform: uppercase;
+  }
+  [data-file-tree-search-container] {
+    position: relative;
+    display: block !important;
+    padding-inline: var(--trees-padding-inline) !important;
+  }
+  [data-file-tree-search-input] {
+    box-sizing: border-box !important;
+    width: 100% !important;
+    height: 30px !important;
+    min-height: 30px !important;
+    max-height: 30px !important;
+    margin: 0 !important;
+    appearance: none !important;
+    background: color-mix(in srgb, var(--bg) 60%, var(--panel-2)) !important;
+    color: var(--trees-search-fg) !important;
+    caret-color: var(--trees-accent) !important;
+    border-color: color-mix(in srgb, var(--trees-border-color) 70%, transparent) !important;
+    border-radius: 999px !important;
+    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent) !important;
+    padding: 6px 30px 6px 11px !important;
+    font-size: 12px !important;
+    line-height: 18px !important;
+    font-family: ${CODE_FONT} !important;
+  }
+  [data-file-tree-search-input]:focus,
+  [data-file-tree-search-input-fake-focus='true'] {
+    border-color: var(--trees-focus-ring-color) !important;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--trees-focus-ring-color) 22%, transparent) !important;
+    outline: none !important;
+  }
+  .tree-search-clear {
+    position: absolute;
+    right: calc(var(--trees-padding-inline) + 9px);
+    top: 15px;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--trees-fg-muted) 20%, transparent);
+    color: var(--trees-fg-muted);
+    font: 800 14px/1 system-ui, sans-serif;
+    cursor: pointer;
+  }
+  [data-file-tree-search-input]:placeholder-shown + .tree-search-clear {
+    display: none;
+  }
+  .tree-search-clear:hover {
+    background: color-mix(in srgb, var(--trees-accent) 24%, transparent);
+    color: var(--trees-fg);
+  }
+`;