fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-28 12:58:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update UI widget designs to improve color consistency and add a narrow height mode

Browse Source
This commit is contained in:
Keavon Chambers
2025-09-08 21:48:22 -07:00
parent 485152bf8d
commit 22aa8c1264
41 changed files with 364 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/widgets/buttons/TextButton.svelte
+9 -2
View File
@@ -18,6 +18,7 @@
export let flush = false;
export let minWidth = 0;
export let disabled = false;
export let narrow = false;
export let tooltip: string | undefined = undefined;
export let menuListChildren: MenuListEntry[][] | undefined = undefined;
@@ -54,6 +55,7 @@
class:hover-icon={hoverIcon && !disabled}
class:emphasized
class:disabled
class:narrow
class:flush
style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
title={tooltip}
@@ -99,7 +101,7 @@
align-items: center;
flex: 0 0 auto;
white-space: nowrap;
height: 24px;
height: var(--widget-height);
margin: 0;
padding: 0 8px;
box-sizing: border-box;
@@ -107,8 +109,13 @@
border-radius: 2px;
background: var(--button-background-color);
color: var(--button-text-color);
--button-background-color: var(--color-5-dullgray);
--button-background-color: var(--color-4-dimgray);
--button-text-color: var(--color-e-nearwhite);
--widget-height: 24px;
&.narrow.narrow {
--widget-height: 20px;
}
&:hover,
&.open {