@rackbops/styles 0.1.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 (117) hide show
  1. package/all.css +14 -0
  2. package/arcane-obsidian/base.css +46 -0
  3. package/arcane-obsidian/components/alert.css +28 -0
  4. package/arcane-obsidian/components/badge.css +33 -0
  5. package/arcane-obsidian/components/button.css +73 -0
  6. package/arcane-obsidian/components/card.css +14 -0
  7. package/arcane-obsidian/components/dialog.css +31 -0
  8. package/arcane-obsidian/components/eyebrow.css +12 -0
  9. package/arcane-obsidian/components/form.css +70 -0
  10. package/arcane-obsidian/components/link.css +46 -0
  11. package/arcane-obsidian/components/progress.css +40 -0
  12. package/arcane-obsidian/components/table.css +27 -0
  13. package/arcane-obsidian/components/tabs.css +45 -0
  14. package/arcane-obsidian/components/tabstrip.css +35 -0
  15. package/arcane-obsidian/components/wordmark.css +23 -0
  16. package/arcane-obsidian/design.md +133 -0
  17. package/arcane-obsidian/index.css +16 -0
  18. package/arcane-obsidian/tokens.css +81 -0
  19. package/arcane-parchment/base.css +46 -0
  20. package/arcane-parchment/components/alert.css +28 -0
  21. package/arcane-parchment/components/badge.css +33 -0
  22. package/arcane-parchment/components/button.css +75 -0
  23. package/arcane-parchment/components/card.css +14 -0
  24. package/arcane-parchment/components/dialog.css +31 -0
  25. package/arcane-parchment/components/eyebrow.css +12 -0
  26. package/arcane-parchment/components/form.css +70 -0
  27. package/arcane-parchment/components/link.css +46 -0
  28. package/arcane-parchment/components/progress.css +40 -0
  29. package/arcane-parchment/components/table.css +27 -0
  30. package/arcane-parchment/components/tabs.css +45 -0
  31. package/arcane-parchment/components/tabstrip.css +35 -0
  32. package/arcane-parchment/components/wordmark.css +23 -0
  33. package/arcane-parchment/design.md +89 -0
  34. package/arcane-parchment/index.css +16 -0
  35. package/arcane-parchment/tokens.css +78 -0
  36. package/luminous-precision/base.css +58 -0
  37. package/luminous-precision/components/alert.css +26 -0
  38. package/luminous-precision/components/badge.css +19 -0
  39. package/luminous-precision/components/button.css +88 -0
  40. package/luminous-precision/components/card.css +12 -0
  41. package/luminous-precision/components/dialog.css +31 -0
  42. package/luminous-precision/components/form.css +126 -0
  43. package/luminous-precision/components/link.css +46 -0
  44. package/luminous-precision/components/progress.css +41 -0
  45. package/luminous-precision/components/table.css +28 -0
  46. package/luminous-precision/components/tabs.css +33 -0
  47. package/luminous-precision/design.md +124 -0
  48. package/luminous-precision/index.css +13 -0
  49. package/luminous-precision/tokens.css +89 -0
  50. package/manifest.json +39 -0
  51. package/neon-butterfly/assets/butterfly-circuit.png +0 -0
  52. package/neon-butterfly/base.css +49 -0
  53. package/neon-butterfly/components/alert.css +26 -0
  54. package/neon-butterfly/components/badge.css +17 -0
  55. package/neon-butterfly/components/button.css +54 -0
  56. package/neon-butterfly/components/card.css +11 -0
  57. package/neon-butterfly/components/dialog.css +29 -0
  58. package/neon-butterfly/components/form.css +124 -0
  59. package/neon-butterfly/components/link.css +55 -0
  60. package/neon-butterfly/components/progress.css +41 -0
  61. package/neon-butterfly/components/table.css +27 -0
  62. package/neon-butterfly/components/tabs.css +33 -0
  63. package/neon-butterfly/design.md +103 -0
  64. package/neon-butterfly/index.css +13 -0
  65. package/neon-butterfly/tokens.css +89 -0
  66. package/package.json +60 -0
  67. package/rackbops-noir/base.css +53 -0
  68. package/rackbops-noir/components/alert.css +30 -0
  69. package/rackbops-noir/components/badge.css +39 -0
  70. package/rackbops-noir/components/button.css +79 -0
  71. package/rackbops-noir/components/card.css +37 -0
  72. package/rackbops-noir/components/dialog.css +33 -0
  73. package/rackbops-noir/components/eyebrow.css +21 -0
  74. package/rackbops-noir/components/form.css +70 -0
  75. package/rackbops-noir/components/link.css +31 -0
  76. package/rackbops-noir/components/principle.css +31 -0
  77. package/rackbops-noir/components/progress.css +40 -0
  78. package/rackbops-noir/components/rack.css +93 -0
  79. package/rackbops-noir/components/table.css +31 -0
  80. package/rackbops-noir/components/tabs.css +45 -0
  81. package/rackbops-noir/components/tag.css +20 -0
  82. package/rackbops-noir/design.md +85 -0
  83. package/rackbops-noir/index.css +17 -0
  84. package/rackbops-noir/tokens.css +66 -0
  85. package/rackbops-studio/assets/boppy.svg +17 -0
  86. package/rackbops-studio/base.css +53 -0
  87. package/rackbops-studio/components/alert.css +30 -0
  88. package/rackbops-studio/components/badge.css +39 -0
  89. package/rackbops-studio/components/button.css +78 -0
  90. package/rackbops-studio/components/card.css +37 -0
  91. package/rackbops-studio/components/dialog.css +33 -0
  92. package/rackbops-studio/components/eyebrow.css +21 -0
  93. package/rackbops-studio/components/form.css +70 -0
  94. package/rackbops-studio/components/link.css +31 -0
  95. package/rackbops-studio/components/principle.css +31 -0
  96. package/rackbops-studio/components/progress.css +40 -0
  97. package/rackbops-studio/components/rack.css +94 -0
  98. package/rackbops-studio/components/table.css +31 -0
  99. package/rackbops-studio/components/tabs.css +45 -0
  100. package/rackbops-studio/components/tag.css +20 -0
  101. package/rackbops-studio/design.md +157 -0
  102. package/rackbops-studio/index.css +17 -0
  103. package/rackbops-studio/tokens.css +77 -0
  104. package/summer-cloud/base.css +58 -0
  105. package/summer-cloud/components/alert.css +29 -0
  106. package/summer-cloud/components/badge.css +49 -0
  107. package/summer-cloud/components/button.css +109 -0
  108. package/summer-cloud/components/card.css +35 -0
  109. package/summer-cloud/components/dialog.css +30 -0
  110. package/summer-cloud/components/form.css +146 -0
  111. package/summer-cloud/components/link.css +60 -0
  112. package/summer-cloud/components/progress.css +43 -0
  113. package/summer-cloud/components/table.css +34 -0
  114. package/summer-cloud/components/tabs.css +38 -0
  115. package/summer-cloud/design.md +165 -0
  116. package/summer-cloud/index.css +13 -0
  117. package/summer-cloud/tokens.css +103 -0
package/all.css ADDED
@@ -0,0 +1,14 @@
1
+ /* @rackbops/styles — every theme in one import.
2
+ *
3
+ * Safe to load together: every rule in every theme is guarded by its
4
+ * data-rb-style attribute value, so nothing applies until an element opts in.
5
+ * Use this in apps that switch themes at runtime; single-theme apps should
6
+ * import just their theme's index.css.
7
+ */
8
+ @import "./arcane-obsidian/index.css";
9
+ @import "./arcane-parchment/index.css";
10
+ @import "./rackbops-studio/index.css";
11
+ @import "./rackbops-noir/index.css";
12
+ @import "./luminous-precision/index.css";
13
+ @import "./neon-butterfly/index.css";
14
+ @import "./summer-cloud/index.css";
package/arcane-obsidian/base.css ADDED
@@ -0,0 +1,46 @@
1
+ /* arcane-obsidian — base styles
2
+ * Scoped defaults. Requires tokens.css. Fonts are system stacks (system-ui +
3
+ * ui-monospace) — nothing to load; the console renders offline.
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="arcane-obsidian"]) {
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
+ font-variant-numeric: tabular-nums; /* counts/ages/sizes align in a column */
16
+ }
17
+
18
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *),
19
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *)::before,
20
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *)::after {
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ :where(html[data-rb-style="arcane-obsidian"]) body {
25
+ margin: 0;
26
+ min-height: 100vh;
27
+ background-color: var(--rb-bg);
28
+ color: var(--rb-text);
29
+ font-family: var(--rb-font-body);
30
+ font-weight: var(--rb-font-weight);
31
+ font-variant-numeric: tabular-nums;
32
+ }
33
+
34
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *):where(a) {
35
+ color: var(--rb-accent);
36
+ }
37
+
38
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *):where(:focus-visible) {
39
+ outline: 2px solid var(--rb-accent);
40
+ outline-offset: 2px;
41
+ }
42
+
43
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *)::selection {
44
+ background: var(--rb-accent);
45
+ color: var(--rb-accent-fg);
46
+ }
package/arcane-obsidian/components/alert.css ADDED
@@ -0,0 +1,28 @@
1
+ /* arcane-obsidian — alert
2
+ * A surface panel with a 3px left bar carrying the semantic colour. */
3
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).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
+ }
14
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-alert__title {
15
+ font-weight: var(--rb-font-weight-medium);
16
+ }
17
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-alert--info {
18
+ border-left-color: var(--rb-info);
19
+ }
20
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-alert--success {
21
+ border-left-color: var(--rb-success);
22
+ }
23
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-alert--warning {
24
+ border-left-color: var(--rb-warning);
25
+ }
26
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-alert--danger {
27
+ border-left-color: var(--rb-danger);
28
+ }
package/arcane-obsidian/components/badge.css ADDED
@@ -0,0 +1,33 @@
1
+ /* arcane-obsidian — badge / status chip
2
+ * A pill: a faint tint of its hue behind full-strength text. Severity and
3
+ * status are the one place colour beyond the accent is earned. */
4
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).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-mono);
11
+ font-size: 11px;
12
+ font-weight: var(--rb-font-weight-medium);
13
+ letter-spacing: var(--rb-label-tracking);
14
+ text-transform: uppercase;
15
+ background: var(--rb-accent-wash);
16
+ color: var(--rb-accent);
17
+ }
18
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-badge--info {
19
+ background: color-mix(in srgb, var(--rb-info) 16%, transparent);
20
+ color: var(--rb-info);
21
+ }
22
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-badge--success {
23
+ background: color-mix(in srgb, var(--rb-success) 16%, transparent);
24
+ color: var(--rb-success);
25
+ }
26
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-badge--warning {
27
+ background: color-mix(in srgb, var(--rb-warning) 16%, transparent);
28
+ color: var(--rb-warning);
29
+ }
30
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-badge--danger {
31
+ background: color-mix(in srgb, var(--rb-danger) 16%, transparent);
32
+ color: var(--rb-danger);
33
+ }
package/arcane-obsidian/components/button.css ADDED
@@ -0,0 +1,73 @@
1
+ /* arcane-obsidian — button
2
+ * Ghost by default; --primary is the one solid accent fill (dark ink for AA).
3
+ * Depth is luminance-first: no glow, no drop shadow on resting UI. */
4
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn {
5
+ display: inline-flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ gap: var(--rb-space-2);
9
+ padding: var(--rb-space-2) var(--rb-space-4);
10
+ background: var(--rb-surface-2);
11
+ border: 1px solid var(--rb-border);
12
+ border-radius: var(--rb-radius);
13
+ color: var(--rb-text);
14
+ font-family: var(--rb-font-body);
15
+ font-weight: var(--rb-font-weight-medium);
16
+ font-size: var(--rb-text-sm);
17
+ line-height: 1;
18
+ cursor: pointer;
19
+ transition:
20
+ border-color var(--rb-transition),
21
+ background var(--rb-transition),
22
+ color var(--rb-transition);
23
+ }
24
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:hover,
25
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:focus-visible {
26
+ border-color: var(--rb-accent);
27
+ outline: none;
28
+ }
29
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary {
30
+ background: var(--rb-accent);
31
+ border-color: var(--rb-accent);
32
+ color: var(--rb-accent-fg);
33
+ }
34
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary:hover,
35
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary:focus-visible {
36
+ background: color-mix(in srgb, var(--rb-accent) 88%, #fff);
37
+ border-color: color-mix(in srgb, var(--rb-accent) 88%, #fff);
38
+ }
39
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--accent {
40
+ background: var(--rb-accent-wash);
41
+ border-color: color-mix(in srgb, var(--rb-accent) 40%, var(--rb-border));
42
+ color: var(--rb-accent);
43
+ }
44
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger {
45
+ background: transparent;
46
+ border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
47
+ color: var(--rb-danger);
48
+ }
49
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger:hover,
50
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger:focus-visible {
51
+ border-color: var(--rb-danger);
52
+ }
53
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost {
54
+ background: transparent;
55
+ border-color: transparent;
56
+ color: var(--rb-text-soft);
57
+ }
58
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost:hover,
59
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost:focus-visible {
60
+ background: var(--rb-surface-2);
61
+ border-color: var(--rb-border);
62
+ color: var(--rb-text);
63
+ }
64
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:disabled {
65
+ opacity: 0.5;
66
+ cursor: not-allowed;
67
+ }
68
+
69
+ @media (prefers-reduced-motion: reduce) {
70
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn {
71
+ transition: none;
72
+ }
73
+ }
package/arcane-obsidian/components/card.css ADDED
@@ -0,0 +1,14 @@
1
+ /* arcane-obsidian — card
2
+ * Solid raised panel, hairline border, luminance-first elevation (no glass). */
3
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-card {
4
+ background: var(--rb-surface);
5
+ border: 1px solid var(--rb-border);
6
+ border-radius: var(--rb-radius-lg);
7
+ padding: var(--rb-space-5);
8
+ color: var(--rb-text);
9
+ box-shadow: var(--rb-shadow-sm);
10
+ }
11
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-card--raised {
12
+ background: var(--rb-surface-2);
13
+ box-shadow: var(--rb-shadow-lg);
14
+ }
package/arcane-obsidian/components/dialog.css ADDED
@@ -0,0 +1,31 @@
1
+ /* arcane-obsidian — dialog
2
+ * Native <dialog>: a raised obsidian pane over a blurred backdrop. */
3
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-dialog {
4
+ padding: 0;
5
+ border: 1px solid var(--rb-border-strong);
6
+ border-radius: var(--rb-radius-lg);
7
+ background: var(--rb-surface);
8
+ color: var(--rb-text);
9
+ box-shadow: var(--rb-shadow-lg);
10
+ max-width: min(92vw, 34rem);
11
+ }
12
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-dialog::backdrop {
13
+ background: rgba(8, 11, 16, 0.6);
14
+ backdrop-filter: blur(var(--rb-blur));
15
+ }
16
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-dialog__body {
17
+ padding: var(--rb-space-5);
18
+ }
19
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-dialog__title {
20
+ margin: 0 0 var(--rb-space-3);
21
+ font-family: var(--rb-font-display);
22
+ font-weight: var(--rb-font-weight-medium);
23
+ letter-spacing: var(--rb-heading-tracking);
24
+ }
25
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-dialog__actions {
26
+ display: flex;
27
+ justify-content: flex-end;
28
+ gap: var(--rb-space-2);
29
+ padding: var(--rb-space-3) var(--rb-space-5);
30
+ border-top: 1px solid var(--rb-border);
31
+ }
package/arcane-obsidian/components/eyebrow.css ADDED
@@ -0,0 +1,12 @@
1
+ /* arcane-obsidian — eyebrow (section / kicker label)
2
+ * Small mono uppercase label in the accent, wide-tracked. Subtler than the
3
+ * studio eyebrow: no leading rule, this is a data console. */
4
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-eyebrow {
5
+ display: inline-block;
6
+ font-family: var(--rb-font-mono);
7
+ font-size: 11px;
8
+ font-weight: var(--rb-font-weight-medium);
9
+ letter-spacing: var(--rb-label-tracking);
10
+ text-transform: uppercase;
11
+ color: var(--rb-accent);
12
+ }
package/arcane-obsidian/components/form.css ADDED
@@ -0,0 +1,70 @@
1
+ /* arcane-obsidian — form controls
2
+ * Sunken fields on the obsidian ground; focus swaps the border for the accent
3
+ * plus a faint accent ring. checked/accent states use the accent, not glow. */
4
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-field {
5
+ display: flex;
6
+ flex-direction: column;
7
+ gap: var(--rb-space-1);
8
+ }
9
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-label {
10
+ font-size: var(--rb-text-sm);
11
+ font-weight: var(--rb-font-weight-medium);
12
+ color: var(--rb-text-soft);
13
+ }
14
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-input,
15
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-textarea,
16
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-select {
17
+ width: 100%;
18
+ padding: var(--rb-space-2) var(--rb-space-3);
19
+ background: var(--rb-surface-sunken);
20
+ border: 1px solid var(--rb-border);
21
+ border-radius: var(--rb-radius);
22
+ color: var(--rb-text);
23
+ font-family: var(--rb-font-body);
24
+ font-size: var(--rb-text-sm);
25
+ transition:
26
+ border-color var(--rb-transition),
27
+ box-shadow var(--rb-transition);
28
+ }
29
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-textarea {
30
+ min-height: 5rem;
31
+ resize: vertical;
32
+ }
33
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-input:focus-visible,
34
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-textarea:focus-visible,
35
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-select:focus-visible {
36
+ outline: none;
37
+ border-color: var(--rb-accent);
38
+ box-shadow: 0 0 0 3px var(--rb-accent-wash);
39
+ }
40
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-input::placeholder,
41
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-textarea::placeholder {
42
+ color: var(--rb-text-faint);
43
+ }
44
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-choice {
45
+ display: inline-flex;
46
+ align-items: center;
47
+ gap: var(--rb-space-2);
48
+ font-size: var(--rb-text-sm);
49
+ color: var(--rb-text);
50
+ cursor: pointer;
51
+ }
52
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-checkbox,
53
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-radio,
54
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-switch {
55
+ accent-color: var(--rb-accent);
56
+ width: 1rem;
57
+ height: 1rem;
58
+ cursor: pointer;
59
+ }
60
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-switch {
61
+ width: 2rem;
62
+ }
63
+
64
+ @media (prefers-reduced-motion: reduce) {
65
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-input,
66
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-textarea,
67
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-select {
68
+ transition: none;
69
+ }
70
+ }
package/arcane-obsidian/components/link.css ADDED
@@ -0,0 +1,46 @@
1
+ /* arcane-obsidian — nav link (tree/sidebar row)
2
+ * A list row; hover fills to surface-2 and lights a 2px accent bar on the left
3
+ * edge; active carries a faint accent wash. Mirrors the console's tree rows. */
4
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link {
5
+ position: relative;
6
+ display: flex;
7
+ align-items: center;
8
+ gap: var(--rb-space-2);
9
+ padding: var(--rb-space-2) var(--rb-space-3);
10
+ border-radius: var(--rb-radius);
11
+ color: var(--rb-text);
12
+ font-size: var(--rb-text-sm);
13
+ text-decoration: none;
14
+ cursor: pointer;
15
+ transition:
16
+ background var(--rb-transition),
17
+ color var(--rb-transition);
18
+ }
19
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link:hover {
20
+ background: var(--rb-surface-2);
21
+ }
22
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link::before {
23
+ content: "";
24
+ position: absolute;
25
+ left: 0;
26
+ top: 6px;
27
+ bottom: 6px;
28
+ width: 2px;
29
+ border-radius: 2px;
30
+ background: transparent;
31
+ transition: background var(--rb-transition);
32
+ }
33
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link:hover::before,
34
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link.rb-link--active::before {
35
+ background: var(--rb-accent);
36
+ }
37
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link.rb-link--active {
38
+ background: var(--rb-accent-wash);
39
+ color: var(--rb-accent);
40
+ }
41
+
42
+ @media (prefers-reduced-motion: reduce) {
43
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link {
44
+ transition: none;
45
+ }
46
+ }
package/arcane-obsidian/components/progress.css ADDED
@@ -0,0 +1,40 @@
1
+ /* arcane-obsidian — progress + spinner
2
+ * A sunken trough with an accent fill; the spinner is a single accent arc. */
3
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-progress {
4
+ appearance: none;
5
+ width: 100%;
6
+ height: 6px;
7
+ border: 0;
8
+ border-radius: var(--rb-radius-pill);
9
+ overflow: hidden;
10
+ background: var(--rb-surface-sunken);
11
+ }
12
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-progress::-webkit-progress-bar {
13
+ background: var(--rb-surface-sunken);
14
+ }
15
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-progress::-webkit-progress-value {
16
+ background: var(--rb-accent);
17
+ }
18
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-progress::-moz-progress-bar {
19
+ background: var(--rb-accent);
20
+ }
21
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-spinner {
22
+ display: inline-block;
23
+ width: 1.25rem;
24
+ height: 1.25rem;
25
+ border: 2px solid var(--rb-border-strong);
26
+ border-top-color: var(--rb-accent);
27
+ border-radius: 50%;
28
+ animation: rb-obsidian-spin 0.7s linear infinite;
29
+ }
30
+ @keyframes rb-obsidian-spin {
31
+ to {
32
+ transform: rotate(360deg);
33
+ }
34
+ }
35
+
36
+ @media (prefers-reduced-motion: reduce) {
37
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-spinner {
38
+ animation-duration: 2s;
39
+ }
40
+ }
package/arcane-obsidian/components/table.css ADDED
@@ -0,0 +1,27 @@
1
+ /* arcane-obsidian — table
2
+ * Dense data table: a header rule, tabular numerals, row hover to surface-2. */
3
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table {
4
+ width: 100%;
5
+ border-collapse: collapse;
6
+ font-size: var(--rb-text-sm);
7
+ font-variant-numeric: tabular-nums;
8
+ }
9
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table th {
10
+ text-align: left;
11
+ padding: var(--rb-space-2) var(--rb-space-3);
12
+ border-bottom: 1px solid var(--rb-border-strong);
13
+ color: var(--rb-text-faint);
14
+ font-weight: var(--rb-font-weight-medium);
15
+ }
16
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table td {
17
+ padding: var(--rb-space-2) var(--rb-space-3);
18
+ border-bottom: 1px solid var(--rb-border);
19
+ color: var(--rb-text);
20
+ }
21
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table tbody tr:hover td {
22
+ background: var(--rb-surface-2);
23
+ }
24
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-table .rb-num {
25
+ text-align: right;
26
+ font-variant-numeric: tabular-nums;
27
+ }
package/arcane-obsidian/components/tabs.css ADDED
@@ -0,0 +1,45 @@
1
+ /* arcane-obsidian — tabs
2
+ * The active tab carries accent text + a faint wash, and the ONE gradient is
3
+ * rationed here as a 2px underline indicator — the console's signature flair. */
4
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabs {
5
+ display: flex;
6
+ gap: var(--rb-space-2);
7
+ border-bottom: 1px solid var(--rb-border);
8
+ }
9
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab {
10
+ position: relative;
11
+ padding: var(--rb-space-2) var(--rb-space-4);
12
+ background: transparent;
13
+ border: 0;
14
+ color: var(--rb-text-soft);
15
+ font-family: var(--rb-font-body);
16
+ font-weight: var(--rb-font-weight-medium);
17
+ font-size: var(--rb-text-sm);
18
+ cursor: pointer;
19
+ transition: color var(--rb-transition);
20
+ }
21
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab:hover {
22
+ color: var(--rb-text);
23
+ }
24
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab.rb-tab--active {
25
+ color: var(--rb-accent);
26
+ }
27
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab.rb-tab--active::after {
28
+ content: "";
29
+ position: absolute;
30
+ left: var(--rb-space-3);
31
+ right: var(--rb-space-3);
32
+ bottom: -1px;
33
+ height: 2px;
34
+ border-radius: 2px 2px 0 0;
35
+ background: var(--rb-accent-grad);
36
+ }
37
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabpanel {
38
+ padding: var(--rb-space-4) 0;
39
+ }
40
+
41
+ @media (prefers-reduced-motion: reduce) {
42
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab {
43
+ transition: none;
44
+ }
45
+ }
package/arcane-obsidian/components/tabstrip.css ADDED
@@ -0,0 +1,35 @@
1
+ /* arcane-obsidian — tabstrip (theme extra)
2
+ * The console's top-level view nav: natural-width bordered pill buttons.
3
+ * The active button gets accent text + a faint wash and an accent-tinted
4
+ * border; distinct from the text-underline .rb-tabs used inside a panel. */
5
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip {
6
+ display: flex;
7
+ gap: var(--rb-space-2);
8
+ padding: var(--rb-space-2) 0;
9
+ }
10
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip__tab {
11
+ position: relative;
12
+ padding: var(--rb-space-2) var(--rb-space-4);
13
+ background: var(--rb-surface-2);
14
+ border: 1px solid var(--rb-border);
15
+ border-radius: var(--rb-radius);
16
+ color: var(--rb-text);
17
+ font-size: var(--rb-text-sm);
18
+ font-weight: var(--rb-font-weight-medium);
19
+ cursor: pointer;
20
+ transition: border-color var(--rb-transition);
21
+ }
22
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip__tab:hover {
23
+ border-color: var(--rb-accent);
24
+ }
25
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip__tab.rb-tabstrip__tab--active {
26
+ color: var(--rb-accent);
27
+ border-color: color-mix(in srgb, var(--rb-accent) 40%, var(--rb-border));
28
+ background: var(--rb-accent-wash);
29
+ }
30
+
31
+ @media (prefers-reduced-motion: reduce) {
32
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tabstrip__tab {
33
+ transition: none;
34
+ }
35
+ }
package/arcane-obsidian/components/wordmark.css ADDED
@@ -0,0 +1,23 @@
1
+ /* arcane-obsidian — wordmark (theme extra)
2
+ * The brand voice: a mono display h1 with the ONE gradient clipped into the
3
+ * text, and a solid-accent spark mark that stays un-clipped. This and the
4
+ * active tab underline are the only two places the gradient is spent. */
5
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-wordmark {
6
+ display: inline-flex;
7
+ align-items: baseline;
8
+ gap: 0.4em;
9
+ margin: 0;
10
+ font-family: var(--rb-font-display);
11
+ font-weight: var(--rb-font-weight-medium);
12
+ font-size: 15px;
13
+ letter-spacing: var(--rb-heading-tracking);
14
+ background-image: var(--rb-accent-grad);
15
+ background-clip: text;
16
+ -webkit-background-clip: text;
17
+ color: transparent;
18
+ -webkit-text-fill-color: transparent;
19
+ }
20
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-wordmark__spark {
21
+ color: var(--rb-accent);
22
+ -webkit-text-fill-color: var(--rb-accent);
23
+ }