From 0ec7189adaefdebfef429039c7f5b28bac958bba Mon Sep 17 00:00:00 2001
From: Ayo <ayo@ayco.io>
Date: Sun, 5 Apr 2026 17:00:06 +0200
Subject: [PATCH 1/2] style: subtle color and size adjustment for <details> in
 the readme

---
 app/components/Readme.vue | 51 +++++++++++++++++++++++++++++----------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index c571e63bc2..9ed8809b14 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -60,19 +60,13 @@ function handleClick(event: MouseEvent) {
 </script>
 
 <template>
-  <article
-    class="readme max-w-[70ch] lg:max-w-none px-1"
-    dir="auto"
-    v-html="html"
-    :style="{
-      '--i18n-note': '\'' + $t('package.readme.callout.note') + '\'',
-      '--i18n-tip': '\'' + $t('package.readme.callout.tip') + '\'',
-      '--i18n-important': '\'' + $t('package.readme.callout.important') + '\'',
-      '--i18n-warning': '\'' + $t('package.readme.callout.warning') + '\'',
-      '--i18n-caution': '\'' + $t('package.readme.callout.caution') + '\'',
-    }"
-    @click="handleClick"
-  />
+  <article class="readme max-w-[70ch] lg:max-w-none px-1" dir="auto" v-html="html" :style="{
+    '--i18n-note': '\'' + $t('package.readme.callout.note') + '\'',
+    '--i18n-tip': '\'' + $t('package.readme.callout.tip') + '\'',
+    '--i18n-important': '\'' + $t('package.readme.callout.important') + '\'',
+    '--i18n-warning': '\'' + $t('package.readme.callout.warning') + '\'',
+    '--i18n-caution': '\'' + $t('package.readme.callout.caution') + '\'',
+  }" @click="handleClick" />
 </template>
 
 <style scoped>
@@ -112,20 +106,25 @@ function handleClick(event: MouseEvent) {
 .readme :deep([data-level='1']) {
   font-size: 1.5rem;
 }
+
 .readme :deep([data-level='2']) {
   font-size: 1.25rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid var(--border);
 }
+
 .readme :deep([data-level='3']) {
   font-size: 1.125rem;
 }
+
 .readme :deep([data-level='4']) {
   font-size: 1rem;
 }
+
 .readme :deep([data-level='5']) {
   font-size: 0.925rem;
 }
+
 .readme :deep([data-level='6']) {
   font-size: 0.875rem;
 }
@@ -137,9 +136,11 @@ function handleClick(event: MouseEvent) {
 .readme :deep(a) {
   @apply underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg transition-colors duration-200;
 }
+
 .readme :deep(a:hover) {
   @apply decoration-accent text-accent;
 }
+
 .readme :deep(a:focus-visible) {
   @apply decoration-accent text-accent;
 }
@@ -318,10 +319,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: var(--syntax-str);
   background: rgba(59, 130, 246, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='note']::before) {
   content: var(--i18n-note, 'Note');
   color: #3b82f6;
 }
+
 .readme :deep(blockquote[data-callout='note']::after) {
   background-color: #3b82f6;
   -webkit-mask: icon('i-lucide:info') no-repeat;
@@ -333,10 +336,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: #22c55e;
   background: rgba(34, 197, 94, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='tip']::before) {
   content: var(--i18n-tip, 'Tip');
   color: #22c55e;
 }
+
 .readme :deep(blockquote[data-callout='tip']::after) {
   background-color: #22c55e;
   -webkit-mask: icon('i-lucide:lightbulb') no-repeat;
@@ -348,10 +353,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: var(--syntax-fn);
   background: rgba(168, 85, 247, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='important']::before) {
   content: var(--i18n-important, 'Important');
   color: var(--syntax-fn);
 }
+
 .readme :deep(blockquote[data-callout='important']::after) {
   background-color: var(--syntax-fn);
   -webkit-mask: icon('i-lucide:pin') no-repeat;
@@ -363,10 +370,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: #eab308;
   background: rgba(234, 179, 8, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='warning']::before) {
   content: var(--i18n-warning, 'Warning');
   color: #eab308;
 }
+
 .readme :deep(blockquote[data-callout='warning']::after) {
   background-color: #eab308;
   -webkit-mask: icon('i-lucide:triangle-alert') no-repeat;
@@ -378,10 +387,12 @@ function handleClick(event: MouseEvent) {
   border-inline-start-color: #ef4444;
   background: rgba(239, 68, 68, 0.05);
 }
+
 .readme :deep(blockquote[data-callout='caution']::before) {
   content: var(--i18n-caution, 'Caution');
   color: #ef4444;
 }
+
 .readme :deep(blockquote[data-callout='caution']::after) {
   background-color: #ef4444;
   -webkit-mask: icon('i-lucide:circle-alert') no-repeat;
@@ -457,4 +468,18 @@ function handleClick(event: MouseEvent) {
   white-space: nowrap;
   border-width: 0;
 }
+
+/* Details element */
+.readme :deep(details) {
+  /**
+   * same size as [data-level='5']
+   */
+  font-size: 0.925rem;
+  color: var(--fg-subtle);
+
+  summary {
+    font-size: 1rem;
+    color: var(--fg-muted);
+  }
+}
 </style>

From 50379bf28ea59590c178961a229359d11acedead Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 5 Apr 2026 15:18:36 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 app/components/Readme.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/components/Readme.vue b/app/components/Readme.vue
index 9ed8809b14..cfdb1ffe51 100644
--- a/app/components/Readme.vue
+++ b/app/components/Readme.vue
@@ -60,13 +60,19 @@ function handleClick(event: MouseEvent) {
 </script>
 
 <template>
-  <article class="readme max-w-[70ch] lg:max-w-none px-1" dir="auto" v-html="html" :style="{
-    '--i18n-note': '\'' + $t('package.readme.callout.note') + '\'',
-    '--i18n-tip': '\'' + $t('package.readme.callout.tip') + '\'',
-    '--i18n-important': '\'' + $t('package.readme.callout.important') + '\'',
-    '--i18n-warning': '\'' + $t('package.readme.callout.warning') + '\'',
-    '--i18n-caution': '\'' + $t('package.readme.callout.caution') + '\'',
-  }" @click="handleClick" />
+  <article
+    class="readme max-w-[70ch] lg:max-w-none px-1"
+    dir="auto"
+    v-html="html"
+    :style="{
+      '--i18n-note': '\'' + $t('package.readme.callout.note') + '\'',
+      '--i18n-tip': '\'' + $t('package.readme.callout.tip') + '\'',
+      '--i18n-important': '\'' + $t('package.readme.callout.important') + '\'',
+      '--i18n-warning': '\'' + $t('package.readme.callout.warning') + '\'',
+      '--i18n-caution': '\'' + $t('package.readme.callout.caution') + '\'',
+    }"
+    @click="handleClick"
+  />
 </template>
 
 <style scoped>