Correcting bugs in warming-bg color, dark mode etc.

assets/css/_colors.css

@@ -71,7 +71,7 @@
   /* Link colours. */
   --color-link:                   light-dark(var(--color-brand-500), var(--color-grey-100));
   --color-link-visited:           light-dark(var(--color-brand-500), var(--color-grey-100));
-  --color-link-hover:             light-dark(var(--color-brand-200), var(--color-brand-400));
+  --color-link-hover:             light-dark(var(--color-brand-200), var(--color-grey-300));
   --color-link-active:            light-dark(var(--color-red), var(--color-red));
 
   /* Button colours. */
@@ -86,7 +86,7 @@
 
   /* Border colours. */
   --color-border:                 light-dark(var(--color-brand-400), var(--color-brand-200));
-  --color-border-light:           light-dark(var(--color-brand-200), var(--color-brand-400));
+  --color-border-light:           light-dark(var(--color-brand-200), var(--color-brand-100));
   --color-border-dark:            light-dark(var(--color-brand-600), var(--color-brand-300));
 
   /* Background colours. */

assets/css/_zen.css

@@ -170,7 +170,7 @@ article {
   border: unset;
   text-shadow: unset;
   font-size: var(--fs-l);
-  color: var(--color-border);
+  color: var(--color-border-light);
   rotate: 90deg;
   cursor: pointer;
 
@@ -186,12 +186,22 @@ article {
 }
 
 .flash-item {
+  --color-flash: var(--color-warning);
+  --color-flash-bg: light-dark(
+    oklch(from var(--color-flash) 100% 0.03 h),
+    oklch(from var(--color-flash) calc(l - 0.3) c h)
+  );
+  --color-flash-border: light-dark(
+    oklch(from var(--color-flash) calc(l + 0.2) c h),
+    oklch(from var(--color-flash) calc(l - 0.07) c h)
+  );
+
   animation: --flash 500ms ease-in-out 1ms;
 }
 
 @keyframes --flash {
   50% {
-    border-color: var(--color-warning);
+    border-color: var(--color-flash-border);
-    background-color: var(--color-warning-bg);
+    background-color: var(--color-flash-bg);
   }
 }

assets/css/base/_forms.css

@@ -32,10 +32,21 @@ label {
 /* Valid and invalid state. */
 input,
 textarea {
+  --color-input: currentColor;
+  --color-input-bg: light-dark(
+    oklch(from var(--color-input) 100% 0.03 h),
+    oklch(from var(--color-input) calc(l - 0.4) c h)
+  );
+  --color-input-border: light-dark(
+    oklch(from var(--color-input) calc(l + 0.2) c h),
+    oklch(from var(--color-input) calc(l - 0.07) c h)
+  );
+
   &:user-valid {
-    border-color: var(--color-success);
+    --color-input: var(--color-success);
+    border-color: var(--color-input-border);
     border-style: solid;
-    background-color: var(--color-success-bg);
+    background-color: var(--color-input-bg);
   }
 
   &:focus:user-valid {
@@ -43,14 +54,16 @@ textarea {
   }
 
   &:user-invalid {
-    border-color: var(--color-error);
+    --color-input: var(--color-error);
+    border-color: var(--color-input-border);
     border-style: solid;
-    background-color: var(--color-error-bg);
+    background-color: var(--color-input-bg);
   }
 
   &:focus:user-invalid {
+    --color-input: var(--color-warning);
     border-color: transparent;
-    background-color: var(--color-warning-bg);
+    background-color: var(--color-input-bg);
   }
 }
 

assets/css/components/_button.css

@@ -9,7 +9,9 @@
   text-decoration: none;
   text-align: center;
   width: fit-content;
-  padding: 0.2rem 1rem;
+  padding: 0.5rem 1rem;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 
   /* Improve usability and consistency of cursor style between image-type `input` and others. */
   cursor: pointer;
@@ -34,7 +36,7 @@
 
 .button--small {
   font-size: var(--fs-xs);
-  padding: 0.2rem 0.75rem;
+  padding: 0.35rem 0.5rem;
 }
 
 .button--alt {
@@ -54,40 +56,49 @@
   background: var(--color-button-text);
 }
 
-.button--accept {
+.button--accept,
-  color: var(--color-success);
+.button--decline,
-  border-color: var(--color-success);
+.button--delete {
+  --color-button: currentColor;
+  --color-button-text: light-dark(
+    oklch(from var(--color-button) l c h),
+    oklch(from var(--color-button) 100% 0.03 h)
+  );
+  --color-button-bg: light-dark(
+    oklch(from var(--color-button) 100% 0.03 h),
+    oklch(from var(--color-button) calc(l - 0.3) c h)
+  );
+  --color-button-border: light-dark(
+    oklch(from var(--color-button) calc(l + 0.2) c h),
+    oklch(from var(--color-button) calc(l - 0.07) c h)
+  );
+  --color-button-hover: light-dark(
+    oklch(from var(--color-button) 90% 0.03 h),
+    oklch(from var(--color-button) calc(l - 0.6) c h)
+  );
+
+  color: var(--color-button-text);
+  background: linear-gradient(var(--color-button-bg), var(--color-button-hover));
+  border-color: var(--color-button-border);
 
   &:hover,
   &:focus-visible,
   &:active {
     color: var(--color-button-text);
-    background: var(--color-success);
+    background: linear-gradient(var(--color-button-hover), var(--color-button-bg));
   }
 }
 
+.button--accept {
+  --color-button: var(--color-success);
+}
+
 .button--decline {
-  color: var(--color-warning);
+  --color-button: var(--color-warning);
-  border-color: var(--color-warning);
-
-  &:hover,
-  &:focus-visible,
-  &:active {
-    color: var(--color-button-text);
-    background: var(--color-warning);
-  }
 }
 
 .button--delete {
-  color: var(--color-error);
+  --color-button: var(--color-error);
-  border-color: var(--color-error);
-
-  &:hover,
-  &:focus-visible,
-  &:active {
-    color: var(--color-button-text);
-    background: var(--color-error);
-  }
 }
 
 /* The disabled variation should always go last, so that it overrides any

assets/css/components/_cookieconsent.css

@@ -1,6 +1,16 @@
 /* Cookieconsent */
 
 .cookieconsent {
+  --color-cookieconsent: var(--color-warning);
+  --color-cookieconsent-text: light-dark(
+    oklch(from var(--color-cookieconsent) l c h),
+    oklch(from var(--color-cookieconsent) 100% 0.03 h)
+  );
+  --color-cookieconsent-bg: light-dark(
+    oklch(from var(--color-cookieconsent) 100% 0.03 h),
+    oklch(from var(--color-cookieconsent) calc(l + 0.07) c h)
+  );
+
   display: flex;
   flex-flow: wrap;
   justify-content: center;
@@ -9,14 +19,19 @@
   bottom: 0;
   width: 100%;
   padding: var(--spacing-xs);
-  color: var(--color-warning);
+  color: var(--color-cookieconsent-text);
-  background-color: var(--color-warning-bg);
+  background-color: var(--color-body-bg);
-  border-block-start: 4px solid var(--color-warning);
+  border-block-start: 4px solid var(--color-cookieconsent-text);
   font-size: var(--fs-s);
   transform: translateY(100vh);
   transition: all 130ms ease-out;
   z-index: 99;
 
+  .cookieconsent__message {
+    font-family: var(--ff-alt);
+    font-size: var(--fs-xs);
+  }
+
   .cookieconsent__actions {
     display: flex;
     gap: 0.5rem;