Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme customization #62

Open
L-Mario564 opened this issue Jun 14, 2024 · 1 comment
Open

Theme customization #62

L-Mario564 opened this issue Jun 14, 2024 · 1 comment
Assignees
Labels
database Database schema related issues priority: high size: xl trpc tRPC related issues ui UI & design (frontend) related issues

Comments

@L-Mario564
Copy link
Contributor

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 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.

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 generatePalette function 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.

image
Mock-up of the design, not the final one

Provide some way of previewing the theme.

@L-Mario564 L-Mario564 added database Database schema related issues trpc tRPC related issues ui UI & design (frontend) related issues size: xl labels Jun 14, 2024
@L-Mario564
Copy link
Contributor Author

Database part done

@L-Mario564 L-Mario564 moved this from Todo to Incomplete in Kyoso Development Board Jun 16, 2024
@L-Mario564 L-Mario564 moved this from Incomplete to In Progress in Kyoso Development Board Jun 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
database Database schema related issues priority: high size: xl trpc tRPC related issues ui UI & design (frontend) related issues
Projects
Status: In Progress
Development

No branches or pull requests

2 participants