@nazuraki/styles 0.2.1 → 0.2.3

package/summer-cloud/design.md

@@ -0,0 +1,115 @@
+# 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 `.nb-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**
+  (`--nb-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 `nb-` (shared across themes so `@nazuraki/ui-react` stays
+theme-agnostic). Variants use BEM-ish modifiers (`nb-btn--primary`).
+
+- **Card** `.nb-card` — glass panel; `--floating` adds the Level 2 hover lift.
+- **NavLink** `.nb-link` — pill, sky-tint wash, `→` slides 4px on hover;
+  `--active` / `[aria-current=page]` becomes the violet underline rule.
+- **Button** `.nb-btn` — glass by default; `--primary` (solid violet CTA, one
+  per view), `--accent` (sky-edged glass), `--ghost`, `--danger`.
+- **Form** `.nb-input`, `.nb-textarea`, `.nb-select`, `.nb-label`, `.nb-field`,
+  `.nb-checkbox`, `.nb-radio`, `.nb-switch`, `.nb-choice` — sunken fields, no
+  resting border, sky-blue ring on focus. The switch is the oversized
+  "cloud-toggle": squishy, and green when live.
+- **Badge** `.nb-badge` + semantic modifiers — solid pills, mono uppercase.
+  **Chip** `.nb-chip` — outlined filter chip; `--selected` fills violet.
+- **Alert** `.nb-alert` — glass card with a 4px semantic left rule.
+- **Dialog** `.nb-dialog` — native `<dialog>`, opaque white, blurred backdrop.
+- **Tabs** `.nb-tabs`/`.nb-tab`/`.nb-tabpanel` — violet underline when active.
+- **Table** `.nb-table` — mono uppercase headers, sky-tint row hover; add
+  `.nb-num` to numeric cells for the mono/right-aligned treatment.
+- **Progress** `.nb-progress`, **Spinner** `.nb-spinner` — glowing violet.
+
+## 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 `nb-*` 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 `--nb-danger-deep` for the solid
+  destructive button (5.55:1 on white). Every other foreground/background pair
+  in the palette clears AA.

package/summer-cloud/index.css

@@ -0,0 +1,13 @@
+/* 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";

package/summer-cloud/tokens.css

@@ -0,0 +1,74 @@
+/* summer-cloud — design tokens
+ * Source of truth for the summer-cloud theme. Consume via:
+ *   @import "@nazuraki/styles/summer-cloud/tokens";
+ * or pull the whole theme with ./index.css.
+ *
+ * Token names mirror neon-butterfly's --nb-* contract so themes stay
+ * swappable; names marked (extra) are additions this theme needs and that
+ * neon-butterfly does not define.
+ */
+:root {
+  /* color */
+  --nb-bg: #f6fafe;
+  --nb-bg-blend: #eaeef2;
+  --nb-surface: #ffffff;
+  --nb-surface-sunken: #f0f4f8; /* (extra) inset fields */
+  --nb-surface-glass: rgba(255, 255, 255, 0.6);
+  --nb-surface-glass-high: rgba(255, 255, 255, 0.8); /* (extra) floating tier */
+  --nb-on-surface: #171c1f;
+  --nb-faint: #484457;
+  --nb-primary: #4500d9;
+  --nb-primary-bright: #5d2bff; /* (extra) shadow/glow tint */
+  --nb-primary-glow: rgba(93, 43, 255, 0.4);
+  --nb-primary-border: rgba(69, 0, 217, 0.2);
+  --nb-accent: #0cb3ff;
+  --nb-accent-glow: rgba(12, 179, 255, 0.2);
+  --nb-accent-deep: #006492; /* (extra) readable accent text */
+  --nb-border: rgba(255, 255, 255, 0.4);
+  --nb-outline: #c9c3da; /* (extra) hairline on opaque surfaces */
+
+  /* semantic color */
+  --nb-info: #0cb3ff;
+  --nb-success: #30e330;
+  --nb-warning: #f2c025;
+  --nb-danger: #ff4d4d;
+  --nb-danger-deep: #cc1f1f; /* (extra) danger where white text sits on it */
+
+  /* sky gradient (extra) */
+  --nb-sky-start: #f0f4f8;
+  --nb-sky-end: #c9e6ff;
+  --nb-sky-tint: rgba(255, 255, 255, 0.7);
+
+  /* typography */
+  --nb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; /* (extra) */
+  --nb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif; /* (extra) */
+  --nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --nb-font-weight: 400;
+  --nb-font-weight-medium: 600; /* (extra) */
+  --nb-font-weight-bold: 700;
+  --nb-text-sm: 14px;
+  --nb-tracking-wide: 0.05em;
+  --nb-tracking-tight: -0.02em; /* (extra) display sizes */
+
+  /* shape & effects */
+  --nb-radius: 1rem;
+  --nb-radius-sm: 0.25rem; /* (extra) */
+  --nb-radius-pill: 9999px; /* (extra) */
+  --nb-blur: 12px;
+  --nb-blur-high: 20px; /* (extra) */
+  --nb-transition: 0.3s;
+  --nb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* (extra) */
+
+  /* elevation (extra) — tinted with the primary, never grey */
+  --nb-shadow: 0 20px 40px rgba(93, 43, 255, 0.08);
+  --nb-shadow-soft: 0 10px 30px rgba(0, 100, 146, 0.05);
+  --nb-shadow-raised: 0 4px 14px rgba(93, 43, 255, 0.39);
+  --nb-shadow-raised-hover: 0 6px 20px rgba(93, 43, 255, 0.5);
+
+  /* spacing */
+  --nb-space-1: 0.25rem;
+  --nb-space-2: 0.5rem;
+  --nb-space-3: 1rem;
+  --nb-space-4: 1.5rem;
+  --nb-space-5: 2rem;
+}