@cawalch/porchlight 0.1.0

package/src/06-components/chip.css

@@ -0,0 +1,146 @@
+/*
+ * Porchlight  -  chip component
+ * ===========================================================================
+ * A compact tag/pill with an optional remove button. Uses relative color
+ * syntax (oklch(from ...)) to derive tinted backgrounds from the accent token.
+ *
+ * Tones via [data-tone]: default (accent), success, warning, danger.
+ * Sizes via [data-size]: default, sm.
+ *
+ * Structure:
+ *   <span class="c-chip">Label</span>
+ *   <span class="c-chip" data-tone="success">
+ *     Active
+ *     <button class="c-chip__remove" aria-label="Remove">x</button>
+ *   </span>
+ *
+ * Group wrapping:
+ *   <div class="c-chip-group">
+ *     <span class="c-chip">...</span>
+ *     <span class="c-chip">...</span>
+ *   </div>
+ */
+@layer porchlight.components {
+  @scope (.c-chip) {
+    :scope {
+      /* Default tone: derived accent tint via relative color syntax. */
+      --c-chip-bg: oklch(from var(--pl-color-accent) calc(l + 0.35) c h / 10%);
+      --c-chip-text: var(--pl-color-accent);
+      --c-chip-pad: var(--pl-space-1) var(--pl-space-2);
+      --c-chip-gap: var(--pl-space-1);
+
+      display: inline-flex;
+      align-items: center;
+      gap: var(--c-chip-gap);
+      padding: var(--c-chip-pad);
+      border-radius: var(--pl-radius-pill);
+      background: var(--c-chip-bg);
+      color: var(--c-chip-text);
+      font-size: var(--pl-text-xs);
+      font-weight: var(--pl-font-weight-medium);
+      line-height: var(--pl-leading-snug);
+      white-space: nowrap;
+    }
+
+    /* Fallback bg when relative color syntax is not supported. */
+    @supports not (background: oklch(from red l c h)) {
+      :scope {
+        --c-chip-bg: color-mix(
+          in oklab,
+          var(--pl-color-accent),
+          transparent 88%
+        );
+      }
+    }
+
+    /* Tone variants. */
+    :scope[data-tone="success"] {
+      --c-chip-bg: oklch(from var(--pl-color-success) calc(l + 0.35) c h / 12%);
+      --c-chip-text: var(--pl-color-success-text);
+
+      @supports not (background: oklch(from red l c h)) {
+        --c-chip-bg: color-mix(
+          in oklab,
+          var(--pl-color-success),
+          transparent 86%
+        );
+      }
+    }
+
+    :scope[data-tone="warning"] {
+      --c-chip-bg: oklch(from var(--pl-color-warning) calc(l + 0.35) c h / 14%);
+      --c-chip-text: var(--pl-color-warning-text);
+
+      @supports not (background: oklch(from red l c h)) {
+        --c-chip-bg: color-mix(
+          in oklab,
+          var(--pl-color-warning),
+          transparent 84%
+        );
+      }
+    }
+
+    :scope[data-tone="danger"] {
+      --c-chip-bg: oklch(from var(--pl-color-danger) calc(l + 0.35) c h / 12%);
+      --c-chip-text: var(--pl-color-danger-text);
+
+      @supports not (background: oklch(from red l c h)) {
+        --c-chip-bg: color-mix(
+          in oklab,
+          var(--pl-color-danger),
+          transparent 86%
+        );
+      }
+    }
+
+    /* Size variant. */
+    :scope[data-size="sm"] {
+      --c-chip-pad: 0.125rem var(--pl-space-2);
+
+      font-size: 0.6875rem;
+    }
+
+    /* Remove button. */
+    .c-chip__remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 1rem;
+      block-size: 1rem;
+      padding: 0;
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      color: inherit;
+      font-size: 0.75rem;
+      line-height: 1;
+      cursor: pointer;
+      opacity: 0.7;
+      transition: opacity var(--pl-duration-1) var(--pl-ease-standard);
+    }
+
+    .c-chip__remove:hover:not(:disabled) {
+      opacity: 1;
+      background: oklch(from currentColor l c h / 12%);
+    }
+
+    .c-chip__remove:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: calc(var(--pl-focus-offset) / 2);
+    }
+  }
+
+  /* Chip group: wrapping flex container. */
+  :where(.c-chip-group) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--pl-space-2);
+    align-items: center;
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-chip) {
+      border: 1px solid ButtonBorder;
+    }
+  }
+}

package/src/06-components/command-palette.css

@@ -0,0 +1,201 @@
+/*
+ * Porchlight  -  command palette component
+ * ===========================================================================
+ * A Cmd+K quick-action search overlay. Search input at top, grouped action
+ * list below, keyboard navigation (JS responsibility). Uses the Popover API
+ * for top-layer rendering + @starting-style for enter animation.
+ *
+ * The palette is centered in the viewport (not anchored to a trigger).
+ *
+ * Structure:
+ *   <div popover class="c-command" id="cmdk">
+ *     <input class="c-command__search" placeholder="Type a command..." />
+ *     <div class="c-command__body">
+ *       <div class="c-command__group">
+ *         <h3 class="c-command__heading">Actions</h3>
+ *         <button class="c-command__item" data-selected>
+ *           <svg class="c-command__icon">...</svg>
+ *           <span>Create new project</span>
+ *         </button>
+ *       </div>
+ *     </div>
+ *     <footer class="c-command__footer">
+ *       <span>↑↓ to navigate</span>
+ *       <span>↵ to select</span>
+ *       <span>esc to close</span>
+ *     </footer>
+ *   </div>
+ *
+ * Open via: <button popovertarget="cmdk">Cmd+K</button>
+ */
+@layer porchlight.components {
+  @scope (.c-command) {
+    :scope {
+      --c-command-inline: min(36rem, calc(100vi - 2 * var(--pl-space-4)));
+      --c-command-max-block: 28rem;
+
+      margin: auto;
+      padding: 0;
+      inline-size: var(--c-command-inline);
+      max-block-size: var(--c-command-max-block);
+
+      /* Liquid Glass: no border; radius-2xl for centerstage prominence. */
+      border: none;
+      border-radius: var(--pl-radius-2xl);
+      background: light-dark(
+        oklch(100% 0 0deg / 94%),
+        oklch(17% 0.04 250deg / 92%)
+      );
+      backdrop-filter: blur(var(--pl-backdrop-blur-strong)) saturate(var(--pl-backdrop-saturate-strong));
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur-strong)) saturate(var(--pl-backdrop-saturate-strong));
+      box-shadow: var(--pl-shadow-3);
+      overflow: hidden;
+
+      /* Asymmetric: enters deliberately (scale up + fade), exits snappily. */
+      opacity: 0;
+      transform: scale(0.97) translateY(-10px);
+      transition:
+        opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete,
+        display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;
+    }
+
+    /* Center in viewport (override popover's default). */
+    :scope:popover-open {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+
+    @starting-style {
+      :scope:popover-open {
+        opacity: 0;
+        transform: scale(0.97) translateY(-10px);
+      }
+    }
+
+    .c-command__search {
+      inline-size: 100%;
+      padding: var(--pl-space-4);
+      border: 0;
+
+      /* Softer divider on a Liquid Glass surface. */
+      border-block-end: 1px solid color-mix(
+        in oklab,
+        var(--pl-color-border),
+        transparent 40%
+      );
+      background: transparent;
+      color: var(--pl-color-text);
+      font: inherit;
+      font-size: var(--pl-text-md);
+      outline: none;
+    }
+
+    .c-command__search::placeholder {
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-command__body {
+      max-block-size: calc(var(--c-command-max-block) - 4rem);
+      overflow-y: auto;
+      padding: var(--pl-space-2);
+    }
+
+    .c-command__group + .c-command__group {
+      margin-block-start: var(--pl-space-2);
+    }
+
+    .c-command__heading {
+      margin-block: var(--pl-space-2) var(--pl-space-1);
+      padding-inline: var(--pl-space-3);
+      font-size: var(--pl-text-xs);
+      font-weight: var(--pl-font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--pl-color-text-muted);
+    }
+
+    .c-command__item {
+      display: flex;
+      align-items: center;
+      gap: var(--pl-space-3);
+      inline-size: 100%;
+      padding: var(--pl-space-2) var(--pl-space-3);
+      border: 0;
+      border-radius: var(--pl-radius-sm);
+      background: transparent;
+      color: var(--pl-color-text);
+      font: inherit;
+      font-size: var(--pl-text-sm);
+      text-align: start;
+      cursor: pointer;
+    }
+
+    .c-command__item:hover,
+    .c-command__item[data-selected] {
+      background: var(--pl-color-surface-2);
+    }
+
+    .c-command__item[data-selected] {
+      box-shadow: inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent);
+      color: var(--pl-color-accent);
+    }
+
+    .c-command__item:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: calc(var(--pl-focus-offset) * -1);
+    }
+
+    .c-command__icon {
+      inline-size: 1rem;
+      block-size: 1rem;
+      color: var(--pl-color-text-muted);
+      flex-shrink: 0;
+    }
+
+    .c-command__shortcut {
+      margin-inline-start: auto;
+      padding: 0.125rem var(--pl-space-1);
+      border-radius: var(--pl-radius-sm);
+      background: var(--pl-color-surface);
+      border: 1px solid var(--pl-color-border);
+      font-size: var(--pl-text-xs);
+      color: var(--pl-color-text-muted);
+      font-family: var(--pl-font-mono);
+    }
+
+    .c-command__footer {
+      display: flex;
+      gap: var(--pl-space-4);
+      padding: var(--pl-space-2) var(--pl-space-4);
+
+      /* Softer divider. */
+      border-block-start: 1px solid color-mix(
+        in oklab,
+        var(--pl-color-border),
+        transparent 40%
+      );
+      font-size: var(--pl-text-xs);
+      color: var(--pl-color-text-muted);
+    }
+  }
+
+  /* Backdrop scrim. Stronger tint + blur for contrast against Liquid Glass surface. */
+  :where(.c-command)::backdrop {
+    background: var(--pl-color-scrim);
+    backdrop-filter: blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim));
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-command) {
+      border-color: ButtonBorder;
+      background: Canvas;
+    }
+
+    :where(.c-command__item[data-selected]) {
+      box-shadow: inset 2px 0 0 Highlight;
+      color: Highlight;
+    }
+  }
+}