docs(features): fix pr comments

Author: carwack

docs/pages/features/chakra-factory.md

@@ -1,6 +1,6 @@
 # Chakra Factory
 
-Chakra factory serves as an **object of chakra enabled JSX elements**, and also
+Chakra factory serves as an **object of chakra enabled HTML elements**, and also
 **a function that can be used to enable custom component** to receive chakra's
 style props.
 
@@ -14,7 +14,7 @@ Create base HTML elements with theme-aware style props using `chakra.<element>`
 notation. For example, if you want a plain HTML button with the ability to pass
 chakra styles, you can write `<chakra.button />`.
 
-```jsx
+```vue
 <chakra.button
   px="3"
   py="2"
@@ -31,16 +31,16 @@ syntax is available for common HTML elements. See the reference for the full
 [list of elements](https://github.com/chakra-ui/chakra-ui/blob/main/packages/system/src/system.utils.ts#L9)
 supported.
 
-```jsx
+```vue
 <chakra.h1 fontSize="lg"> Heading </chakra.h1>
 ```
 
 ## Chakra factory function
 
-This is a function that converts **non-chakra components** or **jsx element** to
+This is a function that converts **non-chakra components** or **HTML element** to
 chakra-enabled components so you can pass style props to them.
 
-Consider a package called `my-awesome-components`, let's use the chakra factory
+Consider a component called `my-awesome-component`, let's use the chakra factory
 function to make it possible to pass style props.
 
 The function will infer the prop types from the wrapped component and also add
@@ -67,7 +67,7 @@ chakra style props.
 In some instances, you might need to attach specific styles to the component
 wrapped in the chakra factory
 
-```jsx
+```vue
 const ChakraAwesomeComponent = chakra(awesomeComponent, {
   baseStyle: {
     bg: "papayawhip",
@@ -76,9 +76,9 @@ const ChakraAwesomeComponent = chakra(awesomeComponent, {
 })
 ```
 
-You can also use the chakra factory on jsx-elements as well.
+You can also use the chakra factory on HTML elements as well.
 
-```jsx
+```vue
 const Card = chakra("div", {
   baseStyle: {
     shadow: "lg",
@@ -95,7 +95,7 @@ with theme-aware style props using `chakra.<element>` notation.
 In your `main.ts` file make sure to import the chakra object from the '@chakra-ui/vue-next' package. 
 Use a forEach() function to loop over all the dom elements and push them through the factory function (chakra()).
 
-```jsx
+```vue
 import { createApp } from 'vue'
 import App from './App.vue'
 import ChakraUIVuePlugin, { chakra } from '@chakra-ui/vue-next'

docs/pages/features/css-variables.md

@@ -28,7 +28,7 @@ default theme) to CSS variables internally so you don't have to.
 
 Given a theme object that looks like this:
 
-```jsx live=false
+```js
 const theme = {
   fontSizes: {
     lg: '18px',
@@ -61,7 +61,7 @@ CSS variables that look like:
 When using Chakra's components, we manage the conversion of theme tokens to
 their respective CSS variable.
 
-```jsx live=false
+```vue
 // You type this
 <c-box color="gray.100" />
 
@@ -78,7 +78,7 @@ their respective CSS variable.
 In certain scenarios, you might need to style components that are not managed by
 Chakra. In this case, you can use the raw CSS variable values.
 
-```jsx live=false
+```vue
 // let's say you have an embedded form
 <FormiumForm />
 ```
@@ -94,7 +94,7 @@ You can write custom CSS to style the components
 
 or wrap the component in `<c-box/>` and style it with convenience.
 
-```jsx live=false
+```vue
 <c-box :sx="{ '.formium': { bg: 'gray.50', color: 'gray.700' } }">
   <FormiumForm />
 </c-box>
@@ -108,7 +108,7 @@ When using the `sx` prop or components created with the `chakra` factory,
 you can create variables that reference theme tokens. This makes it possible to change property values
 based on breakpoint, or light/dark mode with ease.
 
-```jsx live=false
+```vue
 <c-box
   :sx="{
     // "colors.gray.100" is shorthand for `var(--chakra-colors-gray.100)`

docs/pages/features/gradient.md

@@ -50,7 +50,7 @@ Let's create a basic gradient from `green.200` to `pink.500`
 
 You can use both theme-aware color tokens or raw CSS color values.
 
-```jsx
+```vue
 <c-box w="100%" h="200px" bgGradient="linear(to-l, #7928CA, #FF0080)" />
 ```
 
@@ -59,7 +59,7 @@ You can use both theme-aware color tokens or raw CSS color values.
 By adding more color-stop points on the gradient line, you can create a highly
 customized transition between multiple colors.
 
-```jsx
+```vue
 <c-box
   w="100%"
   h="200px"
@@ -70,7 +70,7 @@ customized transition between multiple colors.
 Following the CSS gradient specification, you can also define the distribution
 of the color stops
 
-```jsx
+```vue
 <c-box
   w="100%"
   h="200px"
@@ -83,7 +83,7 @@ of the color stops
 To add a text gradient, pass the `bgGradient` following the API and `bgClip`
 prop to `text`.
 
-```jsx
+```vue
 <c-text
   bgGradient="linear(to-l, #7928CA, #FF0080)"
   bgClip="text"
@@ -99,7 +99,7 @@ prop to `text`.
 You can control the responsiveness of gradients by specifying the gradients at
 the different breakpoints.
 
-```jsx
+```vue
 <c-box
   w="100%"
   h="200px"
@@ -118,7 +118,7 @@ You can change the gradient of an element based on common CSS pseudo attributes
 
 For example, on hover, add the gradient you wish to have.
 
-```jsx
+```vue
 <c-box
   as="button"
   p="4"

docs/pages/features/responsive-styles.md

@@ -31,7 +31,7 @@ is the recommended method.
 
 Let's say you have a `Box` with the following properties:
 
-```jsx live=false
+```vue
 <c-box bg="red.200" w="400px">
   This is a box
 </c-box>
@@ -40,7 +40,7 @@ Let's say you have a `Box` with the following properties:
 To make the `width` or `w` responsive using the array syntax, here's what you
 need to do:
 
-```jsx live=false
+```vue
 <c-box bg="red.200" :w=[300, 400, 500]>
   This is a box
 </c-box>
@@ -82,14 +82,14 @@ undefined alias key will define the base, non-responsive value.
 
 Let's say you have a `Text` that looks like this:
 
-```jsx live=false
+```vue
 <c-text fontSize="40px">This is a text</c-text>
 ```
 
 To make the `fontSize` responsive using the object syntax, here's what you need
 to do:
 
-```jsx live=false
+```vue
 <c-text :fontSize={ base: "24px", md: "40px", lg: "56px" }>
   This is responsive text
 </c-text>
@@ -109,8 +109,8 @@ Here's how to interpret this syntax:
 This works for every style prop in the theme specification, which means you can
 change the style of most properties at a given breakpoint.
 
-```jsx live=false
-<>
+```vue
+<template>
   <c-box
     :height={
       base: "100%", // 0-48em
@@ -133,15 +133,15 @@ change the style of most properties at a given breakpoint.
   <c-box bg="papayawhip" :p=[2, 4, 6, 8]>
     Padding
   </c-box>
-</>
+</template>
 ```
 
 ## Under the hood
 
 This shortcut is an alternative to writing media queries out by hand. Given the
 following:
 
-```jsx live=false
+```vue
 <c-box :width=[1, 1 / 2, 1 / 4] />
 or
 <c-box :width="['100%', 0.5, 0.25]" />
@@ -199,7 +199,7 @@ To define custom breakpoints, install `@chakra-ui/theme-tools`, and use the
 > Note: Ensure the css unit of your breakpoints are the same. Use all `px` or
 > all `em`, don't mix them.
 
-```jsx live=false
+```vue
 // 1. Import the utilities
 import { extendTheme } from "@chakra-ui/vue-next"
 import { createBreakpoints } from "@chakra-ui/theme-tools"

docs/pages/features/text-and-layer-styles.md

@@ -1,6 +1,6 @@
 # Text and Layer Styles
 
-In most projects you might find yourself repeating specific text properties
+In most projects, you might find yourself repeating specific text properties
 (font size, font weight, line height) or layer properties (bg, color, shadow).
 This can be painful as your project grows in size.
 
@@ -11,7 +11,7 @@ consistent.
 
 Layer Styles allow you to save a combination of styling attributes to re-use in
 other components. Once created, pass the `layerStyle` prop to any component and
-chakra will resolve the styles accordingly.
+Chakra will resolve the styles accordingly.
 
 Properties defined in a layer style
 
@@ -21,7 +21,7 @@ Properties defined in a layer style
 - Box shadow
 - Opacity
 
-```jsx live=false
+```vue
 // 1. Import `extendTheme`
 import { extendTheme } from '@chakra-ui/vue-next'
 
@@ -79,7 +79,7 @@ Properties defined in a text style
 - Text decoration (strikethrough and underline)
 - Text transform (uppercase, lowercase, and capitalization)
 
-```jsx live=false
+```vue
 // 1. Import `extendTheme`
 import { extendTheme } from '@chakra-ui/vue-next'