From 628a930d7c069e3a94bf7081ecbc90caa0f8a442 Mon Sep 17 00:00:00 2001 From: Minsu Lee Date: Thu, 4 Dec 2025 12:14:14 +0900 Subject: [PATCH 1/2] fix(layer): add proper code block styling with Tailwind import - Import Tailwind CSS base to fix Alert/Callout color variables - Add code block CSS variables (--code, --code-foreground, --code-highlight, --code-number) - Add [data-pretty-code-figure] styling with proper border-radius and overflow handling - Replace [data-shiki] selectors with Shiki-compatible selectors - Hide scrollbars on code blocks with -ms-overflow-style and scrollbar-width - Add [data-line] styling for proper line height and padding - Remove overflow-x-auto from tabs-item to eliminate unwanted scrollbar on short content Fixes code block display issues with missing backgrounds and improper styling. --- apps/docs/content/index.md | 2 +- packages/layer/app/assets/css/main.css | 136 +++++++++++++++++++++++-- 2 files changed, 129 insertions(+), 9 deletions(-) diff --git a/apps/docs/content/index.md b/apps/docs/content/index.md index 627bfe12..f1b66e3b 100644 --- a/apps/docs/content/index.md +++ b/apps/docs/content/index.md @@ -80,7 +80,7 @@ Ship fast, flexible, and SEO-optimized documentation with beautiful design out o ::::::: :::::: - ::::::tabs-item{label="Code" icon="lucide:code" class="mt-5 mb-2 text-xs overflow-x-auto"} + ::::::tabs-item{label="Code" icon="lucide:code" class="mt-5 mb-2 text-xs"} ```mdc ::note Here's some additional information. diff --git a/packages/layer/app/assets/css/main.css b/packages/layer/app/assets/css/main.css index fb814016..13c9626c 100644 --- a/packages/layer/app/assets/css/main.css +++ b/packages/layer/app/assets/css/main.css @@ -1,3 +1,4 @@ +@import "tailwindcss"; @import 'tw-animate-css'; /* Tailwind CSS v4: Source detection for layer components */ @@ -44,6 +45,10 @@ --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); + --color-code: var(--code); + --color-code-foreground: var(--code-foreground); + --color-code-highlight: var(--code-highlight); + --color-code-number: var(--code-number); } :root { @@ -79,6 +84,10 @@ --chart-5: oklch(0.769 0.188 70.08); --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); + --code: oklch(0.98 0 0); + --code-foreground: oklch(0.145 0 0); + --code-highlight: oklch(0.96 0 0); + --code-number: oklch(0.56 0 0); } .dark { @@ -113,6 +122,10 @@ --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); + --code: oklch(0.2 0 0); + --code-foreground: oklch(0.708 0 0); + --code-highlight: oklch(0.27 0 0); + --code-number: oklch(0.72 0 0); } @layer base { @@ -156,26 +169,133 @@ /* Code block styling */ @layer components { - [data-shiki] { - @apply rounded-lg border bg-muted/50 text-sm; + [data-pretty-code-figure] { + background-color: var(--color-code); + color: var(--color-code-foreground); + border-radius: var(--radius-lg, 0.625rem); + margin-top: calc(var(--spacing, 0.25rem) * 6); + overflow: hidden; + font-size: var(--text-sm, 0.875rem); + outline: none; + position: relative; + @apply -mx-1 md:-mx-1; + + &:has([data-pretty-code-title]) [data-slot="copy-button"] { + top: calc(var(--spacing) * 1.5) !important; + } + + pre { + -ms-overflow-style: none; + scrollbar-width: none; + background: transparent !important; + border: none !important; + border-radius: 0 !important; + margin-top: 0 !important; + + &::-webkit-scrollbar { + display: none; + } + } } - [data-shiki] code { - @apply block overflow-x-auto p-4; + [data-pretty-code-title] { + border-bottom: color-mix(in oklab, var(--border) 30%, transparent); + border-bottom-width: 1px; + border-bottom-style: solid; + padding-block: calc(var(--spacing) * 2.5); + padding-inline: calc(var(--spacing) * 4); + font-size: var(--text-sm); + font-family: var(--font-mono); + color: var(--color-code-foreground); } - [data-shiki] .line { - @apply min-h-[1.5rem]; + [data-line-numbers] { + display: grid; + min-width: 100%; + white-space: pre; + border: 0; + background: transparent; + padding: 0; + counter-reset: line; + box-decoration-break: clone; } - [data-shiki] .line span { + [data-line-numbers] [data-line]::before { + font-size: var(--text-sm); + counter-increment: line; + content: counter(line); + display: inline-block; + width: calc(var(--spacing) * 16); + padding-right: calc(var(--spacing) * 6); + text-align: right; + color: var(--color-code-number); + background-color: var(--color-code); + position: sticky; + left: 0; + } + + [data-line-numbers] [data-highlighted-line][data-line]::before { + background-color: var(--color-code-highlight); + } + + [data-line], + .line { + padding-top: calc(var(--spacing, 0.25rem) * 0.5); + padding-bottom: calc(var(--spacing, 0.25rem) * 0.5); + min-height: calc(var(--spacing, 0.25rem) * 1); + width: 100%; + display: block; + } + + [data-line] span, + .line span { color: var(--shiki-light); } - .dark [data-shiki] .line span { + .dark [data-line] span, + .dark .line span { color: var(--shiki-dark) !important; } + /* Shiki code block styling */ + pre code .line { + display: block; + } + + .shiki { + background-color: var(--color-code) !important; + } + + [data-highlighted-line], + [data-highlighted-chars] { + position: relative; + background-color: var(--color-code-highlight); + } + + [data-highlighted-line] { + &:after { + position: absolute; + top: 0; + left: 0; + width: 2px; + height: 100%; + content: ""; + background-color: color-mix( + in oklab, + var(--muted-foreground) 50%, + transparent + ); + } + } + + [data-highlighted-chars] { + border-radius: var(--radius-sm); + padding-inline: 0.3rem; + padding-block: 0.1rem; + font-family: var(--font-mono); + font-size: 0.8rem; + } + /* Prose styles for documentation */ .prose { @apply max-w-none; From 2997e6de1564ba372ec9dfe29f90351d253910b2 Mon Sep 17 00:00:00 2001 From: Minsu Lee Date: Thu, 4 Dec 2025 14:32:29 +0900 Subject: [PATCH 2/2] chore: apply AI code review suggestions - Combine border-bottom properties into shorthand for conciseness - Add !important to light mode Shiki color rule for consistency with dark mode - Add explanatory comment for !important usage --- packages/layer/app/assets/css/main.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/layer/app/assets/css/main.css b/packages/layer/app/assets/css/main.css index 13c9626c..4c2924b5 100644 --- a/packages/layer/app/assets/css/main.css +++ b/packages/layer/app/assets/css/main.css @@ -199,9 +199,7 @@ } [data-pretty-code-title] { - border-bottom: color-mix(in oklab, var(--border) 30%, transparent); - border-bottom-width: 1px; - border-bottom-style: solid; + border-bottom: 1px solid color-mix(in oklab, var(--border) 30%, transparent); padding-block: calc(var(--spacing) * 2.5); padding-inline: calc(var(--spacing) * 4); font-size: var(--text-sm); @@ -247,9 +245,11 @@ display: block; } + /* Override Shiki inline styles - !important required for both modes + to ensure our theme colors take precedence over Shiki's inline styles */ [data-line] span, .line span { - color: var(--shiki-light); + color: var(--shiki-light) !important; } .dark [data-line] span,