https://offloop.org/assets/c-e485dffc.js

1try{var e="u">typeof window?window:"u">typeof global?global:"u">typeof globalThis?globalThis:"u">typeof self?self:{};e._sentryModuleMetadata=e._sentryModuleMetadata||{},e._sentryModuleMetadata[(new e.Error).stack]=function(e){for(var s=1;s<arguments.length;s++){var t=arguments[s];if(null!=t)for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a])}return e}({},e._sentryModuleMetadata[(new e.Error).stack],{"_sentryBundlerPluginAppKey:offloop-frontend":!0});var s=(new e.Error).stack;s&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[s]="6f681900-144a-4cf8-aa29-e110718a7660",e._sentryDebugIdIdentifier="sentry-dbid-6f681900-144a-4cf8-aa29-e110718a7660")}catch(e){}export const __rspack_esm_id=11059;export const __rspack_esm_ids=[11059];export const __webpack_modules__={79422(e,s,t){t.r(s);var a=t(12334),r=t(47982),l=t(21945);let n=["slack","github","notion","linear","figma","google","gmail","x","stripe","vercel","jira","zoom"],i=["github","notion","x","vercel"];function o(){return(0,a.jsxs)(l.ws,{slug:"brand-mark",children:[(0,a.jsxs)(l.Ub,{id:"overview",title:"Overview",caption:"Third-party logos, served from one registry so a connector looks the same everywhere it appears.",children:[(0,a.jsx)(l.rF,{children:"Connector rows, credential cards, the search palette, and settings all need the same logos. BrandMark is the single place they come from: pass a brand key and it resolves the asset, the alt text, and — where the brand needs it — a light and dark variant."}),(0,a.jsxs)(l.rF,{children:["These are the one deliberate exception to the token rules: a brand mark is someone else's asset and keeps its own colors. That is also why it is a registry rather than an ",(0,a.jsx)(l.R0,{children:"<img>"})," at each call site — a wrong or stale logo is a trademark problem, not a styling one."]})]}),(0,a.jsx)(l.Ub,{id:"brand",title:"brand",caption:"61 registered keys. The mark fills whatever box you size, so sizing is the caller's.",children:(0,a.jsx)(l.UR,{children:(0,a.jsx)(l.Wn,{label:"brand",caption:"a sample of the registry",children:(0,a.jsx)("div",{className:"grid w-full grid-cols-4 gap-

15 sm:grid-cols-6",children:n.map(e=>(0,a.jsxs)("div",{className:"flex flex-col items-center gap-1.5",children:[(0,a.jsx)(r.RV,{brand:e,className:"size-8"}),(0,a.jsx)("span",{className:"font-mono text-paragraph-xs text-text-soft-400",children:e})]},e))})})})}),(0,a.jsxs)(l.Ub,{id:"size",title:"Sizing",caption:"There is no size prop — the mark takes the box you give it via className.",children:[(0,a.jsxs)(l.UR,{children:[(0,a.jsx)(l.Wn,{label:"size-4 / size-5 / size-6 / size-8",children:(0,a.jsxs)("div",{className:"flex items-end gap-5",children:[(0,a.jsx)(r.RV,{brand:"slack",className:"size-4"}),(0,a.jsx)(r.RV,{brand:"slack",className:"size-5"}),(0,a.jsx)(r.RV,{brand:"slack",className:"size-6"}),(0,a.jsx)(r.RV,{brand:"slack",className:"size-8"})]})}),(0,a.jsx)(l.Wn,{label:"in a disc",caption:"the common wrapper — a white disc with a hairline, mark at size-5",children:(0,a.jsx)("div",{className:"flex gap-3",children:["github","notion","linear"].map(e=>(0,a.jsx)("span",{className:"flex size-9 items-center justify-center rounded-full bg-bg-white-0 ring-[0.5px] ring-text-strong-950/10 ring-inset",children:(0,a.jsx)(r.RV,{brand:e,className:"size-5",imgClassName:"object-contain"})},e))})})]}),(0,a.jsxs)(l.rF,{children:["Pass ",(0,a.jsx)(l.R0,{children:'imgClassName="object-contain"'})," when the box is not square or the logo is wordmark-shaped — otherwise a wide mark stretches to fill."]})]}),(0,a.jsxs)(l.Ub,{id:"tone",title:"tone",caption:"auto swaps the asset with the theme. Force light or dark when the mark sits on a fixed surface.",children:[(0,a.jsxs)(l.UR,{children:[(0,a.jsx)(l.Wn,{label:'tone="auto"',caption:"default — follows the page theme",children:(0,a.jsx)("div",{className:"flex gap-5",children:i.map(e=>(0,a.jsx)(r.RV,{brand:e,className:"size-7"},e))})}),(0,a.jsx)(l.Wn,{label:'tone="light"',caption:"the light asset, pinned — for a mark on a permanently light chip",surfaceClassName:"bg-bg-white-0",children:(0,a.jsx)("div",{className:"flex gap-5",children:i.map(e=>(0,a.jsx)(r.RV,{brand:e,tone:"light",className:"size-7"},e))})}),(0,a.jsx)(l.Wn,{label:'tone="dark"',caption:"the dark asset, pinned — for a mark on a permanently dark fill",surfaceClassName:"bg-bg-strong-950",children:(0,a.jsx)("div",{className:"flex gap-5",children:i.map(e=>(0,a.jsx)(r.RV,{brand:e,tone:"dark",className:"size-7"},e))})})]}),(0,a.jsx)(l.rF,{children:"Only brands that registered a dark asset change; the rest resolve to their single mark in every tone. Pinning matters when the surface does not follow the theme — a dark chip in light mode still needs the dark-surface logo."})]}),(0,a.jsxs)(l.Ub,{id:"api",title:"API reference",children:[(0,a.jsx)(l.Xy,{rows:[{prop:"brand",type:"BrandMarkName",description:"The registry key — 61 of them. A key outside the union is a compile error, which is the point."},{prop:"tone",type:'"auto" | "light" | "dark"',defaultValue:'"auto"',description:"auto renders both assets and lets the theme show one. light/dark pin a single asset for surfaces that do not follow the theme."},{prop:"className",type:"string",description:"Sizes the mark. There is no size prop."},{prop:"imgClassName",type:"string",description:"Applied to the image itself — object-contain for non-square boxes or wordmarks."}]}),(0,a.jsx)(l.rF,{children:"Alt text comes from the registry, so the mark is always labelled with the brand name without a caller supplying one."})]})]})}t.d(s,{default:()=>o})},21945(e,s,t){var a=t(12334),r=t(49806),l=t(45166),n=t(94859),i=t(25997),o=t(81576),d=t(18129);let c=(0,r.createContext)(null);function x(e){let{entries:s}=e,[t,l]=(0,r.useState)(null);return((0,r.useEffect)(()=>{if(0===s.length)return;let e=s.map(e=>document.getElementById(e.id)).filter(e=>null!==e);if(0===e.length)return;let t=()=>{let s=.25*window.innerHeight,t=e[0]?.id??null;for(let a of e)a.getBoundingClientRect().top<=s&&(t=a.id);l(t)};return t(),window.addEventListener("scroll",t,{passive:!0}),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t),window.removeEventListener("resize",t)}},[s]),0===s.length)?null:(0,a.jsxs)("nav",{"aria-label":"On this page",className:"flex flex-col gap-3",children:[(0,a.jsx)("span",{className:"text-subheading-xs uppercase text-text-soft-400",children:"On this page"}),(0,a.jsx)("ul",{className:"flex flex-col",children:s.map(e=>{let s=e.id===t;return(0,a.jsx)("li",{children:(0,a.jsx)("a",{href:`#${e.id}`,className:(0,o.cn)("block border-l-2 py-1 pl-3 text-paragraph-sm transition-colors",s?"border-stroke-strong-950 text-text-strong-950":"border-stroke-soft-200 text-text-sub-600 hover:text-text-strong-950"),children:e.title})},e.id)})})]})}function h(e){let{slug:s,children:t}=e,o=(0,d.rx)(s),{previous:h,next:p}=(0,d.Gf)(s),[m,g]=(0,r.useState)([]),f=(0,r.useRef)(new Map),u=(0,r.useRef)(0),j=(0,r.useMemo)(()=>({register:e=>(f.current.has(e.id)||f.current.set(e.id,u.current++),g(s=>[...s.filter(s=>s.id!==e.id),e].sort((e,s)=>(f.current.get(e.id)??0)-(f.current.get(s.id)??0))),()=>{g(s=>s.filter(s=>s.id!==e.id))})}),[]);return(0,a.jsx)(c,{value:j,children:(0,a.jsxs)("div",{className:"mx-auto flex w-full max-w-6xl gap-12 px-5 py-10 sm:px-8 lg:px-12",children:[(0,a.jsxs)("article",{className:"min-w-0 flex-1",children:[(0,a.jsxs)("header",{className:"flex flex-col gap-3",children:[o?(0,a.jsxs)("p",{className:"text-paragraph-sm text-text-soft-400",children:[o.group,(0,a.jsx)("span",{className:"px-1.5 text-text-disabled-300",children:"/"}),(0,a.jsx)("span",{className:"text-text-sub-600",children:o.title})]}):null,(0,a.jsx)("h1",{className:"text-title-h5 text-text-strong-950 sm:text-title-h4",children:o?.title??s}),o?(0,a.jsx)("p",{className:"max-w-2xl text-paragraph-md text-text-sub-600",children:o.description}):null]}),(0,a.jsx)("div",{className:"mt-10 flex flex-col gap-12",children:t}),(0,a.jsxs)("footer",{className:"mt-16 grid gap-3 border-t-[0.5px] border-stroke-soft-200 pt-6 sm:grid-cols-2",children:[h?(0,a.jsxs)(i.N,{intent:"unstyled",href:`/internal/design/${h.slug}`,className:"group flex flex-col gap-1 rounded-12 px-4 py-3 ring-[0.5px] ring-inset ring-stroke-soft-200 transition-colors hover:bg-state-hover",children:[(0,a.jsxs)("span",{className:"flex items-center gap-1 text-paragraph-xs text-text-soft-400",children:[(0,a.jsx)(l.C,{className:"size-3"}),"Previous"]}),(0,a.jsx)("span",{className:"text-label-sm text-text-strong-950",children:h.title})]}):(0,a.jsx)("span",{}),p?(0,a.jsxs)(i.N,{intent:"unstyled",href:`/internal/design/${p.slug}`,className:"group flex flex-col items-end gap-1 rounded-12 px-4 py-3 text-right ring-[0.5px] ring-inset ring-stroke-soft-200 transition-colors hover:bg-state-hover",children:[(0,a.jsxs)("span",{className:"flex items-center gap-1 text-paragraph-xs text-text-soft-400",children:["Next",(0,a.jsx)(n.n,{className:"size-3"})]}),(0,a.jsx)("span",{className:"text-label-sm text-text-strong-950",children:p.title})]}):null]})]}),(0,a.jsx)("aside",{className:"hidden w-48 shrink-0 xl:block",children:(0,a.jsx)("div",{className:"sticky top-10",children:(0,a.jsx)(x,{entries:m})})})]})})}function p(e){let s,{id:t,title:l,caption:n,children:i}=e;return s=(0,r.use)(c),(0,r.useEffect)(()=>

1{if(s)return s.register({id:t,title:l})},[s,t,l]),(0,a.jsxs)("section",{"aria-labelledby":t,className:"flex scroll-mt-24 flex-col gap-4",children:[(0,a.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,a.jsx)("h2",{id:t,className:"group scroll-mt-24 text-title-h6 text-text-strong-950",children:(0,a.jsx)("a",{href:`#${t}`,className:"hover:underline",children:l})}),n?(0,a.jsx)("p",{className:"max-w-2xl text-paragraph-sm text-text-sub-600",children:n}):null]}),i]})}function m(e){let{children:s,className:t}=e;return(0,a.jsx)("div",{className:(0,o.cn)("divide-y-[0.5px] divide-stroke-soft-200 overflow-hidden rounded-16 bg-bg-white-0 ring-[0.5px] ring-inset ring-stroke-soft-200",t),children:s})}function g(e){let{label:s,caption:t,surfaceClassName:r,children:l}=e;return(0,a.jsxs)("div",{className:"flex flex-col gap-3 px-5 py-4",children:[s||t?(0,a.jsxs)("div",{className:"flex flex-wrap items-baseline gap-x-2 gap-y-0.5",children:[s?(0,a.jsx)("span",{className:"font-mono text-label-xs text-text-strong-950",children:s}):null,t?(0,a.jsx)("span",{className:"text-paragraph-xs text-text-soft-400",children:t}):null]}):null,(0,a.jsx)("div",{className:(0,o.cn)("flex flex-wrap items-center gap-3 rounded-12 px-4 py-5",r??"bg-bg-page"),children:l})]})}function f(e){let{title:s="API reference",rows:t}=e;return(0,a.jsx)("div",{className:"overflow-x-auto rounded-16 ring-[0.5px] ring-inset ring-stroke-soft-200",children:(0,a.jsxs)("table",{className:"w-full min-w-md border-collapse text-left",children:[(0,a.jsx)("caption",{className:"sr-only",children:s}),(0,a.jsx)("thead",{children:(0,a.jsxs)("tr",{className:"border-b-[0.5px] border-stroke-soft-200",children:[(0,a.jsx)("th",{className:"px-4 py-2.5 text-subheading-2xs uppercase text-text-soft-400",children:"Prop"}),(0,a.jsx)("th",{className:"px-4 py-2.5 text-subheading-2xs uppercase text-text-soft-400",children:"Type"}),(0,a.jsx)("th",{className:"px-4 py-2.5 text-subheading-2xs uppercase text-text-soft-400",children:"Default"}),(0,a.jsx)("th",{className:"w-2/5 px-4 py-2.5 text-subheading-2xs uppercase text-text-soft-400",children:"Description"})]})}),(0,a.jsx)("tbody",{className:"divide-y-[0.5px] divide-stroke-soft-200",children:t.map(e=>(0,a.jsxs)("tr",{className:"align-top",children:[(0,a.jsx)("td",{className:"px-4 py-3",children:(0,a.jsx)("code",{className:"font-mono text-label-xs text-text-strong-950",children:e.prop})}),(0,a.jsx)("td",{className:"px-4 py-3",children:(0,a.jsx)("code",{className:"font-mono text-paragraph-xs text-text-sub-600",children:e.type})}),(0,a.jsx)("td",{className:"px-4 py-3",children:e.defaultValue?(0,a.jsx)("code",{className:"font-mono text-paragraph-xs text-text-sub-600",children:e.defaultValue}):(0,a.jsx)("span",{className:"text-paragraph-xs text-text-disabled-300",children:"—"})}),(0,a.jsx)("td",{className:"px-4 py-3 text-paragraph-sm text-text-sub-600",children:e.description})]},e.prop))})]})})}function u(e){let{children:s}=e;return(0,a.jsx)("code",{className:"rounded-4 bg-fill-veil px-1 py-0.5 font-mono text-[0.85em] text-text-strong-950",children:s})}function j(e){let{children:s}=e;return(0,a.jsx)("p",{className:"max-w-2xl text-paragraph-sm text-text-sub-600",children:s})}t.d(s,{R0:()=>u,UR:()=>m,Ub:()=>p,Wn:()=>g,Xy:()=>f,rF:()=>j,ws:()=>h})}};