@rackbops/styles 0.1.0 → 0.1.2

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/mono-field/tokens.css ADDED
@@ -0,0 +1,76 @@
1
+ /* mono-field — design tokens
2
+ * An original standalone theme for @rackbops/styles: the library's
3
+ * deliberately restrained, "anti-flashy" light theme — a quiet foil to the
4
+ * glow/gradient/neon themes elsewhere in the roster. Consume via:
5
+ * @import "@rackbops/styles/mono-field/tokens";
6
+ * or pull the whole theme with ./index.css.
7
+ *
8
+ * Nothing applies until an element carries data-rb-style="mono-field" — set it
9
+ * on <html> for a page, or on any container for an embedded island. The
10
+ * :where() keeps specificity at zero, so any consumer rule overrides.
11
+ *
12
+ * There is no ported or reverse-documented source: this is a purpose-designed
13
+ * theme built directly to the library's shared baseline --rb-* contract, with
14
+ * no theme extras. Visual hierarchy comes from thin 1px hairline borders and
15
+ * generous spacing rather than color contrast between surface layers or
16
+ * shadow depth; the one gradient (--rb-accent-grad) is rationed to the
17
+ * active-tab underline and appears nowhere else.
18
+ */
19
+ :where([data-rb-style="mono-field"]) {
20
+ color-scheme: light;
21
+
22
+ /* color — near-flat grayscale surfaces; hierarchy comes from borders, not fills */
23
+ --rb-bg: #ffffff;
24
+ --rb-surface: #ffffff;
25
+ --rb-surface-2: #f7f7f7;
26
+ --rb-surface-sunken: #f0f0f0;
27
+ --rb-text: #111111;
28
+ --rb-text-soft: #5a5a5a;
29
+ --rb-text-faint: #6b6b6b;
30
+ --rb-border: #e0e0e0;
31
+ --rb-border-strong: #c4c4c4;
32
+
33
+ /* accent — a near-black ink-blue, just enough to read as "the interactive
34
+ color" without ever reading as decoration */
35
+ --rb-accent: #1d2733;
36
+ --rb-accent-fg: #ffffff;
37
+ --rb-accent-wash: rgba(29, 39, 51, 0.06);
38
+
39
+ /* the ONE gradient — rationed to the active-tab underline, nowhere else */
40
+ --rb-accent-grad: linear-gradient(120deg, #1d2733, #4a5568);
41
+
42
+ /* semantic — desaturated compared to the rest of the roster, to keep this
43
+ theme's voice consistently quiet. Warning darkened from #a9791f (3.60:1
44
+ on --rb-surface-2, failed AA) to #91681b (4.67:1) — the sole failing hue. */
45
+ --rb-info: #4a6fa5;
46
+ --rb-success: #3f7d4f;
47
+ --rb-warning: #91681b;
48
+ --rb-danger: #a13a3a;
49
+
50
+ /* typography — small/tight system-ui type; no uppercase tricks anywhere */
51
+ --rb-font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
52
+ --rb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
53
+ --rb-font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
54
+ --rb-font-weight: 400;
55
+ --rb-font-weight-medium: 500;
56
+ --rb-font-weight-bold: 600; /* this theme never goes past 600 — part of the quiet voice */
57
+ --rb-heading-tracking: -0.005em;
58
+ --rb-label-tracking: 0.02em;
59
+ --rb-text-sm: 13px;
60
+
61
+ /* shape & effects — small tight radii, barely-there shadows, no glass, no glow */
62
+ --rb-radius: 0.25rem;
63
+ --rb-radius-lg: 0.375rem;
64
+ --rb-radius-pill: 999px;
65
+ --rb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
66
+ --rb-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
67
+ --rb-blur: 8px;
68
+ --rb-transition: 0.12s;
69
+
70
+ /* spacing */
71
+ --rb-space-1: 0.25rem;
72
+ --rb-space-2: 0.5rem;
73
+ --rb-space-3: 0.75rem;
74
+ --rb-space-4: 1rem;
75
+ --rb-space-5: 1.5rem;
76
+ }
package/neon-butterfly/base.css CHANGED
@@ -39,6 +39,24 @@
39
39
  background-color: var(--rb-bg-blend);
40
40
  }
41
41
 
42
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *):where(h1, h2, h3, h4, h5, h6) {
43
+ margin: 0 0 var(--rb-space-3);
44
+ font-family: var(--rb-font-display);
45
+ font-weight: var(--rb-font-weight-bold);
46
+ letter-spacing: var(--rb-heading-tracking);
47
+ line-height: 1.2;
48
+ text-wrap: balance;
49
+ }
50
+
51
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *):where(p) {
52
+ margin: 0 0 var(--rb-space-3);
53
+ }
54
+
55
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *):where(ul, ol) {
56
+ margin: 0 0 var(--rb-space-3);
57
+ padding-inline-start: var(--rb-space-4);
58
+ }
59
+
42
60
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *):where(a) {
43
61
  color: var(--rb-accent);
44
62
  }
package/neon-butterfly/components/button.css CHANGED
@@ -18,6 +18,21 @@
18
18
  border-color var(--rb-transition),
19
19
  color var(--rb-transition);
20
20
  }
21
+ /* --sm: compact size for inline/table-row actions (composes with any variant) */
22
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--sm {
23
+ padding: var(--rb-space-1) var(--rb-space-2);
24
+ font-size: calc(var(--rb-text-sm) - 1px);
25
+ }
26
+ /* --icon: square icon-only hit target (>=2rem); pair with .rb-btn (+ an
27
+ * optional color variant) — inherits color/border/hover/focus from it. */
28
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-icon-btn {
29
+ padding: var(--rb-space-2);
30
+ min-width: 2rem;
31
+ min-height: 2rem;
32
+ gap: 0;
33
+ justify-content: center;
34
+ line-height: 1;
35
+ }
21
36
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:hover,
22
37
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:focus-visible {
23
38
  border-color: var(--rb-accent-border);
@@ -37,6 +52,17 @@
37
52
  border-color: var(--rb-danger);
38
53
  color: var(--rb-danger);
39
54
  }
55
+ /* ghost: minimal-emphasis variant — no border/fill until hover reveals the glass surface */
56
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost {
57
+ background: transparent;
58
+ border-color: transparent;
59
+ color: var(--rb-text-soft);
60
+ }
61
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost:hover,
62
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn--ghost:focus-visible {
63
+ background: var(--rb-surface-glass);
64
+ }
65
+
40
66
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-btn:disabled {
41
67
  opacity: 0.5;
42
68
  cursor: not-allowed;
package/neon-butterfly/components/link.css CHANGED
@@ -34,6 +34,16 @@
34
34
  color: var(--rb-accent-2);
35
35
  text-shadow: 0 0 5px var(--rb-accent-2-glow);
36
36
  }
37
+ /* --active: the current route — the hover color/glow, resting, without the
38
+ * hover-only slide (that's a click-me cue; an active item is already "here"). */
39
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active {
40
+ border-color: var(--rb-accent-border);
41
+ color: var(--rb-accent);
42
+ }
43
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active::before {
44
+ color: var(--rb-accent-2);
45
+ text-shadow: 0 0 5px var(--rb-accent-2-glow);
46
+ }
37
47
 
38
48
  @keyframes rb-nb-pulse-glow {
39
49
  0%,
package/neon-butterfly/components/log.css ADDED
@@ -0,0 +1,19 @@
1
+ /* neon-butterfly — 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="neon-butterfly"], [data-rb-style="neon-butterfly"] *).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="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-pre.rb-log {
18
+ overflow-x: hidden;
19
+ }
package/neon-butterfly/components/muted.css ADDED
@@ -0,0 +1,7 @@
1
+ /* neon-butterfly — muted / empty-state text
2
+ * Faint secondary text — captions, meta, "No results yet." style empty
3
+ * states. No italic: this theme's mono/uppercase terminal voice never
4
+ * reaches for a literary flourish — "a command console, not a document". */
5
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-muted {
6
+ color: var(--rb-text-faint);
7
+ }
package/neon-butterfly/components/nav-rail.css ADDED
@@ -0,0 +1,17 @@
1
+ /* neon-butterfly — nav rail (vertical sidebar container)
2
+ * Flush edge chrome, not a floating card: fixed-width flex column, the same
3
+ * glass panel + blur as .rb-card, a hairline right edge. Composes with
4
+ * .rb-link for items -- active/hover are entirely that component's own
5
+ * tokens, nothing new here. */
6
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-nav-rail {
7
+ display: flex;
8
+ flex-direction: column;
9
+ flex-shrink: 0;
10
+ gap: var(--rb-space-1);
11
+ width: 14rem;
12
+ padding: var(--rb-space-3);
13
+ background: var(--rb-surface-glass);
14
+ border-right: 1px solid var(--rb-border);
15
+ backdrop-filter: blur(var(--rb-blur));
16
+ -webkit-backdrop-filter: blur(var(--rb-blur));
17
+ }
package/neon-butterfly/components/pre.css ADDED
@@ -0,0 +1,13 @@
1
+ /* neon-butterfly — command / log block
2
+ * Styled <pre> for shell commands or short log output: sunken well,
3
+ * hairline border, small mono, scrolls horizontally instead of wrapping. */
4
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).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/neon-butterfly/components/progress.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /* neon-butterfly — progress bar & spinner */
2
2
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress {
3
+ appearance: none;
3
4
  display: block;
4
5
  width: 100%;
5
6
  height: 0.5rem;
@@ -8,14 +9,22 @@
8
9
  border-radius: 1rem;
9
10
  overflow: hidden;
10
11
  }
11
- :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress__bar {
12
- height: 100%;
12
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress::-webkit-progress-bar {
13
+ background: var(--rb-surface);
14
+ }
15
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress::-webkit-progress-value {
13
16
  background: var(--rb-accent);
14
17
  box-shadow: 0 0 8px var(--rb-accent-glow);
15
- border-radius: 1rem;
16
- transition: width var(--rb-transition);
17
18
  }
18
- :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress__bar--accent {
19
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress::-moz-progress-bar {
20
+ background: var(--rb-accent);
21
+ box-shadow: 0 0 8px var(--rb-accent-glow);
22
+ }
23
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress--accent::-webkit-progress-value {
24
+ background: var(--rb-accent-2);
25
+ box-shadow: 0 0 8px var(--rb-accent-2-glow);
26
+ }
27
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-progress--accent::-moz-progress-bar {
19
28
  background: var(--rb-accent-2);
20
29
  box-shadow: 0 0 8px var(--rb-accent-2-glow);
21
30
  }
package/neon-butterfly/components/stepper.css ADDED
@@ -0,0 +1,89 @@
1
+ /* neon-butterfly — 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.
14
+ * Elevation here is glow, not shadow: a filled segment and the current node
15
+ * both take the same accent-glow box-shadow .rb-progress's value fill already
16
+ * uses. */
17
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper {
18
+ display: flex;
19
+ isolation: isolate;
20
+ list-style: none;
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step {
25
+ position: relative;
26
+ flex: 1;
27
+ min-width: 0;
28
+ display: flex;
29
+ flex-direction: column;
30
+ align-items: center;
31
+ gap: var(--rb-space-2);
32
+ text-align: center;
33
+ }
34
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step:not(:first-child)::before {
35
+ content: "";
36
+ position: absolute;
37
+ top: 1rem;
38
+ right: 50%;
39
+ width: 100%;
40
+ height: 2px;
41
+ background: var(--rb-surface);
42
+ z-index: -1;
43
+ transition: background-color var(--rb-transition), box-shadow var(--rb-transition);
44
+ }
45
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
46
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
47
+ background: var(--rb-accent);
48
+ box-shadow: 0 0 8px var(--rb-accent-glow);
49
+ }
50
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__node {
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: center;
54
+ width: 2rem;
55
+ height: 2rem;
56
+ border: 2px solid transparent;
57
+ border-radius: var(--rb-radius-pill);
58
+ background: var(--rb-surface-2);
59
+ color: var(--rb-text-faint);
60
+ font-size: var(--rb-text-sm);
61
+ font-weight: var(--rb-font-weight-medium);
62
+ }
63
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__label {
64
+ font-size: var(--rb-text-sm);
65
+ color: var(--rb-text-faint);
66
+ }
67
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--complete .rb-stepper__node {
68
+ background: var(--rb-accent);
69
+ color: var(--rb-accent-fg);
70
+ }
71
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--complete .rb-stepper__label {
72
+ color: var(--rb-text);
73
+ }
74
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__node {
75
+ background: var(--rb-surface);
76
+ border-color: var(--rb-accent);
77
+ color: var(--rb-accent);
78
+ box-shadow: 0 0 8px var(--rb-accent-glow);
79
+ }
80
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__label {
81
+ color: var(--rb-accent);
82
+ font-weight: var(--rb-font-weight-medium);
83
+ }
84
+
85
+ @media (prefers-reduced-motion: reduce) {
86
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step:not(:first-child)::before {
87
+ transition: none;
88
+ }
89
+ }
package/neon-butterfly/components/table.css CHANGED
@@ -19,9 +19,24 @@
19
19
  padding: var(--rb-space-2) var(--rb-space-3);
20
20
  border-bottom: 1px solid var(--rb-border);
21
21
  }
22
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table .rb-num {
23
+ text-align: right;
24
+ font-variant-numeric: tabular-nums;
25
+ }
22
26
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table tbody tr {
23
27
  transition: background var(--rb-transition);
24
28
  }
25
29
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table tbody tr:hover {
26
30
  background: var(--rb-surface-glass);
27
31
  }
32
+ /* --interactive: clickable rows (a tabindex tr, or a row-wrapping button/link) —
33
+ * pointer cursor plus a keyboard-equivalent of the glass hover and a focus ring. */
34
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table--interactive tbody tr {
35
+ cursor: pointer;
36
+ }
37
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table--interactive tbody tr:focus-visible,
38
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-table--interactive tbody tr:has(:focus-visible) {
39
+ outline: 2px solid var(--rb-accent);
40
+ outline-offset: -2px;
41
+ background: var(--rb-surface-glass);
42
+ }
package/neon-butterfly/design.md CHANGED
@@ -55,6 +55,11 @@ appear only on interaction or state. Never use pure white or pure black.
55
55
  - **Interactive text** (buttons, links, tabs, labels, table headers): uppercase,
56
56
  700, 14px (labels/headers 11–12px), letter-spacing `0.1em` (`--rb-label-tracking`).
57
57
  - **Body text:** sentence case, 450.
58
+ - **Bare tags:** unclassed `h1`-`h6` carry the mono voice at 700 (the same
59
+ weight as everything else marked "interactive" — only 450/700 load), with
60
+ the wide `--rb-heading-tracking` (`0.1em`) and `--rb-space-3` margin below.
61
+ Bare `p` shares that margin; bare `ul`/`ol` add it too, with `--rb-space-4`
62
+ marker indent (real disc/decimal markers, not stripped).
58
63
 
59
64
  Webfonts (JetBrains Mono) are declared in `styles/manifest.json`
60
65
  (`neon-butterfly.fonts`); consumers load that stylesheet or self-host, and the
@@ -76,19 +81,50 @@ token stack falls back to `ui-monospace`.
76
81
  Class prefix `rb-`. Variants use BEM-ish modifiers (`rb-btn--accent`).
77
82
 
78
83
  - **Card** `.rb-card` — frosted glass panel.
79
- - **NavLink** `.rb-link` — the switchboard link: `>` chevron turns lime on hover.
80
- - **Button** `.rb-btn` — `--primary`, `--accent`, `--danger` variants.
84
+ - **NavLink** `.rb-link` — the switchboard link: `>` chevron turns lime on
85
+ hover; `--active` applies that same color/glow at rest, without the
86
+ hover-only slide, for the current route.
87
+ - **Nav rail** `.rb-nav-rail` — the sidebar container: 14rem fixed-width flex
88
+ column, the same glass panel + blur as `.rb-card`, a hairline right edge.
89
+ Composes with `.rb-link` for items; introduces no active-state convention
90
+ of its own.
91
+ - **Button** `.rb-btn` — `--primary`, `--accent`, `--danger` variants; `--ghost`
92
+ drops the glass fill and border until hover reveals it — the lowest-emphasis
93
+ tier; `--sm` compact size for inline/table-row actions; `.rb-icon-btn` a
94
+ square icon-only hit target (>=2rem), paired with `.rb-btn`.
81
95
  - **Form** `.rb-input`, `.rb-textarea`, `.rb-select`, `.rb-label`, `.rb-field`,
82
96
  `.rb-checkbox`, `.rb-radio`, `.rb-switch`, `.rb-choice` — checked states glow lime.
83
97
  - **Badge** `.rb-badge` + semantic modifiers.
84
98
  - **Alert** `.rb-alert` — left accent bar carries the semantic color.
85
99
  - **Dialog** `.rb-dialog` — native `<dialog>`, lilac border + glow, blurred backdrop.
86
100
  - **Tabs** `.rb-tabs`/`.rb-tab`/`.rb-tabpanel` — active tab underlined in lilac with text glow.
87
- - **Table** `.rb-table` — lilac header rule, glass row hover.
101
+ - **Table** `.rb-table` (+ `.rb-num`) — lilac header rule, glass row hover. `--interactive`
102
+ marks clickable rows: pointer cursor, plus a focus-visible ring (and the
103
+ same glass wash) for a `tabindex` row or a row-wrapping button/link.
88
104
  - **Progress** `.rb-progress`, **Spinner** `.rb-spinner` — glowing lilac indicators.
105
+ - **Stepper** `.rb-stepper` (+ `__step` / `__node` / `__label`, `--complete` /
106
+ `--current` / `--upcoming`) — a milestone rail: complete nodes solid accent
107
+ with a checkmark, current a surface-fill ring with an accent border, both
108
+ the rail fill and the current node glowing with the same `--rb-accent-glow` box-shadow
109
+ `.rb-progress`'s value fill uses. Upcoming reads faint surface-2; rail track is
110
+ `surface` (matching how `.rb-progress` itself sits), and each connector
111
+ segment picks up that same glow once its own step is reached (complete or
112
+ current) -- no separate progress value to keep in sync with the step
113
+ states.
114
+ - **Muted text** `.rb-muted` — faint secondary/empty-state text;
115
+ `color: var(--rb-text-faint)` only, no italic — this theme's mono/uppercase
116
+ terminal voice never reaches for a literary flourish.
117
+ - **Pre / log block** `.rb-pre` — command/log `<pre>`; sunken background,
118
+ hairline border, radius, small mono, horizontal scroll. Pair with `.rb-log`
119
+ (`<pre class="rb-pre rb-log">`) for multi-line streaming output: a capped
120
+ 16rem height with vertical scroll, wrapped lines instead of horizontal
121
+ scroll, and roomier line-height for dense text.
89
122
 
90
123
  This port carries nazuraki's original component set; the rackbops-specific
91
- `eyebrow`, `tabstrip`, `wordmark`, and `card--raised` surfaces are not part of it.
124
+ `eyebrow`, `tabstrip`, and `wordmark` surfaces are not part of it.
125
+ `.rb-card--raised` is also absent: nazuraki's own card never had a second
126
+ elevation tier, so the port doesn't invent one — `Card raised` is a
127
+ documented no-op here (see `contract.test.mjs`'s allowlist).
92
128
 
93
129
  ## Code syntax
94
130
 
package/neon-butterfly/index.css CHANGED
@@ -3,6 +3,7 @@
3
3
  @import "./base.css";
4
4
  @import "./components/card.css";
5
5
  @import "./components/link.css";
6
+ @import "./components/nav-rail.css";
6
7
  @import "./components/button.css";
7
8
  @import "./components/form.css";
8
9
  @import "./components/badge.css";
@@ -11,3 +12,7 @@
11
12
  @import "./components/tabs.css";
12
13
  @import "./components/table.css";
13
14
  @import "./components/progress.css";
15
+ @import "./components/stepper.css";
16
+ @import "./components/muted.css";
17
+ @import "./components/pre.css";
18
+ @import "./components/log.css";
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@rackbops/styles",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Rackbops design-system styles: tokens, base styles, and component classes per theme.",
5
- "license": "UNLICENSED",
5
+ "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
8
8
  "url": "git+https://github.com/roshne/rackbops-ui-ux-std-lib.git",
@@ -14,6 +14,9 @@
14
14
  "scripts": {
15
15
  "test": "node --test"
16
16
  },
17
+ "devDependencies": {
18
+ "typescript": "^7.0.0"
19
+ },
17
20
  "files": [
18
21
  "arcane-obsidian",
19
22
  "arcane-parchment",
@@ -22,39 +25,65 @@
22
25
  "luminous-precision",
23
26
  "neon-butterfly",
24
27
  "summer-cloud",
28
+ "concrete-signal",
29
+ "concrete-signal-light",
30
+ "amber-hearth",
31
+ "amber-ember",
32
+ "mono-field",
25
33
  "all.css",
26
- "manifest.json"
34
+ "manifest.json",
35
+ "css-side-effect.d.ts"
27
36
  ],
28
37
  "exports": {
29
- "./all": "./all.css",
38
+ "./all": { "types": "./css-side-effect.d.ts", "default": "./all.css" },
30
39
  "./manifest": "./manifest.json",
31
- "./arcane-obsidian": "./arcane-obsidian/index.css",
32
- "./arcane-obsidian/tokens": "./arcane-obsidian/tokens.css",
33
- "./arcane-obsidian/base": "./arcane-obsidian/base.css",
34
- "./arcane-obsidian/components/*": "./arcane-obsidian/components/*.css",
35
- "./arcane-parchment": "./arcane-parchment/index.css",
36
- "./arcane-parchment/tokens": "./arcane-parchment/tokens.css",
37
- "./arcane-parchment/base": "./arcane-parchment/base.css",
38
- "./arcane-parchment/components/*": "./arcane-parchment/components/*.css",
39
- "./rackbops-studio": "./rackbops-studio/index.css",
40
- "./rackbops-studio/tokens": "./rackbops-studio/tokens.css",
41
- "./rackbops-studio/base": "./rackbops-studio/base.css",
42
- "./rackbops-studio/components/*": "./rackbops-studio/components/*.css",
43
- "./rackbops-noir": "./rackbops-noir/index.css",
44
- "./rackbops-noir/tokens": "./rackbops-noir/tokens.css",
45
- "./rackbops-noir/base": "./rackbops-noir/base.css",
46
- "./rackbops-noir/components/*": "./rackbops-noir/components/*.css",
47
- "./luminous-precision": "./luminous-precision/index.css",
48
- "./luminous-precision/tokens": "./luminous-precision/tokens.css",
49
- "./luminous-precision/base": "./luminous-precision/base.css",
50
- "./luminous-precision/components/*": "./luminous-precision/components/*.css",
51
- "./neon-butterfly": "./neon-butterfly/index.css",
52
- "./neon-butterfly/tokens": "./neon-butterfly/tokens.css",
53
- "./neon-butterfly/base": "./neon-butterfly/base.css",
54
- "./neon-butterfly/components/*": "./neon-butterfly/components/*.css",
55
- "./summer-cloud": "./summer-cloud/index.css",
56
- "./summer-cloud/tokens": "./summer-cloud/tokens.css",
57
- "./summer-cloud/base": "./summer-cloud/base.css",
58
- "./summer-cloud/components/*": "./summer-cloud/components/*.css"
40
+ "./arcane-obsidian": { "types": "./css-side-effect.d.ts", "default": "./arcane-obsidian/index.css" },
41
+ "./arcane-obsidian/tokens": { "types": "./css-side-effect.d.ts", "default": "./arcane-obsidian/tokens.css" },
42
+ "./arcane-obsidian/base": { "types": "./css-side-effect.d.ts", "default": "./arcane-obsidian/base.css" },
43
+ "./arcane-obsidian/components/*": { "types": "./css-side-effect.d.ts", "default": "./arcane-obsidian/components/*.css" },
44
+ "./arcane-parchment": { "types": "./css-side-effect.d.ts", "default": "./arcane-parchment/index.css" },
45
+ "./arcane-parchment/tokens": { "types": "./css-side-effect.d.ts", "default": "./arcane-parchment/tokens.css" },
46
+ "./arcane-parchment/base": { "types": "./css-side-effect.d.ts", "default": "./arcane-parchment/base.css" },
47
+ "./arcane-parchment/components/*": { "types": "./css-side-effect.d.ts", "default": "./arcane-parchment/components/*.css" },
48
+ "./rackbops-studio": { "types": "./css-side-effect.d.ts", "default": "./rackbops-studio/index.css" },
49
+ "./rackbops-studio/tokens": { "types": "./css-side-effect.d.ts", "default": "./rackbops-studio/tokens.css" },
50
+ "./rackbops-studio/base": { "types": "./css-side-effect.d.ts", "default": "./rackbops-studio/base.css" },
51
+ "./rackbops-studio/components/*": { "types": "./css-side-effect.d.ts", "default": "./rackbops-studio/components/*.css" },
52
+ "./rackbops-noir": { "types": "./css-side-effect.d.ts", "default": "./rackbops-noir/index.css" },
53
+ "./rackbops-noir/tokens": { "types": "./css-side-effect.d.ts", "default": "./rackbops-noir/tokens.css" },
54
+ "./rackbops-noir/base": { "types": "./css-side-effect.d.ts", "default": "./rackbops-noir/base.css" },
55
+ "./rackbops-noir/components/*": { "types": "./css-side-effect.d.ts", "default": "./rackbops-noir/components/*.css" },
56
+ "./luminous-precision": { "types": "./css-side-effect.d.ts", "default": "./luminous-precision/index.css" },
57
+ "./luminous-precision/tokens": { "types": "./css-side-effect.d.ts", "default": "./luminous-precision/tokens.css" },
58
+ "./luminous-precision/base": { "types": "./css-side-effect.d.ts", "default": "./luminous-precision/base.css" },
59
+ "./luminous-precision/components/*": { "types": "./css-side-effect.d.ts", "default": "./luminous-precision/components/*.css" },
60
+ "./neon-butterfly": { "types": "./css-side-effect.d.ts", "default": "./neon-butterfly/index.css" },
61
+ "./neon-butterfly/tokens": { "types": "./css-side-effect.d.ts", "default": "./neon-butterfly/tokens.css" },
62
+ "./neon-butterfly/base": { "types": "./css-side-effect.d.ts", "default": "./neon-butterfly/base.css" },
63
+ "./neon-butterfly/components/*": { "types": "./css-side-effect.d.ts", "default": "./neon-butterfly/components/*.css" },
64
+ "./summer-cloud": { "types": "./css-side-effect.d.ts", "default": "./summer-cloud/index.css" },
65
+ "./summer-cloud/tokens": { "types": "./css-side-effect.d.ts", "default": "./summer-cloud/tokens.css" },
66
+ "./summer-cloud/base": { "types": "./css-side-effect.d.ts", "default": "./summer-cloud/base.css" },
67
+ "./summer-cloud/components/*": { "types": "./css-side-effect.d.ts", "default": "./summer-cloud/components/*.css" },
68
+ "./concrete-signal": { "types": "./css-side-effect.d.ts", "default": "./concrete-signal/index.css" },
69
+ "./concrete-signal/tokens": { "types": "./css-side-effect.d.ts", "default": "./concrete-signal/tokens.css" },
70
+ "./concrete-signal/base": { "types": "./css-side-effect.d.ts", "default": "./concrete-signal/base.css" },
71
+ "./concrete-signal/components/*": { "types": "./css-side-effect.d.ts", "default": "./concrete-signal/components/*.css" },
72
+ "./concrete-signal-light": { "types": "./css-side-effect.d.ts", "default": "./concrete-signal-light/index.css" },
73
+ "./concrete-signal-light/tokens": { "types": "./css-side-effect.d.ts", "default": "./concrete-signal-light/tokens.css" },
74
+ "./concrete-signal-light/base": { "types": "./css-side-effect.d.ts", "default": "./concrete-signal-light/base.css" },
75
+ "./concrete-signal-light/components/*": { "types": "./css-side-effect.d.ts", "default": "./concrete-signal-light/components/*.css" },
76
+ "./amber-hearth": { "types": "./css-side-effect.d.ts", "default": "./amber-hearth/index.css" },
77
+ "./amber-hearth/tokens": { "types": "./css-side-effect.d.ts", "default": "./amber-hearth/tokens.css" },
78
+ "./amber-hearth/base": { "types": "./css-side-effect.d.ts", "default": "./amber-hearth/base.css" },
79
+ "./amber-hearth/components/*": { "types": "./css-side-effect.d.ts", "default": "./amber-hearth/components/*.css" },
80
+ "./amber-ember": { "types": "./css-side-effect.d.ts", "default": "./amber-ember/index.css" },
81
+ "./amber-ember/tokens": { "types": "./css-side-effect.d.ts", "default": "./amber-ember/tokens.css" },
82
+ "./amber-ember/base": { "types": "./css-side-effect.d.ts", "default": "./amber-ember/base.css" },
83
+ "./amber-ember/components/*": { "types": "./css-side-effect.d.ts", "default": "./amber-ember/components/*.css" },
84
+ "./mono-field": { "types": "./css-side-effect.d.ts", "default": "./mono-field/index.css" },
85
+ "./mono-field/tokens": { "types": "./css-side-effect.d.ts", "default": "./mono-field/tokens.css" },
86
+ "./mono-field/base": { "types": "./css-side-effect.d.ts", "default": "./mono-field/base.css" },
87
+ "./mono-field/components/*": { "types": "./css-side-effect.d.ts", "default": "./mono-field/components/*.css" }
59
88
  }
60
89
  }
package/rackbops-noir/base.css CHANGED
@@ -28,8 +28,8 @@
28
28
  }
29
29
 
30
30
  /* Heavy, balanced headlines with tight tracking — the studio's editorial voice. */
31
- :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(h1, h2, h3) {
32
- margin: 0;
31
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(h1, h2, h3, h4, h5, h6) {
32
+ margin: 0 0 var(--rb-space-3);
33
33
  font-family: var(--rb-font-display);
34
34
  font-weight: var(--rb-font-weight-bold);
35
35
  letter-spacing: var(--rb-heading-tracking);
@@ -37,6 +37,15 @@
37
37
  text-wrap: balance;
38
38
  }
39
39
 
40
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(p) {
41
+ margin: 0 0 var(--rb-space-3);
42
+ }
43
+
44
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(ul, ol) {
45
+ margin: 0 0 var(--rb-space-3);
46
+ padding-inline-start: var(--rb-space-4);
47
+ }
48
+
40
49
  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(a) {
41
50
  color: inherit;
42
51
  }
package/rackbops-noir/components/button.css CHANGED
@@ -20,6 +20,22 @@
20
20
  border-color var(--rb-transition) ease,
21
21
  color var(--rb-transition) ease;
22
22
  }
23
+ /* --sm: compact size for inline/table-row actions; drops to the theme's small
24
+ * type scale. The optional arrow inherits font-size, so it scales too. */
25
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn--sm {
26
+ padding: 7px 14px;
27
+ font-size: var(--rb-text-sm);
28
+ }
29
+ /* --icon: square icon-only hit target (>=2rem); pair with .rb-btn (+ an
30
+ * optional color variant) — inherits color/hover/focus from it. */
31
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-icon-btn {
32
+ padding: var(--rb-space-2);
33
+ min-width: 2rem;
34
+ min-height: 2rem;
35
+ gap: 0;
36
+ justify-content: center;
37
+ line-height: 1;
38
+ }
23
39
  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-btn:active {
24
40
  transform: translateY(1px);
25
41
  }