githubTheme.ts

import {create} from 'storybook/theming/create'

const BRAND_TITLE = 'Storybook Addon Performance Panel'
const BRAND_URL = 'https://github.com/github/storybook-addon-performance-panel'

// Inline data-URI variants of the GitHub Octocat mark so the images are
// self-contained and require no static-file serving configuration.
// Dark fill (#1F2328) for light backgrounds; light fill (#E6EDF3) for dark.
const MARK_DARK =
  'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22448%22%20height%3D%22127%22%20viewBox%3D%220%200%20448%20127%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M57.6394%2085.3848C45.0066%2083.8535%2036.1062%2074.7617%2036.1062%2062.9902C36.1062%2058.2051%2037.8289%2053.0371%2040.7%2049.5918C39.4558%2046.4336%2039.6472%2039.7344%2041.0828%2036.959C44.9109%2036.4805%2050.0789%2038.4902%2053.1414%2041.2656C56.7781%2040.1172%2060.6062%2039.543%2065.2957%2039.543C69.9851%2039.543%2073.8132%2040.1172%2077.2585%2041.1699C80.2253%2038.4902%2085.489%2036.4805%2089.3171%2036.959C90.657%2039.543%2090.8484%2046.2422%2089.6042%2049.4961C92.6667%2053.1328%2094.2937%2058.0137%2094.2937%2062.9902C94.2937%2074.7617%2085.3933%2083.6621%2072.5691%2085.2891C75.823%2087.3945%2078.0242%2091.9883%2078.0242%2097.252L78.0242%20107.205C78.0242%20110.076%2080.4167%20111.703%2083.2878%20110.555C100.61%20103.951%20114.2%2086.6289%20114.2%2065.1914C114.2%2038.1074%2092.1882%2016%2065.1042%2016C38.0203%2016%2016.2%2038.1074%2016.2%2065.1914C16.2%2086.4375%2029.6941%20104.047%2047.8777%20110.65C50.4617%20111.607%2052.95%20109.885%2052.95%20107.301L52.95%2099.6445C51.6101%20100.219%2049.8875%20100.602%2048.3562%20100.602C42.0398%20100.602%2038.3074%2097.1563%2035.6277%2090.7441C34.575%2088.1602%2033.4265%2086.6289%2031.2253%2086.3418C30.0769%2086.2461%2029.6941%2085.7676%2029.6941%2085.1934C29.6941%2084.0449%2031.6082%2083.1836%2033.5222%2083.1836C36.2976%2083.1836%2038.6902%2084.9063%2041.1785%2088.4473C43.0925%2091.2227%2045.1023%2092.4668%2047.4949%2092.4668C49.8875%2092.4668%2051.4187%2091.6055%2053.6199%2089.4043C55.2468%2087.7773%2056.491%2086.3418%2057.6394%2085.3848Z%22%20fill%3D%22white%22%2F%3E%3Cg%20clip-path%3D%22url(%23clip0_731_27182)%22%3E%3Cpath%20d%3D%22M204.937%2099.0045L204.937%2049.2827L218.915%2049.2827L218.915%2099.0045L204.937%2099.0045ZM246.016%2099.0045C236.727%2099.0045%20233.099%2095.0232%20233.099%2086.6183L233.099%2060.9611L224.252%2060.9611L224.252%2049.2827L233.099%2049.2827L233.099%2039.3737L247.078%2036.1002L247.078%2049.2827L257.429%2049.2827L257.429%2060.9611L247.078%2060.9611L247.078%2083.5217C247.078%2086.2644%20248.317%2087.3261%20251.059%2087.3261L257.429%2087.3261L257.429%2099.0045L246.016%2099.0045ZM343.47%2099.8892C332.588%2099.8892%20326.66%2093.8731%20326.66%2082.9024L326.66%2049.2827L340.728%2049.2827L340.728%2079.1866C340.728%2085.2912%20343.47%2088.6532%20348.69%2088.6532C354.706%2088.6532%20359.307%2083.0794%20359.307%2075.4707L359.307%2049.2827L373.374%2049.2827L373.374%2099.0045L359.307%2099.0045L359.307%2090.5996C356.653%2095.9964%20350.283%2099.8892%20343.47%2099.8892ZM410.613%2099.8892C403.832%2099.8892%20397.639%2095.9964%20394.687%2090.4226L394.687%2099.0045L380.709%2099.0045L380.709%2029.6417L394.776%2029.6417L394.776%2058.3954C397.639%2052.3792%20404.098%2048.1325%20410.613%2048.1325C424.181%2048.1325%20431.348%2057.5107%20430.873%2074.0551C431.348%2090.4226%20423.916%2099.8892%20410.613%2099.8892ZM405.658%2088.1223C412.945%2088.1223%20416.926%2082.7255%20416.452%2074.0551C416.926%2065.2963%20412.945%2059.8994%20405.658%2059.8994C399.851%2059.8994%20395.251%2065.5617%20394.776%2073.3473L394.776%2074.1436C395.251%2082.1946%20399.851%2088.1223%20405.658%2088.1223ZM304.734%2029.6417L304.734%2057.7761L278.369%2057.7761L278.369%2029.6417L263.329%2029.6417L263.329%2099.0045L278.369%2099.0045L278.369%2071.224L304.734%2071.224L304.734%2099.0045L319.775%2099.0045L319.775%2029.6417L304.734%2029.6417ZM166.628%20100.332C146.102%20100.332%20133.185%2086.2644%20133.185%2064.2346C133.185%2042.2048%20146.368%2028.3146%20167.247%2028.3146C184.234%2028.3146%20194.497%2035.5693%20197.77%2047.7786L182.553%2051.406C180.695%2044.7705%20175.387%2041.1431%20167.247%2041.1431C155.126%2041.1431%20148.579%2049.1057%20148.579%2064.2346C148.579%2079.3635%20154.949%2087.503%20166.893%2087.503C177.864%2087.503%20184.411%2080.7791%20184.411%2069.366L184.411%2066.7119L188.304%2072.1087L165.655%2072.1087L165.655%2059.3686L199.628%2059.3686L199.628%2067.4196C199.628%2088.5647%20187.331%20100.332%20166.628%20100.332ZM211.926%2044.5936C216.615%2044.5936%20220.243%2040.9662%20220.243%2036.2771C220.243%2031.5881%20216.615%2027.9607%20211.926%2027.9607C207.237%2027.9607%20203.61%2031.5881%20203.61%2036.2771C203.61%2040.9662%20207.237%2044.5936%20211.926%2044.5936Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_731_27182%22%3E%3Crect%20width%3D%22298.068%22%20height%3D%2275.9408%22%20fill%3D%22white%22%20transform%3D%22translate(133.185%2025.4926)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E'

const MARK_LIGHT =
  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5OCA5NiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQ4Ljg1NCAwQzIxLjgzOSAwIDAgMjIgMCA0OS4yMTdjMCAyMS43NTYgMTMuOTkzIDQwLjE3MiAzMy40MDUgNDYuNjkgMi40MjcuNDkgMy4zMTYtMS4wNTkgMy4zMTYtMi4zNjIgMC0xLjE0MS0uMDgtNS4wNTItLjA4LTkuMTI3LTEzLjU5IDIuOTM0LTE2LjQyLTUuODY3LTE2LjQyLTUuODY3LTIuMTg0LTUuNzA0LTUuNDItNy4xNy01LjQyLTcuMTctNC40NDgtMy4wMTUuMzI0LTMuMDE1LjMyNC0zLjAxNSA0LjkzNC4zMjYgNy41MjMgNS4wNTIgNy41MjMgNS4wNTIgNC4zNjcgNy40OTYgMTEuNDA0IDUuMzc4IDE0LjIzNSA0LjA3NC40MDQtMy4xNzggMS42OTktNS4zNzggMy4wNzQtNi42LTEwLjgzOS0xLjE0MS0yMi4yNDMtNS4zNzgtMjIuMjQzLTI0LjI4MyAwLTUuMzc4IDEuOTQtOS43NzggNS4wMTQtMTMuMi0uNDg1LTEuMjIyLTIuMTg0LTYuMjc1LjQ4Ni0xMy4wMzggMCAwIDQuMTI1LTEuMzA0IDEzLjQyNiA1LjA1MmE0Ni45NyA0Ni45NyAwIDAgMSAxMi4yMTQtMS42M2M0LjEyNSAwIDguMzMuNTcxIDEyLjIxMyAxLjYzIDkuMzAyLTYuMzU2IDEzLjQyNy01LjA1MiAxMy40MjctNS4wNTIgMi42NyA2Ljc2My45NyAxMS44MTYuNDg1IDEzLjAzOCAzLjE1NSAzLjQyMiA1LjAxNSA3LjgyMiA1LjAxNSAxMy4yIDAgMTguOTA1LTExLjQwNCAyMy4wNi0yMi4zMjQgMjQuMjgzIDEuNzggMS41NDggMy4zMTYgNC40ODEgMy4zMTYgOS4xMjYgMCA2LjYtLjA4IDExLjg5Ny0uMDggMTMuNTI2IDAgMS4zMDQuODkgMi44NTMgMy4zMTYgMi4zNjQgMTkuNDEyLTYuNTIgMzMuNDA1LTI0LjkzNSAzMy40MDUtNDYuNjkxQzk3LjcwNyAyMiA3NS43ODggMCA0OC44NTQgMHoiIGZpbGw9IiNFNkVERjMiLz48L3N2Zz4='

const brandConfig = {
  brandUrl: BRAND_URL,
  brandTarget: '_blank',
} as const

// GitHub Primer system-UI font stacks
const FONT_BASE = '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif'
const FONT_CODE = '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace'

export const githubLightTheme = create({
  base: 'light',
  ...brandConfig,
  brandTitle: `<img src="${MARK_DARK}" alt="" style="vertical-align: middle; margin-right: 8px" />${BRAND_TITLE}`,

  // Primer light palette
  colorPrimary: '#0969da',
  colorSecondary: '#0969da',

  appBg: '#f6f8fa',
  appContentBg: '#ffffff',
  appHoverBg: '#eaeef2',
  appPreviewBg: '#ffffff',
  appBorderColor: '#d0d7de',
  appBorderRadius: 6,

  fontBase: FONT_BASE,
  fontCode: FONT_CODE,

  textColor: '#1f2328',
  textInverseColor: '#ffffff',
  textMutedColor: '#636c76',

  barTextColor: '#636c76',
  barHoverColor: '#0969da',
  barSelectedColor: '#0969da',
  barBg: '#ffffff',

  buttonBg: '#f6f8fa',
  buttonBorder: '#d0d7de',

  booleanBg: '#eaeef2',
  booleanSelectedBg: '#0969da',

  inputBg: '#ffffff',
  inputBorder: '#d0d7de',
  inputTextColor: '#1f2328',
  inputBorderRadius: 6,
})

export const githubDarkTheme = create({
  base: 'dark',
  ...brandConfig,
  brandTitle: `<img src="${MARK_LIGHT}" alt="" style="vertical-align: middle; margin-right: 8px" />${BRAND_TITLE}`,

  // Primer dark palette
  colorPrimary: '#58a6ff',
  colorSecondary: '#58a6ff',

  appBg: '#161b22',
  appContentBg: '#0d1117',
  appHoverBg: '#21262d',
  appPreviewBg: '#0d1117',
  appBorderColor: '#30363d',
  appBorderRadius: 6,

  fontBase: FONT_BASE,
  fontCode: FONT_CODE,

  textColor: '#e6edf3',
  textInverseColor: '#0d1117',
  textMutedColor: '#848d97',

  barTextColor: '#848d97',
  barHoverColor: '#58a6ff',
  barSelectedColor: '#58a6ff',
  barBg: '#161b22',

  buttonBg: '#21262d',
  buttonBorder: '#30363d',

  booleanBg: '#21262d',
  booleanSelectedBg: '#58a6ff',

  inputBg: '#0d1117',
  inputBorder: '#30363d',
  inputTextColor: '#e6edf3',
  inputBorderRadius: 6,
})