improve background-colors

yuheiy · Mar 29, 2024 · 14312be · 14312be
1 parent 86c51eb
commit 14312be
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 6 deletions.
diff --git a/src/content/blog/2024-03-18-html-components-and-css-components-in-tailwindcss.mdx b/src/content/blog/2024-03-18-html-components-and-css-components-in-tailwindcss.mdx
@@ -190,8 +190,8 @@ componentsレイヤーがutilitiesレイヤーと異なるのは、後ろのレ
     class="grid w-fit grid-cols-[repeat(2,auto)] grid-rows-7 whitespace-pre *:flex *:items-center *:border-b *:px-3 *:py-1"
     role="group"
   >
-    <div class="bg-dynamic-subtle font-bold">ITCSS</div>
-    <div class="border-l bg-dynamic-subtle font-bold">Tailwind CSS</div>
+    <div class="bg-dynamic-inset font-bold">ITCSS</div>
+    <div class="border-l bg-dynamic-inset font-bold">Tailwind CSS</div>
     <div>generic</div>
     <div class="border-l">base</div>
     <div>elements</div>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -89,7 +89,7 @@ if (!is404) {
     <slot />
 
     {/* https://css-tricks.com/a-clever-sticky-footer-technique/ */}
-    <footer class="sticky top-full mt-16 bg-dynamic-subtle py-8 text-sm">
+    <footer class="sticky top-full mt-16 bg-dynamic-inset py-8 text-sm">
       <div class="wrapper space-y-4">
         <p>
           <a href="/">ホーム</a>&#x2003;<a href="/blog">ブログ</a>&#x2003;<a

diff --git a/src/styles/base/variables.shiki.css b/src/styles/base/variables.shiki.css
@@ -1,6 +1,6 @@
 :root {
   --astro-code-color-text: theme(textColor.dynamic.DEFAULT);
-  --astro-code-color-background: theme(backgroundColor.dynamic.subtle);
+  --astro-code-color-background: theme(backgroundColor.dynamic.muted);
   --astro-code-token-constant: #0550ae;
   --astro-code-token-string: #0a3069;
   --astro-code-token-comment: #6e7781;

diff --git a/src/styles/components/prose.css b/src/styles/components/prose.css
@@ -138,7 +138,7 @@
     vertical-align: top;
     border-block-end-width: thin;
     border-block-end-style: solid;
-    background-color: theme(backgroundColor.dynamic.subtle);
+    background-color: theme(backgroundColor.dynamic.inset);
     padding: theme(spacing.1) theme(spacing.3);
     text-align: inherit;
     white-space: pre;

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -63,7 +63,8 @@ module.exports = {
       backgroundColor: {
         dynamic: {
           DEFAULT: `light-dark(${colors.white}, ${colors.zinc['900']})`,
-          subtle: `light-dark(${colors.slate['100']}, ${colors.zinc['800']})`,
+          inset: `light-dark(${colors.slate['100']}, ${colors.zinc['800']})`,
+          muted: `light-dark(color-mix(in srgb, ${colors.white}, ${colors.slate['100']}), color-mix(in srgb, ${colors.zinc['800']} 25%, ${colors.zinc['900']}))`,
         },
       },
       borderColor: {