feat: font family selection

[benlife5]

• Links a set of default Google Fonts to the via themeResolver
• Exports that list of default fonts for use in theme.config
• Implements a custom Font Picker in the theme sidebar for any field with the plugin fontFamily
• Exports utilities for generating font weight options based on the selected font family

PR for the other library components coming later

Usage

//theme.config.ts
const fonts: FontRegistry = {
  Georgia: {
    italics: true,
    minWeight: 400,
    maxWeight: 900,
    fallback: "serif",
  },
  ...defaultFonts,
};
const fontOptions = constructFontSelectOptions(fonts);
export const themeConfig: ThemeConfig = {
  heading1: {
      label: "Heading 1",
      styles: {
        fontFamily: {
          label: "Font",
          type: "select",
          plugin: "fontFamily",
          options: fontOptions,
          default: "sans-serif",
        },
        fontWeight: {
          label: "Font Weight",
          type: "select",
          plugin: "fontWeight",
          options: () => (
            getFontWeightOptions({
              fontCssVariable: "--fontFamily-heading1-fontFamily",
              fontList: fonts,
            })
          ),
          default: "700",
        },
      },
    },

Dropdown

File Breakdown

Google Fonts

• src/utils/applyTheme.ts
• src/utils/visualEditorFonts.ts

Component Updates

• src/components/puck/atoms/body.tsx
• src/components/puck/atoms/heading.tsx
• • src/components/puck/BodyText.tsx
• src/components/puck/HeadingText.tsx

Theme Manager sidebar font picker

• src/internal/puck/components/FontSelector.tsx
• src/internal/puck/ui/puck.css
• src/internal/utils/constructThemePuckFields.ts