chore: setup design references

docs/design/source/tokens/ui.config.ts

@@ -0,0 +1,183 @@
+export const renewUi = {
+	colors: {
+		primary: 'ink',
+		secondary: 'sand',
+		success: 'moss',
+		info: 'slate',
+		warning: 'ochre',
+		error: 'brick',
+		neutral: 'chalk'
+	},
+	icons: {
+		loading: 'i-lucide-loader-circle',
+		close: 'i-lucide-x',
+		check: 'i-lucide-check',
+		search: 'i-lucide-search',
+		chevronDown: 'i-lucide-chevron-down',
+		chevronRight: 'i-lucide-chevron-right',
+		arrowLeft: 'i-lucide-arrow-left',
+		copy: 'i-lucide-copy',
+		copyCheck: 'i-lucide-check',
+		dark: 'i-lucide-moon',
+		light: 'i-lucide-sun',
+		system: 'i-lucide-monitor',
+		success: 'i-lucide-circle-check',
+		info: 'i-lucide-info',
+		warning: 'i-lucide-triangle-alert',
+		error: 'i-lucide-circle-x',
+		menu: 'i-lucide-menu',
+		panelClose: 'i-lucide-panel-left-close',
+		panelOpen: 'i-lucide-panel-left-open',
+		ellipsis: 'i-lucide-ellipsis',
+		upload: 'i-lucide-upload',
+		eye: 'i-lucide-eye',
+		eyeOff: 'i-lucide-eye-off'
+	},
+	button: {
+		slots: {
+			base: 'rounded-none font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard)'
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	},
+	input: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented) placeholder:text-muted'
+		},
+		variants: {
+			size: {
+				md: {
+					base: 'text-base md:text-sm'
+				}
+			}
+		}
+	},
+	textarea: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented) placeholder:text-muted text-base md:text-sm'
+		}
+	},
+	select: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented)',
+			content: 'rounded-none shadow-(--shadow-popover)'
+		}
+	},
+	checkbox: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented)'
+		}
+	},
+	switch: {
+		slots: {
+			base: 'rounded-none',
+			thumb: 'rounded-none'
+		}
+	},
+	avatar: {
+		slots: {
+			root: 'rounded-none bg-(--ui-color-secondary-300)',
+			fallback: 'text-(--ui-color-primary-900) font-semibold'
+		}
+	},
+	chip: {
+		slots: {
+			base: 'rounded-none'
+		}
+	},
+	progress: {
+		slots: {
+			base: 'rounded-none',
+			indicator: 'rounded-none'
+		}
+	},
+	badge: {
+		slots: {
+			base: 'rounded-none font-medium'
+		}
+	},
+	kbd: {
+		base: 'rounded-none font-mono'
+	},
+	tabs: {
+		slots: {
+			list: 'rounded-none',
+			trigger: 'rounded-none',
+			indicator: 'rounded-none'
+		}
+	},
+	dropdownMenu: {
+		slots: {
+			content: 'rounded-none shadow-(--shadow-popover)',
+			item: 'rounded-none'
+		}
+	},
+	tooltip: {
+		slots: {
+			content: 'rounded-none bg-inverted text-inverted ring-0'
+		}
+	},
+	modal: {
+		slots: {
+			content: 'rounded-none shadow-(--shadow-modal) divide-default',
+			overlay: 'bg-(--ui-color-neutral-950)/40'
+		}
+	},
+	slideover: {
+		slots: {
+			content: 'rounded-none shadow-(--shadow-modal)',
+			overlay: 'bg-(--ui-color-neutral-950)/40'
+		}
+	},
+	toast: {
+		slots: {
+			root: 'rounded-none shadow-(--shadow-popover)',
+			progress: 'rounded-none'
+		}
+	},
+	toaster: {
+		slots: {
+			viewport: 'z-(--z-toast)'
+		}
+	},
+	alert: {
+		slots: {
+			root: 'rounded-none'
+		}
+	},
+	card: {
+		slots: {
+			root: 'rounded-none'
+		}
+	},
+	table: {
+		slots: {
+			thead: 'bg-elevated',
+			th: 'text-muted font-medium py-2',
+			td: 'py-3',
+			tr: 'data-[selectable=true]:hover:bg-elevated'
+		}
+	},
+	navigationMenu: {
+		compoundVariants: [
+			{
+				orientation: 'vertical',
+				active: true,
+				class: {
+					link: 'bg-(--ui-color-secondary-200) text-(--ui-color-primary-900) dark:bg-(--ui-color-secondary-300) before:hidden'
+				}
+			}
+		]
+	},
+	dashboardSidebar: {
+		slots: {
+			root: 'bg-default'
+		}
+	},
+	dashboardPanel: {
+		slots: {
+			body: 'bg-muted'
+		}
+	}
+}