From 62b529dbdc78d39c72d12ead943d04212e8b39b7 Mon Sep 17 00:00:00 2001 From: Niklan Date: Mon, 15 Sep 2025 20:58:33 +0500 Subject: [PATCH 1/4] refactor(theme): improve visual appearance and contrast ratios --- .../laszlo/assets/css/00-setting/color.css | 168 ++++++++--------- .../laszlo/assets/css/02-element/body.css | 9 + .../laszlo/assets/css/02-element/code.css | 10 +- .../laszlo/assets/css/02-element/mark.css | 2 + .../comment-comment-node-blog-entry-form.css | 2 +- .../assets/css/03-component/ui/prose.css | 33 +++- .../content/article-card/article-card.css | 3 +- .../components/content/article/article.css | 25 ++- .../components/content/article/article.twig | 176 +++++++++--------- .../components/content/comment/comment.css | 2 +- .../layout/author-page/author-page.css | 2 +- .../laszlo/components/ui/callout/callout.css | 5 +- .../components/ui/code-block/code-block.css | 2 +- .../components/ui/text-input/text-input.css | 2 +- .../components/ui/textarea/textarea.css | 2 +- 15 files changed, 236 insertions(+), 207 deletions(-) diff --git a/app/themes/laszlo/assets/css/00-setting/color.css b/app/themes/laszlo/assets/css/00-setting/color.css index c697e1510..d91585388 100644 --- a/app/themes/laszlo/assets/css/00-setting/color.css +++ b/app/themes/laszlo/assets/css/00-setting/color.css @@ -1,111 +1,111 @@ /** - * - Source color: #695F12 + * - Source color: #004CFF * - [ ] 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(0 57 198); + --color-surface-tint: rgb(0 72 244); --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(0 76 255); + --color-on-primary-container: rgb(217 222 255); + --color-secondary: rgb(69 89 170); --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(147 166 254); + --color-on-secondary-container: rgb(35 56 137); + --color-tertiary: rgb(126 0 159); --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(159 31 196); + --color-on-tertiary-container: rgb(250 210 255); --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(251 248 255); + --color-on-background: rgb(25 27 37); + --color-surface: rgb(251 248 255); + --color-on-surface: rgb(25 27 37); + --color-surface-variant: rgb(224 225 246); + --color-on-surface-variant: rgb(67 70 86); + --color-outline: rgb(116 118 136); + --color-outline-variant: rgb(195 197 217); --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(46 48 58); + --color-inverse-on-surface: rgb(240 239 254); + --color-inverse-primary: rgb(184 196 255); + --color-primary-fixed: rgb(221 225 255); + --color-on-primary-fixed: rgb(0 19 85); + --color-primary-fixed-dim: rgb(184 196 255); + --color-on-primary-fixed-variant: rgb(0 54 188); + --color-secondary-fixed: rgb(221 225 255); + --color-on-secondary-fixed: rgb(0 19 85); + --color-secondary-fixed-dim: rgb(184 196 255); + --color-on-secondary-fixed-variant: rgb(44 64 145); + --color-tertiary-fixed: rgb(252 215 255); + --color-on-tertiary-fixed: rgb(52 0 67); + --color-tertiary-fixed-dim: rgb(242 175 255); + --color-on-tertiary-fixed-variant: rgb(120 0 152); + --color-surface-dim: rgb(217 217 231); + --color-surface-bright: rgb(251 248 255); --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(243 242 255); + --color-surface-container: rgb(237 237 251); + --color-surface-container-high: rgb(231 231 245); + --color-surface-container-highest: rgb(225 225 239); } [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(184 196 255); + --color-surface-tint: rgb(184 196 255); + --color-on-primary: rgb(0 36 134); + --color-primary-container: rgb(0 76 255); + --color-on-primary-container: rgb(217 222 255); + --color-secondary: rgb(184 196 255); + --color-on-secondary: rgb(16 40 122); + --color-secondary-container: rgb(44 64 145); + --color-on-secondary-container: rgb(161 177 255); + --color-tertiary: rgb(242 175 255); + --color-on-tertiary: rgb(85 0 108); + --color-tertiary-container: rgb(159 31 196); + --color-on-tertiary-container: rgb(250 210 255); --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(17 19 28); + --color-on-background: rgb(225 225 239); + --color-surface: rgb(17 19 28); + --color-on-surface: rgb(225 225 239); + --color-surface-variant: rgb(67 70 86); + --color-on-surface-variant: rgb(195 197 217); + --color-outline: rgb(141 144 163); + --color-outline-variant: rgb(67 70 86); --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-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-inverse-surface: rgb(225 225 239); + --color-inverse-on-surface: rgb(46 48 58); + --color-inverse-primary: rgb(0 72 244); + --color-primary-fixed: rgb(221 225 255); + --color-on-primary-fixed: rgb(0 19 85); + --color-primary-fixed-dim: rgb(184 196 255); + --color-on-primary-fixed-variant: rgb(0 54 188); + --color-secondary-fixed: rgb(221 225 255); + --color-on-secondary-fixed: rgb(0 19 85); + --color-secondary-fixed-dim: rgb(184 196 255); + --color-on-secondary-fixed-variant: rgb(44 64 145); + --color-tertiary-fixed: rgb(252 215 255); + --color-on-tertiary-fixed: rgb(52 0 67); + --color-tertiary-fixed-dim: rgb(242 175 255); + --color-on-tertiary-fixed-variant: rgb(120 0 152); + --color-surface-dim: rgb(17 19 28); + --color-surface-bright: rgb(55 57 67); + --color-surface-container-lowest: rgb(12 14 23); + --color-surface-container-low: rgb(25 27 37); + --color-surface-container: rgb(29 31 41); + --color-surface-container-high: rgb(40 41 52); + --color-surface-container-highest: rgb(51 52 63); } } diff --git a/app/themes/laszlo/assets/css/02-element/body.css b/app/themes/laszlo/assets/css/02-element/body.css index 2ee2965d0..0b63c4da2 100644 --- a/app/themes/laszlo/assets/css/02-element/body.css +++ b/app/themes/laszlo/assets/css/02-element/body.css @@ -1,11 +1,20 @@ @layer element { :root { --page-background-color: var(--color-surface-container); + --page-background-image: radial-gradient( + at 50%, + var(--color-surface-container-low) 30%, + 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; + background-size: auto 100vw; font: var(--typography-body-large); } } diff --git a/app/themes/laszlo/assets/css/02-element/code.css b/app/themes/laszlo/assets/css/02-element/code.css index 87059b21d..2f6aa934f 100644 --- a/app/themes/laszlo/assets/css/02-element/code.css +++ b/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 - ); + border-radius: var(--spacing-2); + background: var(--color-surface); box-decoration-break: clone; font: var(--typography-code); } diff --git a/app/themes/laszlo/assets/css/02-element/mark.css b/app/themes/laszlo/assets/css/02-element/mark.css index 3aea68386..77e5c7a6a 100644 --- a/app/themes/laszlo/assets/css/02-element/mark.css +++ b/app/themes/laszlo/assets/css/02-element/mark.css @@ -3,6 +3,8 @@ padding: 0.25ch 0.5ch; color: var(--color-on-primary-container); background-color: var(--color-primary-container); + box-decoration-break: clone; + box-shadow: 0 2px 0 var(--color-primary); } mark > * { 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 bcf569199..e25e4c8d5 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 @@ -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); } diff --git a/app/themes/laszlo/assets/css/03-component/ui/prose.css b/app/themes/laszlo/assets/css/03-component/ui/prose.css index ca7cdf562..6abef5378 100644 --- a/app/themes/laszlo/assets/css/03-component/ui/prose.css +++ b/app/themes/laszlo/assets/css/03-component/ui/prose.css @@ -1,21 +1,31 @@ @layer component.ui { .prose { + --prose-vertical-spacing: 2ch; --prose-list-vertical-spacing: 1ch; - --prose-list-horizontal-spacing: 3ch; + --prose-list-horizontal-spacing: 2ch; - display: flex; - flex-direction: column; - gap: 2ch; width: 100%; } + .prose > * { + margin-block: var(--prose-vertical-spacing); + + &:first-child { + margin-block-start: 0; + } + + &:last-child { + margin-block-end: 0; + } + } + .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { - margin-top: 1ch; - padding-bottom: 1ch; + margin-top: calc(var(--prose-vertical-spacing) + 1ch); + padding-bottom: 0.5ch; border-bottom: 1px solid var(--color-surface-container-high); } @@ -53,7 +63,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 +71,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); @@ -87,8 +96,8 @@ calc(0.2727rem + 0.9697vw), var(--spacing-8) ); - border: 1px solid var(--color-outline-variant); - border-radius: var(--spacing-3); + border: 1px solid var(--color-surface-variant); + border-radius: var(--spacing-4); background: var(--color-surface-container-low); gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8)); } @@ -112,6 +121,10 @@ } } + .prose .callout { + margin-block-start: calc(var(--prose-vertical-spacing) + 1ch); + } + .prose .footnote-backref { text-decoration: none; } 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 69c935273..8a3e039a8 100644 --- a/app/themes/laszlo/components/content/article-card/article-card.css +++ b/app/themes/laszlo/components/content/article-card/article-card.css @@ -10,7 +10,7 @@ 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); @@ -19,6 +19,7 @@ &:focus-within, &:hover, &:active { + border-color: transparent; outline: var(--default-focus-outline); background-color: var(--color-surface-container-highest); } diff --git a/app/themes/laszlo/components/content/article/article.css b/app/themes/laszlo/components/content/article/article.css index 019f5c09d..4bfe77678 100644 --- a/app/themes/laszlo/components/content/article/article.css +++ b/app/themes/laszlo/components/content/article/article.css @@ -9,12 +9,23 @@ --article-main-background, var(--color-surface, transparent) ); + --article-border: 1px solid var(--color-outline-variant); + --article-border-radius: var(--spacing-4); + --article-box-shadow: + rgb(0 0 0 / 0.05) 0px 4px 16px, rgb(0 0 0 / 0.05) 0px 8px 32px; display: flex; flex-direction: column; gap: var(--_article-spacing); } + .article__main-pane { + overflow: hidden; + border: var(--article-border); + border-radius: var(--article-border-radius); + box-shadow: var(--article-box-shadow); + } + .article__header { position: relative; display: flex; @@ -22,9 +33,7 @@ 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; + border-bottom: var(--article-border); background-color: color-mix( in sRGB, var(--_article-header-background), @@ -48,7 +57,7 @@ filter: blur(var(--spacing-16)) saturate(280%); background: var(--background-image); background-position: center; - background-size: cover; + aspect-ratio: 1/1; } @media screen and (min-width: 640px) { @@ -102,10 +111,7 @@ display: flex; flex-flow: wrap; 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); margin-inline: calc(var(--page-side-gap) * -1); @@ -188,11 +194,12 @@ flex-direction: column; align-items: center; padding: var(--spacing-4) var(--spacing-2); - border: 1px solid var(--color-surface-variant); + border: var(--article-border); border-radius: var(--spacing-4); - background-color: var(--color-surface-container-low); + background-color: var(--_article-main-background); gap: var(--spacing-6); margin-inline: calc(var(--page-side-gap) * -1); + box-shadow: var(--article-box-shadow); @media screen and (min-width: 640px) { padding: var(--spacing-4); diff --git a/app/themes/laszlo/components/content/article/article.twig b/app/themes/laszlo/components/content/article/article.twig index e3b12fd28..1a1ad3686 100644 --- a/app/themes/laszlo/components/content/article/article.twig +++ b/app/themes/laszlo/components/content/article/article.twig @@ -1,104 +1,106 @@ -
- {% include 'laszlo:image' with { - attributes: create_attribute({ - class: ['article__poster'], - }), - src: poster_uri|image_style('200x264'), - width: 200, - height: 264, - alt: title, - loading: 'eager', - sizes: [ - '200px', - ], - srcset: { - '200w': poster_uri|image_style('200x264'), - '400w': poster_uri|image_style('400x528'), - } - } only %} - -
-
- {{ drupal_breadcrumb() }} -
-

{{ title }}

-
- {% block summary %}{% endblock %} -
+
+
+ {% include 'laszlo:image' with { + attributes: create_attribute({ + class: ['article__poster'], + }), + src: poster_uri|image_style('200x264'), + width: 200, + height: 264, + alt: title, + loading: 'eager', + sizes: [ + '200px', + ], + srcset: { + '200w': poster_uri|image_style('200x264'), + '400w': poster_uri|image_style('400x528'), + } + } only %} - {% if tags %} -
- {{ tags }} +
+
+ {{ drupal_breadcrumb() }} +
+

{{ title }}

+
+ {% block summary %}{% endblock %}
- {% endif %} -
- {% include 'laszlo:meta' with { - icon: 'calendar', - label: 'Published'|t, - value: published_timestamp|format_date('dmy'), - } only %} - • - {% include 'laszlo:meta' with { - icon: 'read-time', - label: 'Time to read'|t, - value: '@minutes min.'|t({'@minutes': estimated_read_time}), - } only %} + {% if tags %} +
+ {{ tags }} +
+ {% endif %} + +
+ {% include 'laszlo:meta' with { + icon: 'calendar', + label: 'Published'|t, + value: published_timestamp|format_date('dmy'), + } only %} + • + {% include 'laszlo:meta' with { + icon: 'read-time', + label: 'Time to read'|t, + value: '@minutes min.'|t({'@minutes': estimated_read_time}), + } only %} +
-
-
+
-
- -
- {% block content %}{% endblock %} +
+ {% block content %}{% endblock %} - {% if attachments %} -

{{ 'Files'|t }}

-
- {% for attachment in attachments %} - {% include 'laszlo:attachment-file' with { - label: attachment.media_label, - filename: attachment.filename, - file_uri: attachment.file_uri, - size: attachment.size, - } only %} - {% endfor %} -
- {% endif %} -
+ {% if attachments %} +

{{ 'Files'|t }}

+
+ {% for attachment in attachments %} + {% include 'laszlo:attachment-file' with { + label: attachment.media_label, + filename: attachment.filename, + file_uri: attachment.file_uri, + size: attachment.size, + } only %} + {% endfor %} +
+ {% endif %} +
+
{% if next_link or previous_link %} diff --git a/app/themes/laszlo/components/content/comment/comment.css b/app/themes/laszlo/components/content/comment/comment.css index cb7559cc1..8543df1ff 100644 --- a/app/themes/laszlo/components/content/comment/comment.css +++ b/app/themes/laszlo/components/content/comment/comment.css @@ -8,7 +8,7 @@ color: var(--color-on-surface); border: 1px solid var(--color-surface-dim); border-radius: var(--spacing-2); - background: var(--color-surface-bright); + background: var(--color-surface-container-low); gap: var(--_comment-gap); } 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 6ceb717a8..a84e960f7 100644 --- a/app/themes/laszlo/components/layout/author-page/author-page.css +++ b/app/themes/laszlo/components/layout/author-page/author-page.css @@ -16,7 +16,7 @@ flex-direction: column; order: 2; padding: var(--page-side-gap); - border: 1px solid var(--color-surface-variant); + border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-4); background-color: var(--color-surface); gap: var(--author-page-content-gap); diff --git a/app/themes/laszlo/components/ui/callout/callout.css b/app/themes/laszlo/components/ui/callout/callout.css index d81c9f4c8..34c1bce2a 100644 --- a/app/themes/laszlo/components/ui/callout/callout.css +++ b/app/themes/laszlo/components/ui/callout/callout.css @@ -11,12 +11,11 @@ display: flex; flex-direction: column; - margin-top: calc(var(--_callout-expected-heading-height) / 2); - padding: var(--spacing-4); + padding: var(--spacing-6); padding-top: 0; color: var(--color-on-surface); border: 1px solid var(--_callout-border-color); - border-radius: var(--spacing-1); + border-radius: var(--spacing-3); background-color: color-mix( in sRGB, var(--_callout-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 ed32fbde7..3d05a2df5 100644 --- a/app/themes/laszlo/components/ui/code-block/code-block.css +++ b/app/themes/laszlo/components/ui/code-block/code-block.css @@ -24,7 +24,7 @@ pointer-events: none; opacity: 0; border-top: 1px solid var(--color-outline-variant); - border-radius: 0 0 var(--spacing-1) var(--spacing-1); + border-radius: 0 0 var(--spacing-2) var(--spacing-2); background: color-mix( in sRGB, var(--color-secondary-fixed), diff --git a/app/themes/laszlo/components/ui/text-input/text-input.css b/app/themes/laszlo/components/ui/text-input/text-input.css index 90777247b..29938cd39 100644 --- a/app/themes/laszlo/components/ui/text-input/text-input.css +++ b/app/themes/laszlo/components/ui/text-input/text-input.css @@ -12,7 +12,7 @@ --_input-border-width: var(--input-border-width, 1px); --_input-background-color: var( --input-background-color, - var(--color-surface-bright) + var(--color-surface-container-lowest) ); --_input-color: var(--input-color, var(--color-on-surface)); --_input-placeholder-color: var( diff --git a/app/themes/laszlo/components/ui/textarea/textarea.css b/app/themes/laszlo/components/ui/textarea/textarea.css index c3625f649..da0582986 100644 --- a/app/themes/laszlo/components/ui/textarea/textarea.css +++ b/app/themes/laszlo/components/ui/textarea/textarea.css @@ -12,7 +12,7 @@ --_textarea-border-width: var(--textarea-border-width, 1px); --_textarea-background-color: var( --textarea-background-color, - var(--color-surface-bright) + var(--color-surface-container-lowest) ); --_textarea-color: var(--textarea-color, var(--color-on-surface)); --_textarea-placeholder-color: var( From 02655f08dec48d4d1a223febcf203a1d65bd9d63 Mon Sep 17 00:00:00 2001 From: Niklan Date: Tue, 16 Sep 2025 21:20:39 +0500 Subject: [PATCH 2/4] refactor(theme): improve visual appearance and contrast ratios --- .../laszlo/assets/css/00-setting/color.css | 176 +++++++++--------- .../laszlo/assets/css/02-element/body.css | 6 +- .../laszlo/assets/css/02-element/code.css | 6 +- .../laszlo/assets/css/02-element/mark.css | 6 +- .../assets/css/03-component/ui/prose.css | 18 +- .../assets/css/03-component/ui/tooltip.css | 6 +- .../content/article-card/article-card.css | 2 +- .../components/content/article/article.css | 5 +- .../components/content/comment/comment.css | 3 - .../components/content/tag-card/tag-card.css | 3 +- .../layout/author-page/author-page.css | 3 + .../comment-reply-page/comment-reply-page.css | 2 +- .../components/ui/branding/branding.css | 14 +- .../ui/main-navigation/main-navigation.css | 2 +- .../previous-next-link/previous-next-link.css | 1 + 15 files changed, 134 insertions(+), 119 deletions(-) diff --git a/app/themes/laszlo/assets/css/00-setting/color.css b/app/themes/laszlo/assets/css/00-setting/color.css index d91585388..3232c0ede 100644 --- a/app/themes/laszlo/assets/css/00-setting/color.css +++ b/app/themes/laszlo/assets/css/00-setting/color.css @@ -1,111 +1,119 @@ /** - * - Source color: #004CFF - * - [ ] Color match + * - Source color: #EFCD58 + * - [x] Color match * - [x] Harmonize extended colors * - [x] Check contrast */ @layer setting { :root { - --color-primary: rgb(0 57 198); - --color-surface-tint: rgb(0 72 244); + --color-primary: rgb(114 92 0); + --color-surface-tint: rgb(114 92 0); --color-on-primary: rgb(255 255 255); - --color-primary-container: rgb(0 76 255); - --color-on-primary-container: rgb(217 222 255); - --color-secondary: rgb(69 89 170); + --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(147 166 254); - --color-on-secondary-container: rgb(35 56 137); - --color-tertiary: rgb(126 0 159); + --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(159 31 196); - --color-on-tertiary-container: rgb(250 210 255); + --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(251 248 255); - --color-on-background: rgb(25 27 37); - --color-surface: rgb(251 248 255); - --color-on-surface: rgb(25 27 37); - --color-surface-variant: rgb(224 225 246); - --color-on-surface-variant: rgb(67 70 86); - --color-outline: rgb(116 118 136); - --color-outline-variant: rgb(195 197 217); + --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(46 48 58); - --color-inverse-on-surface: rgb(240 239 254); - --color-inverse-primary: rgb(184 196 255); - --color-primary-fixed: rgb(221 225 255); - --color-on-primary-fixed: rgb(0 19 85); - --color-primary-fixed-dim: rgb(184 196 255); - --color-on-primary-fixed-variant: rgb(0 54 188); - --color-secondary-fixed: rgb(221 225 255); - --color-on-secondary-fixed: rgb(0 19 85); - --color-secondary-fixed-dim: rgb(184 196 255); - --color-on-secondary-fixed-variant: rgb(44 64 145); - --color-tertiary-fixed: rgb(252 215 255); - --color-on-tertiary-fixed: rgb(52 0 67); - --color-tertiary-fixed-dim: rgb(242 175 255); - --color-on-tertiary-fixed-variant: rgb(120 0 152); - --color-surface-dim: rgb(217 217 231); - --color-surface-bright: rgb(251 248 255); + --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(243 242 255); - --color-surface-container: rgb(237 237 251); - --color-surface-container-high: rgb(231 231 245); - --color-surface-container-highest: rgb(225 225 239); + --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); + --md-extended-color-accent-color: rgb(0 55 207); + --md-extended-color-accent-on-color: rgb(255 255 255); + --md-extended-color-accent-color-container: rgb(45 83 235); + --md-extended-color-accent-on-color-container: rgb(220 224 255); } [data-theme="dark"] { - --color-primary: rgb(184 196 255); - --color-surface-tint: rgb(184 196 255); - --color-on-primary: rgb(0 36 134); - --color-primary-container: rgb(0 76 255); - --color-on-primary-container: rgb(217 222 255); - --color-secondary: rgb(184 196 255); - --color-on-secondary: rgb(16 40 122); - --color-secondary-container: rgb(44 64 145); - --color-on-secondary-container: rgb(161 177 255); - --color-tertiary: rgb(242 175 255); - --color-on-tertiary: rgb(85 0 108); - --color-tertiary-container: rgb(159 31 196); - --color-on-tertiary-container: rgb(250 210 255); + --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(17 19 28); - --color-on-background: rgb(225 225 239); - --color-surface: rgb(17 19 28); - --color-on-surface: rgb(225 225 239); - --color-surface-variant: rgb(67 70 86); - --color-on-surface-variant: rgb(195 197 217); - --color-outline: rgb(141 144 163); - --color-outline-variant: rgb(67 70 86); + --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(225 225 239); - --color-inverse-on-surface: rgb(46 48 58); - --color-inverse-primary: rgb(0 72 244); - --color-primary-fixed: rgb(221 225 255); - --color-on-primary-fixed: rgb(0 19 85); - --color-primary-fixed-dim: rgb(184 196 255); - --color-on-primary-fixed-variant: rgb(0 54 188); - --color-secondary-fixed: rgb(221 225 255); - --color-on-secondary-fixed: rgb(0 19 85); - --color-secondary-fixed-dim: rgb(184 196 255); - --color-on-secondary-fixed-variant: rgb(44 64 145); - --color-tertiary-fixed: rgb(252 215 255); - --color-on-tertiary-fixed: rgb(52 0 67); - --color-tertiary-fixed-dim: rgb(242 175 255); - --color-on-tertiary-fixed-variant: rgb(120 0 152); - --color-surface-dim: rgb(17 19 28); - --color-surface-bright: rgb(55 57 67); - --color-surface-container-lowest: rgb(12 14 23); - --color-surface-container-low: rgb(25 27 37); - --color-surface-container: rgb(29 31 41); - --color-surface-container-high: rgb(40 41 52); - --color-surface-container-highest: rgb(51 52 63); + --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(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); + --md-extended-color-accent-color: rgb(185 195 255); + --md-extended-color-accent-on-color: rgb(0 34 138); + --md-extended-color-accent-color-container: rgb(45 83 235); + --md-extended-color-accent-on-color-container: rgb(220 224 255); } } diff --git a/app/themes/laszlo/assets/css/02-element/body.css b/app/themes/laszlo/assets/css/02-element/body.css index 0b63c4da2..b4e13619b 100644 --- a/app/themes/laszlo/assets/css/02-element/body.css +++ b/app/themes/laszlo/assets/css/02-element/body.css @@ -2,9 +2,9 @@ :root { --page-background-color: var(--color-surface-container); --page-background-image: radial-gradient( - at 50%, - var(--color-surface-container-low) 30%, - var(--color-surface-dim) 120% + at 50% 100%, + var(--color-surface-bright) 20%, + var(--color-surface-dim) 130% ); } diff --git a/app/themes/laszlo/assets/css/02-element/code.css b/app/themes/laszlo/assets/css/02-element/code.css index 2f6aa934f..c3824f484 100644 --- a/app/themes/laszlo/assets/css/02-element/code.css +++ b/app/themes/laszlo/assets/css/02-element/code.css @@ -2,8 +2,8 @@ code { color: var(--color-on-surface); border: 1px solid var(--color-outline-variant); - border-radius: var(--spacing-2); - background: var(--color-surface); + border-radius: var(--spacing-1); + background: var(--color-surface-container-low); box-decoration-break: clone; font: var(--typography-code); } @@ -12,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 { diff --git a/app/themes/laszlo/assets/css/02-element/mark.css b/app/themes/laszlo/assets/css/02-element/mark.css index 77e5c7a6a..bf932921d 100644 --- a/app/themes/laszlo/assets/css/02-element/mark.css +++ b/app/themes/laszlo/assets/css/02-element/mark.css @@ -1,10 +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-primary-fixed-dim); box-decoration-break: clone; - box-shadow: 0 2px 0 var(--color-primary); + box-shadow: 0 2px 0 var(--color-on-primary-fixed-variant); } mark > * { diff --git a/app/themes/laszlo/assets/css/03-component/ui/prose.css b/app/themes/laszlo/assets/css/03-component/ui/prose.css index 6abef5378..9a12f24f7 100644 --- a/app/themes/laszlo/assets/css/03-component/ui/prose.css +++ b/app/themes/laszlo/assets/css/03-component/ui/prose.css @@ -1,10 +1,13 @@ @layer component.ui { .prose { --prose-vertical-spacing: 2ch; - --prose-list-vertical-spacing: 1ch; + --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); width: 100%; + color: var(--prose-color); } .prose > * { @@ -19,14 +22,19 @@ } } + .prose h2 { + border-bottom: 1px solid var(--color-surface-container-high); + padding-bottom: 0.5ch; + } + .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { + color: var(--prose-secondary-color); margin-top: calc(var(--prose-vertical-spacing) + 1ch); - padding-bottom: 0.5ch; - border-bottom: 1px solid var(--color-surface-container-high); + font-weight: 500; } .prose h2:first-child, @@ -96,9 +104,9 @@ calc(0.2727rem + 0.9697vw), var(--spacing-8) ); - border: 1px solid var(--color-surface-variant); + border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-4); - background: var(--color-surface-container-low); + background: var(--color-surface-variant); gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8)); } diff --git a/app/themes/laszlo/assets/css/03-component/ui/tooltip.css b/app/themes/laszlo/assets/css/03-component/ui/tooltip.css index dcbcd71b2..62ebbfec6 100644 --- a/app/themes/laszlo/assets/css/03-component/ui/tooltip.css +++ b/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 { 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 8a3e039a8..1b38cb7cd 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-bright); + background: var(--color-surface); gap: var(--spacing-6); &:focus-within, diff --git a/app/themes/laszlo/components/content/article/article.css b/app/themes/laszlo/components/content/article/article.css index 4bfe77678..c999202a9 100644 --- a/app/themes/laszlo/components/content/article/article.css +++ b/app/themes/laszlo/components/content/article/article.css @@ -12,7 +12,8 @@ --article-border: 1px solid var(--color-outline-variant); --article-border-radius: var(--spacing-4); --article-box-shadow: - rgb(0 0 0 / 0.05) 0px 4px 16px, rgb(0 0 0 / 0.05) 0px 8px 32px; + color-mix(in sRGB, var(--color-shadow), transparent 95%) 0px 4px 16px, + color-mix(in sRGB, var(--color-shadow), transparent 99%) 0px 8px 32px; display: flex; flex-direction: column; @@ -20,7 +21,7 @@ } .article__main-pane { - overflow: hidden; + overflow: clip; border: var(--article-border); border-radius: var(--article-border-radius); box-shadow: var(--article-box-shadow); diff --git a/app/themes/laszlo/components/content/comment/comment.css b/app/themes/laszlo/components/content/comment/comment.css index 8543df1ff..0f055650e 100644 --- a/app/themes/laszlo/components/content/comment/comment.css +++ b/app/themes/laszlo/components/content/comment/comment.css @@ -13,10 +13,7 @@ } .comment__body { - display: flex; - flex-direction: column; font: var(--typography-body-medium); - gap: var(--spacing-4); } .comment__attribution { 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 93d6ca1e6..8337f348e 100644 --- a/app/themes/laszlo/components/content/tag-card/tag-card.css +++ b/app/themes/laszlo/components/content/tag-card/tag-card.css @@ -6,6 +6,7 @@ padding: var(--spacing-4); transition: background-color 0.25s linear; color: var(--color-on-surface); + border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-2); background: var(--color-surface); gap: var(--spacing-2); @@ -23,7 +24,7 @@ right: 0; bottom: 0; left: 0; - border-radius: var(--spacing-4); + border-radius: var(--spacing-2); &:active { outline: var(--default-focus-outline); 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 a84e960f7..8bef3c26a 100644 --- a/app/themes/laszlo/components/layout/author-page/author-page.css +++ b/app/themes/laszlo/components/layout/author-page/author-page.css @@ -19,6 +19,9 @@ border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-4); background-color: var(--color-surface); + 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; gap: var(--author-page-content-gap); margin-inline: calc(var(--page-side-gap) * -1); diff --git a/app/themes/laszlo/components/layout/comment-reply-page/comment-reply-page.css b/app/themes/laszlo/components/layout/comment-reply-page/comment-reply-page.css index ac9ecff29..a58d06fe4 100644 --- a/app/themes/laszlo/components/layout/comment-reply-page/comment-reply-page.css +++ b/app/themes/laszlo/components/layout/comment-reply-page/comment-reply-page.css @@ -5,7 +5,7 @@ align-items: center; padding: var(--spacing-16) var(--spacing-12); border-radius: var(--spacing-4); - background-color: var(--color-surface-container, transparent); + background-color: var(--color-surface); } .comment-reply-page__inner { diff --git a/app/themes/laszlo/components/ui/branding/branding.css b/app/themes/laszlo/components/ui/branding/branding.css index dc16e596e..b4e822bdc 100644 --- a/app/themes/laszlo/components/ui/branding/branding.css +++ b/app/themes/laszlo/components/ui/branding/branding.css @@ -1,7 +1,7 @@ @layer component.ui { .branding { - --logo-color-primary: var(--color-primary); - --logo-color-secondary: white; + --logo-color-primary: var(--color-surface-tint); + --logo-color-secondary: var(--color-surface-container-lowest); --logo-fill-1: color-mix( in sRGB, var(--logo-color-primary), @@ -17,7 +17,7 @@ var(--logo-color-primary), var(--logo-color-secondary) 90% ); - --logo-fill-4: var(--logo-color-primary); + --logo-fill-4: var(--color-primary); display: flex; flex-shrink: 0; @@ -26,12 +26,6 @@ gap: var(--spacing-5); } - [data-theme="dark"] { - .branding { - --logo-color-secondary: black; - } - } - .branding svg { width: 64px; } @@ -51,7 +45,7 @@ } .branding__slogan { - color: var(--color-on-surface); + color: var(--color-on-surface-variant); font: var(--typography-title-small); } } diff --git a/app/themes/laszlo/components/ui/main-navigation/main-navigation.css b/app/themes/laszlo/components/ui/main-navigation/main-navigation.css index bba02d61d..0781b0f94 100644 --- a/app/themes/laszlo/components/ui/main-navigation/main-navigation.css +++ b/app/themes/laszlo/components/ui/main-navigation/main-navigation.css @@ -17,7 +17,7 @@ padding: var(--spacing-2); border-radius: var(--spacing-16); background: color-mix(in sRGB, var(--color-surface-tint), transparent 50%); - backdrop-filter: saturate(280%) blur(40px); + backdrop-filter: saturate(280%) blur(24px); gap: var(--spacing-4); box-shadow: rgb(17 17 26 / 0.1) 0 8px 24px, diff --git a/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css b/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css index 1ee6b36c9..f2bdc26fe 100644 --- a/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css +++ b/app/themes/laszlo/components/ui/previous-next-link/previous-next-link.css @@ -6,6 +6,7 @@ align-items: center; padding: var(--spacing-6); text-decoration: none; + border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-4); background: var(--color-surface-variant); gap: var(--spacing-4); From 1b73983c514d511c9754ccfc0b02c28d80891516 Mon Sep 17 00:00:00 2001 From: Niklan Date: Tue, 16 Sep 2025 21:38:48 +0500 Subject: [PATCH 3/4] refactor(theme): improve visual appearance and contrast ratios --- app/themes/laszlo/assets/css/02-element/body.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/themes/laszlo/assets/css/02-element/body.css b/app/themes/laszlo/assets/css/02-element/body.css index b4e13619b..de3dc8d58 100644 --- a/app/themes/laszlo/assets/css/02-element/body.css +++ b/app/themes/laszlo/assets/css/02-element/body.css @@ -4,7 +4,7 @@ --page-background-image: radial-gradient( at 50% 100%, var(--color-surface-bright) 20%, - var(--color-surface-dim) 130% + var(--color-surface-dim) 120% ); } @@ -14,7 +14,6 @@ background-image: var(--page-background-image); background-attachment: fixed; background-position: center; - background-size: auto 100vw; font: var(--typography-body-large); } } From 6252bc9c9046b03778014642544e29399385762f Mon Sep 17 00:00:00 2001 From: Niklan Date: Wed, 17 Sep 2025 21:09:49 +0500 Subject: [PATCH 4/4] refactor(theme): improve visual appearance and contrast ratios --- .../laszlo/assets/css/00-setting/color.css | 8 ----- .../laszlo/assets/css/02-element/body.css | 12 ++++---- .../laszlo/assets/css/02-element/mark.css | 4 +-- .../assets/css/03-component/ui/prose.css | 10 ++----- .../content/article-card/article-card.css | 2 ++ .../components/content/article/article.css | 19 ++++++++---- .../content/comment-card/comment-card.css | 4 ++- .../content/home-cards/home-cards.css | 2 ++ .../content/search-result/search-result.css | 4 ++- .../author-page-navigation-item.css | 6 ++-- .../ui/breadcrumb-item/breadcrumb-item.css | 15 +++++++--- .../laszlo/components/ui/button/button.css | 3 +- .../laszlo/components/ui/callout/callout.css | 29 +++++++------------ app/themes/laszlo/components/ui/chip/chip.css | 11 ++++--- .../laszlo/components/ui/dialog/dialog.css | 5 ++-- app/themes/laszlo/components/ui/fab/fab.css | 15 +++++----- .../components/ui/lightbox/lightbox.css | 14 +++++++-- .../previous-next-link/previous-next-link.css | 12 +++----- .../components/ui/toc-dialog/toc-dialog.css | 1 + .../laszlo/components/ui/video/video.css | 2 +- 20 files changed, 98 insertions(+), 80 deletions(-) diff --git a/app/themes/laszlo/assets/css/00-setting/color.css b/app/themes/laszlo/assets/css/00-setting/color.css index 3232c0ede..678e26de6 100644 --- a/app/themes/laszlo/assets/css/00-setting/color.css +++ b/app/themes/laszlo/assets/css/00-setting/color.css @@ -55,10 +55,6 @@ --color-surface-container: rgb(245 237 224); --color-surface-container-high: rgb(239 231 218); --color-surface-container-highest: rgb(233 226 213); - --md-extended-color-accent-color: rgb(0 55 207); - --md-extended-color-accent-on-color: rgb(255 255 255); - --md-extended-color-accent-color-container: rgb(45 83 235); - --md-extended-color-accent-on-color-container: rgb(220 224 255); } [data-theme="dark"] { @@ -111,9 +107,5 @@ --color-surface-container: rgb(34 31 23); --color-surface-container-high: rgb(45 42 33); --color-surface-container-highest: rgb(56 52 44); - --md-extended-color-accent-color: rgb(185 195 255); - --md-extended-color-accent-on-color: rgb(0 34 138); - --md-extended-color-accent-color-container: rgb(45 83 235); - --md-extended-color-accent-on-color-container: rgb(220 224 255); } } diff --git a/app/themes/laszlo/assets/css/02-element/body.css b/app/themes/laszlo/assets/css/02-element/body.css index de3dc8d58..b9467dbbf 100644 --- a/app/themes/laszlo/assets/css/02-element/body.css +++ b/app/themes/laszlo/assets/css/02-element/body.css @@ -1,11 +1,13 @@ @layer element { :root { --page-background-color: var(--color-surface-container); - --page-background-image: radial-gradient( - at 50% 100%, - var(--color-surface-bright) 20%, - var(--color-surface-dim) 120% - ); + --page-background-image: + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'> * { diff --git a/app/themes/laszlo/assets/css/03-component/ui/prose.css b/app/themes/laszlo/assets/css/03-component/ui/prose.css index 9a12f24f7..2fa4fc25d 100644 --- a/app/themes/laszlo/assets/css/03-component/ui/prose.css +++ b/app/themes/laszlo/assets/css/03-component/ui/prose.css @@ -23,8 +23,8 @@ } .prose h2 { - border-bottom: 1px solid var(--color-surface-container-high); padding-bottom: 0.5ch; + border-bottom: 1px solid var(--color-surface-container-high); } .prose h2, @@ -32,8 +32,8 @@ .prose h4, .prose h5, .prose h6 { - color: var(--prose-secondary-color); margin-top: calc(var(--prose-vertical-spacing) + 1ch); + color: var(--prose-secondary-color); font-weight: 500; } @@ -106,7 +106,7 @@ ); border: 1px solid var(--color-outline-variant); border-radius: var(--spacing-4); - background: var(--color-surface-variant); + background: var(--color-surface-container-low); gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8)); } @@ -129,10 +129,6 @@ } } - .prose .callout { - margin-block-start: calc(var(--prose-vertical-spacing) + 1ch); - } - .prose .footnote-backref { text-decoration: none; } 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 1b38cb7cd..87546ddbc 100644 --- a/app/themes/laszlo/components/content/article-card/article-card.css +++ b/app/themes/laszlo/components/content/article-card/article-card.css @@ -15,6 +15,8 @@ outline: var(--default-focus-outline-width) solid transparent; 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, diff --git a/app/themes/laszlo/components/content/article/article.css b/app/themes/laszlo/components/content/article/article.css index c999202a9..e717cab1b 100644 --- a/app/themes/laszlo/components/content/article/article.css +++ b/app/themes/laszlo/components/content/article/article.css @@ -22,9 +22,16 @@ .article__main-pane { overflow: clip; - border: var(--article-border); + border-top: var(--article-border); + border-bottom: var(--article-border); border-radius: var(--article-border-radius); box-shadow: var(--article-box-shadow); + margin-inline: calc(var(--page-side-gap) * -1); + + @media screen and (min-width: 640px) { + margin-inline: initial; + border: var(--article-border); + } } .article__header { @@ -40,8 +47,8 @@ var(--_article-header-background), transparent 20% ); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'>