/* * Bonsai brand tokens for the Scalar docs site. * * Values are transcribed from the Bonsai app's design tokens: * Bonsai/app/javascript/stylesheets/variables/base-palette.css * Bonsai/app/javascript/stylesheets/variables/theme-tokens.css * * Transcribed, not imported. The app switches themes on [data-theme="dark"]; * Scalar switches on .light-mode / .dark-mode on . Importing the upstream * files would define every token but never switch any of them. * * One deliberate divergence, on the accent — see the light-mode block. */ .light-mode { /* The app links in --color-primary (#22ad01) on white, which is 2.98:1 — * under WCAG AA. Docs are far more link-dense than the app, so we use * --color-primary-dark (#005542, 8.83:1) instead, which the app already * defines for this exact purpose and uses for text and fills elsewhere. * Brand green stays on the logo and on dark surfaces, where it does pass. */ --scalar-color-accent: #005542; --scalar-background-accent: #0055421a; --scalar-color-1: #121212; /* --text-default / --black */ --scalar-color-2: #616161; /* --text-muted / --grey-6 */ --scalar-color-3: #96a6a2; /* --text-lighter / --grey-9 */ --scalar-background-1: #ffffff; /* --bg-content */ --scalar-background-2: #fcfcfc; /* --bg-content-alt / --grey-fc */ --scalar-background-3: #f5f5f5; /* --bg-grey-f5 */ --scalar-border-color: #ececec; /* --border-content / --grey-e */ } .dark-mode { /* On #121212 the brand green is 6.29:1, so dark mode matches the app exactly. */ --scalar-color-accent: #22ad01; /* --color-primary */ --scalar-background-accent: #22ad011a; --scalar-color-1: #f5f5f5; /* --text-default / --grey-f5 */ --scalar-color-2: #ccd0d2; /* --text-muted / --grey-c */ --scalar-color-3: #96a6a2; /* --text-lighter / --grey-9 */ --scalar-background-1: #1a1a1a; /* --bg-content */ --scalar-background-2: #191c1d; /* --bg-content-alt / --grey-1 */ --scalar-background-3: #232528; /* --bg-grey-f5 -> --grey-2 */ --scalar-border-color: #303032; /* --border-content / --grey-3 */ } /* --bg-sidebar is its own token upstream and does not track --bg-content. */ .light-mode .t-doc__sidebar { --scalar-sidebar-background-1: #fafafa; /* --grey-fa */ --scalar-sidebar-color-active: #005542; } .dark-mode .t-doc__sidebar { --scalar-sidebar-background-1: #121212; /* --black */ --scalar-sidebar-color-active: #22ad01; } /* Scalar hard-codes `height: 28px; width: auto` on the sidebar logo (24px in a * header). There is no size option in scalar.config.json, so it has to be * overridden here. * * bonsai-lockup-*.png is 996x345, but only the top 58% is the mark + "bonsai" — * the rest is the "by zoom" row. At Scalar's 28px that leaves the wordmark ~16px * tall, which is what reads as crunched. Sizing on width instead pins the lockup's * horizontal footprint: 105px comes out ~36px tall, so the wordmark lands at ~21px. * * Two classes are needed to outspecify Scalar's `.logo[data-v-]`; the hash * is build-generated, so don't match on it. `height: auto` keeps the ratio. */ .t-doc__sidebar img.logo, .t-header img.logo { width: 105px; height: auto; } :root { /* --font-body. The app defines no mono token, so --scalar-font-code is left alone. */ --scalar-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', 'Geist', Helvetica, Arial, sans-serif; /* --border-radius-medium; every Scalar radius derives from this one. */ --scalar-radius: 8px; }