Themes & fonts

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { select, separator, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const grid = createGrid(ctx.host, { columns: demoColumns(lang), data: makeRows(3000), rowSelection: 'multiple', locale: lang });

  // A custom theme is just CSS variables on a class named fg-theme-<name>.
  const style = document.createElement('style');
  style.textContent = `
    .fg-theme-ocean { --fg-font: inherit; --fg-font-size: 13px; --fg-radius: 12px; --fg-cell-px: 14px;
      --fg-bg: #f3fbfb; --fg-fg: #0b3b3c; --fg-muted: #4f7a7b; --fg-header-bg: #dff2f1; --fg-header-fg: #0b3b3c;
      --fg-border: #b9dedc; --fg-row-border: #d5ecea; --fg-row-odd: #ebf7f6; --fg-row-hover: #d8f0ee;
      --fg-row-selected: #bfe6e2; --fg-accent: #0f8c86; --fg-accent-fg: #fff; --fg-focus: #0f8c86;
      --fg-popup-bg: #fff; --fg-input-bg: #fff; --fg-shadow: 0 12px 32px rgba(11,59,60,.18); }`;
  document.head.append(style);

  select(ctx, tr(lang, { en: 'Theme', ko: '테마' }), [
    ['light', 'Light'], ['dark', 'Dark'],
    ['board', tr(lang, { en: 'Board (Korean)', ko: '게시판형' })],
    ['erp', tr(lang, { en: 'ERP (Korean)', ko: '관리자·ERP형' })],
    ['excel', tr(lang, { en: 'Excel-like', ko: '엑셀형' })],
    ['classic', tr(lang, { en: 'Classic navy', ko: '진한 헤더형' })],
    ['ocean', tr(lang, { en: 'Ocean (custom CSS)', ko: 'Ocean (사용자 정의 CSS)' })],
  ], 'light', v => grid.setTheme(v));
  separator(ctx);
  select(ctx, tr(lang, { en: 'Font size', ko: '글꼴 크기' }), [9, 10, 11, 12, 13, 14, 15, 16, 17, 18].map(n => [String(n), `${n}px`] as [string, string]), '13',
    v => grid.setFont({ size: Number(v) }));
  select(ctx, tr(lang, { en: 'Font', ko: '글꼴' }), [
    ['', tr(lang, { en: 'Theme default', ko: '테마 기본' })],
    ['Georgia, serif', 'Georgia'],
    ['ui-monospace, Consolas, monospace', 'Monospace'],
    ['"Malgun Gothic", "Apple SD Gothic Neo", sans-serif', '맑은 고딕 / Apple SD'],
  ], '', v => grid.setFont({ family: v || null }));
  return grid;
}