diff --git a/webapp/public/Atkinson-Hyperlegible-Next.woff2 b/webapp/public/Atkinson-Hyperlegible-Next.woff2
new file mode 100644
index 0000000..22c1db6
Binary files /dev/null and b/webapp/public/Atkinson-Hyperlegible-Next.woff2 differ
diff --git a/webapp/src/app/routes/login/login.html b/webapp/src/app/routes/login/login.html
index 3df9be5..64a48e0 100644
--- a/webapp/src/app/routes/login/login.html
+++ b/webapp/src/app/routes/login/login.html
@@ -13,4 +13,4 @@
-
+
diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss
index 4d873e9..1fa1849 100644
--- a/webapp/src/styles.scss
+++ b/webapp/src/styles.scss
@@ -1,6 +1,6 @@
+@use './styles/fonts';
@use '@picocss/pico/scss' with (
$enable-semantic-container: true,
- $enable-classes: false,
$modules: (
// Layout
'layout/grid': false,
diff --git a/webapp/src/styles/_fonts.scss b/webapp/src/styles/_fonts.scss
new file mode 100644
index 0000000..e050fb4
--- /dev/null
+++ b/webapp/src/styles/_fonts.scss
@@ -0,0 +1,40 @@
+/* latin-ext */
+@font-face {
+ font-family: 'Atkinson Hyperlegible Next';
+ font-style: italic;
+ font-weight: 200 800;
+ font-display: swap;
+ src: url(/public/Atkinson-Hyperlegible-Next.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+ U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Atkinson Hyperlegible Next';
+ font-style: italic;
+ font-weight: 200 800;
+ font-display: swap;
+ src: url(/public/Atkinson-Hyperlegible-Next.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+ U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Atkinson Hyperlegible Next';
+ font-style: normal;
+ font-weight: 200 800;
+ font-display: swap;
+ src: url(/public/Atkinson-Hyperlegible-Next.woff2) format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+ U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Atkinson Hyperlegible Next';
+ font-style: normal;
+ font-weight: 200 800;
+ font-display: swap;
+ src: url(/public/Atkinson-Hyperlegible-Next.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+ U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/webapp/src/styles/_theme.scss b/webapp/src/styles/_theme.scss
index 376278c..d5bf090 100644
--- a/webapp/src/styles/_theme.scss
+++ b/webapp/src/styles/_theme.scss
@@ -1,45 +1,60 @@
-:root, :host {
- --pico-font-family-sans-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
- --pico-font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+:root,
+:host {
+ --pico-font-family-sans-serif: 'Atkinson Hyperlegible Next', sans-serif;
+ --pico-font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
+ monospace;
+
+ --theme-light-color-primary: oklch(27.3% 0.076 236.7);
+ --theme-light-color-primary-background: oklch(from var(--theme-light-color-primary) 34.8% c h);
+ --theme-light-color-primary-background-hover: oklch(from var(--theme-light-color-primary) 42.3% c h);
+ --theme-light-color-primary-focus: oklch(from var(--theme-light-color-primary) 72.3% c h);
+ --theme-light-color-primary-hover: oklch(from var(--theme-light-color-primary) 87.3% c h);
+
+ --theme-light-color-secondary: oklch(29.7% 0.116 324.2);
+ --theme-light-color-secondary-background: oklch(from var(--theme-light-color-secondary) 52.2% c h);
+ --theme-light-color-secondary-selection: oklch(74.7% 0.116 324.2 / 50%);
}
// Light Theme
-[data-theme=light],
-:root:not([data-theme=dark]),
-:host:not([data-theme=dark]) {
- --pico-text-selection-color: rgba(244, 93, 44, 0.25);
- --pico-primary: #bd3c13;
- --pico-primary-background: #d24317;
- --pico-primary-underline: rgba(189, 60, 19, 0.5);
- --pico-primary-hover: #942d0d;
- --pico-primary-hover-background: #bd3c13;
- --pico-primary-focus: rgba(244, 93, 44, 0.5);
- --pico-primary-inverse: #fff;
+[data-theme='light'],
+:root:not([data-theme='dark']),
+:host:not([data-theme='dark']) {
+ --pico-text-selection-color: var(--theme-light-color-secondary-selection);
+ --pico-primary: var(--theme-light-color-primary);
+ --pico-primary-background: var(--theme-light-color-primary-background);
+ --pico-primary-underline: var(--theme-light-color-primary-hover);
+ --pico-primary-hover: #942d0d;
+ --pico-primary-hover-background: var(--theme-light-color-primary-background-hover);
+ --pico-primary-focus: var(--theme-light-color-primary-focus);
+ --pico-primary-inverse: #fff;
+
+ --pico-secondary: var(--theme-light-color-secondary);
+ --pico-secondary-background: var(--theme-light-color-secondary-background);
}
// Dark Theme
@media only screen and (prefers-color-scheme: dark) {
- :root:not([data-theme]),
- :host:not([data-theme]) {
- --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
- --pico-primary: #f56b3d;
- --pico-primary-background: #d24317;
- --pico-primary-underline: rgba(245, 107, 61, 0.5);
- --pico-primary-hover: #f8a283;
- --pico-primary-hover-background: #e74b1a;
- --pico-primary-focus: rgba(245, 107, 61, 0.375);
- --pico-primary-inverse: #fff;
- }
+ :root:not([data-theme]),
+ :host:not([data-theme]) {
+ --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
+ --pico-primary: #f56b3d;
+ --pico-primary-background: #d24317;
+ --pico-primary-underline: rgba(245, 107, 61, 0.5);
+ --pico-primary-hover: #f8a283;
+ --pico-primary-hover-background: #e74b1a;
+ --pico-primary-focus: rgba(245, 107, 61, 0.375);
+ --pico-primary-inverse: #fff;
+ }
}
/* Orange color for dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
-[data-theme=dark] {
- --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
- --pico-primary: #f56b3d;
- --pico-primary-background: #d24317;
- --pico-primary-underline: rgba(245, 107, 61, 0.5);
- --pico-primary-hover: #f8a283;
- --pico-primary-hover-background: #e74b1a;
- --pico-primary-focus: rgba(245, 107, 61, 0.375);
- --pico-primary-inverse: #fff;
+[data-theme='dark'] {
+ --pico-text-selection-color: rgba(245, 107, 61, 0.1875);
+ --pico-primary: #f56b3d;
+ --pico-primary-background: #d24317;
+ --pico-primary-underline: rgba(245, 107, 61, 0.5);
+ --pico-primary-hover: #f8a283;
+ --pico-primary-hover-background: #e74b1a;
+ --pico-primary-focus: rgba(245, 107, 61, 0.375);
+ --pico-primary-inverse: #fff;
}