diff --git a/playground/tsconfig.json b/playground/tsconfig.json
index 8e1f3abe..28b66c52 100644
--- a/playground/tsconfig.json
+++ b/playground/tsconfig.json
@@ -1,119 +1,4 @@
 {
-  "compilerOptions": {
-    "jsx": "preserve",
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "skipLibCheck": true,
-    "strict": true,
-    "allowJs": true,
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
-    "types": [
-      "node"
-    ],
-    "baseUrl": ".",
-    "paths": {
-      "~~": [
-        "."
-      ],
-      "~~/*": [
-        "./*"
-      ],
-      "@@": [
-        "."
-      ],
-      "@@/*": [
-        "./*"
-      ],
-      "~": [
-        "."
-      ],
-      "~/*": [
-        "./*"
-      ],
-      "@": [
-        "."
-      ],
-      "@/*": [
-        "./*"
-      ],
-      "assets": [
-        "assets"
-      ],
-      "public": [
-        "public"
-      ],
-      "public/*": [
-        "public/*"
-      ],
-      "pinceau/runtime": [
-        "../src/runtime"
-      ],
-      "pinceau": [
-        "../src/index"
-      ],
-      "#app": [
-        "./node_modules/.pnpm/nuxt@3.0.0/node_modules/nuxt/dist/app"
-      ],
-      "#app/*": [
-        "./node_modules/.pnpm/nuxt@3.0.0/node_modules/nuxt/dist/app/*"
-      ],
-      "vue-demi": [
-        "./node_modules/.pnpm/nuxt@3.0.0/node_modules/nuxt/dist/app/compat/vue-demi"
-      ],
-      "#color-mode-options": [
-        "./.nuxt/color-mode-options"
-      ],
-      "#nuxt-component-meta": [
-        "./.nuxt/component-meta.mjs"
-      ],
-      "#nuxt-component-meta/types": [
-        "./.nuxt/component-meta.d.ts"
-      ],
-      "#head": [
-        "./node_modules/.pnpm/nuxt@3.0.0/node_modules/nuxt/dist/head/runtime"
-      ],
-      "#head/*": [
-        "./node_modules/.pnpm/nuxt@3.0.0/node_modules/nuxt/dist/head/runtime/*"
-      ],
-      "#imports": [
-        "./.nuxt/imports"
-      ],
-      "#build": [
-        "./.nuxt"
-      ],
-      "#build/*": [
-        "./.nuxt/*"
-      ],
-      "#pinceau/utils": [
-        "/Users/yaelguilloux/Code/sandbox/pinceau/playground/.nuxt/pinceau/utils.ts"
-      ],
-      "#pinceau/theme": [
-        "/Users/yaelguilloux/Code/sandbox/pinceau/playground/.nuxt/pinceau/index.ts"
-      ],
-      "#pinceau/schema": [
-        "/Users/yaelguilloux/Code/sandbox/pinceau/playground/.nuxt/pinceau/schema.ts"
-      ],
-      "#pinceau/definitions": [
-        "/Users/yaelguilloux/Code/sandbox/pinceau/playground/.nuxt/pinceau/schema.ts"
-      ],
-      "#components": [
-        "./.nuxt/components"
-      ]
-    }
-  },
-  "include": [
-    "./.nuxt/nuxt.d.ts",
-    "../**/*"
-  ],
-  "exclude": [
-    "./dist"
-  ],
-  "vueCompilerOptions": {
-    "plugins": [
-      "../dist/volar.cjs"
-    ]
-  }
-}
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
\ No newline at end of file
diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
index 52717d39..cf783e87 100644
--- a/src/runtime/plugin.ts
+++ b/src/runtime/plugin.ts
@@ -46,7 +46,7 @@ export const plugin: Plugin = {
      */
     function usePinceauRuntime(
       props: any = {},
-      variants: Variants,
+      variants: Variants<typeof props>,
       computedStyles: { [key: string]: ComputedRef },
     ) {
       // Current component instance
diff --git a/src/types/css.ts b/src/types/css.ts
index dda8fbcb..1e0cdb2a 100644
--- a/src/types/css.ts
+++ b/src/types/css.ts
@@ -45,7 +45,7 @@ export type CSSFunctionType<
   UtilsProperties = PinceauUtils,
 > =
   {
-    variants?: Variants
+    variants?: Variants<ComponentProps>
   }
   &
   {
diff --git a/src/types/theme.ts b/src/types/theme.ts
index 0eb56166..490c0f8d 100644
--- a/src/types/theme.ts
+++ b/src/types/theme.ts
@@ -7,4 +7,4 @@ export type PinceauTokensPaths = GeneratedPinceauPaths
 
 export type PinceauUtils = GeneratedPinceauUtils
 
-export type PinceauMediaQueries = 'dark' | 'light' | 'initial' | (keyof PinceauTheme['media'] extends string ? keyof PinceauTheme['media'] : never)
+export type PinceauMediaQueries = 'dark' | 'light' | 'initial' | keyof Pick<PinceauTheme, 'media'>['media']
diff --git a/src/types/variants.ts b/src/types/variants.ts
index 53df7926..0ce4ddad 100644
--- a/src/types/variants.ts
+++ b/src/types/variants.ts
@@ -1,34 +1,16 @@
-import type { CSSProperties } from './css'
-import type { PinceauMediaQueries } from './theme'
+import type { CSSProperties } from './css';
 
-export interface VariantOptions<T = string> {
-  type?: string
-  required?: boolean
-  default?: T | { [key in PinceauMediaQueries]?: T }
-  mediaPrefix?: boolean
-}
+export type Variant<T> = {
+  [K in keyof T]: {
+    [key: string]: string | (CSSProperties & { $class?: string });
+  } & {
+    options?: {
+      default?: T[K];
+      required?: boolean;
+      mediaPrefix?: boolean;
+      readonly type?: T[K];
+    };
+  };
+};
 
-export interface BooleanVariant {
-  true?: CSSProperties
-  false?: CSSProperties
-  [key: string]: CSSProperties
-}
-
-export interface EnumVariant {
-  [key: string]: CSSProperties
-}
-
-export interface ClassVariant {
-  [key: string]: string | (CSSProperties & { $class?: string })
-}
-
-export type Variant =
-  (BooleanVariant | EnumVariant | ClassVariant)
-  &
-  {
-    options?: VariantOptions
-  }
-
-export interface Variants {
-  [key: string]: Variant
-}
+export type Variants<T> = T extends Record<string, any> ? Variant<T> : any;