15 lines
12 KiB
JavaScript
15 lines
12 KiB
JavaScript
import{j as b,p as ue}from"./docsPage-CrCNk6vV.js";import{useMDXComponents as Y}from"./index-CswL0fy2.js";import{U as fe,M as pe}from"./index-BSnnmD0I.js";import{R as i,r as H}from"./index-DwChlhAQ.js";import{c as de,O as he,n as ge}from"./index-9PY8u6CP.js";import{b as be,c as R}from"./_baseSet-DBo-XiK2.js";import{C as ve}from"./Table-pFv7YcPp.js";import{f as ye,l as I,d as G}from"./flatten-9xFT-BQ8.js";import{S as O,p as K}from"./prism-Ctq-WnLP.js";import{s as _e}from"./scss-BCrErVeE.js";import{s as xe}from"./svelte-highlighting-C2PQVc49.js";import"./iframe-BssUzINi.js";import"../sb-preview/runtime.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-D-8MO0q_.js";import"./index-DxKRhftL.js";import"./index-DrFu-skq.js";import"./_baseClone-BMmn5UJb.js";import"./toString-DnxJX3Gz.js";import"./isSymbol-Br3Fhm6g.js";import"./_initCloneObject-D0ofMy5o.js";import"./isObject-C3e4t58V.js";function Ee(t,s,u){return t==null?t:be(t,s,u)}const Se="_customiser_1k8ya_1",ke="_colourpicker_1k8ya_63",Q={customiser:Se,colourpicker:ke};var P={},A={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}},we=function(t,s,u,m){if(!A.hasOwnProperty(u))throw new Error("Cannot convert to "+u);if(!A[u].hasOwnProperty(s))throw new Error("Cannot convert from "+s+" to "+u);var p=A[u][s]*t;return m!==!1?(m=Math.pow(10,parseInt(m)||5),Math.round(p*m)/m):p};(function(t){Object.defineProperty(t,"__esModule",{value:!0}),t.fromRgba=k,t.fromRgb=j,t.fromHsla=C,t.fromHsl=B,t.fromString=J,t.default=void 0;var s=m(de),u=m(we);function m(e){return e&&e.__esModule?e:{default:e}}function p(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function v(e,n){for(var r=0;r<n.length;r++){var a=n[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function y(e,n,r){return n&&v(e.prototype,n),e}function d(e,n){return te(e)||M(e,n)||S(e,n)||_()}function _(){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 g(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);if(r==="Object"&&e.constructor&&(r=e.constructor.name),r==="Map"||r==="Set")return Array.from(e);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return g(e,n)}}function g(e,n){(n==null||n>e.length)&&(n=e.length);for(var r=0,a=new Array(n);r<n;r++)a[r]=e[r];return a}function M(e,n){if(!(typeof Symbol>"u"||!(Symbol.iterator in Object(e)))){var r=[],a=!0,c=!1,l=void 0;try{for(var o=e[Symbol.iterator](),f;!(a=(f=o.next()).done)&&(r.push(f.value),!(n&&r.length===n));a=!0);}catch(h){c=!0,l=h}finally{try{!a&&o.return!=null&&o.return()}finally{if(c)throw l}}return r}}function te(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*\)$/,V=/^rgba?\(\s*(\d+%)\s+(\d+%)\s+(\d+%)(?:\s*\/\s*(0|1|0?\.\d+|\d+%))?\s*\)$/,W=/^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 re(e,n,r){var a=e/255,c=n/255,l=r/255,o=Math.max(a,c,l),f=Math.min(a,c,l),h=o-f,x=(o+f)/2;if(h===0)return[0,0,x*100];var E=h/(1-Math.abs(2*x-1)),T=function(){switch(o){case a:return(c-l)/h%6;case c:return(l-a)/h+2;default:return(a-c)/h+4}}();return[T*60,E*100,x*100]}function ae(e,n,r){var a=e/60,c=n/100,l=r/100,o=(1-Math.abs(2*l-1))*c,f=o*(1-Math.abs(a%2-1)),h=l-o/2,x=function(){return a<1?[o,f,0]:a<2?[f,o,0]:a<3?[0,o,f]:a<4?[0,f,o]:a<5?[f,0,o]:[o,0,f]}(),E=d(x,3),T=E[0],ie=E[1],me=E[2];return[(T+h)*255,(ie+h)*255,(me+h)*255]}var ne=function(){function e(n){var r=d(n,4),a=r[0],c=r[1],l=r[2],o=r[3];p(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 y(e,[{key:"toRgbString",value:function(){var r=d(this.values,4),a=r[0],c=r[1],l=r[2],o=r[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 r=this.toHslaArray(),a=d(r,4),c=a[0],l=a[1],o=a[2],f=a[3];return f===1?"hsl(".concat(c,", ").concat(l,"%, ").concat(o,"%)"):"hsla(".concat(c,", ").concat(l,"%, ").concat(o,"%, ").concat(f,")")}},{key:"toHexString",value:function(){var r=d(this.values,4),a=r[0],c=r[1],l=r[2],o=r[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 r=d(this.values,4),a=r[0],c=r[1],l=r[2],o=r[3],f=re(a,c,l),h=d(f,3),x=h[0],E=h[1],T=h[2];return[x,E,T,o]}}]),e}();function k(e){var n=d(e,4),r=n[0],a=n[1],c=n[2],l=n[3];return new ne([r,a,c,l])}function j(e){var n=d(e,3),r=n[0],a=n[1],c=n[2];return k([r,a,c,1])}function C(e){var n=d(e,4),r=n[0],a=n[1],c=n[2],l=n[3],o=ae(r,a,c),f=d(o,3),h=f[0],x=f[1],E=f[2];return k([h,x,E,l])}function B(e){var n=d(e,3),r=n[0],a=n[1],c=n[2];return C([r,a,c,1])}function se(e){var n=D.exec(e)||z.exec(e),r=d(n,5),a=r[1],c=r[2],l=r[3],o=r[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 oe(e){var n=L.exec(e)||q.exec(e)||X.exec(e)||V.exec(e),r=d(n,5),a=r[1],c=r[2],l=r[3],o=r[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 ce(e){var n=W.exec(e),r=d(n,6),a=r[1],c=r[2],l=r[3],o=r[4],f=r[5];return c=c||"deg",a=(0,u.default)(parseFloat(a),c,"deg"),l=parseFloat(l),o=parseFloat(o),f=f===void 0?1:parseFloat(f)/(w(f,"%")?100:1),C([a,l,o,f])}function J(e){return s.default[e]?j(s.default[e]):D.test(e)||z.test(e)?se(e):L.test(e)||q.test(e)||X.test(e)||V.test(e)?oe(e):W.test(e)?ce(e):null}var le={fromString:J,fromRgb:j,fromRgba:k,fromHsl:B,fromHsla:C};t.default=le})(P);const Te=({colour:t,onChange:s})=>i.createElement("div",{className:Q.colourpicker},i.createElement(he,{color:P.fromString(t.trim()).toHexString(),onChange:s,alpha:!0,prefixed:!0}),i.createElement(ge,{color:P.fromString(t.trim()).toHexString(),onChange:s})),He=({value:t,onChange:s})=>!/var\(.*\)/i.test(t)&&CSS.supports("color",t)?i.createElement(Te,{colour:t,onChange:s}):i.createElement("input",{type:"text",value:t,onChange:u=>s(u.target.value)}),Me=({value:t,name:s,map:u,themeName:m,theme:p,setTheme:v})=>{const[y,d]=H.useState(!1),_=g=>{const M=R(p);Ee(M,u,g),v(M)},S=!/var\(.*\)/i.test(t)&&CSS.supports("color",t);return i.createElement("div",{className:"value"},i.createElement("label",null,i.createElement("div",null,i.createElement("button",{className:y?"open":"",onClick:()=>d(g=>!g)},i.createElement("div",null,i.createElement("span",{className:"material-symbols-outlined"},y?"expand_less":"expand_more"))," ",S&&i.createElement("div",{style:{background:t}})," ",s))),y&&i.createElement("div",{className:"input-container"},i.createElement(He,{value:t,key:m+u,onChange:_})))},Z=({value:t,name:s,map:u,themeName:m,setTheme:p,theme:v})=>{const[y,d]=H.useState(!1);return i.createElement("div",{className:"key"},i.createElement("button",{className:y?"open":"",onClick:()=>d(_=>!_)},i.createElement("div",null,i.createElement("span",{className:"material-symbols-outlined"},y?"expand_less":"expand_more"))," ",s),Object.entries(t).map(([_,S])=>{const g={theme:v,setTheme:p,name:_,themeName:m,map:u+"."+_,value:S,key:m+u+_};return y?typeof S=="object"?i.createElement(Z,{...g,key:g.key}):i.createElement(Me,{...g,key:g.key}):null}))},Ce=({theme:t,themeName:s,setTheme:u})=>i.createElement("div",{className:Q.customiser},i.createElement("p",null,"Pick parts of the theme to customise:"),Object.entries(t).map(([m,p])=>{const v={theme:t,setTheme:u,themeName:s,name:m,map:m,value:p,key:s+m};return i.createElement(Z,{...v,key:v.key})})),Ie=t=>{const{theme:s}=t,u=ye(s),m=Object.keys(u).map(p=>[`--theme-${p}`]);return i.createElement(ve,{title:"",header:["CSS variable"],note:"You can also use the following CSS variables to reference values from your theme in SCSS",body:m,copyable:[p=>`var(${p})`]})},Oe="_newtheme_1x4js_1",je={newtheme:Oe},N=t=>t instanceof Date,Ae=t=>Object.keys(t).length===0,F=t=>t!=null&&typeof t=="object",Ne=(t,...s)=>Object.prototype.hasOwnProperty.call(t,...s),$=t=>F(t)&&Ae(t),$e=()=>Object.create(null),ee=(t,s)=>t===s?{}:!F(t)||!F(s)?s:N(t)||N(s)?t.valueOf()==s.valueOf()?{}:s:Object.keys(s).reduce((u,m)=>{if(Ne(t,m)){const p=ee(t[m],s[m]);return $(p)&&!N(p)&&($(t[m])||!$(s[m]))||(u[m]=p),u}return u},$e());O.registerLanguage("svelte",xe);O.registerLanguage("scss",_e);const Re=({theme:t,themeName:s})=>{const m=ee(s==="light"?I:G,t),p=t.colour.background!==I.colour.background;return i.createElement("div",{className:je.newtheme},i.createElement("p",null,"Use the code below to adapt the ",i.createElement("code",null,"Theme")," component for your new design:"),i.createElement(O,{language:"svelte",style:K},`<Theme
|
|
base="${s}"
|
|
theme={${JSON.stringify(m,null,2).replaceAll('"',"'")}}
|
|
>
|
|
<!-- ... -->
|
|
</Theme>
|
|
`),p&&i.createElement(O,{language:"scss",style:K,customStyle:{maxHeight:"140px"}},`// global.scss
|
|
body {
|
|
background-color: ${t.colour.background};
|
|
}`),i.createElement(Ie,{theme:t}))},Pe={switch:"_switch_xd6eq_1"},Fe=({themeName:t,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:t==="light"?"active":"",onClick:()=>s("light")},i.createElement("span",{className:"material-symbols-outlined"},"light_mode")),i.createElement("button",{className:t==="dark"?"active":"",onClick:()=>s("dark")},i.createElement("span",{className:"material-symbols-outlined"},"dark_mode")))),De="_themebuilder_13kn1_1",ze={themebuilder:De},Le=t=>{const[s,u]=H.useState("light"),[m,p]=H.useState(R(I));return H.useEffect(()=>{p(R(s==="light"?I:G))},[s]),i.createElement(fe,null,i.createElement("div",{className:ze.themebuilder},i.createElement("div",{className:"column"},i.createElement(Fe,{setThemeName:u,themeName:s}),i.createElement(Ce,{theme:m,setTheme:p,themeName:s,key:s})),i.createElement("div",{className:"column"},i.createElement(Re,{theme:m,themeName:s}))))};function U(t){const s={code:"code",h1:"h1",img:"img",p:"p",...Y(),...t.components};return b.jsxs(b.Fragment,{children:[b.jsx(pe,{title:"Theming/Theme builder",parameters:{...ue}}),`
|
|
`,b.jsx(s.p,{children:b.jsx(s.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
|
|
`,b.jsx(s.h1,{id:"theme-builder",children:"Theme builder"}),`
|
|
`,b.jsxs(s.p,{children:["Use this tool to create a custom theme for your page then update the ",b.jsx(s.code,{children:"Theme"})," component in your project."]}),`
|
|
`,b.jsx(Le,{})]})}function mt(t={}){const{wrapper:s}={...Y(),...t.components};return s?b.jsx(s,{...t,children:b.jsx(U,{...t})}):U(t)}export{mt as default};
|