leepi 0.0.0 → 0.0.3

package/src/styles/theme.css

@@ -0,0 +1,99 @@
+@layer utilities {
+  .lp-toolbar {
+    background: var(--lp-color-bg);
+  }
+
+  .lp-toolbar-btn:hover {
+    background: var(--lp-color-surface);
+  }
+
+  .lp-toolbar-btn:active {
+    background: var(--lp-color-border);
+  }
+
+  .lp-floating-toolbar {
+    background: var(--lp-color-bg);
+    border: 1px solid var(--lp-color-border);
+    box-shadow:
+      0 4px 12px rgba(0, 0, 0, 0.08),
+      0 1px 3px rgba(0, 0, 0, 0.06);
+  }
+
+  .lp-floating-toolbar-btn:hover {
+    background: var(--lp-color-surface);
+  }
+
+  .lp-floating-toolbar-btn:active {
+    background: var(--lp-color-border);
+  }
+
+  .lp-popover {
+    background: var(--lp-color-bg);
+    box-shadow:
+      0 8px 24px rgba(0, 0, 0, 0.12),
+      0 2px 6px rgba(0, 0, 0, 0.08);
+  }
+
+  .lp-popover-label {
+    color: var(--lp-color-text-secondary);
+    font-weight: var(--lp-font-weight-semibold, 600);
+  }
+
+  .lp-popover-input,
+  .lp-popover-select {
+    background: var(--lp-color-surface);
+    color: var(--lp-color-text);
+  }
+
+  .lp-popover-input::placeholder {
+    color: var(--lp-color-text-faded);
+  }
+
+  .lp-popover-input:focus,
+  .lp-popover-select:focus {
+    background: var(--lp-color-bg);
+  }
+
+  .lp-popover-btn--secondary {
+    background: transparent;
+    color: var(--lp-color-text-secondary);
+    border-color: var(--lp-color-border);
+  }
+
+  .lp-popover-btn--secondary:hover:not(:disabled) {
+    background: var(--lp-color-surface);
+    color: var(--lp-color-text);
+  }
+
+  .lp-popover-btn--primary {
+    background: var(--lp-color-accent);
+    color: #fff;
+  }
+
+  .lp-popover-btn--primary:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+
+  .lp-popover-btn--danger {
+    background: transparent;
+    color: var(--lp-syntax-variable);
+  }
+
+  .lp-popover-btn--danger:hover:not(:disabled) {
+    background: var(--lp-color-surface);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .lp-floating-toolbar {
+      box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.3),
+        0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+
+    .lp-popover {
+      box-shadow:
+        0 8px 24px rgba(0, 0, 0, 0.35),
+        0 2px 6px rgba(0, 0, 0, 0.25);
+    }
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,63 @@
+@layer base {
+  :root {
+    --lp-font-body: system-ui, -apple-system, sans-serif;
+    --lp-font-display: system-ui, -apple-system, sans-serif;
+    --lp-font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
+    --lp-font-size: 0.875rem;
+    --lp-line-height: 1.6;
+    --lp-font-weight-bold: 700;
+    --lp-font-weight-semibold: 600;
+
+    --lp-color-bg: #ffffff;
+    --lp-color-text: #1a1a1a;
+    --lp-color-text-secondary: rgba(0, 0, 0, 0.6);
+    --lp-color-text-faded: rgba(0, 0, 0, 0.36);
+    --lp-color-accent: #0078d4;
+    --lp-color-selection: rgba(0, 120, 212, 0.15);
+    --lp-color-border: rgba(0, 0, 0, 0.12);
+    --lp-color-surface: #f5f5f5;
+    --lp-color-caret: currentColor;
+    --lp-radius: 6px;
+
+    --lp-syntax-keyword: #8839ef;
+    --lp-syntax-string: #40a02b;
+    --lp-syntax-number: #e64553;
+    --lp-syntax-function: #1e66f5;
+    --lp-syntax-comment: #8c8fa1;
+    --lp-syntax-variable: #d20f39;
+    --lp-syntax-type: #df8e1d;
+    --lp-syntax-operator: #0d7680;
+    --lp-syntax-property: #d20f39;
+    --lp-syntax-tag: #d20f39;
+    --lp-syntax-attribute: #df8e1d;
+    --lp-syntax-escape: #0d7680;
+    --lp-syntax-punctuation: #4c4f69;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --lp-color-bg: #1e1e2e;
+      --lp-color-text: #cdd6f4;
+      --lp-color-text-secondary: rgba(205, 214, 244, 0.6);
+      --lp-color-text-faded: rgba(205, 214, 244, 0.36);
+      --lp-color-accent: #89b4fa;
+      --lp-color-selection: rgba(137, 180, 250, 0.2);
+      --lp-color-border: rgba(205, 214, 244, 0.12);
+      --lp-color-surface: #313244;
+
+      --lp-syntax-keyword: #cba6f7;
+      --lp-syntax-string: #a6e3a1;
+      --lp-syntax-number: #fab387;
+      --lp-syntax-function: #89b4fa;
+      --lp-syntax-comment: #6c7086;
+      --lp-syntax-variable: #f38ba8;
+      --lp-syntax-type: #f9e2af;
+      --lp-syntax-operator: #94e2d5;
+      --lp-syntax-property: #f38ba8;
+      --lp-syntax-tag: #f38ba8;
+      --lp-syntax-attribute: #f9e2af;
+      --lp-syntax-escape: #94e2d5;
+      --lp-syntax-punctuation: #a6adc8;
+    }
+  }
+}

package/src/styles/toolbar.css

@@ -0,0 +1,55 @@
+@layer components {
+  .lp-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 0.25rem 0.5rem;
+    border-bottom: 1px solid var(--lp-color-border, rgba(0, 0, 0, 0.12));
+    flex-shrink: 0;
+  }
+
+  .lp-toolbar > span {
+    display: contents;
+  }
+
+  .lp-toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+  }
+
+  .lp-toolbar-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    border-radius: 4px;
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .lp-toolbar-btn--active {
+    color: var(--lp-color-accent, #0078d4);
+    background: var(--lp-color-selection, rgba(0, 120, 212, 0.15));
+  }
+
+  .lp-toolbar-btn svg {
+    display: block;
+    width: 16px;
+    height: 16px;
+  }
+
+  .lp-toolbar-separator {
+    width: 1px;
+    height: 1rem;
+    background: var(--lp-color-border, rgba(0, 0, 0, 0.12));
+    margin: 0 0.25rem;
+  }
+}