@maiertech/preset v0.5.2
title: '@maiertech/preset'
Package
@maiertech/preset
is a Theme UI preset. It
- uses
@theme-ui/preset-basefor defaults, - sets the colors for the Theme UI color scheme,
- customizes theme scales,
- customizes variants for Theme UI components,
- customizes variants for
@maiertech/components, and - customizes styles for MDX content.
Defaults
You can lookup the defaults here.
Colors
This preset supports the following colors from the Theme UI color scheme:
| Key | Description |
|---|---|
text | Text color. Should have AAA contrast with background. |
background | Background color. Should have AAA contrast with text. |
primary | Primary brand color for links, buttons, etc. Should have at least AA contrast with background. |
secondary | A secondary brand color for alternative styling. Should have at least AA contrast with background. |
highlight | A background color for highlighting text. Should have at least AA contrast with text. |
You can customize these colors in your project with the colors key. There are
different ways to go about choosing colors. You can start with an
expertly-crafted pallette like Tailwind's.
Or use a pallette generator like Palx. Use
Colorable to determine the constrast between
two colors.
Contributing
Work with two terminals. In the first terminal run
yarn workspace @maiertech/preset run watchand in the second terminal run
yarn workspace docs run devThe first command watches for changes in the @maiertech/preset workspace and
bundles the @maiertech/preset package whenever it detects changes. The second
command launches the docs, which use the local @maiertech/preset package as
dependency.