@rackbops/styles 0.1.5 → 0.1.6

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 (33) hide show
  1. package/amber-ember/components/link.css +4 -2
  2. package/amber-ember/components/stepper.css +6 -3
  3. package/amber-ember/components/tabs.css +4 -2
  4. package/amber-hearth/components/link.css +4 -2
  5. package/amber-hearth/components/stepper.css +6 -3
  6. package/amber-hearth/components/tabs.css +4 -2
  7. package/arcane-obsidian/components/link.css +4 -2
  8. package/arcane-obsidian/components/stepper.css +6 -3
  9. package/arcane-obsidian/components/tabs.css +4 -2
  10. package/arcane-parchment/components/link.css +4 -2
  11. package/arcane-parchment/components/stepper.css +6 -3
  12. package/arcane-parchment/components/tabs.css +4 -2
  13. package/concrete-signal/components/link.css +4 -2
  14. package/concrete-signal/components/stepper.css +6 -3
  15. package/concrete-signal-light/components/link.css +4 -2
  16. package/concrete-signal-light/components/stepper.css +6 -3
  17. package/contract.json +7 -41
  18. package/luminous-precision/components/link.css +2 -1
  19. package/luminous-precision/components/stepper.css +6 -3
  20. package/mono-field/components/link.css +4 -2
  21. package/mono-field/components/stepper.css +6 -3
  22. package/neon-butterfly/components/dialog.css +1 -1
  23. package/neon-butterfly/components/link.css +4 -2
  24. package/neon-butterfly/components/stepper.css +6 -3
  25. package/package.json +1 -1
  26. package/rackbops-noir/components/link.css +2 -1
  27. package/rackbops-noir/components/stepper.css +6 -3
  28. package/rackbops-noir/components/tabs.css +4 -2
  29. package/rackbops-studio/components/link.css +2 -1
  30. package/rackbops-studio/components/stepper.css +6 -3
  31. package/rackbops-studio/components/tabs.css +4 -2
  32. package/summer-cloud/components/dialog.css +1 -1
  33. package/summer-cloud/components/stepper.css +6 -3
@@ -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
  }
@@ -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
  }
@@ -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);
@@ -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
  }
@@ -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
  }
@@ -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);
@@ -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
  }
@@ -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
  }
@@ -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);
@@ -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
  }
@@ -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
  }
@@ -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);
@@ -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);
@@ -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
  }
@@ -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);
@@ -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
  }
package/contract.json CHANGED
@@ -27,7 +27,7 @@
27
27
  "link": {
28
28
  "react": "NavLink",
29
29
  "classes": ["rb-link", "rb-link--active"],
30
- "notes": "active prop; SHOULD also match [aria-current=\"page\"] (pending CSS sweep, #65)"
30
+ "notes": "active prop; also matches [aria-current=\"page\"] in every theme"
31
31
  },
32
32
  "nav-rail": {
33
33
  "react": "NavRail",
@@ -57,7 +57,7 @@
57
57
  "tabs": {
58
58
  "react": "Tabs",
59
59
  "classes": ["rb-tabs", "rb-tab", "rb-tab--active", "rb-tabpanel"],
60
- "notes": "items: {id, label, content}[]; --active SHOULD also match [aria-selected=\"true\"] (pending CSS sweep, #65)"
60
+ "notes": "items: {id, label, content}[]; --active also matches [aria-selected=\"true\"] in every theme"
61
61
  },
62
62
  "table": {
63
63
  "react": null,
@@ -87,7 +87,7 @@
87
87
  "stepper": {
88
88
  "react": "Stepper",
89
89
  "classes": ["rb-stepper", "rb-stepper__step", "rb-stepper__node", "rb-stepper__label", "rb-stepper--complete", "rb-stepper--current", "rb-stepper--upcoming"],
90
- "notes": "--upcoming is the resting state (allowlisted, no rule needed); --current SHOULD also match [aria-current=\"step\"] (pending CSS sweep, #65)"
90
+ "notes": "--upcoming is the resting state (allowlisted, no rule needed); --current also matches [aria-current=\"step\"] in every theme"
91
91
  }
92
92
  },
93
93
  "allowlist": [
@@ -131,62 +131,28 @@
131
131
  "class": "rb-tab--active",
132
132
  "attribute": "[aria-selected=\"true\"]",
133
133
  "baseSelector": "rb-tab",
134
- "exempt": [
135
- { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
136
- { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
137
- { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
138
- { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
139
- { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
140
- { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
141
- ]
134
+ "exempt": []
142
135
  },
143
136
  {
144
137
  "component": "link",
145
138
  "class": "rb-link--active",
146
139
  "attribute": "[aria-current=\"page\"]",
147
140
  "baseSelector": "rb-link",
148
- "exempt": [
149
- { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
150
- { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
151
- { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
152
- { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
153
- { "theme": "concrete-signal", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
154
- { "theme": "concrete-signal-light", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
155
- { "theme": "luminous-precision", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
156
- { "theme": "mono-field", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
157
- { "theme": "neon-butterfly", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
158
- { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
159
- { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
160
- ]
141
+ "exempt": []
161
142
  },
162
143
  {
163
144
  "component": "stepper",
164
145
  "class": "rb-stepper--current",
165
146
  "attribute": "[aria-current=\"step\"]",
166
147
  "baseSelector": "rb-stepper__step",
167
- "exempt": [
168
- { "theme": "amber-ember", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
169
- { "theme": "amber-hearth", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
170
- { "theme": "arcane-obsidian", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
171
- { "theme": "arcane-parchment", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
172
- { "theme": "concrete-signal", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
173
- { "theme": "concrete-signal-light", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
174
- { "theme": "luminous-precision", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
175
- { "theme": "mono-field", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
176
- { "theme": "neon-butterfly", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
177
- { "theme": "rackbops-noir", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
178
- { "theme": "rackbops-studio", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" },
179
- { "theme": "summer-cloud", "reason": "pending ARIA-pairing CSS sweep, tracked in #65" }
180
- ]
148
+ "exempt": []
181
149
  }
182
150
  ],
183
151
  "dialogBackdropBlur": {
184
152
  "token": "--rb-blur",
185
153
  "exempt": [
186
154
  { "theme": "concrete-signal", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true },
187
- { "theme": "concrete-signal-light", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true },
188
- { "theme": "neon-butterfly", "reason": "hard-codes blur(4px), pending CSS fix, tracked in #65" },
189
- { "theme": "summer-cloud", "reason": "hard-codes blur(4px), pending CSS fix, tracked in #65" }
155
+ { "theme": "concrete-signal-light", "reason": "flat scrim by design, no blur/glass anywhere in this theme", "permanent": true }
190
156
  ]
191
157
  }
192
158
  }
@@ -29,7 +29,8 @@
29
29
  0 0 12px var(--rb-accent-2-glow);
30
30
  }
31
31
  /* --active: the current route, styled as the resting version of :hover */
32
- :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link--active {
32
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link--active,
33
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-link[aria-current="page"] {
33
34
  background: var(--rb-surface);
34
35
  color: var(--rb-accent-2);
35
36
  box-shadow:
@@ -43,7 +43,8 @@
43
43
  transition: background-color var(--rb-transition), box-shadow var(--rb-transition);
44
44
  }
45
45
  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
46
- :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
46
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
47
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step[aria-current="step"]::before {
47
48
  background: var(--rb-accent);
48
49
  box-shadow: 0 0 8px var(--rb-accent-glow);
49
50
  }
@@ -71,13 +72,15 @@
71
72
  :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--complete .rb-stepper__label {
72
73
  color: var(--rb-text);
73
74
  }
74
- :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__node {
75
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__node,
76
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).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: 0 0 8px var(--rb-accent-glow);
79
81
  }
80
- :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__label {
82
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper--current .rb-stepper__label,
83
+ :where([data-rb-style="luminous-precision"], [data-rb-style="luminous-precision"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
81
84
  color: var(--rb-accent);
82
85
  font-weight: var(--rb-font-weight-medium);
83
86
  }
@@ -32,10 +32,12 @@
32
32
  transition: background var(--rb-transition);
33
33
  }
34
34
  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link:hover::before,
35
- :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active::before {
35
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active::before,
36
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link[aria-current="page"]::before {
36
37
  background: var(--rb-accent);
37
38
  }
38
- :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active {
39
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link.rb-link--active,
40
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-link[aria-current="page"] {
39
41
  background: var(--rb-surface-2);
40
42
  color: var(--rb-accent);
41
43
  }
@@ -42,7 +42,8 @@
42
42
  transition: background-color var(--rb-transition);
43
43
  }
44
44
  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
45
- :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
45
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
46
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step[aria-current="step"]::before {
46
47
  background: var(--rb-accent);
47
48
  }
48
49
  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__node {
@@ -69,12 +70,14 @@
69
70
  :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--complete .rb-stepper__label {
70
71
  color: var(--rb-text);
71
72
  }
72
- :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__node {
73
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__node,
74
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).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
  }
77
- :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__label {
79
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper--current .rb-stepper__label,
80
+ :where([data-rb-style="mono-field"], [data-rb-style="mono-field"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
78
81
  color: var(--rb-accent);
79
82
  font-weight: var(--rb-font-weight-medium);
80
83
  }
@@ -12,7 +12,7 @@
12
12
  }
13
13
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-dialog::backdrop {
14
14
  background: rgba(11, 19, 38, 0.7);
15
- backdrop-filter: blur(4px);
15
+ backdrop-filter: blur(var(--rb-blur));
16
16
  }
17
17
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-dialog__title {
18
18
  margin: 0 0 var(--rb-space-3);
@@ -36,11 +36,13 @@
36
36
  }
37
37
  /* --active: the current route — the hover color/glow, resting, without the
38
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 {
39
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active,
40
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link[aria-current="page"] {
40
41
  border-color: var(--rb-accent-border);
41
42
  color: var(--rb-accent);
42
43
  }
43
- :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active::before {
44
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link--active::before,
45
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-link[aria-current="page"]::before {
44
46
  color: var(--rb-accent-2);
45
47
  text-shadow: 0 0 5px var(--rb-accent-2-glow);
46
48
  }
@@ -43,7 +43,8 @@
43
43
  transition: background-color var(--rb-transition), box-shadow var(--rb-transition);
44
44
  }
45
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 {
46
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
47
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step[aria-current="step"]::before {
47
48
  background: var(--rb-accent);
48
49
  box-shadow: 0 0 8px var(--rb-accent-glow);
49
50
  }
@@ -71,13 +72,15 @@
71
72
  :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--complete .rb-stepper__label {
72
73
  color: var(--rb-text);
73
74
  }
74
- :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__node {
75
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__node,
76
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).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: 0 0 8px var(--rb-accent-glow);
79
81
  }
80
- :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__label {
82
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper--current .rb-stepper__label,
83
+ :where([data-rb-style="neon-butterfly"], [data-rb-style="neon-butterfly"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
81
84
  color: var(--rb-accent);
82
85
  font-weight: var(--rb-font-weight-medium);
83
86
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rackbops/styles",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "description": "Rackbops design-system styles: tokens, base styles, and component classes per theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -20,7 +20,8 @@
20
20
  color: var(--rb-text);
21
21
  background: var(--rb-surface-2);
22
22
  }
23
- :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link.rb-link--active {
23
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link.rb-link--active,
24
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-link[aria-current="page"] {
24
25
  color: var(--rb-accent);
25
26
  }
26
27
 
@@ -42,7 +42,8 @@
42
42
  transition: background-color var(--rb-transition);
43
43
  }
44
44
  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
45
- :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
45
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
46
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step[aria-current="step"]::before {
46
47
  background: var(--rb-accent);
47
48
  }
48
49
  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__node {
@@ -69,13 +70,15 @@
69
70
  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--complete .rb-stepper__label {
70
71
  color: var(--rb-text);
71
72
  }
72
- :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__node {
73
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__node,
74
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).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="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__label {
80
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__label,
81
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).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
  }
@@ -21,10 +21,12 @@
21
21
  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab:hover {
22
22
  color: var(--rb-text);
23
23
  }
24
- :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active {
24
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active,
25
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab[aria-selected="true"] {
25
26
  color: var(--rb-text);
26
27
  }
27
- :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active::after {
28
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab.rb-tab--active::after,
29
+ :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-tab[aria-selected="true"]::after {
28
30
  content: "";
29
31
  position: absolute;
30
32
  left: 0;
@@ -20,7 +20,8 @@
20
20
  color: var(--rb-text);
21
21
  background: var(--rb-surface-2);
22
22
  }
23
- :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-link.rb-link--active {
23
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-link.rb-link--active,
24
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-link[aria-current="page"] {
24
25
  color: var(--rb-accent);
25
26
  }
26
27
 
@@ -42,7 +42,8 @@
42
42
  transition: background-color var(--rb-transition);
43
43
  }
44
44
  :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
45
- :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
45
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
46
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step[aria-current="step"]::before {
46
47
  background: var(--rb-accent);
47
48
  }
48
49
  :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__node {
@@ -69,13 +70,15 @@
69
70
  :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--complete .rb-stepper__label {
70
71
  color: var(--rb-text);
71
72
  }
72
- :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__node {
73
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__node,
74
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).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="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__label {
80
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__label,
81
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).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
  }
@@ -21,10 +21,12 @@
21
21
  :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab:hover {
22
22
  color: var(--rb-text);
23
23
  }
24
- :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active {
24
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active,
25
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab[aria-selected="true"] {
25
26
  color: var(--rb-text);
26
27
  }
27
- :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active::after {
28
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab.rb-tab--active::after,
29
+ :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-tab[aria-selected="true"]::after {
28
30
  content: "";
29
31
  position: absolute;
30
32
  left: 0;
@@ -12,7 +12,7 @@
12
12
  }
13
13
  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-dialog::backdrop {
14
14
  background: rgba(23, 28, 31, 0.3);
15
- backdrop-filter: blur(4px);
15
+ backdrop-filter: blur(var(--rb-blur));
16
16
  }
17
17
  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-dialog__title {
18
18
  margin: 0 0 var(--rb-space-3);
@@ -44,7 +44,8 @@
44
44
  transition: background-color var(--rb-transition), box-shadow var(--rb-transition);
45
45
  }
46
46
  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
47
- :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
47
+ :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before,
48
+ :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step[aria-current="step"]::before {
48
49
  background: var(--rb-accent);
49
50
  box-shadow: 0 0 10px var(--rb-accent-glow);
50
51
  }
@@ -72,13 +73,15 @@
72
73
  :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper--complete .rb-stepper__label {
73
74
  color: var(--rb-text);
74
75
  }
75
- :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper--current .rb-stepper__node {
76
+ :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper--current .rb-stepper__node,
77
+ :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).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-raised);
80
82
  }
81
- :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper--current .rb-stepper__label {
83
+ :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper--current .rb-stepper__label,
84
+ :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-stepper__step[aria-current="step"] .rb-stepper__label {
82
85
  color: var(--rb-accent);
83
86
  font-weight: var(--rb-font-weight-medium);
84
87
  }