From 7efe1011e25435e86c47eac99606b9171e126a2b Mon Sep 17 00:00:00 2001
From: 1aron <i@aron.tw>
Date: Sat, 3 Feb 2024 11:02:23 +0800
Subject: [PATCH] Update CSS class names for background stripes

---
 .../[locale]/(root)/docs/columns/content.mdx  | 34 +++++++++----------
 .../(root)/docs/cursor/components/Basic.tsx   |  2 +-
 .../[locale]/(root)/docs/display/content.mdx  |  2 +-
 .../[locale]/(root)/docs/inset/content.mdx    |  2 +-
 .../[locale]/(root)/docs/position/content.mdx |  4 +--
 .../docs/text-align/components/Basic.tsx      |  2 +-
 .../(root)/docs/text-transform/content.mdx    | 16 ++++-----
 website/components/DemoDark.tsx               |  2 +-
 website/components/DemoLight.tsx              |  2 +-
 9 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/website/app/[locale]/(root)/docs/columns/content.mdx b/website/app/[locale]/(root)/docs/columns/content.mdx
index ddfe7f50d..ade4d5c4f 100644
--- a/website/app/[locale]/(root)/docs/columns/content.mdx
+++ b/website/app/[locale]/(root)/docs/columns/content.mdx
@@ -6,31 +6,31 @@
 Use `mcss cols:value` to set the number of columns when creating a multi-column layout. The column width will automatically adjust to the column count.
 <Demo className="py:0!">
     <div className="gap:8x cols:3@sm cols:1 w:full break-inside:avoid_:where(div)">
-        <div className="bg-stripe-pink pt:32">
+        <div className="bg:stripe-pink pt:32">
             <Image src="/images/mountain4.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16">
+        <div className="bg:stripe-pink pt:16">
             <Image src="/images/mountain7.jpg" width={200} height={200} alt="mountain" className="aspect:1/1 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16 pb:32">
+        <div className="bg:stripe-pink pt:16 pb:32">
             <Image src="/images/mountain19.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:32">
+        <div className="bg:stripe-pink pt:32">
             <Image src="/images/mountain14.jpg" width={200} height={200} alt="mountain" className="aspect:1/1 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16">
+        <div className="bg:stripe-pink pt:16">
             <Image src="/images/mountain15.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16 pb:32">
+        <div className="bg:stripe-pink pt:16 pb:32">
             <Image src="/images/mountain16.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:32">
+        <div className="bg:stripe-pink pt:32">
             <Image src="/images/mountain17.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16">
+        <div className="bg:stripe-pink pt:16">
             <Image src="/images/mountain18.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16 pb:32">
+        <div className="bg:stripe-pink pt:16 pb:32">
             <Image src="/images/mountain20.jpg" width={200} height={200} alt="mountain" className="aspect:1/1 r:1x object:cover" />
         </div>
     </div>
@@ -47,28 +47,28 @@ Use `mcss cols:value` to set the number of columns when creating a multi-column
 Use `mcss cols:count|width` to set the minimum width of each column to `width` and the maximum number of columns to `count` columns when creating a flexible multi-column layout.
 <Demo className="py:0!">
     <div className="gap:8x cols:4|100px@sm cols:1 w:full break-inside:avoid_:where(div)">
-        <div className="bg-stripe-pink pt:32">
+        <div className="bg:stripe-pink pt:32">
             <Image src="/images/mountain20.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16 pb:32">
+        <div className="bg:stripe-pink pt:16 pb:32">
             <Image src="/images/mountain14.jpg" width={200} height={200} alt="mountain" className="aspect:1/1 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:32">
+        <div className="bg:stripe-pink pt:32">
             <Image src="/images/mountain15.jpg" width={200} height={200} alt="mountain" className="aspect:1/1 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16 pb:32">
+        <div className="bg:stripe-pink pt:16 pb:32">
             <Image src="/images/mountain16.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:32">
+        <div className="bg:stripe-pink pt:32">
             <Image src="/images/mountain18.jpg" width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16 pb:32">
+        <div className="bg:stripe-pink pt:16 pb:32">
             <Image src="/images/mountain17.jpg" width={200} height={200} alt="mountain" className="aspect:1/1 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:32">
+        <div className="bg:stripe-pink pt:32">
             <Image src="/images/mountain19.jpg" width={200} height={200} alt="mountain" className="aspect:1/1 r:1x object:cover" />
         </div>
-        <div className="bg-stripe-pink pt:16 pb:32">
+        <div className="bg:stripe-pink pt:16 pb:32">
             <Image src="/images/mountain7.jpg"width={300} height={200} alt="mountain" className="aspect:3/2 r:1x object:cover" />
         </div>
     </div>
diff --git a/website/app/[locale]/(root)/docs/cursor/components/Basic.tsx b/website/app/[locale]/(root)/docs/cursor/components/Basic.tsx
index d9f22cc52..a16fba939 100644
--- a/website/app/[locale]/(root)/docs/cursor/components/Basic.tsx
+++ b/website/app/[locale]/(root)/docs/cursor/components/Basic.tsx
@@ -7,7 +7,7 @@ export default ({ className }: any) => {
     return (
         <>
             <Demo className="gap:40">
-                <button className="bg-stripe cursor:pointer font:14 font:semibold h:42 px:20 r:5">Hover Me</button>
+                <button className="bg:stripe cursor:pointer font:14 font:semibold h:42 px:20 r:5">Hover Me</button>
             </Demo>
             <Code lang="html">{`
                 <div class="**${className}**">Hover Me</div>
diff --git a/website/app/[locale]/(root)/docs/display/content.mdx b/website/app/[locale]/(root)/docs/display/content.mdx
index 2d9eea1db..bf7d6de89 100644
--- a/website/app/[locale]/(root)/docs/display/content.mdx
+++ b/website/app/[locale]/(root)/docs/display/content.mdx
@@ -247,7 +247,7 @@ Use `contents` to make the element&rsquo;s children like direct children of the
 Use `flow-root` to create a block-level element that establishes a new block formatting context.
 {<Demo $py={0}>
     <div className="bg:float p:8x w:full">
-        <div className="w:full flow-root bg-stripe-pink">
+        <div className="w:full flow-root bg:stripe-pink">
             <Image src="/images/blur.png" className="r:8 object:cover my:0 mr:30 float:left" width={160} height={90} alt="Float Image" />
             <p className="my:0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
diff --git a/website/app/[locale]/(root)/docs/inset/content.mdx b/website/app/[locale]/(root)/docs/inset/content.mdx
index 46e94bb66..a0e10640e 100644
--- a/website/app/[locale]/(root)/docs/inset/content.mdx
+++ b/website/app/[locale]/(root)/docs/inset/content.mdx
@@ -5,7 +5,7 @@
 ### Inset
 Use `inset:offset` to set the distance between the element and its parent element.
 <Demo>
-    <div className="bg-stripe-pink">
+    <div className="bg:stripe-pink">
         <div className="box w:180 aspect-ratio:1/1 inset:20 rel">`inset:20`</div>
     </div>
 </Demo>
diff --git a/website/app/[locale]/(root)/docs/position/content.mdx b/website/app/[locale]/(root)/docs/position/content.mdx
index 1b1f29b27..91ed6be4e 100644
--- a/website/app/[locale]/(root)/docs/position/content.mdx
+++ b/website/app/[locale]/(root)/docs/position/content.mdx
@@ -22,7 +22,7 @@ Use `static`to position an element according to the normal flow of the document.
 ### Positioning elements as relative
 Use `rel`to position an element according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
 <Demo className="pb:60">
-    <div className="bg-stripe">
+    <div className="bg:stripe">
         <code className="rel p:20 top:30 left:20 box-perspective-pink inline-block">
             <div>relative parent</div>
         </code>
@@ -37,7 +37,7 @@ Use `rel`to position an element according to the normal flow of the document, an
 ### Positioning elements as absolute
 Use `abs`to remove an element from the normal flow of the document, and the element positioned relative to its closest positioned ancestor.
 <Demo>
-    <code className="rel p:12x! box bg-stripe">
+    <code className="rel p:12x! box bg:stripe">
         <div>relative parent</div>
         <code className="box-perspective-pink abs left:0 top:0 w:fit">abs child</code>
     </code>
diff --git a/website/app/[locale]/(root)/docs/text-align/components/Basic.tsx b/website/app/[locale]/(root)/docs/text-align/components/Basic.tsx
index 83be3efb2..e109e3720 100644
--- a/website/app/[locale]/(root)/docs/text-align/components/Basic.tsx
+++ b/website/app/[locale]/(root)/docs/text-align/components/Basic.tsx
@@ -9,7 +9,7 @@ export default ({ className }: any) => <>
     <Demo $py={0}>
         <DemoPanel>
             <p className={clsx('my:0', className)}>
-                <span className='bg-stripe-pink rounded'>
+                <span className='bg:stripe-pink rounded'>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris.
                 </span>
             </p>
diff --git a/website/app/[locale]/(root)/docs/text-transform/content.mdx b/website/app/[locale]/(root)/docs/text-transform/content.mdx
index 75e8d689d..318cdcf95 100644
--- a/website/app/[locale]/(root)/docs/text-transform/content.mdx
+++ b/website/app/[locale]/(root)/docs/text-transform/content.mdx
@@ -5,19 +5,19 @@
     <DemoPanel className="flex flex:col gap:8x">
         <div className="w:full">
             <DemoLabel>capitalize</DemoLabel>
-            <DemoP><b className="bg-stripe-pink">H</b>eavy <b className="bg-stripe-pink">B</b>oxes <b className="bg-stripe-pink">P</b>erform <b className="bg-stripe-pink">Q</b>uick <b className="bg-stripe-pink">W</b>altzes <b className="bg-stripe-pink">A</b>nd <b className="bg-stripe-pink">J</b>igs.</DemoP>
+            <DemoP><b className="bg:stripe-pink">H</b>eavy <b className="bg:stripe-pink">B</b>oxes <b className="bg:stripe-pink">P</b>erform <b className="bg:stripe-pink">Q</b>uick <b className="bg:stripe-pink">W</b>altzes <b className="bg:stripe-pink">A</b>nd <b className="bg:stripe-pink">J</b>igs.</DemoP>
         </div>
         <div className="w:full">
             <DemoLabel>lowercase</DemoLabel>
-            <DemoP><b className="bg-stripe-pink">heavy boxes perform quick waltzes and jigs.</b></DemoP>
+            <DemoP><b className="bg:stripe-pink">heavy boxes perform quick waltzes and jigs.</b></DemoP>
         </div>
         <div className="w:full">
             <DemoLabel>uppercase</DemoLabel>
-            <DemoP><b className="bg-stripe-pink">HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.</b></DemoP>
+            <DemoP><b className="bg:stripe-pink">HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.</b></DemoP>
         </div>
         <div className="w:full">
             <DemoLabel>uppercase::first-letter</DemoLabel>
-            <DemoP><b className="bg-stripe-pink">H</b>eavy boxes perform quick waltzes and jigs.</DemoP>
+            <DemoP><b className="bg:stripe-pink">H</b>eavy boxes perform quick waltzes and jigs.</DemoP>
         </div>
         <div className="w:full">
             <DemoLabel>text-transform:none</DemoLabel>
@@ -33,7 +33,7 @@
 Convert the first letter of each word to uppercase.
 <Demo $py={0}>
     <DemoPanel>
-        <DemoP><b className="bg-stripe-pink">H</b>eavy <b className="bg-stripe-pink">B</b>oxes <b className="bg-stripe-pink">P</b>erform <b className="bg-stripe-pink">Q</b>uick <b className="bg-stripe-pink">W</b>altzes <b className="bg-stripe-pink">A</b>nd <b className="bg-stripe-pink">J</b>igs.</DemoP>
+        <DemoP><b className="bg:stripe-pink">H</b>eavy <b className="bg:stripe-pink">B</b>oxes <b className="bg:stripe-pink">P</b>erform <b className="bg:stripe-pink">Q</b>uick <b className="bg:stripe-pink">W</b>altzes <b className="bg:stripe-pink">A</b>nd <b className="bg:stripe-pink">J</b>igs.</DemoP>
     </DemoPanel>
 </Demo>
 ```html
@@ -44,7 +44,7 @@ Convert the first letter of each word to uppercase.
 Convert all characters to lowercase.
 <Demo $py={0}>
     <DemoPanel>
-        <DemoP><b className="bg-stripe-pink">heavy boxes perform quick waltzes and jigs.</b></DemoP>
+        <DemoP><b className="bg:stripe-pink">heavy boxes perform quick waltzes and jigs.</b></DemoP>
     </DemoPanel>
 </Demo>
 ```html
@@ -55,7 +55,7 @@ Convert all characters to lowercase.
 Convert all characters to uppercase.
 <Demo $py={0}>
     <DemoPanel>
-        <DemoP><b className="bg-stripe-pink">HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.</b></DemoP>
+        <DemoP><b className="bg:stripe-pink">HEAVY BOXES PERFORM QUICK WALTZES AND JIGS.</b></DemoP>
     </DemoPanel>
 </Demo>
 ```html
@@ -66,7 +66,7 @@ Convert all characters to uppercase.
 Capitalize the first letter of a sentence.
 <Demo $py={0}>
     <DemoPanel>
-        <DemoP><b className="bg-stripe-pink">H</b>eavy boxes perform quick waltzes and jigs.</DemoP>
+        <DemoP><b className="bg:stripe-pink">H</b>eavy boxes perform quick waltzes and jigs.</DemoP>
     </DemoPanel>
 </Demo>
 ```html
diff --git a/website/components/DemoDark.tsx b/website/components/DemoDark.tsx
index 97a545f88..47ae37c1b 100644
--- a/website/components/DemoDark.tsx
+++ b/website/components/DemoDark.tsx
@@ -2,7 +2,7 @@ import { IconMoon } from '@tabler/icons-react'
 
 export default (props: any) =>
     <div className="dark w:1/2">
-        <div className="bg-stripe dark bg:base overflow:hidden">
+        <div className="bg:stripe dark bg:base overflow:hidden">
             <IconMoon className='abs fg:lighter font:12 right:4x top:4x' strokeWidth={1} width={24} height={24}/>
             <div className='float:left py:8x translateX(-50%)'>
                 {props.children}
diff --git a/website/components/DemoLight.tsx b/website/components/DemoLight.tsx
index 64f807e82..c3812f8e9 100644
--- a/website/components/DemoLight.tsx
+++ b/website/components/DemoLight.tsx
@@ -2,7 +2,7 @@ import { IconSun } from '@tabler/icons-react'
 
 export default (props: any) =>
     <div className="light w:1/2">
-        <div className="bg-stripe bg:base overflow:hidden">
+        <div className="bg:base bg:stripe overflow:hidden">
             <IconSun className='abs fg:lighter font:12 left:4x top:4x' strokeWidth={1} width={24} height={24}/>
             <div className="float:right py:8x translateX(50%)">
                 {props.children}