diff --git a/app/themes/laszlo/assets/css/00-setting/color.css b/app/themes/laszlo/assets/css/00-setting/color.css
index 63484819..1972e0bf 100644
--- a/app/themes/laszlo/assets/css/00-setting/color.css
+++ b/app/themes/laszlo/assets/css/00-setting/color.css
@@ -1,112 +1,105 @@
-/**
- * - Source color: #EFCD58
- * - Tertiary: #2E7D32 (adjusted manually)
- * - [x] Color match
- * - [x] Harmonize extended colors
- * - [x] Check contrast
- */
@layer setting {
:root {
- --color-primary: rgb(114 92 0);
- --color-surface-tint: rgb(114 92 0);
+ --color-primary: rgb(25 95 210);
+ --color-surface-tint: rgb(25 95 210);
--color-on-primary: rgb(255 255 255);
- --color-primary-container: rgb(239 205 88);
- --color-on-primary-container: rgb(107 86 0);
- --color-secondary: rgb(107 93 49);
+ --color-primary-container: rgb(220 235 255);
+ --color-on-primary-container: rgb(0 25 65);
+ --color-secondary: rgb(80 93 110);
--color-on-secondary: rgb(255 255 255);
- --color-secondary-container: rgb(242 223 167);
- --color-on-secondary-container: rgb(112 98 53);
- --color-tertiary: rgb(13 99 27);
- --color-on-tertiary: rgb(255 255 255);
- --color-tertiary-container: rgb(46 125 50);
- --color-on-tertiary-container: rgb(203 255 194);
- --color-error: rgb(186 26 26);
+ --color-secondary-container: rgb(229 233 239);
+ --color-on-secondary-container: rgb(40 47 58);
+ --color-tertiary: rgb(244 214 138);
+ --color-on-tertiary: rgb(60 50 0);
+ --color-tertiary-container: rgb(255 238 204);
+ --color-on-tertiary-container: rgb(60 50 0);
+ --color-error: rgb(220 38 38);
--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 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-error-container: rgb(254 226 226);
+ --color-on-error-container: rgb(127 29 29);
+ --color-background: rgb(250 251 252);
+ --color-on-background: rgb(26 28 30);
+ --color-surface: rgb(250 251 252);
+ --color-on-surface: rgb(26 28 30);
+ --color-surface-variant: rgb(229 231 235);
+ --color-on-surface-variant: rgb(57 62 71);
+ --color-outline: rgb(156 163 175);
+ --color-outline-variant: rgb(209 213 219);
--color-shadow: rgb(0 0 0);
--color-scrim: rgb(0 0 0);
- --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(163 246 156);
- --color-on-tertiary-fixed: rgb(0 34 4);
- --color-tertiary-fixed-dim: rgb(136 217 130);
- --color-on-tertiary-fixed-variant: rgb(0 83 18);
- --color-surface-dim: rgb(224 217 204);
- --color-surface-bright: rgb(255 248 240);
+ --color-inverse-surface: rgb(45 48 51);
+ --color-inverse-on-surface: rgb(241 243 245);
+ --color-inverse-primary: rgb(120 170 255);
+ --color-primary-fixed: rgb(220 235 255);
+ --color-on-primary-fixed: rgb(0 25 65);
+ --color-primary-fixed-dim: rgb(120 170 255);
+ --color-on-primary-fixed-variant: rgb(0 60 130);
+ --color-secondary-fixed: rgb(229 233 239);
+ --color-on-secondary-fixed: rgb(20 25 30);
+ --color-secondary-fixed-dim: rgb(195 203 215);
+ --color-on-secondary-fixed-variant: rgb(60 73 88);
+ --color-tertiary-fixed: rgb(255 238 204);
+ --color-on-tertiary-fixed: rgb(60 50 0);
+ --color-tertiary-fixed-dim: rgb(244 214 138);
+ --color-on-tertiary-fixed-variant: rgb(100 85 20);
+ --color-surface-dim: rgb(218 220 224);
+ --color-surface-bright: rgb(250 251 252);
--color-surface-container-lowest: rgb(255 255 255);
- --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);
+ --color-surface-container-low: rgb(248 249 250);
+ --color-surface-container: rgb(245 246 247);
+ --color-surface-container-high: rgb(241 243 245);
+ --color-surface-container-highest: rgb(237 239 241);
}
[data-theme="dark"] {
- --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(136 217 130);
- --color-on-tertiary: rgb(0 57 9);
- --color-tertiary-container: rgb(46 125 50);
- --color-on-tertiary-container: rgb(203 255 194);
- --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(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-primary: rgb(168 200 255);
+ --color-surface-tint: rgb(120 170 255);
+ --color-on-primary: rgb(0 25 65);
+ --color-primary-container: rgb(0 60 130);
+ --color-on-primary-container: rgb(220 235 255);
+ --color-secondary: rgb(195 203 215);
+ --color-on-secondary: rgb(40 47 58);
+ --color-secondary-container: rgb(60 73 88);
+ --color-on-secondary-container: rgb(229 233 239);
+ --color-tertiary: rgb(244 214 138);
+ --color-on-tertiary: rgb(60 50 0);
+ --color-tertiary-container: rgb(100 85 20);
+ --color-on-tertiary-container: rgb(255 238 204);
+ --color-error: rgb(248 113 113);
+ --color-on-error: rgb(127 29 29);
+ --color-error-container: rgb(153 27 27);
+ --color-on-error-container: rgb(254 226 226);
+ --color-background: rgb(26 28 30);
+ --color-on-background: rgb(226 228 231);
+ --color-surface: rgb(26 28 30);
+ --color-on-surface: rgb(226 228 231);
+ --color-surface-variant: rgb(68 71 76);
+ --color-on-surface-variant: rgb(195 199 206);
+ --color-outline: rgb(140 144 152);
+ --color-outline-variant: rgb(68 71 76);
--color-shadow: rgb(0 0 0);
--color-scrim: rgb(0 0 0);
- --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(163 246 156);
- --color-on-tertiary-fixed: rgb(0 34 4);
- --color-tertiary-fixed-dim: rgb(136 217 130);
- --color-on-tertiary-fixed-variant: rgb(0 83 18);
- --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(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);
+ --color-inverse-surface: rgb(226 228 231);
+ --color-inverse-on-surface: rgb(45 48 51);
+ --color-inverse-primary: rgb(25 95 210);
+ --color-primary-fixed: rgb(220 235 255);
+ --color-on-primary-fixed: rgb(0 25 65);
+ --color-primary-fixed-dim: rgb(120 170 255);
+ --color-on-primary-fixed-variant: rgb(0 60 130);
+ --color-secondary-fixed: rgb(229 233 239);
+ --color-on-secondary-fixed: rgb(20 25 30);
+ --color-secondary-fixed-dim: rgb(195 203 215);
+ --color-on-secondary-fixed-variant: rgb(60 73 88);
+ --color-tertiary-fixed: rgb(255 238 204);
+ --color-on-tertiary-fixed: rgb(60 50 0);
+ --color-tertiary-fixed-dim: rgb(244 214 138);
+ --color-on-tertiary-fixed-variant: rgb(100 85 20);
+ --color-surface-dim: rgb(26 28 30);
+ --color-surface-bright: rgb(60 63 67);
+ --color-surface-container-lowest: rgb(18 20 22);
+ --color-surface-container-low: rgb(32 34 37);
+ --color-surface-container: rgb(36 39 42);
+ --color-surface-container-high: rgb(46 49 53);
+ --color-surface-container-highest: rgb(56 59 64);
}
}
diff --git a/app/themes/laszlo/assets/css/02-element/a.css b/app/themes/laszlo/assets/css/02-element/a.css
index 6e1e84b1..bbf06a58 100644
--- a/app/themes/laszlo/assets/css/02-element/a.css
+++ b/app/themes/laszlo/assets/css/02-element/a.css
@@ -1,9 +1,9 @@
@layer element {
a {
- --_link-color: var(--link-color, var(--color-tertiary));
- --_link-color-hover: var(--link-color-hover, var(--color-tertiary));
- --_link-visited: var(--link-visited, var(--color-tertiary));
- --_link-color-active: var(--link-color-active, var(--color-tertiary));
+ --_link-color: var(--link-color, var(--color-primary));
+ --_link-color-hover: var(--link-color-hover, var(--color-primary));
+ --_link-visited: var(--link-visited, var(--color-primary));
+ --_link-color-active: var(--link-color-active, var(--color-primary));
--_link-color-broken: var(--link-color-broken, var(--color-error));
--_link-text-decoration-thickness: var(
--link-text-decoration-thickness,
diff --git a/app/themes/laszlo/assets/css/02-element/body.css b/app/themes/laszlo/assets/css/02-element/body.css
index b9467dbb..2a11ef0b 100644
--- a/app/themes/laszlo/assets/css/02-element/body.css
+++ b/app/themes/laszlo/assets/css/02-element/body.css
@@ -1,13 +1,7 @@
@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'> code {
display: block;
overflow-x: auto;
padding: var(--spacing-5);
border-radius: var(--spacing-2);
- background: var(--color-surface-container-lowest);
+ background: var(--color-surface-container-high);
}
:not(pre) > code {
padding: var(--spacing-1);
vertical-align: middle;
word-break: break-word;
+ color: var(--inline-color);
font-size: 0.8em;
}
}
diff --git a/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css b/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
index e25e4c8d..99963033 100644
--- a/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
+++ b/app/themes/laszlo/assets/css/03-component/form/comment-comment-node-blog-entry-form.css
@@ -3,9 +3,9 @@
display: flex;
flex-direction: column;
padding: var(--spacing-6);
- border: 1px solid var(--color-surface-dim);
+ border: 1px solid var(--color-outline-variant);
border-radius: var(--spacing-4);
- background: var(--color-surface-container-low);
+ background: var(--color-surface-container-lowest);
gap: var(--spacing-6);
}
diff --git a/app/themes/laszlo/components/content/article-card/article-card.css b/app/themes/laszlo/components/content/article-card/article-card.css
index 87546ddb..12559f9e 100644
--- a/app/themes/laszlo/components/content/article-card/article-card.css
+++ b/app/themes/laszlo/components/content/article-card/article-card.css
@@ -13,7 +13,7 @@
border: 1px solid var(--color-outline-variant);
border-radius: var(--spacing-4);
outline: var(--default-focus-outline-width) solid transparent;
- background: var(--color-surface);
+ background: var(--color-surface-container-lowest);
gap: var(--spacing-6);
box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 90%) 0 2px
8px 0;
diff --git a/app/themes/laszlo/components/content/article/article.css b/app/themes/laszlo/components/content/article/article.css
index e717cab1..55738329 100644
--- a/app/themes/laszlo/components/content/article/article.css
+++ b/app/themes/laszlo/components/content/article/article.css
@@ -1,14 +1,8 @@
@layer component.content {
.article {
--_article-spacing: var(--spacing-8);
- --_article-header-background: var(
- --article-header-background,
- var(--color-surface, transparent)
- );
- --_article-main-background: var(
- --article-main-background,
- var(--color-surface, transparent)
- );
+ --_article-header-background: var(--color-surface-container-lowest);
+ --_article-main-background: var(--color-surface-container-lowest);
--article-border: 1px solid var(--color-outline-variant);
--article-border-radius: var(--spacing-4);
--article-box-shadow:
diff --git a/app/themes/laszlo/components/content/comment/comment.css b/app/themes/laszlo/components/content/comment/comment.css
index 0f055650..f1e3eb2e 100644
--- a/app/themes/laszlo/components/content/comment/comment.css
+++ b/app/themes/laszlo/components/content/comment/comment.css
@@ -6,9 +6,9 @@
flex-direction: column;
padding: var(--spacing-6);
color: var(--color-on-surface);
- border: 1px solid var(--color-surface-dim);
+ border: 1px solid var(--color-outline-variant);
border-radius: var(--spacing-2);
- background: var(--color-surface-container-low);
+ background: var(--color-surface-container-lowest);
gap: var(--_comment-gap);
}
@@ -59,6 +59,6 @@
.comment pre {
padding: var(--spacing-4);
border-radius: var(--spacing-2);
- background: var(--color-surface-container-lowest);
+ background: var(--color-surface-container-low);
}
}
diff --git a/app/themes/laszlo/components/content/tag-card/tag-card.css b/app/themes/laszlo/components/content/tag-card/tag-card.css
index 8337f348..71279a2f 100644
--- a/app/themes/laszlo/components/content/tag-card/tag-card.css
+++ b/app/themes/laszlo/components/content/tag-card/tag-card.css
@@ -8,7 +8,7 @@
color: var(--color-on-surface);
border: 1px solid var(--color-outline-variant);
border-radius: var(--spacing-2);
- background: var(--color-surface);
+ background: var(--color-surface-container-lowest);
gap: var(--spacing-2);
&:focus-within,
diff --git a/app/themes/laszlo/components/layout/author-page/author-page.css b/app/themes/laszlo/components/layout/author-page/author-page.css
index 8bef3c26..94621abd 100644
--- a/app/themes/laszlo/components/layout/author-page/author-page.css
+++ b/app/themes/laszlo/components/layout/author-page/author-page.css
@@ -18,7 +18,7 @@
padding: var(--page-side-gap);
border: 1px solid var(--color-outline-variant);
border-radius: var(--spacing-4);
- background-color: var(--color-surface);
+ background-color: var(--color-surface-container-lowest);
box-shadow:
color-mix(in sRGB, var(--color-shadow), transparent 95%) 0 4px 16px,
color-mix(in sRGB, var(--color-shadow), transparent 99%) 0 8px 32px;
diff --git a/app/themes/laszlo/components/ui/branding/branding.css b/app/themes/laszlo/components/ui/branding/branding.css
index b4e822bd..8091af2e 100644
--- a/app/themes/laszlo/components/ui/branding/branding.css
+++ b/app/themes/laszlo/components/ui/branding/branding.css
@@ -5,17 +5,17 @@
--logo-fill-1: color-mix(
in sRGB,
var(--logo-color-primary),
- var(--logo-color-secondary) 70%
+ var(--logo-color-secondary) 85%
);
--logo-fill-2: color-mix(
in sRGB,
var(--logo-color-primary),
- var(--logo-color-secondary) 80%
+ var(--logo-color-secondary) 92%
);
--logo-fill-3: color-mix(
in sRGB,
var(--logo-color-primary),
- var(--logo-color-secondary) 90%
+ var(--logo-color-secondary) 98%
);
--logo-fill-4: var(--color-primary);
@@ -42,6 +42,7 @@
.branding__name {
color: var(--color-primary);
font: var(--typography-headline-medium);
+ font-weight: 900;
}
.branding__slogan {
diff --git a/app/themes/laszlo/components/ui/button/button.css b/app/themes/laszlo/components/ui/button/button.css
index 7cdd0a6b..3deb56e2 100644
--- a/app/themes/laszlo/components/ui/button/button.css
+++ b/app/themes/laszlo/components/ui/button/button.css
@@ -64,13 +64,13 @@
}
.button--variant--contained.button--color--primary {
- --button-background-color: var(--color-primary-container);
+ --button-background-color: var(--color-primary);
--button-background-color-hover: color-mix(
in sRGB,
var(--button-background-color),
- var(--color-surface-container-lowest) 15%
+ var(--color-surface-container-lowest) 10%
);
- --button-color: var(--color-on-primary-container);
+ --button-color: var(--color-on-primary);
--button-color-hover: var(--button-color);
}
diff --git a/app/themes/laszlo/components/ui/code-block/code-block.css b/app/themes/laszlo/components/ui/code-block/code-block.css
index 3d05a2df..e34aec70 100644
--- a/app/themes/laszlo/components/ui/code-block/code-block.css
+++ b/app/themes/laszlo/components/ui/code-block/code-block.css
@@ -14,9 +14,9 @@
&::after {
position: absolute;
- right: 1px;
- bottom: 1px;
- left: 1px;
+ right: 0;
+ bottom: 0;
+ left: 0;
overflow: hidden;
height: var(--collapse-height);
content: "";
@@ -30,7 +30,7 @@
var(--color-secondary-fixed),
transparent 50%
);
- backdrop-filter: blur(var(--spacing-1));
+ backdrop-filter: blur(var(--spacing-2));
}
}
diff --git a/app/themes/laszlo/components/ui/lightbox/lightbox.css b/app/themes/laszlo/components/ui/lightbox/lightbox.css
index 5e51e46f..275aa489 100644
--- a/app/themes/laszlo/components/ui/lightbox/lightbox.css
+++ b/app/themes/laszlo/components/ui/lightbox/lightbox.css
@@ -12,7 +12,6 @@
}
.lightbox__link img {
- border: 1px solid var(--color-surface-dim);
border-radius: var(--spacing-2);
}
diff --git a/app/themes/laszlo/components/ui/video/video.css b/app/themes/laszlo/components/ui/video/video.css
index 0ff51dd0..286f07df 100644
--- a/app/themes/laszlo/components/ui/video/video.css
+++ b/app/themes/laszlo/components/ui/video/video.css
@@ -3,7 +3,6 @@
position: relative;
display: flex;
justify-content: center;
- border: 1px solid var(--color-outline-variant);
border-radius: var(--spacing-2);
}
}