From 66c67660f94b36e9d47f5f88619723d16860c7dc Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 28 Oct 2026 14:27:51 +0100 Subject: [PATCH] :recycle: Use DS typographies in the debug shape panel and drop a dead selector (#12650) * :fire: Remove a commented-out selector from the debug shape panel .shape-info-title was left commented out with a "check by hand" TODO in #12484. Nothing uses it, so delete it instead of keeping it as a comment. AI-assisted-by: claude-opus-5-5 * :recycle: Use DS typographies in the debug shape panel The panel text and the shape title only set a font size, with a "no exact DS typography match" TODO. body-small and body-medium differ from them only in the line-height, so use them directly and drop the TODOs. Visible change: the panel lines get the DS line-height (1.3 for the text, 1.4 for the shape title) instead of the browser default, so rows grow a little taller. The panel is debug-only. AI-assisted-by: claude-opus-5-5 --- .../ui/workspace/sidebar/debug_shape_info.scss | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss index 9f770611f7..27ef6f4b32 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss @@ -5,6 +5,7 @@ // Copyright (c) KALEIDOS SUBSIDIARY SL @use "ds/_borders.scss" as *; +@use "ds/typography.scss" as t; @use "ds/_utils.scss" as *; .shape-info { @@ -13,26 +14,19 @@ background-color: var(--color-background-primary); color: var(--color-foreground-primary); - // TODO: No exact DS typography match found. - // Closest match: body-small. - font-size: px2rem(12); + @include t.use-typography("body-small"); + user-select: text; } -// TODO: Unused in debug_shape_info.cljs; check by hand before removing. -// .shape-info-title { -// margin: var(--sp-s) var(--sp-s) 0 var(--sp-s); -// } - .attrs-container { padding: var(--sp-l) var(--sp-s); overflow: hidden; } .shape-title { - // TODO: No exact DS typography match found. - // Closest match: body-medium. - font-size: px2rem(14); + @include t.use-typography("body-medium"); + background: var(--color-background-quaternary); color: var(--color-foreground-primary); padding: var(--sp-s);