d6085e4ea6
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>
232 lines
4.9 KiB
TypeScript
232 lines
4.9 KiB
TypeScript
// This file is automatically generated by scripts/refresh-assets.ts.
|
|
// Do not edit manually.
|
|
|
|
type AssetUrl = string | { src: string }
|
|
type AssetUrlOptions = { baseUrl?: string } | ((assetUrl: string) => string)
|
|
|
|
export function getAssetUrlsByImport(opts?: AssetUrlOptions): {
|
|
fonts: {
|
|
monospace: string
|
|
sansSerif: string
|
|
serif: string
|
|
draw: string
|
|
}
|
|
icons: {
|
|
'align-bottom-center': string
|
|
'align-bottom-left': string
|
|
'align-bottom-right': string
|
|
'align-bottom': string
|
|
'align-center-center': string
|
|
'align-center-horizontal': string
|
|
'align-center-left': string
|
|
'align-center-right': string
|
|
'align-center-vertical': string
|
|
'align-left': string
|
|
'align-right': string
|
|
'align-top-center': string
|
|
'align-top-left': string
|
|
'align-top-right': string
|
|
'align-top': string
|
|
'arrow-left': string
|
|
'arrowhead-arrow': string
|
|
'arrowhead-bar': string
|
|
'arrowhead-diamond': string
|
|
'arrowhead-dot': string
|
|
'arrowhead-none': string
|
|
'arrowhead-square': string
|
|
'arrowhead-triangle-inverted': string
|
|
'arrowhead-triangle': string
|
|
'aspect-ratio': string
|
|
avatar: string
|
|
blob: string
|
|
'bring-forward': string
|
|
'bring-to-front': string
|
|
check: string
|
|
'checkbox-checked': string
|
|
'checkbox-empty': string
|
|
'chevron-down': string
|
|
'chevron-left': string
|
|
'chevron-right': string
|
|
'chevron-up': string
|
|
'chevrons-ne': string
|
|
'chevrons-sw': string
|
|
'clipboard-copied': string
|
|
'clipboard-copy': string
|
|
code: string
|
|
collab: string
|
|
color: string
|
|
comment: string
|
|
'cross-2': string
|
|
cross: string
|
|
'dash-dashed': string
|
|
'dash-dotted': string
|
|
'dash-draw': string
|
|
'dash-solid': string
|
|
discord: string
|
|
'distribute-horizontal': string
|
|
'distribute-vertical': string
|
|
dot: string
|
|
'dots-horizontal': string
|
|
'dots-vertical': string
|
|
'drag-handle-dots': string
|
|
duplicate: string
|
|
edit: string
|
|
'external-link': string
|
|
file: string
|
|
'fill-none': string
|
|
'fill-pattern': string
|
|
'fill-semi': string
|
|
'fill-solid': string
|
|
follow: string
|
|
following: string
|
|
'font-draw': string
|
|
'font-mono': string
|
|
'font-sans': string
|
|
'font-serif': string
|
|
'geo-arrow-down': string
|
|
'geo-arrow-left': string
|
|
'geo-arrow-right': string
|
|
'geo-arrow-up': string
|
|
'geo-check-box': string
|
|
'geo-diamond': string
|
|
'geo-ellipse': string
|
|
'geo-hexagon': string
|
|
'geo-octagon': string
|
|
'geo-oval': string
|
|
'geo-pentagon': string
|
|
'geo-rectangle': string
|
|
'geo-rhombus-2': string
|
|
'geo-rhombus': string
|
|
'geo-star': string
|
|
'geo-trapezoid': string
|
|
'geo-triangle': string
|
|
'geo-x-box': string
|
|
github: string
|
|
group: string
|
|
hidden: string
|
|
image: string
|
|
'info-circle': string
|
|
leading: string
|
|
link: string
|
|
'lock-small': string
|
|
lock: string
|
|
menu: string
|
|
minus: string
|
|
mixed: string
|
|
pack: string
|
|
page: string
|
|
plus: string
|
|
'question-mark-circle': string
|
|
'question-mark': string
|
|
redo: string
|
|
'reset-zoom': string
|
|
'rotate-ccw': string
|
|
'rotate-cw': string
|
|
ruler: string
|
|
search: string
|
|
'send-backward': string
|
|
'send-to-back': string
|
|
'settings-horizontal': string
|
|
'settings-vertical-1': string
|
|
'settings-vertical': string
|
|
'share-1': string
|
|
'share-2': string
|
|
'size-extra-large': string
|
|
'size-large': string
|
|
'size-medium': string
|
|
'size-small': string
|
|
'spline-cubic': string
|
|
'spline-line': string
|
|
'stack-horizontal': string
|
|
'stack-vertical': string
|
|
'stretch-horizontal': string
|
|
'stretch-vertical': string
|
|
'text-align-center': string
|
|
'text-align-justify': string
|
|
'text-align-left': string
|
|
'text-align-right': string
|
|
'tool-arrow': string
|
|
'tool-embed': string
|
|
'tool-eraser': string
|
|
'tool-frame': string
|
|
'tool-hand': string
|
|
'tool-highlight': string
|
|
'tool-laser': string
|
|
'tool-line': string
|
|
'tool-media': string
|
|
'tool-note': string
|
|
'tool-pencil': string
|
|
'tool-pointer': string
|
|
'tool-text': string
|
|
trash: string
|
|
'triangle-down': string
|
|
'triangle-up': string
|
|
twitter: string
|
|
undo: string
|
|
ungroup: string
|
|
'unlock-small': string
|
|
unlock: string
|
|
'vertical-align-center': string
|
|
'vertical-align-end': string
|
|
'vertical-align-start': string
|
|
visible: string
|
|
'warning-triangle': string
|
|
'zoom-in': string
|
|
'zoom-out': string
|
|
}
|
|
translations: {
|
|
ar: string
|
|
ca: string
|
|
da: string
|
|
de: string
|
|
en: string
|
|
es: string
|
|
fa: string
|
|
fi: string
|
|
fr: string
|
|
gl: string
|
|
he: string
|
|
'hi-in': string
|
|
hu: string
|
|
it: string
|
|
ja: string
|
|
'ko-kr': string
|
|
ku: string
|
|
languages: string
|
|
main: string
|
|
my: string
|
|
ne: string
|
|
no: string
|
|
pl: string
|
|
'pt-br': string
|
|
'pt-pt': string
|
|
ro: string
|
|
ru: string
|
|
sv: string
|
|
te: string
|
|
th: string
|
|
tr: string
|
|
uk: string
|
|
vi: string
|
|
'zh-cn': string
|
|
'zh-tw': string
|
|
}
|
|
embedIcons: {
|
|
codepen: string
|
|
codesandbox: string
|
|
excalidraw: string
|
|
felt: string
|
|
figma: string
|
|
github_gist: string
|
|
google_calendar: string
|
|
google_maps: string
|
|
google_slides: string
|
|
observable: string
|
|
replit: string
|
|
scratch: string
|
|
spotify: string
|
|
tldraw: string
|
|
vimeo: string
|
|
youtube: string
|
|
}
|
|
}
|