@erdemtuna/doc-review 0.11.0 → 0.12.0

package/lib/ui/chrome.css

@@ -71,87 +71,145 @@
 }
 
 @layer legacy {
+  :root, .review-ui {
+    color-scheme: light;
+    --background: #f5f2ea;
+    --foreground: #292e2b;
+    --card: #fffdf7;
+    --card-foreground: #292e2b;
+    --popover: #fffdf7;
+    --popover-foreground: #292e2b;
+    --primary: #17685f;
+    --primary-foreground: #fffdf7;
+    --secondary: #ecede5;
+    --secondary-foreground: #626b65;
+    --muted: #ecede5;
+    --muted-foreground: #626b65;
+    --accent: #e1eeea;
+    --accent-foreground: #17685f;
+    --destructive: #b43c48;
+    --destructive-foreground: #fffdf7;
+    --border: #d8d8cc;
+    --input: #7c877d;
+    --ring: #17685f;
+    --review-added: #eff3e2;
+    --review-added-foreground: #4d6b24;
+    --review-added-border: #82945e;
+    --review-removed: #fcecef;
+    --review-removed-foreground: #b43c48;
+    --review-removed-border: #c88791;
+    --review-modified: #fff1d9;
+    --review-modified-foreground: #915b13;
+    --review-modified-border: #b99157;
+    --review-count-added: #4d6b24;
+    --review-count-removed: #b43c48;
+    --review-count-modified: #915b13;
+    --review-insert: #dce7c5;
+    --review-delete: #fae2e7;
+    --review-overlay: #191f1d80;
+    --review-shadow-color: #191f1d26;
+    --annotation-foreground: #75470e;
+    --annotation-background: #fff1d9;
+    --annotation-active: #f5d6a3;
+    --annotation-border: #915b13;
+    --annotation-tint: #915b131a;
+    --annotation-active-tint: #915b132e;
+    --halo-light: #fffdf7;
+    --halo-dark: #191f1d;
+  }
+
+  :root[data-theme="dark"], :root[data-theme="dark"].review-ui, :root[data-theme="dark"] .review-ui {
+    color-scheme: dark;
+    --background: #191f1d;
+    --foreground: #eeefe6;
+    --card: #222a26;
+    --card-foreground: #eeefe6;
+    --popover: #222a26;
+    --popover-foreground: #eeefe6;
+    --primary: #85c7b8;
+    --primary-foreground: #102f29;
+    --secondary: #303a33;
+    --secondary-foreground: #afb9af;
+    --muted: #303a33;
+    --muted-foreground: #afb9af;
+    --accent: #293f37;
+    --accent-foreground: #85c7b8;
+    --destructive: #f2a2ab;
+    --destructive-foreground: #40272c;
+    --border: #3c4841;
+    --input: #77877b;
+    --ring: #85c7b8;
+    --review-added: #2b3522;
+    --review-added-foreground: #bbcd87;
+    --review-added-border: #6f8347;
+    --review-removed: #40272c;
+    --review-removed-foreground: #f2a2ab;
+    --review-removed-border: #a96572;
+    --review-modified: #3d3020;
+    --review-modified-foreground: #e7bb72;
+    --review-modified-border: #9c7a46;
+    --review-count-added: #bbcd87;
+    --review-count-removed: #f2a2ab;
+    --review-count-modified: #e7bb72;
+    --review-insert: #3e4d2d;
+    --review-delete: #633944;
+    --review-overlay: #191f1db3;
+    --review-shadow-color: #0006;
+    --annotation-foreground: #f1cc8e;
+    --annotation-background: #3d3020;
+    --annotation-active: #594325;
+    --annotation-border: #e7bb72;
+    --annotation-tint: #e7bb721a;
+    --annotation-active-tint: #e7bb722e;
+    --halo-light: #fffdf7;
+    --halo-dark: #191f1d;
+  }
+
+  :root, .review-ui {
+    --canvas: var(--background);
+    --panel: var(--card);
+    --card-border: var(--border);
+    --hair: var(--border);
+    --hair-2: var(--border);
+    --dash: var(--border);
+    --strong-border: var(--input);
+    --txt: var(--foreground);
+    --strong-txt: var(--foreground);
+    --mute: var(--muted-foreground);
+    --mute-2: var(--muted-foreground);
+    --faint: var(--muted-foreground);
+    --faint-2: var(--muted-foreground);
+    --soft: var(--muted);
+    --chip: var(--secondary);
+    --input-bg: var(--card);
+    --focus: var(--ring);
+    --danger: var(--destructive);
+    --danger-soft: var(--review-removed);
+    --amber: var(--annotation-border);
+    --green: var(--review-added-foreground);
+    --btn-bg: var(--primary);
+    --btn-fg: var(--primary-foreground);
+    --diff-paper: var(--card);
+    --diff-ink: var(--foreground);
+    --diff-muted: var(--muted-foreground);
+    --diff-line: var(--border);
+    --diff-removed: var(--review-removed);
+    --diff-added: var(--review-added);
+    --diff-delete: var(--review-delete);
+    --diff-insert: var(--review-insert);
+    --diff-delete-ink: var(--review-removed-foreground);
+    --diff-insert-ink: var(--review-added-foreground);
+    --diff-gap: var(--muted);
+    --diff-accent: var(--review-modified-foreground);
+    --focus-ring: 0 0 0 3px var(--ring);
+    --review-shadow: 0 8px 24px var(--review-shadow-color), 0 1px 3px var(--review-shadow-color);
+  }
+
   :root {
-    --canvas: #eceae4;
-    --panel: #fbfaf7;
-    --card: #fff;
-    --card-border: #e9e7e0;
-    --hair: #e4e2db;
-    --hair-2: #eceae4;
-    --dash: #e0ddd4;
-    --strong-border: #d9d5c9;
-    --txt: #26241e;
-    --strong-txt: #1b1a16;
-    --mute: #736e63;
-    --mute-2: #6b6862;
-    --faint: #b6b2a8;
-    --faint-2: #a8a49a;
-    --soft: #f2f0ea;
-    --chip: #f4f2ec;
-    --input-bg: #fdfcfa;
-    --focus: #5a63d8;
-    --danger: #b23b2e;
-    --danger-soft: #f6ecea;
-    --amber: #c99500;
-    --green: #7d9370;
-    --btn-bg: #1b1a16;
-    --btn-fg: #fbfaf7;
     --toolbar-h: 48px;
     --drawer-w: 380px;
     --narrow: 720px;
     --overlay: 60;
-    --focus-ring: 0 0 0 3px #5a63d847;
-    --diff-paper: #fffefa;
-    --diff-ink: #302f29;
-    --diff-muted: #696459;
-    --diff-line: #dedad0;
-    --diff-removed: #fff2ee;
-    --diff-added: #eff7ec;
-    --diff-delete: #f6d3c9;
-    --diff-insert: #cee8c8;
-    --diff-delete-ink: #833f31;
-    --diff-insert-ink: #386132;
-    --diff-gap: #f7f5ef;
-    --diff-accent: #426581;
-  }
-
-  :root[data-theme="dark"] {
-    --canvas: #171614;
-    --panel: #1f1e1b;
-    --card: #262420;
-    --card-border: #34322d;
-    --hair: #2f2d29;
-    --hair-2: #2a2825;
-    --dash: #3a3833;
-    --strong-border: #403d37;
-    --txt: #eae7e0;
-    --strong-txt: #f4f1ea;
-    --mute: #9c968a;
-    --mute-2: #a8a29a;
-    --faint: #6e6961;
-    --faint-2: #837d74;
-    --soft: #2c2a26;
-    --chip: #2e2c27;
-    --input-bg: #1c1b18;
-    --focus: #8d95ff;
-    --danger: #d9705f;
-    --danger-soft: #3a2320;
-    --amber: #d9a520;
-    --green: #8ea37f;
-    --btn-bg: #f0ede6;
-    --btn-fg: #1b1a16;
-    --diff-paper: #24231f;
-    --diff-ink: #eae7df;
-    --diff-muted: #b8b1a5;
-    --diff-line: #464239;
-    --diff-removed: #372723;
-    --diff-added: #263426;
-    --diff-delete: #61382e;
-    --diff-insert: #355735;
-    --diff-delete-ink: #ffb6a5;
-    --diff-insert-ink: #b1d9a7;
-    --diff-gap: #2a2823;
-    --diff-accent: #9bbad2;
   }
 
   * {
@@ -360,6 +418,7 @@
     background: var(--panel);
     width: min(380px, 100vw - 16px);
     max-height: min(300px, 50vh);
+    box-shadow: var(--review-shadow);
     color: var(--txt);
     border-radius: 8px;
     padding: 12px 16px;
@@ -369,7 +428,6 @@
     top: calc(100% + 4px);
     right: 8px;
     overflow: auto;
-    box-shadow: 0 8px 24px #0002;
   }
 
   .script-details-body p {
@@ -1046,13 +1104,13 @@
     border: 1px solid var(--strong-border);
     background: var(--card);
     width: min(340px, 100vw - 24px);
+    box-shadow: 0 16px 44px var(--review-shadow-color);
     max-height: calc(100dvh - var(--toolbar-h) - 12px);
     border-radius: 10px;
     padding: 14px;
     animation: .13s ease-out rise;
     position: fixed;
     overflow-y: auto;
-    box-shadow: 0 16px 44px #1b1a163d;
   }
 
   .contextual-compose.sheet {
@@ -1136,10 +1194,10 @@
   }
 
   .quote {
+    border-left: 2px solid var(--annotation-border);
     color: var(--mute);
     white-space: normal;
     overflow-wrap: anywhere;
-    border-left: 2px solid #f5c400b3;
     margin: 0 0 10px;
     padding-left: 9px;
     font-size: 12px;
@@ -1218,11 +1276,11 @@
     max-height: min(280px, calc(100dvh - var(--toolbar-h) - 24px));
     border: 1px solid var(--strong-border);
     background: var(--card);
+    box-shadow: 0 10px 30px var(--review-shadow-color);
     border-radius: 9px;
     padding: 13px 14px;
     position: fixed;
     overflow: auto;
-    box-shadow: 0 10px 30px #1b1a1633;
   }
 
   .drawer {
@@ -1231,6 +1289,7 @@
     width: min(var(--drawer-w), calc(100vw - 32px));
     border-left: 1px solid var(--hair);
     background: var(--panel);
+    box-shadow: -12px 0 34px var(--review-shadow-color);
     visibility: hidden;
     grid-template-rows: auto minmax(0, 1fr) minmax(0, auto);
     transition: transform .16s ease-out, visibility 0s linear .16s;
@@ -1239,7 +1298,6 @@
     bottom: 0;
     right: 0;
     transform: translateX(102%);
-    box-shadow: -12px 0 34px #1b1a1629;
   }
 
   .drawer.open {
@@ -1258,7 +1316,7 @@
   .drawer-backdrop {
     z-index: 70;
     inset: var(--toolbar-h) 0 0;
-    background: #14131133;
+    background: var(--review-overlay);
     position: fixed;
   }
 
@@ -1406,13 +1464,13 @@
     z-index: 3;
     border: 1px solid var(--strong-border);
     background: var(--card);
-    border-radius: 7px;
     min-width: 132px;
+    box-shadow: var(--review-shadow);
+    border-radius: 7px;
     padding: 4px;
     position: absolute;
     top: 38px;
     right: 12px;
-    box-shadow: 0 8px 24px #1b1a1633;
   }
 
   .aligned-card .comment-menu {
@@ -1486,10 +1544,10 @@
   .btn-danger {
     border: 1px solid var(--danger);
     background: var(--danger);
-    color: #fff;
+    min-height: 32px;
+    color: var(--destructive-foreground);
     cursor: pointer;
     border-radius: 6px;
-    min-height: 32px;
     padding: 6px 11px;
     font-size: 12px;
     font-weight: 500;
@@ -1757,6 +1815,7 @@
     z-index: 110;
     background: var(--btn-bg);
     color: var(--btn-fg);
+    box-shadow: var(--review-shadow);
     border-radius: 8px;
     padding: 8px 14px;
     font-size: 12px;
@@ -1765,7 +1824,6 @@
     bottom: 22px;
     left: 50%;
     transform: translateX(-50%);
-    box-shadow: 0 8px 24px #0000002e;
   }
 
   @keyframes rise {
@@ -2524,7 +2582,19 @@
   }
 
   .shell-destinations {
+    flex-wrap: wrap;
     grid-area: destinations;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    display: flex;
+  }
+
+  .brand-mark {
+    flex: 0 0 32px;
+    width: 32px;
+    height: 32px;
+    display: block;
   }
 
   .segmented-control {
@@ -3264,6 +3334,10 @@
     overflow-y: auto;
   }
 
+  .rounded {
+    border-radius: .25rem;
+  }
+
   .rounded-4xl {
     border-radius: var(--radius-4xl);
   }
@@ -3656,6 +3730,11 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3698,6 +3777,10 @@
     block-size: var(--spacing);
   }
 
+  .paused {
+    animation-play-state: paused;
+  }
+
   .running {
     animation-play-state: running;
   }
@@ -4402,6 +4485,58 @@
     outline-offset: 2px;
     box-shadow: none;
   }
+
+  .shell-destinations .segmented-control {
+    background: var(--card);
+    max-width: 100%;
+    min-height: 32px;
+    box-shadow: inset 0 0 0 1px var(--border);
+    isolation: isolate;
+    border: 0;
+    border-radius: 8px;
+    gap: 0;
+    padding: 0;
+  }
+
+  .shell-destinations .segmented-control > button {
+    isolation: isolate;
+    height: auto;
+    min-height: 32px;
+    box-shadow: none;
+    white-space: normal;
+    background: none;
+    border: 0;
+    border-radius: 8px;
+    padding: 0 12px;
+    position: relative;
+  }
+
+  .shell-destinations .segmented-control > button:before {
+    content: "";
+    z-index: -1;
+    pointer-events: none;
+    border-radius: 5px;
+    position: absolute;
+    inset: 3px;
+  }
+
+  .shell-destinations .segmented-control > button:hover:before {
+    background: var(--secondary);
+  }
+
+  .shell-destinations .segmented-control > button[aria-pressed="true"] {
+    color: var(--accent-foreground);
+  }
+
+  .shell-destinations .segmented-control > button[aria-pressed="true"]:before {
+    background: var(--accent);
+  }
+
+  .shell-destinations .segmented-control > button:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    z-index: 1;
+  }
 }
 
 @property --tw-animation-delay {
@@ -4505,42 +4640,141 @@
   initial-value: 0;
 }
 
-.review-ui {
+:root, .review-ui {
   color-scheme: light;
-  --background: #f6f7f9;
-  --foreground: #23262e;
-  --card: #fff;
-  --card-foreground: #23262e;
-  --popover: #fff;
-  --popover-foreground: #23262e;
-  --primary: #3449b9;
-  --primary-foreground: #fff;
-  --secondary: #edf0f5;
-  --secondary-foreground: #303642;
-  --muted: #f0f2f5;
-  --muted-foreground: #606775;
-  --accent: #eaf0ff;
-  --accent-foreground: #3045a2;
-  --destructive: #b52f3c;
-  --destructive-foreground: #fff;
-  --border: #dce0e7;
-  --input: #8791a1;
-  --ring: #475dcb;
-  --review-added: #edf7f0;
-  --review-added-foreground: #25613b;
-  --review-added-border: #a5cfb2;
-  --review-removed: #fff0f0;
-  --review-removed-foreground: #9b303a;
-  --review-removed-border: #e2b0b5;
-  --review-modified: #fff7e6;
-  --review-modified-foreground: #805316;
-  --review-modified-border: #d9be80;
-  --review-count-added: #047857;
-  --review-count-modified: #2563eb;
-  --review-count-removed: #be123c;
-  --review-insert: #c7e8d2;
-  --review-delete: #f6cdd2;
-  --review-overlay: #12172380;
+  --background: #f5f2ea;
+  --foreground: #292e2b;
+  --card: #fffdf7;
+  --card-foreground: #292e2b;
+  --popover: #fffdf7;
+  --popover-foreground: #292e2b;
+  --primary: #17685f;
+  --primary-foreground: #fffdf7;
+  --secondary: #ecede5;
+  --secondary-foreground: #626b65;
+  --muted: #ecede5;
+  --muted-foreground: #626b65;
+  --accent: #e1eeea;
+  --accent-foreground: #17685f;
+  --destructive: #b43c48;
+  --destructive-foreground: #fffdf7;
+  --border: #d8d8cc;
+  --input: #7c877d;
+  --ring: #17685f;
+  --review-added: #eff3e2;
+  --review-added-foreground: #4d6b24;
+  --review-added-border: #82945e;
+  --review-removed: #fcecef;
+  --review-removed-foreground: #b43c48;
+  --review-removed-border: #c88791;
+  --review-modified: #fff1d9;
+  --review-modified-foreground: #915b13;
+  --review-modified-border: #b99157;
+  --review-count-added: #4d6b24;
+  --review-count-removed: #b43c48;
+  --review-count-modified: #915b13;
+  --review-insert: #dce7c5;
+  --review-delete: #fae2e7;
+  --review-overlay: #191f1d80;
+  --review-shadow-color: #191f1d26;
+  --annotation-foreground: #75470e;
+  --annotation-background: #fff1d9;
+  --annotation-active: #f5d6a3;
+  --annotation-border: #915b13;
+  --annotation-tint: #915b131a;
+  --annotation-active-tint: #915b132e;
+  --halo-light: #fffdf7;
+  --halo-dark: #191f1d;
+}
+
+:root[data-theme="dark"], :root[data-theme="dark"].review-ui, :root[data-theme="dark"] .review-ui {
+  color-scheme: dark;
+  --background: #191f1d;
+  --foreground: #eeefe6;
+  --card: #222a26;
+  --card-foreground: #eeefe6;
+  --popover: #222a26;
+  --popover-foreground: #eeefe6;
+  --primary: #85c7b8;
+  --primary-foreground: #102f29;
+  --secondary: #303a33;
+  --secondary-foreground: #afb9af;
+  --muted: #303a33;
+  --muted-foreground: #afb9af;
+  --accent: #293f37;
+  --accent-foreground: #85c7b8;
+  --destructive: #f2a2ab;
+  --destructive-foreground: #40272c;
+  --border: #3c4841;
+  --input: #77877b;
+  --ring: #85c7b8;
+  --review-added: #2b3522;
+  --review-added-foreground: #bbcd87;
+  --review-added-border: #6f8347;
+  --review-removed: #40272c;
+  --review-removed-foreground: #f2a2ab;
+  --review-removed-border: #a96572;
+  --review-modified: #3d3020;
+  --review-modified-foreground: #e7bb72;
+  --review-modified-border: #9c7a46;
+  --review-count-added: #bbcd87;
+  --review-count-removed: #f2a2ab;
+  --review-count-modified: #e7bb72;
+  --review-insert: #3e4d2d;
+  --review-delete: #633944;
+  --review-overlay: #191f1db3;
+  --review-shadow-color: #0006;
+  --annotation-foreground: #f1cc8e;
+  --annotation-background: #3d3020;
+  --annotation-active: #594325;
+  --annotation-border: #e7bb72;
+  --annotation-tint: #e7bb721a;
+  --annotation-active-tint: #e7bb722e;
+  --halo-light: #fffdf7;
+  --halo-dark: #191f1d;
+}
+
+:root, .review-ui {
+  --canvas: var(--background);
+  --panel: var(--card);
+  --card-border: var(--border);
+  --hair: var(--border);
+  --hair-2: var(--border);
+  --dash: var(--border);
+  --strong-border: var(--input);
+  --txt: var(--foreground);
+  --strong-txt: var(--foreground);
+  --mute: var(--muted-foreground);
+  --mute-2: var(--muted-foreground);
+  --faint: var(--muted-foreground);
+  --faint-2: var(--muted-foreground);
+  --soft: var(--muted);
+  --chip: var(--secondary);
+  --input-bg: var(--card);
+  --focus: var(--ring);
+  --danger: var(--destructive);
+  --danger-soft: var(--review-removed);
+  --amber: var(--annotation-border);
+  --green: var(--review-added-foreground);
+  --btn-bg: var(--primary);
+  --btn-fg: var(--primary-foreground);
+  --diff-paper: var(--card);
+  --diff-ink: var(--foreground);
+  --diff-muted: var(--muted-foreground);
+  --diff-line: var(--border);
+  --diff-removed: var(--review-removed);
+  --diff-added: var(--review-added);
+  --diff-delete: var(--review-delete);
+  --diff-insert: var(--review-insert);
+  --diff-delete-ink: var(--review-removed-foreground);
+  --diff-insert-ink: var(--review-added-foreground);
+  --diff-gap: var(--muted);
+  --diff-accent: var(--review-modified-foreground);
+  --focus-ring: 0 0 0 3px var(--ring);
+  --review-shadow: 0 8px 24px var(--review-shadow-color), 0 1px 3px var(--review-shadow-color);
+}
+
+.review-ui {
   --radius: .5rem;
   --radius-md: var(--radius);
   --review-control-height: 2rem;
@@ -4552,7 +4786,6 @@
   --review-text-base: .875rem;
   --review-text-lg: 1.125rem;
   --review-space: .25rem;
-  --review-shadow: 0 8px 24px #17203814, 0 1px 3px #1720380d;
   --review-duration: .12s;
   --review-layer-toolbar: 20;
   --review-layer-context: 60;
@@ -4562,45 +4795,6 @@
   --review-layer-dialog: 120;
 }
 
-:root[data-theme="dark"].review-ui, :root[data-theme="dark"] .review-ui {
-  color-scheme: dark;
-  --background: #14161b;
-  --foreground: #e7eaf0;
-  --card: #1c1f26;
-  --card-foreground: #e7eaf0;
-  --popover: #242832;
-  --popover-foreground: #e7eaf0;
-  --primary: #a7b6ff;
-  --primary-foreground: #17224e;
-  --secondary: #2b303b;
-  --secondary-foreground: #e0e5ef;
-  --muted: #252a34;
-  --muted-foreground: #a6afbd;
-  --accent: #2b3556;
-  --accent-foreground: #ccd6ff;
-  --destructive: #ff9aa3;
-  --destructive-foreground: #45141a;
-  --border: #373e4b;
-  --input: #707c90;
-  --ring: #a7b6ff;
-  --review-added: #1c3528;
-  --review-added-foreground: #a1dbb3;
-  --review-added-border: #416d50;
-  --review-removed: #3e252b;
-  --review-removed-foreground: #ffb2bb;
-  --review-removed-border: #80515b;
-  --review-modified: #392f1d;
-  --review-modified-foreground: #e9ca8b;
-  --review-modified-border: #7b6742;
-  --review-count-added: #34d399;
-  --review-count-modified: #60a5fa;
-  --review-count-removed: #fb7185;
-  --review-insert: #31523c;
-  --review-delete: #633943;
-  --review-overlay: #070a10b3;
-  --review-shadow: 0 8px 24px #00000040, 0 1px 3px #0003;
-}
-
 @media (prefers-reduced-motion: reduce) {
   .review-ui {
     --review-duration: 0s;