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); } }