@rackbops/styles 0.1.5 → 0.1.7

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 (45) hide show
  1. package/amber-ember/components/button.css +4 -4
  2. package/amber-ember/components/link.css +4 -2
  3. package/amber-ember/components/stepper.css +6 -3
  4. package/amber-ember/components/tabs.css +4 -2
  5. package/amber-hearth/components/button.css +4 -4
  6. package/amber-hearth/components/link.css +4 -2
  7. package/amber-hearth/components/stepper.css +6 -3
  8. package/amber-hearth/components/tabs.css +4 -2
  9. package/arcane-obsidian/components/button.css +4 -4
  10. package/arcane-obsidian/components/link.css +4 -2
  11. package/arcane-obsidian/components/stepper.css +6 -3
  12. package/arcane-obsidian/components/tabs.css +4 -2
  13. package/arcane-parchment/components/button.css +4 -4
  14. package/arcane-parchment/components/link.css +4 -2
  15. package/arcane-parchment/components/stepper.css +6 -3
  16. package/arcane-parchment/components/tabs.css +4 -2
  17. package/concrete-signal/components/button.css +3 -3
  18. package/concrete-signal/components/link.css +4 -2
  19. package/concrete-signal/components/stepper.css +6 -3
  20. package/concrete-signal-light/components/button.css +3 -3
  21. package/concrete-signal-light/components/link.css +4 -2
  22. package/concrete-signal-light/components/stepper.css +6 -3
  23. package/contract.json +7 -41
  24. package/luminous-precision/components/button.css +6 -6
  25. package/luminous-precision/components/link.css +2 -1
  26. package/luminous-precision/components/stepper.css +6 -3
  27. package/mono-field/components/button.css +5 -5
  28. package/mono-field/components/link.css +4 -2
  29. package/mono-field/components/stepper.css +6 -3
  30. package/neon-butterfly/components/button.css +3 -3
  31. package/neon-butterfly/components/dialog.css +1 -1
  32. package/neon-butterfly/components/link.css +4 -2
  33. package/neon-butterfly/components/stepper.css +6 -3
  34. package/package.json +1 -1
  35. package/rackbops-noir/components/button.css +5 -5
  36. package/rackbops-noir/components/link.css +2 -1
  37. package/rackbops-noir/components/stepper.css +6 -3
  38. package/rackbops-noir/components/tabs.css +4 -2
  39. package/rackbops-studio/components/button.css +5 -5
  40. package/rackbops-studio/components/link.css +2 -1
  41. package/rackbops-studio/components/stepper.css +6 -3
  42. package/rackbops-studio/components/tabs.css +4 -2
  43. package/summer-cloud/components/button.css +6 -6
  44. package/summer-cloud/components/dialog.css +1 -1
  45. package/summer-cloud/components/stepper.css +6 -3
package/amber-ember/components/button.css CHANGED
@@ -38,7 +38,7 @@
38
38
  justify-content: center;
39
39
  line-height: 1;
40
40
  }
41
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:hover,
41
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:not(:disabled):hover,
42
42
  :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn:focus-visible {
43
43
  border-color: var(--rb-border-strong);
44
44
  outline: none;
@@ -49,7 +49,7 @@
49
49
  color: var(--rb-accent-fg);
50
50
  box-shadow: var(--rb-shadow-sm);
51
51
  }
52
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary:hover,
52
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary:not(:disabled):hover,
53
53
  :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--primary:focus-visible {
54
54
  box-shadow: var(--rb-shadow-lg);
55
55
  }
@@ -63,7 +63,7 @@
63
63
  border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
64
64
  color: var(--rb-danger);
65
65
  }
66
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger:hover,
66
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger:not(:disabled):hover,
67
67
  :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--danger:focus-visible {
68
68
  border-color: var(--rb-danger);
69
69
  }
@@ -72,7 +72,7 @@
72
72
  border-color: transparent;
73
73
  color: var(--rb-text-soft);
74
74
  }
75
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost:hover,
75
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost:not(:disabled):hover,
76
76
  :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-btn--ghost:focus-visible {
77
77
  background: var(--rb-surface-2);
78
78
  border-color: var(--rb-border);
package/amber-ember/components/link.css CHANGED
@@ -32,10 +32,12 @@
32
32
  transition: background var(--rb-transition);
33
33
  }
34
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 {
35
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link.rb-link--active::before,
36
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link[aria-current="page"]::before {
36
37
  background: var(--rb-accent);
37
38
  }
38
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link.rb-link--active {
39
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link.rb-link--active,
40
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-link[aria-current="page"] {
39
41
  background: var(--rb-accent-wash);
40
42
  color: var(--rb-accent);
41
43
  }
package/amber-ember/components/stepper.css CHANGED
@@ -42,7 +42,8 @@
42
42
  transition: background-color var(--rb-transition);
43
43
  }
44
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 {
45
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
46
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step[aria-current="step"]::before {
46
47
  background: var(--rb-accent);
47
48
  }
48
49
  :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__node {
@@ -69,13 +70,15 @@
69
70
  :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--complete .rb-stepper__label {
70
71
  color: var(--rb-text);
71
72
  }
72
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--current .rb-stepper__node {
73
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--current .rb-stepper__node,
74
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
73
75
  background: var(--rb-surface);
74
76
  border-color: var(--rb-accent);
75
77
  color: var(--rb-accent);
76
78
  box-shadow: var(--rb-shadow-lg);
77
79
  }
78
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--current .rb-stepper__label {
80
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper--current .rb-stepper__label,
81
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
79
82
  color: var(--rb-accent);
80
83
  font-weight: var(--rb-font-weight-medium);
81
84
  }
package/amber-ember/components/tabs.css CHANGED
@@ -22,10 +22,12 @@
22
22
  :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab:hover {
23
23
  color: var(--rb-text);
24
24
  }
25
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab.rb-tab--active {
25
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab.rb-tab--active,
26
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab[aria-selected="true"] {
26
27
  color: var(--rb-accent);
27
28
  }
28
- :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab.rb-tab--active::after {
29
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab.rb-tab--active::after,
30
+ :where([data-rb-style="amber-ember"], [data-rb-style="amber-ember"] *).rb-tab[aria-selected="true"]::after {
29
31
  content: "";
30
32
  position: absolute;
31
33
  left: var(--rb-space-3);
package/amber-hearth/components/button.css CHANGED
@@ -38,7 +38,7 @@
38
38
  justify-content: center;
39
39
  line-height: 1;
40
40
  }
41
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:hover,
41
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:not(:disabled):hover,
42
42
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn:focus-visible {
43
43
  border-color: var(--rb-border-strong);
44
44
  outline: none;
@@ -49,7 +49,7 @@
49
49
  color: var(--rb-accent-fg);
50
50
  box-shadow: var(--rb-shadow-sm);
51
51
  }
52
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary:hover,
52
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary:not(:disabled):hover,
53
53
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--primary:focus-visible {
54
54
  box-shadow: var(--rb-shadow-lg);
55
55
  }
@@ -63,7 +63,7 @@
63
63
  border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
64
64
  color: var(--rb-danger);
65
65
  }
66
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger:hover,
66
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger:not(:disabled):hover,
67
67
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--danger:focus-visible {
68
68
  border-color: var(--rb-danger);
69
69
  }
@@ -72,7 +72,7 @@
72
72
  border-color: transparent;
73
73
  color: var(--rb-text-soft);
74
74
  }
75
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost:hover,
75
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost:not(:disabled):hover,
76
76
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-btn--ghost:focus-visible {
77
77
  background: var(--rb-surface-2);
78
78
  border-color: var(--rb-border);
package/amber-hearth/components/link.css CHANGED
@@ -32,10 +32,12 @@
32
32
  transition: background var(--rb-transition);
33
33
  }
34
34
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link:hover::before,
35
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link.rb-link--active::before {
35
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link.rb-link--active::before,
36
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link[aria-current="page"]::before {
36
37
  background: var(--rb-accent);
37
38
  }
38
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link.rb-link--active {
39
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link.rb-link--active,
40
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-link[aria-current="page"] {
39
41
  background: var(--rb-accent-wash);
40
42
  color: var(--rb-accent);
41
43
  }
package/amber-hearth/components/stepper.css CHANGED
@@ -42,7 +42,8 @@
42
42
  transition: background-color var(--rb-transition);
43
43
  }
44
44
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
45
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
45
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
46
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step[aria-current="step"]::before {
46
47
  background: var(--rb-accent);
47
48
  }
48
49
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__node {
@@ -69,13 +70,15 @@
69
70
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--complete .rb-stepper__label {
70
71
  color: var(--rb-text);
71
72
  }
72
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--current .rb-stepper__node {
73
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--current .rb-stepper__node,
74
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
73
75
  background: var(--rb-surface);
74
76
  border-color: var(--rb-accent);
75
77
  color: var(--rb-accent);
76
78
  box-shadow: var(--rb-shadow-lg);
77
79
  }
78
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--current .rb-stepper__label {
80
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper--current .rb-stepper__label,
81
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
79
82
  color: var(--rb-accent);
80
83
  font-weight: var(--rb-font-weight-medium);
81
84
  }
package/amber-hearth/components/tabs.css CHANGED
@@ -22,10 +22,12 @@
22
22
  :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab:hover {
23
23
  color: var(--rb-text);
24
24
  }
25
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab.rb-tab--active {
25
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab.rb-tab--active,
26
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab[aria-selected="true"] {
26
27
  color: var(--rb-accent);
27
28
  }
28
- :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab.rb-tab--active::after {
29
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab.rb-tab--active::after,
30
+ :where([data-rb-style="amber-hearth"], [data-rb-style="amber-hearth"] *).rb-tab[aria-selected="true"]::after {
29
31
  content: "";
30
32
  position: absolute;
31
33
  left: var(--rb-space-3);
package/arcane-obsidian/components/button.css CHANGED
@@ -36,7 +36,7 @@
36
36
  justify-content: center;
37
37
  line-height: 1;
38
38
  }
39
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:hover,
39
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:not(:disabled):hover,
40
40
  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn:focus-visible {
41
41
  border-color: var(--rb-accent);
42
42
  outline: none;
@@ -46,7 +46,7 @@
46
46
  border-color: var(--rb-accent);
47
47
  color: var(--rb-accent-fg);
48
48
  }
49
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary:hover,
49
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary:not(:disabled):hover,
50
50
  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--primary:focus-visible {
51
51
  background: color-mix(in srgb, var(--rb-accent) 88%, #fff);
52
52
  border-color: color-mix(in srgb, var(--rb-accent) 88%, #fff);
@@ -61,7 +61,7 @@
61
61
  border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
62
62
  color: var(--rb-danger);
63
63
  }
64
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger:hover,
64
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger:not(:disabled):hover,
65
65
  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--danger:focus-visible {
66
66
  border-color: var(--rb-danger);
67
67
  }
@@ -70,7 +70,7 @@
70
70
  border-color: transparent;
71
71
  color: var(--rb-text-soft);
72
72
  }
73
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost:hover,
73
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost:not(:disabled):hover,
74
74
  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-btn--ghost:focus-visible {
75
75
  background: var(--rb-surface-2);
76
76
  border-color: var(--rb-border);
package/arcane-obsidian/components/link.css CHANGED
@@ -31,10 +31,12 @@
31
31
  transition: background var(--rb-transition);
32
32
  }
33
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 {
34
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link.rb-link--active::before,
35
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link[aria-current="page"]::before {
35
36
  background: var(--rb-accent);
36
37
  }
37
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link.rb-link--active {
38
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link.rb-link--active,
39
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-link[aria-current="page"] {
38
40
  background: var(--rb-accent-wash);
39
41
  color: var(--rb-accent);
40
42
  }
package/arcane-obsidian/components/stepper.css CHANGED
@@ -42,7 +42,8 @@
42
42
  transition: background-color var(--rb-transition);
43
43
  }
44
44
  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
45
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
45
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
46
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step[aria-current="step"]::before {
46
47
  background: var(--rb-accent);
47
48
  }
48
49
  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__node {
@@ -69,13 +70,15 @@
69
70
  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--complete .rb-stepper__label {
70
71
  color: var(--rb-text);
71
72
  }
72
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--current .rb-stepper__node {
73
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--current .rb-stepper__node,
74
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
73
75
  background: var(--rb-surface);
74
76
  border-color: var(--rb-accent);
75
77
  color: var(--rb-accent);
76
78
  box-shadow: var(--rb-shadow-lg);
77
79
  }
78
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--current .rb-stepper__label {
80
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper--current .rb-stepper__label,
81
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
79
82
  color: var(--rb-accent);
80
83
  font-weight: var(--rb-font-weight-medium);
81
84
  }
package/arcane-obsidian/components/tabs.css CHANGED
@@ -21,10 +21,12 @@
21
21
  :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab:hover {
22
22
  color: var(--rb-text);
23
23
  }
24
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab.rb-tab--active {
24
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab.rb-tab--active,
25
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab[aria-selected="true"] {
25
26
  color: var(--rb-accent);
26
27
  }
27
- :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab.rb-tab--active::after {
28
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab.rb-tab--active::after,
29
+ :where([data-rb-style="arcane-obsidian"], [data-rb-style="arcane-obsidian"] *).rb-tab[aria-selected="true"]::after {
28
30
  content: "";
29
31
  position: absolute;
30
32
  left: var(--rb-space-3);
package/arcane-parchment/components/button.css CHANGED
@@ -36,7 +36,7 @@
36
36
  justify-content: center;
37
37
  line-height: 1;
38
38
  }
39
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:hover,
39
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:not(:disabled):hover,
40
40
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn:focus-visible {
41
41
  border-color: var(--rb-accent);
42
42
  outline: none;
@@ -46,7 +46,7 @@
46
46
  border-color: var(--rb-accent);
47
47
  color: var(--rb-accent-fg);
48
48
  }
49
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary:hover,
49
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary:not(:disabled):hover,
50
50
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--primary:focus-visible {
51
51
  /* Darken the fill on a light ground (mix toward --rb-text) so the white label
52
52
  stays AA — lightening it, as the dark sibling does, would drop it to 4.37:1. */
@@ -63,7 +63,7 @@
63
63
  border-color: color-mix(in srgb, var(--rb-danger) 40%, var(--rb-border));
64
64
  color: var(--rb-danger);
65
65
  }
66
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger:hover,
66
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger:not(:disabled):hover,
67
67
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--danger:focus-visible {
68
68
  border-color: var(--rb-danger);
69
69
  }
@@ -72,7 +72,7 @@
72
72
  border-color: transparent;
73
73
  color: var(--rb-text-soft);
74
74
  }
75
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost:hover,
75
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost:not(:disabled):hover,
76
76
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-btn--ghost:focus-visible {
77
77
  background: var(--rb-surface-2);
78
78
  border-color: var(--rb-border);
package/arcane-parchment/components/link.css CHANGED
@@ -31,10 +31,12 @@
31
31
  transition: background var(--rb-transition);
32
32
  }
33
33
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link:hover::before,
34
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link.rb-link--active::before {
34
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link.rb-link--active::before,
35
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link[aria-current="page"]::before {
35
36
  background: var(--rb-accent);
36
37
  }
37
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link.rb-link--active {
38
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link.rb-link--active,
39
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-link[aria-current="page"] {
38
40
  background: var(--rb-accent-wash);
39
41
  color: var(--rb-accent);
40
42
  }
package/arcane-parchment/components/stepper.css CHANGED
@@ -42,7 +42,8 @@
42
42
  transition: background-color var(--rb-transition);
43
43
  }
44
44
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
45
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
45
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
46
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step[aria-current="step"]::before {
46
47
  background: var(--rb-accent);
47
48
  }
48
49
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__node {
@@ -69,13 +70,15 @@
69
70
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper--complete .rb-stepper__label {
70
71
  color: var(--rb-text);
71
72
  }
72
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper--current .rb-stepper__node {
73
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper--current .rb-stepper__node,
74
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
73
75
  background: var(--rb-surface);
74
76
  border-color: var(--rb-accent);
75
77
  color: var(--rb-accent);
76
78
  box-shadow: var(--rb-shadow-lg);
77
79
  }
78
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper--current .rb-stepper__label {
80
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper--current .rb-stepper__label,
81
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
79
82
  color: var(--rb-accent);
80
83
  font-weight: var(--rb-font-weight-medium);
81
84
  }
package/arcane-parchment/components/tabs.css CHANGED
@@ -21,10 +21,12 @@
21
21
  :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab:hover {
22
22
  color: var(--rb-text);
23
23
  }
24
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab.rb-tab--active {
24
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab.rb-tab--active,
25
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab[aria-selected="true"] {
25
26
  color: var(--rb-accent);
26
27
  }
27
- :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab.rb-tab--active::after {
28
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab.rb-tab--active::after,
29
+ :where([data-rb-style="arcane-parchment"], [data-rb-style="arcane-parchment"] *).rb-tab[aria-selected="true"]::after {
28
30
  content: "";
29
31
  position: absolute;
30
32
  left: var(--rb-space-3);
package/concrete-signal/components/button.css CHANGED
@@ -40,7 +40,7 @@
40
40
  justify-content: center;
41
41
  line-height: 1;
42
42
  }
43
- :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:hover,
43
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:not(:disabled):hover,
44
44
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn:focus-visible {
45
45
  border-color: var(--rb-accent);
46
46
  color: var(--rb-accent);
@@ -55,7 +55,7 @@
55
55
  transform var(--rb-transition),
56
56
  box-shadow var(--rb-transition);
57
57
  }
58
- :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:hover,
58
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:not(:disabled):hover,
59
59
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:focus-visible,
60
60
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--primary:active {
61
61
  border-color: var(--rb-accent);
@@ -79,7 +79,7 @@
79
79
  border-color: transparent;
80
80
  color: var(--rb-text-soft);
81
81
  }
82
- :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost:hover,
82
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost:not(:disabled):hover,
83
83
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-btn--ghost:focus-visible {
84
84
  background: var(--rb-surface-2);
85
85
  border-color: var(--rb-border);
package/concrete-signal/components/link.css CHANGED
@@ -28,10 +28,12 @@
28
28
  background: var(--rb-surface-2);
29
29
  }
30
30
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link:hover::before,
31
- :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link.rb-link--active::before {
31
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link.rb-link--active::before,
32
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link[aria-current="page"]::before {
32
33
  background: var(--rb-accent);
33
34
  }
34
- :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link.rb-link--active {
35
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link.rb-link--active,
36
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link[aria-current="page"] {
35
37
  background: var(--rb-accent-wash);
36
38
  color: var(--rb-accent);
37
39
  font-weight: var(--rb-font-weight-bold);
package/concrete-signal/components/stepper.css CHANGED
@@ -42,7 +42,8 @@
42
42
  z-index: -1;
43
43
  }
44
44
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
45
- :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
45
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
46
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__step[aria-current="step"]::before {
46
47
  background: var(--rb-accent);
47
48
  }
48
49
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__node {
@@ -71,13 +72,15 @@
71
72
  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper--complete .rb-stepper__label {
72
73
  color: var(--rb-text);
73
74
  }
74
- :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper--current .rb-stepper__node {
75
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper--current .rb-stepper__node,
76
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
75
77
  background: var(--rb-surface);
76
78
  border-color: var(--rb-accent);
77
79
  color: var(--rb-accent);
78
80
  box-shadow: var(--rb-shadow-lg);
79
81
  }
80
- :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper--current .rb-stepper__label {
82
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper--current .rb-stepper__label,
83
+ :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
81
84
  color: var(--rb-accent);
82
85
  font-weight: var(--rb-font-weight-bold);
83
86
  }
package/concrete-signal-light/components/button.css CHANGED
@@ -40,7 +40,7 @@
40
40
  justify-content: center;
41
41
  line-height: 1;
42
42
  }
43
- :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:hover,
43
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:not(:disabled):hover,
44
44
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn:focus-visible {
45
45
  border-color: var(--rb-accent);
46
46
  color: var(--rb-accent);
@@ -55,7 +55,7 @@
55
55
  transform var(--rb-transition),
56
56
  box-shadow var(--rb-transition);
57
57
  }
58
- :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:hover,
58
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:not(:disabled):hover,
59
59
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:focus-visible,
60
60
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--primary:active {
61
61
  border-color: var(--rb-accent);
@@ -79,7 +79,7 @@
79
79
  border-color: transparent;
80
80
  color: var(--rb-text-soft);
81
81
  }
82
- :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--ghost:hover,
82
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--ghost:not(:disabled):hover,
83
83
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-btn--ghost:focus-visible {
84
84
  background: var(--rb-surface-2);
85
85
  border-color: var(--rb-border);
package/concrete-signal-light/components/link.css CHANGED
@@ -28,10 +28,12 @@
28
28
  background: var(--rb-surface-2);
29
29
  }
30
30
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link:hover::before,
31
- :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link.rb-link--active::before {
31
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link.rb-link--active::before,
32
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link[aria-current="page"]::before {
32
33
  background: var(--rb-accent);
33
34
  }
34
- :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link.rb-link--active {
35
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link.rb-link--active,
36
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-link[aria-current="page"] {
35
37
  background: var(--rb-accent-wash);
36
38
  color: var(--rb-accent);
37
39
  font-weight: var(--rb-font-weight-bold);
package/concrete-signal-light/components/stepper.css CHANGED
@@ -43,7 +43,8 @@
43
43
  z-index: -1;
44
44
  }
45
45
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
46
- :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
46
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
47
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__step[aria-current="step"]::before {
47
48
  background: var(--rb-accent);
48
49
  }
49
50
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__node {
@@ -72,13 +73,15 @@
72
73
  :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper--complete .rb-stepper__label {
73
74
  color: var(--rb-text);
74
75
  }
75
- :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper--current .rb-stepper__node {
76
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper--current .rb-stepper__node,
77
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__step[aria-current="step"] .rb-stepper__node {
76
78
  background: var(--rb-surface);
77
79
  border-color: var(--rb-accent);
78
80
  color: var(--rb-accent);
79
81
  box-shadow: var(--rb-shadow-lg);
80
82
  }
81
- :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper--current .rb-stepper__label {
83
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper--current .rb-stepper__label,
84
+ :where([data-rb-style="concrete-signal-light"], [data-rb-style="concrete-signal-light"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
82
85
  color: var(--rb-accent);
83
86
  font-weight: var(--rb-font-weight-bold);
84
87
  }