New app icon, brand yellow, and bar-icon size compensation
- Replace the mark with OffScaleAppIcon.png, run through the same pipeline as before: trim the transparent margin, pad to square, scale to 256x256 (654 KB -> 62 KB). One asset, two render sites. - Retune the accent to #FCC001, the modal hexagon fill of the new icon. Sampled from fully-opaque pixels only — the yellows cluster at 252,192-196,1-2, so this is the flat colour and not an antialiased edge. (`magick -alpha off` flattens onto black and gives a wrong answer here.) Replaces #FAE204 from the previous logo, which was noticeably greener. All three yellows — the bar's tailnet label, the active connection name, and the IP/DNS subtitle — resolve through root.accent, so this is one value. - Hold the bar mark at 32px now that shell base-size is 24 rather than 20. Every size in the shell is a multiple of fontScale, so raising base-size to enlarge the stock bar icons would have scaled this one identically and left the relative gap unchanged; the icon/canvas/slot values are scaled down to compensate. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -29,12 +29,17 @@ Panel {
|
||||
readonly property color urgent: bar ? bar.urgent : Color.urgent
|
||||
readonly property color dim: Qt.darker(foreground, 1.55)
|
||||
|
||||
// Brand yellow, sampled as the dominant opaque colour of offscale-logo.png.
|
||||
// Used for exactly one thing: the IP / DNS subtitle under each machine, at
|
||||
// full strength. Stock renders that line through `dim`, but darkening yellow
|
||||
// shifts its hue to olive (#A19203) rather than merely quietening it, so it
|
||||
// gets the flat accent instead. Icons stay on the themed foreground.
|
||||
readonly property color accent: "#FAE204"
|
||||
// Brand yellow: the modal fill of the hexagons in OffScaleAppIcon.png,
|
||||
// sampled from fully-opaque pixels only (the cluster sits at 252,192-196,1-2,
|
||||
// so this is the flat colour rather than an antialiased edge). Replaced
|
||||
// #FAE204, which came from the previous logo and was noticeably greener.
|
||||
//
|
||||
// Everything yellow in the plugin resolves through here: the tailnet label in
|
||||
// the bar, the active connection's name, and the IP / DNS subtitle under each
|
||||
// machine. That subtitle takes the accent flat rather than through `dim`,
|
||||
// because darkening yellow shifts its hue to olive rather than quietening it.
|
||||
// Icons stay on the themed foreground.
|
||||
readonly property color accent: "#FCC001"
|
||||
readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
|
||||
readonly property bool showConnections: tailscale.accounts.length > 1 || tailscale.accountsAccessDenied
|
||||
readonly property bool showPeers: tailscale.active && tailscale.peers.length > 0
|
||||
@@ -438,8 +443,8 @@ Panel {
|
||||
// Style.bar.iconCanvas (16 * fontScale ~= 27px here). Growing iconSize
|
||||
// alone can't get past that box, so widen the canvas first. slotSize is
|
||||
// raised to match so the widget still reserves room for it in the bar.
|
||||
opticalSize: Style.space(21)
|
||||
slotSize: Style.space(23)
|
||||
opticalSize: Style.space(18)
|
||||
slotSize: Style.space(19)
|
||||
iconComponent: Component {
|
||||
Item {
|
||||
OffscaleIcon {
|
||||
@@ -447,7 +452,7 @@ Panel {
|
||||
// Stock was space(11) = 18px at base-size 20 — noticeably smaller
|
||||
// than the neighbouring widgets. space(19) ~= 32px, inside the
|
||||
// widened canvas above. centerIn means it grows from the centre.
|
||||
iconSize: Style.space(19)
|
||||
iconSize: Style.space(16)
|
||||
color: root.barIconColor
|
||||
badgeColor: root.urgent
|
||||
crossed: !tailscale.active && !tailscale.needsLogin
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 61 KiB |
Reference in New Issue
Block a user