Preparation for theming

2026-06-13 16:40:01 +00:00 · 2024-04-01 19:59:44 +02:00
parent d30cd9706d
commit 5a2b26ee0c
15 changed files with 209 additions and 57 deletions
@@ -1,13 +1,13 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "frontend/main.css",
    "baseColor": "slate",
-    "cssVariables": false,
+    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
@@ -4,13 +4,13 @@ import {cva, type VariantProps} from "class-variance-authority"
 import {cn} from "Frontend/@/lib/utils"

 const alertVariants = cva(
-    "relative w-full rounded-lg border border-slate-200 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 dark:border-slate-800 dark:[&>svg]:text-slate-50",
+    "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
    {
        variants: {
            variant: {
-                default: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
+                default: "bg-background text-foreground",
                destructive:
-                    "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
+                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
            },
        },
        defaultVariants: {
@@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef<
    <AvatarPrimitive.Fallback
        ref={ref}
        className={cn(
-            "flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800",
+            "flex h-full w-full items-center justify-center rounded-full bg-muted",
            className
        )}
        {...props}
@@ -5,25 +5,26 @@ import {cva, type VariantProps} from "class-variance-authority"
 import {cn} from "Frontend/@/lib/utils"

 const buttonVariants = cva(
-    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
    {
        variants: {
            variant: {
-                default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+                default:
+                    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
                destructive:
-                    "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+                    "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
                outline:
-                    "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+                    "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
                secondary:
-                    "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
-                ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
-                link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+                    "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
            },
            size: {
-                default: "h-10 px-4 py-2",
-                sm: "h-9 rounded-md px-3",
-                lg: "h-11 rounded-md px-8",
-                icon: "h-10 w-10",
+                default: "h-9 px-4 py-2",
+                sm: "h-8 rounded-md px-3 text-xs",
+                lg: "h-10 rounded-md px-8",
+                icon: "h-9 w-9",
            },
        },
        defaultVariants: {
@@ -46,6 +47,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
            <Comp
                className={cn(buttonVariants({variant, size, className}))}
                ref={ref}
+                type="button"
                {...props}
            />
        )
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
    <div
        ref={ref}
        className={cn(
-            "rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+            "rounded-lg border bg-card text-card-foreground shadow-sm",
            className
        )}
        {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({className, ...props}, ref) => (
    <p
        ref={ref}
-        className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+        className={cn("text-sm text-muted-foreground", className)}
        {...props}
    />
 ))
@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import {Check, ChevronRight, Circle} from "lucide-react"
+import {CheckIcon, ChevronRightIcon, DotFilledIcon,} from "@radix-ui/react-icons"

 import {cn} from "Frontend/@/lib/utils"

@@ -25,14 +25,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
    <DropdownMenuPrimitive.SubTrigger
        ref={ref}
        className={cn(
-            "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
+            "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
            inset && "pl-8",
            className
        )}
        {...props}
    >
        {children}
-        <ChevronRight className="ml-auto h-4 w-4"/>
+        <ChevronRightIcon className="ml-auto h-4 w-4"/>
    </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
    <DropdownMenuPrimitive.SubContent
        ref={ref}
        className={cn(
-            "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
            className
        )}
        {...props}
@@ -63,7 +63,8 @@ const DropdownMenuContent = React.forwardRef<
            ref={ref}
            sideOffset={sideOffset}
            className={cn(
-                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                className
            )}
            {...props}
@@ -81,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
    <DropdownMenuPrimitive.Item
        ref={ref}
        className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+            "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
            inset && "pl-8",
            className
        )}
@@ -97,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    <DropdownMenuPrimitive.CheckboxItem
        ref={ref}
        className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
            className
        )}
        checked={checked}
@@ -105,7 +106,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4"/>
+        <CheckIcon className="h-4 w-4"/>
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
        {children}
@@ -121,14 +122,14 @@ const DropdownMenuRadioItem = React.forwardRef<
    <DropdownMenuPrimitive.RadioItem
        ref={ref}
        className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
            className
        )}
        {...props}
    >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current"/>
+        <DotFilledIcon className="h-4 w-4 fill-current"/>
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
        {children}
@@ -160,7 +161,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({className, ...props}, ref) => (
    <DropdownMenuPrimitive.Separator
        ref={ref}
-        className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
+        className={cn("-mx-1 my-1 h-px bg-muted", className)}
        {...props}
    />
 ))
@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
            <input
                type={type}
                className={cn(
-                    "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+                    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
                    className
                )}
                ref={ref}
@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
        ref={ref}
        sideOffset={sideOffset}
        className={cn(
-            "z-50 overflow-hidden rounded-md border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+            "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
            className
        )}
        {...props}
@@ -1,24 +1,40 @@
 import {Theme} from "Frontend/@/registry/themes";
+import {Card} from "Frontend/@/components/ui/card";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "Frontend/@/components/ui/tooltip";
+import {useTheme} from "next-themes";

 export default function ThemePreview({theme}: { theme: Theme }) {
+    const {resolvedTheme} = useTheme();
+
    return (
-        <div className="flex flex-col items-center">
-            <svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path id="background" d="M0 0H228V120H0V0Z" fill={theme.cssVars.dark.background}/>
-                <rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
-                <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
-                <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
-                <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
-                <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-                <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
-                <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
-                <rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
-                <rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
-                <rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-                <rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
-            </svg>
-            <p>{theme.name}</p>
-        </div>
+        <TooltipProvider>
+            <Tooltip delayDuration={0}>
+                <TooltipTrigger asChild>
+                    <Card className="overflow-hidden flex place-self-center">
+                        <svg width="228" height="120" viewBox="0 0 228 120" fill="none"
+                             xmlns="http://www.w3.org/2000/svg">
+                            {/*@ts-ignore*/}
+                            <path id="background" d="M0 0H228V120H0V0Z" fill={theme.cssVars[resolvedTheme].background}/>
+                            <rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2"
+                                  fill="#30363D"/>
+                            <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
+                            <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
+                            <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
+                            <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                            <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
+                            <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
+                            <rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
+                            <rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
+                            <rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                            <rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                        </svg>
+                    </Card>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                    <p className="capitalize">{theme.name}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
    );
 }
 /*
@@ -49,7 +49,7 @@ const Wizard = ({children, initialValues, onSubmit}: {
            validationSchema={step.props.validationSchema}
        >
            {formik => (
-                <Form className="flex flex-col grow">
+                <Form className="flex flex-col h-full">
                    <div className="w-full mb-8">
                        <p>Step {stepNumber + 1} of {steps.length}</p>
                        {/*<Stepper activeStep={stepNumber}>
@@ -1,3 +1,83 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+
+        --radius: 0.5rem;
+
+        --warning: 38 92% 50%;
+        --warning-foreground: 48 96% 89%;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+
+        --warning: 48 96% 89%;
+        --warning-foreground: 38 92% 50%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
@@ -37,7 +37,7 @@ function WelcomeStep() {
 function ThemeStep() {
    return (
        <div className="flex flex-col size-full items-center">
-            <div className="size-full grid grid-cols-3 grid-rows-2 w-1/2 min-w-[468px] gap-12 items-center">
+            <div className="grid grid-cols-3 w-1/2 min-w-[468px] gap-12">
                {themes.map(((theme: Theme) => (
                    <ThemePreview key={theme.name} theme={theme}/>
                )))}
@@ -27,6 +27,7 @@
        "@polymer/polymer": "3.5.1",
        "@radix-ui/react-avatar": "^1.0.4",
        "@radix-ui/react-dropdown-menu": "^2.0.6",
+        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.0.2",
        "@radix-ui/react-slot": "^1.0.2",
        "@radix-ui/react-tooltip": "^1.0.7",
@@ -53,6 +54,7 @@
        "@lit-labs/react": "^1.1.0",
        "@rollup/plugin-replace": "5.0.4",
        "@rollup/pluginutils": "5.0.5",
+        "@types/node": "^20.12.2",
        "@types/react": "18.2.42",
        "@types/react-dom": "^18.0.8",
        "@vitejs/plugin-react": "4.2.0",
@@ -3086,6 +3088,14 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
    "node_modules/@radix-ui/react-id": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
@@ -4008,9 +4018,9 @@
      "peer": true
    },
    "node_modules/@types/node": {
-      "version": "20.11.30",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
-      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "version": "20.12.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz",
+      "integrity": "sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==",
      "dev": true,
      "dependencies": {
        "undici-types": "~5.26.4"
@@ -22,6 +22,7 @@
    "@polymer/polymer": "3.5.1",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tooltip": "^1.0.7",
@@ -48,6 +49,7 @@
    "@lit-labs/react": "^1.1.0",
    "@rollup/plugin-replace": "5.0.4",
    "@rollup/pluginutils": "5.0.5",
+    "@types/node": "^20.12.2",
    "@types/react": "18.2.42",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "4.2.0",
@@ -108,7 +110,8 @@
    "@radix-ui/react-slot": "$@radix-ui/react-slot",
    "@radix-ui/react-avatar": "$@radix-ui/react-avatar",
    "@radix-ui/react-dropdown-menu": "$@radix-ui/react-dropdown-menu",
-    "@radix-ui/react-tooltip": "$@radix-ui/react-tooltip"
+    "@radix-ui/react-tooltip": "$@radix-ui/react-tooltip",
+    "@radix-ui/react-icons": "$@radix-ui/react-icons"
  },
  "vaadin": {
    "dependencies": {
@@ -152,6 +155,6 @@
      "workbox-core": "7.0.0",
      "workbox-precaching": "7.0.0"
    },
-    "hash": "54c9ffc1de2ff554baf5ced1be2e704d4a354138bf9cbfca2d4fc83f126a4563"
+    "hash": "5375ee653b483f5c0b565f19670e73ec7e02e2abb121e622411201c6c6cb2431"
  }
 }
@@ -22,7 +22,47 @@ export default {
        extend: {
            colors: {
                'gf-primary': '#2332c8',
-                'gf-secondary': '#6441a5'
+                'gf-secondary': '#6441a5',
+                warning: "hsl(var(--warning))",
+                "warning-foreground": "hsl(var(--warning-foreground))",
+                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))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
            },
            keyframes: {
                "accordion-down": {