feat: home screen and navigation design

web/src/theme/ui.config.ts

@@ -39,6 +39,14 @@ export const renewUi = {
 		slots: {
 			base: 'rounded-none font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard)',
 		},
+		variants: {
+			size: {
+				md: {
+					leadingIcon: 'size-4',
+					trailingIcon: 'size-4',
+				},
+			},
+		},
 		defaultVariants: {
 			size: 'md',
 		},
@@ -98,6 +106,14 @@ export const renewUi = {
 		slots: {
 			base: 'rounded-none font-medium',
 		},
+		variants: {
+			size: {
+				md: {
+					base: 'h-5.5 gap-1 px-1.75 py-0 text-xs',
+					leadingIcon: 'size-3',
+				},
+			},
+		},
 	},
 	kbd: {
 		base: 'rounded-none font-mono',
@@ -181,7 +197,16 @@ export const renewUi = {
 				orientation: 'vertical',
 				active: true,
 				class: {
-					link: 'bg-(--ui-color-secondary-200) text-(--ui-color-primary-900) dark:bg-(--ui-color-secondary-300) before:hidden',
+					link: 'bg-(--ui-color-secondary-200) text-(--ui-color-primary-900) dark:bg-(--ui-color-secondary-300) font-medium before:hidden',
+					linkLeadingIcon: 'text-(--ui-color-primary-900)',
+				},
+			},
+			{
+				orientation: 'vertical',
+				active: false,
+				class: {
+					link: 'text-toned font-normal',
+					linkLeadingIcon: 'text-toned',
 				},
 			},
 		],