feat: auto-detect blockquote and table colors from content

Replace manual hashtags and color cycling with content-tone heuristics for blockquotes and tables, and refine blockquote layout with a centered icon, larger sizing, and clearer contrast over background decorations.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/globals.css

@@ -403,12 +403,15 @@
 .blog-blockquote {
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   border-radius: var(--radius-blog);
   border: 1px solid;
-  padding-block: 1.5rem;
-  padding-inline-end: 1.75rem;
-  padding-inline-start: 4rem;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  padding-block: 1.8rem;
+  padding-inline: 2.1rem;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.06);
+  isolation: isolate;
 }
 
 .blog-blockquote::before {
@@ -421,9 +424,9 @@
 }
 
 .blog-blockquote--yellow {
-  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
-  background: color-mix(in srgb, var(--accent) 18%, var(--background));
-  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 14%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+  background: color-mix(in srgb, var(--accent) 24%, var(--background));
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent);
 }
 
 .blog-blockquote--yellow::before {
@@ -431,7 +434,7 @@
 }
 
 .blog-blockquote--yellow .blog-blockquote__icon {
-  color: color-mix(in srgb, var(--accent) 55%, transparent);
+  color: color-mix(in srgb, var(--accent) 82%, var(--foreground));
 }
 
 .blog-blockquote--yellow .blog-blockquote__footer {
@@ -439,9 +442,9 @@
 }
 
 .blog-blockquote--green {
-  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
-  background: color-mix(in srgb, var(--primary) 12%, var(--background));
-  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 12%, transparent);
+  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
+  background: color-mix(in srgb, var(--primary) 18%, var(--background));
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 16%, transparent);
 }
 
 .blog-blockquote--green::before {
@@ -449,7 +452,7 @@
 }
 
 .blog-blockquote--green .blog-blockquote__icon {
-  color: color-mix(in srgb, var(--primary) 50%, transparent);
+  color: color-mix(in srgb, var(--primary) 80%, var(--foreground));
 }
 
 .blog-blockquote--green .blog-blockquote__footer {
@@ -457,16 +460,17 @@
 }
 
 .blog-blockquote--gray {
-  border-color: var(--border);
-  background: color-mix(in srgb, var(--muted) 65%, var(--background));
+  border-color: color-mix(in srgb, var(--border) 90%, var(--muted-foreground));
+  background: color-mix(in srgb, var(--muted) 72%, var(--background));
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
 }
 
 .blog-blockquote--gray::before {
-  background: color-mix(in srgb, var(--muted-foreground) 38%, transparent);
+  background: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
 }
 
 .blog-blockquote--gray .blog-blockquote__icon {
-  color: color-mix(in srgb, var(--muted-foreground) 42%, transparent);
+  color: color-mix(in srgb, var(--muted-foreground) 78%, var(--foreground));
 }
 
 .blog-blockquote--gray .blog-blockquote__footer {
@@ -474,13 +478,12 @@
 }
 
 .blog-blockquote__icon {
-  position: absolute;
-  inset-inline-start: 1.25rem;
-  top: 1.5rem;
-  width: 2rem;
-  height: 2rem;
+  position: relative;
+  z-index: 2;
+  width: 2.4rem;
+  height: 2.4rem;
   flex-shrink: 0;
-  z-index: 1;
+  margin-bottom: 0.9rem;
 }
 
 .blog-blockquote__decorations {
@@ -490,7 +493,7 @@
   height: 100%;
   pointer-events: none;
   z-index: 0;
-  opacity: 0.15;
+  opacity: 0.07;
   /* Keep decorative shapes out of the quote-icon corner (inline-start). */
   clip-path: polygon(
     0 0,
@@ -519,15 +522,16 @@
 
 .blog-blockquote__content {
   position: relative;
-  z-index: 1;
+  z-index: 2;
   isolation: isolate;
-  font-size: 1.125rem;
+  width: 100%;
+  font-size: 1.35rem;
   line-height: 1.75;
   text-align: justify;
 }
 
 .blog-blockquote__content p {
-  margin-block: 0.5rem;
+  margin-block: 0.6rem;
 }
 
 .blog-blockquote__content a {
@@ -541,26 +545,24 @@
 
 .blog-blockquote__footer {
   position: relative;
-  z-index: 1;
-  margin-top: 1rem;
-  padding-top: 1rem;
+  z-index: 2;
+  width: 100%;
+  margin-top: 1.2rem;
+  padding-top: 1.2rem;
   border-top: 1px solid;
 }
 
 .blog-pullquote {
   text-align: center;
-  padding-inline: 1.5rem;
+  padding-inline: 1.8rem;
 }
 
 .blog-pullquote .blog-blockquote__icon {
-  position: static;
-  margin-inline: auto;
-  margin-bottom: 0.75rem;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 2.1rem;
+  height: 2.1rem;
 }
 
 .blog-pullquote .blog-blockquote__content {
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   font-weight: 500;
 }