64 lines
14 KiB
JavaScript
64 lines
14 KiB
JavaScript
import{M as f}from"./chunk-S4VUQJ4A-ea782df4.js";import{p as l,j as t}from"./jsx-runtime-b3ad9f48.js";import{C as e}from"./Table-9272328f.js";import{c as o}from"./parseCss-edeb1577.js";import{c as p}from"./_color-087aa1f8.js";import{u as m}from"./index-4fcf5216.js";import"./iframe-a0761ecd.js";import"../sb-preview/runtime.js";import"./index-cdc8a4d0.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";import"./index-d5a0ae09.js";import"./toString-25ea340b.js";import"./isSymbol-50749e90.js";const x=`.h1{color:var(--theme-colour-text-primary);font-weight:700;font-family:var(--theme-font-family-hed);font-size:var(--theme-font-size-5xl);line-height:1;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.31rem,.31rem + 0vw,.31rem)}.h2{color:var(--theme-colour-text-primary);font-weight:700;font-family:var(--theme-font-family-subhed);line-height:1.15;font-size:var(--theme-font-size-xl);margin-top:clamp(3.38rem,3.19rem + .94vw,3.94rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem)}@media (max-width: 768px){.h2{font-size:var(--theme-font-size-2xl)}}.h3{color:var(--theme-colour-text-primary);font-weight:600;font-family:var(--theme-font-family-subhed);line-height:1.15;font-size:var(--theme-font-size-base);margin-top:clamp(1.69rem,1.58rem + .52vw,2rem);margin-bottom:clamp(.31rem,.31rem + 0vw,.31rem)}.h4{font-family:var(--theme-font-family-subhed);line-height:1.3;font-size:var(--theme-font-size-sm);color:var(--theme-colour-text-secondary);font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-top:clamp(1.13rem,1.06rem + .31vw,1.31rem);margin-bottom:clamp(.31rem,.31rem + 0vw,.31rem)}.body-text{margin-top:0;margin-bottom:clamp(1.13rem,1.06rem + .31vw,1.31rem);font-family:var(--theme-font-family-body);font-size:var(--theme-font-size-base);font-weight:400;line-height:1.5;color:var(--theme-colour-text-primary)}.body-note{margin-top:0;margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem);font-family:var(--theme-font-family-note);font-size:calc(.9 * var(--theme-font-size-base));color:var(--theme-colour-text-primary);line-height:1.3}.body-caption{font-family:var(--theme-font-family-note);color:var(--theme-colour-text-secondary);font-size:var(--theme-font-size-xs);line-height:1.3;font-weight:400;margin-top:clamp(.31rem,.31rem + 0vw,.31rem);margin-bottom:clamp(.56rem,.52rem + .21vw,.69rem)}.body-link{color:currentColor;text-decoration:underline;text-underline-position:from-font;text-decoration-style:dotted;text-decoration-thickness:1px;text-decoration-color:var(--theme-colour-text-secondary)}.drop-cap{float:left;margin-right:clamp(.31rem,.31rem + 0vw,.31rem);font-weight:300;font-size:calc(3.33 * var(--theme-font-size-base));line-height:.9}
|
|
`,h=`.font-serif{font-family:var(--theme-font-family-serif)}.font-sans{font-family:var(--theme-font-family-sans-serif)}.font-mono{font-family:var(--theme-font-family-monospace)}.font-hed{font-family:var(--theme-font-family-hed)}.font-subhed{font-family:var(--theme-font-family-subhed)}.font-body{font-family:var(--theme-font-family-body)}.font-note{font-family:var(--theme-font-family-note)}.font-source-sans-pro{font-family:Source Sans Pro,Arial,Helvetica,sans-serif}.font-knowledge{font-family:Knowledge,Source Sans Pro,Arial,Helvetica,sans-serif}.font-freight-text{font-family:FreightText,serif}.font-noto-sans-jp{font-family:Noto Sans JP}.\\!font-serif{font-family:var(--theme-font-family-serif)!important}.\\!font-sans{font-family:var(--theme-font-family-sans-serif)!important}.\\!font-mono{font-family:var(--theme-font-family-monospace)!important}.\\!font-hed{font-family:var(--theme-font-family-hed)!important}.\\!font-subhed{font-family:var(--theme-font-family-subhed)!important}.\\!font-body{font-family:var(--theme-font-family-body)!important}.\\!font-note{font-family:var(--theme-font-family-note)!important}.\\!font-source-sans-pro{font-family:Source Sans Pro,Arial,Helvetica,sans-serif!important}.\\!font-knowledge{font-family:Knowledge,Source Sans Pro,Arial,Helvetica,sans-serif!important}.\\!font-freight-text{font-family:FreightText,serif!important}.\\!font-noto-sans-jp{font-family:Noto Sans JP!important}
|
|
`,c=`.text-xxs{font-size:var(--theme-font-size-xxs)}.text-xs{font-size:var(--theme-font-size-xs)}.text-sm{font-size:var(--theme-font-size-sm)}.text-base{font-size:var(--theme-font-size-base)}.text-lg{font-size:var(--theme-font-size-lg)}.text-xl{font-size:var(--theme-font-size-xl)}.text-2xl{font-size:var(--theme-font-size-2xl)}.text-3xl{font-size:var(--theme-font-size-3xl)}.text-4xl{font-size:var(--theme-font-size-4xl)}.text-5xl{font-size:var(--theme-font-size-5xl)}.text-6xl{font-size:var(--theme-font-size-6xl)}.\\!text-xxs{font-size:var(--theme-font-size-xxs)!important}.\\!text-xs{font-size:var(--theme-font-size-xs)!important}.\\!text-sm{font-size:var(--theme-font-size-sm)!important}.\\!text-base{font-size:var(--theme-font-size-base)!important}.\\!text-lg{font-size:var(--theme-font-size-lg)!important}.\\!text-xl{font-size:var(--theme-font-size-xl)!important}.\\!text-2xl{font-size:var(--theme-font-size-2xl)!important}.\\!text-3xl{font-size:var(--theme-font-size-3xl)!important}.\\!text-4xl{font-size:var(--theme-font-size-4xl)!important}.\\!text-5xl{font-size:var(--theme-font-size-5xl)!important}.\\!text-6xl{font-size:var(--theme-font-size-6xl)!important}
|
|
`,g=`.italic{font-style:italic}.not-italic{font-style:normal}.\\!italic{font-style:italic!important}.\\!not-italic{font-style:normal!important}
|
|
`,d=`.font-thin{font-weight:100}.font-extralight{font-weight:200}.font-light{font-weight:300}.font-regular{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}.\\!font-thin{font-weight:100!important}.\\!font-extralight{font-weight:200!important}.\\!font-light{font-weight:300!important}.\\!font-regular{font-weight:400!important}.\\!font-medium{font-weight:500!important}.\\!font-semibold{font-weight:600!important}.\\!font-bold{font-weight:700!important}.\\!font-extrabold{font-weight:800!important}.\\!font-black{font-weight:900!important}
|
|
`,k=`.tracking-tighter{letter-spacing:-.05em}.tracking-tight{letter-spacing:-.03em}.tracking-normal{letter-spacing:0em}.tracking-wide{letter-spacing:.03em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.\\!tracking-tighter{letter-spacing:-.05em!important}.\\!tracking-tight{letter-spacing:-.03em!important}.\\!tracking-normal{letter-spacing:0em!important}.\\!tracking-wide{letter-spacing:.03em!important}.\\!tracking-wider{letter-spacing:.05em!important}.\\!tracking-widest{letter-spacing:.1em!important}
|
|
`,b=`.leading-none{line-height:1}.leading-tighter{line-height:1.15}.leading-tight{line-height:1.3}.leading-normal{line-height:1.5}.leading-loose{line-height:1.7}.leading-looser{line-height:1.9}.\\!leading-none{line-height:1!important}.\\!leading-tighter{line-height:1.1!important}.\\!leading-tight{line-height:1.3!important}.\\!leading-normal{line-height:1.5!important}.\\!leading-loose{line-height:1.7!important}.\\!leading-looser{line-height:1.9!important}
|
|
`,y=`.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-start{text-align:start}.text-end{text-align:end!important}.\\!text-left{text-align:left!important}.\\!text-center{text-align:center!important}.\\!text-right{text-align:right!important}.\\!text-justify{text-align:justify!important}.\\!text-start{text-align:start!important}.\\!text-end{text-align:end!important}
|
|
`,w=`.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.\\!underline{text-decoration-line:underline!important}.\\!overline{text-decoration-line:overline!important}.\\!line-through{text-decoration-line:line-through!important}.\\!no-underline{text-decoration-line:none!important}
|
|
`,u=`.text-stroke-black{-webkit-text-stroke:1px #000;text-stroke:1px #000}.text-stroke-black-2{-webkit-text-stroke:2px #000;text-stroke:2px #000}.text-stroke-black-3{-webkit-text-stroke:3px #000;text-stroke:3px #000}.text-stroke-black-4{-webkit-text-stroke:4px #000;text-stroke:4px #000}.text-stroke-black-6{-webkit-text-stroke:6px #000;text-stroke:6px #000}.text-stroke-black-8{-webkit-text-stroke:8px #000;text-stroke:8px #000}.\\!text-stroke-black{-webkit-text-stroke:1px #000;text-stroke:1px #000}.\\!text-stroke-black-2{-webkit-text-stroke:2px #000!important;text-stroke:2px #000!important}.\\!text-stroke-black-3{-webkit-text-stroke:3px #000!important;text-stroke:3px #000!important}.\\!text-stroke-black-4{-webkit-text-stroke:4px #000!important;text-stroke:4px #000!important}.\\!text-stroke-black-6{-webkit-text-stroke:6px #000!important;text-stroke:6px #000!important}.\\!text-stroke-black-8{-webkit-text-stroke:8px #000!important;text-stroke:8px #000!important}.text-stroke-white{-webkit-text-stroke:1px #fff;text-stroke:1px #fff}.text-stroke-white-2{-webkit-text-stroke:2px #fff;text-stroke:2px #fff}.text-stroke-white-3{-webkit-text-stroke:3px #fff;text-stroke:3px #fff}.text-stroke-white-4{-webkit-text-stroke:4px #fff;text-stroke:4px #fff}.text-stroke-white-6{-webkit-text-stroke:6px #fff;text-stroke:6px #fff}.text-stroke-white-8{-webkit-text-stroke:8px #fff;text-stroke:8px #fff}.\\!text-stroke-white{-webkit-text-stroke:1px #fff;text-stroke:1px #fff}.\\!text-stroke-white-2{-webkit-text-stroke:2px #fff!important;text-stroke:2px #fff!important}.\\!text-stroke-white-3{-webkit-text-stroke:3px #fff!important;text-stroke:3px #fff!important}.\\!text-stroke-white-4{-webkit-text-stroke:4px #fff!important;text-stroke:4px #fff!important}.\\!text-stroke-white-6{-webkit-text-stroke:6px #fff!important;text-stroke:6px #fff!important}.\\!text-stroke-white-8{-webkit-text-stroke:8px #fff!important;text-stroke:8px #fff!important}
|
|
`,v=`.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.\\!uppercase{text-transform:uppercase!important}.\\!lowercase{text-transform:lowercase!important}
|
|
`,z=`.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.align-text-top{vertical-align:text-top}.align-text-bottom{vertical-align:text-bottom}.align-sub{vertical-align:sub}.align-super{vertical-align:super}.\\!align-baseline{vertical-align:baseline!important}.\\!align-top{vertical-align:top!important}.\\!align-middle{vertical-align:middle!important}.\\!align-bottom{vertical-align:bottom!important}.\\!align-text-top{vertical-align:text-top!important}.\\!align-text-bottom{vertical-align:text-bottom!important}.\\!align-sub{vertical-align:sub!important}.\\!align-super{vertical-align:super!important}
|
|
`,j=`.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.\\!whitespace-normal{white-space:normal!important}.\\!whitespace-nowrap{white-space:nowrap!important}
|
|
`,C=`.break-normal{overflow-wrap:normal;word-break:normal}.break-words{overflow-wrap:break-word}.\\!break-normal{overflow-wrap:normal!important;word-break:normal!important}.\\!break-words{overflow-wrap:break-word!important}
|
|
`;function s(r){const i=Object.assign({p:"p",img:"img",h1:"h1"},m(),r.components);return t.jsxs(t.Fragment,{children:[`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,t.jsx(f,{title:"Styles/Tokens/Typography",parameters:{...l}}),`
|
|
`,t.jsx(i.p,{children:t.jsx(i.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
|
|
`,t.jsx(i.h1,{id:"typography-tokens",children:"Typography tokens"}),`
|
|
`,t.jsx(e,{title:"Role",note:"Role tokens group several individual style tokens for common text elements like headers, body text, notes and links. You can use them as a shorthand for our default typography styles.",header:["Class","Include","Properties"],body:o(x,!0),copyable:[!0,n=>`@include ${n};`,!1]}),`
|
|
`,t.jsx(e,{title:"Colour",mdnLink:"color",header:["Class","Include","Properties"],body:o(p,!0),copyable:[!0,n=>`@include ${n};`,!1]}),`
|
|
`,t.jsx(e,{title:"Font family",mdnLink:"font-family",header:["Class","Include","Properties"],body:o(h,!0),copyable:[!0,n=>`@include ${n};`,!1]}),`
|
|
`,t.jsx(e,{title:"Font size",mdnLink:"font-size",header:["Class","Include","Properties"],body:o(c,!0),copyable:[!0,n=>`@include ${n};`,!1]}),`
|
|
`,t.jsx(e,{title:"Font style",mdnLink:"font-style",header:["Class","Properties"],body:o(g),copyable:[!0,!1]}),`
|
|
`,t.jsx(e,{title:"Font weight",mdnLink:"font-weight",header:["Class","Include","Properties"],body:o(d,!0),copyable:[!0,n=>`@include ${n};`,!1]}),`
|
|
`,t.jsx(e,{title:"Letter spacing",mdnLink:"letter-spacing",header:["Class","Include","Properties"],body:o(k,!0),copyable:[!0,n=>`@include ${n};`,!1]}),`
|
|
`,t.jsx(e,{title:"Line height",mdnLink:"line-height",header:["Class","Include","Properties"],body:o(b,!0),copyable:[!0,n=>`@include ${n};`,!1]}),`
|
|
`,t.jsx(e,{title:"Text align",mdnLink:"text-align",header:["Class","Properties"],body:o(y),copyable:[!0,!1]}),`
|
|
`,t.jsx(e,{title:"Text decoration",mdnLink:"text-decoration",header:["Class","Properties"],body:o(w),copyable:[!0,!1]}),`
|
|
`,t.jsx(e,{title:"Text stroke",mdnLink:"text-stroke",header:["Class","Properties"],body:o(u),copyable:[!0,!1]}),`
|
|
`,t.jsx(e,{title:"Text transform",mdnLink:"text-transform",header:["Class","Properties"],body:o(v),copyable:[!0,!1]}),`
|
|
`,t.jsx(e,{title:"Vertical align",mdnLink:"vertical-align",header:["Class","Properties"],body:o(z),copyable:[!0,!1]}),`
|
|
`,t.jsx(e,{title:"White space",mdnLink:"white-space",header:["Class","Properties"],body:o(j),copyable:[!0,!1]}),`
|
|
`,t.jsx(e,{title:"Word break",mdnLink:"word-break",header:["Class","Properties"],body:o(C),copyable:[!0,!1]})]})}function P(r={}){const{wrapper:i}=Object.assign({},m(),r.components);return i?t.jsx(i,{...r,children:t.jsx(s,{...r})}):s(r)}const S=()=>{throw new Error("Docs-only story")};S.parameters={docsOnly:!0};const a={title:"Styles/Tokens/Typography",parameters:{...l},tags:["stories-mdx"],includeStories:["__page"]};a.parameters=a.parameters||{};a.parameters.docs={...a.parameters.docs||{},page:P};const K=["__page"];export{K as __namedExportsOrder,S as __page,a as default};
|
|
//# sourceMappingURL=main.stories-9933834a.js.map
|