@chronogrove/ui 0.76.0 → 0.78.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +18 -11
  2. package/jest.config.cjs +1 -0
  3. package/package.json +35 -1
  4. package/src/__snapshots__/header.spec.js.snap +69 -0
  5. package/src/__snapshots__/page-header.spec.js.snap +11 -0
  6. package/src/action-button.js +83 -0
  7. package/src/action-button.spec.js +201 -0
  8. package/src/color-utils.js +37 -0
  9. package/src/color-utils.spec.js +43 -0
  10. package/src/gatsby/build-theme-ui-color-mode-head-components.js +36 -0
  11. package/src/gatsby/index.js +4 -0
  12. package/src/gatsby/index.spec.js +131 -0
  13. package/src/gatsby/on-pre-render-html-sort.js +21 -0
  14. package/src/gatsby/on-route-update-color-mode.js +14 -0
  15. package/src/header.js +28 -0
  16. package/src/header.spec.js +47 -0
  17. package/src/lazy-load.js +41 -0
  18. package/src/lazy-load.spec.js +88 -0
  19. package/src/page-header.js +10 -0
  20. package/src/page-header.spec.js +17 -0
  21. package/src/pagination-button.js +106 -0
  22. package/src/pagination-button.spec.js +197 -0
  23. package/.turbo/turbo-test$colon$coverage.log +0 -44
  24. package/.turbo/turbo-test.log +0 -168
  25. package/coverage/clover.xml +0 -131
  26. package/coverage/coverage-final.json +0 -13
  27. package/coverage/lcov-report/base.css +0 -224
  28. package/coverage/lcov-report/block-navigation.js +0 -87
  29. package/coverage/lcov-report/browser-sync.js.html +0 -268
  30. package/coverage/lcov-report/favicon.png +0 -0
  31. package/coverage/lcov-report/index.html +0 -161
  32. package/coverage/lcov-report/prettify.css +0 -1
  33. package/coverage/lcov-report/prettify.js +0 -2
  34. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  35. package/coverage/lcov-report/sorter.js +0 -210
  36. package/coverage/lcov-report/src/button.js.html +0 -160
  37. package/coverage/lcov-report/src/color-mode/browser-sync.js.html +0 -268
  38. package/coverage/lcov-report/src/color-mode/constants.js.html +0 -121
  39. package/coverage/lcov-report/src/color-mode/head-inline.js.html +0 -304
  40. package/coverage/lcov-report/src/color-mode/index.html +0 -176
  41. package/coverage/lcov-report/src/color-mode/index.js.html +0 -124
  42. package/coverage/lcov-report/src/color-mode/normalize.js.html +0 -112
  43. package/coverage/lcov-report/src/color-mode/resolve-theme-colors.js.html +0 -154
  44. package/coverage/lcov-report/src/color-toggle.js.html +0 -142
  45. package/coverage/lcov-report/src/emotion-cache.js.html +0 -151
  46. package/coverage/lcov-report/src/helpers/index.html +0 -116
  47. package/coverage/lcov-report/src/helpers/isDarkMode.js.html +0 -91
  48. package/coverage/lcov-report/src/index.html +0 -161
  49. package/coverage/lcov-report/src/provider.js.html +0 -124
  50. package/coverage/lcov-report/src/skip-nav/SkipNavContent.js.html +0 -133
  51. package/coverage/lcov-report/src/skip-nav/SkipNavLink.js.html +0 -301
  52. package/coverage/lcov-report/src/skip-nav/index.html +0 -131
  53. package/coverage/lcov-report/src/theme.js.html +0 -2143
  54. package/coverage/lcov.info +0 -309
@@ -1,124 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/color-mode/index.js</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">src/color-mode</a> index.js</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">0% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>0/0</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">0% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>0/0</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">0% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>0/0</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">0% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>0/0</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line low'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
80
- <span class="cline-any cline-neutral">&nbsp;</span>
81
- <span class="cline-any cline-neutral">&nbsp;</span>
82
- <span class="cline-any cline-neutral">&nbsp;</span>
83
- <span class="cline-any cline-neutral">&nbsp;</span>
84
- <span class="cline-any cline-neutral">&nbsp;</span>
85
- <span class="cline-any cline-neutral">&nbsp;</span>
86
- <span class="cline-any cline-neutral">&nbsp;</span>
87
- <span class="cline-any cline-neutral">&nbsp;</span>
88
- <span class="cline-any cline-neutral">&nbsp;</span>
89
- <span class="cline-any cline-neutral">&nbsp;</span>
90
- <span class="cline-any cline-neutral">&nbsp;</span>
91
- <span class="cline-any cline-neutral">&nbsp;</span>
92
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export {
93
- THEME_UI_COLOR_MODE_STORAGE_KEY,
94
- RECONCILE_COLOR_MODE_EVENT,
95
- CHRONOGROVE_COLOR_MODE_HEAD_PRIORITY_KEYS
96
- } from './constants.js'
97
- export { normalizeThemeUiColorMode } from './normalize.js'
98
- export { resolveChronogroveSurfaceColors } from './resolve-theme-colors.js'
99
- export {
100
- buildThemeUiNoFlashInlineScript,
101
- buildHtmlBackgroundInlineScript,
102
- buildThemeUiColorModeFallbackCss
103
- } from './head-inline.js'
104
- export { resolveThemeUiColorMode, syncThemeUiColorMode, scheduleThemeUiColorModeSync } from './browser-sync.js'
105
- &nbsp;</pre></td></tr></table></pre>
106
-
107
- <div class='push'></div><!-- for sticky footer -->
108
- </div><!-- /wrapper -->
109
- <div class='footer quiet pad2 space-top1 center small'>
110
- Code coverage generated by
111
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
112
- at 2026-04-10T04:55:03.811Z
113
- </div>
114
- <script src="../../prettify.js"></script>
115
- <script>
116
- window.onload = function () {
117
- prettyPrint();
118
- };
119
- </script>
120
- <script src="../../sorter.js"></script>
121
- <script src="../../block-navigation.js"></script>
122
- </body>
123
- </html>
124
-
@@ -1,112 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/color-mode/normalize.js</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">src/color-mode</a> normalize.js</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>5/5</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">100% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>6/6</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>1/1</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>5/5</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line high'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
76
- <span class="cline-any cline-yes">23x</span>
77
- <span class="cline-any cline-yes">5x</span>
78
- <span class="cline-any cline-neutral">&nbsp;</span>
79
- <span class="cline-any cline-yes">18x</span>
80
- <span class="cline-any cline-yes">6x</span>
81
- <span class="cline-any cline-neutral">&nbsp;</span>
82
- <span class="cline-any cline-yes">12x</span>
83
- <span class="cline-any cline-neutral">&nbsp;</span>
84
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export function normalizeThemeUiColorMode(mode) {
85
- if (mode === 'light') {
86
- return 'default'
87
- }
88
- if (mode === 'dark' || mode === 'default') {
89
- return mode
90
- }
91
- return null
92
- }
93
- &nbsp;</pre></td></tr></table></pre>
94
-
95
- <div class='push'></div><!-- for sticky footer -->
96
- </div><!-- /wrapper -->
97
- <div class='footer quiet pad2 space-top1 center small'>
98
- Code coverage generated by
99
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
100
- at 2026-04-10T05:07:25.092Z
101
- </div>
102
- <script src="../../prettify.js"></script>
103
- <script>
104
- window.onload = function () {
105
- prettyPrint();
106
- };
107
- </script>
108
- <script src="../../sorter.js"></script>
109
- <script src="../../block-navigation.js"></script>
110
- </body>
111
- </html>
112
-
@@ -1,154 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/color-mode/resolve-theme-colors.js</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../../prettify.css" />
9
- <link rel="stylesheet" href="../../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../../index.html">All files</a> / <a href="index.html">src/color-mode</a> resolve-theme-colors.js</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>6/6</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">100% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>18/18</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>2/2</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>6/6</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line high'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a>
80
- <a name='L15'></a><a href='#L15'>15</a>
81
- <a name='L16'></a><a href='#L16'>16</a>
82
- <a name='L17'></a><a href='#L17'>17</a>
83
- <a name='L18'></a><a href='#L18'>18</a>
84
- <a name='L19'></a><a href='#L19'>19</a>
85
- <a name='L20'></a><a href='#L20'>20</a>
86
- <a name='L21'></a><a href='#L21'>21</a>
87
- <a name='L22'></a><a href='#L22'>22</a>
88
- <a name='L23'></a><a href='#L23'>23</a>
89
- <a name='L24'></a><a href='#L24'>24</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
90
- <span class="cline-any cline-yes">12x</span>
91
- <span class="cline-any cline-yes">6x</span>
92
- <span class="cline-any cline-neutral">&nbsp;</span>
93
- <span class="cline-any cline-yes">6x</span>
94
- <span class="cline-any cline-neutral">&nbsp;</span>
95
- <span class="cline-any cline-neutral">&nbsp;</span>
96
- <span class="cline-any cline-neutral">&nbsp;</span>
97
- <span class="cline-any cline-neutral">&nbsp;</span>
98
- <span class="cline-any cline-neutral">&nbsp;</span>
99
- <span class="cline-any cline-neutral">&nbsp;</span>
100
- <span class="cline-any cline-neutral">&nbsp;</span>
101
- <span class="cline-any cline-yes">2x</span>
102
- <span class="cline-any cline-yes">2x</span>
103
- <span class="cline-any cline-yes">2x</span>
104
- <span class="cline-any cline-neutral">&nbsp;</span>
105
- <span class="cline-any cline-neutral">&nbsp;</span>
106
- <span class="cline-any cline-neutral">&nbsp;</span>
107
- <span class="cline-any cline-neutral">&nbsp;</span>
108
- <span class="cline-any cline-neutral">&nbsp;</span>
109
- <span class="cline-any cline-neutral">&nbsp;</span>
110
- <span class="cline-any cline-neutral">&nbsp;</span>
111
- <span class="cline-any cline-neutral">&nbsp;</span>
112
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">function pickColor(value) {
113
- if (typeof value === 'string') {
114
- return value
115
- }
116
- return null
117
- }
118
- &nbsp;
119
- /**
120
- * Surface colors used by inline SSR/CSR scripts and fallbacks.
121
- * Pass the same Theme UI theme object as `ThemeUIProvider`.
122
- */
123
- export function resolveChronogroveSurfaceColors(theme) {
124
- const colors = theme?.colors || {}
125
- const dark = colors.modes?.dark || {}
126
- return {
127
- defaultBackgroundHex: pickColor(colors.background) || '#fdf8f5',
128
- darkBackgroundHex: pickColor(dark.background) || '#14141F',
129
- defaultTextHex: pickColor(colors.text) || '#111',
130
- defaultTextMutedHex: pickColor(colors.textMuted) || '#333',
131
- darkTextHex: pickColor(dark.text) || '#fff',
132
- darkTextMutedHex: pickColor(dark.textMuted) || '#d8d8d8'
133
- }
134
- }
135
- &nbsp;</pre></td></tr></table></pre>
136
-
137
- <div class='push'></div><!-- for sticky footer -->
138
- </div><!-- /wrapper -->
139
- <div class='footer quiet pad2 space-top1 center small'>
140
- Code coverage generated by
141
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
142
- at 2026-04-10T05:07:25.092Z
143
- </div>
144
- <script src="../../prettify.js"></script>
145
- <script>
146
- window.onload = function () {
147
- prettyPrint();
148
- };
149
- </script>
150
- <script src="../../sorter.js"></script>
151
- <script src="../../block-navigation.js"></script>
152
- </body>
153
- </html>
154
-
@@ -1,142 +0,0 @@
1
-
2
- <!doctype html>
3
- <html lang="en">
4
-
5
- <head>
6
- <title>Code coverage report for src/color-toggle.js</title>
7
- <meta charset="utf-8" />
8
- <link rel="stylesheet" href="../prettify.css" />
9
- <link rel="stylesheet" href="../base.css" />
10
- <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
11
- <meta name="viewport" content="width=device-width, initial-scale=1" />
12
- <style type='text/css'>
13
- .coverage-summary .sorter {
14
- background-image: url(../sort-arrow-sprite.png);
15
- }
16
- </style>
17
- </head>
18
-
19
- <body>
20
- <div class='wrapper'>
21
- <div class='pad1'>
22
- <h1><a href="../index.html">All files</a> / <a href="index.html">src</a> color-toggle.js</h1>
23
- <div class='clearfix'>
24
-
25
- <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
27
- <span class="quiet">Statements</span>
28
- <span class='fraction'>3/3</span>
29
- </div>
30
-
31
-
32
- <div class='fl pad1y space-right2'>
33
- <span class="strong">100% </span>
34
- <span class="quiet">Branches</span>
35
- <span class='fraction'>2/2</span>
36
- </div>
37
-
38
-
39
- <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
41
- <span class="quiet">Functions</span>
42
- <span class='fraction'>2/2</span>
43
- </div>
44
-
45
-
46
- <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
48
- <span class="quiet">Lines</span>
49
- <span class='fraction'>3/3</span>
50
- </div>
51
-
52
-
53
- </div>
54
- <p class="quiet">
55
- Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
- </p>
57
- <template id="filterTemplate">
58
- <div class="quiet">
59
- Filter:
60
- <input type="search" id="fileSearch">
61
- </div>
62
- </template>
63
- </div>
64
- <div class='status-line high'></div>
65
- <pre><table class="coverage">
66
- <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
- <a name='L2'></a><a href='#L2'>2</a>
68
- <a name='L3'></a><a href='#L3'>3</a>
69
- <a name='L4'></a><a href='#L4'>4</a>
70
- <a name='L5'></a><a href='#L5'>5</a>
71
- <a name='L6'></a><a href='#L6'>6</a>
72
- <a name='L7'></a><a href='#L7'>7</a>
73
- <a name='L8'></a><a href='#L8'>8</a>
74
- <a name='L9'></a><a href='#L9'>9</a>
75
- <a name='L10'></a><a href='#L10'>10</a>
76
- <a name='L11'></a><a href='#L11'>11</a>
77
- <a name='L12'></a><a href='#L12'>12</a>
78
- <a name='L13'></a><a href='#L13'>13</a>
79
- <a name='L14'></a><a href='#L14'>14</a>
80
- <a name='L15'></a><a href='#L15'>15</a>
81
- <a name='L16'></a><a href='#L16'>16</a>
82
- <a name='L17'></a><a href='#L17'>17</a>
83
- <a name='L18'></a><a href='#L18'>18</a>
84
- <a name='L19'></a><a href='#L19'>19</a>
85
- <a name='L20'></a><a href='#L20'>20</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
86
- <span class="cline-any cline-neutral">&nbsp;</span>
87
- <span class="cline-any cline-neutral">&nbsp;</span>
88
- <span class="cline-any cline-neutral">&nbsp;</span>
89
- <span class="cline-any cline-neutral">&nbsp;</span>
90
- <span class="cline-any cline-neutral">&nbsp;</span>
91
- <span class="cline-any cline-yes">2x</span>
92
- <span class="cline-any cline-neutral">&nbsp;</span>
93
- <span class="cline-any cline-yes">2x</span>
94
- <span class="cline-any cline-neutral">&nbsp;</span>
95
- <span class="cline-any cline-neutral">&nbsp;</span>
96
- <span class="cline-any cline-neutral">&nbsp;</span>
97
- <span class="cline-any cline-yes">2x</span>
98
- <span class="cline-any cline-neutral">&nbsp;</span>
99
- <span class="cline-any cline-neutral">&nbsp;</span>
100
- <span class="cline-any cline-neutral">&nbsp;</span>
101
- <span class="cline-any cline-neutral">&nbsp;</span>
102
- <span class="cline-any cline-neutral">&nbsp;</span>
103
- <span class="cline-any cline-neutral">&nbsp;</span>
104
- <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React from 'react'
105
- import { useColorMode } from 'theme-ui'
106
- import { Expand } from '@theme-toggles/react'
107
- import isDarkMode from '@chronogrove/ui/is-dark-mode'
108
- &nbsp;
109
- export default function ColorToggle() {
110
- const [colorMode, setColorMode] = useColorMode()
111
- &nbsp;
112
- return (
113
- &lt;Expand
114
- className='theme-toggle'
115
- toggled={isDarkMode(colorMode)}
116
- toggle={() =&gt; setColorMode(colorMode === 'default' ? 'dark' : 'default')}
117
- duration={750}
118
- aria-label='Toggle color mode'
119
- id='theme-toggle'
120
- /&gt;
121
- )
122
- }
123
- &nbsp;</pre></td></tr></table></pre>
124
-
125
- <div class='push'></div><!-- for sticky footer -->
126
- </div><!-- /wrapper -->
127
- <div class='footer quiet pad2 space-top1 center small'>
128
- Code coverage generated by
129
- <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
130
- at 2026-04-10T05:07:25.092Z
131
- </div>
132
- <script src="../prettify.js"></script>
133
- <script>
134
- window.onload = function () {
135
- prettyPrint();
136
- };
137
- </script>
138
- <script src="../sorter.js"></script>
139
- <script src="../block-navigation.js"></script>
140
- </body>
141
- </html>
142
-