@chronogrove/ui 0.76.0 → 0.77.0

package/jest.config.cjs

@@ -15,6 +15,7 @@ module.exports = {
     'src/index.js',
     'src/skip-nav/index.js',
     'src/color-mode/index.js',
+    'src/gatsby/index.js',
     'src/theme.js'
   ],
   moduleNameMapper: {

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@chronogrove/ui",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "description": "Chronogrove Theme UI theme, color mode helpers, and shared UI primitives",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chrisvogt/gatsby-theme-chronogrove.git",
+    "directory": "packages/ui"
+  },
   "sideEffects": false,
   "exports": {
     ".": {
@@ -40,6 +45,10 @@
     "./is-dark-mode": {
       "import": "./src/helpers/isDarkMode.js",
       "default": "./src/helpers/isDarkMode.js"
+    },
+    "./gatsby": {
+      "import": "./src/gatsby/index.js",
+      "default": "./src/gatsby/index.js"
     }
   },
   "peerDependencies": {

package/src/gatsby/build-theme-ui-color-mode-head-components.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import { resolveChronogroveSurfaceColors } from '../color-mode/resolve-theme-colors.js'
+import {
+  buildThemeUiNoFlashInlineScript,
+  buildHtmlBackgroundInlineScript,
+  buildThemeUiColorModeFallbackCss
+} from '../color-mode/head-inline.js'
+
+/**
+ * React head elements for Theme UI color mode: no-flash script, HTML background script, fallback CSS.
+ * Compose with your own meta tags (e.g. Emotion insertion point) in `onRenderBody`.
+ *
+ * @param {{ theme: object }} options — Theme UI theme object (same as `ThemeUIProvider`)
+ * @returns {import('react').ReactElement[]}
+ */
+export function buildThemeUiColorModeHeadComponents({ theme }) {
+  const surface = resolveChronogroveSurfaceColors(theme)
+  const colorModeScript = buildThemeUiNoFlashInlineScript()
+  const htmlBackgroundScript = buildHtmlBackgroundInlineScript({
+    defaultBackgroundHex: surface.defaultBackgroundHex,
+    darkBackgroundHex: surface.darkBackgroundHex
+  })
+  const colorModeFallbackCSS = buildThemeUiColorModeFallbackCss({
+    defaultTextHex: surface.defaultTextHex,
+    defaultTextMutedHex: surface.defaultTextMutedHex,
+    darkTextHex: surface.darkTextHex,
+    darkTextMutedHex: surface.darkTextMutedHex
+  })
+
+  return [
+    <script key='theme-ui-no-flash' dangerouslySetInnerHTML={{ __html: colorModeScript }} />,
+    <script key='html-bg-color' dangerouslySetInnerHTML={{ __html: htmlBackgroundScript }} />,
+    <style key='theme-ui-color-mode-fallback' dangerouslySetInnerHTML={{ __html: colorModeFallbackCSS }} />
+  ]
+}

package/src/gatsby/index.js

@@ -0,0 +1,4 @@
+export { buildThemeUiColorModeHeadComponents } from './build-theme-ui-color-mode-head-components.js'
+export { onPreRenderHTMLSortThemeUiColorModeFirst } from './on-pre-render-html-sort.js'
+export { onRouteUpdateThemeUiColorMode } from './on-route-update-color-mode.js'
+export { RECONCILE_COLOR_MODE_EVENT } from '../color-mode/constants.js'

package/src/gatsby/index.spec.js

@@ -0,0 +1,131 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import chronogroveTheme from '../theme.js'
+import * as gatsby from './index.js'
+import { buildThemeUiColorModeHeadComponents } from './build-theme-ui-color-mode-head-components.js'
+import { onPreRenderHTMLSortThemeUiColorModeFirst } from './on-pre-render-html-sort.js'
+import { onRouteUpdateThemeUiColorMode } from './on-route-update-color-mode.js'
+
+describe('@chronogrove/ui/gatsby public API', () => {
+  it('exports reconcile event and helpers from the barrel', () => {
+    expect(gatsby.RECONCILE_COLOR_MODE_EVENT).toBe('theme-ui-reconcile-color-mode')
+    expect(gatsby.buildThemeUiColorModeHeadComponents).toEqual(expect.any(Function))
+    expect(gatsby.onPreRenderHTMLSortThemeUiColorModeFirst).toEqual(expect.any(Function))
+    expect(gatsby.onRouteUpdateThemeUiColorMode).toEqual(expect.any(Function))
+  })
+})
+
+describe('@chronogrove/ui/gatsby', () => {
+  describe('buildThemeUiColorModeHeadComponents', () => {
+    it('returns no-flash script, HTML background script, and fallback style for the theme', () => {
+      const head = buildThemeUiColorModeHeadComponents({ theme: chronogroveTheme })
+      expect(head).toHaveLength(3)
+      expect(head[0].key).toBe('theme-ui-no-flash')
+      expect(head[1].key).toBe('html-bg-color')
+      expect(head[2].key).toBe('theme-ui-color-mode-fallback')
+
+      const { container: colorModeScriptContainer } = render(head[0])
+      const colorModeScriptTag = colorModeScriptContainer.querySelector('script')
+      expect(colorModeScriptTag).toHaveTextContent(/localStorage\.getItem\(['"]theme-ui-color-mode['"]\)/)
+      expect(colorModeScriptTag).toHaveTextContent(/data-theme-ui-color-mode/)
+
+      const { container: htmlBgScriptContainer } = render(head[1])
+      const htmlBgScriptTag = htmlBgScriptContainer.querySelector('script')
+      expect(htmlBgScriptTag).toHaveTextContent(/#14141F/)
+      expect(htmlBgScriptTag).toHaveTextContent(/#fdf8f5/)
+
+      const { container: fallbackStyleContainer } = render(head[2])
+      const fallbackStyle = fallbackStyleContainer.querySelector('style')
+      expect(fallbackStyle).toHaveTextContent(/:root\[data-theme-ui-color-mode="default"\]/)
+      expect(fallbackStyle).toHaveTextContent(/--theme-ui-colors-text: #111 !important/)
+    })
+  })
+
+  describe('onPreRenderHTMLSortThemeUiColorModeFirst', () => {
+    it('puts color-mode scripts and fallback style before other head components', () => {
+      const getHeadComponents = jest.fn(() => [
+        { key: 'emotion-insertion-point', type: 'meta' },
+        { key: 'theme-ui-no-flash', type: 'script' },
+        { key: 'html-bg-color', type: 'script' },
+        { key: 'theme-ui-color-mode-fallback', type: 'style' }
+      ])
+      const replaceHeadComponents = jest.fn()
+
+      onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents })
+
+      const sorted = replaceHeadComponents.mock.calls[0][0]
+      const colorModeKeys = ['theme-ui-no-flash', 'html-bg-color', 'theme-ui-color-mode-fallback']
+      const firstThree = sorted.slice(0, 3).map(c => c.key)
+      colorModeKeys.forEach(key => expect(firstThree).toContain(key))
+      expect(sorted[3].key).toBe('emotion-insertion-point')
+    })
+
+    it('sorts color-mode keys before arbitrary head components', () => {
+      const getHeadComponents = jest.fn(() => [
+        { key: 'other-meta', type: 'meta' },
+        { key: 'theme-ui-no-flash', type: 'script' },
+        { key: 'another-tag', type: 'link' },
+        { key: 'html-bg-color', type: 'script' },
+        { key: 'theme-ui-color-mode-fallback', type: 'style' }
+      ])
+      const replaceHeadComponents = jest.fn()
+
+      onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents })
+
+      const sorted = replaceHeadComponents.mock.calls[0][0]
+      const keys = sorted.map(c => c.key)
+      expect(keys.indexOf('theme-ui-no-flash')).toBeLessThan(keys.indexOf('other-meta'))
+      expect(keys.indexOf('html-bg-color')).toBeLessThan(keys.indexOf('another-tag'))
+      expect(keys.indexOf('theme-ui-color-mode-fallback')).toBeLessThan(keys.indexOf('other-meta'))
+    })
+
+    it('preserves relative order among non-priority head components (comparator returns 0)', () => {
+      const getHeadComponents = jest.fn(() => [
+        { key: 'z-last', type: 'meta' },
+        { key: 'a-first', type: 'meta' }
+      ])
+      const replaceHeadComponents = jest.fn()
+      onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents })
+      expect(replaceHeadComponents.mock.calls[0][0].map(c => c.key)).toEqual(['z-last', 'a-first'])
+    })
+
+    it('preserves relative order among priority keys when both sides are priority (comparator returns 0)', () => {
+      const getHeadComponents = jest.fn(() => [
+        { key: 'html-bg-color', type: 'script' },
+        { key: 'theme-ui-no-flash', type: 'script' }
+      ])
+      const replaceHeadComponents = jest.fn()
+      onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents })
+      expect(replaceHeadComponents.mock.calls[0][0].map(c => c.key)).toEqual(['html-bg-color', 'theme-ui-no-flash'])
+    })
+  })
+
+  describe('onRouteUpdateThemeUiColorMode', () => {
+    beforeEach(() => {
+      window.localStorage.removeItem('theme-ui-color-mode')
+      document.documentElement.removeAttribute('data-theme-ui-color-mode')
+      document.documentElement.className = ''
+    })
+
+    it('syncs DOM from localStorage and dispatches reconcile event', () => {
+      window.localStorage.setItem('theme-ui-color-mode', 'dark')
+      const listener = jest.fn()
+      window.addEventListener('theme-ui-reconcile-color-mode', listener)
+
+      onRouteUpdateThemeUiColorMode()
+
+      expect(document.documentElement.getAttribute('data-theme-ui-color-mode')).toBe('dark')
+      expect(listener).toHaveBeenCalled()
+    })
+
+    it('does not throw when CustomEvent is unavailable', () => {
+      const original = window.CustomEvent
+      window.CustomEvent = undefined
+      window.localStorage.setItem('theme-ui-color-mode', 'default')
+      expect(() => onRouteUpdateThemeUiColorMode()).not.toThrow()
+      window.CustomEvent = original
+    })
+  })
+})

package/src/gatsby/on-pre-render-html-sort.js

@@ -0,0 +1,21 @@
+import { CHRONOGROVE_COLOR_MODE_HEAD_PRIORITY_KEYS } from '../color-mode/constants.js'
+
+/**
+ * Gatsby `onPreRenderHTML`: move Theme UI color-mode head entries (`theme-ui-no-flash`, `html-bg-color`,
+ * `theme-ui-color-mode-fallback`) before other head components to minimize flash and ordering issues.
+ *
+ * @param {{ getHeadComponents: () => unknown[], replaceHeadComponents: (c: unknown[]) => void }} api
+ */
+export function onPreRenderHTMLSortThemeUiColorModeFirst({ getHeadComponents, replaceHeadComponents }) {
+  const headComponents = getHeadComponents()
+  const priorityKeys = CHRONOGROVE_COLOR_MODE_HEAD_PRIORITY_KEYS
+  const sorted = [...headComponents].sort((a, b) => {
+    const aKey = a?.key ?? ''
+    const bKey = b?.key ?? ''
+    const aFirst = priorityKeys.includes(aKey) ? -1 : 0
+    const bFirst = priorityKeys.includes(bKey) ? -1 : 0
+    if (aFirst !== bFirst) return aFirst - bFirst
+    return 0
+  })
+  replaceHeadComponents(sorted)
+}

package/src/gatsby/on-route-update-color-mode.js

@@ -0,0 +1,14 @@
+import { RECONCILE_COLOR_MODE_EVENT } from '../color-mode/constants.js'
+import { scheduleThemeUiColorModeSync } from '../color-mode/browser-sync.js'
+
+/**
+ * Call from Gatsby `onRouteUpdate` so Theme UI color mode stays aligned with `localStorage` and the
+ * document after client-side navigations. Dispatches {@link RECONCILE_COLOR_MODE_EVENT} for app code
+ * that listens (e.g. React context reconciliation).
+ */
+export function onRouteUpdateThemeUiColorMode() {
+  scheduleThemeUiColorModeSync()
+  if (typeof window !== 'undefined' && typeof window.CustomEvent === 'function') {
+    window.dispatchEvent(new window.CustomEvent(RECONCILE_COLOR_MODE_EVENT))
+  }
+}

package/.turbo/turbo-test$colon$coverage.log

@@ -1,44 +0,0 @@
-
-> @chronogrove/ui@0.76.0 test:coverage /Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui
-> jest --config jest.config.cjs --coverage --colors --maxWorkers=2
-
-PASS src/color-mode/browser-sync.spec.js
-PASS src/skip-nav/SkipNavLink.spec.js
-PASS src/color-toggle.spec.js
-PASS src/emotion-cache.spec.js
-PASS src/skip-nav/SkipNavContent.spec.js
-PASS src/provider.spec.js
-PASS src/color-mode/normalize.spec.js
-PASS src/button.spec.js
-PASS src/color-mode/browser-sync.node.spec.js
-PASS src/helpers/isDarkMode.spec.js
-PASS src/theme.spec.js
-PASS src/color-mode/head-inline.spec.js
-PASS src/color-mode/resolve-theme-colors.spec.js
---------------------------|---------|----------|---------|---------|-------------------
-File                      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------------------|---------|----------|---------|---------|-------------------
-All files                 |   98.75 |    96.15 |     100 |    98.7 |                   
- src                      |     100 |    88.88 |     100 |     100 |                   
-  button.js               |     100 |      100 |     100 |     100 |                   
-  color-toggle.js         |     100 |      100 |     100 |     100 |                   
-  emotion-cache.js        |     100 |    83.33 |     100 |     100 | 7                 
-  provider.js             |     100 |      100 |     100 |     100 |                   
- src/color-mode           |   98.21 |    98.21 |     100 |   98.14 |                   
-  browser-sync.js         |   97.05 |    96.66 |     100 |   96.87 | 44                
-  constants.js            |     100 |      100 |     100 |     100 |                   
-  head-inline.js          |     100 |      100 |     100 |     100 |                   
-  normalize.js            |     100 |      100 |     100 |     100 |                   
-  resolve-theme-colors.js |     100 |      100 |     100 |     100 |                   
- src/helpers              |     100 |      100 |     100 |     100 |                   
-  isDarkMode.js           |     100 |      100 |     100 |     100 |                   
- src/skip-nav             |     100 |     92.3 |     100 |     100 |                   
-  SkipNavContent.js       |     100 |      100 |     100 |     100 |                   
-  SkipNavLink.js          |     100 |     90.9 |     100 |     100 | 7                 
---------------------------|---------|----------|---------|---------|-------------------
-
-Test Suites: 13 passed, 13 total
-Tests:       39 passed, 39 total
-Snapshots:   1 passed, 1 total
-Time:        1.111 s
-Ran all test suites.

package/.turbo/turbo-test.log

@@ -1,168 +0,0 @@
-
-
-> @chronogrove/ui@0.76.0 test /Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui
-> jest --config jest.config.cjs
-
-Determining test suites to run...[?2026h
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
-
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.spec.js
-[?2026l[?2026h
- RUNS  src/skip-nav/SkipNavLink.spec.js
-[?2026l[?2026h
- RUNS  src/skip-nav/SkipNavLink.spec.js
-[?2026l[?2026h
- RUNS  src/skip-nav/SkipNavLink.spec.js
-[?2026l[?2026h
- RUNS  src/skip-nav/SkipNavLink.spec.js
-[?2026l[?2026h
- RUNS  src/skip-nav/SkipNavLink.spec.js
-[?2026l[?2026h
-
- RUNS  src/skip-nav/SkipNavLink.spec.js
-[?2026l[?2026h
- RUNS  src/provider.spec.js
-[?2026l[?2026h
- RUNS  src/provider.spec.js
-[?2026l[?2026h
-
- RUNS  src/provider.spec.js
-[?2026l[?2026h
- RUNS  src/button.spec.js
-[?2026l[?2026h
- RUNS  src/button.spec.js
-[?2026l[?2026h
-
- RUNS  src/button.spec.js
-[?2026l[?2026h
- RUNS  src/color-toggle.spec.js
-[?2026l[?2026h
- RUNS  src/color-toggle.spec.js
-[?2026l[?2026h
- RUNS  src/color-toggle.spec.js
-[?2026l[?2026h
- RUNS  src/color-toggle.spec.js
-[?2026l[?2026h
-
- RUNS  src/color-toggle.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.node.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.node.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/browser-sync.node.spec.js
-[?2026l[?2026h
-
- RUNS  src/color-mode/browser-sync.node.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/head-inline.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/head-inline.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/head-inline.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/head-inline.spec.js
-[?2026l[?2026h
-
- RUNS  src/color-mode/head-inline.spec.js
-[?2026l[?2026h
- RUNS  src/skip-nav/SkipNavContent.spec.js
-[?2026l[?2026h
- RUNS  src/skip-nav/SkipNavContent.spec.js
-[?2026l[?2026h
- RUNS  src/skip-nav/SkipNavContent.spec.js
-[?2026l[?2026h
-
- RUNS  src/skip-nav/SkipNavContent.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/theme.spec.js
-[?2026l[?2026h
-
- RUNS  src/theme.spec.js
-[?2026l[?2026h
- RUNS  src/helpers/isDarkMode.spec.js
-[?2026l[?2026h
- RUNS  src/helpers/isDarkMode.spec.js
-[?2026l[?2026h
-
- RUNS  src/helpers/isDarkMode.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/resolve-theme-colors.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/resolve-theme-colors.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/resolve-theme-colors.spec.js
-[?2026l[?2026h
-
- RUNS  src/color-mode/resolve-theme-colors.spec.js
-[?2026l[?2026h
- RUNS  src/emotion-cache.spec.js
-[?2026l[?2026h
- RUNS  src/emotion-cache.spec.js
-[?2026l[?2026h
- RUNS  src/emotion-cache.spec.js
-[?2026l[?2026h
- RUNS  src/emotion-cache.spec.js
-[?2026l[?2026h
-
- RUNS  src/emotion-cache.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/normalize.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/normalize.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/normalize.spec.js
-[?2026l[?2026h
- RUNS  src/color-mode/normalize.spec.js
-[?2026l[?2026h
-
- RUNS  src/color-mode/normalize.spec.js
-[?2026l[?2026h
-Test Suites: 13 passed, 13 total
-Tests:       40 passed, 40 total
-Snapshots:   1 passed, 1 total
-Time:        0.812 s, estimated 1 s
-Ran all test suites.
-[?2026h[?2026l

package/coverage/clover.xml

@@ -1,131 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1775797645097" clover="3.2.0">
-  <project timestamp="1775797645097" name="All files">
-    <metrics statements="77" coveredstatements="77" conditionals="78" coveredconditionals="76" methods="23" coveredmethods="23" elements="178" coveredelements="176" complexity="0" loc="77" ncloc="77" packages="4" files="12" classes="12"/>
-    <package name="src">
-      <metrics statements="12" coveredstatements="12" conditionals="9" coveredconditionals="8" methods="6" coveredmethods="6"/>
-      <file name="button.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/button.js">
-        <metrics statements="2" coveredstatements="2" conditionals="1" coveredconditionals="1" methods="1" coveredmethods="1"/>
-        <line num="4" count="1" type="cond" truecount="1" falsecount="0"/>
-        <line num="5" count="1" type="stmt"/>
-      </file>
-      <file name="color-toggle.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/color-toggle.js">
-        <metrics statements="3" coveredstatements="3" conditionals="2" coveredconditionals="2" methods="2" coveredmethods="2"/>
-        <line num="7" count="2" type="stmt"/>
-        <line num="9" count="2" type="stmt"/>
-        <line num="13" count="2" type="cond" truecount="2" falsecount="0"/>
-      </file>
-      <file name="emotion-cache.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/emotion-cache.js">
-        <metrics statements="6" coveredstatements="6" conditionals="6" coveredconditionals="5" methods="2" coveredmethods="2"/>
-        <line num="3" count="2" type="stmt"/>
-        <line num="7" count="2" type="cond" truecount="1" falsecount="1"/>
-        <line num="9" count="2" type="stmt"/>
-        <line num="18" count="3" type="cond" truecount="2" falsecount="0"/>
-        <line num="19" count="2" type="stmt"/>
-        <line num="21" count="3" type="stmt"/>
-      </file>
-      <file name="provider.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/provider.js">
-        <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
-        <line num="6" count="1" type="stmt"/>
-      </file>
-    </package>
-    <package name="src.color-mode">
-      <metrics statements="54" coveredstatements="54" conditionals="56" coveredconditionals="56" methods="14" coveredmethods="14"/>
-      <file name="browser-sync.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/color-mode/browser-sync.js">
-        <metrics statements="32" coveredstatements="32" conditionals="30" coveredconditionals="30" methods="7" coveredmethods="7"/>
-        <line num="6" count="13" type="stmt"/>
-        <line num="7" count="13" type="cond" truecount="2" falsecount="0"/>
-        <line num="9" count="1" type="stmt"/>
-        <line num="11" count="13" type="stmt"/>
-        <line num="12" count="13" type="cond" truecount="2" falsecount="0"/>
-        <line num="13" count="7" type="stmt"/>
-        <line num="16" count="6" type="cond" truecount="2" falsecount="0"/>
-        <line num="17" count="5" type="stmt"/>
-        <line num="18" count="5" type="stmt"/>
-        <line num="19" count="5" type="cond" truecount="2" falsecount="0"/>
-        <line num="20" count="1" type="stmt"/>
-        <line num="22" count="4" type="cond" truecount="2" falsecount="0"/>
-        <line num="23" count="1" type="stmt"/>
-        <line num="25" count="3" type="cond" truecount="4" falsecount="0"/>
-        <line num="26" count="1" type="stmt"/>
-        <line num="31" count="3" type="cond" truecount="3" falsecount="0"/>
-        <line num="35" count="3" type="cond" truecount="2" falsecount="0"/>
-        <line num="39" count="8" type="cond" truecount="2" falsecount="0"/>
-        <line num="40" count="1" type="stmt"/>
-        <line num="42" count="7" type="stmt"/>
-        <line num="43" count="7" type="cond" truecount="2" falsecount="0"/>
-        <line num="44" count="1" type="stmt"/>
-        <line num="46" count="6" type="stmt"/>
-        <line num="47" count="6" type="stmt"/>
-        <line num="48" count="4" type="stmt"/>
-        <line num="49" count="4" type="stmt"/>
-        <line num="50" count="6" type="stmt"/>
-        <line num="51" count="6" type="stmt"/>
-        <line num="55" count="2" type="stmt"/>
-        <line num="56" count="2" type="cond" truecount="4" falsecount="0"/>
-        <line num="57" count="1" type="stmt"/>
-        <line num="59" count="1" type="stmt"/>
-      </file>
-      <file name="constants.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/color-mode/constants.js">
-        <metrics statements="3" coveredstatements="3" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
-        <line num="2" count="3" type="stmt"/>
-        <line num="5" count="3" type="stmt"/>
-        <line num="8" count="3" type="stmt"/>
-      </file>
-      <file name="head-inline.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/color-mode/head-inline.js">
-        <metrics statements="8" coveredstatements="8" conditionals="2" coveredconditionals="2" methods="4" coveredmethods="4"/>
-        <line num="4" count="4" type="stmt"/>
-        <line num="8" count="1" type="stmt"/>
-        <line num="9" count="1" type="stmt"/>
-        <line num="44" count="1" type="stmt"/>
-        <line num="45" count="1" type="stmt"/>
-        <line num="46" count="1" type="stmt"/>
-        <line num="47" count="1" type="stmt"/>
-        <line num="69" count="1" type="stmt"/>
-      </file>
-      <file name="normalize.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/color-mode/normalize.js">
-        <metrics statements="5" coveredstatements="5" conditionals="6" coveredconditionals="6" methods="1" coveredmethods="1"/>
-        <line num="2" count="23" type="cond" truecount="2" falsecount="0"/>
-        <line num="3" count="5" type="stmt"/>
-        <line num="5" count="18" type="cond" truecount="4" falsecount="0"/>
-        <line num="6" count="6" type="stmt"/>
-        <line num="8" count="12" type="stmt"/>
-      </file>
-      <file name="resolve-theme-colors.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/color-mode/resolve-theme-colors.js">
-        <metrics statements="6" coveredstatements="6" conditionals="18" coveredconditionals="18" methods="2" coveredmethods="2"/>
-        <line num="2" count="12" type="cond" truecount="2" falsecount="0"/>
-        <line num="3" count="6" type="stmt"/>
-        <line num="5" count="6" type="stmt"/>
-        <line num="13" count="2" type="cond" truecount="2" falsecount="0"/>
-        <line num="14" count="2" type="cond" truecount="2" falsecount="0"/>
-        <line num="15" count="2" type="stmt"/>
-      </file>
-    </package>
-    <package name="src.helpers">
-      <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
-      <file name="isDarkMode.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/helpers/isDarkMode.js">
-        <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
-        <line num="1" count="9" type="stmt"/>
-      </file>
-    </package>
-    <package name="src.skip-nav">
-      <metrics statements="10" coveredstatements="10" conditionals="13" coveredconditionals="12" methods="2" coveredmethods="2"/>
-      <file name="SkipNavContent.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/skip-nav/SkipNavContent.js">
-        <metrics statements="3" coveredstatements="3" conditionals="2" coveredconditionals="2" methods="1" coveredmethods="1"/>
-        <line num="3" count="1" type="stmt"/>
-        <line num="7" count="1" type="stmt"/>
-        <line num="14" count="1" type="stmt"/>
-      </file>
-      <file name="SkipNavLink.js" path="/Users/chrisvogt/Code/gatsby-theme-chronogrove/packages/ui/src/skip-nav/SkipNavLink.js">
-        <metrics statements="7" coveredstatements="7" conditionals="11" coveredconditionals="10" methods="1" coveredmethods="1"/>
-        <line num="6" count="1" type="stmt"/>
-        <line num="10" count="4" type="stmt"/>
-        <line num="11" count="4" type="stmt"/>
-        <line num="12" count="4" type="cond" truecount="4" falsecount="0"/>
-        <line num="13" count="4" type="cond" truecount="4" falsecount="0"/>
-        <line num="15" count="4" type="stmt"/>
-        <line num="70" count="1" type="stmt"/>
-      </file>
-    </package>
-  </project>
-</coverage>