@nazuraki/styles 0.2.3 → 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 (42) hide show
  1. package/all.css +10 -0
  2. package/luminous-precision/base.css +24 -16
  3. package/luminous-precision/components/alert.css +10 -10
  4. package/luminous-precision/components/badge.css +6 -6
  5. package/luminous-precision/components/button.css +19 -19
  6. package/luminous-precision/components/card.css +3 -3
  7. package/luminous-precision/components/dialog.css +4 -4
  8. package/luminous-precision/components/form.css +26 -26
  9. package/luminous-precision/components/link.css +4 -4
  10. package/luminous-precision/components/progress.css +7 -7
  11. package/luminous-precision/components/table.css +5 -5
  12. package/luminous-precision/components/tabs.css +6 -6
  13. package/luminous-precision/design.md +13 -0
  14. package/luminous-precision/tokens.css +27 -10
  15. package/manifest.json +23 -0
  16. package/neon-butterfly/base.css +23 -10
  17. package/neon-butterfly/components/alert.css +10 -10
  18. package/neon-butterfly/components/badge.css +6 -6
  19. package/neon-butterfly/components/button.css +11 -11
  20. package/neon-butterfly/components/card.css +3 -3
  21. package/neon-butterfly/components/dialog.css +4 -4
  22. package/neon-butterfly/components/form.css +26 -26
  23. package/neon-butterfly/components/link.css +8 -8
  24. package/neon-butterfly/components/progress.css +7 -7
  25. package/neon-butterfly/components/table.css +5 -5
  26. package/neon-butterfly/components/tabs.css +6 -6
  27. package/neon-butterfly/design.md +12 -0
  28. package/neon-butterfly/tokens.css +29 -2
  29. package/package.json +9 -2
  30. package/summer-cloud/base.css +23 -13
  31. package/summer-cloud/components/alert.css +10 -10
  32. package/summer-cloud/components/badge.css +10 -10
  33. package/summer-cloud/components/button.css +22 -22
  34. package/summer-cloud/components/card.css +7 -7
  35. package/summer-cloud/components/dialog.css +4 -4
  36. package/summer-cloud/components/form.css +31 -31
  37. package/summer-cloud/components/link.css +16 -16
  38. package/summer-cloud/components/progress.css +8 -8
  39. package/summer-cloud/components/table.css +7 -7
  40. package/summer-cloud/components/tabs.css +7 -7
  41. package/summer-cloud/design.md +13 -0
  42. package/summer-cloud/tokens.css +27 -8
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
  }
package/summer-cloud/components/link.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* summer-cloud — nav link: pill that fills with sky tint, arrow slides out */
2
- .nb-link {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link {
3
3
  display: inline-flex;
4
4
  align-items: center;
5
5
  gap: var(--nb-space-2);
@@ -15,46 +15,46 @@
15
15
  background var(--nb-transition),
16
16
  color var(--nb-transition);
17
17
  }
18
- .nb-link::after {
18
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link::after {
19
19
  content: "→";
20
20
  color: var(--nb-accent);
21
21
  transition: transform var(--nb-transition);
22
22
  }
23
- .nb-link:hover,
24
- .nb-link:focus-visible {
23
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:hover,
24
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:focus-visible {
25
25
  background: var(--nb-sky-tint);
26
26
  color: var(--nb-primary);
27
27
  outline: none;
28
28
  }
29
- .nb-link:hover::after,
30
- .nb-link:focus-visible::after {
29
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:hover::after,
30
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:focus-visible::after {
31
31
  transform: translateX(4px);
32
32
  }
33
- .nb-link:active {
33
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:active {
34
34
  transform: scale(0.95);
35
35
  }
36
36
 
37
37
  /* Current page: violet with the underline rule from the top nav. */
38
- .nb-link--active,
39
- .nb-link[aria-current="page"] {
38
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link--active,
39
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link[aria-current="page"] {
40
40
  background: none;
41
41
  border-radius: 0;
42
42
  border-bottom: 2px solid var(--nb-primary);
43
43
  color: var(--nb-primary);
44
44
  }
45
- .nb-link--active::after,
46
- .nb-link[aria-current="page"]::after {
45
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link--active::after,
46
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link[aria-current="page"]::after {
47
47
  content: none;
48
48
  }
49
49
 
50
50
  @media (prefers-reduced-motion: reduce) {
51
- .nb-link,
52
- .nb-link::after {
51
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link,
52
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link::after {
53
53
  transition: none;
54
54
  }
55
- .nb-link:hover::after,
56
- .nb-link:focus-visible::after,
57
- .nb-link:active {
55
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:hover::after,
56
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:focus-visible::after,
57
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:active {
58
58
  transform: none;
59
59
  }
60
60
  }
package/summer-cloud/components/progress.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* summer-cloud — progress bar & spinner: glowing violet indicators */
2
- .nb-progress {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-progress {
3
3
  display: block;
4
4
  width: 100%;
5
5
  height: 0.5rem;
@@ -7,37 +7,37 @@
7
7
  border-radius: var(--nb-radius-pill);
8
8
  overflow: hidden;
9
9
  }
10
- .nb-progress__bar {
10
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-progress__bar {
11
11
  height: 100%;
12
12
  background: var(--nb-primary);
13
13
  border-radius: var(--nb-radius-pill);
14
14
  box-shadow: 0 0 10px rgba(69, 0, 217, 0.5);
15
15
  transition: width var(--nb-transition);
16
16
  }
17
- .nb-progress__bar--accent {
17
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-progress__bar--accent {
18
18
  background: var(--nb-accent);
19
19
  box-shadow: 0 0 10px rgba(12, 179, 255, 0.5);
20
20
  }
21
21
 
22
- .nb-spinner {
22
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-spinner {
23
23
  display: inline-block;
24
24
  width: 1.5rem;
25
25
  height: 1.5rem;
26
26
  border: 2px solid var(--nb-outline);
27
27
  border-top-color: var(--nb-primary);
28
28
  border-radius: 50%;
29
- animation: nb-spin 0.8s linear infinite;
29
+ animation: nb-sc-spin 0.8s linear infinite;
30
30
  }
31
- @keyframes nb-spin {
31
+ @keyframes nb-sc-spin {
32
32
  to {
33
33
  transform: rotate(360deg);
34
34
  }
35
35
  }
36
36
  @media (prefers-reduced-motion: reduce) {
37
- .nb-spinner {
37
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-spinner {
38
38
  animation-duration: 2s;
39
39
  }
40
- .nb-progress__bar {
40
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-progress__bar {
41
41
  transition: none;
42
42
  }
43
43
  }
package/summer-cloud/components/table.css CHANGED
@@ -1,11 +1,11 @@
1
1
  /* summer-cloud — table: mono header labels, sky-tint row hover */
2
- .nb-table {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table {
3
3
  width: 100%;
4
4
  border-collapse: collapse;
5
5
  font-size: var(--nb-text-sm);
6
6
  color: var(--nb-on-surface);
7
7
  }
8
- .nb-table th {
8
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table th {
9
9
  padding: var(--nb-space-3);
10
10
  border-bottom: 1px solid var(--nb-outline);
11
11
  color: var(--nb-faint);
@@ -16,19 +16,19 @@
16
16
  font-weight: 500;
17
17
  letter-spacing: var(--nb-tracking-wide);
18
18
  }
19
- .nb-table td {
19
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table td {
20
20
  padding: var(--nb-space-3);
21
21
  border-bottom: 1px solid rgba(201, 195, 218, 0.4);
22
22
  }
23
- .nb-table tbody tr {
23
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table tbody tr {
24
24
  transition: background var(--nb-transition);
25
25
  }
26
- .nb-table tbody tr:hover {
26
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table tbody tr:hover {
27
27
  background: var(--nb-sky-tint);
28
28
  }
29
29
  /* Numeric cells take the mono voice — prices and data read as utility-grade. */
30
- .nb-table td.nb-num,
31
- .nb-table th.nb-num {
30
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table td.nb-num,
31
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table th.nb-num {
32
32
  font-family: var(--nb-font-mono);
33
33
  text-align: right;
34
34
  }