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

Change color scheme again, also style buttons

Browse source
This commit is contained in:
Z. Charles Dziura 2025-06-10 12:45:49 -04:00
parent 2c5e751e75
commit 51761e3734
7 changed files with 93 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/Color Scheme.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 48 KiB

8
webapp/src/app/components/card/card.html
View file

@ -1,7 +1,11 @@
<ng-content select="header"></ng-content> <header>
<ng-content select=".card-header"></ng-content>
</header>
<div class="content"> <div class="content">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<ng-content select="footer"></ng-content> <footer>
<ng-content select=".card-footer"></ng-content>
</footer>

33
webapp/src/app/components/card/card.scss
View file

@ -1,18 +1,23 @@
:host { :host {
background-color: var(--color-primary-container); background-color: var(--color-surface-container);
border: 1px solid var(--color-outline); border: 1px solid var(--color-outline);
border-radius: 0.2em; border-radius: 0.2em;
color: var(--color-on-primary-container); color: var(--color-on-surface);
display: inline-grid; display: inline-grid;
font-size: 2.0em; font-size: 2em;
grid-template-areas: grid-template-areas:
"head" 'head'
"body" 'body'
"foot"; 'foot';
grid-template-rows: min-content auto min-content; grid-template-rows: min-content auto min-content;
padding: 1.2em; padding: 0.4em;
} }
header { header {
font-size: 1.6em; margin-top: 0.4em;
}
footer {
justify-content: flex-end;
display: flex;
flex-direction: row;
margin-top: 1.2em;
} }

47
webapp/src/app/components/nav-rail/nav-rail.scss
View file

@ -1,29 +1,30 @@
nav { nav {
background-color: var(--color-surface-container); background-color: var(--color-surface-container);
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
font-size: 1.6em; font-size: 1.6em;
height: 100%; height: 100%;
.nav-list { .nav-list {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
list-style: none; list-style: none;
padding: 1.8em 1.2em; padding: 1.8em 1.2em;
.nav-list__item { .nav-list__item {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
inline-size: min-content; inline-size: min-content;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 1.8em; margin-bottom: 1.8em;
} }
.nav-list__item-label { .nav-list__item-label {
white-space: pre; color: var(--color-on-surface);
} white-space: pre;
} }
} }
}
} }

10
webapp/src/app/routes/plan/components/meal/meal.html
View file

@ -1,7 +1,5 @@
<app-card> <app-card>
<header> <h2 class="card-header">{{ name }}</h2>
<h2>{{ name }}</h2>
</header>
@if (foods!!.length > 0) { @if (foods!!.length > 0) {
@ -9,7 +7,7 @@
No foods planned. Click the button below to add some! No foods planned. Click the button below to add some!
} }
<footer> <div class="card-footer">
<button>Add Food</button> <button class="primary">Add Food</button>
</footer> </div>
</app-card> </app-card>

2
webapp/src/app/routes/plan/components/meal/meal.scss
View file

@ -1,3 +1,3 @@
:host { :host {
padding: 0.8em; display: inline-block;
} }

83
webapp/src/styles.scss
View file

@ -1,62 +1,57 @@
@import url('./styles/reset.scss'); @import url('./styles/reset.scss');
@import url('./styles/fonts.scss'); @import url('./styles/fonts.scss');
@import url('./styles/components/button.scss');
:root { :root {
--astronaut-blue: oklch(0.3303 0.078667 242.1936); --color-primary: oklch(0.327 0.057852 184.2083);
--periwinkle: oklch(0.9124 0.0439 250.42); --color-on-primary: white;
--midnight-blue: oklch(0.3958 0.0893 242.11); --color-primary-container: oklch(0.5247 0.0849 184.3);
--color-primary-container-alt: oklch(from var(--color-primary-container) 0.565 c h);
--color-on-primary-container: white;
--bossanova: oklch(0.3442 0.0916 323.14); --color-secondary: oklch(0.3394 0.0927 273.22);
--trendy-pink: oklch(0.5466 0.0925 325.35); --color-on-secondary: white;
--color-secondary-container: oklch(0.5379 0.0899 276.11);
--color-on-secondary-container: white;
--zuccini: oklch(0.3235 0.077159 156.9102); --color-tertiary: oklch(0.3384 0.0788 60.74);
--amazon: oklch(0.5235 0.0882 155.85); --color-on-tertiary: white;
--color-tertiary-container: oklch(0.5416 0.1017 61.52);
--color-on-tertiary-container: white;
--buccaneer: oklch(0.3435 0.0869 23.74); --color-error: oklch(0.3413 0.087 34.27);
--copper-rust: oklch(0.5452 0.0967 23.21); --color-on-error: white;
--color-error-container: oklch(0.5441 0.0989 34.26);
--color-on-error-container: white;
--zircon: oklch(0.9823 0.008252 271.3302); --color-surface: oklch(0.9816 0.0055 211.04);
--athens-gray: oklch(0.9312 0.0084 271.32); --color-on-surface: oklch(0.1764 0.0095 208.78);
--color-surface-container: oklch(0.9297 0.0066 208.78);
--gray: oklch(0.5696 0.0117 248.03); --color-outline: oklch(0.4386 0.0119 212.57);
--cadet-blue: oklch(0.8279 0.0112 256.7); --color-outline-variant: oklch(0.5336 0.0123 204.04);
--color-primary: var(--astronaut-blue); --color-shadow: oklch(0.3396 0.0743 281.7 / 25%);
--color-on-primary: white; --color-shadow-variant: oklch(0 0 0 / 30%);
--color-primary-container: var(--periwinkle);
--color-on-primary-container: var(--midnight-blue);
--color-secondary: var(--bossanova);
--color-on-secondary: white;
--color-secondary-container: var(--trendy-pink);
--color-tertiary: var(--zuccini);
--color-on-tertiary: white;
--color-tertiary-container: var(--amazon);
--color-error: var(--buccaneer);
--color-error-container: var(--copper-rust);
--color-surface: var(--zircon);
--color-surface-container: var(--athens-gray);
--color-outline: var(--gray);
--color-outline-variant: var(--cadet-blue);
} }
body { body {
font-family: 'Quicksand', sans-serif; font-family: 'Quicksand', sans-serif;
font-size: 62.5%; font-size: 62.5%;
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
} }
h1, h3, h5 { h1,
font-family: 'Limelight', serif; h3,
font-weight: 400; h5 {
font-family: 'Limelight', serif;
font-weight: 400;
} }
h2, h4, h6 { h2,
font-family: 'Quicksand', sans-serif; h4,
font-weight: 500; h6 {
font-family: 'Quicksand', sans-serif;
font-weight: 500;
} }