feat: Expose CSS variables for theming the SwitchField component (#765

)

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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.
 
+# v20.2.0
+
+-   [Feat] Expose CSS variables for theming the `SwitchField` component.
+
 # v20.1.0
 
 -   [Feat] New `Prose` component to style free-form HTML content consistently.

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.8b1ed5da.iframe.bundle.js"></script><script src="vendors~main.6eae3178.iframe.bundle.js"></script><script src="main.5b17ba62.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.8b1ed5da.iframe.bundle.js"></script><script src="vendors~main.44ce8732.iframe.bundle.js"></script><script src="main.233bd9c7.iframe.bundle.js"></script></body></html>

docs/index.html

@@ -56,4 +56,4 @@
 
 
 
-            window['DOCS_MODE'] = false;</script><script src="runtime~main.1ddf0cb1fbc5a28dc85b.manager.bundle.js"></script><script src="vendors~main.fbe5cb2e7c42a5dde98b.manager.bundle.js"></script><script src="main.3a427fb1d7687254a3ff.manager.bundle.js"></script></body></html>
+            window['DOCS_MODE'] = false;</script><script src="runtime~main.967a1490e75c30bed429.manager.bundle.js"></script><script src="vendors~main.ff25b74b26d4b719fdc9.manager.bundle.js"></script><script src="main.880233a3f4fa47c6fa05.manager.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1677608237660,"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}},"features":{"interactionsDebugger":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/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"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"},"@storybook/addon-interactions":{"version":"6.5.15"}}}
+{"generatedAt":1682536241278,"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}},"features":{"interactionsDebugger":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/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"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"},"@storybook/addon-interactions":{"version":"6.5.15"}}}

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "20.1.0",
+    "version": "20.2.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

src/styles/design-tokens.css

@@ -80,7 +80,6 @@
     --reactist-content-danger: rgb(209, 69, 59);
 
     /* component-specific */
-    --reactist-switch-checked: rgb(5, 133, 39);
 
     /* alerts */
     --reactist-alert-tone-info-icon: #1d438c;

src/switch-field/switch-field.module.css

@@ -1,3 +1,9 @@
+:root {
+    --reactist-switch-background: var(--reactist-framework-fill-summit);
+    --reactist-switch-checked: var(--reactist-content-positive);
+    --reactist-switch-toggle: var(--reactist-bg-default);
+}
+
 .container,
 .container * {
     font-family: var(--reactist-font-family);
@@ -28,7 +34,7 @@
     height: var(--tmp-switch-height);
     min-height: auto;
     border-radius: calc(var(--tmp-switch-height) / 2);
-    background-color: var(--reactist-framework-fill-summit);
+    background-color: var(--reactist-switch-background);
     cursor: pointer;
     position: relative;
 }
@@ -49,7 +55,7 @@
     width: var(--tmp-handle-size);
     height: var(--tmp-handle-size);
     border-radius: 50%;
-    background: var(--reactist-bg-default);
+    background: var(--reactist-switch-toggle);
     transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 

src/switch-field/switch-field.stories.mdx

@@ -51,6 +51,18 @@ export function Template({ label, hint, disabled }) {
     return <SwitchField label={label || 'Default label'} hint={hint} disabled={disabled} />
 }
 
+## Colors
+
+The following CSS custom properties are available to customize the SwitchField's appearance. The values appearing below are the default values.
+
+```css
+:root {
+    --reactist-switch-background: rgb(214, 214, 214);
+    --reactist-switch-checked: rgb(5, 133, 39);
+    --reactist-switch-toggle: rgb(255, 255, 255);
+}
+```
+
 ## Accessibility
 
 <Canvas>