Function createA11yPanelStyles

packages/devtools-a11y/src/core/styles/styles.ts:53–549

(theme: TanStackDevtoolsTheme)

const fontPx = (size: number) => `calc(${size}px * ${FONT_SCALE})`

function createA11yPanelStyles(theme: TanStackDevtoolsTheme) {
  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)

  const bg = t('#f9fafb;', '#191c24')
  const fg = t('#1e293b', '#e2e8f0')
  const border = t('#e2e8f0', '#292e3d')
  const muted = t('#64748b', '#94a3b8')
  const muted2 = t('#727c8b', '#818386')

  return {
    colors: { bg, fg, border, muted, muted2, theme },

    root: css`
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
    `,

    header: css`
      padding: 16px;
      border-bottom: 1px solid ${border};
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      anchor-name: --a11y-toast-anchor;
    `,
    headerTitleRow: css`
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    `,
    headerTitle: css`
      margin: 0;
      font-size: ${fontPx(16)};
      font-weight: 600;
    `,
    headerSub: css`
      font-size: ${fontPx(12)};
      color: ${muted};
      white-space: nowrap;
    `,
    headerActions: css`
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    `,
    primaryButton: css`
      padding: 8px 16px;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;