Theme
A Theme is the design tokens of a Brand, its color, type, spacing, radius, and motion, that every Component reads when it renders.
Properties
| Property | Type | Required | Description |
|---|---|---|---|
tokens | json | required | The token values, in light and dark modes. |
css | text | Extra CSS, applied after the tokens. |
Object
{
"$id": "https: //api.sb/ ledgerlark.com/ themes/ theme_1",
"$type": "Theme",
"tokens": {},
"css": ":root { --radius: 6px; }"
}Relationships
- A Theme themes many Brands: a Theme sets a Brand’s color, type, spacing and motion.
themes, inversethemedBy.
Verbs
createCreates a Theme.POST /{namespace}/themesgetReturns one Theme by id.GET /{namespace}/themes/{id}listReturns Themes, newest first, one page at a time.GET /{namespace}/themesupdateChanges the given properties of a Theme.PATCH /{namespace}/themes/{id}deleteDeletes a Theme; its history is kept.DELETE /{namespace}/themes/{id}
Permissions
Which Access level may call each Verb. One-way Verbs wait their delay window.
| Operation | owner | admin | member | viewer |
|---|---|---|---|---|
Theme.create | Yes | Yes | Yes | No |
Theme.get | Yes | Yes | Yes | Yes |
Theme.list | Yes | Yes | Yes | Yes |
Theme.update | Yes | Yes | Yes | No |
Theme.delete | Yes | Yes | Yes | No |
Call it
Add a theme to PatentPad.Example
{
"color": {
"light": { "accent": "oklch(52% 0.08 200)", "ink": "oklch(24% 0.02 220)", "paper": "oklch(98% 0.004 200)" },
"dark": { "accent": "oklch(70% 0.08 200)", "ink": "oklch(93% 0.01 200)", "paper": "oklch(19% 0.02 220)" }
},
"font": { "display": "Newsreader", "body": "Public Sans" },
"radius": { "card": "6px" },
"motion": { "duration": "200ms", "easing": "ease-out", "reduce": "0ms" }
}