feat: improve the code component by adding variants

apps/docs/content/components/code.mdx

@@ -32,8 +32,20 @@ import { Code } from '@pillar-ui/core'
 
 <Playground direction="column" name="codeColor" root="code" />
 
+### Variant
+
+<Prop defaultValue="soft" type="'solid' | 'mixed' | 'outline' | 'soft'" />{' '}
+
+<Playground direction="column" name="codeVariant" root="code" />
+
 ### Size
 
 <Prop defaultValue="4" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
 
 <Playground direction="column" name="codeSize" root="code" />
+
+### Transform
+
+<Prop type="'capitalize' | 'capitalize-once' | 'lowercase' | 'uppercase'" />
+
+<Playground direction="column" name="codeTransform" root="code" />

apps/docs/src/app/_components/playground/code/codeTransform.tsx

@@ -0,0 +1,13 @@
+import { Code } from '@pillar-ui/core'
+
+export const CodeTransform = () => {
+  return (
+    <>
+      <Code>css cascade</Code>
+      <Code transform="capitalize">css cascade</Code>
+      <Code transform="capitalize-once">css cascade</Code>
+      <Code transform="lowercase">css cascade</Code>
+      <Code transform="uppercase">css cascade</Code>
+    </>
+  )
+}

apps/docs/src/app/_components/playground/code/codeVariant.tsx

@@ -0,0 +1,12 @@
+import { Code } from '@pillar-ui/core'
+
+export const CodeVariant = () => {
+  return (
+    <>
+      <Code variant="solid">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code variant="mixed">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code variant="soft">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code variant="outline">{`console.log('Hello world Every thing is OK')`}</Code>
+    </>
+  )
+}

apps/stories/stories/code.stories.tsx

@@ -9,6 +9,17 @@ const meta: Meta<typeof Code> = {
 
 export default meta
 
+export const CodeVariants = () => {
+  return (
+    <Flex gap="4" direction="col" justify="center">
+      <Code variant="mixed">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code variant="outline">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code variant="soft">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code variant="solid">{`console.log('Hello world Every thing is OK')`}</Code>
+    </Flex>
+  )
+}
+
 export const CodeColors = () => {
   return (
     <Flex gap="4" direction="col" justify="center">
@@ -23,6 +34,18 @@ export const CodeColors = () => {
   )
 }
 
+export const CodeTransform = () => {
+  return (
+    <Flex gap="4" direction="col" justify="center">
+      <Code>CSS Cascade</Code>
+      <Code transform="capitalize">CSS Cascade</Code>
+      <Code transform="capitalize-once">CSS Cascade</Code>
+      <Code transform="lowercase">CSS Cascade</Code>
+      <Code transform="uppercase">CSS Cascade</Code>
+    </Flex>
+  )
+}
+
 export const CodeSizes = () => {
   return (
     <Flex gap="4" direction="col" justify="center">

packages/pillar-core/src/core/code/_code.css

@@ -1,13 +1,14 @@
 .co- {
   width: fit-content;
   display: inline-block;
-  padding: 0.125rem 0.5rem;
+  padding: 0 0.25rem;
+  line-height: 1.5;
   /*
     These properties serve as fallbacks. If the corresponding utility functions are
     unavailable, these properties take priority. However, if specific props related to
     Code are provided, they will override these properties.
   */
   border-radius: var(--code-rad, 0.125em);
-  font-size: var(--code-size, 0.875rem);
+  font-size: var(--code-size, 0.85rem);
   text-transform: var(--code-transform, capitalize);
 }

packages/pillar-core/src/core/code/code.type.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react'
-import type { Color, Size, Corner, Transform } from '../../types'
+import type { Color, Size, Corner, Transform, Variant } from '../../types'
 
 export interface CodeProps {
   children: ReactNode
   color?: Color
   size?: Size
   corner?: Omit<Corner, 'circle'>
   transform?: Transform
+  variant?: Variant
 }

packages/pillar-core/src/core/code/index.tsx

@@ -5,9 +5,10 @@ import type { ForwardRefComponent } from '../../types/polymorphic.type'
 import type { CodeProps } from './code.type'
 
 export const Code = forwardRef(
-  ({ as: Tag = 'code', color = 'b', size, corner, children, transform, className, ...rest }, ref) => {
-    const classNames = cx(`co- V-soft C-${color}`, {
+  ({ as: Tag = 'code', color = 'b', size, variant = 'soft', corner, children, transform, className, ...rest }, ref) => {
+    const classNames = cx(`co- C-${color}`, {
       [`Fs-${size}`]: size,
+      [`V-${variant}`]: variant,
       [`Tt-${transform}`]: transform,
       [`R-${corner}`]: corner,
       [className!]: className,