import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{nt as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{c as o,l as s,o as c}from"./iframe-D-oZzXNK.js";import{r as l}from"./react-B8jdHdWa.js";import{t as u}from"./mdx-react-shim-8vvjMMnP.js";import{a as d,i as f,t as p,v as m,y as h}from"./dist-BUBfPDtK.js";var g,_,v,y,b,x,S,C,w=t((()=>{i(),p(),e(n()),g=a(),_=({inverted:e,textToken:t})=>{let n=r.color.text[t];return Array.isArray(n)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:t}),(0,g.jsx)(`div`,{style:{color:`var(--${n[1]})`,maxWidth:`240px`,padding:`10px`,background:`var(--${e?r.color.background.primaryInverted[1]:r.color.background.primary[1]})`},children:(0,g.jsxs)(`code`,{children:[`color.text.`,t]})})]},t):null},_.defaultProps={inverted:!1},v=({inverted:e,bgToken:t})=>{let n=r.color.background[t];return Array.isArray(n)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:t}),(0,g.jsxs)(`div`,{style:{background:`var(--${r.color.background[t][1]})`,color:`var(--${e?r.color.text.inverted[1]:r.color.text.primary[1]})`,maxWidth:`240px`,padding:`10px`},children:[`Background token: `,(0,g.jsxs)(`code`,{children:[`color.background.`,t]})]})]},t):null},v.defaultProps={inverted:!1},y=({contentToken:e})=>{let t=r.color.border[e];return Array.isArray(t)?(0,g.jsxs)(f,{children:[(0,g.jsx)(h,{tag:`h4`,variant:`medium`,children:e}),(0,g.jsx)(`br`,{}),(0,g.jsxs)(`div`,{style:{border:`1px solid var(--${t[1]})`,background:`transparent`,color:`var(--${t[1]})`,maxWidth:`240px`,height:`50px`,padding:`10px`},children:[`color.border.`,e]})]},e):null},y.defaultProps={},b=()=>(0,g.jsxs)(d,{gap:`16`,columns:2,children:[(0,g.jsx)(m,{children:`Token family: action.variant.primary.*`}),(0,g.jsx)(m,{variant:`secondary`,children:`Token family: action.variant.secondary.*`}),(0,g.jsx)(m,{variant:`tertiary`,children:`Token family: action.variant.tertiary.*`}),(0,g.jsx)(m,{variant:`ghost`,children:`Token family: action.variant.ghost.*`}),(0,g.jsx)(m,{variant:`critical`,children:`Token family: action.variant.critical.*`}),(0,g.jsx)(m,{variant:`onColor`,children:`Token family: action.variant.onColor.*`}),(0,g.jsx)(m,{variant:`inverted`,children:`Token family: action.variant.inverted.*`}),(0,g.jsx)(m,{disabled:!0,children:`Token family: action.variant.disabled.*`})]}),x=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(_,{textToken:`primary`}),(0,g.jsx)(_,{textToken:`secondary`}),(0,g.jsx)(_,{textToken:`tertiary`}),(0,g.jsx)(_,{textToken:`accentDark`}),(0,g.jsx)(_,{textToken:`placeholder`}),(0,g.jsx)(_,{textToken:`inverted`,inverted:!0}),(0,g.jsx)(_,{textToken:`positive`}),(0,g.jsx)(_,{textToken:`info`}),(0,g.jsx)(_,{textToken:`warning`}),(0,g.jsx)(_,{textToken:`critical`})]}),S=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(v,{bgToken:`primary`}),(0,g.jsx)(v,{bgToken:`secondary`}),(0,g.jsx)(v,{bgToken:`tertiary`}),(0,g.jsx)(v,{bgToken:`overlay`}),(0,g.jsx)(v,{bgToken:`disabled`}),(0,g.jsx)(v,{bgToken:`brand`}),(0,g.jsx)(v,{bgToken:`brandB2b`}),(0,g.jsx)(v,{bgToken:`accentLight`}),(0,g.jsx)(v,{bgToken:`accentDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`positiveLight`}),(0,g.jsx)(v,{bgToken:`positiveDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`infoLight`}),(0,g.jsx)(v,{bgToken:`infoDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`warningLight`}),(0,g.jsx)(v,{bgToken:`warningDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`criticalLight`}),(0,g.jsx)(v,{bgToken:`criticalDark`,inverted:!0}),(0,g.jsx)(v,{bgToken:`statusOnline`}),(0,g.jsx)(v,{bgToken:`statusOffline`}),(0,g.jsx)(v,{bgToken:`primaryInverted`,inverted:!0}),(0,g.jsx)(v,{bgToken:`secondaryInverted`,inverted:!0}),(0,g.jsx)(v,{bgToken:`tertiaryInverted`,inverted:!0})]}),C=()=>(0,g.jsxs)(d,{gap:`16`,columns:4,children:[(0,g.jsx)(y,{contentToken:`primary`}),(0,g.jsx)(y,{contentToken:`secondary`}),(0,g.jsx)(y,{contentToken:`secondary-opacity`}),(0,g.jsx)(y,{contentToken:`tertiary`}),(0,g.jsx)(y,{contentToken:`disabled`}),(0,g.jsx)(y,{contentToken:`brand`}),(0,g.jsx)(y,{contentToken:`critical`}),(0,g.jsx)(y,{contentToken:`focus`}),(0,g.jsx)(y,{contentToken:`positive`})]})}));function T(e){let t={h1:`h1`,h2:`h2`,p:`p`,...l(),...e.components};return(0,D.jsxs)(D.Fragment,{children:[(0,D.jsx)(c,{title:`Guides/Semantic tokens examples`}),`
`,(0,D.jsx)(t.h1,{id:`semantic-tokens-examples`,children:`Semantic tokens examples`}),`
`,(0,D.jsx)(t.p,{children:`With Tokyo UI the semantic tokens have been renamed and expanded to cover more use cases. Here is a list of the most important ones.`}),`
`,(0,D.jsx)(t.h2,{id:`text-tokens`,children:`Text tokens`}),`
`,(0,D.jsx)(o,{children:(0,D.jsx)(x,{})}),`
`,(0,D.jsx)(t.h2,{id:`background-tokens`,children:`Background tokens`}),`
`,(0,D.jsx)(o,{children:(0,D.jsx)(S,{})}),`
`,(0,D.jsx)(t.h2,{id:`action`,children:`Action`}),`
`,(0,D.jsx)(o,{children:(0,D.jsx)(b,{})}),`
`,(0,D.jsx)(t.h2,{id:`border-tokens`,children:`Border tokens`}),`
`,(0,D.jsx)(o,{children:(0,D.jsx)(C,{})})]})}function E(e={}){let{wrapper:t}={...l(),...e.components};return t?(0,D.jsx)(t,{...e,children:(0,D.jsx)(T,{...e})}):T(e)}var D;t((()=>{D=a(),u(),s(),w()}))();export{E as default};