fix: update CLightMode and CDarkMode component names

codebender828 · codebender828 · commit 06cc6b0f88eb · 2023-01-22T15:43:40.000+08:00
diff --git a/.changeset/great-brooms-add.md b/.changeset/great-brooms-add.md
@@ -0,0 +1,45 @@
+---
+"@chakra-ui/c-visually-hidden": minor
+"@chakra-ui/c-theme-provider": minor
+"@chakra-ui/vue-composables": minor
+"@chakra-ui/c-close-button": minor
+"@chakra-ui/c-form-control": minor
+"@chakra-ui/c-media-query": minor
+"@chakra-ui/c-scroll-lock": minor
+"@chakra-ui/c-breadcrumb": minor
+"@chakra-ui/c-color-mode": minor
+"@chakra-ui/c-focus-lock": minor
+"@chakra-ui/c-accordion": minor
+"@chakra-ui/c-pin-input": minor
+"@chakra-ui/c-checkbox": minor
+"@chakra-ui/c-skip-nav": minor
+"@chakra-ui/vue-test-utils": minor
+"@chakra-ui/vue-auto-import": minor
+"@chakra-ui/c-spinner": minor
+"@chakra-ui/c-avatar": minor
+"@chakra-ui/c-button": minor
+"@chakra-ui/c-motion": minor
+"@chakra-ui/c-popper": minor
+"@chakra-ui/c-portal": minor
+"@chakra-ui/vue-a11y": minor
+"@chakra-ui/c-alert": minor
+"@chakra-ui/c-image": minor
+"@chakra-ui/c-input": minor
+"@chakra-ui/c-modal": minor
+"@chakra-ui/c-reset": minor
+"@chakra-ui/c-code": minor
+"@chakra-ui/c-flex": minor
+"@chakra-ui/c-icon": minor
+"@chakra-ui/vue-layout": minor
+"@chakra-ui/vue-styled": minor
+"@chakra-ui/vue-system": minor
+"@chakra-ui/c-tag": minor
+"@chakra-ui/vue-utils": minor
+"@chakra-ui/vue-next": minor
+"@chakra-ui/nuxt-next": minor
+---
+
+- Feat: Adds `colorModeManager` Storage entity to cache color mode from local
+  env
+- Fix: adds semantic tokens support to theme
+- Feat: Add `CDarkMode` and `CLightMode` components
diff --git a/packages/c-alert/examples/base-alert.vue b/packages/c-alert/examples/base-alert.vue
@@ -1,7 +1,3 @@
 <template>
   <c-alert> Base Alert </c-alert>
 </template>
-
-<script setup lang="ts">
-import { DarkMode } from "@chakra-ui/vue-next"
-</script>
diff --git a/packages/c-avatar/index.tsx b/packages/c-avatar/index.tsx
@@ -1 +1 @@
-export * from './src'
+export * from "./src"
diff --git a/packages/c-avatar/tests/c-avatar.cy.tsx b/packages/c-avatar/tests/c-avatar.cy.tsx
@@ -41,7 +41,9 @@ describe("CAvatar", () => {
 
   it("renders default svg when name is not specified", () => {
     cy.mount(() =>
-      h(() => <CAvatar src="https://avatars.githubusercontent.com/u/21237954?v=4" />)
+      h(() => (
+        <CAvatar src="https://avatars.githubusercontent.com/u/21237954?v=4" />
+      ))
     )
 
     cy.get("svg")
diff --git a/packages/c-checkbox/index.tsx b/packages/c-checkbox/index.tsx
@@ -1 +1 @@
-export * from './src'
+export * from "./src"
diff --git a/packages/c-color-mode/src/color-mode-provider.tsx b/packages/c-color-mode/src/color-mode-provider.tsx
@@ -14,7 +14,7 @@ import {
 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'
+import { mountColorModeScript } from "./color-mode-script"
 
 export type { ColorModeRef }
 
@@ -74,7 +74,6 @@ export function setupColorModeContext(
     initialColorMode,
   }: SetupColorModeContext
 ) {
-
   mountColorModeScript({
     initialColorMode: _colorMode.value,
     type: colorModeManager.type,
@@ -107,7 +106,6 @@ export function setupColorModeContext(
 
   const resolvedColorMode = computed(() => getTheme(colorModeManager))
 
-
   function setColorMode(value: ColorMode | "system") {
     const { setClassName, setDataset, getSystemTheme } = utils.value
     const resolved = value === "system" ? getSystemTheme() : value
@@ -146,19 +144,21 @@ export function setupColorModeContext(
   })
 }
 
-/** 
+/**
  * Injects color mode into component instance
  */
 export const useColorMode = () => {
   const context = inject<IColorModeContext>(AppColorModeContextSymbol, {
     colorMode: computed(() => "light" as Exclude<ColorMode, "system">),
-    toggleColorMode: () => { },
+    toggleColorMode: () => {},
   })
 
   return {
     forced: context.forced,
-    colorMode: computed(() => context.colorMode.value as Exclude<ColorMode, "system">),
-    toggleColorMode: context.toggleColorMode
+    colorMode: computed(
+      () => context.colorMode.value as Exclude<ColorMode, "system">
+    ),
+    toggleColorMode: context.toggleColorMode,
   }
 }
 
@@ -188,31 +188,25 @@ export function useColorModeValue<TLight = unknown, TDark = unknown>(
   return modeValue
 }
 
-
-export const DarkMode = defineComponent((_, { slots, attrs }) => {
+export const CDarkMode = defineComponent((_, { slots, attrs }) => {
   provide(AppColorModeContextSymbol, {
     colorMode: computed(() => "dark" as Exclude<ColorMode, "system">),
-    toggleColorMode: () => { },
-    forced: true
+    toggleColorMode: () => {},
+    forced: true,
   })
 
-  return () => (
-    <>
-      {slots.default?.()}
-    </>
-  )
+  return () => <>{slots.default?.()}</>
 })
+CDarkMode.name = "CDarkMode"
 
-export const LightMode = defineComponent((_, { slots, attrs }) => {
+export const CLightMode = defineComponent((_, { slots, attrs }) => {
   provide(AppColorModeContextSymbol, {
     colorMode: computed(() => "light" as Exclude<ColorMode, "system">),
-    toggleColorMode: () => { },
-    forced: true
+    toggleColorMode: () => {},
+    forced: true,
   })
 
-  return () => (
-    <>
-      {slots.default?.()}
-    </>
-  )
+  return () => <>{slots.default?.()}</>
 })
+
+CLightMode.name = "CLightMode"
diff --git a/packages/c-image/index.tsx b/packages/c-image/index.tsx
@@ -1 +1 @@
-export * from './src'
+export * from "./src"
diff --git a/packages/c-media-query/index.tsx b/packages/c-media-query/index.tsx
@@ -1 +1 @@
-export * from './src'
+export * from "./src"
diff --git a/packages/c-pin-input/examples/index.ts b/packages/c-pin-input/examples/index.ts
@@ -1,3 +1,3 @@
 export * as BaseCPinInput from "./base-c-pin-input.vue"
 export * as WithClearButton from "./with-clear-button.vue"
-export * as WithEvents from "./with-events.vue"
+export * as WithEvents from "./with-events.vue"
diff --git a/packages/c-pin-input/index.ts b/packages/c-pin-input/index.ts
@@ -1 +1 @@
-export * from './src'
+export * from "./src"
diff --git a/packages/c-skip-nav/index.tsx b/packages/c-skip-nav/index.tsx
@@ -1 +1 @@
-export * from './src'
+export * from "./src"
diff --git a/packages/c-skip-nav/src/index.tsx b/packages/c-skip-nav/src/index.tsx
@@ -1 +1 @@
-export * from './c-skip-nav'
+export * from "./c-skip-nav"
diff --git a/packages/c-tag/src/c-tag.tsx b/packages/c-tag/src/c-tag.tsx
@@ -8,7 +8,14 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
  */
 
-import { h, defineComponent, PropType, DefineComponent, computed, watchEffect } from "vue"
+import {
+  h,
+  defineComponent,
+  PropType,
+  DefineComponent,
+  computed,
+  watchEffect,
+} from "vue"
 import {
   chakra,
   ChakraProps,
@@ -27,12 +34,12 @@ interface TagOptions {
 
 export interface CTagProps
   extends ChakraProps,
-  TagOptions,
-  ThemingProps<"CTag"> { }
+    TagOptions,
+    ThemingProps<"CTag"> {}
 
 export interface CTagLabelProps
   extends ChakraProps,
-  ThemingProps<"CTagLabel"> { }
+    ThemingProps<"CTagLabel"> {}
 
 const [StylesProvider, useTagStyles] = createStylesContext("CTag")
 
@@ -50,7 +57,6 @@ export const CTagLabel: ComponentWithProps<CTagLabelProps> = defineComponent({
       })
     )
 
-
     const styles = useTagStyles()
 
     return () => (
@@ -63,7 +69,7 @@ export const CTagLabel: ComponentWithProps<CTagLabelProps> = defineComponent({
 
 export interface CTagCloseButtonProps
   extends ChakraProps,
-  ThemingProps<"CTagCloseButton"> {
+    ThemingProps<"CTagCloseButton"> {
   isDisabled?: boolean
 }
 
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -44,7 +44,7 @@
 import { computed, getCurrentInstance, defineComponent, watchEffect } from "vue"
 import {
   chakra,
-  DarkMode,
+  CDarkMode,
   CReset,
   CIconButton,
   useColorMode,
@@ -54,7 +54,7 @@ import Sidebar from "./components/Sidebar.vue"
 import { routes } from "./router"
 
 export default defineComponent({
-  components: { Sidebar, CReset, CIconButton, DarkMode },
+  components: { Sidebar, CReset, CIconButton, DarkMode: CDarkMode },
   setup() {
     const { colorMode, toggleColorMode } = useColorMode()
 

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './src'`
	`1`	`+export * from "./src"`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,9 @@ describe("CAvatar", () => {`
`41`	`41`
`42`	`42`	`it("renders default svg when name is not specified", () => {`
`43`	`43`	`cy.mount(() =>`
`44`		`- h(() => <CAvatar src="https://avatars.githubusercontent.com/u/21237954?v=4" />)`
	`44`	`+ h(() => (`
	`45`	`+ <CAvatar src="https://avatars.githubusercontent.com/u/21237954?v=4" />`
	`46`	`+ ))`
`45`	`47`	`)`
`46`	`48`
`47`	`49`	`cy.get("svg")`