zcdziura/aisle17
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

I think I'm starting to get the hang of theming

Browse source
This commit is contained in:
Z. Charles Dziura 2025-07-22 16:23:52 -04:00
parent 7abe9bc739
commit dcd7327eb1
5 changed files with 91 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
webapp/public/Atkinson-Hyperlegible-Next.woff2 Normal file
View file

Binary file not shown.

2
webapp/src/app/routes/login/login.html
View file

@ -13,4 +13,4 @@
</fieldset>
</form>
<hr>
<input type="button" value="Register">
<input type="button" value="Register" class="secondary">

2
webapp/src/styles.scss
View file

@ -1,6 +1,6 @@
@use './styles/fonts';
@use '@picocss/pico/scss' with (
$enable-semantic-container: true,
$enable-classes: false,
$modules: (
// Layout
'layout/grid': false,

40
webapp/src/styles/_fonts.scss Normal file
View file

@ -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;
}

83
webapp/src/styles/_theme.scss
View file

@ -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;
}