npm - newskit - Versions diffs - 5.4.3 → 5.4.4 - Mend

newskit 5.4.3 → 5.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/public/theme/theming/component-defaults/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
             body {
               margin: 0;
             }
-            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/51863-2bfb71df42da8833.js" defer=""></script><script src="/_next/static/chunks/pages/theme/theming/component-defaults-0f9b00353d452288.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_buildManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_ssgManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
+            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/51863-d9a28ce188f9fa84.js" defer=""></script><script src="/_next/static/chunks/pages/theme/theming/component-defaults-0f9b00353d452288.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_buildManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_ssgManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
               a='//tags.tiqcdn.com/utag/newsinternational/thetimes.newskit/dev/utag.js';
               b=document;
               c='script';
@@ -43,4 +43,4 @@
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">2</span><span>  xs</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;editorialHeadline010&#x27;</span><span class="token" style="color:#535353">,</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">3</span><span>  md</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;editorialHeadline010&#x27;</span><span class="token" style="color:#535353">,</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">4</span><span>  lg</span><span class="token" style="color:#577FFB">:</span><span> </span><span class="token" style="color:#0A782A">&#x27;editorialHeadline010&#x27;</span><span class="token" style="color:#535353">,</span><span>
-</span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">5</span><span></span><span class="token" style="color:#535353">}</span></code></pre></div><p color="inkBase" class="css-ysqpyd">Properties which support this will be documented as using the generic <code class="css-os1kn4">MQ</code> type, i.e. <code class="css-os1kn4">MQ&lt;string&gt;</code>. This means you can pass a single string token to be used at all times, or a combination at breakpoints like above.</p><style data-emotion="css 1rlam1f">.css-1rlam1f{display:block;position:relative;top:0px;visibility:hidden;}</style><a id="overriding-at-theme-level" offset="0" class="css-1rlam1f"></a><style data-emotion="css 1j88enj">.css-1j88enj{font-family:"DM Sans",sans-serif;font-size:20px;line-height:1.5;font-weight:500;letter-spacing:0;color:#0A0A0A;margin-bottom:24px;margin-top:-50px;margin-bottom:8px;padding-top:70px;border-bottom:solid 1px #E4E4E4;padding-bottom:12px;}</style><h2 class="css-1j88enj">Overriding at theme level</h2><p color="inkBase" class="css-ysqpyd">Overriding at the theme level involves creating a theme with your changes under the overrides property, similar to how you would change other areas of the theme. Here is an example of overriding the component defaults for the medium size Button component, changing the default typography and style presets. Some components, like the button, will have variants in their component defaults such as size.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><p color="inkBase" class="css-ysqpyd">You can override as many or as little component defaults as you wish. Each component documentation page details the component defaults it uses.</p><a id="overriding-at-component-level" offset="0" class="css-1rlam1f"></a><h2 class="css-1j88enj">Overriding at component level</h2><p color="inkBase" class="css-ysqpyd">You can also override at an individual component level, where the overrides will only apply to that specific instance of the component. The example below shows overriding the Button styles the same as above.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><p color="inkBase" class="css-ysqpyd">Note that the variant (in this case, &quot;medium&quot;) is not included in the overrides. Variants are not specified in the component overrides prop, only the theme. Some components which are built using multiple components may have a nested structure to their component defaults.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><p color="inkBase" class="css-ysqpyd">The Byline for example, shown above, is a case of this nested approach. This allows you to specify the overrides for the nested components as well as the top level.</p></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><style data-emotion="css 1a12fxg">.css-1a12fxg{border-style:solid;border-color:#E4E4E4;border-width:1px;border-width:0px;margin:0;border-top-width:1px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/theming/component-defaults/","pageProps":{}},"page":"/theme/theming/component-defaults","query":{},"buildId":"4eEzQdZEpSITC7CcT92PH","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
+</span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">5</span><span></span><span class="token" style="color:#535353">}</span></code></pre></div><p color="inkBase" class="css-ysqpyd">Properties which support this will be documented as using the generic <code class="css-os1kn4">MQ</code> type, i.e. <code class="css-os1kn4">MQ&lt;string&gt;</code>. This means you can pass a single string token to be used at all times, or a combination at breakpoints like above.</p><style data-emotion="css 1rlam1f">.css-1rlam1f{display:block;position:relative;top:0px;visibility:hidden;}</style><a id="overriding-at-theme-level" offset="0" class="css-1rlam1f"></a><style data-emotion="css 1j88enj">.css-1j88enj{font-family:"DM Sans",sans-serif;font-size:20px;line-height:1.5;font-weight:500;letter-spacing:0;color:#0A0A0A;margin-bottom:24px;margin-top:-50px;margin-bottom:8px;padding-top:70px;border-bottom:solid 1px #E4E4E4;padding-bottom:12px;}</style><h2 class="css-1j88enj">Overriding at theme level</h2><p color="inkBase" class="css-ysqpyd">Overriding at the theme level involves creating a theme with your changes under the overrides property, similar to how you would change other areas of the theme. Here is an example of overriding the component defaults for the medium size Button component, changing the default typography and style presets. Some components, like the button, will have variants in their component defaults such as size.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><p color="inkBase" class="css-ysqpyd">You can override as many or as little component defaults as you wish. Each component documentation page details the component defaults it uses.</p><a id="overriding-at-component-level" offset="0" class="css-1rlam1f"></a><h2 class="css-1j88enj">Overriding at component level</h2><p color="inkBase" class="css-ysqpyd">You can also override at an individual component level, where the overrides will only apply to that specific instance of the component. The example below shows overriding the Button styles the same as above.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><p color="inkBase" class="css-ysqpyd">Note that the variant (in this case, &quot;medium&quot;) is not included in the overrides. Variants are not specified in the component overrides prop, only the theme. Some components which are built using multiple components may have a nested structure to their component defaults.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><p color="inkBase" class="css-ysqpyd">The Byline for example, shown above, is a case of this nested approach. This allows you to specify the overrides for the nested components as well as the top level.</p></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><style data-emotion="css 1a12fxg">.css-1a12fxg{border-style:solid;border-color:#E4E4E4;border-width:1px;border-width:0px;margin:0;border-top-width:1px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/theming/component-defaults/","pageProps":{}},"page":"/theme/theming/component-defaults","query":{},"buildId":"16aAekWqHChB9xZCUOXJs","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>

package/public/theme/theming/creating-a-theme/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
             body {
               margin: 0;
             }
-            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/51863-2bfb71df42da8833.js" defer=""></script><script src="/_next/static/chunks/pages/theme/theming/creating-a-theme-ac105549da4491a5.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_buildManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_ssgManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
+            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/51863-d9a28ce188f9fa84.js" defer=""></script><script src="/_next/static/chunks/pages/theme/theming/creating-a-theme-ac105549da4491a5.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_buildManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_ssgManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
               a='//tags.tiqcdn.com/utag/newsinternational/thetimes.newskit/dev/utag.js';
               b=document;
               c='script';
@@ -104,4 +104,4 @@ start adjusting the font metrics by clicking on the icon highlighted with the re
 homogeneous space at the top and the bottom of the Em Square(green lines in the image below.)</p><p color="inkBase" class="css-ysqpyd">e.g</p><img height="200px" src="static/capsize-adustement.png" alt="Capsize adjustement suggestions"/><p color="inkBase" class="css-ysqpyd">Once satisfied, find and retrieve the metrics (point 3).
 Generally, adding the fontMetrics in your theme for a weight of 400 is enough for the majority of our users. However, if in your case you see the need to use more precise metrics for different font weights you can specify them;
 400 will be always the fallback.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><h4 class="css-1hmla1d">Using a function as a value</h4><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><h4 class="css-1hmla1d">Adding a style preset</h4><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><h4 class="css-1hmla1d">Adding a typography preset</h4><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><h4 class="css-1hmla1d">Unit testing your theme</h4><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div><h4 class="css-1hmla1d">Overriding an icon</h4><p color="inkBase" class="css-ysqpyd">NewsKit comes with <a href="https://material.io/resources/icons/?style=baseline" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">Material Design&#x27;s Icon</span></span></a> filled and outline sets included.
-In some cases, it might be desirable to replace the default icon with a user defined one, for instance if we want to use our own close icon across the system.</p><p color="inkBase" class="css-ysqpyd">Check out the <a href="/components/icons/" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">Icons page</span></span></a> for detailed explanation on how to create custom NewsKit icon.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><style data-emotion="css 1a12fxg">.css-1a12fxg{border-style:solid;border-color:#E4E4E4;border-width:1px;border-width:0px;margin:0;border-top-width:1px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/theming/creating-a-theme/","pageProps":{}},"page":"/theme/theming/creating-a-theme","query":{},"buildId":"4eEzQdZEpSITC7CcT92PH","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
+In some cases, it might be desirable to replace the default icon with a user defined one, for instance if we want to use our own close icon across the system.</p><p color="inkBase" class="css-ysqpyd">Check out the <a href="/components/icons/" class="css-g09sk7"><span class="css-17x5lw"><span class="css-p4p8io">Icons page</span></span></a> for detailed explanation on how to create custom NewsKit icon.</p><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code></code></pre></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><style data-emotion="css 1a12fxg">.css-1a12fxg{border-style:solid;border-color:#E4E4E4;border-width:1px;border-width:0px;margin:0;border-top-width:1px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/theme/theming/creating-a-theme/","pageProps":{}},"page":"/theme/theming/creating-a-theme","query":{},"buildId":"16aAekWqHChB9xZCUOXJs","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>