mirror of
https://github.com/simstudioai/sim.git
synced 2026-10-29 18:47:25 +08:00
improvement(docs): inherit the platform border and font-weight scales (#6252)
* improvement(docs): inherit the platform border and font-weight scales #6241 consolidated the app's neutral border tokens and flattened its font-weight scale. `apps/docs` was carrying an untouched copy of the pre-migration values, so the two have visibly drifted — the docs `@theme` block already declares it "mirrors apps/sim/tailwind.config.ts", so the drift is against stated intent rather than a deliberate divergence. Borders — same consolidation as the app: - `--border` #dedede -> #d8d8d8 (light), #333333 -> #444444 (dark) - `--border-1` and `--border-muted` become aliases of `--border`, so the 19 existing `var(--border-1)` consumers pick up the unified colour without being touched - `--divider` is retired; its single consumer moves to `--border` Font weights — the arbitrary values the app dropped: - `font-[480]`/`font-[470]`/`font-[500]` -> `font-medium`, `font-[430]` -> `font-normal`, `font-[600]` -> `font-semibold` The navbar's active tab and its invisible width-reserving ghost both used `font-[480]`; they move to `font-medium` together, so the anti-layout-shift trick still holds. Deliberately NOT ported: the app's `--border-width` hairline (0.5px on hi-dpi). The app wires it through `borderWidth.DEFAULT` in a Tailwind v3 JS config; docs is Tailwind v4 CSS-first, which hardcodes `border: 1px` in the utility with no theme key, so matching it means overriding a Tailwind utility. That is a site-wide visual change and wants its own PR with visual review. Also unchanged: the inline SVGs. `components/icons.tsx` (328) is the brand and integration set, `sim-logo` is a brand mark, and the handful of remaining shapes are bespoke and positioned by hand. Docs already consumes `@sim/emcn/icons` in the 15 places where a shared icon is the right call, and imports zero lucide. * improvement(docs): finish the platform token sweep Follow-on within the same PR. A full comparison of every custom token docs rolls against the platform found three more classes of drift. Text scale — #6241 retuned these and docs kept the old values: - `--text-body` #3b3b3b -> #434343 (light), #cdcdcd -> #c1c1c1 (dark) - `--text-muted` #707070 -> #7a7a7a (light), #787878 -> #6e6e6e (dark) - `--text-icon` #525252 -> #5a5a5a (light), #a0a0a0 -> #969696 (dark) Docs and the app now agree on all 62 shared token names, with zero divergent values. Missing shared-component tokens. Docs renders `@sim/emcn` (Badge, Chip, ChipLink) and `@sim/workflow-renderer` (block, subflow and note views), but never defined 14 of the tokens those components reference — an undefined `var()` silently falls back to `currentColor`, so the failure is invisible until the branch that uses it renders. Several are live: `--warning` on an edited subflow, `--caution` on inline code inside a note, `--text-placeholder` on an empty note, `--border-success` on a successful run edge. Added with the app's values, along with `--text-icon-muted` (new in #6241) and the four Badge palettes docs lacked (teal, cyan, pink, blue-secondary), so any variant renders correctly rather than being one prop away from black. Type scale — docs declares micro/xs/caption/small/base/md in `@theme` but 20 call sites bypassed it with identical raw values (`text-[13px]`, `text-[0.8125rem]`, `text-[12px]`, `text-[15px]`, `text-[10px]`). Each now uses the token; every value is byte-identical, so this is a rename, not a restyle. The class reordering in the same files is biome's `useSortedClasses` reacting to the rename — verified as a pure permutation, with the class multiset unchanged in every file. Deliberately left alone: - `#33C482` / `#2FB3FF` — brand-mark SVG fills and default props in demo data, not styling. - The Ask AI button's inverted `#383838`/`#575757`/`#e0e0e0`/`#cfcfcf`. The platform's `--surface-inverted`/`--surface-inverted-hover` hold *different* values, so adopting them would restyle the control rather than tokenize it. Worth doing, but as a visual change with review.
This commit is contained in:
Waleed
+50
-14
@@ -65,16 +65,17 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
|
||||
--surface-5: #f3f3f3;
|
||||
--surface-6: #e5e5e5;
|
||||
--surface-active: #ececec;
|
||||
--border: #dedede;
|
||||
--border-1: #e0e0e0;
|
||||
--divider: #ededed;
|
||||
--border: #d8d8d8;
|
||||
/** Legacy neutral-border aliases. New work should use --border. */
|
||||
--border-1: var(--border);
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #525252;
|
||||
--text-tertiary: #5c5c5c;
|
||||
--text-body: #3b3b3b;
|
||||
--text-muted: #707070;
|
||||
--text-body: #434343;
|
||||
--text-muted: #7a7a7a;
|
||||
--text-subtle: #8c8c8c;
|
||||
--text-icon: #525252;
|
||||
--text-icon: #5a5a5a;
|
||||
--text-icon-muted: #5c5c5c;
|
||||
--text-inverse: #ffffff;
|
||||
--text-error: #ef4444;
|
||||
--text-muted-inverse: #a0a0a0;
|
||||
@@ -84,9 +85,26 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
|
||||
--surface-inverted: #1b1b1b;
|
||||
--surface-inverted-hover: #363636;
|
||||
--border-inverted: #363636;
|
||||
--border-muted: #e4e4e4;
|
||||
--border-muted: var(--border);
|
||||
--badge-success-bg: #bbf7d0;
|
||||
--badge-success-text: #15803d;
|
||||
/* Shared-component tokens: referenced by @sim/emcn and @sim/workflow-renderer.
|
||||
Undefined here, a var() silently falls back to currentColor. Values mirror
|
||||
apps/sim/app/_styles/globals.css. */
|
||||
--border-success: #e0e0e0;
|
||||
--success: #22c55e;
|
||||
--error: #dc2626;
|
||||
--warning: #ea580c;
|
||||
--caution: #f59e0b;
|
||||
--text-placeholder: #8d8d8d;
|
||||
--badge-teal-bg: #99f6e4;
|
||||
--badge-teal-text: #0f766e;
|
||||
--badge-cyan-bg: #cffafe;
|
||||
--badge-cyan-text: #0891b2;
|
||||
--badge-pink-bg: #fbcfe8;
|
||||
--badge-pink-text: #be185d;
|
||||
--badge-blue-secondary-bg: #bae6fd;
|
||||
--badge-blue-secondary-text: #0369a1;
|
||||
--badge-blue-bg: #bfdbfe;
|
||||
--badge-blue-text: #1d4ed8;
|
||||
--badge-purple-bg: #e9d5ff;
|
||||
@@ -116,16 +134,17 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
|
||||
--surface-5: #363636;
|
||||
--surface-6: #454545;
|
||||
--surface-active: #2c2c2c;
|
||||
--border: #333333;
|
||||
--border-1: #3d3d3d;
|
||||
--divider: #393939;
|
||||
--border: #444444;
|
||||
/** Legacy neutral-border aliases. New work should use --border. */
|
||||
--border-1: var(--border);
|
||||
--text-primary: #e6e6e6;
|
||||
--text-secondary: #cccccc;
|
||||
--text-tertiary: #b3b3b3;
|
||||
--text-body: #cdcdcd;
|
||||
--text-muted: #787878;
|
||||
--text-body: #c1c1c1;
|
||||
--text-muted: #6e6e6e;
|
||||
--text-subtle: #7d7d7d;
|
||||
--text-icon: #a0a0a0;
|
||||
--text-icon: #969696;
|
||||
--text-icon-muted: #949494;
|
||||
--text-inverse: #1b1b1b;
|
||||
--text-error: #ef4444;
|
||||
--text-muted-inverse: #b3b3b3;
|
||||
@@ -135,9 +154,26 @@ body.wp-lightbox-open [aria-label="Ask Sim"] {
|
||||
--surface-inverted: #242424;
|
||||
--surface-inverted-hover: #363636;
|
||||
--border-inverted: #3d3d3d;
|
||||
--border-muted: #424242;
|
||||
--border-muted: var(--border);
|
||||
--badge-success-bg: rgba(34, 197, 94, 0.2);
|
||||
--badge-success-text: #86efac;
|
||||
/* Shared-component tokens: referenced by @sim/emcn and @sim/workflow-renderer.
|
||||
Undefined here, a var() silently falls back to currentColor. Values mirror
|
||||
apps/sim/app/_styles/globals.css. */
|
||||
--border-success: #575757;
|
||||
--success: #22c55e;
|
||||
--error: #f87171;
|
||||
--warning: #ff6600;
|
||||
--caution: #f59e0b;
|
||||
--text-placeholder: #8d8d8d;
|
||||
--badge-teal-bg: rgba(20, 184, 166, 0.2);
|
||||
--badge-teal-text: #5eead4;
|
||||
--badge-cyan-bg: rgba(14, 165, 233, 0.2);
|
||||
--badge-cyan-text: #7dd3fc;
|
||||
--badge-pink-bg: rgba(236, 72, 153, 0.2);
|
||||
--badge-pink-text: #f9a8d4;
|
||||
--badge-blue-secondary-bg: rgba(51, 180, 255, 0.2);
|
||||
--badge-blue-secondary-text: #7dd3fc;
|
||||
--badge-blue-bg: rgba(59, 130, 246, 0.2);
|
||||
--badge-blue-text: #93c5fd;
|
||||
--badge-purple-bg: rgba(168, 85, 247, 0.2);
|
||||
|
||||
@@ -145,8 +145,8 @@ export function AskAIPanel({ locale, open, onClose }: AskAIPanelProps) {
|
||||
className={cn(
|
||||
'space-y-3 text-[var(--text-primary)] text-base leading-relaxed',
|
||||
'[&_a]:text-[var(--text-primary)] [&_a]:underline [&_a]:decoration-dashed [&_a]:underline-offset-4',
|
||||
'[&_strong]:font-[600]',
|
||||
'[&_h1]:font-[600] [&_h2]:font-[600] [&_h3]:font-[600] [&_h4]:font-[600]',
|
||||
'[&_strong]:font-semibold',
|
||||
'[&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold [&_h4]:font-semibold',
|
||||
'[&_li]:my-1 [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5',
|
||||
'[&_code]:font-mono [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-[var(--surface-5)] [&_pre]:p-3 [&_pre]:text-small'
|
||||
)}
|
||||
|
||||
@@ -56,7 +56,7 @@ const ITEM_BASE =
|
||||
const ITEM_ACTIVE_MOBILE = 'bg-[var(--surface-active)] font-medium text-[var(--text-primary)]'
|
||||
|
||||
const ITEM_DESKTOP =
|
||||
'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-[13px] lg:leading-tight'
|
||||
'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:font-normal lg:text-small lg:leading-tight'
|
||||
const ITEM_TEXT = 'lg:text-[var(--text-body)]'
|
||||
const ITEM_HOVER = 'lg:hover:bg-[var(--surface-3)]'
|
||||
const ITEM_ACTIVE = 'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)]'
|
||||
@@ -144,7 +144,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
|
||||
'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
|
||||
'text-[var(--text-muted)] hover:bg-[var(--surface-active)] hover:text-[var(--text-body)]',
|
||||
active && ITEM_ACTIVE_MOBILE,
|
||||
'lg:block lg:flex-1 lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-[13px] lg:leading-tight',
|
||||
'lg:block lg:flex-1 lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-small lg:leading-tight',
|
||||
FOLDER_TEXT,
|
||||
!active && FOLDER_HOVER,
|
||||
active && FOLDER_ACTIVE
|
||||
@@ -171,7 +171,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
|
||||
className={cn(
|
||||
'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
|
||||
'text-[var(--text-muted)] hover:bg-[var(--surface-active)]',
|
||||
'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-left lg:text-[13px] lg:leading-tight',
|
||||
'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2.5 lg:py-1.5 lg:text-left lg:text-small lg:leading-tight',
|
||||
FOLDER_TEXT,
|
||||
FOLDER_HOVER
|
||||
)}
|
||||
@@ -214,7 +214,7 @@ export function SidebarSeparator({ item }: { item: Separator }) {
|
||||
<p
|
||||
className={cn(
|
||||
'font-medium text-[var(--text-muted)] text-xs',
|
||||
'lg:font-semibold lg:text-[10px] lg:text-[var(--text-muted)] lg:uppercase lg:tracking-[0.06em]'
|
||||
'lg:font-semibold lg:text-[var(--text-muted)] lg:text-micro lg:uppercase lg:tracking-[0.06em]'
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
|
||||
@@ -77,12 +77,12 @@ export function Navbar() {
|
||||
className={cn(
|
||||
'-mb-px relative flex items-center border-b text-[14px] tracking-[-0.01em] transition-colors',
|
||||
isActive
|
||||
? 'border-[var(--text-muted)] font-[480] text-[var(--text-primary)]'
|
||||
: 'border-transparent font-[430] text-[var(--text-muted)] hover:border-[var(--border-1)] hover:text-[var(--text-secondary)]'
|
||||
? 'border-[var(--text-muted)] font-medium text-[var(--text-primary)]'
|
||||
: 'border-transparent font-normal text-[var(--text-muted)] hover:border-[var(--border-1)] hover:text-[var(--text-secondary)]'
|
||||
)}
|
||||
>
|
||||
{/* Invisible bold text reserves width to prevent layout shift */}
|
||||
<span className='invisible font-[480]'>{tab.label}</span>
|
||||
<span className='invisible font-medium'>{tab.label}</span>
|
||||
<span className='absolute'>{tab.label}</span>
|
||||
</Link>
|
||||
)
|
||||
|
||||
@@ -42,7 +42,7 @@ export function PageTypeBadge({ type, className }: PageTypeBadgeProps) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 rounded-md px-[9px] py-0.5 font-medium font-season text-[12px] transition-colors',
|
||||
'inline-flex items-center gap-1.5 rounded-md px-[9px] py-0.5 font-medium font-season text-caption transition-colors',
|
||||
config.className,
|
||||
className
|
||||
)}
|
||||
|
||||
@@ -30,7 +30,7 @@ function FAQItemRow({
|
||||
type='button'
|
||||
onClick={onToggle}
|
||||
aria-expanded={isOpen}
|
||||
className='flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left font-[470] text-[0.875rem] text-[var(--text-body)] transition-colors hover:bg-[var(--surface-3)]'
|
||||
className='flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-left font-medium text-[0.875rem] text-[var(--text-body)] transition-colors hover:bg-[var(--surface-3)]'
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
@@ -79,7 +79,7 @@ export function FAQ({ items, title = 'Common Questions' }: FAQProps) {
|
||||
type='application/ld+json'
|
||||
dangerouslySetInnerHTML={{ __html: serializeJsonLd(faqSchema) }}
|
||||
/>
|
||||
<h2 className='mb-4 font-[500] text-xl'>{title}</h2>
|
||||
<h2 className='mb-4 font-medium text-xl'>{title}</h2>
|
||||
<div className='border-[var(--border)] border-t border-b'>
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
|
||||
@@ -34,8 +34,8 @@ export function SearchTrigger() {
|
||||
<Search className={chipContentIconClass} />
|
||||
<span>Search…</span>
|
||||
<kbd className='ml-auto flex items-center'>
|
||||
<span className='text-[15px]'>⌘</span>
|
||||
<span className='text-[12px]'>K</span>
|
||||
<span className='text-base'>⌘</span>
|
||||
<span className='text-caption'>K</span>
|
||||
</kbd>
|
||||
</button>
|
||||
)
|
||||
|
||||
@@ -43,7 +43,7 @@ export function VideoChapters({ title = 'Chapters', chapters, className }: Video
|
||||
|
||||
return (
|
||||
<aside className={cn('not-prose', className)}>
|
||||
<p className='mb-2 px-2.5 font-medium text-[0.8125rem] text-[var(--text-muted)]'>{title}</p>
|
||||
<p className='mb-2 px-2.5 font-medium text-[var(--text-muted)] text-small'>{title}</p>
|
||||
<ul className='m-0 flex list-none flex-col gap-0.5 p-0'>
|
||||
{chapters.map((chapter) => (
|
||||
<li key={chapter.title}>
|
||||
|
||||
@@ -143,7 +143,7 @@ export function VideoPlaceholder({
|
||||
|
||||
{/* Top-right status pill — only until a video is wired up */}
|
||||
{!hasVideo && (
|
||||
<span className='absolute top-6 right-6 z-10 inline-flex items-center gap-2 rounded-full border border-[var(--border-1)] bg-[var(--surface-2)] px-4 py-2 font-medium text-[12px] text-[var(--text-secondary)] uppercase tracking-[0.14em] md:top-8 md:right-8 dark:bg-[var(--surface-1)]'>
|
||||
<span className='absolute top-6 right-6 z-10 inline-flex items-center gap-2 rounded-full border border-[var(--border-1)] bg-[var(--surface-2)] px-4 py-2 font-medium text-[var(--text-secondary)] text-caption uppercase tracking-[0.14em] md:top-8 md:right-8 dark:bg-[var(--surface-1)]'>
|
||||
<span className='size-1.5 rounded-full bg-[var(--brand-accent)]' />
|
||||
{label}
|
||||
</span>
|
||||
|
||||
@@ -19,9 +19,7 @@ interface WhatYouWillLearnProps {
|
||||
export function WhatYouWillLearn({ items, className }: WhatYouWillLearnProps) {
|
||||
return (
|
||||
<div className={cn('not-prose', className)}>
|
||||
<p className='mb-3 font-medium text-[0.8125rem] text-[var(--text-muted)]'>
|
||||
What you will learn
|
||||
</p>
|
||||
<p className='mb-3 font-medium text-[var(--text-muted)] text-small'>What you will learn</p>
|
||||
<div className='divide-y divide-[var(--border)]'>
|
||||
{items.map((item) => (
|
||||
<div key={item.title} className='py-3.5 first:pt-0 last:pb-0'>
|
||||
|
||||
@@ -101,7 +101,7 @@ function FieldControl({ field }: { field: InspectorField }) {
|
||||
style={{ left: `calc(${percent}% - 6px)` }}
|
||||
/>
|
||||
</div>
|
||||
<span className='text-[13px] text-[var(--text-primary)]'>{field.value}</span>
|
||||
<span className='text-[var(--text-primary)] text-small'>{field.value}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ function TreeNode({ node, depth = 0 }: { node: OutputNode; depth?: number }) {
|
||||
<div className='flex min-w-0 flex-col'>
|
||||
<div className='flex min-h-[26px] items-center gap-2 rounded-[6px] px-1'>
|
||||
<span
|
||||
className='text-[13px]'
|
||||
className='text-small'
|
||||
style={{ color: node.highlight ? 'var(--brand-secondary)' : 'var(--text-primary)' }}
|
||||
>
|
||||
{node.key}
|
||||
@@ -76,13 +76,13 @@ function TreeNode({ node, depth = 0 }: { node: OutputNode; depth?: number }) {
|
||||
/>
|
||||
</div>
|
||||
{expanded && (node.children || node.value !== undefined) && (
|
||||
<div className='mt-0.5 ml-[5px] flex min-w-0 flex-col gap-0.5 border-[var(--divider)] border-l pl-[10px]'>
|
||||
<div className='mt-0.5 ml-[5px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[10px]'>
|
||||
{node.children
|
||||
? node.children.map((child) => (
|
||||
<TreeNode key={child.key} node={child} depth={depth + 1} />
|
||||
))
|
||||
: node.value !== undefined && (
|
||||
<div className='py-0.5 text-[13px] text-[var(--text-secondary)]'>{node.value}</div>
|
||||
<div className='py-0.5 text-[var(--text-secondary)] text-small'>{node.value}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -112,7 +112,7 @@ export function OutputBundle({
|
||||
<div className='not-prose my-6 flex w-full max-w-[640px] flex-col gap-3'>
|
||||
<div className='flex overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-1)]'>
|
||||
<div className='flex w-[210px] flex-shrink-0 flex-col border-[var(--border)] border-r px-2 py-2'>
|
||||
<div className='px-2 pb-2 text-[12px] text-[var(--text-muted)]'>Logs</div>
|
||||
<div className='px-2 pb-2 text-[var(--text-muted)] text-caption'>Logs</div>
|
||||
{logRows.map((row) => {
|
||||
const Icon = row.type ? resolveIcon(row.type) : null
|
||||
return (
|
||||
@@ -127,9 +127,9 @@ export function OutputBundle({
|
||||
>
|
||||
{Icon && <Icon className='size-[10px] text-white' />}
|
||||
</div>
|
||||
<span className='truncate text-[13px] text-[var(--text-primary)]'>{row.name}</span>
|
||||
<span className='truncate text-[var(--text-primary)] text-small'>{row.name}</span>
|
||||
{row.duration && (
|
||||
<span className='ml-auto text-[12px] text-[var(--text-muted)]'>
|
||||
<span className='ml-auto text-[var(--text-muted)] text-caption'>
|
||||
{row.duration}
|
||||
</span>
|
||||
)}
|
||||
@@ -140,8 +140,8 @@ export function OutputBundle({
|
||||
|
||||
<div className='flex min-w-0 flex-1 flex-col px-3 py-2'>
|
||||
<div className='flex items-center gap-3 pb-2'>
|
||||
<span className='text-[13px] text-[var(--text-primary)]'>Output</span>
|
||||
<span className='text-[13px] text-[var(--text-muted)]'>Input</span>
|
||||
<span className='text-[var(--text-primary)] text-small'>Output</span>
|
||||
<span className='text-[var(--text-muted)] text-small'>Input</span>
|
||||
<span className='ml-auto flex items-center gap-2 text-[var(--text-subtle)]'>
|
||||
<Search className='size-[12px]' />
|
||||
<Clipboard className='size-[12px]' />
|
||||
|
||||
@@ -325,7 +325,7 @@ export function WorkflowPreview({
|
||||
>
|
||||
<div className='relative min-w-0 flex-1'>
|
||||
<div className='pointer-events-none absolute top-0 right-0 left-0 z-10 flex items-center justify-between px-4 py-3'>
|
||||
<span className='text-[13px] text-[var(--text-muted)]'>{workflow.name}</span>
|
||||
<span className='text-[var(--text-muted)] text-small'>{workflow.name}</span>
|
||||
<button
|
||||
ref={closeButtonRef}
|
||||
type='button'
|
||||
@@ -360,7 +360,7 @@ export function WorkflowPreview({
|
||||
tools={selectedBlock.tools}
|
||||
/>
|
||||
) : (
|
||||
<div className='flex h-full items-center justify-center px-6 text-center text-[13px] text-[var(--text-muted)]'>
|
||||
<div className='flex h-full items-center justify-center px-6 text-center text-[var(--text-muted)] text-small'>
|
||||
Select a block to see its full configuration
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user