@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/luminous-precision/index.css ADDED
@@ -0,0 +1,15 @@
1
+ /* luminous-precision — 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/luminous-precision/tokens.css ADDED
@@ -0,0 +1,72 @@
1
+ /* luminous-precision — design tokens
2
+ * Source of truth for the luminous-precision theme. Consume via:
3
+ * @import "@lepid-labs/styles/luminous-precision/tokens";
4
+ * or pull the whole theme with ./index.css.
5
+ *
6
+ * Nothing applies until an element carries data-ld-style="luminous-precision"
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="luminous-precision"]) {
15
+ color-scheme: dark;
16
+
17
+ /* color */
18
+ --ld-bg: #0a0c10;
19
+ --ld-bg-blend: #111319;
20
+ --ld-surface: #1a1d29;
21
+ --ld-surface-sunken: #0c0e14; /* inset fields, log wells */
22
+ --ld-surface-glass: rgba(26, 29, 41, 0.4);
23
+ --ld-on-surface: #e2e2eb;
24
+ --ld-faint: #958e9b;
25
+ --ld-primary: #c6a5ff;
26
+ --ld-primary-glow: rgba(198, 165, 255, 0.35);
27
+ --ld-primary-border: rgba(198, 165, 255, 0.6);
28
+ --ld-on-primary: #16101f; /* text on solid orchid fills */
29
+ --ld-accent: #00f5ff;
30
+ --ld-accent-glow: rgba(0, 245, 255, 0.3);
31
+ --ld-border: rgba(255, 255, 255, 0.08);
32
+ --ld-border-lit: rgba(255, 255, 255, 0.2); /* lit top edge of glass panes */
33
+
34
+ /* semantic color */
35
+ --ld-info: #83b7ff;
36
+ --ld-success: #47e34e;
37
+ --ld-warning: #ffb86c;
38
+ --ld-danger: #ff4d6d;
39
+
40
+ /* code syntax — orchid keywords, teal types, palette-derived accents */
41
+ --ld-code-keyword: #c6a5ff;
42
+ --ld-code-string: #47e34e;
43
+ --ld-code-number: #ffb86c;
44
+ --ld-code-comment: #837b8d;
45
+ --ld-code-function: #83b7ff;
46
+ --ld-code-variable: #ff7d95;
47
+ --ld-code-type: #00f5ff;
48
+ --ld-code-meta: #958e9b;
49
+
50
+ /* typography */
51
+ --ld-font-display: "Sora", ui-sans-serif, system-ui, sans-serif; /* headlines */
52
+ --ld-font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* mono body is the design */
53
+ --ld-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
54
+ --ld-font-weight: 400;
55
+ --ld-font-weight-medium: 600; /* labels, interactive text */
56
+ --ld-font-weight-bold: 700;
57
+ --ld-text-sm: 14px;
58
+ --ld-tracking-wide: 0.05em;
59
+
60
+ /* shape & effects */
61
+ --ld-radius: 0.5rem;
62
+ --ld-radius-lg: 1rem; /* cards and large containers */
63
+ --ld-blur: 12px;
64
+ --ld-transition: 0.3s;
65
+
66
+ /* spacing (8px rhythm) */
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/manifest.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "contract": 1,
3
+ "themes": {
4
+ "neon-butterfly": {
5
+ "scheme": "dark",
6
+ "fonts": [
7
+ "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@450;700&display=swap"
8
+ ]
9
+ },
10
+ "summer-cloud": {
11
+ "scheme": "light",
12
+ "fonts": [
13
+ "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap"
14
+ ]
15
+ },
16
+ "luminous-precision": {
17
+ "scheme": "dark",
18
+ "fonts": [
19
+ "https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap"
20
+ ]
21
+ }
22
+ }
23
+ }
package/neon-butterfly/base.css ADDED
@@ -0,0 +1,49 @@
1
+ /* neon-butterfly — base styles
2
+ * Scoped defaults. Requires tokens.css. Apps that need the JetBrains Mono
3
+ * webfont should include the Google Fonts <link> (weights 450 + 700) or
4
+ * self-host; the token stack falls back to ui-monospace.
5
+ *
6
+ * The element carrying data-ld-style is the theme's canvas: it gets the
7
+ * background, text color, and body font — whether that is <html> for a page
8
+ * or a mount container for an embedded island. Page-only rules (body margin,
9
+ * viewport height) apply only when the attribute sits on <html>.
10
+ */
11
+ :where([data-ld-style="neon-butterfly"]) {
12
+ background-color: var(--ld-bg);
13
+ color: var(--ld-on-surface);
14
+ font-family: var(--ld-font-body);
15
+ font-weight: var(--ld-font-weight);
16
+ }
17
+
18
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *),
19
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *)::before,
20
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *)::after {
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ :where(html[data-ld-style="neon-butterfly"]) body {
25
+ margin: 0;
26
+ min-height: 100vh;
27
+ background-color: var(--ld-bg);
28
+ color: var(--ld-on-surface);
29
+ font-family: var(--ld-font-body);
30
+ font-weight: var(--ld-font-weight);
31
+ }
32
+
33
+ /* Opt-in page background: the butterfly circuit artwork blended into the navy.
34
+ * Matches the switchboard landing page. Apply to <body>, or to the attributed
35
+ * container itself. */
36
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-bg {
37
+ background: var(--ld-bg) url("./assets/butterfly-circuit.png") center / cover fixed;
38
+ background-blend-mode: luminosity;
39
+ background-color: var(--ld-bg-blend);
40
+ }
41
+
42
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *):where(a) {
43
+ color: var(--ld-primary);
44
+ }
45
+
46
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *)::selection {
47
+ background: var(--ld-primary);
48
+ color: var(--ld-bg);
49
+ }
package/neon-butterfly/components/alert.css ADDED
@@ -0,0 +1,26 @@
1
+ /* neon-butterfly — alert / callout */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert {
3
+ padding: var(--ld-space-3) var(--ld-space-4);
4
+ background: var(--ld-surface-glass);
5
+ border: 1px solid var(--ld-border);
6
+ border-left-width: 3px;
7
+ border-radius: var(--ld-radius);
8
+ backdrop-filter: blur(var(--ld-blur));
9
+ color: var(--ld-on-surface);
10
+ font-size: var(--ld-text-sm);
11
+ }
12
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert--info { border-left-color: var(--ld-info); }
13
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert--success { border-left-color: var(--ld-success); }
14
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert--warning { border-left-color: var(--ld-warning); }
15
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert--danger { border-left-color: var(--ld-danger); }
16
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert__title {
17
+ display: block;
18
+ margin-bottom: var(--ld-space-1);
19
+ text-transform: uppercase;
20
+ font-weight: var(--ld-font-weight-bold);
21
+ letter-spacing: var(--ld-tracking-wide);
22
+ }
23
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert--info .ld-alert__title { color: var(--ld-info); }
24
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert--success .ld-alert__title { color: var(--ld-success); }
25
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert--warning .ld-alert__title { color: var(--ld-warning); }
26
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-alert--danger .ld-alert__title { color: var(--ld-danger); }
package/neon-butterfly/components/badge.css ADDED
@@ -0,0 +1,17 @@
1
+ /* neon-butterfly — badge */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-badge {
3
+ display: inline-block;
4
+ padding: 0.15rem var(--ld-space-2);
5
+ border: 1px solid var(--ld-border);
6
+ border-radius: var(--ld-radius);
7
+ color: var(--ld-faint);
8
+ text-transform: uppercase;
9
+ font-size: 11px;
10
+ font-weight: var(--ld-font-weight-bold);
11
+ letter-spacing: var(--ld-tracking-wide);
12
+ }
13
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-badge--primary { border-color: var(--ld-primary-border); color: var(--ld-primary); }
14
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-badge--info { border-color: var(--ld-info); color: var(--ld-info); }
15
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-badge--success { border-color: var(--ld-success); color: var(--ld-success); }
16
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-badge--warning { border-color: var(--ld-warning); color: var(--ld-warning); }
17
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-badge--danger { border-color: var(--ld-danger); color: var(--ld-danger); }
package/neon-butterfly/components/button.css ADDED
@@ -0,0 +1,60 @@
1
+ /* neon-butterfly — button */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: var(--ld-space-2);
6
+ padding: var(--ld-space-2) var(--ld-space-3);
7
+ background: var(--ld-surface-glass);
8
+ border: 1px solid var(--ld-border);
9
+ border-radius: var(--ld-radius);
10
+ color: var(--ld-on-surface);
11
+ text-transform: uppercase;
12
+ font-family: var(--ld-font-mono);
13
+ font-weight: var(--ld-font-weight-bold);
14
+ font-size: var(--ld-text-sm);
15
+ letter-spacing: var(--ld-tracking-wide);
16
+ cursor: pointer;
17
+ transition:
18
+ border-color var(--ld-transition),
19
+ color var(--ld-transition);
20
+ }
21
+ /* --sm: compact size for inline/table-row actions, scaled to .ld-badge
22
+ * (composes with any variant — sets size only). */
23
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--sm {
24
+ padding: 0.15rem var(--ld-space-2);
25
+ font-size: 12px;
26
+ }
27
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn:hover,
28
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn:focus-visible {
29
+ border-color: var(--ld-primary-border);
30
+ color: var(--ld-primary);
31
+ animation: ld-nb-pulse-glow 2s infinite;
32
+ outline: none;
33
+ }
34
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--primary {
35
+ border-color: var(--ld-primary-border);
36
+ color: var(--ld-primary);
37
+ }
38
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--accent {
39
+ border-color: var(--ld-accent);
40
+ color: var(--ld-accent);
41
+ }
42
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn--danger {
43
+ border-color: var(--ld-danger);
44
+ color: var(--ld-danger);
45
+ }
46
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn:disabled {
47
+ opacity: 0.5;
48
+ cursor: not-allowed;
49
+ animation: none;
50
+ }
51
+
52
+ @media (prefers-reduced-motion: reduce) {
53
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn {
54
+ transition: none;
55
+ }
56
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn:hover,
57
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-btn:focus-visible {
58
+ animation: none;
59
+ }
60
+ }
package/neon-butterfly/components/card.css ADDED
@@ -0,0 +1,11 @@
1
+ /* neon-butterfly — card */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-card {
3
+ padding: var(--ld-space-4);
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
+ color: var(--ld-on-surface);
9
+ }
10
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-card > :first-child { margin-top: 0; }
11
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-card > :last-child { margin-bottom: 0; }
package/neon-butterfly/components/dialog.css ADDED
@@ -0,0 +1,29 @@
1
+ /* neon-butterfly — dialog (native <dialog>) */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-dialog {
3
+ padding: var(--ld-space-4);
4
+ max-width: 32rem;
5
+ width: calc(100vw - 2rem);
6
+ background: var(--ld-surface);
7
+ border: 1px solid var(--ld-primary-border);
8
+ border-radius: var(--ld-radius);
9
+ color: var(--ld-on-surface);
10
+ font-family: var(--ld-font-mono);
11
+ box-shadow: 0 0 30px rgba(210, 187, 255, 0.25);
12
+ }
13
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-dialog::backdrop {
14
+ background: rgba(11, 19, 38, 0.7);
15
+ backdrop-filter: blur(4px);
16
+ }
17
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-dialog__title {
18
+ margin: 0 0 var(--ld-space-3);
19
+ color: var(--ld-primary);
20
+ text-transform: uppercase;
21
+ font-size: 1rem;
22
+ letter-spacing: var(--ld-tracking-wide);
23
+ }
24
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-dialog__actions {
25
+ display: flex;
26
+ justify-content: flex-end;
27
+ gap: var(--ld-space-2);
28
+ margin-top: var(--ld-space-4);
29
+ }
package/neon-butterfly/components/form.css ADDED
@@ -0,0 +1,124 @@
1
+ /* neon-butterfly — form controls: input, textarea, select, checkbox, radio, switch */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-input,
3
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-select,
4
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-textarea {
5
+ display: block;
6
+ width: 100%;
7
+ padding: var(--ld-space-2) var(--ld-space-3);
8
+ background: var(--ld-surface);
9
+ border: 1px solid var(--ld-border);
10
+ border-radius: var(--ld-radius);
11
+ color: var(--ld-on-surface);
12
+ font-family: var(--ld-font-mono);
13
+ font-weight: var(--ld-font-weight);
14
+ font-size: var(--ld-text-sm);
15
+ transition: border-color var(--ld-transition), box-shadow var(--ld-transition);
16
+ }
17
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-select {
18
+ appearance: none;
19
+ padding-right: 2.25rem;
20
+ 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='%23958da1' stroke-width='1.5'/%3E%3C/svg%3E");
21
+ background-repeat: no-repeat;
22
+ background-position: right 0.75rem center;
23
+ }
24
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-input::placeholder,
25
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-textarea::placeholder {
26
+ color: var(--ld-faint);
27
+ }
28
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-input:focus,
29
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-select:focus,
30
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-textarea:focus {
31
+ outline: none;
32
+ border-color: var(--ld-primary-border);
33
+ box-shadow: 0 0 8px rgba(210, 187, 255, 0.3);
34
+ }
35
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-input[aria-invalid="true"],
36
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-textarea[aria-invalid="true"] {
37
+ border-color: var(--ld-danger);
38
+ }
39
+
40
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-label {
41
+ display: block;
42
+ margin-bottom: var(--ld-space-1);
43
+ color: var(--ld-faint);
44
+ text-transform: uppercase;
45
+ font-size: 12px;
46
+ font-weight: var(--ld-font-weight-bold);
47
+ letter-spacing: var(--ld-tracking-wide);
48
+ }
49
+
50
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-field {
51
+ margin-bottom: var(--ld-space-3);
52
+ }
53
+
54
+ /* checkbox & radio */
55
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-checkbox,
56
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-radio {
57
+ appearance: none;
58
+ width: 1.1rem;
59
+ height: 1.1rem;
60
+ margin: 0;
61
+ vertical-align: text-bottom;
62
+ background: var(--ld-surface);
63
+ border: 1px solid var(--ld-border);
64
+ border-radius: 0.25rem;
65
+ cursor: pointer;
66
+ transition: border-color var(--ld-transition), box-shadow var(--ld-transition);
67
+ }
68
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-radio {
69
+ border-radius: 50%;
70
+ }
71
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-checkbox:checked,
72
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-radio:checked {
73
+ border-color: var(--ld-accent);
74
+ box-shadow: inset 0 0 0 3px var(--ld-surface), inset 0 0 0 1rem var(--ld-accent),
75
+ 0 0 6px var(--ld-accent-glow);
76
+ }
77
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-checkbox:focus-visible,
78
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-radio:focus-visible,
79
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-switch:focus-visible {
80
+ outline: none;
81
+ border-color: var(--ld-primary-border);
82
+ }
83
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-choice {
84
+ display: inline-flex;
85
+ align-items: center;
86
+ gap: var(--ld-space-2);
87
+ color: var(--ld-on-surface);
88
+ font-size: var(--ld-text-sm);
89
+ cursor: pointer;
90
+ }
91
+
92
+ /* switch */
93
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-switch {
94
+ appearance: none;
95
+ width: 2.4rem;
96
+ height: 1.3rem;
97
+ margin: 0;
98
+ vertical-align: text-bottom;
99
+ background: var(--ld-surface);
100
+ border: 1px solid var(--ld-border);
101
+ border-radius: 1rem;
102
+ cursor: pointer;
103
+ position: relative;
104
+ transition: border-color var(--ld-transition);
105
+ }
106
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-switch::after {
107
+ content: "";
108
+ position: absolute;
109
+ top: 2px;
110
+ left: 2px;
111
+ width: calc(1.3rem - 6px);
112
+ height: calc(1.3rem - 6px);
113
+ border-radius: 50%;
114
+ background: var(--ld-faint);
115
+ transition: transform var(--ld-transition), background var(--ld-transition);
116
+ }
117
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-switch:checked {
118
+ border-color: var(--ld-accent);
119
+ }
120
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-switch:checked::after {
121
+ transform: translateX(1.1rem);
122
+ background: var(--ld-accent);
123
+ box-shadow: 0 0 6px var(--ld-accent-glow);
124
+ }
package/neon-butterfly/components/link.css ADDED
@@ -0,0 +1,55 @@
1
+ /* neon-butterfly — nav link: uppercase mono link with ">" chevron and glow hover */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-link {
3
+ display: flex;
4
+ align-items: baseline;
5
+ gap: var(--ld-space-3);
6
+ padding: 1.25rem var(--ld-space-4);
7
+ background: var(--ld-surface-glass);
8
+ border: 1px solid var(--ld-border);
9
+ border-radius: var(--ld-radius);
10
+ backdrop-filter: blur(var(--ld-blur));
11
+ color: var(--ld-on-surface);
12
+ text-decoration: none;
13
+ text-transform: uppercase;
14
+ font-weight: var(--ld-font-weight-bold);
15
+ font-size: var(--ld-text-sm);
16
+ letter-spacing: var(--ld-tracking-wide);
17
+ transition:
18
+ border-color var(--ld-transition),
19
+ color var(--ld-transition),
20
+ transform var(--ld-transition);
21
+ }
22
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-link::before {
23
+ content: ">";
24
+ color: var(--ld-faint);
25
+ transition: color var(--ld-transition);
26
+ }
27
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-link:hover {
28
+ border-color: var(--ld-primary-border);
29
+ color: var(--ld-primary);
30
+ transform: translateX(4px);
31
+ animation: ld-nb-pulse-glow 2s infinite;
32
+ }
33
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-link:hover::before {
34
+ color: var(--ld-accent);
35
+ text-shadow: 0 0 5px var(--ld-accent-glow);
36
+ }
37
+
38
+ @keyframes ld-nb-pulse-glow {
39
+ 0%,
40
+ 100% {
41
+ box-shadow: 0 0 5px rgba(210, 187, 255, 0.2);
42
+ }
43
+ 50% {
44
+ box-shadow: 0 0 20px var(--ld-primary-glow);
45
+ }
46
+ }
47
+
48
+ @media (prefers-reduced-motion: reduce) {
49
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-link {
50
+ transition: none;
51
+ }
52
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-link:hover {
53
+ animation: none;
54
+ }
55
+ }
package/neon-butterfly/components/muted.css ADDED
@@ -0,0 +1,7 @@
1
+ /* neon-butterfly — muted / empty-state text
2
+ * Faint secondary text — captions, meta, "No jobs yet." style empty states.
3
+ * No italic: this theme's mono/uppercase terminal voice never reaches for a
4
+ * literary flourish — "a command console, not a document". */
5
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-muted {
6
+ color: var(--ld-faint);
7
+ }
package/neon-butterfly/components/pre.css ADDED
@@ -0,0 +1,13 @@
1
+ /* neon-butterfly — command / log block
2
+ * Styled <pre> for shell commands or short log output: sunken well,
3
+ * hairline border, small mono, scrolls horizontally instead of wrapping. */
4
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-pre {
5
+ margin: 0;
6
+ padding: var(--ld-space-3) var(--ld-space-4);
7
+ background: var(--ld-surface-sunken);
8
+ border: 1px solid var(--ld-border);
9
+ border-radius: var(--ld-radius);
10
+ font-family: var(--ld-font-mono);
11
+ font-size: var(--ld-text-sm);
12
+ overflow-x: auto;
13
+ }
package/neon-butterfly/components/progress.css ADDED
@@ -0,0 +1,41 @@
1
+ /* neon-butterfly — progress bar & spinner */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-progress {
3
+ display: block;
4
+ width: 100%;
5
+ height: 0.5rem;
6
+ background: var(--ld-surface);
7
+ border: 1px solid var(--ld-border);
8
+ border-radius: 1rem;
9
+ overflow: hidden;
10
+ }
11
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-progress__bar {
12
+ height: 100%;
13
+ background: var(--ld-primary);
14
+ box-shadow: 0 0 8px var(--ld-primary-glow);
15
+ border-radius: 1rem;
16
+ transition: width var(--ld-transition);
17
+ }
18
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-progress__bar--accent {
19
+ background: var(--ld-accent);
20
+ box-shadow: 0 0 8px var(--ld-accent-glow);
21
+ }
22
+
23
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-spinner {
24
+ display: inline-block;
25
+ width: 1.5rem;
26
+ height: 1.5rem;
27
+ border: 2px solid var(--ld-border);
28
+ border-top-color: var(--ld-primary);
29
+ border-radius: 50%;
30
+ animation: ld-nb-spin 0.8s linear infinite;
31
+ }
32
+ @keyframes ld-nb-spin {
33
+ to {
34
+ transform: rotate(360deg);
35
+ }
36
+ }
37
+ @media (prefers-reduced-motion: reduce) {
38
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-spinner {
39
+ animation-duration: 2s;
40
+ }
41
+ }
package/neon-butterfly/components/table.css ADDED
@@ -0,0 +1,27 @@
1
+ /* neon-butterfly — table */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-table {
3
+ width: 100%;
4
+ border-collapse: collapse;
5
+ font-size: var(--ld-text-sm);
6
+ color: var(--ld-on-surface);
7
+ }
8
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-table th {
9
+ padding: var(--ld-space-2) var(--ld-space-3);
10
+ border-bottom: 1px solid var(--ld-primary-border);
11
+ color: var(--ld-faint);
12
+ text-align: left;
13
+ text-transform: uppercase;
14
+ font-size: 12px;
15
+ font-weight: var(--ld-font-weight-bold);
16
+ letter-spacing: var(--ld-tracking-wide);
17
+ }
18
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-table td {
19
+ padding: var(--ld-space-2) var(--ld-space-3);
20
+ border-bottom: 1px solid var(--ld-border);
21
+ }
22
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-table tbody tr {
23
+ transition: background var(--ld-transition);
24
+ }
25
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-table tbody tr:hover {
26
+ background: var(--ld-surface-glass);
27
+ }
package/neon-butterfly/components/tabs.css ADDED
@@ -0,0 +1,33 @@
1
+ /* neon-butterfly — tabs */
2
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-tabs {
3
+ display: flex;
4
+ gap: var(--ld-space-2);
5
+ border-bottom: 1px solid var(--ld-border);
6
+ }
7
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-tab {
8
+ padding: var(--ld-space-2) var(--ld-space-3);
9
+ margin-bottom: -1px;
10
+ background: none;
11
+ border: none;
12
+ border-bottom: 2px solid transparent;
13
+ color: var(--ld-faint);
14
+ text-transform: uppercase;
15
+ font-family: var(--ld-font-mono);
16
+ font-weight: var(--ld-font-weight-bold);
17
+ font-size: var(--ld-text-sm);
18
+ letter-spacing: var(--ld-tracking-wide);
19
+ cursor: pointer;
20
+ transition: color var(--ld-transition), border-color var(--ld-transition);
21
+ }
22
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-tab:hover {
23
+ color: var(--ld-on-surface);
24
+ }
25
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-tab--active,
26
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-tab[aria-selected="true"] {
27
+ color: var(--ld-primary);
28
+ border-bottom-color: var(--ld-primary);
29
+ text-shadow: 0 0 8px var(--ld-primary-glow);
30
+ }
31
+ :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-tabpanel {
32
+ padding: var(--ld-space-3) 0;
33
+ }