16 lines
12 KiB
JavaScript
16 lines
12 KiB
JavaScript
import{U as fe,M as de}from"./chunk-S4VUQJ4A-78bc21fa.js";import{p as G,j as h}from"./jsx-runtime-fdd5b7e7.js";import{R as i,r as T}from"./index-97378e4d.js";import{c as ge,O as he,n as be}from"./index-d395facf.js";import{a as ve,c as F}from"./_baseSet-db0c20a6.js";import{C as ye}from"./Table-9bf7f327.js";import{f as _e,l as j,d as Q}from"./light-fcb352a5.js";import{S as I,p as U}from"./prism-f940545c.js";import{s as xe}from"./scss-efc2351e.js";import{s as Ee}from"./svelte-highlighting-a9ef3a25.js";import{u as Z}from"./index-73bd681b.js";import"./iframe-6011e6c3.js";import"../sb-preview/runtime.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 Se(r,s,u){return r==null?r:ve(r,s,u)}const ke="_customiser_1k8ya_1",we="_colourpicker_1k8ya_63",ee={customiser:ke,colourpicker:we};var P={},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}},Oe=function(r,s,u,m){if(!N.hasOwnProperty(u))throw new Error("Cannot convert to "+u);if(!N[u].hasOwnProperty(s))throw new Error("Cannot convert from "+s+" to "+u);var f=N[u][s]*r;return m!==!1?(m=Math.pow(10,parseInt(m)||5),Math.round(f*m)/m):f};(function(r){Object.defineProperty(r,"__esModule",{value:!0}),r.fromRgba=k,r.fromRgb=A,r.fromHsla=M,r.fromHsl=J,r.fromString=K,r.default=void 0;var s=m(ge),u=m(Oe);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 a=n[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function v(e,n,t){return n&&b(e.prototype,n),t&&b(e,t),e}function d(e,n){return ae(e)||H(e,n)||S(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 S(e,n){if(e){if(typeof e=="string")return _(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 _(e,n)}}function _(e,n){(n==null||n>e.length)&&(n=e.length);for(var t=0,a=new Array(n);t<n;t++)a[t]=e[t];return a}function H(e,n){if(!(typeof Symbol>"u"||!(Symbol.iterator in Object(e)))){var t=[],a=!0,c=!1,l=void 0;try{for(var o=e[Symbol.iterator](),p;!(a=(p=o.next()).done)&&(t.push(p.value),!(n&&t.length===n));a=!0);}catch(g){c=!0,l=g}finally{try{!a&&o.return!=null&&o.return()}finally{if(c)throw l}}return t}}function ae(e){if(Array.isArray(e))return e}var z=/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})?$/,L=/^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])?$/,X=/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*(0|1|0?\.\d+|\d+%))?\s*\)$/,q=/^rgba?\(\s*(\d+)\s+(\d+)\s+(\d+)(?:\s*\/\s*(0|1|0?\.\d+|\d+%))?\s*\)$/,V=/^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 w(e,n){return e.indexOf(n)>-1}function ne(e,n,t){var a=e/255,c=n/255,l=t/255,o=Math.max(a,c,l),p=Math.min(a,c,l),g=o-p,x=(o+p)/2;if(g===0)return[0,0,x*100];var E=g/(1-Math.abs(2*x-1)),O=function(){switch(o){case a:return(c-l)/g%6;case c:return(l-a)/g+2;default:return(a-c)/g+4}}();return[O*60,E*100,x*100]}function se(e,n,t){var a=e/60,c=n/100,l=t/100,o=(1-Math.abs(2*l-1))*c,p=o*(1-Math.abs(a%2-1)),g=l-o/2,x=function(){return a<1?[o,p,0]:a<2?[p,o,0]:a<3?[0,o,p]:a<4?[0,p,o]:a<5?[p,0,o]:[o,0,p]}(),E=d(x,3),O=E[0],ue=E[1],pe=E[2];return[(O+g)*255,(ue+g)*255,(pe+g)*255]}var oe=function(){function e(n){var t=d(n,4),a=t[0],c=t[1],l=t[2],o=t[3];f(this,e),this.values=[Math.max(Math.min(parseInt(a,10),255),0),Math.max(Math.min(parseInt(c,10),255),0),Math.max(Math.min(parseInt(l,10),255),0),o==null?1:Math.max(Math.min(parseFloat(o),255),0)]}return v(e,[{key:"toRgbString",value:function(){var t=d(this.values,4),a=t[0],c=t[1],l=t[2],o=t[3];return o===1?"rgb(".concat(a,", ").concat(c,", ").concat(l,")"):"rgba(".concat(a,", ").concat(c,", ").concat(l,", ").concat(o,")")}},{key:"toHslString",value:function(){var t=this.toHslaArray(),a=d(t,4),c=a[0],l=a[1],o=a[2],p=a[3];return p===1?"hsl(".concat(c,", ").concat(l,"%, ").concat(o,"%)"):"hsla(".concat(c,", ").concat(l,"%, ").concat(o,"%, ").concat(p,")")}},{key:"toHexString",value:function(){var t=d(this.values,4),a=t[0],c=t[1],l=t[2],o=t[3];return a=Number(a).toString(16).padStart(2,"0"),c=Number(c).toString(16).padStart(2,"0"),l=Number(l).toString(16).padStart(2,"0"),o=o<1?parseInt(o*255,10).toString(16).padStart(2,"0"):"","#".concat(a).concat(c).concat(l).concat(o)}},{key:"toRgbaArray",value:function(){return this.values}},{key:"toHslaArray",value:function(){var t=d(this.values,4),a=t[0],c=t[1],l=t[2],o=t[3],p=ne(a,c,l),g=d(p,3),x=g[0],E=g[1],O=g[2];return[x,E,O,o]}}]),e}();function k(e){var n=d(e,4),t=n[0],a=n[1],c=n[2],l=n[3];return new oe([t,a,c,l])}function A(e){var n=d(e,3),t=n[0],a=n[1],c=n[2];return k([t,a,c,1])}function M(e){var n=d(e,4),t=n[0],a=n[1],c=n[2],l=n[3],o=se(t,a,c),p=d(o,3),g=p[0],x=p[1],E=p[2];return k([g,x,E,l])}function J(e){var n=d(e,3),t=n[0],a=n[1],c=n[2];return M([t,a,c,1])}function ce(e){var n=z.exec(e)||L.exec(e),t=d(n,5),a=t[1],c=t[2],l=t[3],o=t[4];return a=parseInt(a.length<2?a.repeat(2):a,16),c=parseInt(c.length<2?c.repeat(2):c,16),l=parseInt(l.length<2?l.repeat(2):l,16),o=o&&(parseInt(o.length<2?o.repeat(2):o,16)/255).toPrecision(1)||1,k([a,c,l,o])}function le(e){var n=X.exec(e)||V.exec(e)||q.exec(e)||W.exec(e),t=d(n,5),a=t[1],c=t[2],l=t[3],o=t[4];return a=w(a,"%")?parseInt(a,10)*255/100:parseInt(a,10),c=w(c,"%")?parseInt(c,10)*255/100:parseInt(c,10),l=w(l,"%")>0?parseInt(l,10)*255/100:parseInt(l,10),o=o===void 0?1:parseFloat(o)/(w(o,"%")?100:1),k([a,c,l,o])}function ie(e){var n=B.exec(e),t=d(n,6),a=t[1],c=t[2],l=t[3],o=t[4],p=t[5];return c=c||"deg",a=(0,u.default)(parseFloat(a),c,"deg"),l=parseFloat(l),o=parseFloat(o),p=p===void 0?1:parseFloat(p)/(w(p,"%")?100:1),M([a,l,o,p])}function K(e){return s.default[e]?A(s.default[e]):z.test(e)||L.test(e)?ce(e):X.test(e)||V.test(e)||q.test(e)||W.test(e)?le(e):B.test(e)?ie(e):null}var me={fromString:K,fromRgb:A,fromRgba:k,fromHsl:J,fromHsla:M};r.default=me})(P);const Te=({colour:r,onChange:s})=>i.createElement("div",{className:ee.colourpicker},i.createElement(he,{color:P.fromString(r.trim()).toHexString(),onChange:s,alpha:!0,prefixed:!0}),i.createElement(be,{color:P.fromString(r.trim()).toHexString(),onChange:s})),He=({value:r,onChange:s})=>!/var\(.*\)/i.test(r)&&CSS.supports("color",r)?i.createElement(Te,{colour:r,onChange:s}):i.createElement("input",{type:"text",value:r,onChange:u=>s(u.target.value)}),Me=({value:r,name:s,map:u,themeName:m,theme:f,setTheme:b})=>{const[v,d]=T.useState(!1),y=_=>{const H=F(f);Se(H,u,_),b(H)},S=!/var\(.*\)/i.test(r)&&CSS.supports("color",r);return i.createElement("div",{className:"value"},i.createElement("label",null,i.createElement("div",null,i.createElement("button",{className:v?"open":"",onClick:()=>d(_=>!_)},i.createElement("div",null,i.createElement("span",{className:"material-symbols-outlined"},v?"expand_less":"expand_more"))," ",S&&i.createElement("div",{style:{background:r}})," ",s))),v&&i.createElement("div",{className:"input-container"},i.createElement(He,{value:r,key:m+u,onChange:y})))},te=({value:r,name:s,map:u,themeName:m,setTheme:f,theme:b})=>{const[v,d]=T.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"))," ",s),Object.entries(r).map(([y,S])=>{const _={theme:b,setTheme:f,name:y,themeName:m,map:u+"."+y,value:S,key:m+u+y};return v?typeof S=="object"?i.createElement(te,{..._}):i.createElement(Me,{..._}):null}))},je=({theme:r,themeName:s,setTheme:u})=>i.createElement("div",{className:ee.customiser},i.createElement("p",null,"Pick parts of the theme to customise:"),Object.entries(r).map(([m,f])=>{const b={theme:r,setTheme:u,themeName:s,name:m,map:m,value:f,key:s+m};return i.createElement(te,{...b})})),Ie=r=>{const{theme:s}=r,u=_e(s),m=Object.keys(u).map(f=>[`--theme-${f}`]);return i.createElement(ye,{title:"",header:["CSS variable"],note:"You can also use the following CSS variables to reference values from your theme in SCSS",body:m,copyable:[f=>`var(${f})`]})},Ce="_newtheme_1x4js_1",Ae={newtheme:Ce},$=r=>r instanceof Date,Ne=r=>Object.keys(r).length===0,D=r=>r!=null&&typeof r=="object",$e=(r,...s)=>Object.prototype.hasOwnProperty.call(r,...s),R=r=>D(r)&&Ne(r),Re=()=>Object.create(null),re=(r,s)=>r===s?{}:!D(r)||!D(s)?s:$(r)||$(s)?r.valueOf()==s.valueOf()?{}:s:Object.keys(s).reduce((u,m)=>{if($e(r,m)){const f=re(r[m],s[m]);return R(f)&&!$(f)&&(R(r[m])||!R(s[m]))||(u[m]=f),u}return u},Re());I.registerLanguage("svelte",Ee);I.registerLanguage("scss",xe);const Fe=({theme:r,themeName:s})=>{const m=re(s==="light"?j:Q,r),f=r.colour.background!==j.colour.background;return i.createElement("div",{className:Ae.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="${s}"
|
|
theme={${JSON.stringify(m,null,2).replaceAll('"',"'")}}
|
|
>
|
|
<!-- ... -->
|
|
</Theme>
|
|
`),f&&i.createElement(I,{language:"scss",style:U,customStyle:{maxHeight:"140px"}},`// global.scss
|
|
body {
|
|
background-color: ${r.colour.background};
|
|
}`),i.createElement(Ie,{theme:r}))},Pe={switch:"_switch_xd6eq_1"},De=({themeName:r,setThemeName:s})=>i.createElement("div",{className:Pe.switch},i.createElement("p",null,"Choose a base theme:"),i.createElement("div",{className:"container"},i.createElement("button",{className:r==="light"?"active":"",onClick:()=>s("light")},i.createElement("span",{className:"material-symbols-outlined"},"light_mode")),i.createElement("button",{className:r==="dark"?"active":"",onClick:()=>s("dark")},i.createElement("span",{className:"material-symbols-outlined"},"dark_mode")))),ze="_themebuilder_13kn1_1",Le={themebuilder:ze},Xe=r=>{const[s,u]=T.useState("light"),[m,f]=T.useState(F(j));return T.useEffect(()=>{f(F(s==="light"?j:Q))},[s]),i.createElement(fe,null,i.createElement("div",{className:Le.themebuilder},i.createElement("div",{className:"column"},i.createElement(De,{setThemeName:u,themeName:s}),i.createElement(je,{theme:m,setTheme:f,themeName:s,key:s})),i.createElement("div",{className:"column"},i.createElement(Fe,{theme:m,themeName:s}))))};function Y(r){const s=Object.assign({p:"p",img:"img",h1:"h1",code:"code"},Z(),r.components);return h.jsxs(h.Fragment,{children:[h.jsx(de,{title:"Theming/Theme builder",parameters:{...G}}),`
|
|
`,h.jsx(s.p,{children:h.jsx(s.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
|
|
`,h.jsx(s.h1,{id:"theme-builder",children:"Theme builder"}),`
|
|
`,h.jsxs(s.p,{children:["Use this tool to create a custom theme for your page then update the ",h.jsx(s.code,{children:"Theme"})," component in your project."]}),`
|
|
`,h.jsx(Xe,{})]})}function qe(r={}){const{wrapper:s}=Object.assign({},Z(),r.components);return s?h.jsx(s,{...r,children:h.jsx(Y,{...r})}):Y(r)}const Ve=()=>{throw new Error("Docs-only story")};Ve.parameters={docsOnly:!0};const C={title:"Theming/Theme builder",parameters:{...G},tags:["stories-mdx"],includeStories:["__page"]};C.parameters=C.parameters||{};C.parameters.docs={...C.parameters.docs||{},page:qe};const pt=["__page"];export{pt as __namedExportsOrder,Ve as __page,C as default};
|
|
//# sourceMappingURL=theme-builder.stories-e743610f.js.map
|