@rackbops/styles 0.1.0 → 0.1.1

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 (178) hide show
  1. package/all.css +5 -0
  2. package/amber-ember/base.css +61 -0
  3. package/amber-ember/components/alert.css +30 -0
  4. package/amber-ember/components/badge.css +32 -0
  5. package/amber-ember/components/button.css +90 -0
  6. package/amber-ember/components/card.css +24 -0
  7. package/amber-ember/components/dialog.css +33 -0
  8. package/amber-ember/components/form.css +72 -0
  9. package/amber-ember/components/link.css +47 -0
  10. package/amber-ember/components/log.css +19 -0
  11. package/amber-ember/components/muted.css +7 -0
  12. package/amber-ember/components/nav-rail.css +14 -0
  13. package/amber-ember/components/pre.css +13 -0
  14. package/amber-ember/components/progress.css +42 -0
  15. package/amber-ember/components/stepper.css +87 -0
  16. package/amber-ember/components/table.css +50 -0
  17. package/amber-ember/components/tabs.css +46 -0
  18. package/amber-ember/design.md +78 -0
  19. package/amber-ember/index.css +18 -0
  20. package/amber-ember/tokens.css +72 -0
  21. package/amber-hearth/base.css +61 -0
  22. package/amber-hearth/components/alert.css +30 -0
  23. package/amber-hearth/components/badge.css +32 -0
  24. package/amber-hearth/components/button.css +90 -0
  25. package/amber-hearth/components/card.css +24 -0
  26. package/amber-hearth/components/dialog.css +33 -0
  27. package/amber-hearth/components/form.css +72 -0
  28. package/amber-hearth/components/link.css +47 -0
  29. package/amber-hearth/components/log.css +19 -0
  30. package/amber-hearth/components/muted.css +7 -0
  31. package/amber-hearth/components/nav-rail.css +14 -0
  32. package/amber-hearth/components/pre.css +13 -0
  33. package/amber-hearth/components/progress.css +42 -0
  34. package/amber-hearth/components/stepper.css +87 -0
  35. package/amber-hearth/components/table.css +50 -0
  36. package/amber-hearth/components/tabs.css +46 -0
  37. package/amber-hearth/design.md +146 -0
  38. package/amber-hearth/index.css +18 -0
  39. package/amber-hearth/tokens.css +77 -0
  40. package/arcane-obsidian/base.css +20 -0
  41. package/arcane-obsidian/components/button.css +15 -0
  42. package/arcane-obsidian/components/log.css +19 -0
  43. package/arcane-obsidian/components/muted.css +7 -0
  44. package/arcane-obsidian/components/nav-rail.css +14 -0
  45. package/arcane-obsidian/components/pre.css +13 -0
  46. package/arcane-obsidian/components/stepper.css +87 -0
  47. package/arcane-obsidian/components/table.css +14 -0
  48. package/arcane-obsidian/design.md +30 -2
  49. package/arcane-obsidian/index.css +5 -0
  50. package/arcane-parchment/base.css +20 -0
  51. package/arcane-parchment/components/button.css +15 -0
  52. package/arcane-parchment/components/log.css +19 -0
  53. package/arcane-parchment/components/muted.css +7 -0
  54. package/arcane-parchment/components/nav-rail.css +14 -0
  55. package/arcane-parchment/components/pre.css +13 -0
  56. package/arcane-parchment/components/stepper.css +87 -0
  57. package/arcane-parchment/components/table.css +14 -0
  58. package/arcane-parchment/design.md +10 -6
  59. package/arcane-parchment/index.css +5 -0
  60. package/concrete-signal/base.css +57 -0
  61. package/concrete-signal/components/alert.css +44 -0
  62. package/concrete-signal/components/badge.css +38 -0
  63. package/concrete-signal/components/button.css +98 -0
  64. package/concrete-signal/components/card.css +21 -0
  65. package/concrete-signal/components/dialog.css +33 -0
  66. package/concrete-signal/components/form.css +138 -0
  67. package/concrete-signal/components/link.css +44 -0
  68. package/concrete-signal/components/log.css +19 -0
  69. package/concrete-signal/components/muted.css +7 -0
  70. package/concrete-signal/components/nav-rail.css +15 -0
  71. package/concrete-signal/components/pre.css +14 -0
  72. package/concrete-signal/components/progress.css +44 -0
  73. package/concrete-signal/components/stepper.css +83 -0
  74. package/concrete-signal/components/table.css +48 -0
  75. package/concrete-signal/components/tabs.css +49 -0
  76. package/concrete-signal/design.md +171 -0
  77. package/concrete-signal/index.css +18 -0
  78. package/concrete-signal/tokens.css +75 -0
  79. package/concrete-signal-light/base.css +57 -0
  80. package/concrete-signal-light/components/alert.css +44 -0
  81. package/concrete-signal-light/components/badge.css +38 -0
  82. package/concrete-signal-light/components/button.css +98 -0
  83. package/concrete-signal-light/components/card.css +21 -0
  84. package/concrete-signal-light/components/dialog.css +33 -0
  85. package/concrete-signal-light/components/form.css +138 -0
  86. package/concrete-signal-light/components/link.css +44 -0
  87. package/concrete-signal-light/components/log.css +19 -0
  88. package/concrete-signal-light/components/muted.css +7 -0
  89. package/concrete-signal-light/components/nav-rail.css +15 -0
  90. package/concrete-signal-light/components/pre.css +14 -0
  91. package/concrete-signal-light/components/progress.css +44 -0
  92. package/concrete-signal-light/components/stepper.css +84 -0
  93. package/concrete-signal-light/components/table.css +48 -0
  94. package/concrete-signal-light/components/tabs.css +49 -0
  95. package/concrete-signal-light/design.md +82 -0
  96. package/concrete-signal-light/index.css +18 -0
  97. package/concrete-signal-light/tokens.css +75 -0
  98. package/css-side-effect.d.ts +5 -0
  99. package/luminous-precision/base.css +12 -0
  100. package/luminous-precision/components/button.css +25 -0
  101. package/luminous-precision/components/link.css +8 -0
  102. package/luminous-precision/components/log.css +19 -0
  103. package/luminous-precision/components/muted.css +7 -0
  104. package/luminous-precision/components/nav-rail.css +17 -0
  105. package/luminous-precision/components/pre.css +14 -0
  106. package/luminous-precision/components/progress.css +14 -5
  107. package/luminous-precision/components/stepper.css +89 -0
  108. package/luminous-precision/components/table.css +17 -0
  109. package/luminous-precision/design.md +44 -9
  110. package/luminous-precision/index.css +5 -0
  111. package/manifest.json +20 -0
  112. package/mono-field/base.css +59 -0
  113. package/mono-field/components/alert.css +35 -0
  114. package/mono-field/components/badge.css +34 -0
  115. package/mono-field/components/button.css +101 -0
  116. package/mono-field/components/card.css +20 -0
  117. package/mono-field/components/dialog.css +34 -0
  118. package/mono-field/components/form.css +91 -0
  119. package/mono-field/components/link.css +47 -0
  120. package/mono-field/components/log.css +19 -0
  121. package/mono-field/components/muted.css +7 -0
  122. package/mono-field/components/nav-rail.css +14 -0
  123. package/mono-field/components/pre.css +13 -0
  124. package/mono-field/components/progress.css +42 -0
  125. package/mono-field/components/stepper.css +86 -0
  126. package/mono-field/components/table.css +47 -0
  127. package/mono-field/components/tabs.css +48 -0
  128. package/mono-field/design.md +151 -0
  129. package/mono-field/index.css +18 -0
  130. package/mono-field/tokens.css +76 -0
  131. package/neon-butterfly/base.css +18 -0
  132. package/neon-butterfly/components/button.css +26 -0
  133. package/neon-butterfly/components/link.css +10 -0
  134. package/neon-butterfly/components/log.css +19 -0
  135. package/neon-butterfly/components/muted.css +7 -0
  136. package/neon-butterfly/components/nav-rail.css +17 -0
  137. package/neon-butterfly/components/pre.css +13 -0
  138. package/neon-butterfly/components/progress.css +14 -5
  139. package/neon-butterfly/components/stepper.css +89 -0
  140. package/neon-butterfly/components/table.css +15 -0
  141. package/neon-butterfly/design.md +40 -4
  142. package/neon-butterfly/index.css +5 -0
  143. package/package.json +61 -32
  144. package/rackbops-noir/base.css +11 -2
  145. package/rackbops-noir/components/button.css +16 -0
  146. package/rackbops-noir/components/card.css +9 -0
  147. package/rackbops-noir/components/log.css +19 -0
  148. package/rackbops-noir/components/muted.css +7 -0
  149. package/rackbops-noir/components/nav-rail.css +14 -0
  150. package/rackbops-noir/components/pre.css +13 -0
  151. package/rackbops-noir/components/principle.css +1 -0
  152. package/rackbops-noir/components/stepper.css +87 -0
  153. package/rackbops-noir/components/table.css +18 -0
  154. package/rackbops-noir/design.md +6 -3
  155. package/rackbops-noir/index.css +5 -0
  156. package/rackbops-studio/base.css +11 -2
  157. package/rackbops-studio/components/button.css +16 -0
  158. package/rackbops-studio/components/card.css +9 -0
  159. package/rackbops-studio/components/log.css +19 -0
  160. package/rackbops-studio/components/muted.css +7 -0
  161. package/rackbops-studio/components/nav-rail.css +14 -0
  162. package/rackbops-studio/components/pre.css +13 -0
  163. package/rackbops-studio/components/principle.css +1 -0
  164. package/rackbops-studio/components/stepper.css +87 -0
  165. package/rackbops-studio/components/table.css +18 -0
  166. package/rackbops-studio/design.md +29 -2
  167. package/rackbops-studio/index.css +5 -0
  168. package/summer-cloud/base.css +13 -1
  169. package/summer-cloud/components/button.css +17 -0
  170. package/summer-cloud/components/log.css +19 -0
  171. package/summer-cloud/components/muted.css +8 -0
  172. package/summer-cloud/components/nav-rail.css +17 -0
  173. package/summer-cloud/components/pre.css +16 -0
  174. package/summer-cloud/components/progress.css +14 -8
  175. package/summer-cloud/components/stepper.css +90 -0
  176. package/summer-cloud/components/table.css +11 -0
  177. package/summer-cloud/design.md +41 -3
  178. package/summer-cloud/index.css +5 -0
package/all.css CHANGED
@@ -12,3 +12,8 @@
12
12
  @import "./luminous-precision/index.css";
13
13
  @import "./neon-butterfly/index.css";
14
14
  @import "./summer-cloud/index.css";
15
+ @import "./concrete-signal/index.css";
16
+ @import "./concrete-signal-light/index.css";
17
+ @import "./amber-hearth/index.css";
18
+ @import "./amber-ember/index.css";
19
+ @import "./mono-field/index.css";
package/amber-ember/base.css ADDED
@@ -0,0 +1,61 @@
1
+ /* amber-ember — base styles
2
+ * Scoped defaults. Requires tokens.css. Fonts are system stacks (a system serif
3
+ * for display, system-ui for body) — nothing to load, no webfont network hop.
4
+ *
5
+ * The element carrying data-rb-style is the theme's canvas: it gets the
6
+ * background, text color, and body font — whether that is <html> for a page
7
+ * or a mount container for an embedded island. Page-only rules (body margin,
8
+ * viewport height) apply only when the attribute sits on <html>.
9
+ */
10
+ :where([data-rb-style="amber-ember"]) {
11
+ background-color: var(--rb-bg);
12
+ color: var(--rb-text);
13
+ font-family: var(--rb-font-body);
14
+ font-weight: var(--rb-font-weight);
15
+ }
16
+
17
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *),
18
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *)::before,
19
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *)::after {
20
+ box-sizing: border-box;
21
+ }
22
+
23
+ :where(html[data-rb-style="amber-ember"]) body {
24
+ margin: 0;
25
+ min-height: 100vh;
26
+ background-color: var(--rb-bg);
27
+ color: var(--rb-text);
28
+ font-family: var(--rb-font-body);
29
+ font-weight: var(--rb-font-weight);
30
+ }
31
+
32
+ /* Headings and titles are the one place this theme goes serif — the library's
33
+ * only serif display voice. Body copy and UI chrome (buttons, labels, table
34
+ * text) stay on the sans body font. */
35
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *):where(h1, h2, h3, h4, h5, h6) {
36
+ margin: 0 0 var(--rb-space-3);
37
+ font-family: var(--rb-font-display);
38
+ font-weight: var(--rb-font-weight-bold);
39
+ letter-spacing: var(--rb-heading-tracking);
40
+ line-height: 1.2;
41
+ text-wrap: balance;
42
+ color: var(--rb-text);
43
+ }
44
+
45
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *):where(p) {
46
+ margin: 0 0 var(--rb-space-3);
47
+ }
48
+
49
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *):where(ul, ol) {
50
+ margin: 0 0 var(--rb-space-3);
51
+ padding-inline-start: var(--rb-space-4);
52
+ }
53
+
54
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *):where(a) {
55
+ color: var(--rb-accent);
56
+ }
57
+
58
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *)::selection {
59
+ background: var(--rb-accent);
60
+ color: var(--rb-accent-fg);
61
+ }
package/amber-ember/components/alert.css ADDED
@@ -0,0 +1,30 @@
1
+ /* amber-ember — alert
2
+ * A surface panel with a 3px left bar carrying the semantic colour. */
3
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-alert {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: var(--rb-space-1);
7
+ padding: var(--rb-space-3) var(--rb-space-4);
8
+ background: var(--rb-surface);
9
+ border: 1px solid var(--rb-border);
10
+ border-left: 3px solid var(--rb-accent);
11
+ border-radius: var(--rb-radius);
12
+ color: var(--rb-text);
13
+ font-family: var(--rb-font-body);
14
+ font-size: var(--rb-text-sm);
15
+ }
16
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-alert__title {
17
+ font-weight: var(--rb-font-weight-medium);
18
+ }
19
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-alert--info {
20
+ border-left-color: var(--rb-info);
21
+ }
22
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-alert--success {
23
+ border-left-color: var(--rb-success);
24
+ }
25
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-alert--warning {
26
+ border-left-color: var(--rb-warning);
27
+ }
28
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-alert--danger {
29
+ border-left-color: var(--rb-danger);
30
+ }
package/amber-ember/components/badge.css ADDED
@@ -0,0 +1,32 @@
1
+ /* amber-ember — badge / status chip
2
+ * A true pill: a 16%-alpha tint of its hue behind full-strength text. Normal
3
+ * case, medium weight — this theme has no uppercase-shouty labels. */
4
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-badge {
5
+ display: inline-flex;
6
+ align-items: center;
7
+ gap: var(--rb-space-1);
8
+ padding: 2px var(--rb-space-2);
9
+ border-radius: var(--rb-radius-pill);
10
+ font-family: var(--rb-font-body);
11
+ font-size: 12px;
12
+ font-weight: var(--rb-font-weight-medium);
13
+ letter-spacing: var(--rb-label-tracking);
14
+ background: var(--rb-accent-wash);
15
+ color: var(--rb-accent);
16
+ }
17
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-badge--info {
18
+ background: color-mix(in srgb, var(--rb-info) 16%, transparent);
19
+ color: var(--rb-info);
20
+ }
21
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-badge--success {
22
+ background: color-mix(in srgb, var(--rb-success) 16%, transparent);
23
+ color: var(--rb-success);
24
+ }
25
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-badge--warning {
26
+ background: color-mix(in srgb, var(--rb-warning) 16%, transparent);
27
+ color: var(--rb-warning);
28
+ }
29
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-badge--danger {
30
+ background: color-mix(in srgb, var(--rb-danger) 16%, transparent);
31
+ color: var(--rb-danger);
32
+ }
package/amber-ember/components/button.css ADDED
@@ -0,0 +1,90 @@
1
+ /* amber-ember — button
2
+ * Soft surface-2 ghost by default; --primary is the one solid amber fill. Buttons
3
+ * stay on the sans body voice (serif is reserved for headings/titles). Hover
4
+ * lifts via a softer shadow, never a hard transform — cozy, not snappy. */
5
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn {
6
+ display: inline-flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ gap: var(--rb-space-2);
10
+ padding: var(--rb-space-2) var(--rb-space-4);
11
+ background: var(--rb-surface-2);
12
+ border: 1px solid var(--rb-border);
13
+ border-radius: var(--rb-radius);
14
+ color: var(--rb-text);
15
+ font-family: var(--rb-font-body);
16
+ font-weight: var(--rb-font-weight-medium);
17
+ font-size: var(--rb-text-sm);
18
+ line-height: 1;
19
+ cursor: pointer;
20
+ transition:
21
+ background var(--rb-transition),
22
+ border-color var(--rb-transition),
23
+ color var(--rb-transition),
24
+ box-shadow var(--rb-transition);
25
+ }
26
+ /* --sm: compact size for inline/table-row actions (composes with any variant) */
27
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--sm {
28
+ padding: var(--rb-space-1) var(--rb-space-3);
29
+ font-size: calc(var(--rb-text-sm) - 1px);
30
+ }
31
+ /* --icon: square icon-only hit target (>=2rem); pair with .rb-btn (+ an
32
+ * optional color variant) — inherits color/border/hover/focus from it. */
33
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-icon-btn {
34
+ padding: var(--rb-space-2);
35
+ min-width: 2rem;
36
+ min-height: 2rem;
37
+ gap: 0;
38
+ justify-content: center;
39
+ line-height: 1;
40
+ }
41
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:hover,
42
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:focus-visible {
43
+ border-color: var(--rb-border-strong);
44
+ outline: none;
45
+ }
46
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary {
47
+ background: var(--rb-accent);
48
+ border-color: var(--rb-accent);
49
+ color: var(--rb-accent-fg);
50
+ box-shadow: var(--rb-shadow-sm);
51
+ }
52
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary:hover,
53
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary:focus-visible {
54
+ box-shadow: var(--rb-shadow-lg);
55
+ }
56
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--accent {
57
+ background: var(--rb-accent-wash);
58
+ border-color: transparent;
59
+ color: var(--rb-accent);
60
+ }
61
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger {
62
+ background: transparent;
63
+ border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
64
+ color: var(--rb-danger);
65
+ }
66
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger:hover,
67
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger:focus-visible {
68
+ border-color: var(--rb-danger);
69
+ }
70
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost {
71
+ background: transparent;
72
+ border-color: transparent;
73
+ color: var(--rb-text-soft);
74
+ }
75
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost:hover,
76
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost:focus-visible {
77
+ background: var(--rb-surface-2);
78
+ border-color: var(--rb-border);
79
+ color: var(--rb-text);
80
+ }
81
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:disabled {
82
+ opacity: 0.5;
83
+ cursor: not-allowed;
84
+ }
85
+
86
+ @media (prefers-reduced-motion: reduce) {
87
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn {
88
+ transition: none;
89
+ }
90
+ }
package/amber-ember/components/card.css ADDED
@@ -0,0 +1,24 @@
1
+ /* amber-ember — card
2
+ * Solid raised panel, generously rounded, warm diffused shadow. A heading
3
+ * (h1-h3) inside a card is the theme's serif display voice, styled bold. */
4
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-card {
5
+ background: var(--rb-surface);
6
+ border: 1px solid var(--rb-border);
7
+ border-radius: var(--rb-radius-lg);
8
+ padding: var(--rb-space-5);
9
+ color: var(--rb-text);
10
+ box-shadow: var(--rb-shadow-sm);
11
+ }
12
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-card--raised {
13
+ background: var(--rb-surface-2);
14
+ box-shadow: var(--rb-shadow-lg);
15
+ }
16
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-card > :where(h1, h2, h3):first-child {
17
+ margin-top: 0;
18
+ }
19
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-card :where(h1, h2, h3) {
20
+ font-family: var(--rb-font-display);
21
+ font-weight: var(--rb-font-weight-bold);
22
+ letter-spacing: var(--rb-heading-tracking);
23
+ color: var(--rb-text);
24
+ }
package/amber-ember/components/dialog.css ADDED
@@ -0,0 +1,33 @@
1
+ /* amber-ember — dialog
2
+ * Native <dialog>: a raised, generously rounded panel over a blurred backdrop.
3
+ * The title is the theme's serif display voice, set bold. */
4
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-dialog {
5
+ padding: 0;
6
+ border: 1px solid var(--rb-border-strong);
7
+ border-radius: var(--rb-radius-lg);
8
+ background: var(--rb-surface);
9
+ color: var(--rb-text);
10
+ box-shadow: var(--rb-shadow-lg);
11
+ max-width: min(92vw, 34rem);
12
+ }
13
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-dialog::backdrop {
14
+ background: rgba(8, 5, 3, 0.6);
15
+ backdrop-filter: blur(var(--rb-blur));
16
+ }
17
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-dialog__body {
18
+ padding: var(--rb-space-5);
19
+ }
20
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-dialog__title {
21
+ margin: 0 0 var(--rb-space-3);
22
+ font-family: var(--rb-font-display);
23
+ font-weight: var(--rb-font-weight-bold);
24
+ letter-spacing: var(--rb-heading-tracking);
25
+ color: var(--rb-text);
26
+ }
27
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-dialog__actions {
28
+ display: flex;
29
+ justify-content: flex-end;
30
+ gap: var(--rb-space-2);
31
+ padding: var(--rb-space-3) var(--rb-space-5);
32
+ border-top: 1px solid var(--rb-border);
33
+ }
package/amber-ember/components/form.css ADDED
@@ -0,0 +1,72 @@
1
+ /* amber-ember — form controls
2
+ * Sunken fields on the espresso ground; focus swaps the border for the accent
3
+ * plus a soft accent-wash ring. Labels stay normal-case, medium weight, sans. */
4
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-field {
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: var(--rb-space-1);
8
+ }
9
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-label {
10
+ font-family: var(--rb-font-body);
11
+ font-size: var(--rb-text-sm);
12
+ font-weight: var(--rb-font-weight-medium);
13
+ color: var(--rb-text-soft);
14
+ }
15
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-input,
16
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-textarea,
17
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-select {
18
+ width: 100%;
19
+ padding: var(--rb-space-2) var(--rb-space-3);
20
+ background: var(--rb-surface-sunken);
21
+ border: 1px solid var(--rb-border);
22
+ border-radius: var(--rb-radius);
23
+ color: var(--rb-text);
24
+ font-family: var(--rb-font-body);
25
+ font-size: var(--rb-text-sm);
26
+ transition:
27
+ border-color var(--rb-transition),
28
+ box-shadow var(--rb-transition);
29
+ }
30
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-textarea {
31
+ min-height: 5rem;
32
+ resize: vertical;
33
+ }
34
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-input:focus-visible,
35
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-textarea:focus-visible,
36
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-select:focus-visible {
37
+ outline: none;
38
+ border-color: var(--rb-accent);
39
+ box-shadow: 0 0 0 3px var(--rb-accent-wash);
40
+ }
41
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-input::placeholder,
42
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-textarea::placeholder {
43
+ color: var(--rb-text-faint);
44
+ }
45
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-choice {
46
+ display: inline-flex;
47
+ align-items: center;
48
+ gap: var(--rb-space-2);
49
+ font-family: var(--rb-font-body);
50
+ font-size: var(--rb-text-sm);
51
+ color: var(--rb-text);
52
+ cursor: pointer;
53
+ }
54
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-checkbox,
55
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-radio,
56
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-switch {
57
+ accent-color: var(--rb-accent);
58
+ width: 1rem;
59
+ height: 1rem;
60
+ cursor: pointer;
61
+ }
62
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-switch {
63
+ width: 2rem;
64
+ }
65
+
66
+ @media (prefers-reduced-motion: reduce) {
67
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-input,
68
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-textarea,
69
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-select {
70
+ transition: none;
71
+ }
72
+ }
package/amber-ember/components/link.css ADDED
@@ -0,0 +1,47 @@
1
+ /* amber-ember — nav link (tree/sidebar row)
2
+ * A list row; hover fills to surface-2 and lights a soft, fully-rounded accent
3
+ * bar on the left edge — round, not a hard-edged rule, to match the theme's
4
+ * rounded character. Active carries the accent wash. */
5
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link {
6
+ position: relative;
7
+ display: flex;
8
+ align-items: center;
9
+ gap: var(--rb-space-2);
10
+ padding: var(--rb-space-2) var(--rb-space-3);
11
+ border-radius: var(--rb-radius);
12
+ color: var(--rb-text);
13
+ font-size: var(--rb-text-sm);
14
+ text-decoration: none;
15
+ cursor: pointer;
16
+ transition:
17
+ background var(--rb-transition),
18
+ color var(--rb-transition);
19
+ }
20
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link:hover {
21
+ background: var(--rb-surface-2);
22
+ }
23
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link::before {
24
+ content: "";
25
+ position: absolute;
26
+ left: 0;
27
+ top: 8px;
28
+ bottom: 8px;
29
+ width: 3px;
30
+ border-radius: var(--rb-radius-pill);
31
+ background: transparent;
32
+ transition: background var(--rb-transition);
33
+ }
34
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link:hover::before,
35
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link.rb-link--active::before {
36
+ background: var(--rb-accent);
37
+ }
38
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link.rb-link--active {
39
+ background: var(--rb-accent-wash);
40
+ color: var(--rb-accent);
41
+ }
42
+
43
+ @media (prefers-reduced-motion: reduce) {
44
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link {
45
+ transition: none;
46
+ }
47
+ }
package/amber-ember/components/log.css ADDED
@@ -0,0 +1,19 @@
1
+ /* amber-ember — log / terminal block
2
+ * Pairs with .rb-pre for the shared look (surface-sunken well, hairline
3
+ * border, radius, small mono) -- .rb-log itself only adds what changes for
4
+ * multi-line streaming output: a capped height with vertical scroll, wrapped
5
+ * long lines instead of .rb-pre's horizontal scroll, and a touch more
6
+ * line-height so dense text stays readable. Use together on one element:
7
+ * <pre class="rb-pre rb-log">. */
8
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-log {
9
+ max-height: 16rem;
10
+ overflow-y: auto;
11
+ white-space: pre-wrap;
12
+ overflow-wrap: anywhere;
13
+ line-height: 1.5;
14
+ }
15
+ /* Specificity-pinned (not import-order-dependent) override of .rb-pre's
16
+ * overflow-x: auto -- .rb-log wraps instead of scrolling horizontally. */
17
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-pre.rb-log {
18
+ overflow-x: hidden;
19
+ }
package/amber-ember/components/muted.css ADDED
@@ -0,0 +1,7 @@
1
+ /* amber-ember — muted / empty-state text
2
+ * Faint secondary text — captions, meta, "No results yet." style empty
3
+ * states. Italic fits this warm, hand-crafted, unhurried editorial voice. */
4
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-muted {
5
+ color: var(--rb-text-faint);
6
+ font-style: italic;
7
+ }
package/amber-ember/components/nav-rail.css ADDED
@@ -0,0 +1,14 @@
1
+ /* amber-ember — nav rail (vertical sidebar container)
2
+ * Flush edge chrome, not a floating card: fixed-width flex column, surface
3
+ * background, a hairline right edge. Composes with .rb-link for items --
4
+ * active/hover are entirely that component's own tokens, nothing new here. */
5
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-nav-rail {
6
+ display: flex;
7
+ flex-direction: column;
8
+ flex-shrink: 0;
9
+ gap: var(--rb-space-1);
10
+ width: 14rem;
11
+ padding: var(--rb-space-3);
12
+ background: var(--rb-surface);
13
+ border-right: 1px solid var(--rb-border);
14
+ }
package/amber-ember/components/pre.css ADDED
@@ -0,0 +1,13 @@
1
+ /* amber-ember — 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-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-pre {
5
+ margin: 0;
6
+ padding: var(--rb-space-3) var(--rb-space-4);
7
+ background: var(--rb-surface-sunken);
8
+ border: 1px solid var(--rb-border);
9
+ border-radius: var(--rb-radius);
10
+ font-family: var(--rb-font-mono);
11
+ font-size: var(--rb-text-sm);
12
+ overflow-x: auto;
13
+ }
package/amber-ember/components/progress.css ADDED
@@ -0,0 +1,42 @@
1
+ /* amber-ember — progress + spinner
2
+ * A sunken trough with a solid accent fill; the spinner is a single accent arc.
3
+ * The theme's one gradient is rationed to tabs.css — kept solid here so it
4
+ * isn't spent twice. */
5
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-progress {
6
+ appearance: none;
7
+ width: 100%;
8
+ height: 6px;
9
+ border: 0;
10
+ border-radius: var(--rb-radius-pill);
11
+ overflow: hidden;
12
+ background: var(--rb-surface-sunken);
13
+ }
14
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-progress::-webkit-progress-bar {
15
+ background: var(--rb-surface-sunken);
16
+ }
17
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-progress::-webkit-progress-value {
18
+ background: var(--rb-accent);
19
+ }
20
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-progress::-moz-progress-bar {
21
+ background: var(--rb-accent);
22
+ }
23
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-spinner {
24
+ display: inline-block;
25
+ width: 1.25rem;
26
+ height: 1.25rem;
27
+ border: 2px solid var(--rb-border-strong);
28
+ border-top-color: var(--rb-accent);
29
+ border-radius: 50%;
30
+ animation: rb-ember-spin 0.7s linear infinite;
31
+ }
32
+ @keyframes rb-ember-spin {
33
+ to {
34
+ transform: rotate(360deg);
35
+ }
36
+ }
37
+
38
+ @media (prefers-reduced-motion: reduce) {
39
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-spinner {
40
+ animation-duration: 2s;
41
+ }
42
+ }
package/amber-ember/components/stepper.css ADDED
@@ -0,0 +1,87 @@
1
+ /* amber-ember — stepper (delivery / milestone tracker)
2
+ * <ol class="rb-stepper"> with one
3
+ * <li class="rb-stepper__step rb-stepper--complete|current|upcoming"> per
4
+ * milestone: a .rb-stepper__node icon/number circle + .rb-stepper__label.
5
+ * Each non-first step draws its OWN connector segment back to the previous
6
+ * step's node (right: 50%; width: 100% of that step's own flex slice, self-
7
+ * aligning to node centers regardless of item count or label width -- a
8
+ * single full-width rail can't do this without knowing how many steps there
9
+ * are, since node centers sit inset within their own slice). isolation:
10
+ * isolate keeps every segment's negative z-index scoped to this stepper, so
11
+ * it paints behind every node without needing per-node z-index of its own.
12
+ * A segment fills once its OWN step is reached (complete or current) -- the
13
+ * same state class already on the <li>, not a second progress mechanism. No
14
+ * glow -- the current node's lift is the theme's own warm, diffused
15
+ * shadow-lg (deepened for the dark ground). */
16
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper {
17
+ display: flex;
18
+ isolation: isolate;
19
+ list-style: none;
20
+ margin: 0;
21
+ padding: 0;
22
+ }
23
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step {
24
+ position: relative;
25
+ flex: 1;
26
+ min-width: 0;
27
+ display: flex;
28
+ flex-direction: column;
29
+ align-items: center;
30
+ gap: var(--rb-space-2);
31
+ text-align: center;
32
+ }
33
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step:not(:first-child)::before {
34
+ content: "";
35
+ position: absolute;
36
+ top: 1rem;
37
+ right: 50%;
38
+ width: 100%;
39
+ height: 2px;
40
+ background: var(--rb-surface-sunken);
41
+ z-index: -1;
42
+ transition: background-color var(--rb-transition);
43
+ }
44
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
45
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
46
+ background: var(--rb-accent);
47
+ }
48
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__node {
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ width: 2rem;
53
+ height: 2rem;
54
+ border: 2px solid transparent;
55
+ border-radius: var(--rb-radius-pill);
56
+ background: var(--rb-surface-2);
57
+ color: var(--rb-text-faint);
58
+ font-size: var(--rb-text-sm);
59
+ font-weight: var(--rb-font-weight-medium);
60
+ }
61
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__label {
62
+ font-size: var(--rb-text-sm);
63
+ color: var(--rb-text-faint);
64
+ }
65
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--complete .rb-stepper__node {
66
+ background: var(--rb-accent);
67
+ color: var(--rb-accent-fg);
68
+ }
69
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--complete .rb-stepper__label {
70
+ color: var(--rb-text);
71
+ }
72
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--current .rb-stepper__node {
73
+ background: var(--rb-surface);
74
+ border-color: var(--rb-accent);
75
+ color: var(--rb-accent);
76
+ box-shadow: var(--rb-shadow-lg);
77
+ }
78
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--current .rb-stepper__label {
79
+ color: var(--rb-accent);
80
+ font-weight: var(--rb-font-weight-medium);
81
+ }
82
+
83
+ @media (prefers-reduced-motion: reduce) {
84
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step:not(:first-child)::before {
85
+ transition: none;
86
+ }
87
+ }
package/amber-ember/components/table.css ADDED
@@ -0,0 +1,50 @@
1
+ /* amber-ember — table
2
+ * Faint header rule, tabular numerals, row hover to surface-2 with the
3
+ * theme's own soft transition. Headers stay normal-case, medium weight. */
4
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table {
5
+ width: 100%;
6
+ border-collapse: collapse;
7
+ font-family: var(--rb-font-body);
8
+ font-size: var(--rb-text-sm);
9
+ font-variant-numeric: tabular-nums;
10
+ }
11
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table th {
12
+ text-align: left;
13
+ padding: var(--rb-space-2) var(--rb-space-3);
14
+ border-bottom: 1px solid var(--rb-border-strong);
15
+ color: var(--rb-text-faint);
16
+ font-weight: var(--rb-font-weight-medium);
17
+ }
18
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table td {
19
+ padding: var(--rb-space-2) var(--rb-space-3);
20
+ border-bottom: 1px solid var(--rb-border);
21
+ color: var(--rb-text);
22
+ transition: background var(--rb-transition);
23
+ }
24
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table tbody tr:hover td {
25
+ background: var(--rb-surface-2);
26
+ }
27
+ /* --interactive: clickable rows (a tabindex tr, or a row-wrapping button/link) —
28
+ * pointer cursor plus a keyboard-equivalent of the hover wash and a focus ring. */
29
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table--interactive tbody tr {
30
+ cursor: pointer;
31
+ }
32
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table--interactive tbody tr:focus-visible,
33
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table--interactive tbody tr:has(:focus-visible) {
34
+ outline: 2px solid var(--rb-accent);
35
+ outline-offset: -2px;
36
+ }
37
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table--interactive tbody tr:focus-visible td,
38
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table--interactive tbody tr:has(:focus-visible) td {
39
+ background: var(--rb-surface-2);
40
+ }
41
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table .rb-num {
42
+ text-align: right;
43
+ font-variant-numeric: tabular-nums;
44
+ }
45
+
46
+ @media (prefers-reduced-motion: reduce) {
47
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-table td {
48
+ transition: none;
49
+ }
50
+ }