16 lines
12 KiB
JavaScript
16 lines
12 KiB
JavaScript
import{U as pe,M as fe}from"./chunk-S4VUQJ4A-927bfcdf.js";import{p as G,j as h}from"./jsx-runtime-88f7af0d.js";import{R as i,r as O}from"./index-f0fbc247.js";import{c as de,O as ge,n as he}from"./index-814d3f3a.js";import{a as be,c as R}from"./_baseSet-db0c20a6.js";import{l as T,d as Q}from"./light-59dc4e88.js";import{S as I,p as U}from"./prism-35f87929.js";import{s as ve}from"./scss-efc2351e.js";import{s as ye}from"./svelte-highlighting-a9ef3a25.js";import{u as V}from"./index-9402fa80.js";import"./iframe-6cba88dd.js";import"../sb-preview/runtime.js";import"./index-d475d2ea.js";import"./_commonjsHelpers-de833af9.js";import"./index-e04ae519.js";import"./index-d37d4223.js";import"./index-356e4a49.js";import"./_getTag-edecb89a.js";import"./isSymbol-50749e90.js";import"./isObject-32699ff3.js";import"./toString-25ea340b.js";function _e(a,o,u){return a==null?a:be(a,o,u)}const xe="_customiser_1k8ya_1",Ee="_colourpicker_1k8ya_63",Y={customiser:xe,colourpicker:Ee};var F={},N={px:{px:1,cm:96/2.54,mm:96/25.4,in:96,pt:96/72,pc:16},cm:{px:2.54/96,cm:1,mm:.1,in:2.54,pt:2.54/72,pc:2.54/6},mm:{px:25.4/96,cm:10,mm:1,in:25.4,pt:25.4/72,pc:25.4/6},in:{px:1/96,cm:1/2.54,mm:1/25.4,in:1,pt:1/72,pc:1/6},pt:{px:.75,cm:72/2.54,mm:72/25.4,in:72,pt:1,pc:12},pc:{px:6/96,cm:6/2.54,mm:6/25.4,in:6,pt:6/72,pc:1},deg:{deg:1,grad:.9,rad:180/Math.PI,turn:360},grad:{deg:400/360,grad:1,rad:200/Math.PI,turn:400},rad:{deg:Math.PI/180,grad:Math.PI/200,rad:1,turn:Math.PI*2},turn:{deg:1/360,grad:1/400,rad:.5/Math.PI,turn:1},s:{s:1,ms:1/1e3},ms:{s:1e3,ms:1},Hz:{Hz:1,kHz:1e3},kHz:{Hz:1/1e3,kHz:1},dpi:{dpi:1,dpcm:1/2.54,dppx:1/96},dpcm:{dpi:2.54,dpcm:1,dppx:2.54/96},dppx:{dpi:96,dpcm:96/2.54,dppx:1}},Se=function(a,o,u,m){if(!N.hasOwnProperty(u))throw new Error("Cannot convert to "+u);if(!N[u].hasOwnProperty(o))throw new Error("Cannot convert from "+o+" to "+u);var f=N[u][o]*a;return m!==!1?(m=Math.pow(10,parseInt(m)||5),Math.round(f*m)/m):f};(function(a){Object.defineProperty(a,"__esModule",{value:!0}),a.fromRgba=w,a.fromRgb=A,a.fromHsla=M,a.fromHsl=J,a.fromString=K,a.default=void 0;var o=m(de),u=m(Se);function m(e){return e&&e.__esModule?e:{default:e}}function f(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function b(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function v(e,n,t){return n&&b(e.prototype,n),t&&b(e,t),e}function d(e,n){return re(e)||te(e,n)||E(e,n)||y()}function y(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
|
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function E(e,n){if(e){if(typeof e=="string")return S(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);if(t==="Object"&&e.constructor&&(t=e.constructor.name),t==="Map"||t==="Set")return Array.from(e);if(t==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return S(e,n)}}function S(e,n){(n==null||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function te(e,n){if(!(typeof Symbol>"u"||!(Symbol.iterator in Object(e)))){var t=[],r=!0,c=!1,l=void 0;try{for(var s=e[Symbol.iterator](),p;!(r=(p=s.next()).done)&&(t.push(p.value),!(n&&t.length===n));r=!0);}catch(g){c=!0,l=g}finally{try{!r&&s.return!=null&&s.return()}finally{if(c)throw l}}return t}}function re(e){if(Array.isArray(e))return e}var D=/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})?$/,z=/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])?$/,L=/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(0|1|0?\.\d+|\d+%))?\s*\)$/,X=/^rgba?\(\s*(\d+)\s+(\d+)\s+(\d+)(?:\s*\/\s*(0|1|0?\.\d+|\d+%))?\s*\)$/,q=/^rgba?\(\s*(\d+%)\s*,\s*(\d+%)\s*,\s*(\d+%)(?:\s*,\s*(0|1|0?\.\d+|\d+%))?\s*\)$/,W=/^rgba?\(\s*(\d+%)\s+(\d+%)\s+(\d+%)(?:\s*\/\s*(0|1|0?\.\d+|\d+%))?\s*\)$/,B=/^hsla?\(\s*(\d+)(deg|rad|grad|turn)?\s*,\s*(\d+)%\s*,\s*(\d+)%(?:\s*,\s*(0|1|0?\.\d+|\d+%))?\s*\)$/;function k(e,n){return e.indexOf(n)>-1}function ae(e,n,t){var r=e/255,c=n/255,l=t/255,s=Math.max(r,c,l),p=Math.min(r,c,l),g=s-p,_=(s+p)/2;if(g===0)return[0,0,_*100];var x=g/(1-Math.abs(2*_-1)),H=function(){switch(s){case r:return(c-l)/g%6;case c:return(l-r)/g+2;default:return(r-c)/g+4}}();return[H*60,x*100,_*100]}function ne(e,n,t){var r=e/60,c=n/100,l=t/100,s=(1-Math.abs(2*l-1))*c,p=s*(1-Math.abs(r%2-1)),g=l-s/2,_=function(){return r<1?[s,p,0]:r<2?[p,s,0]:r<3?[0,s,p]:r<4?[0,p,s]:r<5?[p,0,s]:[s,0,p]}(),x=d(_,3),H=x[0],me=x[1],ue=x[2];return[(H+g)*255,(me+g)*255,(ue+g)*255]}var se=function(){function e(n){var t=d(n,4),r=t[0],c=t[1],l=t[2],s=t[3];f(this,e),this.values=[Math.max(Math.min(parseInt(r,10),255),0),Math.max(Math.min(parseInt(c,10),255),0),Math.max(Math.min(parseInt(l,10),255),0),s==null?1:Math.max(Math.min(parseFloat(s),255),0)]}return v(e,[{key:"toRgbString",value:function(){var t=d(this.values,4),r=t[0],c=t[1],l=t[2],s=t[3];return s===1?"rgb(".concat(r,", ").concat(c,", ").concat(l,")"):"rgba(".concat(r,", ").concat(c,", ").concat(l,", ").concat(s,")")}},{key:"toHslString",value:function(){var t=this.toHslaArray(),r=d(t,4),c=r[0],l=r[1],s=r[2],p=r[3];return p===1?"hsl(".concat(c,", ").concat(l,"%, ").concat(s,"%)"):"hsla(".concat(c,", ").concat(l,"%, ").concat(s,"%, ").concat(p,")")}},{key:"toHexString",value:function(){var t=d(this.values,4),r=t[0],c=t[1],l=t[2],s=t[3];return r=Number(r).toString(16).padStart(2,"0"),c=Number(c).toString(16).padStart(2,"0"),l=Number(l).toString(16).padStart(2,"0"),s=s<1?parseInt(s*255,10).toString(16).padStart(2,"0"):"","#".concat(r).concat(c).concat(l).concat(s)}},{key:"toRgbaArray",value:function(){return this.values}},{key:"toHslaArray",value:function(){var t=d(this.values,4),r=t[0],c=t[1],l=t[2],s=t[3],p=ae(r,c,l),g=d(p,3),_=g[0],x=g[1],H=g[2];return[_,x,H,s]}}]),e}();function w(e){var n=d(e,4),t=n[0],r=n[1],c=n[2],l=n[3];return new se([t,r,c,l])}function A(e){var n=d(e,3),t=n[0],r=n[1],c=n[2];return w([t,r,c,1])}function M(e){var n=d(e,4),t=n[0],r=n[1],c=n[2],l=n[3],s=ne(t,r,c),p=d(s,3),g=p[0],_=p[1],x=p[2];return w([g,_,x,l])}function J(e){var n=d(e,3),t=n[0],r=n[1],c=n[2];return M([t,r,c,1])}function oe(e){var n=D.exec(e)||z.exec(e),t=d(n,5),r=t[1],c=t[2],l=t[3],s=t[4];return r=parseInt(r.length<2?r.repeat(2):r,16),c=parseInt(c.length<2?c.repeat(2):c,16),l=parseInt(l.length<2?l.repeat(2):l,16),s=s&&(parseInt(s.length<2?s.repeat(2):s,16)/255).toPrecision(1)||1,w([r,c,l,s])}function ce(e){var n=L.exec(e)||q.exec(e)||X.exec(e)||W.exec(e),t=d(n,5),r=t[1],c=t[2],l=t[3],s=t[4];return r=k(r,"%")?parseInt(r,10)*255/100:parseInt(r,10),c=k(c,"%")?parseInt(c,10)*255/100:parseInt(c,10),l=k(l,"%")>0?parseInt(l,10)*255/100:parseInt(l,10),s=s===void 0?1:parseFloat(s)/(k(s,"%")?100:1),w([r,c,l,s])}function le(e){var n=B.exec(e),t=d(n,6),r=t[1],c=t[2],l=t[3],s=t[4],p=t[5];return c=c||"deg",r=(0,u.default)(parseFloat(r),c,"deg"),l=parseFloat(l),s=parseFloat(s),p=p===void 0?1:parseFloat(p)/(k(p,"%")?100:1),M([r,l,s,p])}function K(e){return o.default[e]?A(o.default[e]):D.test(e)||z.test(e)?oe(e):L.test(e)||q.test(e)||X.test(e)||W.test(e)?ce(e):B.test(e)?le(e):null}var ie={fromString:K,fromRgb:A,fromRgba:w,fromHsl:J,fromHsla:M};a.default=ie})(F);const we=({colour:a,onChange:o})=>i.createElement("div",{className:Y.colourpicker},i.createElement(ge,{color:F.fromString(a.trim()).toHexString(),onChange:o,alpha:!0,prefixed:!0}),i.createElement(he,{color:F.fromString(a.trim()).toHexString(),onChange:o})),ke=({value:a,onChange:o})=>!/var\(.*\)/i.test(a)&&CSS.supports("color",a)?i.createElement(we,{colour:a,onChange:o}):i.createElement("input",{type:"text",value:a,onChange:u=>o(u.target.value)}),He=({value:a,name:o,map:u,themeName:m,theme:f,setTheme:b})=>{const[v,d]=O.useState(!1),y=E=>{const S=R(f);_e(S,u,E),b(S)};return i.createElement("div",{className:"value"},i.createElement("label",null,i.createElement("div",null,i.createElement("button",{className:v?"open":"",onClick:()=>d(E=>!E)},i.createElement("div",null,i.createElement("span",{className:"material-symbols-outlined"},v?"expand_less":"expand_more"))," ",o))),v&&i.createElement("div",{className:"input-container"},i.createElement(ke,{value:a,key:m+u,onChange:y})))},Z=({value:a,name:o,map:u,themeName:m,setTheme:f,theme:b})=>{const[v,d]=O.useState(!1);return i.createElement("div",{className:"key"},i.createElement("button",{className:v?"open":"",onClick:()=>d(y=>!y)},i.createElement("div",null,i.createElement("span",{className:"material-symbols-outlined"},v?"expand_less":"expand_more"))," ",o),Object.entries(a).map(([y,E])=>{const S={theme:b,setTheme:f,name:y,themeName:m,map:u+"."+y,value:E,key:m+u+y};return v?typeof E=="object"?i.createElement(Z,{...S}):i.createElement(He,{...S}):null}))},Oe=({theme:a,themeName:o,setTheme:u})=>i.createElement("div",{className:Y.customiser},i.createElement("p",null,"Pick parts of the theme to customise:"),Object.entries(a).map(([m,f])=>{const b={theme:a,setTheme:u,themeName:o,name:m,map:m,value:f,key:o+m};return i.createElement(Z,{...b})})),Me="_newtheme_1x4js_1",Te={newtheme:Me},C=a=>a instanceof Date,Ie=a=>Object.keys(a).length===0,P=a=>a!=null&&typeof a=="object",je=(a,...o)=>Object.prototype.hasOwnProperty.call(a,...o),$=a=>P(a)&&Ie(a),Ae=()=>Object.create(null),ee=(a,o)=>a===o?{}:!P(a)||!P(o)?o:C(a)||C(o)?a.valueOf()==o.valueOf()?{}:o:Object.keys(o).reduce((u,m)=>{if(je(a,m)){const f=ee(a[m],o[m]);return $(f)&&!C(f)&&($(a[m])||!$(o[m]))||(u[m]=f),u}return u},Ae());I.registerLanguage("svelte",ye);I.registerLanguage("scss",ve);const Ne=({theme:a,themeName:o})=>{console.log("rerenders NewTheme");const m=ee(o==="light"?T:Q,a),f=a.colour.background!==T.colour.background;return i.createElement("div",{className:Te.newtheme},i.createElement("p",null,"Use the code below to adapt the ",i.createElement("code",null,"Theme")," component for your new design:"),i.createElement(I,{language:"svelte",style:U},`<Theme
|
|
base="${o}"
|
|
theme={${JSON.stringify(m,null,2).replaceAll('"',"'")}}
|
|
>
|
|
<!-- ... -->
|
|
</Theme>
|
|
`),f&&i.createElement(I,{language:"scss",style:U,customStyle:{maxHeight:"140px"}},`// global.scss
|
|
body {
|
|
background-color: ${a.colour.background};
|
|
}`))},Ce={switch:"_switch_xd6eq_1"},$e=({themeName:a,setThemeName:o})=>i.createElement("div",{className:Ce.switch},i.createElement("p",null,"Choose a base theme:"),i.createElement("div",{className:"container"},i.createElement("button",{className:a==="light"?"active":"",onClick:()=>o("light")},i.createElement("span",{className:"material-symbols-outlined"},"light_mode")),i.createElement("button",{className:a==="dark"?"active":"",onClick:()=>o("dark")},i.createElement("span",{className:"material-symbols-outlined"},"dark_mode")))),Re="_themebuilder_13kn1_1",Fe={themebuilder:Re},Pe=a=>{const[o,u]=O.useState("light"),[m,f]=O.useState(R(T));return O.useEffect(()=>{f(R(o==="light"?T:Q))},[o]),i.createElement(pe,null,i.createElement("div",{className:Fe.themebuilder},i.createElement("div",{className:"column"},i.createElement($e,{setThemeName:u,themeName:o}),i.createElement(Oe,{theme:m,setTheme:f,themeName:o,key:o})),i.createElement("div",{className:"column"},i.createElement(Ne,{theme:m,themeName:o}))))};function De(a={}){const{wrapper:o}=Object.assign({},V(),a.components);return o?h.jsx(o,{...a,children:h.jsx(u,{})}):u();function u(){const m=Object.assign({p:"p",img:"img",h1:"h1",code:"code"},V(),a.components);return h.jsxs(h.Fragment,{children:[h.jsx(fe,{title:"Theming/Theme builder",parameters:{...G}}),`
|
|
`,h.jsx(m.p,{children:h.jsx(m.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
|
|
`,h.jsx(m.h1,{id:"theme-builder",children:"Theme builder"}),`
|
|
`,h.jsxs(m.p,{children:["Use this tool to create a custom theme for your page then update the ",h.jsx(m.code,{children:"Theme"})," component in your project."]}),`
|
|
`,h.jsx(Pe,{})]})}}const ze=()=>{throw new Error("Docs-only story")};ze.parameters={docsOnly:!0};const j={title:"Theming/Theme builder",parameters:{...G},tags:["stories-mdx"],includeStories:["__page"]};j.parameters=j.parameters||{};j.parameters.docs={...j.parameters.docs||{},page:De};const lt=["__page"];export{lt as __namedExportsOrder,ze as __page,j as default};
|
|
//# sourceMappingURL=theme-builder.stories-86668f6b.js.map
|