@riebeckite/plugin-color-mode 0.0.5 → 0.0.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 (2) hide show
  1. package/package.json +2 -2
  2. package/style.css +91 -91
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/plugin-color-mode",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "dependencies": {
24
24
  "hono": "^4.12.25",
25
- "@riebeckite/core": "0.0.5"
25
+ "@riebeckite/core": "0.0.6"
26
26
  },
27
27
  "publishConfig": {
28
28
  "access": "public"
package/style.css CHANGED
@@ -1,91 +1,91 @@
1
- @layer components {
2
- .rr-color-mode {
3
- --rr-color-mode-ink: var(--rb-color-ink);
4
- --rr-color-mode-muted: var(--rb-color-muted);
5
- --rr-color-mode-surface: var(--rb-color-surface);
6
- --rr-color-mode-surface-hover: var(--rb-color-surface-hover);
7
- --rr-color-mode-border: var(--rb-color-border);
8
-
9
- display: none;
10
- align-items: center;
11
- gap: 0.25rem;
12
- margin: 0;
13
- min-width: 0;
14
- padding: 0.2rem;
15
- border: 1px solid var(--rr-color-mode-border);
16
- border-radius: 999px;
17
- }
18
-
19
- /* The legend names the group for assistive technology only. */
20
- .rr-color-mode__legend {
21
- position: absolute;
22
- width: 1px;
23
- height: 1px;
24
- padding: 0;
25
- margin: -1px;
26
- overflow: hidden;
27
- clip: rect(0 0 0 0);
28
- white-space: nowrap;
29
- border: 0;
30
- }
31
-
32
- /* The control only appears once the runtime marked the page as ready, so
33
- pages with JavaScript disabled never show a non-functional switch. */
34
- html[data-rb-color-mode="ready"] .rr-color-mode {
35
- display: inline-flex;
36
- }
37
-
38
- .rr-color-mode__button {
39
- display: inline-flex;
40
- align-items: center;
41
- justify-content: center;
42
- width: 2rem;
43
- height: 2rem;
44
- padding: 0;
45
- color: var(--rr-color-mode-muted);
46
- background: transparent;
47
- border: 0;
48
- border-radius: 999px;
49
- cursor: pointer;
50
- transition:
51
- background-color 120ms linear,
52
- color 120ms linear;
53
- }
54
-
55
- .rr-color-mode__button:hover {
56
- color: var(--rr-color-mode-ink);
57
- background: var(--rr-color-mode-surface-hover);
58
- }
59
-
60
- .rr-color-mode__button[aria-pressed="true"] {
61
- color: var(--rr-color-mode-ink);
62
- background: var(--rr-color-mode-surface);
63
- box-shadow: inset 0 0 0 1px var(--rr-color-mode-border);
64
- }
65
-
66
- .rr-color-mode__icon {
67
- display: block;
68
- width: 1rem;
69
- height: 1rem;
70
- }
71
-
72
- .rr-color-mode__icon path,
73
- .rr-color-mode__icon circle,
74
- .rr-color-mode__icon rect {
75
- stroke-linecap: round;
76
- stroke-linejoin: round;
77
- }
78
-
79
- @media (max-width: 48rem) {
80
- .rr-color-mode__button {
81
- width: 2.5rem;
82
- height: 2.5rem;
83
- }
84
- }
85
-
86
- @media (prefers-reduced-motion: reduce) {
87
- .rr-color-mode__button {
88
- transition: none;
89
- }
90
- }
91
- }
1
+ @layer components {
2
+ .rr-color-mode {
3
+ --rr-color-mode-ink: var(--rb-color-ink);
4
+ --rr-color-mode-muted: var(--rb-color-muted);
5
+ --rr-color-mode-surface: var(--rb-color-surface);
6
+ --rr-color-mode-surface-hover: var(--rb-color-surface-hover);
7
+ --rr-color-mode-border: var(--rb-color-border);
8
+
9
+ display: none;
10
+ align-items: center;
11
+ gap: 0.25rem;
12
+ margin: 0;
13
+ min-width: 0;
14
+ padding: 0.2rem;
15
+ border: 1px solid var(--rr-color-mode-border);
16
+ border-radius: 999px;
17
+ }
18
+
19
+ /* The legend names the group for assistive technology only. */
20
+ .rr-color-mode__legend {
21
+ position: absolute;
22
+ width: 1px;
23
+ height: 1px;
24
+ padding: 0;
25
+ margin: -1px;
26
+ overflow: hidden;
27
+ clip: rect(0 0 0 0);
28
+ white-space: nowrap;
29
+ border: 0;
30
+ }
31
+
32
+ /* The control only appears once the runtime marked the page as ready, so
33
+ pages with JavaScript disabled never show a non-functional switch. */
34
+ html[data-rb-color-mode="ready"] .rr-color-mode {
35
+ display: inline-flex;
36
+ }
37
+
38
+ .rr-color-mode__button {
39
+ display: inline-flex;
40
+ align-items: center;
41
+ justify-content: center;
42
+ width: 2rem;
43
+ height: 2rem;
44
+ padding: 0;
45
+ color: var(--rr-color-mode-muted);
46
+ background: transparent;
47
+ border: 0;
48
+ border-radius: 999px;
49
+ cursor: pointer;
50
+ transition:
51
+ background-color 120ms linear,
52
+ color 120ms linear;
53
+ }
54
+
55
+ .rr-color-mode__button:hover {
56
+ color: var(--rr-color-mode-ink);
57
+ background: var(--rr-color-mode-surface-hover);
58
+ }
59
+
60
+ .rr-color-mode__button[aria-pressed="true"] {
61
+ color: var(--rr-color-mode-ink);
62
+ background: var(--rr-color-mode-surface);
63
+ box-shadow: inset 0 0 0 1px var(--rr-color-mode-border);
64
+ }
65
+
66
+ .rr-color-mode__icon {
67
+ display: block;
68
+ width: 1rem;
69
+ height: 1rem;
70
+ }
71
+
72
+ .rr-color-mode__icon path,
73
+ .rr-color-mode__icon circle,
74
+ .rr-color-mode__icon rect {
75
+ stroke-linecap: round;
76
+ stroke-linejoin: round;
77
+ }
78
+
79
+ @media (max-width: 48rem) {
80
+ .rr-color-mode__button {
81
+ width: 2.5rem;
82
+ height: 2.5rem;
83
+ }
84
+ }
85
+
86
+ @media (prefers-reduced-motion: reduce) {
87
+ .rr-color-mode__button {
88
+ transition: none;
89
+ }
90
+ }
91
+ }