github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-29 05:50:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Use DS typographies in the debug shape panel and drop a dead selector (#12650)

Browse Source 
* 🔥 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

* ♻️ 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
This commit is contained in:
Eva Marco 2026-10-28 14:27:51 +01:00 committed by GitHub
parent e308c2eca6
commit 66c67660f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss
View File

@ -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);