♻️ --var to tw-rdx [b] (#2294)

- [x] take advantage of tw/rdx - [x] update to mauve w/ pink (correctly) - [x] fix lockfile
JeromeFitz · Mar 1, 2024 · f65b56c · f65b56c
1 parent af291d2
commit f65b56c
Show file tree

Hide file tree

Showing 43 changed files with 158 additions and 140 deletions.
diff --git a/packages/design-system/src/components/Anchor/Anchor.tsx b/packages/design-system/src/components/Anchor/Anchor.tsx
@@ -25,7 +25,7 @@ const Anchor = ({ children, className = '', href }) => {
     'inline-flex flex-row items-center gap-1',
     'underline-offset-4',
     'underline',
-    'text-[var(--accent-11)] hover:text-[var(--accent-12)]',
+    'text-accent-11 hover:text-accent-12',
     'transition-all duration-200 ease-in',
     className,
   )
@@ -105,7 +105,7 @@ const ScrollTo = ({ children, className = '', href }: ScrollLinkProps) => {
     'inline-flex flex-row items-center gap-1',
     'underline-offset-4',
     'underline',
-    'text-[var(--accent-11)] hover:text-[var(--accent-12)]',
+    'text-accent-11 hover:text-accent-12',
     'transition-all duration-200 ease-in',
     className,
   )

diff --git a/packages/design-system/src/components/Button/Button.stories.tsx b/packages/design-system/src/components/Button/Button.stories.tsx
@@ -44,8 +44,8 @@ export const Custom: Story = {
     ...Default.args,
     className: cx(
       'm-12 p-12',
-      'bg-[var(--gray-12)] text-[var(--gray-1)]',
-      'hocus:bg-[var(--gray-1)] hocus:text-[var(--gray-12)]',
+      'bg-gray-12 text-gray-1',
+      'hocus:bg-gray-1 hocus:text-gray-12',
     ),
     variant: 'empty',
   },

diff --git a/packages/design-system/src/components/Section/Section.Content.tsx b/packages/design-system/src/components/Section/Section.Content.tsx
@@ -16,7 +16,7 @@ function SectionContent({ children, className = '' }) {
         // 'before:h-0',
         'before:relative before:top-0 before:w-full  before:content-normal',
         // 'before:left-2 before:right-2,
-        'before:bg-[var(--gray-6)]',
+        'before:bg-gray-6',
         '',
         className,
       )}

diff --git a/packages/design-system/src/components/Section/Section.Header.tsx b/packages/design-system/src/components/Section/Section.Header.tsx
@@ -17,7 +17,7 @@ function SectionHeader({ children, className = '' }) {
           // 'before:h-0',
           'before:relative before:top-0 before:w-11/12 before:content-normal',
           // 'before:left-2 before:right-2,
-          'before:bg-[var(--gray-6)]',
+          'before:bg-gray-6',
           '',
           // w/o react-headroom
           'top-7 md:top-3',

diff --git a/packages/design-system/src/components/Section/Section.Wrapper.tsx b/packages/design-system/src/components/Section/Section.Wrapper.tsx
@@ -9,7 +9,7 @@ function SectionWrapper({ children }) {
           'md:flex-row md:pt-4',
           'before:h-0',
           'before:relative before:inset-x-2 before:top-0 before:w-full before:content-normal',
-          'before:bg-[var(--gray-8)]',
+          'before:bg-gray-8',
           '',
         )}
       >

diff --git a/packages/design-system/src/components/Separator/Separator.tsx b/packages/design-system/src/components/Separator/Separator.tsx
@@ -21,7 +21,7 @@ function SeparatorImpl({ className = '' }) {
         // 'min-h-[0.75rem]',
         'h-[1px] w-full',
         'min-h-[0.75rem]',
-        'text-[var(--gray-6)]',
+        'text-gray-6',
         className,
       )}
       decorative

diff --git a/packages/shared/src/components/Notion/Blocks/Image.client.tsx b/packages/shared/src/components/Notion/Blocks/Image.client.tsx
@@ -52,7 +52,7 @@ function Image({ ...props }) {
   return (
     <>
       <NextImage
-        className="h-auto w-full rounded-[var(--radius-3)]"
+        className="rounded-3 h-auto w-full"
         placeholder="blur"
         {...imageProps}
       />
@@ -62,7 +62,7 @@ function Image({ ...props }) {
         position="relative"
       >
         <NextImage
-          className="rounded-[var(--radius-3)]"
+          className="rounded-3"
           fill={true}
           placeholder="blur"
           {...testProps}

diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js
@@ -49,7 +49,7 @@ const config = ({ useTailwind = true }) => ({
   ],
   theme: {
     // ...theme,
-    colors: {},
+    // colors: {},
     container: {
       center: true,
       padding: '1.5rem',

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/jerandky.com/src/app/(notion)/podcasts/[[...catchAll]]/_components/Episode.Slug.tsx b/sites/jerandky.com/src/app/(notion)/podcasts/[[...catchAll]]/_components/Episode.Slug.tsx
@@ -57,7 +57,7 @@ function Rollups({ properties }) {
   const style = cx(
     styleIndividual,
     isPublished && 'transition-all duration-200',
-    isPublished && 'text-[var(--gray-12)] hover:text-[var(--accent-11)]',
+    isPublished && 'hover:text-accent-11 text-gray-12',
   )
 
   const {
@@ -122,7 +122,7 @@ function Links({ properties }) {
   const style = cx(
     styleIndividual,
     isPublished && 'transition-all duration-200',
-    // isPublished && 'text-[var(--gray-12)] hover:text-[var(--accent-11)]'
+    // isPublished && 'text-gray-12 hover:text-accent-11'
   )
   return (
     <>

diff --git a/sites/jerandky.com/src/app/layout.tsx b/sites/jerandky.com/src/app/layout.tsx
@@ -104,7 +104,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         className={cx(
           'overflow-y-auto overflow-x-hidden',
           // 'transition-all duration-200',
-          'selection:bg-[var(--gray-12)] selection:text-[var(--gray-1)]',
+          'selection:bg-gray-12 selection:text-gray-1',
           'bg-white dark:bg-black',
           'font-sans antialiased',
           fontSans.variable,

diff --git a/sites/jerandky.com/src/components/ErrorBoundary/ErrorBoundary.tsx b/sites/jerandky.com/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -61,7 +61,7 @@ class ErrorBoundary extends Component<PropsChildren> {
                 <p className="text-lg">
                   Please try and go back to the{` `}
                   <a
-                    className="inline-flex flex-row items-center gap-1 text-[var(--accent-11)] underline decoration-[var(--gray-4)] underline-offset-4 transition-all duration-200 ease-in hover:text-[var(--accent-12)] hover:decoration-[var(--gray-5)]"
+                    className="text-accent-11 hover:text-accent-12 inline-flex flex-row items-center gap-1 underline decoration-[var(--gray-4)] underline-offset-4 transition-all duration-200 ease-in hover:decoration-[var(--gray-5)]"
                     href="/"
                   >
                     homepage

diff --git a/sites/jerandky.com/src/components/Footer/Footer.client.tsx b/sites/jerandky.com/src/components/Footer/Footer.client.tsx
@@ -21,7 +21,7 @@ function ThemeToggle() {
   return (
     <>
       <button
-        className="flex hover:text-[var(--accent-11)]"
+        className="hover:text-accent-11 flex"
         onClick={() => handleThemeToggle()}
       >
         <span className="flex flex-row-reverse items-center justify-end gap-1 align-middle">

diff --git a/sites/jerandky.com/src/components/Footer/Footer.tsx b/sites/jerandky.com/src/components/Footer/Footer.tsx
@@ -41,7 +41,7 @@ const URL_TYPE = {
 const pages = [
   {
     active: true,
-    className: 'hover:text-[var(--accent-11)]',
+    className: 'hover:text-accent-11',
     icon: <HomeIcon className="text-inherit" />,
     id: 'homepage',
     keywords: 'social homepage',
@@ -53,7 +53,7 @@ const pages = [
   },
   {
     active: true,
-    className: 'hover:text-[var(--accent-11)]',
+    className: 'hover:text-accent-11',
     icon: <MicrophoneIcon className="text-inherit" />,
     id: 'podcasts',
     keywords: 'social podcasts',

diff --git a/sites/jerandky.com/src/components/Notion/Notion.Config.ts b/sites/jerandky.com/src/components/Notion/Notion.Config.ts
@@ -89,7 +89,7 @@ const blocks = {
   },
   quote: {
     className:
-      'border-l-[var(--accent-11)] bg-[var(--accent-a5)] m-4 rounded border-l-8 p-6 text-xl md:p-14 md:text-3xl',
+      'border-l-accent-11 bg-[var(--accent-a5)] m-4 rounded border-l-8 p-6 text-xl md:p-14 md:text-3xl',
   },
   ...custom,
 }

diff --git a/sites/jerandky.com/src/components/Providers/RouterEventProvider.Loading.client.tsx b/sites/jerandky.com/src/components/Providers/RouterEventProvider.Loading.client.tsx
@@ -28,8 +28,8 @@ const Loading: React.FC<{ isRouteChanging: boolean }> = ({ isRouteChanging }) =>
         'z-[9999] origin-[0_0]',
         'left-0 top-0 h-[2.5px] w-full',
         'bg-gradient-to-r',
-        'from-[var(--accent-1)] to-[var(--accent-11)]',
-        'dark:from-[var(--accent-11)] dark:to-[var(--accent-1)]',
+        'to-accent-11 from-[var(--accent-1)]',
+        'dark:from-accent-11 dark:to-[var(--accent-1)]',
         isFinished ? 'opacity-0' : 'opacity-100',
         '',
       )}

diff --git a/sites/jerandky.com/src/components/Relations/Relations.Individual.tsx b/sites/jerandky.com/src/components/Relations/Relations.Individual.tsx
@@ -36,7 +36,7 @@ const RelationIndividual = cache(async ({ id }) => {
   const style = cx(
     'inline-block text-base font-normal tracking-tight no-underline md:text-xl',
     isPublished && 'transition-all duration-200',
-    isPublished && 'text-[var(--gray-12)] hover:text-[var(--accent-11)]',
+    isPublished && 'hover:text-accent-11 text-gray-12',
     '',
     '',
   )

diff --git a/sites/jeromefitzgerald.com/src/app/(notion)/books/_components/Book.client.tsx b/sites/jeromefitzgerald.com/src/app/(notion)/books/_components/Book.client.tsx
@@ -88,11 +88,7 @@ function Books({ data, refs }) {
                   return (
                     <Flex asChild direction="column" key={item.id} py="4">
                       <li>
-                        <Box
-                          className="indent-[calc(var(--space-3)_*_-1)]"
-                          ml="3"
-                          pl="3"
-                        >
+                        <Box className="-indent-3" ml="3" pl="3">
                           <Text size="6" weight="bold">
                             <Text as="span">“</Text>
                             <Text as="span">
@@ -102,21 +98,13 @@ function Books({ data, refs }) {
                             <Text as="span">”</Text>
                           </Text>
                         </Box>
-                        <Box
-                          className="indent-[calc(var(--space-2)_*_-1)]"
-                          ml="3"
-                          pl="2"
-                        >
+                        <Box className="-indent-2" ml="3" pl="2">
                           <Text size="5" weight="medium">
                             <Text as="span">–</Text>
                             <Text as="span">{item.author}</Text>
                           </Text>
                         </Box>
-                        <Box
-                          className="indent-[calc(var(--space-1)_*_1)]"
-                          ml="3"
-                          pl="2"
-                        >
+                        <Box className="indent-1" ml="3" pl="2">
                           <Text size="5" weight="regular">
                             <Code variant="ghost">
                               {format(item.dateReleasedIso, 'yyyy')}, p.{item.pages}
@@ -189,7 +177,7 @@ function BookPage({ books, title }) {
                   >
                     <>
                       <Badge
-                        className="transition-colors group-hover:cursor-pointer group-hover:bg-[var(--accent-a4)] group-hover:text-[var(--accent-12)]"
+                        className="group-hover:text-accent-12 group-hover:bg-accentA-4 transition-colors group-hover:cursor-pointer"
                         color={book.color}
                         highContrast={false}
                         size="2"