From 7615eb6ef6413772f9e883cf2b9d7e51601ac790 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yann=20=E3=82=A4=E3=83=BC=E3=83=99=E3=82=B9=20Eves?= Date: Tue, 18 Jul 2023 12:48:08 +0100 Subject: [PATCH] Component | Crosshair: Add stroke-width CSS variables --- packages/ts/src/components/crosshair/style.ts | 5 ++++- packages/website/docs/auxiliary/Crosshair.mdx | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) 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;` }