first commit

src/css/app.scss

@@ -0,0 +1,56 @@
+@import 'open-props/postcss/style';
+
+@import 'open-props/colors-hsl';
+@import 'open-props/shadows';
+@import 'open-props/zindex';
+
+html {
+  --brand-1: #035aa1;
+  --brand-2: #f50000;
+
+  --border-color: var(--gray-4);
+
+  --foreground: black;
+  --background: var(--gray-1);
+  --surface-0: var(--background);
+  --surface-1: white;
+  --surface-2: var(--gray-1);
+  --surface-3: var(--gray-2);
+
+  color: var(--foreground);
+  background-color: var(--background);
+}
+
+:where(.dark, .body--dark) {
+  --brand-1: var(--blue-7);
+  --brand-2: #f50000;
+
+  --border-color: var(--gray-8);
+
+  --foreground: white;
+  --background: var(--gray-10);
+  --surface-0: var(--background);
+  --surface-1: var(--gray-11);
+  --surface-2: var(--gray-10);
+  --surface-3: var(--gray-9);
+}
+
+.bordered {
+  border: 1px solid var(--border-color);
+}
+
+.rounded {
+  border-radius: var(--radius-3);
+}
+
+.surface-1 {
+  background-color: var(--surface-1) !important;
+}
+
+.surface-2 {
+  background-color: var(--surface-2) !important;
+}
+
+.surface-3 {
+  background-color: var(--surface-3) !important;
+}

src/css/quasar.variables.scss

@@ -0,0 +1,40 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+$typography-font-family: 'Noto Sans Thai', sans-serif !default;
+
+$primary: var(--brand-1);
+$secondary: var(--brand-2);
+$accent: #9c27b0;
+
+$dark: var(--gray-11);
+$dark-page: var(--gray-10);
+
+$positive: #00bd9d;
+$negative: #cc0004;
+$info: #328bf3;
+$warning: #ffc224;
+
+$separator-color: var(--border-color);
+$separator-dark-color: var(--border-color);
+
+.q-separator {
+  transition: none;
+}
+
+.q-field__control {
+  color: $primary;
+}
+
+.q-field--outlined .q-field__control {
+  border-radius: var(--radius-2);
+
+  &::before {
+    transition: none;
+    border-color: var(--border-color);
+    border-radius: var(--radius-2);
+  }
+
+  &:hover::before {
+    border-color: var(--border-color);
+  }
+}