Update CSS classes in content.mdx files

website/app/[locale]/(root)/docs/break-after/content.mdx

@@ -5,7 +5,7 @@
 ### Set the break after behavior
 Use `break-after:value` to set how breaks should behave after a generated box.
 <Demo className="py:0!">
-    <div className="bg:white@light bg:gray-20@dark p:30">
+    <div className="bg:float p:8x">
         <div className="gap:30 cols:2">
             <div className="f:28 f:bold">Briefs</div>
             <p>A content brief is a document that outlines the key details of a piece of content. It should include an overview of the project, a well as any specific instructions or requirements. </p>

website/app/[locale]/(root)/docs/break-before/content.mdx

@@ -5,7 +5,7 @@
 ### Set the break before behavior
 Use `break-before:value` to set how breaks should behave before a generated box.
 <Demo className="py:0!">
-    <div className="bg:white@light bg:gray-20@dark p:30">
+    <div className="bg:float p:8x">
         <div className="gap:30 cols:2">
             <div className="f:28 f:bold">Briefs</div>
             <p>A content brief is a document that outlines the key details of a piece of content. It should include an overview of the project, a well as any specific instructions or requirements. </p>

website/app/[locale]/(root)/docs/display/content.mdx

@@ -5,7 +5,7 @@
 ### Block & Inline
 Use `block`, `inline`, and `inline-block` to set the flow of elements.
 <Demo $py={0}>
-    <div className='bg:white@light bg:gray-20@dark p:30'>
+    <div className='bg:float p:8x'>
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <span className="box block! bg:slate-95!@light">
@@ -46,7 +46,7 @@ import aron from '~/public/images/authors/aron.jpg'
 ### Flex
 Use `flex` to create a block-level flex container.
 <Demo>
-    <div className="flex gap:12 ai:center bg:white@light bg:gray-20@dark p:8|20 r:10">
+    <div className="flex gap:12 ai:center bg:float p:8|20 r:10">
         <Image src={aron} alt="avatar" className="object:cover round h:auto" width="64" height="64" />
         <div>
             <div className="text:14 font:medium font:gray-88@dark capitalize">aron</div>
@@ -67,7 +67,7 @@ Use `flex` to create a block-level flex container.
 ### Inline Flex
 Use `inline-flex` to create an inline-level flex container.
 <Demo $py={0}>
-    <div className='bg:white@light bg:gray-20@dark p:30'>
+    <div className='bg:float p:8x'>
         <p className="font:16 lh:1.75rem">
             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. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus. Nunc pulvinar tortor ipsum,
@@ -246,7 +246,7 @@ Use `contents` to make the element&rsquo;s children like direct children of the
 ### Flow Root
 Use `flow-root` to create a block-level element that establishes a new block formatting context.
 {<Demo $py={0}>
-    <div className="bg:white@light bg:gray-20@dark p:30 w:full">
+    <div className="bg:float p:8x w:full">
         <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>

website/app/[locale]/(root)/docs/z-index/content.mdx

@@ -3,7 +3,7 @@
 
 Use `z-index:value` to order of overlapping eleemnts. Value is an integer that can be positive, negative or zero.
 <Demo className="py:0">
-    <div className="flex ml:-8>div p:30">
+    <div className="flex ml:-8>div p:8x">
         <div className="z:9 box bg:blue-58! fg:white b:2">1</div>
         <div className="z:3 box bg:blue-58! fg:white b:2">2</div>
         <div className="z:1 box bg:blue-58! fg:white b:2">3</div>

website/app/[locale]/(root)/sponsor/components/TierModal.tsx

@@ -4,11 +4,6 @@ import Modal from 'websites/components/Modal'
 import { cls } from 'websites/utils/cls'
 import Link from 'websites/components/Link'
 
-const LIST_NAV_CLASS = cls`
-    text-decoration:none! flex align-items:center px:20 min-h:48 gap:12 font:medium
-    bg:slate-90:hover@light bg:gray-26:hover@dark
-`
-
 export default function TierModal({ tierState }: { tierState: [any, Dispatch<any>] }) {
     const [selectedTier, setSelectedTier] = tierState
     return <Modal backdropClick={() => setSelectedTier(null)} contentClass="max-w:320 pb:15">
@@ -29,11 +24,11 @@ export default function TierModal({ tierState }: { tierState: [any, Dispatch<any
         <div className="text:12 bt:1|solid|frame mb:5 pt:15 px:25">
             Choose a platform
         </div>
-        <Link href={selectedTier.openCollectiveUrl} className={`${LIST_NAV_CLASS} px:25!`}>
+        <Link href={selectedTier.openCollectiveUrl} className="flex align-items:center font:medium gap:12 min-h:48 px:25 text-decoration:none!">
             <Image src="/images/open-collective.svg" alt="open-collective" width="24" height="24" />
             Open Collective
         </Link>
-        <Link href={selectedTier.githubSponsorUrl} className={`${LIST_NAV_CLASS} px:25!`}>
+        <Link href={selectedTier.githubSponsorUrl} className="flex align-items:center font:medium gap:12 min-h:48 px:25 text-decoration:none!">
             <Image src="/images/github-sponsors.svg" alt="github-sponsors" width="24" height="24" className="scale(1.2)" />
             Github Sponsors
         </Link>