breaking: Allow to customize the TextLink styles via CSS variables (#710

)

CHANGELOG.md

@@ -2,15 +2,19 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v17.0.0
+
+-   [Breaking] Allow to customize the TextLink styles (color and text-decoration) via CSS variables
+
 # v16.1.0
 
 -   [Build] Add support for Node v18 and npm v9
 
 # v16.0.0
 
--   [Breaking] The `Notification` component is renamed as `DeprecatedNotification`.
--   [Feat] The `Box` component now supports a new `background="toast"`.
--   [Feat] A new `Toast` component and `useToasts` hook.
+-   [Breaking] The `Notification` component is renamed as `DeprecatedNotification`
+-   [Feat] The `Box` component now supports a new `background="toast"`
+-   [Feat] A new `Toast` component and `useToasts` hook
 -   [Fix] Sets `Badge` to semibold
 
 # v15.3.0

docs/iframe.html

@@ -476,4 +476,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.ad83b813.iframe.bundle.js"></script><script src="vendors~main.f9e1586a.iframe.bundle.js"></script><script src="main.3617f90b.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.ad83b813.iframe.bundle.js"></script><script src="vendors~main.f9e1586a.iframe.bundle.js"></script><script src="main.271f1227.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1667912308686,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.2"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/react":{"version":"6.5.3"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"}}}
+{"generatedAt":1668170297049,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.2"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/react":{"version":"6.5.3"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"}}}

package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <[email protected]> (http://doist.com)",
-    "version": "16.1.0",
+    "version": "17.0.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

src/new-components/box/box.module.css

@@ -350,16 +350,19 @@ pre.box {
 .bg-selected {
     background-color: var(--reactist-bg-selected);
 }
+
+/* toasts background-color requires more customization as it features an inverted (dark) background, even in light mode */
 .bg-toast {
+    background-color: var(--reactist-bg-toast);
     --reactist-content-primary: var(--reactist-content-toast);
+    --reactist-text-link-idle-tint: var(--reactist-content-primary);
+    --reactist-text-link-idle-decoration: var(--reactist-text-link-hover-decoration);
     --reactist-actionable-tertiary-idle-tint: var(--reactist-toast-actionable-primary-tint);
     --reactist-actionable-tertiary-hover-tint: var(--reactist-toast-actionable-primary-tint);
     --reactist-actionable-tertiary-hover-fill: var(--reactist-toast-actionable-hover-fill);
     --reactist-actionable-quaternary-idle-tint: var(--reactist-toast-actionable-secondary-tint);
     --reactist-actionable-quaternary-hover-tint: var(--reactist-toast-actionable-secondary-tint);
     --reactist-actionable-quaternary-hover-fill: var(--reactist-toast-actionable-hover-fill);
-    --reactist-text-link-color: var(--reactist-toast-actionable-primary-tint);
-    background-color: var(--reactist-bg-toast);
 }
 
 /* border radius */

src/new-components/text-link/text-link.module.css

@@ -1,18 +1,22 @@
 :root {
-    --reactist-text-link-color: rgb(36, 111, 224);
+    --reactist-text-link-idle-tint: rgb(36, 111, 224);
+    --reactist-text-link-hover-tint: var(--reactist-text-link-idle-tint);
+    --reactist-text-link-idle-decoration: none;
+    --reactist-text-link-hover-decoration: underline;
 }
 
 .container {
     font-size: inherit;
     font-weight: inherit;
     font-family: inherit;
-    text-decoration: none;
-    color: var(--reactist-text-link-color);
+    text-decoration: var(--reactist-text-link-idle-decoration);
+    color: var(--reactist-text-link-idle-tint);
     cursor: pointer;
 }
 
 .container:hover {
-    text-decoration: underline;
+    text-decoration: var(--reactist-text-link-hover-decoration);
+    color: var(--reactist-text-link-hover-tint);
 }
 
 .container svg {