feat(css): set up theme

app/assets/css/ui/background.css

@@ -0,0 +1,14 @@
+:root {
+  --ui-bg: var(--nord6);
+  --ui-bg-muted: var(--nord5);
+  --ui-bg-elevated: var(--nord5);
+  --ui-bg-accented: var(--nord4);
+  --ui-bg-inverted: var(--nord0);
+}
+.dark {
+  --ui-bg: var(--nord0);
+  --ui-bg-muted: var(--nord1);
+  --ui-bg-elevated: var(--nord1);
+  --ui-bg-accented: var(--nord2);
+  --ui-bg-inverted: var(--nord6);
+}

app/assets/css/ui/border.css

@@ -0,0 +1,12 @@
+:root {
+  --ui-border: var(--nord5);
+  --ui-border-muted: var(--nord6);
+  --ui-border-accented: var(--nord4);
+  --ui-border-inverted: var(--nord0);
+}
+.dark {
+  --ui-border: var(--nord3);
+  --ui-border-muted: var(--nord2);
+  --ui-border-accented: var(--nord4);
+  --ui-border-inverted: var(--nord6);
+}

app/assets/css/ui/colors.css

@@ -0,0 +1,8 @@
+:root {
+  --ui-primary: var(--nord8);
+  --ui-secondary: var(--nord9);
+  --ui-success: var(--nord14);
+  --ui-info: var(--nord9);
+  --ui-warning: var(--nord13);
+  --ui-error: var(--nord11);
+}

app/assets/css/ui/index.css

@@ -0,0 +1,4 @@
+@import './colors.css';
+@import './text.css';
+@import './background.css';
+@import './border.css';

app/assets/css/ui/text.css

@@ -0,0 +1,16 @@
+:root {
+  --ui-text-dimmed: var(--nord3);
+  --ui-text-muted: var(--nord3);
+  --ui-text-toned: var(--nord2);
+  --ui-text: var(--nord0);
+  --ui-text-highlighted: var(--nord0);
+  --ui-text-inverted: var(--nord6);
+}
+.dark {
+  --ui-text-dimmed: var(--nord3);
+  --ui-text-muted: var(--nord4);
+  --ui-text-toned: var(--nord4);
+  --ui-text: var(--nord6);
+  --ui-text-highlighted: var(--nord6);
+  --ui-text-inverted: var(--nord0);
+}