Update CSS class names for background stripes

master-co · Feb 3, 2024 · 7efe101 · 7efe101
1 parent e4e4f30
commit 7efe101
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}