fix: color mode utilities and semantic tokens

Author: codebender828

packages/c-accordion/tests/c-accordion.cy.tsx

@@ -2,5 +2,5 @@ import { CAccordion } from "../src"
 import { h } from "vue"
 
 it("should render properly", () => {
-  cy.mount(<CAccordion></CAccordion>)
+  cy.mount(<CAccordion />)
 })

packages/c-alert/examples/base-alert.vue

@@ -1,3 +1,7 @@
 <template>
   <c-alert> Base Alert </c-alert>
 </template>
+
+<script setup lang="ts">
+import { DarkMode } from "@chakra-ui/vue-next"
+</script>

packages/c-color-mode/src/color-mode-provider.ts

@@ -0,0 +1,213 @@
+import { __DEV__ } from "@chakra-ui/utils"
+import {
+  computed,
+  defineComponent,
+  inject,
+  h,
+  Fragment,
+  provide,
+  readonly,
+  Ref,
+  ref,
+  watch,
+  watchEffect,
+  getCurrentInstance,
+} from "vue"
+import { ColorMode, ColorModeRef, getColorModeUtils } from "./color-mode.utils"
+import { StorageManager } from "./storage-manager"
+import { createContext } from "@chakra-ui/vue-utils"
+import { mountColorModeScript } from './color-mode-script'
+
+export type { ColorModeRef }
+
+export interface ColorModeOptions {
+  initialColorMode?: ColorModeRef
+  useSystemColorMode?: boolean
+}
+
+export type ColorModeContext = {
+  colorMode: ColorModeRef
+  toggleColorMode: () => void
+}
+
+export interface InternalColorModeContext {
+  colorModeManager: StorageManager
+  toggleColorMode(): void
+  colorMode: Ref<Exclude<ColorMode, "system">>
+  useSystemColorMode?: boolean
+  disableTransitionOnChange?: boolean
+  initialColorMode?: ColorMode
+}
+
+function getTheme(manager: StorageManager, fallback?: ColorMode) {
+  return manager.type === "cookie" && manager.ssr
+    ? manager.get(fallback)
+    : fallback
+}
+
+export interface IColorModeContext {
+  colorMode: ColorModeRef
+  toggleColorMode: () => void
+  forced?: boolean
+}
+
+const [ColorModeProvider, useColorModeContext] =
+  createContext<IColorModeContext>({
+    name: "ColorModeContext",
+  })
+
+interface SetupColorModeContext {
+  _colorMode: ColorModeRef
+  colorModeManager: StorageManager
+  useSystemColorMode?: boolean
+  disableTransitionOnChange?: boolean
+  initialColorMode?: ColorMode
+}
+
+export const AppColorModeContextSymbol = Symbol("AppColorModeContextSymbol")
+
+export function setupColorModeContext(
+  app: any,
+  {
+    _colorMode,
+    colorModeManager,
+    useSystemColorMode,
+    disableTransitionOnChange,
+    initialColorMode,
+  }: SetupColorModeContext
+) {
+
+  mountColorModeScript({
+    initialColorMode: _colorMode.value,
+    type: colorModeManager.type,
+  })
+
+  const colorMode = computed({
+    get: () =>
+      (getTheme(colorModeManager, _colorMode.value) as Exclude<
+        ColorMode,
+        "system"
+      >) || (_colorMode.value as Exclude<ColorMode, "system">),
+    set: (value: Exclude<ColorMode, "system">) => {
+      _colorMode.value = value
+    },
+  })
+
+  const utils = computed(() =>
+    getColorModeUtils({ preventTransition: disableTransitionOnChange })
+  )
+
+  const managerValue = colorModeManager.get()
+
+  if (managerValue) {
+    setColorMode(managerValue)
+  } else if (initialColorMode === "system") {
+    setColorMode("system")
+  } else {
+    setColorMode(colorMode.value)
+  }
+
+  const resolvedColorMode = computed(() => getTheme(colorModeManager))
+
+
+  function setColorMode(value: ColorMode | "system") {
+    const { setClassName, setDataset, getSystemTheme } = utils.value
+    const resolved = value === "system" ? getSystemTheme() : value
+    colorMode.value = resolved
+
+    setClassName(resolved === "dark")
+    setDataset(resolved)
+
+    colorModeManager.set(resolved)
+  }
+
+  const toggleColorMode = () => {
+    if (colorMode.value === "light") {
+      setColorMode("dark")
+    } else {
+      setColorMode("light")
+    }
+  }
+
+  watch(
+    () => useSystemColorMode,
+    (nextUseSystemColorMode) => {
+      if (typeof document !== "undefined") {
+        if (!nextUseSystemColorMode) return
+        return utils.value.addListener(setColorMode)
+      }
+    },
+    {
+      immediate: true,
+    }
+  )
+
+  app.provide(AppColorModeContextSymbol, {
+    colorMode: computed(() => colorMode.value),
+    toggleColorMode,
+  })
+}
+
+/** Injects color mode into component instance */
+export const useColorMode = () => {
+  const context = inject<IColorModeContext>(AppColorModeContextSymbol, {
+    colorMode: computed(() => "light" as Exclude<ColorMode, "system">),
+    toggleColorMode: () => { },
+  })
+  return context
+}
+
+/**
+ * Change value based on color mode.
+ *
+ * @param lightValue the light mode value
+ * @param darkValue the dark mode value
+ *
+ * @example
+ *
+ * ```js
+ * const Icon = useColorModeValue(MoonIcon, SunIcon)
+ * ```
+ */
+export function useColorModeValue<TLight = unknown, TDark = unknown>(
+  lightValue: TLight,
+  darkValue: TDark
+) {
+  const { colorMode } = useColorMode()
+  const modeValue = ref()
+
+  watchEffect(() => {
+    modeValue.value = colorMode.value === "dark" ? darkValue : lightValue
+  })
+
+  return modeValue
+}
+
+
+export const DarkMode = defineComponent((_, { slots, attrs }) => {
+  provide(AppColorModeContextSymbol, {
+    colorMode: computed(() => "dark" as Exclude<ColorMode, "system">),
+    toggleColorMode: () => { },
+    forced: true
+  })
+
+  return () => (
+    <>
+      {slots.default?.()}
+    </>
+  )
+})
+
+export const LightMode = defineComponent((_, { slots, attrs }) => {
+  provide(AppColorModeContextSymbol, {
+    colorMode: computed(() => "light" as Exclude<ColorMode, "system">),
+    toggleColorMode: () => { },
+    forced: true
+  })
+
+  return () => (
+    <>
+      {slots.default?.()}
+    </>
+  )
+})

packages/c-color-mode/src/color-mode-provider.tsx

@@ -0,0 +1,49 @@
+export type ColorModeScriptProps = {
+  type?: "localStorage" | "cookie"
+  initialColorMode?: "light" | "dark" | "system"
+  storageKey?: string
+  nonce?: string
+}
+
+const VALID_VALUES = new Set(["dark", "light", "system"])
+
+/**
+ * runtime safe-guard against invalid color mode values
+ */
+function normalize(initialColorMode: "light" | "dark" | "system") {
+  let value = initialColorMode
+  if (!VALID_VALUES.has(value)) value = "light"
+  return value
+}
+
+export function getScriptSrc(props: ColorModeScriptProps = {}) {
+  const {
+    initialColorMode = "light",
+    type = "localStorage",
+    storageKey: key = "chakra-ui-color-mode",
+  } = props
+
+  // runtime safe-guard against invalid color mode values
+  const init = normalize(initialColorMode)
+
+  const isCookie = type === "cookie"
+
+  const cookieScript = `(function(){try{var a=function(o){var l="(prefers-color-scheme: dark)",v=window.matchMedia(l).matches?"dark":"light",e=o==="system"?v:o,d=document.documentElement,m=document.body,i="chakra-ui-light",n="chakra-ui-dark",s=e==="dark";return m.classList.add(s?n:i),m.classList.remove(s?i:n),d.style.colorScheme=e,d.dataset.theme=e,e},u=a,h="${init}",r="${key}",t=document.cookie.match(new RegExp("(^| )".concat(r,"=([^;]+)"))),c=t?t[2]:null;c?a(c):document.cookie="".concat(r,"=").concat(a(h),"; max-age=31536000; path=/")}catch(a){}})();
+  `
+
+  const localStorageScript = `(function(){try{var a=function(c){var v="(prefers-color-scheme: dark)",h=window.matchMedia(v).matches?"dark":"light",r=c==="system"?h:c,o=document.documentElement,s=document.body,l="chakra-ui-light",d="chakra-ui-dark",i=r==="dark";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.theme=r,r},n=a,m="${init}",e="${key}",t=localStorage.getItem(e);t?a(t):localStorage.setItem(e,a(m))}catch(a){}})();
+  `
+
+  const fn = isCookie ? cookieScript : localStorageScript
+  return `!${fn}`.trim()
+}
+
+export function mountColorModeScript(props: ColorModeScriptProps = {}) {
+  const { nonce } = props
+
+  const script = document.createElement("script")
+  script.id = "chakra-script"
+  script.nonce = nonce
+  script.innerHTML = getScriptSrc(props)
+  document.head.appendChild(script)
+}