diff --git a/docs/Color Scheme.png b/docs/Color Scheme.png
index 4e2b04f..40abb63 100644
Binary files a/docs/Color Scheme.png and b/docs/Color Scheme.png differ
diff --git a/webapp/src/app/components/card/card.html b/webapp/src/app/components/card/card.html
index 4d0d6b3..4d82bc6 100644
--- a/webapp/src/app/components/card/card.html
+++ b/webapp/src/app/components/card/card.html
@@ -1,7 +1,11 @@
-
+
-
+
diff --git a/webapp/src/app/components/card/card.scss b/webapp/src/app/components/card/card.scss
index fb83c47..57835dd 100644
--- a/webapp/src/app/components/card/card.scss
+++ b/webapp/src/app/components/card/card.scss
@@ -1,18 +1,23 @@
:host {
- background-color: var(--color-primary-container);
- border: 1px solid var(--color-outline);
- border-radius: 0.2em;
- color: var(--color-on-primary-container);
- display: inline-grid;
- font-size: 2.0em;
- grid-template-areas:
- "head"
- "body"
- "foot";
- grid-template-rows: min-content auto min-content;
- padding: 1.2em;
+ background-color: var(--color-surface-container);
+ border: 1px solid var(--color-outline);
+ border-radius: 0.2em;
+ color: var(--color-on-surface);
+ display: inline-grid;
+ font-size: 2em;
+ grid-template-areas:
+ 'head'
+ 'body'
+ 'foot';
+ grid-template-rows: min-content auto min-content;
+ padding: 0.4em;
}
-
header {
- font-size: 1.6em;
+ margin-top: 0.4em;
+}
+footer {
+ justify-content: flex-end;
+ display: flex;
+ flex-direction: row;
+ margin-top: 1.2em;
}
diff --git a/webapp/src/app/components/nav-rail/nav-rail.scss b/webapp/src/app/components/nav-rail/nav-rail.scss
index 537b2f0..fc911a1 100644
--- a/webapp/src/app/components/nav-rail/nav-rail.scss
+++ b/webapp/src/app/components/nav-rail/nav-rail.scss
@@ -1,29 +1,30 @@
nav {
- 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;
- font-size: 1.6em;
- height: 100%;
+ 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;
+ font-size: 1.6em;
+ height: 100%;
- .nav-list {
- align-items: center;
- display: flex;
- flex-direction: column;
- list-style: none;
- padding: 1.8em 1.2em;
+ .nav-list {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ list-style: none;
+ padding: 1.8em 1.2em;
- .nav-list__item {
- align-items: center;
- display: flex;
- flex-direction: column;
- inline-size: min-content;
+ .nav-list__item {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ inline-size: min-content;
- &:not(:last-of-type) {
- margin-bottom: 1.8em;
- }
+ &:not(:last-of-type) {
+ margin-bottom: 1.8em;
+ }
- .nav-list__item-label {
- white-space: pre;
- }
- }
- }
+ .nav-list__item-label {
+ color: var(--color-on-surface);
+ white-space: pre;
+ }
+ }
+ }
}
diff --git a/webapp/src/app/routes/plan/components/meal/meal.html b/webapp/src/app/routes/plan/components/meal/meal.html
index b032005..d1f2200 100644
--- a/webapp/src/app/routes/plan/components/meal/meal.html
+++ b/webapp/src/app/routes/plan/components/meal/meal.html
@@ -1,7 +1,5 @@
-
+
@if (foods!!.length > 0) {
@@ -9,7 +7,7 @@
No foods planned. Click the button below to add some!
}
-
+
diff --git a/webapp/src/app/routes/plan/components/meal/meal.scss b/webapp/src/app/routes/plan/components/meal/meal.scss
index 678a4ed..1549d74 100644
--- a/webapp/src/app/routes/plan/components/meal/meal.scss
+++ b/webapp/src/app/routes/plan/components/meal/meal.scss
@@ -1,3 +1,3 @@
:host {
- padding: 0.8em;
+ display: inline-block;
}
diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss
index 44a3832..f4c9a13 100644
--- a/webapp/src/styles.scss
+++ b/webapp/src/styles.scss
@@ -1,62 +1,57 @@
@import url('./styles/reset.scss');
@import url('./styles/fonts.scss');
+@import url('./styles/components/button.scss');
:root {
- --astronaut-blue: oklch(0.3303 0.078667 242.1936);
- --periwinkle: oklch(0.9124 0.0439 250.42);
- --midnight-blue: oklch(0.3958 0.0893 242.11);
+ --color-primary: oklch(0.327 0.057852 184.2083);
+ --color-on-primary: white;
+ --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);
- --trendy-pink: oklch(0.5466 0.0925 325.35);
+ --color-secondary: oklch(0.3394 0.0927 273.22);
+ --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);
- --amazon: oklch(0.5235 0.0882 155.85);
+ --color-tertiary: oklch(0.3384 0.0788 60.74);
+ --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);
- --copper-rust: oklch(0.5452 0.0967 23.21);
+ --color-error: oklch(0.3413 0.087 34.27);
+ --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);
- --athens-gray: oklch(0.9312 0.0084 271.32);
+ --color-surface: oklch(0.9816 0.0055 211.04);
+ --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);
- --cadet-blue: oklch(0.8279 0.0112 256.7);
+ --color-outline: oklch(0.4386 0.0119 212.57);
+ --color-outline-variant: oklch(0.5336 0.0123 204.04);
- --color-primary: var(--astronaut-blue);
- --color-on-primary: white;
- --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);
+ --color-shadow: oklch(0.3396 0.0743 281.7 / 25%);
+ --color-shadow-variant: oklch(0 0 0 / 30%);
}
body {
- font-family: 'Quicksand', sans-serif;
- font-size: 62.5%;
- font-weight: 400;
- margin: 0;
+ font-family: 'Quicksand', sans-serif;
+ font-size: 62.5%;
+ font-weight: 400;
+ margin: 0;
}
-h1, h3, h5 {
- font-family: 'Limelight', serif;
- font-weight: 400;
+h1,
+h3,
+h5 {
+ font-family: 'Limelight', serif;
+ font-weight: 400;
}
-h2, h4, h6 {
- font-family: 'Quicksand', sans-serif;
- font-weight: 500;
+h2,
+h4,
+h6 {
+ font-family: 'Quicksand', sans-serif;
+ font-weight: 500;
}