Improve visual appearance and contrast ratios

app/themes/laszlo/assets/css/00-setting/color.css

@@ -1,111 +1,111 @@
 /**
- * - Source color: #695F12
- * - [ ] Color match
+ * - Source color: #EFCD58
+ * - [x] Color match
  * - [x] Harmonize extended colors
- * - [ ] Check contrast
+ * - [x] Check contrast
  */
 @layer setting {
   :root {
-    --color-primary: rgb(105 95 18);
-    --color-surface-tint: rgb(105 95 18);
+    --color-primary: rgb(114 92 0);
+    --color-surface-tint: rgb(114 92 0);
     --color-on-primary: rgb(255 255 255);
-    --color-primary-container: rgb(243 228 138);
-    --color-on-primary-container: rgb(80 71 0);
-    --color-secondary: rgb(100 95 65);
+    --color-primary-container: rgb(239 205 88);
+    --color-on-primary-container: rgb(107 86 0);
+    --color-secondary: rgb(107 93 49);
     --color-on-secondary: rgb(255 255 255);
-    --color-secondary-container: rgb(235 227 189);
-    --color-on-secondary-container: rgb(76 71 43);
-    --color-tertiary: rgb(65 102 81);
+    --color-secondary-container: rgb(242 223 167);
+    --color-on-secondary-container: rgb(112 98 53);
+    --color-tertiary: rgb(77 103 15);
     --color-on-tertiary: rgb(255 255 255);
-    --color-tertiary-container: rgb(195 236 210);
-    --color-on-tertiary-container: rgb(41 78 59);
+    --color-tertiary-container: rgb(187 219 120);
+    --color-on-tertiary-container: rgb(71 96 7);
     --color-error: rgb(186 26 26);
     --color-on-error: rgb(255 255 255);
     --color-error-container: rgb(255 218 214);
     --color-on-error-container: rgb(147 0 10);
-    --color-background: rgb(255 249 235);
-    --color-on-background: rgb(29 28 19);
-    --color-surface: rgb(255 249 235);
-    --color-on-surface: rgb(29 28 19);
-    --color-surface-variant: rgb(232 226 208);
-    --color-on-surface-variant: rgb(74 71 57);
-    --color-outline: rgb(123 119 104);
-    --color-outline-variant: rgb(204 198 181);
+    --color-background: rgb(255 248 240);
+    --color-on-background: rgb(30 27 19);
+    --color-surface: rgb(255 248 240);
+    --color-on-surface: rgb(30 27 19);
+    --color-surface-variant: rgb(236 226 203);
+    --color-on-surface-variant: rgb(76 70 54);
+    --color-outline: rgb(126 119 100);
+    --color-outline-variant: rgb(207 198 176);
     --color-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(50 48 39);
-    --color-inverse-on-surface: rgb(246 240 226);
-    --color-inverse-primary: rgb(214 200 113);
-    --color-primary-fixed: rgb(243 228 138);
-    --color-on-primary-fixed: rgb(32 28 0);
-    --color-primary-fixed-dim: rgb(214 200 113);
-    --color-on-primary-fixed-variant: rgb(80 71 0);
-    --color-secondary-fixed: rgb(235 227 189);
-    --color-on-secondary-fixed: rgb(31 28 5);
-    --color-secondary-fixed-dim: rgb(207 199 162);
-    --color-on-secondary-fixed-variant: rgb(76 71 43);
-    --color-tertiary-fixed: rgb(195 236 210);
-    --color-on-tertiary-fixed: rgb(0 33 18);
-    --color-tertiary-fixed-dim: rgb(167 208 183);
-    --color-on-tertiary-fixed-variant: rgb(41 78 59);
-    --color-surface-dim: rgb(223 218 204);
-    --color-surface-bright: rgb(255 249 235);
+    --color-inverse-surface: rgb(52 48 39);
+    --color-inverse-on-surface: rgb(248 240 227);
+    --color-inverse-primary: rgb(229 196 80);
+    --color-primary-fixed: rgb(255 224 126);
+    --color-on-primary-fixed: rgb(35 27 0);
+    --color-primary-fixed-dim: rgb(229 196 80);
+    --color-on-primary-fixed-variant: rgb(86 69 0);
+    --color-secondary-fixed: rgb(245 225 169);
+    --color-on-secondary-fixed: rgb(35 27 0);
+    --color-secondary-fixed-dim: rgb(216 197 143);
+    --color-on-secondary-fixed-variant: rgb(82 70 28);
+    --color-tertiary-fixed: rgb(206 238 137);
+    --color-on-tertiary-fixed: rgb(20 31 0);
+    --color-tertiary-fixed-dim: rgb(178 210 112);
+    --color-on-tertiary-fixed-variant: rgb(56 78 0);
+    --color-surface-dim: rgb(224 217 204);
+    --color-surface-bright: rgb(255 248 240);
     --color-surface-container-lowest: rgb(255 255 255);
-    --color-surface-container-low: rgb(249 243 229);
-    --color-surface-container: rgb(243 237 224);
-    --color-surface-container-high: rgb(237 232 218);
-    --color-surface-container-highest: rgb(231 226 213);
+    --color-surface-container-low: rgb(250 243 229);
+    --color-surface-container: rgb(245 237 224);
+    --color-surface-container-high: rgb(239 231 218);
+    --color-surface-container-highest: rgb(233 226 213);
   }
 
   [data-theme="dark"] {
-    --color-primary: rgb(214 200 113);
-    --color-surface-tint: rgb(214 200 113);
-    --color-on-primary: rgb(55 49 0);
-    --color-primary-container: rgb(80 71 0);
-    --color-on-primary-container: rgb(243 228 138);
-    --color-secondary: rgb(207 199 162);
-    --color-on-secondary: rgb(53 49 23);
-    --color-secondary-container: rgb(76 71 43);
-    --color-on-secondary-container: rgb(235 227 189);
-    --color-tertiary: rgb(167 208 183);
-    --color-on-tertiary: rgb(17 55 37);
-    --color-tertiary-container: rgb(41 78 59);
-    --color-on-tertiary-container: rgb(195 236 210);
+    --color-primary: rgb(255 235 176);
+    --color-surface-tint: rgb(229 196 80);
+    --color-on-primary: rgb(59 47 0);
+    --color-primary-container: rgb(239 205 88);
+    --color-on-primary-container: rgb(107 86 0);
+    --color-secondary: rgb(216 197 143);
+    --color-on-secondary: rgb(58 47 7);
+    --color-secondary-container: rgb(85 72 30);
+    --color-on-secondary-container: rgb(201 183 130);
+    --color-tertiary: rgb(215 248 145);
+    --color-on-tertiary: rgb(37 54 0);
+    --color-tertiary-container: rgb(187 219 120);
+    --color-on-tertiary-container: rgb(71 96 7);
     --color-error: rgb(255 180 171);
     --color-on-error: rgb(105 0 5);
     --color-error-container: rgb(147 0 10);
     --color-on-error-container: rgb(255 218 214);
-    --color-background: rgb(21 19 12);
-    --color-on-background: rgb(231 226 213);
-    --color-surface: rgb(21 19 12);
-    --color-on-surface: rgb(231 226 213);
-    --color-surface-variant: rgb(74 71 57);
-    --color-on-surface-variant: rgb(204 198 181);
-    --color-outline: rgb(149 145 129);
-    --color-outline-variant: rgb(74 71 57);
+    --color-background: rgb(22 19 12);
+    --color-on-background: rgb(233 226 213);
+    --color-surface: rgb(22 19 12);
+    --color-on-surface: rgb(233 226 213);
+    --color-surface-variant: rgb(76 70 54);
+    --color-on-surface-variant: rgb(207 198 176);
+    --color-outline: rgb(152 144 124);
+    --color-outline-variant: rgb(76 70 54);
     --color-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(231 226 213);
-    --color-inverse-on-surface: rgb(50 48 39);
-    --color-inverse-primary: rgb(105 95 18);
-    --color-primary-fixed: rgb(243 228 138);
-    --color-on-primary-fixed: rgb(32 28 0);
-    --color-primary-fixed-dim: rgb(214 200 113);
-    --color-on-primary-fixed-variant: rgb(80 71 0);
-    --color-secondary-fixed: rgb(235 227 189);
-    --color-on-secondary-fixed: rgb(31 28 5);
-    --color-secondary-fixed-dim: rgb(207 199 162);
-    --color-on-secondary-fixed-variant: rgb(76 71 43);
-    --color-tertiary-fixed: rgb(195 236 210);
-    --color-on-tertiary-fixed: rgb(0 33 18);
-    --color-tertiary-fixed-dim: rgb(167 208 183);
-    --color-on-tertiary-fixed-variant: rgb(41 78 59);
-    --color-surface-dim: rgb(21 19 12);
-    --color-surface-bright: rgb(59 57 48);
+    --color-inverse-surface: rgb(233 226 213);
+    --color-inverse-on-surface: rgb(52 48 39);
+    --color-inverse-primary: rgb(114 92 0);
+    --color-primary-fixed: rgb(255 224 126);
+    --color-on-primary-fixed: rgb(35 27 0);
+    --color-primary-fixed-dim: rgb(229 196 80);
+    --color-on-primary-fixed-variant: rgb(86 69 0);
+    --color-secondary-fixed: rgb(245 225 169);
+    --color-on-secondary-fixed: rgb(35 27 0);
+    --color-secondary-fixed-dim: rgb(216 197 143);
+    --color-on-secondary-fixed-variant: rgb(82 70 28);
+    --color-tertiary-fixed: rgb(206 238 137);
+    --color-on-tertiary-fixed: rgb(20 31 0);
+    --color-tertiary-fixed-dim: rgb(178 210 112);
+    --color-on-tertiary-fixed-variant: rgb(56 78 0);
+    --color-surface-dim: rgb(22 19 12);
+    --color-surface-bright: rgb(61 57 48);
     --color-surface-container-lowest: rgb(16 14 7);
-    --color-surface-container-low: rgb(29 28 19);
-    --color-surface-container: rgb(33 32 23);
-    --color-surface-container-high: rgb(44 42 33);
-    --color-surface-container-highest: rgb(55 53 44);
+    --color-surface-container-low: rgb(30 27 19);
+    --color-surface-container: rgb(34 31 23);
+    --color-surface-container-high: rgb(45 42 33);
+    --color-surface-container-highest: rgb(56 52 44);
   }
 }

app/themes/laszlo/assets/css/02-element/body.css

@@ -1,11 +1,21 @@
 @layer element {
   :root {
     --page-background-color: var(--color-surface-container);
+    --page-background-image:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/></svg%3E"),
+      radial-gradient(
+        at 50%,
+        var(--color-surface-bright) 20%,
+        var(--color-surface-dim) 120%
+      );
   }
 
   body {
     color: var(--color-on-surface);
     background: var(--page-background-color);
+    background-image: var(--page-background-image);
+    background-attachment: fixed;
+    background-position: center;
     font: var(--typography-body-large);
   }
 }

app/themes/laszlo/assets/css/02-element/code.css

@@ -1,13 +1,9 @@
 @layer element {
   code {
-    color: var(--color-on-surface-variant);
+    color: var(--color-on-surface);
     border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-1);
-    background: color-mix(
-      in sRGB,
-      var(--color-surface-container-lowest),
-      transparent
-    );
+    background: var(--color-surface-container-low);
     box-decoration-break: clone;
     font: var(--typography-code);
   }
@@ -16,6 +12,8 @@
     display: block;
     overflow-x: auto;
     padding: var(--spacing-5);
+    border-radius: var(--spacing-2);
+    background: var(--color-surface-container-lowest);
   }
 
   :not(pre) > code {

app/themes/laszlo/assets/css/02-element/mark.css

@@ -1,8 +1,10 @@
 @layer element {
   mark {
     padding: 0.25ch 0.5ch;
-    color: var(--color-on-primary-container);
-    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-fixed);
+    background-color: var(--color-tertiary-container);
+    box-decoration-break: clone;
+    box-shadow: 0 2px 0 var(--color-tertiary);
   }
 
   mark > * {

app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css

@@ -5,7 +5,7 @@
     padding: var(--spacing-6);
     border: 1px solid var(--color-surface-dim);
     border-radius: var(--spacing-4);
-    background: var(--color-surface-container);
+    background: var(--color-surface-container-low);
     gap: var(--spacing-6);
   }
 

app/themes/laszlo/assets/css/03-component/ui/prose.css

@@ -1,22 +1,40 @@
 @layer component.ui {
   .prose {
-    --prose-list-vertical-spacing: 1ch;
-    --prose-list-horizontal-spacing: 3ch;
+    --prose-vertical-spacing: 2ch;
+    --prose-list-vertical-spacing: 0.5ch;
+    --prose-list-horizontal-spacing: 2ch;
+    --prose-color: var(--color-on-surface-variant);
+    --prose-secondary-color: var(--color-on-surface);
 
-    display: flex;
-    flex-direction: column;
-    gap: 2ch;
     width: 100%;
+    color: var(--prose-color);
+  }
+
+  .prose > * {
+    margin-block: var(--prose-vertical-spacing);
+
+    &:first-child {
+      margin-block-start: 0;
+    }
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .prose h2 {
+    padding-bottom: 0.5ch;
+    border-bottom: 1px solid var(--color-surface-container-high);
   }
 
   .prose h2,
   .prose h3,
   .prose h4,
   .prose h5,
   .prose h6 {
-    margin-top: 1ch;
-    padding-bottom: 1ch;
-    border-bottom: 1px solid var(--color-surface-container-high);
+    margin-top: calc(var(--prose-vertical-spacing) + 1ch);
+    color: var(--prose-secondary-color);
+    font-weight: 500;
   }
 
   .prose h2:first-child,
@@ -53,7 +71,6 @@
   .prose ul,
   .prose ol {
     padding-inline-start: var(--prose-list-horizontal-spacing);
-    margin-block: calc(var(--prose-list-vertical-spacing) * -1);
   }
 
   .prose li > ul,
@@ -62,7 +79,7 @@
 
     &::before {
       position: absolute;
-      left: calc(var(--prose-list-horizontal-spacing) / -2);
+      left: calc(-1.5ch + 1px);
       height: 100%;
       content: "";
       border-left: 1px solid var(--color-outline-variant);
@@ -88,7 +105,7 @@
       var(--spacing-8)
     );
     border: 1px solid var(--color-outline-variant);
-    border-radius: var(--spacing-3);
+    border-radius: var(--spacing-4);
     background: var(--color-surface-container-low);
     gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8));
   }

app/themes/laszlo/assets/css/03-component/ui/tooltip.css

@@ -10,10 +10,10 @@
   border-radius: var(--spacing-3);
   background: color-mix(in sRGB, var(--color-background), transparent);
   box-shadow:
-    rgb(0 0 0 / 0.08) 0 12px 24px -4px,
-    rgb(0 0 0 / 0.04) 0 8px 16px -4px;
+    color-mix(in sRGB, var(--color-shadow), transparent 95%) 0 4px 16px,
+    color-mix(in sRGB, var(--color-shadow), transparent 99%) 0 8px 32px;
   font: var(--typography-body-medium);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(24px);
 }
 
 .tooltip .footnote-backref {

app/themes/laszlo/components/content/article-card/article-card.css

@@ -10,15 +10,18 @@
     padding: var(--spacing-4);
     transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-surface-variant);
+    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
     outline: var(--default-focus-outline-width) solid transparent;
-    background: var(--color-surface-bright);
+    background: var(--color-surface);
     gap: var(--spacing-6);
+    box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 90%) 0 2px
+      8px 0;
 
     &:focus-within,
     &:hover,
     &:active {
+      border-color: transparent;
       outline: var(--default-focus-outline);
       background-color: var(--color-surface-container-highest);
     }