@nazuraki/styles 0.2.2 → 0.3.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 (43) 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 +88 -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/progress.css +41 -0
  11. package/luminous-precision/components/table.css +28 -0
  12. package/luminous-precision/components/tabs.css +33 -0
  13. package/luminous-precision/design.md +89 -0
  14. package/luminous-precision/index.css +13 -0
  15. package/luminous-precision/tokens.css +72 -0
  16. package/manifest.json +23 -0
  17. package/neon-butterfly/base.css +23 -10
  18. package/neon-butterfly/components/alert.css +10 -10
  19. package/neon-butterfly/components/badge.css +6 -6
  20. package/neon-butterfly/components/button.css +11 -11
  21. package/neon-butterfly/components/card.css +3 -3
  22. package/neon-butterfly/components/dialog.css +4 -4
  23. package/neon-butterfly/components/form.css +26 -26
  24. package/neon-butterfly/components/link.css +8 -8
  25. package/neon-butterfly/components/progress.css +7 -7
  26. package/neon-butterfly/components/table.css +5 -5
  27. package/neon-butterfly/components/tabs.css +6 -6
  28. package/neon-butterfly/design.md +12 -0
  29. package/neon-butterfly/tokens.css +29 -2
  30. package/package.json +15 -3
  31. package/summer-cloud/base.css +23 -13
  32. package/summer-cloud/components/alert.css +10 -10
  33. package/summer-cloud/components/badge.css +10 -10
  34. package/summer-cloud/components/button.css +22 -22
  35. package/summer-cloud/components/card.css +7 -7
  36. package/summer-cloud/components/dialog.css +4 -4
  37. package/summer-cloud/components/form.css +31 -31
  38. package/summer-cloud/components/link.css +16 -16
  39. package/summer-cloud/components/progress.css +8 -8
  40. package/summer-cloud/components/table.css +7 -7
  41. package/summer-cloud/components/tabs.css +7 -7
  42. package/summer-cloud/design.md +13 -0
  43. package/summer-cloud/tokens.css +27 -8
package/neon-butterfly/tokens.css CHANGED
@@ -2,21 +2,34 @@
2
2
  * Source of truth for the neon-butterfly theme. Consume via:
3
3
  * @import "@nazuraki/styles/neon-butterfly/tokens";
4
4
  * or pull the whole theme with ./index.css.
5
+ *
6
+ * Nothing applies until an element carries data-nb-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.
5
13
  */
6
- :root {
14
+ :where([data-nb-style="neon-butterfly"]) {
15
+ color-scheme: dark;
16
+
7
17
  /* color */
8
18
  --nb-bg: #0b1326;
9
19
  --nb-bg-blend: #1a1f2e;
10
20
  --nb-surface: #171f33;
21
+ --nb-surface-sunken: #0e1526; /* inset fields */
11
22
  --nb-surface-glass: rgba(23, 31, 51, 0.55);
12
23
  --nb-on-surface: #dae2fd;
13
24
  --nb-faint: #958da1;
14
25
  --nb-primary: #d2bbff;
15
26
  --nb-primary-glow: rgba(210, 187, 255, 0.6);
16
27
  --nb-primary-border: rgba(210, 187, 255, 0.8);
28
+ --nb-on-primary: #0b1326; /* text on solid lilac fills */
17
29
  --nb-accent: #39ff14;
18
30
  --nb-accent-glow: rgba(57, 255, 20, 0.5);
19
31
  --nb-border: rgba(255, 255, 255, 0.1);
32
+ --nb-border-lit: rgba(255, 255, 255, 0.25); /* lit top edge of glass panes */
20
33
 
21
34
  /* semantic color */
22
35
  --nb-info: #4dc9ff;
@@ -24,15 +37,29 @@
24
37
  --nb-warning: #ffd23f;
25
38
  --nb-danger: #ff2d78;
26
39
 
27
- /* typography */
40
+ /* code syntax — lilac keywords, neon strings, palette-derived accents */
41
+ --nb-code-keyword: #d2bbff;
42
+ --nb-code-string: #39ff14;
43
+ --nb-code-number: #ffd23f;
44
+ --nb-code-comment: #8a8199;
45
+ --nb-code-function: #4dc9ff;
46
+ --nb-code-variable: #ff6ba0;
47
+ --nb-code-type: #7fdcff;
48
+ --nb-code-meta: #958da1;
49
+
50
+ /* typography — all-mono aesthetic: display and body share the mono stack */
51
+ --nb-font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
52
+ --nb-font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
28
53
  --nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
29
54
  --nb-font-weight: 450;
55
+ --nb-font-weight-medium: 700; /* only 450 + 700 webfont weights load */
30
56
  --nb-font-weight-bold: 700;
31
57
  --nb-text-sm: 14px;
32
58
  --nb-tracking-wide: 0.1em;
33
59
 
34
60
  /* shape & effects */
35
61
  --nb-radius: 0.5rem;
62
+ --nb-radius-lg: 0.5rem; /* one radius everywhere is the look */
36
63
  --nb-blur: 12px;
37
64
  --nb-transition: 0.3s;
38
65
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nazuraki/styles",
3
- "version": "0.2.2",
3
+ "version": "0.3.0",
4
4
  "description": "Shared design-system styles: tokens, base styles, and component classes per theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -11,11 +11,19 @@
11
11
  "publishConfig": {
12
12
  "access": "public"
13
13
  },
14
+ "scripts": {
15
+ "test": "node --test"
16
+ },
14
17
  "files": [
15
18
  "neon-butterfly",
16
- "summer-cloud"
19
+ "summer-cloud",
20
+ "luminous-precision",
21
+ "all.css",
22
+ "manifest.json"
17
23
  ],
18
24
  "exports": {
25
+ "./all": "./all.css",
26
+ "./manifest": "./manifest.json",
19
27
  "./neon-butterfly": "./neon-butterfly/index.css",
20
28
  "./neon-butterfly/tokens": "./neon-butterfly/tokens.css",
21
29
  "./neon-butterfly/base": "./neon-butterfly/base.css",
@@ -23,6 +31,10 @@
23
31
  "./summer-cloud": "./summer-cloud/index.css",
24
32
  "./summer-cloud/tokens": "./summer-cloud/tokens.css",
25
33
  "./summer-cloud/base": "./summer-cloud/base.css",
26
- "./summer-cloud/components/*": "./summer-cloud/components/*.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"
27
39
  }
28
40
  }
package/summer-cloud/base.css CHANGED
@@ -1,16 +1,29 @@
1
1
  /* summer-cloud — base styles
2
- * Global defaults. Requires tokens.css. Apps that need the webfonts should
2
+ * Scoped defaults. Requires tokens.css. Apps that need the webfonts should
3
3
  * include the Google Fonts <link>s for Plus Jakarta Sans (400;600;700;800),
4
4
  * Inter (400;600) and JetBrains Mono (500;700), or self-host; every token
5
5
  * stack falls back to a system family.
6
+ *
7
+ * The element carrying data-nb-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>.
6
11
  */
7
- *,
8
- *::before,
9
- *::after {
12
+ :where([data-nb-style="summer-cloud"]) {
13
+ background-color: var(--nb-bg);
14
+ color: var(--nb-on-surface);
15
+ font-family: var(--nb-font-body);
16
+ font-weight: var(--nb-font-weight);
17
+ -webkit-font-smoothing: antialiased;
18
+ }
19
+
20
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *),
21
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *)::before,
22
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *)::after {
10
23
  box-sizing: border-box;
11
24
  }
12
25
 
13
- body {
26
+ :where(html[data-nb-style="summer-cloud"]) body {
14
27
  margin: 0;
15
28
  min-height: 100vh;
16
29
  background-color: var(--nb-bg);
@@ -22,27 +35,24 @@ body {
22
35
 
23
36
  /* Opt-in page background: the sky gradient. Flat --nb-bg is also correct, but
24
37
  * the gradient is the signature — the theme reads as "airy" only against it.
25
- * Apply to <body>. */
26
- .nb-bg {
38
+ * Apply to <body>, or to the attributed container itself. */
39
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-bg {
27
40
  background: linear-gradient(135deg, var(--nb-sky-start) 0%, var(--nb-sky-end) 100%);
28
41
  background-attachment: fixed;
29
42
  }
30
43
 
31
- h1,
32
- h2,
33
- h3,
34
- h4 {
44
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *):where(h1, h2, h3, h4) {
35
45
  font-family: var(--nb-font-display);
36
46
  font-weight: var(--nb-font-weight-bold);
37
47
  letter-spacing: var(--nb-tracking-tight);
38
48
  color: var(--nb-on-surface);
39
49
  }
40
50
 
41
- a {
51
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *):where(a) {
42
52
  color: var(--nb-primary);
43
53
  }
44
54
 
45
- ::selection {
55
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *)::selection {
46
56
  background: var(--nb-primary);
47
57
  color: #fff;
48
58
  }
package/summer-cloud/components/alert.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* summer-cloud — alert / callout: glass card with a semantic left rule */
2
- .nb-alert {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert {
3
3
  padding: var(--nb-space-4);
4
4
  background: var(--nb-surface-glass);
5
5
  border: 1px solid var(--nb-border);
@@ -11,11 +11,11 @@
11
11
  color: var(--nb-on-surface);
12
12
  font-size: var(--nb-text-sm);
13
13
  }
14
- .nb-alert--info { border-left-color: var(--nb-info); }
15
- .nb-alert--success { border-left-color: var(--nb-success); }
16
- .nb-alert--warning { border-left-color: var(--nb-warning); }
17
- .nb-alert--danger { border-left-color: var(--nb-danger); }
18
- .nb-alert__title {
14
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert--info { border-left-color: var(--nb-info); }
15
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert--success { border-left-color: var(--nb-success); }
16
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert--warning { border-left-color: var(--nb-warning); }
17
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert--danger { border-left-color: var(--nb-danger); }
18
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert__title {
19
19
  display: block;
20
20
  margin-bottom: var(--nb-space-1);
21
21
  font-family: var(--nb-font-display);
@@ -23,7 +23,7 @@
23
23
  font-size: var(--nb-text-sm);
24
24
  color: var(--nb-on-surface);
25
25
  }
26
- .nb-alert--info .nb-alert__title { color: var(--nb-accent-deep); }
27
- .nb-alert--success .nb-alert__title { color: #1a7a1a; }
28
- .nb-alert--warning .nb-alert__title { color: #594400; }
29
- .nb-alert--danger .nb-alert__title { color: #93000a; }
26
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert--info .nb-alert__title { color: var(--nb-accent-deep); }
27
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert--success .nb-alert__title { color: #1a7a1a; }
28
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert--warning .nb-alert__title { color: #594400; }
29
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-alert--danger .nb-alert__title { color: #93000a; }
package/summer-cloud/components/badge.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* summer-cloud — badge: solid pill, mono uppercase, for retail energy */
2
- .nb-badge {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-badge {
3
3
  display: inline-flex;
4
4
  align-items: center;
5
5
  gap: var(--nb-space-1);
@@ -15,14 +15,14 @@
15
15
  letter-spacing: var(--nb-tracking-wide);
16
16
  box-shadow: 0 1px 2px rgba(93, 43, 255, 0.06);
17
17
  }
18
- .nb-badge--primary { background: var(--nb-primary); border-color: transparent; color: #fff; }
19
- .nb-badge--info { background: var(--nb-info); border-color: transparent; color: #004261; }
20
- .nb-badge--success { background: var(--nb-success); border-color: transparent; color: #0a2e0a; }
21
- .nb-badge--warning { background: var(--nb-warning); border-color: transparent; color: #241a00; }
22
- .nb-badge--danger { background: var(--nb-danger); border-color: transparent; color: #4a0000; }
18
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-badge--primary { background: var(--nb-primary); border-color: transparent; color: #fff; }
19
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-badge--info { background: var(--nb-info); border-color: transparent; color: #004261; }
20
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-badge--success { background: var(--nb-success); border-color: transparent; color: #0a2e0a; }
21
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-badge--warning { background: var(--nb-warning); border-color: transparent; color: #241a00; }
22
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-badge--danger { background: var(--nb-danger); border-color: transparent; color: #4a0000; }
23
23
 
24
24
  /* Chip — the filter variant: outlined until selected. */
25
- .nb-chip {
25
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-chip {
26
26
  display: inline-flex;
27
27
  align-items: center;
28
28
  gap: var(--nb-space-1);
@@ -38,11 +38,11 @@
38
38
  transition: background var(--nb-transition), color var(--nb-transition),
39
39
  border-color var(--nb-transition);
40
40
  }
41
- .nb-chip:hover {
41
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-chip:hover {
42
42
  background: var(--nb-sky-tint);
43
43
  }
44
- .nb-chip--selected,
45
- .nb-chip[aria-pressed="true"] {
44
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-chip--selected,
45
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-chip[aria-pressed="true"] {
46
46
  background: var(--nb-primary-bright);
47
47
  border-color: transparent;
48
48
  color: #fff;
package/summer-cloud/components/button.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* summer-cloud — button: pill-shaped, bouncy, tinted-shadow lift */
2
- .nb-btn {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn {
3
3
  display: inline-flex;
4
4
  align-items: center;
5
5
  justify-content: center;
@@ -20,77 +20,77 @@
20
20
  box-shadow 0.2s ease,
21
21
  transform 0.2s var(--nb-ease-bounce);
22
22
  }
23
- .nb-btn:hover,
24
- .nb-btn:focus-visible {
23
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn:hover,
24
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn:focus-visible {
25
25
  background: rgba(255, 255, 255, 0.6);
26
26
  border-color: var(--nb-primary-border);
27
27
  color: var(--nb-primary);
28
28
  transform: scale(1.03);
29
29
  outline: none;
30
30
  }
31
- .nb-btn:focus-visible {
31
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn:focus-visible {
32
32
  box-shadow: 0 0 0 4px var(--nb-accent-glow);
33
33
  }
34
- .nb-btn:active {
34
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn:active {
35
35
  transform: scale(0.95);
36
36
  }
37
37
 
38
38
  /* Primary — the solid violet CTA. One per view. */
39
- .nb-btn--primary {
39
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--primary {
40
40
  background: var(--nb-primary);
41
41
  border-color: transparent;
42
42
  color: #fff;
43
43
  font-weight: var(--nb-font-weight-bold);
44
44
  box-shadow: var(--nb-shadow-raised);
45
45
  }
46
- .nb-btn--primary:hover {
46
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--primary:hover {
47
47
  background: var(--nb-primary-bright);
48
48
  color: #fff;
49
49
  box-shadow: var(--nb-shadow-raised-hover);
50
50
  }
51
- .nb-btn--primary:focus-visible {
51
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--primary:focus-visible {
52
52
  background: var(--nb-primary-bright);
53
53
  color: #fff;
54
54
  box-shadow: var(--nb-shadow-raised-hover), 0 0 0 4px var(--nb-primary-glow);
55
55
  }
56
56
 
57
57
  /* Accent — glass with a sky-blue edge, for the secondary path. */
58
- .nb-btn--accent {
58
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--accent {
59
59
  border-color: var(--nb-accent);
60
60
  color: var(--nb-accent-deep);
61
61
  }
62
- .nb-btn--accent:hover,
63
- .nb-btn--accent:focus-visible {
62
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--accent:hover,
63
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--accent:focus-visible {
64
64
  color: var(--nb-accent-deep);
65
65
  box-shadow: 0 0 0 4px var(--nb-accent-glow);
66
66
  }
67
67
 
68
68
  /* Ghost — no chrome until hovered. */
69
- .nb-btn--ghost {
69
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--ghost {
70
70
  background: none;
71
71
  border-color: transparent;
72
72
  box-shadow: none;
73
73
  }
74
- .nb-btn--ghost:hover,
75
- .nb-btn--ghost:focus-visible {
74
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--ghost:hover,
75
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--ghost:focus-visible {
76
76
  background: var(--nb-sky-tint);
77
77
  }
78
78
 
79
- .nb-btn--danger {
79
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--danger {
80
80
  background: var(--nb-danger-deep);
81
81
  border-color: transparent;
82
82
  color: #fff;
83
83
  font-weight: var(--nb-font-weight-bold);
84
84
  box-shadow: 0 4px 14px rgba(204, 31, 31, 0.39);
85
85
  }
86
- .nb-btn--danger:hover,
87
- .nb-btn--danger:focus-visible {
86
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--danger:hover,
87
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn--danger:focus-visible {
88
88
  background: var(--nb-danger);
89
89
  color: #4a0000;
90
90
  box-shadow: 0 6px 20px rgba(255, 77, 77, 0.5);
91
91
  }
92
92
 
93
- .nb-btn:disabled {
93
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn:disabled {
94
94
  opacity: 0.5;
95
95
  cursor: not-allowed;
96
96
  transform: none;
@@ -98,12 +98,12 @@
98
98
  }
99
99
 
100
100
  @media (prefers-reduced-motion: reduce) {
101
- .nb-btn {
101
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn {
102
102
  transition: background var(--nb-transition), color var(--nb-transition);
103
103
  }
104
- .nb-btn:hover,
105
- .nb-btn:focus-visible,
106
- .nb-btn:active {
104
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn:hover,
105
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn:focus-visible,
106
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-btn:active {
107
107
  transform: none;
108
108
  }
109
109
  }
package/summer-cloud/components/card.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* summer-cloud — card: the glassmorphic panel everything else sits in */
2
- .nb-card {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-card {
3
3
  padding: var(--nb-space-5);
4
4
  background: var(--nb-surface-glass);
5
5
  border: 1px solid var(--nb-border);
@@ -9,27 +9,27 @@
9
9
  box-shadow: var(--nb-shadow);
10
10
  color: var(--nb-on-surface);
11
11
  }
12
- .nb-card > :first-child { margin-top: 0; }
13
- .nb-card > :last-child { margin-bottom: 0; }
12
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-card > :first-child { margin-top: 0; }
13
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-card > :last-child { margin-bottom: 0; }
14
14
 
15
15
  /* Level 2 — floating: higher-opacity white, lifts on hover. Use for
16
16
  * interactive cards (products, tiles), not for static content panels. */
17
- .nb-card--floating {
17
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-card--floating {
18
18
  background: var(--nb-surface-glass-high);
19
19
  backdrop-filter: blur(var(--nb-blur-high));
20
20
  -webkit-backdrop-filter: blur(var(--nb-blur-high));
21
21
  transition: transform var(--nb-transition), box-shadow var(--nb-transition);
22
22
  }
23
- .nb-card--floating:hover {
23
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-card--floating:hover {
24
24
  transform: translateY(-4px);
25
25
  box-shadow: var(--nb-shadow-raised-hover);
26
26
  }
27
27
 
28
28
  @media (prefers-reduced-motion: reduce) {
29
- .nb-card--floating {
29
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-card--floating {
30
30
  transition: none;
31
31
  }
32
- .nb-card--floating:hover {
32
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-card--floating:hover {
33
33
  transform: none;
34
34
  }
35
35
  }
package/summer-cloud/components/dialog.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* summer-cloud — dialog (native <dialog>): the floating tier, fully opaque */
2
- .nb-dialog {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-dialog {
3
3
  padding: var(--nb-space-5);
4
4
  max-width: 32rem;
5
5
  width: calc(100vw - 2rem);
@@ -10,11 +10,11 @@
10
10
  font-family: var(--nb-font-body);
11
11
  box-shadow: var(--nb-shadow);
12
12
  }
13
- .nb-dialog::backdrop {
13
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-dialog::backdrop {
14
14
  background: rgba(23, 28, 31, 0.3);
15
15
  backdrop-filter: blur(4px);
16
16
  }
17
- .nb-dialog__title {
17
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-dialog__title {
18
18
  margin: 0 0 var(--nb-space-3);
19
19
  color: var(--nb-primary);
20
20
  font-family: var(--nb-font-display);
@@ -22,7 +22,7 @@
22
22
  font-weight: var(--nb-font-weight-bold);
23
23
  letter-spacing: var(--nb-tracking-tight);
24
24
  }
25
- .nb-dialog__actions {
25
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-dialog__actions {
26
26
  display: flex;
27
27
  justify-content: flex-end;
28
28
  gap: var(--nb-space-2);
package/summer-cloud/components/form.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* summer-cloud — form controls: input, textarea, select, checkbox, radio, switch
2
2
  * Fields are sunken (no resting border) and bloom a sky-blue ring on focus. */
3
- .nb-input,
4
- .nb-select,
5
- .nb-textarea {
3
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-input,
4
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-select,
5
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-textarea {
6
6
  display: block;
7
7
  width: 100%;
8
8
  padding: 0.75rem var(--nb-space-3);
@@ -15,35 +15,35 @@
15
15
  font-size: 16px;
16
16
  transition: border-color var(--nb-transition), box-shadow var(--nb-transition);
17
17
  }
18
- .nb-select {
18
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-select {
19
19
  appearance: none;
20
20
  padding-right: 2.25rem;
21
21
  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");
22
22
  background-repeat: no-repeat;
23
23
  background-position: right 0.75rem center;
24
24
  }
25
- .nb-input::placeholder,
26
- .nb-textarea::placeholder {
25
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-input::placeholder,
26
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-textarea::placeholder {
27
27
  color: var(--nb-outline);
28
28
  }
29
- .nb-input:focus,
30
- .nb-select:focus,
31
- .nb-textarea:focus {
29
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-input:focus,
30
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-select:focus,
31
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-textarea:focus {
32
32
  outline: none;
33
33
  border-color: var(--nb-accent);
34
34
  box-shadow: 0 0 0 4px var(--nb-accent-glow);
35
35
  }
36
- .nb-input[aria-invalid="true"],
37
- .nb-textarea[aria-invalid="true"] {
36
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-input[aria-invalid="true"],
37
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-textarea[aria-invalid="true"] {
38
38
  border-color: var(--nb-danger);
39
39
  }
40
- .nb-input[aria-invalid="true"]:focus,
41
- .nb-textarea[aria-invalid="true"]:focus {
40
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-input[aria-invalid="true"]:focus,
41
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-textarea[aria-invalid="true"]:focus {
42
42
  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.2);
43
43
  }
44
44
 
45
45
  /* Labels are the mono voice: small, tracked, utility-grade. */
46
- .nb-label {
46
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-label {
47
47
  display: block;
48
48
  margin-bottom: var(--nb-space-1);
49
49
  padding-left: var(--nb-space-1);
@@ -54,13 +54,13 @@
54
54
  letter-spacing: var(--nb-tracking-wide);
55
55
  }
56
56
 
57
- .nb-field {
57
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-field {
58
58
  margin-bottom: var(--nb-space-3);
59
59
  }
60
60
 
61
61
  /* checkbox & radio */
62
- .nb-checkbox,
63
- .nb-radio {
62
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-checkbox,
63
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-radio {
64
64
  appearance: none;
65
65
  width: 1.25rem;
66
66
  height: 1.25rem;
@@ -73,30 +73,30 @@
73
73
  transition: background var(--nb-transition), border-color var(--nb-transition),
74
74
  box-shadow var(--nb-transition);
75
75
  }
76
- .nb-radio {
76
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-radio {
77
77
  border-radius: 50%;
78
78
  }
79
- .nb-checkbox:checked,
80
- .nb-radio:checked {
79
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-checkbox:checked,
80
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-radio:checked {
81
81
  background: var(--nb-primary);
82
82
  border-color: var(--nb-primary);
83
83
  }
84
- .nb-checkbox:checked {
84
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-checkbox:checked {
85
85
  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");
86
86
  background-repeat: no-repeat;
87
87
  background-position: center;
88
88
  }
89
- .nb-radio:checked {
89
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-radio:checked {
90
90
  box-shadow: inset 0 0 0 4px var(--nb-surface);
91
91
  }
92
- .nb-checkbox:focus-visible,
93
- .nb-radio:focus-visible,
94
- .nb-switch:focus-visible {
92
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-checkbox:focus-visible,
93
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-radio:focus-visible,
94
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-switch:focus-visible {
95
95
  outline: none;
96
96
  border-color: var(--nb-accent);
97
97
  box-shadow: 0 0 0 4px var(--nb-accent-glow);
98
98
  }
99
- .nb-choice {
99
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-choice {
100
100
  display: inline-flex;
101
101
  align-items: center;
102
102
  gap: var(--nb-space-2);
@@ -106,7 +106,7 @@
106
106
  }
107
107
 
108
108
  /* switch — the cloud-toggle: oversized, squishy, green when live */
109
- .nb-switch {
109
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-switch {
110
110
  appearance: none;
111
111
  width: 3rem;
112
112
  height: 1.75rem;
@@ -119,7 +119,7 @@
119
119
  position: relative;
120
120
  transition: background var(--nb-transition), border-color var(--nb-transition);
121
121
  }
122
- .nb-switch::after {
122
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-switch::after {
123
123
  content: "";
124
124
  position: absolute;
125
125
  top: 2px;
@@ -131,16 +131,16 @@
131
131
  box-shadow: 0 2px 6px rgba(93, 43, 255, 0.2);
132
132
  transition: transform var(--nb-transition) var(--nb-ease-bounce);
133
133
  }
134
- .nb-switch:checked {
134
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-switch:checked {
135
135
  background: var(--nb-success);
136
136
  border-color: var(--nb-success);
137
137
  }
138
- .nb-switch:checked::after {
138
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-switch:checked::after {
139
139
  transform: translateX(1.25rem);
140
140
  }
141
141
 
142
142
  @media (prefers-reduced-motion: reduce) {
143
- .nb-switch::after {
143
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-switch::after {
144
144
  transition: none;
145
145
  }
146
146
  }