fix: all issues related to the color after changing them

apps/docs/content/themes/gradient.mdx

@@ -109,7 +109,7 @@ Remember, accessibility should always be a priority when designing with gradient
 ### Frequently Asked Questions
 
 **Q1: How do I apply gradients to my UI components?**
-If you want to add a gradient to a component that supports it, you can do so by using the gradient prop. For example, if you have a component that supports gradient styling and you want to apply a success-related gradient, you can use the gradient prop like this: gradient="suc". This will automatically apply the predefined success gradient style to the component.
+If you want to add a gradient to a component that supports it, you can do so by using the gradient prop. For example, if you have a component that supports gradient styling and you want to apply a success-related gradient, you can use the gradient prop like this: gradient="s". This will automatically apply the predefined success gradient style to the component.
 
 **Q2: Can I create my own custom gradient styles?**
 Yes, you can! Pillar UI allows you to customize gradient styles by overriding the default gradient variables with your preferred gradient definitions. Use the --\*-gradient-custom variables to apply your custom gradient styles.

apps/docs/src/app/_components/colors/copyButton.tsx

@@ -29,7 +29,7 @@ const CopyButton = ({ item, value }: CopyButtonProps) => {
   return (
     <IconButton
       variant={`${!copied ? 'outline' : 'soft'}`}
-      color="bg"
+      color="b"
       icon={copied ? <Check /> : <Copy />}
       title={`${copied ? 'Copied' : 'Copy'} Color`}
       onClick={handleClick}

apps/docs/src/app/_components/docHeader/index.tsx

@@ -46,7 +46,7 @@ export const DocHeader = ({ title, type, items, root, excerpt, slug, directory }
         <Button
           as="a"
           size="xs"
-          color="bg"
+          color="b"
           target="_blank"
           href={`https://github.com/HamzaAmar/pillar-ui/blob/main/packages/${root}/${directory}`}
           icon={<Github strokeWidth={2} />}
@@ -58,7 +58,7 @@ export const DocHeader = ({ title, type, items, root, excerpt, slug, directory }
           href="https://github.com/HamzaAmar/pillar-ui/issues"
           target="_blank"
           variant="soft"
-          color="bg"
+          color="b"
           icon={<Github strokeWidth={2} />}
           size="xs"
         >
@@ -69,7 +69,7 @@ export const DocHeader = ({ title, type, items, root, excerpt, slug, directory }
           href="https://github.com/HamzaAmar/pillar-ui/discussions"
           target="_blank"
           variant="soft"
-          color="bg"
+          color="b"
           icon={<Github strokeWidth={2} />}
           size="xs"
         >

apps/docs/src/app/_components/footer/footer.tsx

@@ -11,7 +11,7 @@ const FooterItem = ({ href, text, external = false }: FooterItemProps) => {
     <li>
       <Text
         transform="capitalize"
-        color="bg"
+        color="b"
         low
         as={external ? 'a' : Link}
         className="footer_link"
@@ -42,7 +42,7 @@ const FooterNav = ({ links, title }: { title: string; links: FooterItemProps[] }
 const footer = () => {
   return (
     <footer>
-      <Paper background="bg-3" as={Grid} p="lg" gap="sm" grid="repeat(4, minmax(1px, 1fr))" xs="1fr" lg="1fr 1fr">
+      <Paper background="b-3" as={Grid} p="lg" gap="sm" grid="repeat(4, minmax(1px, 1fr))" xs="1fr" lg="1fr 1fr">
         <div>
           <Logo width={100} />
           <Text transform="first-letter-only" color="b" low>

apps/docs/src/app/_components/home/rtl.tsx

@@ -67,7 +67,7 @@ export function RTLSupport() {
                   <Text weight="medium" size="md">
                     {title}
                   </Text>
-                  <Text low color="bg">
+                  <Text low color="b">
                     {description}
                   </Text>
                 </div>

apps/docs/src/app/_components/playground/breadcrumb/breadcrumbColor.tsx

@@ -50,7 +50,7 @@ export const BreadcrumbColor = () => {
         ))}
       </Breadcrumb>
 
-      <Breadcrumb color="bg">
+      <Breadcrumb color="b">
         {breadcrumbsItems.map(({ name, link, current }) => (
           <BreadcrumbItem current={current} key={name} link={link}>
             {name}

apps/docs/src/app/_components/playground/button/buttonColor.tsx

@@ -10,7 +10,7 @@ export function ButtonColor() {
         <Button color="s">Hello World</Button>
         <Button color="p">Hello World</Button>
         <Button color="se">Hello World</Button>
-        <Button color="bg">Hello World</Button>
+        <Button color="b">Hello World</Button>
       </Flex>
 
       <Flex gap="sm" items="center" wrap>

apps/docs/src/app/_components/playground/button/buttonCorner.tsx

@@ -3,7 +3,7 @@ import { ZoomPlus } from '@pillar-ui/icons'
 
 export function ButtonCorner() {
   return (
-    <Paper className="playground" border flow="sm" p="sm" background="bg-3" corner="sm">
+    <Paper className="playground" border flow="sm" p="sm" background="b-3" corner="sm">
       <Flex gap="sm" items="center" wrap>
         <Button corner="sharp">Hello World</Button>
         <Button corner="xs">Hello World</Button>

apps/docs/src/app/_components/playground/button/buttonFluid.tsx

@@ -18,7 +18,7 @@ export function ButtonFluid() {
       <Button fluid color="se">
         Hello World
       </Button>
-      <Button fluid color="bg">
+      <Button fluid color="b">
         Hello World
       </Button>
     </>

apps/docs/src/app/_components/playground/chips/chipsColor.tsx

@@ -8,7 +8,7 @@ export const ChipsColor = () => {
       <Chips color="w">Hello</Chips>
       <Chips color="p">Hello</Chips>
       <Chips color="se">Hello</Chips>
-      <Chips color="bg">Hello</Chips>
+      <Chips color="b">Hello</Chips>
     </>
   )
 }

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

@@ -7,7 +7,7 @@ export const CodeColor = () => {
       <Code color="s">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code color="w">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code color="p">{`console.log('Hello world Every thing is OK')`}</Code>
-      <Code color="bg">{`console.log('Hello world Every thing is OK')`}</Code>
+      <Code color="b">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code color="se">{`console.log('Hello world Every thing is OK')`}</Code>
     </>
   )

apps/docs/src/app/_components/playground/flex/flexDirection.tsx

@@ -1,7 +1,7 @@
 import { Flex, Paper } from '@pillar-ui/core'
 
 const Box = (props: any) => {
-  return <Paper width="48px" ratio="1" background="bg-6" corner="sm" className="u_center" {...props} />
+  return <Paper width="48px" ratio="1" background="b-6" corner="sm" className="u_center" {...props} />
 }
 
 const boxes = Array.from({ length: 5 }, (_, index) => <Box key={index} />)

apps/docs/src/app/_components/playground/flex/flexGap.tsx

@@ -1,7 +1,7 @@
 import { Flex, Paper } from '@pillar-ui/core'
 
 const Box = (props: any) => {
-  return <Paper width="48px" ratio="1" background="bg-6" corner="sm" className="u_center" {...props} />
+  return <Paper width="48px" ratio="1" background="b-6" corner="sm" className="u_center" {...props} />
 }
 
 const boxes = Array.from({ length: 5 }, (_, index) => <Box key={index} />)

apps/docs/src/app/_components/playground/flex/flexItems.tsx

@@ -3,13 +3,13 @@ import { Flex, Paper } from '@pillar-ui/core'
 export const FlexItems = () => {
   return (
     <>
-      <Flex as={Paper} height="100" background="bg-5" gap="sm" items="center">
+      <Flex as={Paper} height="100" background="b-5" gap="sm" items="center">
         Hello
       </Flex>
-      <Flex as={Paper} height="100" background="bg-5" gap="sm" items="end">
+      <Flex as={Paper} height="100" background="b-5" gap="sm" items="end">
         Hello
       </Flex>
-      <Flex as={Paper} height="100" background="bg-5" gap="sm">
+      <Flex as={Paper} height="100" background="b-5" gap="sm">
         Hello
       </Flex>
     </>

apps/docs/src/app/_components/playground/flex/flexJustify.tsx

@@ -1,7 +1,7 @@
 import { Flex, Paper } from '@pillar-ui/core'
 
 const Box = (props: any) => {
-  return <Paper width="48px" ratio="1" background="bg-6" corner="sm" className="u_center" {...props} />
+  return <Paper width="48px" ratio="1" background="b-6" corner="sm" className="u_center" {...props} />
 }
 
 const boxes = Array.from({ length: 5 }, (_, index) => <Box key={index} />)

apps/docs/src/app/_components/playground/flex/flexNested.tsx

@@ -1,7 +1,7 @@
 import { Flex, Paper } from '@pillar-ui/core'
 
 const Box = (props: any) => {
-  return <Paper width="48px" ratio="1" background="bg-6" corner="sm" className="u_center" {...props} />
+  return <Paper width="48px" ratio="1" background="b-6" corner="sm" className="u_center" {...props} />
 }
 
 export const FlexNested = () => {

apps/docs/src/app/_components/playground/flex/flexWrap.tsx

@@ -1,7 +1,7 @@
 import { Flex, Paper } from '@pillar-ui/core'
 
 const Box = (props: any) => {
-  return <Paper width="48px" ratio="1" background="bg-6" corner="sm" className="u_center" {...props} />
+  return <Paper width="48px" ratio="1" background="b-6" corner="sm" className="u_center" {...props} />
 }
 const boxes = Array.from({ length: 5 }, (_, index) => <Box key={index} />)
 

apps/docs/src/app/_components/playground/form/select/selectColor.tsx

@@ -29,7 +29,7 @@ export const SelectColor = () => {
       <Select color="p">
         <Options />
       </Select>
-      <Select color="bg">
+      <Select color="b">
         <Options />
       </Select>
       <Select>

apps/docs/src/app/_components/playground/grid/grid.tsx

@@ -8,7 +8,7 @@ const Box = (props: any) => {
       justify="center"
       items="center"
       style={{ height: '30px' }}
-      background="bg-6"
+      background="b-6"
       corner="sm"
       {...props}
     />
@@ -21,7 +21,7 @@ const boxes = Array.from({ length: 5 }, (_, index) => (
 
 export const GridPlayGround = () => {
   return (
-    <Paper className="playground" border p="sm" background="bg-3" corner="sm">
+    <Paper className="playground" border p="sm" background="b-3" corner="sm">
       <Avatar title="Success!" color="d" />
       <Avatar title="Success!" color="w" />
       <Avatar title="Success!" color="s" />
@@ -34,7 +34,7 @@ export const GridPlayGround = () => {
 
 export const GridGap = () => {
   return (
-    <Paper className="playground" border p="sm" flow="md" background="bg-3" corner="sm">
+    <Paper className="playground" border p="sm" flow="md" background="b-3" corner="sm">
       <Grid grid="repeat(4,30px)" gap="2xs">
         {boxes}
       </Grid>
@@ -62,7 +62,7 @@ export const GridGap = () => {
 
 export const GridJustify = () => {
   return (
-    <Paper className="playground" border p="sm" background="bg-3" corner="sm">
+    <Paper className="playground" border p="sm" background="b-3" corner="sm">
       <Grid grid="repeat(5,1fr)" gap="sm">
         {boxes}
       </Grid>
@@ -87,7 +87,7 @@ export const GridJustify = () => {
 
 export const GridPlacement = () => {
   return (
-    <Paper className="playground" border p="sm" background="bg-3" corner="sm">
+    <Paper className="playground" border p="sm" background="b-3" corner="sm">
       <Grid grid="5rem 1fr x 100px 400px 100px" gap="sm">
         <GridItem placement="1 / 3" as={Box}>
           header
@@ -107,7 +107,7 @@ export const GridPlacement = () => {
 
 export const Item = () => {
   return (
-    <Paper className="playground" border p="sm" background="bg-3" corner="sm">
+    <Paper className="playground" border p="sm" background="b-3" corner="sm">
       <Grid grid="100px 1fr 100px x 2rem minmax(6rem, 1fr) 2rem" gap="sm">
         <GridItem placement="2/4" style={{ background: 'var(--B8)' }}>
           Header
@@ -131,7 +131,7 @@ export const Item = () => {
 
 export const GridGrid = () => {
   return (
-    <Paper className="playground" border p="sm" background="bg-3" corner="sm">
+    <Paper className="playground" border p="sm" background="b-3" corner="sm">
       <Grid grid="repeat(5, 1fr)" gap="sm">
         <div style={{ height: '40px', background: 'var(--B6)' }} />
         <div style={{ height: '40px', background: 'var(--B6)' }} />

apps/docs/src/app/_components/playground/heading/headingColor.tsx

@@ -7,7 +7,7 @@ export const HeadingColor = () => {
       <Heading color="s">Hello World</Heading>
       <Heading color="w">Hello World</Heading>
       <Heading color="p">Hello World</Heading>
-      <Heading color="bg">Hello World</Heading>
+      <Heading color="b">Hello World</Heading>
       <Heading color="se">Hello World</Heading>
 
       <Heading low color="d">
@@ -22,7 +22,7 @@ export const HeadingColor = () => {
       <Heading low color="p">
         Hello World
       </Heading>
-      <Heading low color="bg">
+      <Heading low color="b">
         Hello World
       </Heading>
       <Heading low color="se">

apps/docs/src/app/_components/playground/link/linkColor.tsx

@@ -7,7 +7,7 @@ export const LinkColor = () => {
       <Link color="s">Hello World</Link>
       <Link color="w">Hello World</Link>
       <Link color="p">Hello World</Link>
-      <Link color="bg">Hello World</Link>
+      <Link color="b">Hello World</Link>
       <Link color="se">Hello World</Link>
 
       <Link low color="d">
@@ -22,7 +22,7 @@ export const LinkColor = () => {
       <Link low color="p">
         Hello World
       </Link>
-      <Link low color="bg">
+      <Link low color="b">
         Hello World
       </Link>
       <Link low color="se">

apps/docs/src/app/_components/playground/paper/paperBackground.tsx

@@ -4,27 +4,27 @@ export const PaperBackground = () => {
   return (
     <>
       <Paper border width="30-char" ratio="1" />
-      <Paper border width="30-char" ratio="1" background="dan" />
-      <Paper border width="30-char" ratio="1" background="dan-5" />
-      <Paper border width="30-char" ratio="1" background="dan-10" />
-      <Paper border width="30-char" ratio="1" background="suc-5" />
-      <Paper border width="30-char" ratio="1" background="suc-8" />
-      <Paper border width="30-char" ratio="1" background="suc-11" />
-      <Paper border width="30-char" ratio="1" background="pri-12" />
-      <Paper border width="30-char" ratio="1" background="pri-10" />
-      <Paper border width="30-char" ratio="1" background="pri-8" />
-      <Paper border width="30-char" ratio="1" background="bg-1" />
-      <Paper border width="30-char" ratio="1" background="bg-4" />
-      <Paper border width="30-char" ratio="1" background="bg-8" />
-      <Paper border width="30-char" ratio="1" background="war-4" />
-      <Paper border width="30-char" ratio="1" background="war-8" />
-      <Paper border width="30-char" ratio="1" background="war-12" />
-      <Paper border width="30-char" ratio="1" background="sec-3" />
-      <Paper border width="30-char" ratio="1" background="sec-8" />
-      <Paper border width="30-char" ratio="1" background="sec-12" />
-      <Paper border width="30-char" ratio="1" background="opa-4" />
-      <Paper border width="30-char" ratio="1" background="opa-7" />
-      <Paper border width="30-char" ratio="1" background="opa-11" />
+      <Paper border width="30-char" ratio="1" background="d" />
+      <Paper border width="30-char" ratio="1" background="d-5" />
+      <Paper border width="30-char" ratio="1" background="d-10" />
+      <Paper border width="30-char" ratio="1" background="s-5" />
+      <Paper border width="30-char" ratio="1" background="s-8" />
+      <Paper border width="30-char" ratio="1" background="s-11" />
+      <Paper border width="30-char" ratio="1" background="p-12" />
+      <Paper border width="30-char" ratio="1" background="p-10" />
+      <Paper border width="30-char" ratio="1" background="p-8" />
+      <Paper border width="30-char" ratio="1" background="b-1" />
+      <Paper border width="30-char" ratio="1" background="b-4" />
+      <Paper border width="30-char" ratio="1" background="b-8" />
+      <Paper border width="30-char" ratio="1" background="w-4" />
+      <Paper border width="30-char" ratio="1" background="w-8" />
+      <Paper border width="30-char" ratio="1" background="w-12" />
+      <Paper border width="30-char" ratio="1" background="s-3" />
+      <Paper border width="30-char" ratio="1" background="s-8" />
+      <Paper border width="30-char" ratio="1" background="s-12" />
+      <Paper border width="30-char" ratio="1" background="o-4" />
+      <Paper border width="30-char" ratio="1" background="o-7" />
+      <Paper border width="30-char" ratio="1" background="o-11" />
     </>
   )
 }