The respective staff members should be able to customize the theme of public-facing tournament pages (management pages still under consideration).
How?
Database
Create a nullable theme field on the Tournament table of type jsonb. The jsonb's type will be an object containing:
A key with a boolean value to refer to whether or not the theme is being used in public-facing pages or not (useTheme: boolean maybe).
Keys containing the colors for the primary and surface colors, both from 50 to 900 shades.
A key that stores the base font family and another one for the headings.
A key that stores the base font color and another one for the headings.
tRPC
Update the updateTournament procedure to include the theme field mentioned above with the following as input (theme is an object): The base primary color (primary-500), the base surface color (surface-500), base font family, base font color, headings font family, headings font color.
The font families (for both base and headings) can simply be a union of string literals containing the name of the font families.
The font colors for base must be a number between 1 and 3 (1 = white, 2 = surface-100, 3 = primary-100) and the font colors for headings must be a number between 1 and 6 (1 = white, 2 = primary-100, 3 = primary-200, 4 = primary-300, 5 = primary-400, 6 = primary-500).
UI
The theme customization UI will be in the Assets page, page which will be renamed to Design (/design). The design would be roughly like the image below.
L-Mario564
commented
2 weeks ago
Why?
The respective staff members should be able to customize the theme of public-facing tournament pages (management pages still under consideration).
How?
Database
Create a nullable
themefield on theTournamenttable of type jsonb. The jsonb's type will be an object containing:useTheme: booleanmaybe).tRPC
Update the
updateTournamentprocedure to include thethemefield mentioned above with the following as input (theme is an object): The base primary color (primary-500), the base surface color (surface-500), base font family, base font color, headings font family, headings font color.To avoid the possibility of unmatching colors being passed as values, the 500 shade of primary and surface are passed and from there, 50, 100, 200, 300, 400, 600, 700, 800 and 900 are generated. For a possible reference on how to do this see
generatePalettefunction in Skeleton's repo: https://github.com/skeletonlabs/skeleton/blob/dev/sites/skeleton.dev/src/lib/layouts/DocsThemer/colors.ts.The font families (for both base and headings) can simply be a union of string literals containing the name of the font families.
The font colors for base must be a number between 1 and 3 (1 = white, 2 = surface-100, 3 = primary-100) and the font colors for headings must be a number between 1 and 6 (1 = white, 2 = primary-100, 3 = primary-200, 4 = primary-300, 5 = primary-400, 6 = primary-500).
UI
The theme customization UI will be in the Assets page, page which will be renamed to Design (
/design). The design would be roughly like the image below.Provide some way of previewing the theme.