add colors example to docs

website/content/docs/components/stepper/usage.mdx

@@ -119,6 +119,52 @@ function Example() {
 render(<Example />)
 ```
 
+## Changing the colors
+
+```jsx manual=true
+const steps = [
+  { title: 'First', description: 'Contact Info' },
+  { title: 'Second', description: 'Date & Time' },
+  { title: 'Third', description: 'Select Rooms' },
+]
+
+function Example() {
+  const { activeStep } = useSteps({
+    index: 1,
+    count: steps.length,
+  })
+
+  return (
+    <Stepper index={activeStep} height='400px' gap='0'>
+      {steps.map((step, index) => (
+        <Step key={index}>
+          <StepIndicator sx={{
+              '[data-status=complete] &': { background: 'purple', borderColor: 'black'},
+              '[data-status=active] &': { background: 'yellow', borderColor: 'black'},
+              '[data-status=incomplete] &': { background: 'red', borderColor: 'black'}
+          >
+            <StepStatus
+              complete={<StepIcon />}
+              incomplete={<StepNumber />}
+              active={<StepNumber />}
+            />
+          </StepIndicator>
+
+          <Box flexShrink='0'>
+            <StepTitle>{step.title}</StepTitle>
+            <StepDescription>{step.description}</StepDescription>
+          </Box>
+
+          <StepSeparator _horizontal={{ backgroundColor: 'red' }} />
+        </Step>
+      ))}
+    </Stepper>
+  )
+}
+
+render(<Example />)
+```
+
 ## Changing the size
 
 To change the size of the step indicator, you can pass the `size` prop to the