feat(KAN-17): add Emerald design system and resilient themes

2026-09-11 12:11:50 +00:00
parent 71d9d1b63e
commit 8657d75682
19 changed files with 757 additions and 254 deletions
@@ -0,0 +1,47 @@
+import { createApp, h } from 'vue';
+import '../../resources/css/app.css';
+import AppearanceTabs from '../../resources/js/components/AppearanceTabs.vue';
+import AlertError from '../../resources/js/components/AlertError.vue';
+import { Button } from '../../resources/js/components/ui/button';
+import { createAppearance } from '../../resources/js/composables/useAppearance';
+import { createLocalization } from '../../resources/js/lib/localization';
+
+const localization = createLocalization();
+createApp({
+    render: () =>
+        h('main', { class: 'mx-auto grid max-w-xl gap-column p-page' }, [
+            h('h1', { class: 'text-headline' }, 'Emerald design system'),
+            h(AppearanceTabs),
+            h(
+                'section',
+                {
+                    class: 'grid gap-column rounded-md border bg-card p-card text-card-foreground',
+                },
+                [
+                    h('h2', { class: 'text-title' }, 'Readable surfaces'),
+                    h(
+                        'p',
+                        { class: 'text-muted-foreground' },
+                        'Inter, emerald actions and a visible keyboard focus.',
+                    ),
+                    h('label', { for: 'sample-input' }, 'Sample input'),
+                    h('input', {
+                        id: 'sample-input',
+                        class: 'min-h-control rounded-md border border-input bg-background px-3',
+                        placeholder: 'Type here',
+                    }),
+                    h('div', { class: 'flex flex-wrap gap-stack' }, [
+                        h(Button, {}, () => localization.t('common.save')),
+                        h(Button, { variant: 'secondary' }, () =>
+                            localization.t('common.cancel'),
+                        ),
+                        h(Button, { variant: 'destructive' }, () => 'Delete'),
+                    ]),
+                    h(AlertError, { errors: ['A readable validation error.'] }),
+                ],
+            ),
+        ]),
+})
+    .use(localization)
+    .use(createAppearance())
+    .mount('#app');