diff --git a/packages/ts/src/components/crosshair/style.ts b/packages/ts/src/components/crosshair/style.ts index 64a297e33..4dca8a19e 100644 --- a/packages/ts/src/components/crosshair/style.ts +++ b/packages/ts/src/components/crosshair/style.ts @@ -3,7 +3,9 @@ import { css, injectGlobal } from '@emotion/css' export const globalStyles = injectGlobal` :root { --vis-crosshair-line-stroke-color: #888; + --vis-crosshair-line-stroke-width: 1px; --vis-crosshair-circle-stroke-color: #fff; + --vis-crosshair-circle-stroke-width: 1px; } ` @@ -13,13 +15,14 @@ export const root = css` export const line = css` stroke: var(--vis-crosshair-line-stroke-color); + stroke-width: var(--vis-crosshair-line-stroke-width); stroke-opacity: 1; pointer-events: none; ` export const circle = css` stroke: var(--vis-crosshair-circle-stroke-color); - stroke-width: 1; + stroke-width: var(--vis-crosshair-circle-stroke-width); stroke-opacity: 0.75; pointer-events: none; ` diff --git a/packages/website/docs/auxiliary/Crosshair.mdx b/packages/website/docs/auxiliary/Crosshair.mdx index 77243b621..3db407a2f 100644 --- a/packages/website/docs/auxiliary/Crosshair.mdx +++ b/packages/website/docs/auxiliary/Crosshair.mdx @@ -75,7 +75,9 @@ The _Crosshair_ component supports additional styling via CSS variables that you All supported CSS variables and their default values { `--vis-crosshair-line-stroke-color: #888; ---vis-crosshair-circle-stroke-color: #fff;` +--vis-crosshair-line-stroke-width: 1px; +--vis-crosshair-circle-stroke-color: #fff; +--vis-crosshair-circle-stroke-width: 1px;` }