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

RFC: Level 2 Specification #5

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions RFC-Level-2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@

# RFC: Theme Specification: Level 2

The current specification is intentionally limited in scope to allow for extension and interpretation for how typography, color, layout and other values are grouped and defined.
This allows for some level of interoperability among the different libraries that adhere to the spec, but does not ensure interoperability of the theme objects themselves.

This proposal is for an optional specification that defines a schema for some of the individual scales in a theme object.
This is intended to make themes swappable and allow for transformations for use in libraries that do not adhere to this exact specification.

For the purposes of this document, the term *level 1* is used to reference the current theme specification as-is,
and the term *level 2* is this optional specification that builds on top of the current specification's foundation.

## Schema

While the overall object is still intended to be extensible, the following keys should be defined in a theme that conforms to level 2.
Additional, user-defined keys may be added to each scale as needed.

```
{
colors: {
text: String,
background: String,
primary: String,
secondary: String,
accent: String,
muted: String,
},
fonts: {
body: String,
heading: String,
monospace: String,
},
fontWeights: {
body: String or Number,
heading: String or Number,
bold: String or Number,
},
lineHeights: {
body: String or Number,
heading: String or Number,
},
fontSizes: Array (length 10),
space: Array (length 10),
}
```