tldraw/packages/assets/imports.d.ts
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

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
}
}