@etchteam/storybook-addon-css-variables-theme/dist/manager.js

Switch CSS files to change themes

import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { PaintBrushIcon } from '@storybook/icons';
import { addons, types, useGlobals, useParameter, useChannel } from '@storybook/manager-api';
import { styled } from '@storybook/theming';
import a, { useEffect } from 'react';

var n="cssVariables",l="No Theme";function k(o){let d=`${o}=`,m=decodeURIComponent(document.cookie).split(";");for(let i=0;i<m.length;i++){let e=m[i];for(;e.startsWith(" ");)e=e.substring(1);if(e.startsWith(d))return e.substring(d.length,e.length)}return null}var $=styled(IconButton)(()=>({display:"inline-flex",alignItems:"center"})),N=styled.div(({theme:o})=>({display:"inline-block",textDecoration:"none",padding:10,fontWeight:o.typography.weight.bold,fontSize:o.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"})),V=()=>{let[o,d]=useGlobals(),h=k(n),m=useParameter(n,{}),{theme:i,defaultTheme:e,files:p}=m,f=p&&Object.hasOwn(p,h)&&h,c=o[n]||i||f,u=t=>{d({[n]:t});},T=useChannel({});useEffect(()=>{c||u(i||f||e);},[c,i,e,f]);function y(t,s){let r=s.indexOf(l)>-1?l:s;u(r),T(`${n}Change`,{id:r}),t();}function g(t,s,r){return {id:t,title:t||l,onClick:()=>y(r,t),active:s}}function x(t,s){let r=Object.keys(t).map(b=>g(b,b===c,s));return c!==l&&!e&&r.unshift(g(l,!1,s)),r}return p?a.createElement(WithTooltip,{placement:"top",trigger:"click",tooltip:({onHide:t})=>a.createElement(TooltipLinkList,{links:x(p,t)})},a.createElement($,{key:"css themes",title:"CSS custom properties themes",active:Object.hasOwn(p,c)},a.createElement(PaintBrushIcon,null),a.createElement(N,{title:"Theme"},c||"No theme"))):null};addons.register(n,()=>{addons.add(n,{title:"CSS Variables Theme",type:types.TOOL,match:({viewMode:o})=>!!o?.match(/^(story|docs)$/),render:()=>a.createElement(V,null)});});
//# sourceMappingURL=out.js.map
//# sourceMappingURL=manager.js.map