Improve styles & change colors

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

@@ -1,105 +1,111 @@
+/**
+ * - Source color: #695F12
+ * - [ ] Color match
+ * - [x] Harmonize extended colors
+ * - [ ] Check contrast
+ */
 @layer setting {
   :root {
-    --color-primary: rgb(38 84 9);
-    --color-surface-tint: rgb(59 106 31);
+    --color-primary: rgb(105 95 18);
+    --color-surface-tint: rgb(105 95 18);
     --color-on-primary: rgb(255 255 255);
-    --color-primary-container: rgb(73 121 45);
-    --color-on-primary-container: rgb(255 255 255);
-    --color-secondary: rgb(80 100 66);
+    --color-primary-container: rgb(243 228 138);
+    --color-on-primary-container: rgb(80 71 0);
+    --color-secondary: rgb(100 95 65);
     --color-on-secondary: rgb(255 255 255);
-    --color-secondary-container: rgb(212 236 192);
-    --color-on-secondary-container: rgb(59 79 46);
-    --color-tertiary: rgb(0 82 82);
+    --color-secondary-container: rgb(235 227 189);
+    --color-on-secondary-container: rgb(76 71 43);
+    --color-tertiary: rgb(65 102 81);
     --color-on-tertiary: rgb(255 255 255);
-    --color-tertiary-container: rgb(33 121 121);
-    --color-on-tertiary-container: rgb(255 255 255);
+    --color-tertiary-container: rgb(195 236 210);
+    --color-on-tertiary-container: rgb(41 78 59);
     --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(65 0 2);
-    --color-background: rgb(248 250 240);
-    --color-on-background: rgb(25 29 22);
-    --color-surface: rgb(248 250 240);
-    --color-on-surface: rgb(25 29 22);
-    --color-surface-variant: rgb(222 229 211);
-    --color-on-surface-variant: rgb(66 73 60);
-    --color-outline: rgb(114 121 107);
-    --color-outline-variant: rgb(194 201 184);
+    --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-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(46 49 43);
-    --color-inverse-on-surface: rgb(240 242 231);
-    --color-inverse-primary: rgb(159 213 125);
-    --color-primary-fixed: rgb(186 242 150);
-    --color-on-primary-fixed: rgb(9 33 0);
-    --color-primary-fixed-dim: rgb(159 213 125);
-    --color-on-primary-fixed-variant: rgb(35 81 6);
-    --color-secondary-fixed: rgb(210 234 190);
-    --color-on-secondary-fixed: rgb(14 32 5);
-    --color-secondary-fixed-dim: rgb(182 206 163);
-    --color-on-secondary-fixed-variant: rgb(57 76 44);
-    --color-tertiary-fixed: rgb(160 240 240);
-    --color-on-tertiary-fixed: rgb(0 32 32);
-    --color-tertiary-fixed-dim: rgb(132 212 211);
-    --color-on-tertiary-fixed-variant: rgb(0 79 79);
-    --color-surface-dim: rgb(217 219 209);
-    --color-surface-bright: rgb(248 250 240);
+    --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-surface-container-lowest: rgb(255 255 255);
-    --color-surface-container-low: rgb(243 245 234);
-    --color-surface-container: rgb(237 239 228);
-    --color-surface-container-high: rgb(231 233 223);
-    --color-surface-container-highest: rgb(225 228 217);
+    --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);
   }
 
   [data-theme="dark"] {
-    --color-primary: rgb(159 213 125);
-    --color-surface-tint: rgb(159 213 125);
-    --color-on-primary: rgb(20 56 0);
-    --color-primary-container: rgb(48 94 20);
-    --color-on-primary-container: rgb(226 255 202);
-    --color-secondary: rgb(182 206 163);
-    --color-on-secondary: rgb(35 53 23);
-    --color-secondary-container: rgb(50 69 37);
-    --color-on-secondary-container: rgb(196 220 177);
-    --color-tertiary: rgb(132 212 211);
-    --color-on-tertiary: rgb(0 55 55);
-    --color-tertiary-container: rgb(0 94 94);
-    --color-on-tertiary-container: rgb(212 255 254);
+    --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-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(17 20 14);
-    --color-on-background: rgb(225 228 217);
-    --color-surface: rgb(17 20 14);
-    --color-on-surface: rgb(225 228 217);
-    --color-surface-variant: rgb(66 73 60);
-    --color-on-surface-variant: rgb(194 201 184);
-    --color-outline: rgb(140 147 132);
-    --color-outline-variant: rgb(66 73 60);
+    --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-shadow: rgb(0 0 0);
     --color-scrim: rgb(0 0 0);
-    --color-inverse-surface: rgb(225 228 217);
-    --color-inverse-on-surface: rgb(46 49 43);
-    --color-inverse-primary: rgb(59 106 31);
-    --color-primary-fixed: rgb(186 242 150);
-    --color-on-primary-fixed: rgb(9 33 0);
-    --color-primary-fixed-dim: rgb(159 213 125);
-    --color-on-primary-fixed-variant: rgb(35 81 6);
-    --color-secondary-fixed: rgb(210 234 190);
-    --color-on-secondary-fixed: rgb(14 32 5);
-    --color-secondary-fixed-dim: rgb(182 206 163);
-    --color-on-secondary-fixed-variant: rgb(57 76 44);
-    --color-tertiary-fixed: rgb(160 240 240);
-    --color-on-tertiary-fixed: rgb(0 32 32);
-    --color-tertiary-fixed-dim: rgb(132 212 211);
-    --color-on-tertiary-fixed-variant: rgb(0 79 79);
-    --color-surface-dim: rgb(17 20 14);
-    --color-surface-bright: rgb(55 58 51);
-    --color-surface-container-lowest: rgb(12 15 9);
-    --color-surface-container-low: rgb(25 29 22);
-    --color-surface-container: rgb(29 33 26);
-    --color-surface-container-high: rgb(40 43 36);
-    --color-surface-container-highest: rgb(51 54 47);
+    --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-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);
   }
 }

app/themes/laszlo/assets/css/01-base/focus.css

@@ -1,7 +1,7 @@
 @layer base {
   :root {
     --default-focus-outline-width: 2px;
-    --default-focus-outline-color: var(--color-primary-container);
+    --default-focus-outline-color: var(--color-primary);
     --default-focus-outline: var(--default-focus-outline-width) solid
       var(--default-focus-outline-color);
   }

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

@@ -10,9 +10,7 @@
       2px
     );
 
-    transition:
-      color 0.15s ease-in,
-      text-underline-offset 0.15s ease-in;
+    transition: all 0.15s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--_link-color);
     text-underline-offset: 2px;
     text-decoration-color: inherit;

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

@@ -1,6 +1,6 @@
 @layer element {
   :root {
-    --page-background-color: var(--color-surface);
+    --page-background-color: var(--color-surface-container);
   }
 
   body {

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

@@ -16,7 +16,9 @@
 
   :not(pre) > code {
     padding: var(--spacing-1);
+    vertical-align: middle;
     word-break: break-word;
+    color: var(--color-on-surface-variant);
     border-radius: var(--spacing-1);
     background: var(--color-surface-variant);
     font-size: 0.8em;

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

@@ -1,8 +1,7 @@
 @layer element {
   mark {
-    padding: 0 var(--spacing-1);
+    padding: 0.25ch 0.5ch;
     color: var(--color-on-primary-container);
-    border-radius: var(--spacing-1);
     background-color: var(--color-primary-container);
   }
 

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-bright);
+    background: var(--color-surface-container);
     gap: var(--spacing-6);
   }
 

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

@@ -67,12 +67,12 @@
     padding: clamp(
       var(--spacing-2),
       calc(0.2727rem + 0.9697vw),
-      var(--spacing-4)
+      var(--spacing-8)
     );
-    border: 1px solid var(--color-surface-dim);
+    border: 1px solid var(--color-surface-container);
     border-radius: var(--spacing-3);
-    background: var(--color-surface-container);
-    gap: 1ch;
+    background: var(--color-surface-container-low);
+    gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8));
   }
 
   .prose figure > figcaption {
@@ -83,19 +83,19 @@
 
   .prose .footnote-ref,
   .prose .footnote-backref {
-    --link-color: var(--color-on-secondary-container);
+    --link-color: var(--color-on-tertiary-fixed);
 
     padding: var(--spacing-1) var(--spacing-2);
     transition: all ease-in-out 0.1s;
     text-decoration: none;
     border-radius: var(--spacing-4);
-    background-color: var(--color-secondary-container);
+    background-color: var(--color-tertiary-fixed);
     font: var(--typography-label-small);
 
     &:hover {
-      --link-color: var(--color-on-secondary);
+      --link-color: var(--color-on-tertiary);
 
-      background-color: var(--color-secondary);
+      background-color: var(--color-tertiary);
     }
   }
 

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

@@ -7,7 +7,7 @@
   padding: var(--spacing-4);
   color: var(--color-on-background);
   border: 1px solid var(--color-outline-variant);
-  border-radius: var(--spacing-2);
+  border-radius: var(--spacing-1);
   background: color-mix(in sRGB, var(--color-background), transparent);
   box-shadow:
     rgb(0 0 0 / 0.1) 0 20px 25px -5px,

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

@@ -7,21 +7,20 @@
     display: flex;
     flex-flow: nowrap;
     flex-flow: column;
-    padding: var(--spacing-6);
-    transition:
-      background-color 0.25s linear,
-      box-shadow 0.25s linear;
+    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-radius: var(--spacing-4);
-    background: var(--color-surface-container);
+    outline: var(--default-focus-outline-width) solid transparent;
+    background: var(--color-surface-bright);
     gap: var(--spacing-6);
 
     &:focus-within,
     &:hover,
     &:active {
       outline: var(--default-focus-outline);
       background-color: var(--color-surface-container-highest);
-      box-shadow: var(--elevation-2);
     }
 
     @media screen and (min-width: 1200px) {
@@ -35,7 +34,6 @@
     align-self: center;
     width: 150px;
     border-radius: var(--spacing-2);
-    box-shadow: var(--elevation-1);
 
     @media screen and (min-width: 1200px) {
       align-self: flex-start;

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

@@ -3,11 +3,11 @@
     --_article-spacing: var(--spacing-8);
     --_article-header-background: var(
       --article-header-background,
-      var(--color-surface-container, transparent)
+      var(--color-surface, transparent)
     );
     --_article-main-background: var(
       --article-main-background,
-      var(--color-surface-container-low, transparent)
+      var(--color-surface, transparent)
     );
 
     display: flex;
@@ -22,6 +22,8 @@
     flex-flow: column;
     align-items: flex-start;
     padding: var(--spacing-4);
+    border: 1px solid var(--color-surface-variant);
+    border-bottom: unset;
     border-radius: var(--spacing-4) var(--spacing-4) 0 0;
     background-color: color-mix(
       in sRGB,
@@ -42,7 +44,7 @@
       width: 100%;
       height: 100%;
       content: "";
-      filter: blur(var(--spacing-16)) saturate(280%);
+      filter: blur(var(--spacing-10)) saturate(280%);
       background: var(--background-image);
       background-position: center;
       background-size: cover;
@@ -65,7 +67,6 @@
     flex-shrink: 0;
     width: 200px;
     border-radius: var(--spacing-2);
-    box-shadow: var(--elevation-2);
     margin-inline: auto;
   }
 
@@ -102,6 +103,7 @@
     align-items: flex-start;
     margin-top: calc(var(--_article-spacing) * -1);
     padding: var(--spacing-4);
+    border: 1px solid var(--color-surface-variant);
     border-radius: 0 0 var(--spacing-4) var(--spacing-4);
     background-color: var(--_article-main-background);
     gap: var(--spacing-6);
@@ -185,8 +187,9 @@
     flex-direction: column;
     align-items: center;
     padding: var(--spacing-4) var(--spacing-2);
+    border: 1px solid var(--color-surface-variant);
     border-radius: var(--spacing-4);
-    background-color: var(--_article-main-background);
+    background-color: var(--color-surface-container-low);
     gap: var(--spacing-6);
     margin-inline: calc(var(--page-side-gap) * -1);