@lepid-labs/styles 1.0.0

package/summer-cloud/components/form.css

@@ -0,0 +1,146 @@
+/* summer-cloud — form controls: input, textarea, select, checkbox, radio, switch
+ * Fields are sunken (no resting border) and bloom a sky-blue ring on focus. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-input,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-select,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-textarea {
+  display: block;
+  width: 100%;
+  padding: 0.75rem var(--ld-space-3);
+  background: var(--ld-surface-sunken);
+  border: 1px solid transparent;
+  border-radius: var(--ld-radius);
+  color: var(--ld-on-surface);
+  font-family: var(--ld-font-body);
+  font-weight: var(--ld-font-weight);
+  font-size: 16px;
+  transition: border-color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-select {
+  appearance: none;
+  padding-right: 2.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23484457' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-input::placeholder,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-textarea::placeholder {
+  color: var(--ld-outline);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-input:focus,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-select:focus,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-textarea:focus {
+  outline: none;
+  border-color: var(--ld-accent);
+  box-shadow: 0 0 0 4px var(--ld-accent-glow);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-input[aria-invalid="true"],
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-textarea[aria-invalid="true"] {
+  border-color: var(--ld-danger);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-input[aria-invalid="true"]:focus,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-textarea[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.2);
+}
+
+/* Labels are the mono voice: small, tracked, utility-grade. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-label {
+  display: block;
+  margin-bottom: var(--ld-space-1);
+  padding-left: var(--ld-space-1);
+  color: var(--ld-faint);
+  font-family: var(--ld-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: var(--ld-tracking-wide);
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-field {
+  margin-bottom: var(--ld-space-3);
+}
+
+/* checkbox & radio */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-checkbox,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-radio {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--ld-surface-sunken);
+  border: 1px solid var(--ld-outline);
+  border-radius: var(--ld-radius-sm);
+  cursor: pointer;
+  transition: background var(--ld-transition), border-color var(--ld-transition),
+    box-shadow var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-radio {
+  border-radius: 50%;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-checkbox:checked,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-radio:checked {
+  background: var(--ld-primary);
+  border-color: var(--ld-primary);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-checkbox:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-radio:checked {
+  box-shadow: inset 0 0 0 4px var(--ld-surface);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-checkbox:focus-visible,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-radio:focus-visible,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-switch:focus-visible {
+  outline: none;
+  border-color: var(--ld-accent);
+  box-shadow: 0 0 0 4px var(--ld-accent-glow);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ld-space-2);
+  color: var(--ld-on-surface);
+  font-size: var(--ld-text-sm);
+  cursor: pointer;
+}
+
+/* switch — the cloud-toggle: oversized, squishy, green when live */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-switch {
+  appearance: none;
+  width: 3rem;
+  height: 1.75rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--ld-surface-sunken);
+  border: 1px solid var(--ld-outline);
+  border-radius: var(--ld-radius-pill);
+  cursor: pointer;
+  position: relative;
+  transition: background var(--ld-transition), border-color var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(1.75rem - 6px);
+  height: calc(1.75rem - 6px);
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(93, 43, 255, 0.2);
+  transition: transform var(--ld-transition) var(--ld-ease-bounce);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-switch:checked {
+  background: var(--ld-success);
+  border-color: var(--ld-success);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-switch:checked::after {
+  transform: translateX(1.25rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-switch::after {
+    transition: none;
+  }
+}

package/summer-cloud/components/link.css

@@ -0,0 +1,60 @@
+/* summer-cloud — nav link: pill that fills with sky tint, arrow slides out */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ld-space-2);
+  padding: var(--ld-space-2) var(--ld-space-3);
+  border: 1px solid transparent;
+  border-radius: var(--ld-radius-pill);
+  color: var(--ld-faint);
+  text-decoration: none;
+  font-family: var(--ld-font-display);
+  font-weight: var(--ld-font-weight-medium);
+  font-size: var(--ld-text-sm);
+  transition:
+    background var(--ld-transition),
+    color var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link::after {
+  content: "→";
+  color: var(--ld-accent);
+  transition: transform var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link:focus-visible {
+  background: var(--ld-sky-tint);
+  color: var(--ld-primary);
+  outline: none;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link:hover::after,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link:focus-visible::after {
+  transform: translateX(4px);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link:active {
+  transform: scale(0.95);
+}
+
+/* Current page: violet with the underline rule from the top nav. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link--active,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link[aria-current="page"] {
+  background: none;
+  border-radius: 0;
+  border-bottom: 2px solid var(--ld-primary);
+  color: var(--ld-primary);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link--active::after,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link[aria-current="page"]::after {
+  content: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link::after {
+    transition: none;
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link:hover::after,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link:focus-visible::after,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-link:active {
+    transform: none;
+  }
+}

package/summer-cloud/components/muted.css

@@ -0,0 +1,8 @@
+/* summer-cloud — muted / empty-state text
+ * Faint secondary text — captions, meta, "No jobs yet." style empty states.
+ * Italic gives it a friendly, soft touch consistent with the theme's airy,
+ * optimistic voice. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-muted {
+  color: var(--ld-faint);
+  font-style: italic;
+}

package/summer-cloud/components/pre.css

@@ -0,0 +1,16 @@
+/* summer-cloud — command / log block
+ * Styled <pre> for shell commands or short log output: sunken well, small
+ * mono, scrolls horizontally instead of wrapping. Uses --ld-outline, not
+ * --ld-border — border here is a glass-only token (translucent white) and
+ * would be invisible on this opaque surface; outline is this theme's own
+ * "hairline on opaque surfaces" token. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-pre {
+  margin: 0;
+  padding: var(--ld-space-3) var(--ld-space-4);
+  background: var(--ld-surface-sunken);
+  border: 1px solid var(--ld-outline);
+  border-radius: var(--ld-radius);
+  font-family: var(--ld-font-mono);
+  font-size: var(--ld-text-sm);
+  overflow-x: auto;
+}

package/summer-cloud/components/progress.css

@@ -0,0 +1,43 @@
+/* summer-cloud — progress bar & spinner: glowing violet indicators */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-progress {
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--ld-bg-blend);
+  border-radius: var(--ld-radius-pill);
+  overflow: hidden;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-progress__bar {
+  height: 100%;
+  background: var(--ld-primary);
+  border-radius: var(--ld-radius-pill);
+  box-shadow: 0 0 10px rgba(69, 0, 217, 0.5);
+  transition: width var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-progress__bar--accent {
+  background: var(--ld-accent);
+  box-shadow: 0 0 10px rgba(12, 179, 255, 0.5);
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--ld-outline);
+  border-top-color: var(--ld-primary);
+  border-radius: 50%;
+  animation: ld-sc-spin 0.8s linear infinite;
+}
+@keyframes ld-sc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-spinner {
+    animation-duration: 2s;
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-progress__bar {
+    transition: none;
+  }
+}

package/summer-cloud/components/table.css

@@ -0,0 +1,34 @@
+/* summer-cloud — table: mono header labels, sky-tint row hover */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--ld-text-sm);
+  color: var(--ld-on-surface);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table th {
+  padding: var(--ld-space-3);
+  border-bottom: 1px solid var(--ld-outline);
+  color: var(--ld-faint);
+  text-align: left;
+  text-transform: uppercase;
+  font-family: var(--ld-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: var(--ld-tracking-wide);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table td {
+  padding: var(--ld-space-3);
+  border-bottom: 1px solid rgba(201, 195, 218, 0.4);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table tbody tr {
+  transition: background var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table tbody tr:hover {
+  background: var(--ld-sky-tint);
+}
+/* Numeric cells take the mono voice — prices and data read as utility-grade. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table td.ld-num,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table th.ld-num {
+  font-family: var(--ld-font-mono);
+  text-align: right;
+}

package/summer-cloud/components/tabs.css

@@ -0,0 +1,38 @@
+/* summer-cloud — tabs: violet underline on the active tab, sky tint on hover */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabs {
+  display: flex;
+  gap: var(--ld-space-2);
+  border-bottom: 1px solid var(--ld-outline);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tab {
+  padding: var(--ld-space-2) var(--ld-space-3);
+  margin-bottom: -1px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: var(--ld-radius-sm) var(--ld-radius-sm) 0 0;
+  color: var(--ld-faint);
+  font-family: var(--ld-font-display);
+  font-weight: var(--ld-font-weight-medium);
+  font-size: var(--ld-text-sm);
+  cursor: pointer;
+  transition: color var(--ld-transition), background var(--ld-transition),
+    border-color var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tab:hover {
+  background: var(--ld-sky-tint);
+  color: var(--ld-primary);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px var(--ld-accent-glow);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tab--active,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tab[aria-selected="true"] {
+  color: var(--ld-primary);
+  border-bottom-color: var(--ld-primary);
+  font-weight: var(--ld-font-weight-bold);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabpanel {
+  padding: var(--ld-space-3) 0;
+}

package/summer-cloud/design.md

@@ -0,0 +1,137 @@
+# summer-cloud
+
+Light, airy, high-velocity retail aesthetic — "Airy Energetic." Frosted white
+glass floating on a sky gradient, with a vivid violet doing all the work of
+emphasis. Where neon-butterfly is a command console, summer-cloud is a summer
+storefront: weightless, optimistic, effortless. Nothing sits flat on the page;
+everything hovers.
+
+Derived from the Stitch project *Summer Cloud UI System*
+(`15973631330153907862`): Style Guide, Components Showcase, Retail Dashboard.
+
+## Color
+
+| Role | Value | Usage |
+| --- | --- | --- |
+| Background | `#f6fafe` → `#c9e6ff` | Sky gradient at 135°, `fixed`. Apply via `.ld-bg` |
+| Surface | `#ffffff` | Dialogs and fully opaque panels |
+| Surface sunken | `#f0f4f8` | Inset form fields |
+| Surface glass | `rgba(255,255,255,0.6)` + 12px blur | Cards, alerts (Level 1) |
+| Surface glass high | `rgba(255,255,255,0.8)` + 20px blur | Floating/hover cards, modals (Level 2) |
+| On-surface | `#171c1f` | Body text |
+| Faint | `#484457` | Secondary text, labels, idle nav |
+| Primary | `#4500d9` (violet) | Headings, CTAs, active states, prices, progress |
+| Primary bright | `#5d2bff` | Shadow/glow tint and primary hover fill |
+| Accent | `#0cb3ff` (sky blue) | Focus rings, secondary path, info — the interactive signal |
+| Accent deep | `#006492` | Accent as *text* (the bright sky blue fails contrast) |
+| Info | `#0cb3ff` | Informational callouts and badges |
+| Success | `#30e330` | Switch "on" state — deliberately vibrant, the one high-energy pop |
+| Warning | `#f2c025` | Caution states, "New" badges |
+| Danger | `#ff4d4d` (retail red) | Errors, "Sale" badges, alert rules — carries dark text, never white |
+| Danger deep | `#cc1f1f` | Danger where white text sits on it (destructive buttons) |
+| Border | `rgba(255,255,255,0.4)` | Glass edges — the highlight that makes glass read as glass |
+| Outline | `#c9c3da` | Hairlines on opaque surfaces (chips, table rules, checkboxes) |
+| Sky tint | `rgba(255,255,255,0.7)` | Hover wash on ghost/nav elements |
+
+Rules: the violet is the only loud color and carries emphasis alone — resting UI
+is faint grey on white glass. Sky blue means "you can interact with this"
+(focus, secondary actions, info). Never use pure black; never use a grey shadow.
+The gradient is not decoration — on a flat white page the glass has nothing to
+be glass against, and the theme collapses.
+
+## Typography
+
+Three voices, per the project's design system:
+
+- **Display & headings:** Plus Jakarta Sans (600/700/800), letter-spacing
+  `-0.02em` at display sizes — friendly rounded terminals, tucked in tight.
+- **Body:** Inter 400, 16px/24px. Sentence case, always.
+- **Data & labels:** JetBrains Mono 500, 12px, tracking `0.05em`. Field labels,
+  badges, table headers, prices, metadata. This is the "utility-grade"
+  counterweight to the soft headings. Uppercase for badges and table headers
+  (furniture); sentence case for field labels, which people read as words.
+
+Interactive text (buttons, links, tabs) is Plus Jakarta Sans 600 at 14px,
+sentence case. Uppercase never appears outside the mono voice.
+
+The three webfonts are not bundled; include the Google Fonts links or self-host.
+Every stack falls back to a system family.
+
+## Shape & effects
+
+- Radius `1rem` (16px) for cards, panels, and fields; **pills**
+  (`--ld-radius-pill`) for every button, badge, and chip; `0.25rem` minimum
+  anywhere else. Never 0.
+- Depth is **blur + tinted shadow**, never grey drop shadows. Shadows are tinted
+  with `#5d2bff`: `0 20px 40px rgba(93,43,255,0.08)` at rest,
+  `0 4px 14px rgba(93,43,255,0.39)` for raised CTAs.
+- Two elevation tiers only — Level 1 glass (0.6 white / 12px blur) for content,
+  Level 2 (0.8 white / 20px blur + lift) for interactive and floating things.
+- **Bouncy, not linear.** Buttons scale to 1.03 on hover and 0.95 on press with
+  `cubic-bezier(0.34,1.56,0.64,1)`; floating cards translate `-4px`.
+- Focus is a 4px sky-blue ring (`0 0 0 4px rgba(12,179,255,0.2)`), never an
+  outline suppression without a replacement.
+- Spacing is strictly multiples of 8px. When in doubt, add 8.
+- Respect `prefers-reduced-motion` — every transform is dropped.
+
+## Components
+
+Class prefix `ld-` (shared across themes so `@lepid-labs/ui-react` stays
+theme-agnostic). Variants use BEM-ish modifiers (`ld-btn--primary`).
+
+- **Card** `.ld-card` — glass panel; `--floating` adds the Level 2 hover lift.
+- **NavLink** `.ld-link` — pill, sky-tint wash, `→` slides 4px on hover;
+  `--active` / `[aria-current=page]` becomes the violet underline rule.
+- **Button** `.ld-btn` — glass by default; `--primary` (solid violet CTA, one
+  per view), `--accent` (sky-edged glass), `--ghost`, `--danger`. `--sm` is a
+  compact size scaled to `.ld-badge`, for inline/table-row actions; the pill
+  shape is kept.
+- **Form** `.ld-input`, `.ld-textarea`, `.ld-select`, `.ld-label`, `.ld-field`,
+  `.ld-checkbox`, `.ld-radio`, `.ld-switch`, `.ld-choice` — sunken fields, no
+  resting border, sky-blue ring on focus. The switch is the oversized
+  "cloud-toggle": squishy, and green when live.
+- **Badge** `.ld-badge` + semantic modifiers — solid pills, mono uppercase.
+  **Chip** `.ld-chip` — outlined filter chip; `--selected` fills violet.
+- **Alert** `.ld-alert` — glass card with a 4px semantic left rule.
+- **Dialog** `.ld-dialog` — native `<dialog>`, opaque white, blurred backdrop.
+- **Tabs** `.ld-tabs`/`.ld-tab`/`.ld-tabpanel` — violet underline when active.
+- **Table** `.ld-table` — mono uppercase headers, sky-tint row hover; add
+  `.ld-num` to numeric cells for the mono/right-aligned treatment.
+- **Progress** `.ld-progress`, **Spinner** `.ld-spinner` — glowing violet.
+- **Muted text** `.ld-muted` — faint secondary/empty-state text;
+  `color: var(--ld-faint)`, italic — a friendly, soft touch consistent with
+  the theme's airy, optimistic voice.
+- **Pre / log block** `.ld-pre` — command/log `<pre>`; sunken background,
+  `--ld-outline` hairline (not `--ld-border`, which is the glass-only token
+  and would be invisible on this opaque surface), radius, small mono,
+  horizontal scroll.
+
+## Deviations from the Stitch source
+
+- The generated screens flattened all three type voices to Plus Jakarta Sans.
+  This theme follows the project's written design system instead (Inter body,
+  JetBrains Mono labels), which is the richer and intended spec.
+- The project's stored theme carried an earlier palette (near-black primary
+  `#01020e`, lavender secondary `#7248ae`). The rendered screens — all three,
+  in agreement — use violet `#4500d9` and sky blue `#0cb3ff`. This theme
+  matches the screens, since that is what Summer Cloud actually looks like.
+- Tabs, table, dialog, and spinner do not appear in the source screens; they are
+  extrapolated from the rules above to complete the `ld-*` inventory.
+- The source screens set white text on retail red (`#ff4d4d`), which is 3.27:1 —
+  below AA at badge and button sizes. This theme keeps the vivid red and puts
+  dark text on it (4.97:1), and uses `--ld-danger-deep` for the solid
+  destructive button (5.55:1 on white). Every other foreground/background pair
+  in the palette clears AA.
+
+## Code syntax
+
+Tokens `--ld-code-*`, part of the baseline contract. Palette hues deepened for
+contrast on white: violet keywords, deep-green strings, deep-amber numbers,
+accent-deep functions, deep-teal types, danger-deep variables, muted-faint
+comments, faint meta.
+
+## Scoping
+
+Every rule is guarded by `data-ld-style="summer-cloud"` (self or ancestor),
+wrapped in zero-specificity `:where()`. Set the attribute on `<html>` for a
+page or on a container for an embedded island.

package/summer-cloud/index.css

@@ -0,0 +1,15 @@
+/* summer-cloud — full theme entry point */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components/card.css";
+@import "./components/link.css";
+@import "./components/button.css";
+@import "./components/form.css";
+@import "./components/badge.css";
+@import "./components/alert.css";
+@import "./components/dialog.css";
+@import "./components/tabs.css";
+@import "./components/table.css";
+@import "./components/progress.css";
+@import "./components/muted.css";
+@import "./components/pre.css";

package/summer-cloud/tokens.css

@@ -0,0 +1,93 @@
+/* summer-cloud — design tokens
+ * Source of truth for the summer-cloud theme. Consume via:
+ *   @import "@lepid-labs/styles/summer-cloud/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Nothing applies until an element carries data-ld-style="summer-cloud"
+ * — set it on <html> for a page, or on any container for an embedded island.
+ * The :where() keeps specificity at zero, so any consumer rule overrides.
+ *
+ * Every theme declares the same baseline token set (styles/test enforces
+ * parity); names marked (extra) are additions beyond it that only this
+ * theme's own component CSS may rely on.
+ */
+:where([data-ld-style="summer-cloud"]) {
+  color-scheme: light;
+
+  /* color */
+  --ld-bg: #f6fafe;
+  --ld-bg-blend: #eaeef2;
+  --ld-surface: #ffffff;
+  --ld-surface-sunken: #f0f4f8; /* inset fields */
+  --ld-surface-glass: rgba(255, 255, 255, 0.6);
+  --ld-surface-glass-high: rgba(255, 255, 255, 0.8); /* (extra) floating tier */
+  --ld-on-surface: #171c1f;
+  --ld-faint: #484457;
+  --ld-primary: #4500d9;
+  --ld-primary-bright: #5d2bff; /* (extra) shadow/glow tint */
+  --ld-primary-glow: rgba(93, 43, 255, 0.4);
+  --ld-primary-border: rgba(69, 0, 217, 0.2);
+  --ld-on-primary: #ffffff; /* text on solid violet fills */
+  --ld-accent: #0cb3ff;
+  --ld-accent-glow: rgba(12, 179, 255, 0.2);
+  --ld-accent-deep: #006492; /* (extra) readable accent text */
+  --ld-border: rgba(255, 255, 255, 0.4);
+  --ld-border-lit: rgba(255, 255, 255, 0.7); /* lit top edge of glass panes */
+  --ld-outline: #c9c3da; /* (extra) hairline on opaque surfaces */
+
+  /* semantic color */
+  --ld-info: #0cb3ff;
+  --ld-success: #30e330;
+  --ld-warning: #f2c025;
+  --ld-danger: #ff4d4d;
+  --ld-danger-deep: #cc1f1f; /* (extra) danger where white text sits on it */
+
+  /* sky gradient (extra) */
+  --ld-sky-start: #f0f4f8;
+  --ld-sky-end: #c9e6ff;
+  --ld-sky-tint: rgba(255, 255, 255, 0.7);
+
+  /* code syntax — deepened palette hues for contrast on white */
+  --ld-code-keyword: #4500d9;
+  --ld-code-string: #157a2a;
+  --ld-code-number: #9a6b00;
+  --ld-code-comment: #6e6880;
+  --ld-code-function: #006492;
+  --ld-code-variable: #cc1f1f;
+  --ld-code-type: #00877a;
+  --ld-code-meta: #484457;
+
+  /* typography */
+  --ld-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  --ld-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --ld-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --ld-font-weight: 400;
+  --ld-font-weight-medium: 600;
+  --ld-font-weight-bold: 700;
+  --ld-text-sm: 14px;
+  --ld-tracking-wide: 0.05em;
+  --ld-tracking-tight: -0.02em; /* (extra) display sizes */
+
+  /* shape & effects */
+  --ld-radius: 1rem;
+  --ld-radius-sm: 0.25rem; /* (extra) */
+  --ld-radius-lg: 1.5rem; /* cards and large containers */
+  --ld-radius-pill: 9999px; /* (extra) */
+  --ld-blur: 12px;
+  --ld-blur-high: 20px; /* (extra) */
+  --ld-transition: 0.3s;
+  --ld-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* (extra) */
+
+  /* elevation (extra) — tinted with the primary, never grey */
+  --ld-shadow: 0 20px 40px rgba(93, 43, 255, 0.08);
+  --ld-shadow-soft: 0 10px 30px rgba(0, 100, 146, 0.05);
+  --ld-shadow-raised: 0 4px 14px rgba(93, 43, 255, 0.39);
+  --ld-shadow-raised-hover: 0 6px 20px rgba(93, 43, 255, 0.5);
+
+  /* spacing */
+  --ld-space-1: 0.25rem;
+  --ld-space-2: 0.5rem;
+  --ld-space-3: 1rem;
+  --ld-space-4: 1.5rem;
+  --ld-space-5: 2rem;
+}