# @onewelcome/storybook-addon-basestyling > To have easy configuration of our CSS variables. Latest version **4.1.0** (published 2026-11-05) · MIT license · 0 weekly downloads ## Install ```sh npm install @onewelcome/storybook-addon-basestyling pnpm add @onewelcome/storybook-addon-basestyling yarn add @onewelcome/storybook-addon-basestyling bun add @onewelcome/storybook-addon-basestyling ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 4.1.0 | | Published | 2026-11-05 | | First published | 2023-05-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 247 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | onewelcome | | Maintainers | singhneha, lavanyaalag, tanya_p, lubos-tomsa, jakub.jandak, elias.serneels, ankit-thales, pawel-napieracz, vaisgoel, amit-a.agrawal, tkokasih-thalesgroup, holger.brueckner, gong-thalesgroup, bahari-ilmy, lihzheng87, vlee-thales, dayasakti-2020, binxu.thalesgroup, nikhilthales, shehryar.ahmed, arushi_21, muein.muzamil, grchis, handelbatista, anegapatan, ayushisharma-thales, andreini, niranjan.litu, karolrom-thales, piotr.czarnecki, anamikathales, deepak2002, yannick.gadimi, sachindimri-thales788, thalesankit, rishabh.upadhyay, sahsingh, tri-t.hoang, vikas-i.sharma, tpieczko-ow, matthew.davis, imad.nasr, dzaow, dieter.derouck, mertcanakardere, vladislavsolodki, yastha, pinkar-kumari-thales, shrawan.bhagwat, paulvriens, thalesvvikas, moldovansergiu, gaurav.nath, ercampillo, anmol-qa, nazarenkoexttha, julia_perevozniuk, mammad.jafarzade.thalesgroup, ugur-tankut, prakher93, shashankthales, puneetsingh8510, rashid-siddique, ujjawal673, jcabo, akhanna, himikansal-thales, peter.otruba.thales, ridhima01, jakub.kozusky, prernasha, jevgenija.hozakova, marf_thales, adityasri29, kanhaiya_thales, hitesh-k-ow, olena.chumichova, dharmu-debug, jaffer.sheriff, siddharth.seengal, divyanshuthales0328, syedali07-arch, artisharma, t0318777, lauragozar, twarit, mayank.gupta.03, tkarihei, baaka-thales, mikulas-ruzek-ex-th, ojha_aditi, abhishek-jha-thales, neha29, devanshagarwal2212, kmohit2011, lalit.garg, ayushiarora, rcourgea2, knotek-daniel-thales, gauravthales, t0316590, amadulhaxxan, shrutiag, jpgailla, sampannshukla, vedant-mishra-tg, rkhannaow, t0257634, mgthal, ruudvroon, andrei.bila, kees.trippelvitz, mukulsinghsaini, raishagun12, divyasinghal09, devpulkit95, jan.de-kock.thales, archnaantwal | | Keywords | storybook-addons, basestyling plugin | ## Links - npm: https://www.npmjs.com/package/@onewelcome/storybook-addon-basestyling - Repository: https://gitlab.cpliam.com/iam/oip/storybook-addon-basestyling - npm.io page: https://npm.io/package/@onewelcome/storybook-addon-basestyling ## Recent versions - 4.1.0 (latest) — 2026-11-05 - 4.1.0-experiment.3 — 2026-10-07 - 4.0.1 — 2026-09-04 - 4.0.1-alpha.1 — 2026-09-03 - 4.0.0 — 2026-09-01 - 3.1.0 — 2026-05-26 - 3.0.0 — 2026-04-09 - 3.0.0-alpha.2 — 2026-04-09 - 3.0.0-alpha.1 — 2026-04-09 - 2.2.1 — 2025-02-28 - 2.2.0 — 2024-11-06 - 2.1.0 — 2024-07-23 - 2.0.0 — 2024-06-05 - 1.0.2 — 2024-03-11 - 1.0.1 — 2024-02-12 - … 4 more at https://npm.io/package/@onewelcome/storybook-addon-basestyling/versions ## README # Storybook BaseStyling addon This addon is written so that end-users can easily change global color variables without having to do into the browser' devtools. ## Technical explanation The addon works by exporting the global decorator `withBaseStyling` inside of `src/preset/preview.ts`. This decorator export will be plugged into the `react-lib-component` Storybook instance by adding it to the `addons` array in `main.js` file inside of `/.storybook/main.js`. The `withBaseStyling` decorator creates a [global variable](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-an-addon) called `baseStyling`. On initial render of the `withBaseStyling` decorator, the `.basestyling-wrapper` element with all the `style` variables hasn't loaded yet, so we use a `setTimeout`, which waits `1ms`, to make sure everything is loaded. After everything is loaded we parse all the `style` variables that are added to the `.basestyling-wrapper` element. **This means, that this package WILL BREAK when we add anything else to the `style` attribute of the `.basestyling-wrapper` element.** Currently, there's no other way to easily grab all the CSS variables **dynamically**. We also cannot import the object from our `BaseStyling` component, because Storybook will complain that you're trying to access something **outside** of this addon. We would have to duplicate all the properties and keep updating this package whenever we add a new variable. I wanted it to be dynamic, so for now we're parsing the `.basestyling-wrapper` element's `style` attribute within the `Story`'s `iframe`. After we've parsed all the CSS properties into an object, we update the `baseStyling` global (which works just as state). This is when the addon `Panel` will get filled. If you go into `addon/src/Panel.tsx`, you'll see we import the same `useGlobals` hook. **No, importing it in `PanelContent` does not work, because it's not a direct child that gets rendered inside `manager.ts` perhaps this will change in future versions of Storybook**. We therefor let `PanelContent.tsx` accept two props: * All the actual `baseStyling` props * An `updateProperties` function Inside the `PanelContent.tsx` file we simply have a React state variable that keeps track of all of our table rows. Whenever a property value changes, we execute the `renderContent` function to update all of our table rows. We only trigger a complete update of our `sessionStorage` variable if an `input` fires the `onBlur` event (for performance' sake). As soon as an `onBlur` event gets fired, we fire the `propertyChanged` function that was passed as a prop to `PanelContent.tsx`. If you go back to `Panel.tsx` you see it actually updates the `baseStyling` global variable. Going back to `withBaseStyling.ts` you'll see we have a `useEffect` which listens to any changes made to the `baseStyling` global. If anything changes, we fire the `updateCSSPropertiesOnHTMLElement` function, and pass this `baseStyling` global. We convert the object back to a valid `style` tag value, `JSON.stringify` it, and set it as `sessionStorage`. After that, we fire a custom event called `updated-styling`. The file that actually listens to this event is `/.storybook/preview.js`. There's a `Preview` component which has a `properties` state. This state variable gets used to force the inner `Story` to rerender whenever you change anything inside the `BaseStyling` addon. This is needed, because otherwise the story will always be one step behind in rendering the correct values passed to the `BaseStyling` addon. For example the initial value is `yellow`. If you change the value to `red`, the `sessionStorage` variable will be updated, but the actual story still rendered with the previous `sessionStorage`. So imagine you change the `red` to `blue` now, it'll render with the `red` variable intact. This makes sure the Story and `BaseStyling` addon are synced up properly. ## Development Development for this plugin is quite easy. Either use `yarn` or `npm` for the following commands. ### Installation Go into the `addon` folder and type: ```bash npm install ``` ### Active development For a storybook instance execute: ```bash npm run start ``` To build and watch the addon execute: ```bash npm run build:watch ``` This will rebuild the entire addon whenever you make changes to any files in the `src` directory. You will have to completely **refresh** our the storybook page. There is **no** hot reloading. ### Build for production ```bash npm run build ``` --- _Source: https://npm.io/package/@onewelcome/storybook-addon-basestyling · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._