@crikket-io/capture 0.1.0 → 0.1.1

package/dist/capture.css

@@ -188,6 +188,9 @@
   .bottom-\[76px\] {
     bottom: 76px;
   }
+  .isolate {
+    isolation: isolate;
+  }
   .z-\[var\(--capture-overlay-z-index\)\] {
     z-index: var(--capture-overlay-z-index);
   }
@@ -327,6 +330,9 @@
     --tw-scale-z: 110%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .cursor-crosshair {
     cursor: crosshair;
   }
@@ -591,6 +597,10 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -706,31 +716,11 @@
     }
   }
 }
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.58 0.22 27);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --radius: 0.625rem;
+:host {
+  all: initial;
+  color-scheme: light dark;
 }
 @layer base {
-  :host {
-    font-family: var(--font-sans);
-  }
   *,
   ::before,
   ::after {
@@ -738,9 +728,50 @@
     border-color: var(--border);
   }
   .crikket-capture-root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.58 0.22 27);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --radius: 0.625rem;
     color: var(--foreground);
     font-family: var(--font-sans);
   }
+  @media (prefers-color-scheme: dark) {
+    .crikket-capture-root {
+      --background: oklch(0.145 0 0);
+      --foreground: oklch(0.985 0 0);
+      --card: oklch(0.205 0 0);
+      --card-foreground: oklch(0.985 0 0);
+      --popover: oklch(0.205 0 0);
+      --popover-foreground: oklch(0.985 0 0);
+      --primary: oklch(0.87 0 0);
+      --primary-foreground: oklch(0.205 0 0);
+      --secondary: oklch(0.269 0 0);
+      --secondary-foreground: oklch(0.985 0 0);
+      --muted: oklch(0.269 0 0);
+      --muted-foreground: oklch(0.708 0 0);
+      --accent: oklch(0.371 0 0);
+      --accent-foreground: oklch(0.985 0 0);
+      --destructive: oklch(0.704 0.191 22.216);
+      --border: oklch(1 0 0 / 10%);
+      --input: oklch(1 0 0 / 15%);
+      --ring: oklch(0.556 0 0);
+    }
+  }
   .capture-launcher {
     position: fixed;
     right: 24px;
@@ -749,31 +780,40 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    gap: 6px;
     height: 36px;
-    padding: 0 16px;
-    border: 0;
-    border-radius: 9999px;
-    background: #111827;
-    color: #ffffff;
-    font: 500 14px / 1.2 Inter Variable,
-      Inter,
-      ui-sans-serif,
-      system-ui,
-      sans-serif;
-    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    padding: 0 14px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
     cursor: pointer;
-    transition: opacity 150ms ease;
+    transition: background-color 150ms ease,
+      box-shadow 150ms ease,
+      transform 150ms ease;
+    user-select: none;
   }
   .capture-launcher:hover {
-    opacity: 0.92;
+    transform: translateY(-1px);
+    box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
   }
   .capture-launcher:focus-visible {
-    outline: 2px solid rgb(17 24 39 / 0.45);
+    outline: 2px solid var(--ring);
     outline-offset: 2px;
   }
   .capture-launcher:disabled {
-    opacity: 0.7;
+    opacity: 0.5;
     cursor: progress;
+    transform: none;
+  }
+  .capture-launcher:active:not(:disabled) {
+    transform: translateY(0);
   }
   button:not(:disabled),
   [role="button"]:not(:disabled) {
@@ -795,6 +835,26 @@
   inherits: false;
   initial-value: 1;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -884,6 +944,11 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;