@lepid-labs/styles 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/all.css +10 -0
  2. package/luminous-precision/base.css +58 -0
  3. package/luminous-precision/components/alert.css +26 -0
  4. package/luminous-precision/components/badge.css +19 -0
  5. package/luminous-precision/components/button.css +94 -0
  6. package/luminous-precision/components/card.css +12 -0
  7. package/luminous-precision/components/dialog.css +31 -0
  8. package/luminous-precision/components/form.css +126 -0
  9. package/luminous-precision/components/link.css +46 -0
  10. package/luminous-precision/components/muted.css +7 -0
  11. package/luminous-precision/components/pre.css +14 -0
  12. package/luminous-precision/components/progress.css +41 -0
  13. package/luminous-precision/components/table.css +28 -0
  14. package/luminous-precision/components/tabs.css +33 -0
  15. package/luminous-precision/design.md +95 -0
  16. package/luminous-precision/index.css +15 -0
  17. package/luminous-precision/tokens.css +72 -0
  18. package/manifest.json +23 -0
  19. package/neon-butterfly/assets/butterfly-circuit.png +0 -0
  20. package/neon-butterfly/base.css +49 -0
  21. package/neon-butterfly/components/alert.css +26 -0
  22. package/neon-butterfly/components/badge.css +17 -0
  23. package/neon-butterfly/components/button.css +60 -0
  24. package/neon-butterfly/components/card.css +11 -0
  25. package/neon-butterfly/components/dialog.css +29 -0
  26. package/neon-butterfly/components/form.css +124 -0
  27. package/neon-butterfly/components/link.css +55 -0
  28. package/neon-butterfly/components/muted.css +7 -0
  29. package/neon-butterfly/components/pre.css +13 -0
  30. package/neon-butterfly/components/progress.css +41 -0
  31. package/neon-butterfly/components/table.css +27 -0
  32. package/neon-butterfly/components/tabs.css +33 -0
  33. package/neon-butterfly/design.md +80 -0
  34. package/neon-butterfly/index.css +15 -0
  35. package/neon-butterfly/tokens.css +72 -0
  36. package/package.json +40 -0
  37. package/summer-cloud/base.css +58 -0
  38. package/summer-cloud/components/alert.css +29 -0
  39. package/summer-cloud/components/badge.css +49 -0
  40. package/summer-cloud/components/button.css +115 -0
  41. package/summer-cloud/components/card.css +35 -0
  42. package/summer-cloud/components/dialog.css +30 -0
  43. package/summer-cloud/components/form.css +146 -0
  44. package/summer-cloud/components/link.css +60 -0
  45. package/summer-cloud/components/muted.css +8 -0
  46. package/summer-cloud/components/pre.css +16 -0
  47. package/summer-cloud/components/progress.css +43 -0
  48. package/summer-cloud/components/table.css +34 -0
  49. package/summer-cloud/components/tabs.css +38 -0
  50. package/summer-cloud/design.md +137 -0
  51. package/summer-cloud/index.css +15 -0
  52. package/summer-cloud/tokens.css +93 -0
package/neon-butterfly/design.md ADDED
@@ -0,0 +1,80 @@
1
+ # neon-butterfly
2
+
3
+ Dark, mono-spaced, neon-accented terminal aesthetic. Deep navy backgrounds with
4
+ frosted-glass surfaces; lilac is the primary voice, neon lime the accent that
5
+ signals activity. Everything is uppercase, tracked-out JetBrains Mono — the UI
6
+ should feel like a beautiful command console, not a document.
7
+
8
+ ## Color
9
+
10
+ | Role | Value | Usage |
11
+ | --- | --- | --- |
12
+ | Background | `#0b1326` | Page background (often blended over imagery with `luminosity`) |
13
+ | Surface | `#171f33` | Solid panels, inputs, dialogs |
14
+ | Surface glass | `rgba(23,31,51,0.75)` + 12px blur | Cards, nav links, alerts |
15
+ | On-surface | `#dae2fd` | Body text |
16
+ | Faint | `#958da1` | Secondary text, labels, idle chevrons |
17
+ | Primary | `#d2bbff` (lilac) | Emphasis, hover states, active tabs, glow |
18
+ | Accent | `#39ff14` (neon lime) | Activity signals: checked states, chevrons on hover, success |
19
+ | Info | `#4dc9ff` | Informational callouts and badges |
20
+ | Success | `#39ff14` | Shares the accent — success *is* the neon signal |
21
+ | Warning | `#ffd23f` | Caution states |
22
+ | Danger | `#ff2d78` | Destructive actions, errors |
23
+ | Border | `rgba(255,255,255,0.1)` | All resting borders |
24
+
25
+ The signature page background is the butterfly-circuit artwork
26
+ (`assets/butterfly-circuit.png`) blended into the navy with `luminosity` —
27
+ apply via `.ld-bg` on `<body>`. Optional; plain `--ld-bg` navy is also correct.
28
+
29
+ Rules: color is communication — resting UI stays in navy/faint; lilac and lime
30
+ appear only on interaction or state. Never use pure white or pure black.
31
+
32
+ ## Typography
33
+
34
+ - **Family:** JetBrains Mono (weights 450 regular, 700 bold); fallback `ui-monospace`.
35
+ - **Interactive text** (buttons, links, tabs, labels, table headers): uppercase,
36
+ 700, 14px (labels/headers 11–12px), letter-spacing `0.1em`.
37
+ - **Body text:** sentence case, 450.
38
+
39
+ ## Shape & effects
40
+
41
+ - Radius `0.5rem` everywhere (pills for switches/progress).
42
+ - Borders are 1px hairlines; emphasis comes from border *color*, not weight.
43
+ - Glow, not shadow: elevation is expressed with colored `box-shadow` glows
44
+ (`ld-pulse-glow` on hover) rather than dark drop shadows.
45
+ - Transitions 0.3s; hover motion is a 4px `translateX` slide on links.
46
+ - Respect `prefers-reduced-motion`.
47
+
48
+ ## Components
49
+
50
+ Class prefix `ld-`. Variants use BEM-ish modifiers (`ld-btn--accent`).
51
+
52
+ - **Card** `.ld-card` — frosted glass panel.
53
+ - **NavLink** `.ld-link` — the switchboard link: `>` chevron turns lime on hover.
54
+ - **Button** `.ld-btn` — `--primary`, `--accent`, `--danger` variants; `--sm`
55
+ compact size (badge-scaled) for inline/table-row actions.
56
+ - **Form** `.ld-input`, `.ld-textarea`, `.ld-select`, `.ld-label`, `.ld-field`,
57
+ `.ld-checkbox`, `.ld-radio`, `.ld-switch`, `.ld-choice` — checked states glow lime.
58
+ - **Badge** `.ld-badge` + semantic modifiers.
59
+ - **Alert** `.ld-alert` — left accent bar carries the semantic color.
60
+ - **Dialog** `.ld-dialog` — native `<dialog>`, lilac border + glow, blurred backdrop.
61
+ - **Tabs** `.ld-tabs`/`.ld-tab`/`.ld-tabpanel` — active tab underlined in lilac with text glow.
62
+ - **Table** `.ld-table` — lilac header rule, glass row hover.
63
+ - **Progress** `.ld-progress`, **Spinner** `.ld-spinner` — glowing lilac indicators.
64
+ - **Muted text** `.ld-muted` — faint secondary/empty-state text;
65
+ `color: var(--ld-faint)` only, no italic — this theme's mono/uppercase
66
+ terminal voice never reaches for a literary flourish.
67
+ - **Pre / log block** `.ld-pre` — command/log `<pre>`; sunken background,
68
+ hairline border, radius, small mono, horizontal scroll.
69
+
70
+ ## Code syntax
71
+
72
+ Tokens `--ld-code-*`, part of the baseline contract. Lilac keywords, neon-lime
73
+ strings, gold numbers, info-cyan functions, light-cyan types, softened-pink
74
+ variables, dimmed-faint comments, faint meta.
75
+
76
+ ## Scoping
77
+
78
+ Every rule is guarded by `data-ld-style="neon-butterfly"` (self or ancestor),
79
+ wrapped in zero-specificity `:where()`. Set the attribute on `<html>` for a
80
+ page or on a container for an embedded island.
package/neon-butterfly/index.css ADDED
@@ -0,0 +1,15 @@
1
+ /* neon-butterfly — full theme entry point */
2
+ @import "./tokens.css";
3
+ @import "./base.css";
4
+ @import "./components/card.css";
5
+ @import "./components/link.css";
6
+ @import "./components/button.css";
7
+ @import "./components/form.css";
8
+ @import "./components/badge.css";
9
+ @import "./components/alert.css";
10
+ @import "./components/dialog.css";
11
+ @import "./components/tabs.css";
12
+ @import "./components/table.css";
13
+ @import "./components/progress.css";
14
+ @import "./components/muted.css";
15
+ @import "./components/pre.css";
package/neon-butterfly/tokens.css ADDED
@@ -0,0 +1,72 @@
1
+ /* neon-butterfly — design tokens
2
+ * Source of truth for the neon-butterfly theme. Consume via:
3
+ * @import "@lepid-labs/styles/neon-butterfly/tokens";
4
+ * or pull the whole theme with ./index.css.
5
+ *
6
+ * Nothing applies until an element carries data-ld-style="neon-butterfly"
7
+ * — set it on <html> for a page, or on any container for an embedded island.
8
+ * The :where() keeps specificity at zero, so any consumer rule overrides.
9
+ *
10
+ * Every theme declares the same baseline token set (styles/test enforces
11
+ * parity); names marked (extra) are additions beyond it that only this
12
+ * theme's own component CSS may rely on.
13
+ */
14
+ :where([data-ld-style="neon-butterfly"]) {
15
+ color-scheme: dark;
16
+
17
+ /* color */
18
+ --ld-bg: #0b1326;
19
+ --ld-bg-blend: #1a1f2e;
20
+ --ld-surface: #171f33;
21
+ --ld-surface-sunken: #0e1526; /* inset fields */
22
+ --ld-surface-glass: rgba(23, 31, 51, 0.55);
23
+ --ld-on-surface: #dae2fd;
24
+ --ld-faint: #958da1;
25
+ --ld-primary: #d2bbff;
26
+ --ld-primary-glow: rgba(210, 187, 255, 0.6);
27
+ --ld-primary-border: rgba(210, 187, 255, 0.8);
28
+ --ld-on-primary: #0b1326; /* text on solid lilac fills */
29
+ --ld-accent: #39ff14;
30
+ --ld-accent-glow: rgba(57, 255, 20, 0.5);
31
+ --ld-border: rgba(255, 255, 255, 0.1);
32
+ --ld-border-lit: rgba(255, 255, 255, 0.25); /* lit top edge of glass panes */
33
+
34
+ /* semantic color */
35
+ --ld-info: #4dc9ff;
36
+ --ld-success: #39ff14;
37
+ --ld-warning: #ffd23f;
38
+ --ld-danger: #ff2d78;
39
+
40
+ /* code syntax — lilac keywords, neon strings, palette-derived accents */
41
+ --ld-code-keyword: #d2bbff;
42
+ --ld-code-string: #39ff14;
43
+ --ld-code-number: #ffd23f;
44
+ --ld-code-comment: #8a8199;
45
+ --ld-code-function: #4dc9ff;
46
+ --ld-code-variable: #ff6ba0;
47
+ --ld-code-type: #7fdcff;
48
+ --ld-code-meta: #958da1;
49
+
50
+ /* typography — all-mono aesthetic: display and body share the mono stack */
51
+ --ld-font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
52
+ --ld-font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
53
+ --ld-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
54
+ --ld-font-weight: 450;
55
+ --ld-font-weight-medium: 700; /* only 450 + 700 webfont weights load */
56
+ --ld-font-weight-bold: 700;
57
+ --ld-text-sm: 14px;
58
+ --ld-tracking-wide: 0.1em;
59
+
60
+ /* shape & effects */
61
+ --ld-radius: 0.5rem;
62
+ --ld-radius-lg: 0.5rem; /* one radius everywhere is the look */
63
+ --ld-blur: 12px;
64
+ --ld-transition: 0.3s;
65
+
66
+ /* spacing */
67
+ --ld-space-1: 0.25rem;
68
+ --ld-space-2: 0.5rem;
69
+ --ld-space-3: 1rem;
70
+ --ld-space-4: 1.5rem;
71
+ --ld-space-5: 2rem;
72
+ }
package/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "@lepid-labs/styles",
3
+ "version": "1.0.0",
4
+ "description": "Shared design-system styles: tokens, base styles, and component classes per theme.",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/Lepid-Labs/lepid-design.git",
9
+ "directory": "styles"
10
+ },
11
+ "publishConfig": {
12
+ "access": "public"
13
+ },
14
+ "scripts": {
15
+ "test": "node --test"
16
+ },
17
+ "files": [
18
+ "neon-butterfly",
19
+ "summer-cloud",
20
+ "luminous-precision",
21
+ "all.css",
22
+ "manifest.json"
23
+ ],
24
+ "exports": {
25
+ "./all": "./all.css",
26
+ "./manifest": "./manifest.json",
27
+ "./neon-butterfly": "./neon-butterfly/index.css",
28
+ "./neon-butterfly/tokens": "./neon-butterfly/tokens.css",
29
+ "./neon-butterfly/base": "./neon-butterfly/base.css",
30
+ "./neon-butterfly/components/*": "./neon-butterfly/components/*.css",
31
+ "./summer-cloud": "./summer-cloud/index.css",
32
+ "./summer-cloud/tokens": "./summer-cloud/tokens.css",
33
+ "./summer-cloud/base": "./summer-cloud/base.css",
34
+ "./summer-cloud/components/*": "./summer-cloud/components/*.css",
35
+ "./luminous-precision": "./luminous-precision/index.css",
36
+ "./luminous-precision/tokens": "./luminous-precision/tokens.css",
37
+ "./luminous-precision/base": "./luminous-precision/base.css",
38
+ "./luminous-precision/components/*": "./luminous-precision/components/*.css"
39
+ }
40
+ }
package/summer-cloud/base.css ADDED
@@ -0,0 +1,58 @@
1
+ /* summer-cloud — base styles
2
+ * Scoped defaults. Requires tokens.css. Apps that need the webfonts should
3
+ * include the Google Fonts <link>s for Plus Jakarta Sans (400;600;700;800),
4
+ * Inter (400;600) and JetBrains Mono (500;700), or self-host; every token
5
+ * stack falls back to a system family.
6
+ *
7
+ * The element carrying data-ld-style is the theme's canvas: it gets the
8
+ * background, text color, and body font — whether that is <html> for a page
9
+ * or a mount container for an embedded island. Page-only rules (body margin,
10
+ * viewport height) apply only when the attribute sits on <html>.
11
+ */
12
+ :where([data-ld-style="summer-cloud"]) {
13
+ background-color: var(--ld-bg);
14
+ color: var(--ld-on-surface);
15
+ font-family: var(--ld-font-body);
16
+ font-weight: var(--ld-font-weight);
17
+ -webkit-font-smoothing: antialiased;
18
+ }
19
+
20
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *),
21
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *)::before,
22
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *)::after {
23
+ box-sizing: border-box;
24
+ }
25
+
26
+ :where(html[data-ld-style="summer-cloud"]) body {
27
+ margin: 0;
28
+ min-height: 100vh;
29
+ background-color: var(--ld-bg);
30
+ color: var(--ld-on-surface);
31
+ font-family: var(--ld-font-body);
32
+ font-weight: var(--ld-font-weight);
33
+ -webkit-font-smoothing: antialiased;
34
+ }
35
+
36
+ /* Opt-in page background: the sky gradient. Flat --ld-bg is also correct, but
37
+ * the gradient is the signature — the theme reads as "airy" only against it.
38
+ * Apply to <body>, or to the attributed container itself. */
39
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-bg {
40
+ background: linear-gradient(135deg, var(--ld-sky-start) 0%, var(--ld-sky-end) 100%);
41
+ background-attachment: fixed;
42
+ }
43
+
44
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *):where(h1, h2, h3, h4) {
45
+ font-family: var(--ld-font-display);
46
+ font-weight: var(--ld-font-weight-bold);
47
+ letter-spacing: var(--ld-tracking-tight);
48
+ color: var(--ld-on-surface);
49
+ }
50
+
51
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *):where(a) {
52
+ color: var(--ld-primary);
53
+ }
54
+
55
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *)::selection {
56
+ background: var(--ld-primary);
57
+ color: #fff;
58
+ }
package/summer-cloud/components/alert.css ADDED
@@ -0,0 +1,29 @@
1
+ /* summer-cloud — alert / callout: glass card with a semantic left rule */
2
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert {
3
+ padding: var(--ld-space-4);
4
+ background: var(--ld-surface-glass);
5
+ border: 1px solid var(--ld-border);
6
+ border-left: 4px solid var(--ld-accent);
7
+ border-radius: var(--ld-radius);
8
+ backdrop-filter: blur(var(--ld-blur));
9
+ -webkit-backdrop-filter: blur(var(--ld-blur));
10
+ box-shadow: var(--ld-shadow-soft);
11
+ color: var(--ld-on-surface);
12
+ font-size: var(--ld-text-sm);
13
+ }
14
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert--info { border-left-color: var(--ld-info); }
15
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert--success { border-left-color: var(--ld-success); }
16
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert--warning { border-left-color: var(--ld-warning); }
17
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert--danger { border-left-color: var(--ld-danger); }
18
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert__title {
19
+ display: block;
20
+ margin-bottom: var(--ld-space-1);
21
+ font-family: var(--ld-font-display);
22
+ font-weight: var(--ld-font-weight-medium);
23
+ font-size: var(--ld-text-sm);
24
+ color: var(--ld-on-surface);
25
+ }
26
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert--info .ld-alert__title { color: var(--ld-accent-deep); }
27
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert--success .ld-alert__title { color: #1a7a1a; }
28
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert--warning .ld-alert__title { color: #594400; }
29
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-alert--danger .ld-alert__title { color: #93000a; }
package/summer-cloud/components/badge.css ADDED
@@ -0,0 +1,49 @@
1
+ /* summer-cloud — badge: solid pill, mono uppercase, for retail energy */
2
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: var(--ld-space-1);
6
+ padding: 0.25rem 0.75rem;
7
+ background: var(--ld-surface-glass-high);
8
+ border: 1px solid var(--ld-border);
9
+ border-radius: var(--ld-radius-pill);
10
+ color: var(--ld-faint);
11
+ text-transform: uppercase;
12
+ font-family: var(--ld-font-mono);
13
+ font-size: 12px;
14
+ font-weight: 500;
15
+ letter-spacing: var(--ld-tracking-wide);
16
+ box-shadow: 0 1px 2px rgba(93, 43, 255, 0.06);
17
+ }
18
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--primary { background: var(--ld-primary); border-color: transparent; color: #fff; }
19
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--info { background: var(--ld-info); border-color: transparent; color: #004261; }
20
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--success { background: var(--ld-success); border-color: transparent; color: #0a2e0a; }
21
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--warning { background: var(--ld-warning); border-color: transparent; color: #241a00; }
22
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--danger { background: var(--ld-danger); border-color: transparent; color: #4a0000; }
23
+
24
+ /* Chip — the filter variant: outlined until selected. */
25
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-chip {
26
+ display: inline-flex;
27
+ align-items: center;
28
+ gap: var(--ld-space-1);
29
+ padding: var(--ld-space-2) var(--ld-space-3);
30
+ background: none;
31
+ border: 1px solid var(--ld-outline);
32
+ border-radius: var(--ld-radius-pill);
33
+ color: var(--ld-faint);
34
+ font-family: var(--ld-font-display);
35
+ font-size: 12px;
36
+ font-weight: var(--ld-font-weight-medium);
37
+ cursor: pointer;
38
+ transition: background var(--ld-transition), color var(--ld-transition),
39
+ border-color var(--ld-transition);
40
+ }
41
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-chip:hover {
42
+ background: var(--ld-sky-tint);
43
+ }
44
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-chip--selected,
45
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-chip[aria-pressed="true"] {
46
+ background: var(--ld-primary-bright);
47
+ border-color: transparent;
48
+ color: #fff;
49
+ }
package/summer-cloud/components/button.css ADDED
@@ -0,0 +1,115 @@
1
+ /* summer-cloud — button: pill-shaped, bouncy, tinted-shadow lift */
2
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ gap: var(--ld-space-2);
7
+ padding: 0.75rem var(--ld-space-4);
8
+ background: rgba(255, 255, 255, 0.4);
9
+ border: 1px solid var(--ld-border);
10
+ border-radius: var(--ld-radius-pill);
11
+ color: var(--ld-faint);
12
+ font-family: var(--ld-font-display);
13
+ font-weight: var(--ld-font-weight-medium);
14
+ font-size: var(--ld-text-sm);
15
+ cursor: pointer;
16
+ transition:
17
+ background var(--ld-transition),
18
+ border-color var(--ld-transition),
19
+ color var(--ld-transition),
20
+ box-shadow 0.2s ease,
21
+ transform 0.2s var(--ld-ease-bounce);
22
+ }
23
+ /* --sm: compact size for inline/table-row actions, scaled to .ld-badge
24
+ * (composes with any variant; keeps the pill radius from .ld-btn). */
25
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--sm {
26
+ padding: 0.25rem 0.75rem;
27
+ font-size: 12px;
28
+ }
29
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn:hover,
30
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn:focus-visible {
31
+ background: rgba(255, 255, 255, 0.6);
32
+ border-color: var(--ld-primary-border);
33
+ color: var(--ld-primary);
34
+ transform: scale(1.03);
35
+ outline: none;
36
+ }
37
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn:focus-visible {
38
+ box-shadow: 0 0 0 4px var(--ld-accent-glow);
39
+ }
40
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn:active {
41
+ transform: scale(0.95);
42
+ }
43
+
44
+ /* Primary — the solid violet CTA. One per view. */
45
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--primary {
46
+ background: var(--ld-primary);
47
+ border-color: transparent;
48
+ color: #fff;
49
+ font-weight: var(--ld-font-weight-bold);
50
+ box-shadow: var(--ld-shadow-raised);
51
+ }
52
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--primary:hover {
53
+ background: var(--ld-primary-bright);
54
+ color: #fff;
55
+ box-shadow: var(--ld-shadow-raised-hover);
56
+ }
57
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--primary:focus-visible {
58
+ background: var(--ld-primary-bright);
59
+ color: #fff;
60
+ box-shadow: var(--ld-shadow-raised-hover), 0 0 0 4px var(--ld-primary-glow);
61
+ }
62
+
63
+ /* Accent — glass with a sky-blue edge, for the secondary path. */
64
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--accent {
65
+ border-color: var(--ld-accent);
66
+ color: var(--ld-accent-deep);
67
+ }
68
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--accent:hover,
69
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--accent:focus-visible {
70
+ color: var(--ld-accent-deep);
71
+ box-shadow: 0 0 0 4px var(--ld-accent-glow);
72
+ }
73
+
74
+ /* Ghost — no chrome until hovered. */
75
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--ghost {
76
+ background: none;
77
+ border-color: transparent;
78
+ box-shadow: none;
79
+ }
80
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--ghost:hover,
81
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--ghost:focus-visible {
82
+ background: var(--ld-sky-tint);
83
+ }
84
+
85
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--danger {
86
+ background: var(--ld-danger-deep);
87
+ border-color: transparent;
88
+ color: #fff;
89
+ font-weight: var(--ld-font-weight-bold);
90
+ box-shadow: 0 4px 14px rgba(204, 31, 31, 0.39);
91
+ }
92
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--danger:hover,
93
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--danger:focus-visible {
94
+ background: var(--ld-danger);
95
+ color: #4a0000;
96
+ box-shadow: 0 6px 20px rgba(255, 77, 77, 0.5);
97
+ }
98
+
99
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn:disabled {
100
+ opacity: 0.5;
101
+ cursor: not-allowed;
102
+ transform: none;
103
+ box-shadow: none;
104
+ }
105
+
106
+ @media (prefers-reduced-motion: reduce) {
107
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn {
108
+ transition: background var(--ld-transition), color var(--ld-transition);
109
+ }
110
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn:hover,
111
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn:focus-visible,
112
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn:active {
113
+ transform: none;
114
+ }
115
+ }
package/summer-cloud/components/card.css ADDED
@@ -0,0 +1,35 @@
1
+ /* summer-cloud — card: the glassmorphic panel everything else sits in */
2
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-card {
3
+ padding: var(--ld-space-5);
4
+ background: var(--ld-surface-glass);
5
+ border: 1px solid var(--ld-border);
6
+ border-radius: var(--ld-radius);
7
+ backdrop-filter: blur(var(--ld-blur));
8
+ -webkit-backdrop-filter: blur(var(--ld-blur));
9
+ box-shadow: var(--ld-shadow);
10
+ color: var(--ld-on-surface);
11
+ }
12
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-card > :first-child { margin-top: 0; }
13
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-card > :last-child { margin-bottom: 0; }
14
+
15
+ /* Level 2 — floating: higher-opacity white, lifts on hover. Use for
16
+ * interactive cards (products, tiles), not for static content panels. */
17
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-card--floating {
18
+ background: var(--ld-surface-glass-high);
19
+ backdrop-filter: blur(var(--ld-blur-high));
20
+ -webkit-backdrop-filter: blur(var(--ld-blur-high));
21
+ transition: transform var(--ld-transition), box-shadow var(--ld-transition);
22
+ }
23
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-card--floating:hover {
24
+ transform: translateY(-4px);
25
+ box-shadow: var(--ld-shadow-raised-hover);
26
+ }
27
+
28
+ @media (prefers-reduced-motion: reduce) {
29
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-card--floating {
30
+ transition: none;
31
+ }
32
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-card--floating:hover {
33
+ transform: none;
34
+ }
35
+ }
package/summer-cloud/components/dialog.css ADDED
@@ -0,0 +1,30 @@
1
+ /* summer-cloud — dialog (native <dialog>): the floating tier, fully opaque */
2
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-dialog {
3
+ padding: var(--ld-space-5);
4
+ max-width: 32rem;
5
+ width: calc(100vw - 2rem);
6
+ background: var(--ld-surface);
7
+ border: 1px solid var(--ld-border);
8
+ border-radius: var(--ld-radius);
9
+ color: var(--ld-on-surface);
10
+ font-family: var(--ld-font-body);
11
+ box-shadow: var(--ld-shadow);
12
+ }
13
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-dialog::backdrop {
14
+ background: rgba(23, 28, 31, 0.3);
15
+ backdrop-filter: blur(4px);
16
+ }
17
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-dialog__title {
18
+ margin: 0 0 var(--ld-space-3);
19
+ color: var(--ld-primary);
20
+ font-family: var(--ld-font-display);
21
+ font-size: 1.5rem;
22
+ font-weight: var(--ld-font-weight-bold);
23
+ letter-spacing: var(--ld-tracking-tight);
24
+ }
25
+ :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-dialog__actions {
26
+ display: flex;
27
+ justify-content: flex-end;
28
+ gap: var(--ld-space-2);
29
+ margin-top: var(--ld-space-5);
30
+ }