refactor(module)!: implement design system with CSS variables (#2298)

test/components/Avatar.spec.ts

@@ -13,7 +13,7 @@ describe('Avatar', () => {
     ['with text', { props: { text: '+1' } }],
     ['with icon', { props: { icon: 'i-heroicons-photo' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { src: 'https://avatars.githubusercontent.com/u/739984?v=4', size } }]),
-    ['with class', { props: { class: 'bg-white dark:bg-gray-900' } }],
+    ['with class', { props: { class: 'bg-[--ui-bg]' } }],
     ['with ui', { props: { ui: { fallback: 'font-bold' } } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AvatarProps }) => {
     const html = await ComponentRender(nameOrHtml, options, Avatar)