PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/assets/icons/icon
History
alex d6085e4ea6
[3/3] Highlighter styling (#1490) 
This PR finalises the highlighter shape with new colors, sizing, and
perfect freehand options.

The colors are based on our existing colour palette, but take advantage
of wide-gamut displays to make the highlighter highlightier. I used my
[oklch color palette tool to pick the
palette](https://alex.dytry.ch/toys/palette/?palette=%7B%22families%22:%5B%22black%22,%22grey%22,%22white%22,%22green%22,%22light-green%22,%22blue%22,%22light-blue%22,%22violet%22,%22light-violet%22,%22red%22,%22light-red%22,%22orange%22,%22yellow%22%5D,%22shades%22:%5B%22light-mode%22,%22dark-mode%22,%22hl-light%22,%22hl-dark%22%5D,%22colors%22:%5B%5B%5B0.2308,0,null%5D,%5B0.9097,0,null%5D,%5B0.2308,0,null%5D,%5B0.2308,0,null%5D%5D,%5B%5B0.7692,0.0145,248.02%5D,%5B0.6778,0.0118,256.72%5D,%5B0.7692,0.0145,248.02%5D,%5B0.7692,0.0145,248.02%5D%5D,%5B%5B1,0,null%5D,%5B0.2308,0,null%5D,%5B1,0,null%5D,%5B1,0,null%5D%5D,%5B%5B0.5851,0.1227,164.1%5D,%5B0.5319,0.0811,162.23%5D,%5B0.8729,0.2083,173.3%5D,%5B0.5851,0.152,173.3%5D%5D,%5B%5B0.7146,0.1835,146.44%5D,%5B0.6384,0.1262,143.36%5D,%5B0.8603,0.2438,140.11%5D,%5B0.6082,0.2286,140.11%5D%5D,%5B%5B0.5566,0.2082,268.35%5D,%5B0.4961,0.1644,270.65%5D,%5B0.7158,0.173,243.85%5D,%5B0.5573,0.178,243.85%5D%5D,%5B%5B0.718,0.1422,246.06%5D,%5B0.6366,0.1055,250.98%5D,%5B0.8615,0.1896,200.03%5D,%5B0.707,0.161,200.03%5D%5D,%5B%5B0.5783,0.2186,319.15%5D,%5B0.5043,0.1647,315.37%5D,%5B0.728,0.2001,307.45%5D,%5B0.5433,0.2927,307.45%5D%5D,%5B%5B0.7904,0.1516,319.77%5D,%5B0.6841,0.1139,315.99%5D,%5B0.812,0.21,327.8%5D,%5B0.5668,0.281,327.8%5D%5D,%5B%5B0.5928,0.2106,26.53%5D,%5B0.5112,0.1455,26.18%5D,%5B0.7326,0.21,20.59%5D,%5B0.554,0.2461,20.59%5D%5D,%5B%5B0.7563,0.146,21.1%5D,%5B0.6561,0.0982,20.86%5D,%5B0.7749,0.178,6.8%5D,%5B0.5565,0.2454,6.8%5D%5D,%5B%5B0.6851,0.1954,44.57%5D,%5B0.5958,0.1366,46.6%5D,%5B0.8207,0.175,68.62%5D,%5B0.6567,0.164,68.61%5D%5D,%5B%5B0.8503,0.1149,68.95%5D,%5B0.7404,0.0813,72.25%5D,%5B0.8939,0.2137,100.36%5D,%5B0.7776,0.186,100.36%5D%5D%5D%7D&selected=3).
I'm not sure happy about these colors as they are right now - in
particular, i think dark mode looks a bit rubbish and there are a few
colors where the highlight and original version are much too similar
(light-violet & light-red). Black uses yellow (like note shape) and grey
uses light-blue. Exports are forced into srgb color space rather than P3
for maximum compatibility.


![image](https://github.com/tldraw/tldraw/assets/1489520/e3de762b-6ef7-4d17-87db-3e2b71dd8de1)


![image](https://github.com/tldraw/tldraw/assets/1489520/3bd90aa9-bdbc-4a2b-9e56-e3a83a2a877b)



The size of a highlighter stroke is now based on the text size which
works nicely for making the highlighter play well with text:


![image](https://github.com/tldraw/tldraw/assets/1489520/dd3184fc-decd-4db5-90ce-e9cc75edd3d6)


Perfect freehands settings are very similar to the draw tool, but with
the thinning turned way down. There is still some, but it's pretty
minimal.

### The plan
1. initial highlighter shape/tool #1401 
2. sandwich rendering for highlighter shapes #1418
3. shape styling - new colours and sizes, lightweight perfect freehand
changes #1490 **>you are here<**

### Change Type
- [x] `minor` — New Feature

### Test Plan

1. You can find the highlighter tool in the extended toolbar
2. You can activate the highlighter tool by pressing shift-D
3. Highlighter draws nice and vibrantly when over the page background or
frame background
4. Highlighter is less vibrant but still visible when drawn over images
/ other fills
5. Highlighter size should nicely match the corresponding unscaled text
size
6. Exports with highlighter look as expected

### Release Notes

Highlighter pen is here! 🎉🎉🎉

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 15:34:59 +00:00
..
align-bottom-center.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-bottom-left.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-bottom-right.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-bottom.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-center-center.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-center-horizontal.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-center-left.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-center-right.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-center-vertical.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-left.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-right.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-top-center.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-top-left.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-top-right.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
align-top.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrow-left.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrowhead-arrow.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrowhead-bar.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrowhead-diamond.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrowhead-dot.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrowhead-none.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrowhead-square.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrowhead-triangle-inverted.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
arrowhead-triangle.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
aspect-ratio.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
avatar.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
blob.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
bring-forward.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
bring-to-front.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
check.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
checkbox-checked.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
checkbox-empty.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
chevron-down.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
chevron-left.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
chevron-right.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
chevron-up.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
chevrons-ne.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
chevrons-sw.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
clipboard-copied.svg open menus refactor (#1400) 2023-05-17 14:30:28 +00:00
clipboard-copy.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
code.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
collab.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
color.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
comment.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
cross-2.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
cross.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
dash-dashed.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
dash-dotted.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
dash-draw.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
dash-solid.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
discord.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
distribute-horizontal.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
distribute-vertical.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
dot.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
dots-horizontal.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
dots-vertical.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
drag-handle-dots.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
duplicate.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
edit.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
external-link.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
file.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
fill-none.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
fill-pattern.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
fill-semi.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
fill-solid.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
follow.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
following.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
font-draw.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
font-mono.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
font-sans.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
font-serif.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-arrow-down.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-arrow-left.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-arrow-right.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-arrow-up.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-check-box.svg [feature] check-box geo shape (#1330) 2023-05-09 13:32:04 +00:00
geo-diamond.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-ellipse.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-hexagon.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-octagon.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-oval.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-pentagon.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-rectangle.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-rhombus-2.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-rhombus.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-star.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-trapezoid.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-triangle.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
geo-x-box.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
github.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
group.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
hidden.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
image.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
info-circle.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
leading.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
link.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
lock-small.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
lock.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
menu.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
minus.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
mixed.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
pack.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
page.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
plus.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
question-mark-circle.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
question-mark.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
redo.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
reset-zoom.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
rotate-ccw.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
rotate-cw.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
ruler.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
search.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
send-backward.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
send-to-back.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
settings-horizontal.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
settings-vertical-1.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
settings-vertical.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
share-1.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
share-2.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
size-extra-large.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
size-large.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
size-medium.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
size-small.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
spline-cubic.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
spline-line.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
stack-horizontal.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
stack-vertical.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
stretch-horizontal.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
stretch-vertical.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
text-align-center.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
text-align-justify.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
text-align-left.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
text-align-right.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-arrow.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-embed.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-eraser.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-frame.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-hand.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-highlight.svg [3/3] Highlighter styling (#1490) 2023-06-01 15:34:59 +00:00
tool-laser.svg [feature] add laser pointer (#1412) 2023-05-19 11:09:13 +00:00
tool-line.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-media.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-note.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-pencil.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-pointer.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
tool-text.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
trash.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
triangle-down.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
triangle-up.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
twitter.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
undo.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
ungroup.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
unlock-small.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
unlock.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
vertical-align-center.svg Vertical text alignment for geo shapes (#1414) 2023-05-19 10:23:43 +00:00
vertical-align-end.svg Vertical text alignment for geo shapes (#1414) 2023-05-19 10:23:43 +00:00
vertical-align-start.svg Vertical text alignment for geo shapes (#1414) 2023-05-19 10:23:43 +00:00
visible.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
warning-triangle.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
zoom-in.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00
zoom-out.svg transfer-out: transfer out 2023-04-25 12:01:25 +01:00