@rackbops/styles 0.1.7 → 0.1.8

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 (11) hide show
  1. package/amber-ember/base.css +5 -0
  2. package/amber-hearth/base.css +5 -0
  3. package/concrete-signal/base.css +5 -0
  4. package/concrete-signal-light/base.css +5 -0
  5. package/luminous-precision/base.css +5 -0
  6. package/mono-field/base.css +5 -0
  7. package/neon-butterfly/base.css +5 -0
  8. package/package.json +1 -1
  9. package/rackbops-noir/base.css +1 -1
  10. package/rackbops-studio/design.md +4 -0
  11. package/summer-cloud/base.css +5 -0
package/amber-ember/base.css CHANGED
@@ -55,6 +55,11 @@
55
55
  color: var(--rb-accent);
56
56
  }
57
57
 
58
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *):where(:focus-visible) {
59
+ outline: 2px solid var(--rb-accent);
60
+ outline-offset: 2px;
61
+ }
62
+
58
63
  :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *)::selection {
59
64
  background: var(--rb-accent);
60
65
  color: var(--rb-accent-fg);
package/amber-hearth/base.css CHANGED
@@ -55,6 +55,11 @@
55
55
  color: var(--rb-accent);
56
56
  }
57
57
 
58
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *):where(:focus-visible) {
59
+ outline: 2px solid var(--rb-accent);
60
+ outline-offset: 2px;
61
+ }
62
+
58
63
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *)::selection {
59
64
  background: var(--rb-accent);
60
65
  color: var(--rb-accent-fg);
package/concrete-signal/base.css CHANGED
@@ -51,6 +51,11 @@
51
51
  color: var(--rb-accent);
52
52
  }
53
53
 
54
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *):where(:focus-visible) {
55
+ outline: 2px solid var(--rb-accent);
56
+ outline-offset: 2px;
57
+ }
58
+
54
59
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *)::selection {
55
60
  background: var(--rb-accent);
56
61
  color: var(--rb-accent-fg);
package/concrete-signal-light/base.css CHANGED
@@ -51,6 +51,11 @@
51
51
  color: var(--rb-accent);
52
52
  }
53
53
 
54
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *):where(:focus-visible) {
55
+ outline: 2px solid var(--rb-accent);
56
+ outline-offset: 2px;
57
+ }
58
+
54
59
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *)::selection {
55
60
  background: var(--rb-accent);
56
61
  color: var(--rb-accent-fg);
package/luminous-precision/base.css CHANGED
@@ -64,6 +64,11 @@
64
64
  color: var(--rb-accent);
65
65
  }
66
66
 
67
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *):where(:focus-visible) {
68
+ outline: 2px solid var(--rb-accent);
69
+ outline-offset: 2px;
70
+ }
71
+
67
72
  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *)::selection {
68
73
  background: var(--rb-accent);
69
74
  color: var(--rb-bg);
package/mono-field/base.css CHANGED
@@ -53,6 +53,11 @@
53
53
  color: var(--rb-accent);
54
54
  }
55
55
 
56
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *):where(:focus-visible) {
57
+ outline: 2px solid var(--rb-accent);
58
+ outline-offset: 2px;
59
+ }
60
+
56
61
  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *)::selection {
57
62
  background: var(--rb-accent);
58
63
  color: var(--rb-accent-fg);
package/neon-butterfly/base.css CHANGED
@@ -61,6 +61,11 @@
61
61
  color: var(--rb-accent);
62
62
  }
63
63
 
64
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *):where(:focus-visible) {
65
+ outline: 2px solid var(--rb-accent);
66
+ outline-offset: 2px;
67
+ }
68
+
64
69
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *)::selection {
65
70
  background: var(--rb-accent);
66
71
  color: var(--rb-bg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rackbops/styles",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "description": "Rackbops design-system styles: tokens, base styles, and component classes per theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/rackbops-noir/base.css CHANGED
@@ -47,7 +47,7 @@
47
47
  }
48
48
 
49
49
  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(a) {
50
- color: inherit;
50
+ color: var(--rb-accent);
51
51
  }
52
52
 
53
53
  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *):where(:focus-visible) {
package/rackbops-studio/design.md CHANGED
@@ -85,6 +85,10 @@ consumers can compensate rather than discover it:
85
85
  kicker tag, the `/0N` principle markers, and the active nav link — all
86
86
  reproduced here. Treat accent-coloured text as decorative; never set body copy
87
87
  or the sole label of an interactive control in `--rb-accent`.
88
+ - **Bare (unclassed) `<a>` uses `color: inherit`, not `--rb-accent`** — for the
89
+ same reason above: accent-as-text is decorative-only here, and a bare link is
90
+ ordinary body copy, not a decorative flourish. `.rb-link`'s nav component
91
+ still carries its own accent-driven active state.
88
92
  - **`--rb-text-faint` (#8091a1) is below AA on white** — use it only for
89
93
  genuinely secondary meta (as the source does for footnotes), never for
90
94
  essential text. The shared `.rb-table` header therefore uses `--rb-text-soft`,
package/summer-cloud/base.css CHANGED
@@ -64,6 +64,11 @@
64
64
  color: var(--rb-accent);
65
65
  }
66
66
 
67
+ :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(:focus-visible) {
68
+ outline: 2px solid var(--rb-accent);
69
+ outline-offset: 2px;
70
+ }
71
+
67
72
  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *)::selection {
68
73
  background: var(--rb-accent);
69
74
  color: #fff;