From 67a11e10cc60fa6bb94e08be269b662fe520fa26 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 19 Dec 2022 10:04:03 -0300 Subject: [PATCH 1/2] feat: add `rt-opacity` css var --- src/components/Tooltip/styles.module.css | 2 +- src/tokens.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/styles.module.css b/src/components/Tooltip/styles.module.css index 559e6ebbc..dcb47d545 100644 --- a/src/components/Tooltip/styles.module.css +++ b/src/components/Tooltip/styles.module.css @@ -31,7 +31,7 @@ .show { visibility: visible; - opacity: 0.9; + opacity: var(--rt-opacity); } /** Types variant **/ diff --git a/src/tokens.css b/src/tokens.css index f43d60182..6d14ee11a 100644 --- a/src/tokens.css +++ b/src/tokens.css @@ -5,4 +5,5 @@ --rt-color-error: #be6464; --rt-color-warning: #f0ad4e; --rt-color-info: #337ab7; + --rt-opacity: 0.9; } From 7f6ed4c60c0cb8b77749a09e98d59cd7aa5cded0 Mon Sep 17 00:00:00 2001 From: gabrieljablonski Date: Mon, 19 Dec 2022 10:10:02 -0300 Subject: [PATCH 2/2] docs: add css variables to "getting started" --- docs/docs/getting-started.mdx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx index bf5c814d1..4ca64e3e4 100644 --- a/docs/docs/getting-started.mdx +++ b/docs/docs/getting-started.mdx @@ -98,4 +98,20 @@ import { Tooltip } from 'react-tooltip' ### Styling -If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css` +If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css`. + +Basic styling can be done by overriding the following css variables. + +```css +:root { + --rt-color-white: #fff; + --rt-color-dark: #222; + --rt-color-success: #8dc572; + --rt-color-error: #be6464; + --rt-color-warning: #f0ad4e; + --rt-color-info: #337ab7; + --rt-opacity: 0.9; +} +``` + +For advanced styling, check [the examples](./examples/styling.mdx).