@postxl/generators 1.0.9 → 1.0.11

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-column-header.tsx

@@ -28,6 +28,7 @@ import {
 } from '@components/ui/dropdown-menu/dropdown-menu'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@components/ui/tooltip/tooltip'
 import { cn } from '@lib/utils'
+
 import { GanttTimeline } from './cell-variants/utils/gantt-timeline'
 
 function getColumnVariant(variant?: Cell['variant']): {
@@ -139,7 +140,7 @@ export function DataGridColumnHeader<TData, TValue>({
       <DropdownMenu>
         <DropdownMenuTrigger
           className={cn(
-            'flex size-full items-center justify-between gap-2 p-2 text-sm bg-sidebar-accent/80 font-bold hover:bg-neutral-100/40 data-[state=open]:bg-neutral-100/40 [&_svg]:size-4 dark:hover:bg-neutral-800/40 dark:data-[state=open]:bg-neutral-800/40',
+            'flex size-full items-center justify-between gap-2 p-2 text-sm bg-sidebar-accent/80 font-bold hover:bg-secondary/40 data-[state=open]:bg-secondary/40 [&_svg]:size-4',
             isAnyColumnResizing && 'pointer-events-none',
             className,
           )}
@@ -151,7 +152,7 @@ export function DataGridColumnHeader<TData, TValue>({
               <TooltipProvider>
                 <Tooltip delayDuration={100}>
                   <TooltipTrigger asChild>
-                    <columnVariant.icon className="size-3.5 shrink-0 text-neutral-500 dark:text-neutral-400" />
+                    <columnVariant.icon className="size-3.5 shrink-0 text-muted-foreground" />
                   </TooltipTrigger>
                   <TooltipContent side="top">
                     <p>{columnVariant.label}</p>
@@ -161,13 +162,13 @@ export function DataGridColumnHeader<TData, TValue>({
             )}
             <span className="truncate">{label}</span>
           </div>
-          <ChevronDownIcon className="shrink-0 text-neutral-500 dark:text-neutral-400" />
+          <ChevronDownIcon className="shrink-0 text-muted-foreground" />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" sideOffset={0} className="w-60">
           {column.getCanSort() && (
             <>
               <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
                 checked={column.getIsSorted() === 'asc'}
                 onClick={() => onSortingChange('asc')}
               >
@@ -175,7 +176,7 @@ export function DataGridColumnHeader<TData, TValue>({
                 Sort asc
               </DropdownMenuCheckboxItem>
               <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
                 checked={column.getIsSorted() === 'desc'}
                 onClick={() => onSortingChange('desc')}
               >
@@ -195,29 +196,23 @@ export function DataGridColumnHeader<TData, TValue>({
               {column.getCanSort() && <DropdownMenuSeparator />}
 
               {isPinnedLeft ? (
-                <DropdownMenuItem className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400" onClick={onUnpin}>
+                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onUnpin}>
                   <PinOffIcon />
                   Unpin from left
                 </DropdownMenuItem>
               ) : (
-                <DropdownMenuItem
-                  className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
-                  onClick={onLeftPin}
-                >
+                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onLeftPin}>
                   <PinIcon />
                   Pin to left
                 </DropdownMenuItem>
               )}
               {isPinnedRight ? (
-                <DropdownMenuItem className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400" onClick={onUnpin}>
+                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onUnpin}>
                   <PinOffIcon />
                   Unpin from right
                 </DropdownMenuItem>
               ) : (
-                <DropdownMenuItem
-                  className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
-                  onClick={onRightPin}
-                >
+                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onRightPin}>
                   <PinIcon />
                   Pin to right
                 </DropdownMenuItem>
@@ -228,7 +223,7 @@ export function DataGridColumnHeader<TData, TValue>({
             <>
               <DropdownMenuSeparator />
               <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
                 checked={!column.getIsVisible()}
                 onClick={() => column.toggleVisibility(false)}
               >
@@ -292,12 +287,10 @@ function DataGridColumnResizerImpl<TData, TValue>({ header, table, label }: Data
       className={cn(
         'right-0 absolute top-0 z-50 h-full w-0 touch-none select-none cursor-ew-resize focus:outline-none',
         // visible thin line (use right positioning and a stable 1px width)
-        "before:content-[''] before:absolute before:inset-y-0 before:right-0 before:translate-x-1/2 before:w-px before:h-full before:bg-neutral-700 dark:before:bg-neutral-400 before:opacity-0 before:transition-opacity before:duration-150",
+        "before:content-[''] before:absolute before:inset-y-0 before:right-0 before:translate-x-1/2 before:w-px before:h-full before:bg-accent-foreground/70 before:opacity-0 before:transition-opacity before:duration-150",
         // large invisible hit area
         "after:content-[''] after:absolute after:inset-y-0 after:right-0 after:translate-x-1/2 after:w-[18px] after:h-full after:bg-transparent",
-        header.column.getIsResizing()
-          ? 'before:opacity-100 before:bg-neutral-900 dark:before:bg-neutral-50'
-          : 'hover:before:opacity-100',
+        header.column.getIsResizing() ? 'before:opacity-100 before:bg-accent-foreground' : 'hover:before:opacity-100',
       )}
       style={{ willChange: 'transform, opacity', transform: 'translateZ(0)' }}
       onDoubleClick={onDoubleClick}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-row.tsx

@@ -79,7 +79,7 @@ function DataGridRowImpl<TData>({
       ref={rowRef}
       tabIndex={-1}
       className={cn(
-        'absolute flex w-full border-b h-[calc(var(--line-height-sm)*(var(--line-count))+12px)]',
+        'absolute flex w-full border-b h-[calc(var(--data-grid-line-height)*(var(--line-count))+12px)]',
         className,
       )}
       style={{ '--line-count': `${getLineCount(rowHeight)}` } as React.CSSProperties}
@@ -107,7 +107,7 @@ function DataGridRowImpl<TData>({
             {typeof cell.column.columnDef.header === 'function' ? (
               <div
                 className={cn('size-full px-3 py-1.5', {
-                  'bg-neutral-900/10 dark:bg-neutral-50/10': isRowSelected,
+                  'bg-accent-foreground/10': isRowSelected,
                 })}
               >
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-search.tsx

@@ -152,7 +152,7 @@ function DataGridSearchImpl({
     <div
       role="search"
       data-slot="grid-search"
-      className="fade-in-0 slide-in-from-top-2 absolute top-4 right-4 z-50 flex animate-in flex-col gap-2 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-950"
+      className="fade-in-0 slide-in-from-top-2 absolute top-4 right-4 z-50 flex animate-in flex-col gap-2 rounded-lg border border-border bg-background p-2 shadow-lg"
     >
       <div className="flex items-center gap-2">
         <Input
@@ -195,7 +195,7 @@ function DataGridSearchImpl({
           </Button>
         </div>
       </div>
-      <div className="flex items-center gap-1 whitespace-nowrap text-neutral-500 text-xs dark:text-neutral-400">
+      <div className="flex items-center gap-1 whitespace-nowrap text-muted-foreground">
         {searchMatches.length > 0 ? (
           <span>
             {matchIndex + 1} of {searchMatches.length}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-utils.ts

@@ -20,21 +20,10 @@ export function parseCellKey(cellKey: string): Required<CellPosition> {
 }
 
 export function getRowHeightValue(rowHeight: RowHeightValue): number {
-  // TODO: find a way to use the css variable directly (currently the style might not be loaded yet which would lead to wrong numbers)
-  const lineHeight = /* Number.parseFloat(
-    getComputedStyle(document.documentElement)
-      .getPropertyValue('--line-height-sm')
-      .trim()
-      .replaceAll(/[^\d.-]/g, ''),
-  ) */ 16
-  /* const rowHeightMap: Record<RowHeightValue, number> = {
-    short: lineHeight * getLineCount(rowHeight) + 12,
-    medium: lineHeight * getLineCount(rowHeight) + 12,
-    tall: lineHeight * getLineCount(rowHeight) + 12,
-    'extra-tall': lineHeight * getLineCount(rowHeight) + 12,
-  } */
+  // TODO: Make lineHeight configurable / use css variable: --data-grid-line-height
+  const lineHeight = 16
 
-  return /* rowHeightMap[rowHeight] */ lineHeight * getLineCount(rowHeight) + 12
+  return lineHeight * getLineCount(rowHeight) + 12
 }
 
 export function getLineCount(rowHeight: RowHeightValue): number {

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-view-menu.tsx

@@ -251,7 +251,7 @@ export function DataGridViewMenu<TData>({ table, ...props }: DataGridViewMenuPro
           size="sm"
           className="ml-auto hidden h-8 font-normal lg:flex"
         >
-          <MixerHorizontalIcon className="text-neutral-500 dark:text-neutral-400" />
+          <MixerHorizontalIcon className="text-muted-foreground" />
           View
         </Button>
       </PopoverTrigger>
@@ -310,7 +310,7 @@ export function DataGridViewMenu<TData>({ table, ...props }: DataGridViewMenuPro
                             startPointerDrag(e, column.id)
                           }}
                           className={cn(
-                            'size-4 text-neutral-400',
+                            'size-4 text-muted-foreground',
                             searchQuery.trim() !== '' && 'opacity-10',
                             searchQuery.trim() === '' && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),
                           )}
@@ -326,7 +326,7 @@ export function DataGridViewMenu<TData>({ table, ...props }: DataGridViewMenuPro
                               ? column.getIsVisible()
                                 ? 'opacity-100'
                                 : 'opacity-0'
-                              : 'opacity-50 text-neutral-400',
+                              : 'opacity-50 text-muted-foreground',
                           )}
                         />
                       </CommandItem>

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid.tsx

@@ -82,7 +82,7 @@ export function DataGrid<TData>({
         data-slot="grid"
         tabIndex={0}
         ref={dataGridRef}
-        className="relative grid select-none overflow-auto rounded-md border border-neutral-200 focus:outline-none dark:border-neutral-800"
+        className="relative grid select-none overflow-auto rounded-md border border-border focus:outline-none"
         style={{
           ...columnSizeVars,
           // dynamically include measured header/footer heights (falling back to previous magic numbers)
@@ -98,7 +98,7 @@ export function DataGrid<TData>({
           role="rowgroup"
           data-slot="grid-header"
           ref={headerRef}
-          className="sticky top-0 z-10 grid border-b bg-white dark:bg-neutral-950"
+          className="sticky top-0 z-10 grid border-b bg-background"
         >
           {table.getHeaderGroups().map((headerGroup, rowIndex) => (
             <div
@@ -139,7 +139,7 @@ export function DataGrid<TData>({
                     }}
                   >
                     {header.isPlaceholder ? null : typeof header.column.columnDef.header === 'function' ? (
-                      <div className="size-full px-3 py-1.5 bg-sidebar-accent/80 hover:bg-neutral-100/40 dark:hover:bg-neutral-800/40">
+                      <div className="size-full px-3 py-1.5 bg-secondary/80 hover:bg-secondary/40">
                         {flexRender(header.column.columnDef.header, header.getContext())}
                       </div>
                     ) : (
@@ -183,7 +183,7 @@ export function DataGrid<TData>({
             role="rowgroup"
             data-slot="grid-footer"
             ref={footerRef}
-            className="sticky bottom-0 z-10 grid border-t bg-white dark:bg-neutral-950"
+            className="sticky bottom-0 z-10 grid border-t bg-background"
           >
             <div
               role="row"
@@ -195,7 +195,7 @@ export function DataGrid<TData>({
               <div
                 role="gridcell"
                 tabIndex={0}
-                className="relative flex h-9 grow items-center bg-neutral-100/30 transition-colors hover:bg-neutral-100/50 focus:bg-neutral-100/50 focus:outline-none dark:bg-neutral-800/30 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50"
+                className="relative flex h-9 grow items-center bg-secondary/30 transition-colors hover:bg-secondary/50 focus:bg-secondary/50 focus:outline-none"
                 style={{
                   width: table.getTotalSize(),
                   minWidth: table.getTotalSize(),
@@ -203,7 +203,7 @@ export function DataGrid<TData>({
                 onClick={onRowAdd}
                 onKeyDown={onAddRowKeyDown}
               >
-                <div className="sticky left-0 flex items-center gap-2 px-3 text-neutral-500 dark:text-neutral-400">
+                <div className="sticky left-0 flex items-center gap-2 px-3 text-muted-foreground">
                   <PlusIcon className="size-3.5" />
                   <span className="text-sm">Add row</span>
                 </div>

package/dist/frontend-core/template/src/components/ui/data-grid/styles.css

@@ -0,0 +1,3 @@
+@theme inline {
+  --data-grid-line-height: 16px;
+}

package/dist/frontend-core/template/src/components/ui/data-table/data-table.tsx

@@ -1,6 +1,6 @@
 import '@glideapps/glide-data-grid/dist/index.css'
 
-import { useTheme } from '@context-providers/theme-context-provider'
+import { type Theme as ContextTheme, useTheme } from '@context-providers/theme-context-provider'
 import {
   type CellClickedEventArgs,
   DataEditor,
@@ -125,20 +125,19 @@ export function DataTable<Row extends object, ColumnId extends string = string>(
 }: DataTableProps<Row, ColumnId>) {
   const sortOrder = currentSort?.order === 'asc' ? 'sortAscending' : 'sortDescending'
   const [managedColumns, setManagedColumns] = useState<ManagedDataTableColumn<Row, ColumnId>[]>([])
-  const { theme, isThemeReady } = useTheme()
+  const { brand, colorMode } = useTheme()
+  const theme: ContextTheme = `${brand} ${colorMode}`
   const [tableTheme, setTableTheme] = useState<Partial<Theme> | undefined>()
 
-  const getTheme = useCallback(() => getTableTheme(theme), [theme])
-
   useEffect(() => {
-    // we need this timeout to make sure 'getTableTheme' returns the correct css variables
-    if (isThemeReady) {
-      setTimeout(() => {
-        const newTheme = getTheme()
-        setTableTheme(newTheme)
-      }, 0)
-    }
-  }, [getTheme, isThemeReady, theme])
+    const observer = new MutationObserver(() => {
+      setTableTheme(getTableTheme(theme))
+    })
+
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style', 'class'] })
+
+    return () => observer.disconnect()
+  }, [theme])
 
   useEffect(() => {
     setManagedColumns(

package/dist/frontend-core/template/src/context-providers/theme-context-provider.tsx

@@ -1,100 +1,85 @@
-import { createContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useEffect, useMemo } from 'react'
 import useLocalStorageState from 'use-local-storage-state'
 
 import { createUseContext } from '@lib/react'
 
-export type Theme = 'dark' | 'light' | 'system'
-type ThemeLightDark = 'dark' | 'light'
+const ALLOWED_BRANDS = ['client', 'default'] as const
+
+export type ColorMode = 'dark' | 'light' | 'system'
+export type Brand = (typeof ALLOWED_BRANDS)[number]
+export type Theme = `${Brand} ${ColorMode}`
+type ResolvedColorMode = 'dark' | 'light'
 
 type ThemeProviderProps = {
   children: React.ReactNode
-  defaultTheme?: Theme
+  defaultBrand?: Brand
+  defaultColorMode?: ColorMode
   storageKey?: string
 }
 
 type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-  isThemeReady: boolean
-}
-
-const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null,
-  isThemeReady: false,
+  brand: Brand
+  colorMode: ColorMode
+  setColorMode: (colorMode: ColorMode) => void
+  setBrand: (brand: Brand) => void
 }
 
-const ThemeContext = createContext<ThemeProviderState>(initialState)
-const STORAGE_KEY = 'usp-theme-mode'
-
-function nextFrame(): Promise<void> {
-  return new Promise((r) => requestAnimationFrame(() => r()))
+type ThemeStorage = {
+  brand: Brand
+  colorMode: ColorMode
 }
 
-/**
- * here we wait until the css var '--theme-ready-flag' is set, so we know the css is loaded
- * we need this 'hack' because we set the values of the DataTable with js and read the values from the css file.
- * to make sure these values are not undefined, we need to wait until the css is loaded.
- */
-async function waitForThemeApplied(expected: Theme, timeoutMs = 500): Promise<boolean> {
-  const start = performance.now()
-  // Give the browser a paint opportunity
-  await nextFrame()
-
-  while (performance.now() - start < timeoutMs) {
-    const value = getComputedStyle(document.documentElement)
-      .getPropertyValue('--theme-ready-flag')
-      .replaceAll(/['"\s]/g, '')
-    if (value === expected) {
-      return true
-    }
-    await nextFrame()
-  }
-  return false
+const initialState: ThemeProviderState = {
+  brand: 'default',
+  colorMode: 'system',
+  setColorMode: () => null,
+  setBrand: () => null,
 }
 
-export function ThemeProvider({ children, defaultTheme = 'system', ...props }: Readonly<ThemeProviderProps>) {
-  const [theme, setTheme] = useLocalStorageState(STORAGE_KEY, {
-    defaultValue: defaultTheme,
+const ThemeContext = createContext<ThemeProviderState>(initialState)
+const STORAGE_KEY = 'PXL-theme-mode'
+
+export function ThemeProvider({
+  children,
+  defaultBrand = 'default',
+  defaultColorMode = 'system',
+  ...props
+}: Readonly<ThemeProviderProps>) {
+  const [themeStorage, setThemeStorage] = useLocalStorageState<ThemeStorage>(STORAGE_KEY, {
+    defaultValue: { brand: defaultBrand, colorMode: defaultColorMode },
   })
-  const [isThemeReady, setIsThemeReady] = useState(false)
+  const { brand, colorMode } = themeStorage
 
   useEffect(() => {
     const root = globalThis.document.documentElement
 
-    root.classList.remove('light', 'dark')
+    root.classList.remove('light', 'dark', ...ALLOWED_BRANDS)
+    root.classList.add(brand)
 
-    let applied: ThemeLightDark
-    if (theme === 'system') {
-      applied = globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-      root.classList.add(applied)
+    let resolvedColorMode: ResolvedColorMode
+    if (colorMode === 'system') {
+      resolvedColorMode = globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      setThemeStorage({ brand, colorMode: resolvedColorMode })
+      root.classList.add(resolvedColorMode)
       return
     }
-    applied = theme
-    root.classList.add(theme)
 
-    let cancelled = false
-
-    void (async () => {
-      // Option A: wait for computed variable
-      const ok = await waitForThemeApplied(applied)
-      if (!cancelled) {
-        setIsThemeReady(ok)
-      }
-    })()
-
-    return () => {
-      cancelled = true
-    }
-  }, [theme])
+    resolvedColorMode = colorMode
+    root.classList.add(resolvedColorMode)
+  }, [brand, colorMode, setThemeStorage])
 
   const value = useMemo(
     () => ({
-      theme,
-      setTheme,
-      isThemeReady,
+      brand,
+      colorMode,
+      setColorMode: (newColorMode: ColorMode) => {
+        setThemeStorage({ brand, colorMode: newColorMode })
+      },
+      setBrand: (newBrand: Brand) => {
+        setThemeStorage({ brand: newBrand, colorMode })
+      },
     }),
-    [isThemeReady, setTheme, theme],
+    [brand, colorMode, setThemeStorage],
   )
 
   return (

package/dist/frontend-core/template/src/main.tsx

@@ -32,7 +32,7 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
         <AuthProvider>
-          <ThemeProvider defaultTheme="light">
+          <ThemeProvider>
             <AppRouter />
           </ThemeProvider>
         </AuthProvider>

package/dist/frontend-core/template/src/pages/dashboard/dashboard.page.tsx

@@ -17,14 +17,14 @@ import type { Model } from '@components/ui/spreadsheet/types'
 
 export const DashboardPage = () => {
   const { logout, user } = useAuth()
-  const { theme, setTheme } = useTheme()
+  const { colorMode, setColorMode } = useTheme()
 
   const [selectedPost, setSelectedPost] = useState<Post | null>(null)
   const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false)
 
   const onToggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light')
-    toast.info("As you may see now it's " + (theme === 'light' ? 'dark' : 'light') + ' theme')
+    setColorMode(colorMode === 'light' ? 'dark' : 'light')
+    toast.info("As you may see now it's " + (colorMode === 'light' ? 'dark' : 'light') + ' color mode')
   }
   const { list } = usePosts()
 
@@ -43,7 +43,7 @@ export const DashboardPage = () => {
         title={APP_CONFIG.AUTH ? 'Dashboard (authorized route)' : 'Dashboard'}
         controls={[
           <Button key="btn-theme" onClick={onToggleTheme} __e2e_test_id__="button-toggle-theme">
-            {theme === 'light' ? <MoonIcon /> : <SunIcon />}
+            {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
           </Button>,
           APP_CONFIG.AUTH && (
             <Button key="btn-logout" onClick={logout}>

package/dist/frontend-core/template/src/styles/styles.css

@@ -3,6 +3,8 @@
 
 @import './theme-default.css';
 
+@import '../components/ui/data-grid/styles.css';
+
 /* important to override the tailwind variant to use our class instead of the preferred color theme (https://tailwindcss.com/docs/dark-mode) */
 @custom-variant dark (&:where(.dark, .dark *)); /* NOSONAR */
 
@@ -15,12 +17,110 @@
   }
   body {
     @apply bg-background text-foreground text-base font-normal;
+  }
+}
+
+@layer components {
+  h1 {
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl-line-height);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  h2 {
+    font-size: var(--text-xl);
+    line-height: var(--text-xl-line-height);
+    font-weight: var(--font-weight-semibold);
+  }
 
-    /* line height for text-sm (used to determine row height in data-grid) */
-    --line-height-sm: 16px;
+  h3 {
+    font-size: var(--text-lg);
+    line-height: var(--text-lg-line-height);
+    font-weight: var(--font-weight-semibold);
   }
 }
 
+/**
+ * the theme will be parsed by the tailwindcss plugin and creates utility classes for each variable
+ * @see: https://tailwindcss.com/docs/theme#theme-variable-namespaces
+ * @see: defaults: https://tailwindcss.com/docs/theme#default-theme-variable-reference
+ * @see: usage of utility classes: https://tailwindcss.com/docs/styling-with-utility-classes
+ */
+@theme inline {
+  --font-sans: Helvetica, sans-serif;
+
+  /* table content and other space relevant text */
+  --text-sm: 11px;
+  --text-sm-line-height: 16px;
+  /* 12px (header buttons, dropdowns, menus) */
+  --text-base: 12px;
+  --text-base-line-height: 16px;
+  /* 14px (H3, tab nav menu, news copy) */
+  --text-lg: 14px;
+  --text-lg-line-height: 20px;
+  /* 16px (H2) */
+  --text-xl: 16px;
+  --text-xl-line-height: 24px;
+  /* 24px (H1, large value texts) */
+  --text-2xl: 24px;
+  --text-2xl-line-height: 32px;
+
+  /* Colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-background: light-dark(var(--color-gray-50), var(--color-gray-500));
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Border radius */
+  --radius-xs: calc(var(--radius) * 0.25);
+  --radius-sm: calc(var(--radius) * 0.5);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) * 1.5);
+  --radius-xl: calc(var(--radius) * 2);
+  --radius-2xl: calc(var(--radius) * 2.5);
+  --radius-3xl: calc(var(--radius) * 3.5);
+  --radius-4xl: calc(var(--radius) * 5);
+
+  /* Shadows */
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}
+
 /**
  * Tailwind Breakpoints
  *