Reverted to not using CSS variables in TW

apps/admin-x-design-system/components.json

@@ -7,7 +7,7 @@
     "config": "tailwind.config.js",
     "css": "styles.css",
     "baseColor": "neutral",
-    "cssVariables": true,
+    "cssVariables": false,
     "prefix": ""
   },
   "aliases": {

apps/admin-x-design-system/src/components/typography/heading.tsx

@@ -9,7 +9,8 @@ const headingVariants = cva(
     {
         variants: {
             size: {
-                1: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',
+                pagetitle: 'scroll-m-20 text-2xl font-bold tracking-tighter lg:text-3xl',
+                1: 'scroll-m-20 text-3xl font-bold tracking-tight lg:text-4xl',
                 2: 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',
                 3: 'text-2xl font-semibold tracking-tight',
                 4: 'text-xl font-semibold tracking-tight',
@@ -30,7 +31,7 @@ export interface HeadingProps
 }
 
 const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
-    ({className, size = 1, asChild = false, ...props}, ref) => {
+    ({className, size = 'pagetitle', asChild = false, ...props}, ref) => {
         const Comp = asChild ? Slot : `h${size}`;
         return (
             <Comp

apps/admin-x-design-system/src/components/ui/breadcrumb.tsx

@@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
     <ol
         ref={ref}
         className={cn(
-            'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+            'flex flex-wrap items-center gap-1.5 break-words text-sm text-neutral-500 sm:gap-2.5 dark:text-neutral-400',
             className
         )}
         {...props}
@@ -50,7 +50,7 @@ const BreadcrumbLink = React.forwardRef<
     return (
         <Comp
             ref={ref}
-            className={cn('transition-colors hover:text-foreground', className)}
+            className={cn('transition-colors hover:text-neutral-950 dark:hover:text-neutral-50', className)}
             {...props}
         />
     );
@@ -65,7 +65,7 @@ const BreadcrumbPage = React.forwardRef<
         ref={ref}
         aria-current="page"
         aria-disabled="true"
-        className={cn('font-normal text-foreground', className)}
+        className={cn('font-normal text-neutral-950 dark:text-neutral-50', className)}
         role="link"
         {...props}
     />

apps/admin-x-design-system/src/components/ui/button.tsx

@@ -2,25 +2,25 @@ import * as React from 'react';
 import {Slot} from '@radix-ui/react-slot';
 import {cva, type VariantProps} from 'class-variance-authority';
 
-import {cn} from '../../lib/utils';
+import {cn} from '@/lib/utils';
 
 const buttonVariants = cva(
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     {
         variants: {
             variant: {
-                default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+                default: 'bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90',
-                destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+                destructive: 'dark:bg-red-900 dark:hover:bg-red-900/90 bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:text-neutral-50',
-                outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+                outline: 'border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
-                secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+                secondary: 'bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80',
-                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                ghost: 'hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50',
-                link: 'text-primary underline-offset-4 hover:underline'
+                link: 'text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50'
             },
             size: {
-                default: 'h-10 px-4 py-2',
+                default: 'h-9 px-3 py-2',
-                sm: 'h-9 rounded-md px-3',
+                sm: 'h-8 rounded-md px-3',
                 lg: 'h-11 rounded-md px-8',
-                icon: 'h-10 w-10'
+                icon: 'h-9 w-9'
             }
         },
         defaultVariants: {

apps/admin-x-design-system/styles.css

@@ -26,71 +26,6 @@
 @import url(https://fonts.bunny.net/css?family=fira-mono:400,700);
 @import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700);
 
-/* ShadCN variables */
-@layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 0 0% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 0 0% 3.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 0 0% 3.9%;
-        --primary: 0 0% 9%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 0 0% 96.1%;
-        --secondary-foreground: 0 0% 9%;
-        --muted: 0 0% 96.1%;
-        --muted-foreground: 0 0% 45.1%;
-        --accent: 0 0% 96.1%;
-        --accent-foreground: 0 0% 9%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 89.8%;
-        --input: 0 0% 89.8%;
-        --ring: 0 0% 3.9%;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-        --radius: 0.5rem;
-    }
-    .dark {
-        --background: 0 0% 3.9%;
-        --foreground: 0 0% 98%;
-        --card: 0 0% 3.9%;
-        --card-foreground: 0 0% 98%;
-        --popover: 0 0% 3.9%;
-        --popover-foreground: 0 0% 98%;
-        --primary: 0 0% 98%;
-        --primary-foreground: 0 0% 9%;
-        --secondary: 0 0% 14.9%;
-        --secondary-foreground: 0 0% 98%;
-        --muted: 0 0% 14.9%;
-        --muted-foreground: 0 0% 63.9%;
-        --accent: 0 0% 14.9%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 14.9%;
-        --input: 0 0% 14.9%;
-        --ring: 0 0% 83.1%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-    }
-}
-@layer base {
-    * {
-        @apply border-border;
-    }
-    body {
-        @apply bg-background text-foreground;
-    }
-}
-
 /* Defaults */
 @layer base {
     /* This just serves as a placeholder; we actually load Inter from a font file in Ember admin */

apps/admin-x-design-system/tailwind.config.cjs

@@ -43,6 +43,25 @@ module.exports = {
                 950: '#222427',
                 975: '#191B1E'
             },
+            neutral: {
+                DEFAULT: '#ABB4BE',
+                50: '#FAFAFB',
+                75: '#F9FAFB',
+                100: '#F4F5F6',
+                150: '#F1F3F4',
+                200: '#EBEEF0',
+                250: '#E5E9ED',
+                300: '#DDE1E5',
+                400: '#CED4D9',
+                500: '#AEB7C1',
+                600: '#95A1AD',
+                700: '#7C8B9A',
+                800: '#626D79',
+                900: '#394047',
+                925: '#2E3338',
+                950: '#222427',
+                975: '#191B1E'
+            },
             green: {
                 DEFAULT: '#30CF43',
                 100: '#E1F9E4',
@@ -291,10 +310,10 @@ module.exports = {
                 prose: '65ch'
             },
             borderRadius: {
-                lg: `var(--radius)`,
+                sm: '0.3rem',
-                md: `calc(var(--radius) - 2px)`,
-                sm: 'calc(var(--radius) - 4px)',
                 DEFAULT: '0.4rem',
+                md: '0.6rem',
+                lg: '0.8rem',
                 xl: '1.2rem',
                 '2xl': '1.6rem',
                 '3xl': '2.4rem',
@@ -323,41 +342,6 @@ module.exports = {
                 tight: '1.35em',
                 tighter: '1.25em',
                 supertight: '1.1em'
-            },
-            colors: {
-                border: 'hsl(var(--border))',
-                input: 'hsl(var(--input))',
-                ring: 'hsl(var(--ring))',
-                background: 'hsl(var(--background))',
-                foreground: 'hsl(var(--foreground))',
-                primary: {
-                    DEFAULT: 'hsl(var(--primary))',
-                    foreground: 'hsl(var(--primary-foreground))'
-                },
-                secondary: {
-                    DEFAULT: 'hsl(var(--secondary))',
-                    foreground: 'hsl(var(--secondary-foreground))'
-                },
-                destructive: {
-                    DEFAULT: 'hsl(var(--destructive))',
-                    foreground: 'hsl(var(--destructive-foreground))'
-                },
-                muted: {
-                    DEFAULT: 'hsl(var(--muted))',
-                    foreground: 'hsl(var(--muted-foreground))'
-                },
-                accent: {
-                    DEFAULT: 'hsl(var(--accent))',
-                    foreground: 'hsl(var(--accent-foreground))'
-                },
-                popover: {
-                    DEFAULT: 'hsl(var(--popover))',
-                    foreground: 'hsl(var(--popover-foreground))'
-                },
-                card: {
-                    DEFAULT: 'hsl(var(--card))',
-                    foreground: 'hsl(var(--card-foreground))'
-                }
             }
         }
     }

apps/post-analytics-spike/dist/modals-57ae95c9.mjs

@@ -1,4 +1,4 @@
-import { f as $, j as e, S as N0, c as o, R as U, a as t, u as K, b as l0, d as t0, e as E, N as P, g as g0 } from "./index-aeb0d0b2.mjs";
+import { f as $, j as e, S as N0, c as o, R as U, a as t, u as K, b as l0, d as t0, e as E, N as P, g as g0 } from "./index-c87e5883.mjs";
 var a0 = [
   "a",
   "button",
@@ -1078,4 +1078,4 @@ const lo = "bg-[rgba(98,109,121,0.2)] backdrop-blur-[3px]", o0 = ({
 export {
   Do as default
 };
-//# sourceMappingURL=modals-227cf2ca.mjs.map
+//# sourceMappingURL=modals-57ae95c9.mjs.map

apps/post-analytics-spike/src/PostAnalytics.tsx

@@ -19,8 +19,12 @@ const PostAnalytics = () => {
                     </GHDSBreadcrumbList>
                 </GHDSBreadcrumb>
                 <div className="flex items-start justify-between">
-                    <GHDSHeading size={1}>Post analytics</GHDSHeading>
+                    <GHDSHeading size="pagetitle">Post analytics</GHDSHeading>
-                    <GHDSButton size={'sm'} className="mt-1">It is something!</GHDSButton>
+                    <div className="flex items-center mt-1 gap-2">
+                        <GHDSButton variant='outline'>Refresh</GHDSButton>
+                        <GHDSButton variant='outline'>Share</GHDSButton>
+                        <GHDSButton variant='outline'>•••</GHDSButton>
+                    </div>
                 </div>
             </header>
             <div className="mt-8 border rounded-lg border-grey-300 min-h-[500px] flex items-center justify-center text-grey-500">