@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/components/tabs.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /* summer-cloud — tabs: violet underline on the active tab, sky tint on hover */
2
- .nb-tabs {
2
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tabs {
3
3
  display: flex;
4
4
  gap: var(--nb-space-2);
5
5
  border-bottom: 1px solid var(--nb-outline);
6
6
  }
7
- .nb-tab {
7
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab {
8
8
  padding: var(--nb-space-2) var(--nb-space-3);
9
9
  margin-bottom: -1px;
10
10
  background: none;
@@ -19,20 +19,20 @@
19
19
  transition: color var(--nb-transition), background var(--nb-transition),
20
20
  border-color var(--nb-transition);
21
21
  }
22
- .nb-tab:hover {
22
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab:hover {
23
23
  background: var(--nb-sky-tint);
24
24
  color: var(--nb-primary);
25
25
  }
26
- .nb-tab:focus-visible {
26
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab:focus-visible {
27
27
  outline: none;
28
28
  box-shadow: 0 0 0 4px var(--nb-accent-glow);
29
29
  }
30
- .nb-tab--active,
31
- .nb-tab[aria-selected="true"] {
30
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab--active,
31
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab[aria-selected="true"] {
32
32
  color: var(--nb-primary);
33
33
  border-bottom-color: var(--nb-primary);
34
34
  font-weight: var(--nb-font-weight-bold);
35
35
  }
36
- .nb-tabpanel {
36
+ :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tabpanel {
37
37
  padding: var(--nb-space-3) 0;
38
38
  }
package/summer-cloud/design.md CHANGED
@@ -113,3 +113,16 @@ theme-agnostic). Variants use BEM-ish modifiers (`nb-btn--primary`).
113
113
  dark text on it (4.97:1), and uses `--nb-danger-deep` for the solid
114
114
  destructive button (5.55:1 on white). Every other foreground/background pair
115
115
  in the palette clears AA.
116
+
117
+ ## Code syntax
118
+
119
+ Tokens `--nb-code-*`, part of the baseline contract. Palette hues deepened for
120
+ contrast on white: violet keywords, deep-green strings, deep-amber numbers,
121
+ accent-deep functions, deep-teal types, danger-deep variables, muted-faint
122
+ comments, faint meta.
123
+
124
+ ## Scoping
125
+
126
+ Every rule is guarded by `data-nb-style="summer-cloud"` (self or ancestor),
127
+ wrapped in zero-specificity `:where()`. Set the attribute on `<html>` for a
128
+ page or on a container for an embedded island.
package/summer-cloud/tokens.css CHANGED
@@ -3,16 +3,22 @@
3
3
  * @import "@nazuraki/styles/summer-cloud/tokens";
4
4
  * or pull the whole theme with ./index.css.
5
5
  *
6
- * Token names mirror neon-butterfly's --nb-* contract so themes stay
7
- * swappable; names marked (extra) are additions this theme needs and that
8
- * neon-butterfly does not define.
6
+ * Nothing applies until an element carries data-nb-style="summer-cloud"
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.
9
13
  */
10
- :root {
14
+ :where([data-nb-style="summer-cloud"]) {
15
+ color-scheme: light;
16
+
11
17
  /* color */
12
18
  --nb-bg: #f6fafe;
13
19
  --nb-bg-blend: #eaeef2;
14
20
  --nb-surface: #ffffff;
15
- --nb-surface-sunken: #f0f4f8; /* (extra) inset fields */
21
+ --nb-surface-sunken: #f0f4f8; /* inset fields */
16
22
  --nb-surface-glass: rgba(255, 255, 255, 0.6);
17
23
  --nb-surface-glass-high: rgba(255, 255, 255, 0.8); /* (extra) floating tier */
18
24
  --nb-on-surface: #171c1f;
@@ -21,10 +27,12 @@
21
27
  --nb-primary-bright: #5d2bff; /* (extra) shadow/glow tint */
22
28
  --nb-primary-glow: rgba(93, 43, 255, 0.4);
23
29
  --nb-primary-border: rgba(69, 0, 217, 0.2);
30
+ --nb-on-primary: #ffffff; /* text on solid violet fills */
24
31
  --nb-accent: #0cb3ff;
25
32
  --nb-accent-glow: rgba(12, 179, 255, 0.2);
26
33
  --nb-accent-deep: #006492; /* (extra) readable accent text */
27
34
  --nb-border: rgba(255, 255, 255, 0.4);
35
+ --nb-border-lit: rgba(255, 255, 255, 0.7); /* lit top edge of glass panes */
28
36
  --nb-outline: #c9c3da; /* (extra) hairline on opaque surfaces */
29
37
 
30
38
  /* semantic color */
@@ -39,12 +47,22 @@
39
47
  --nb-sky-end: #c9e6ff;
40
48
  --nb-sky-tint: rgba(255, 255, 255, 0.7);
41
49
 
50
+ /* code syntax — deepened palette hues for contrast on white */
51
+ --nb-code-keyword: #4500d9;
52
+ --nb-code-string: #157a2a;
53
+ --nb-code-number: #9a6b00;
54
+ --nb-code-comment: #6e6880;
55
+ --nb-code-function: #006492;
56
+ --nb-code-variable: #cc1f1f;
57
+ --nb-code-type: #00877a;
58
+ --nb-code-meta: #484457;
59
+
42
60
  /* typography */
43
- --nb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; /* (extra) */
44
- --nb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif; /* (extra) */
61
+ --nb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
62
+ --nb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
45
63
  --nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
46
64
  --nb-font-weight: 400;
47
- --nb-font-weight-medium: 600; /* (extra) */
65
+ --nb-font-weight-medium: 600;
48
66
  --nb-font-weight-bold: 700;
49
67
  --nb-text-sm: 14px;
50
68
  --nb-tracking-wide: 0.05em;
@@ -53,6 +71,7 @@
53
71
  /* shape & effects */
54
72
  --nb-radius: 1rem;
55
73
  --nb-radius-sm: 0.25rem; /* (extra) */
74
+ --nb-radius-lg: 1.5rem; /* cards and large containers */
56
75
  --nb-radius-pill: 9999px; /* (extra) */
57
76
  --nb-blur: 12px;
58
77
  --nb-blur-high: 20px; /* (extra) */