Skip to content

Commit

Permalink
add design token section
Browse files Browse the repository at this point in the history
  • Loading branch information
claviska committed Aug 19, 2021
1 parent 99750b8 commit 1e65d45
Showing 1 changed file with 19 additions and 0 deletions.
19 changes: 19 additions & 0 deletions docs/resources/contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,25 @@ Parts let you target a specific element inside the component's shadow DOM but, b

This convention can be relaxed when the developer experience is greatly improved by not following these suggestions.

### Design Token Color Values

All design tokens that implement a color value must do so in the following `R G B` format for consistency.

```css
:root {
--sl-color-sky-500: 14 165 233;
}
```

This format requires the consumer to use the `rgb()` function in their stylesheets, but it also lets them control each token's alpha channel.

```css
.example {
color: rgb(var(--sl-color-sky-500));
background-color: rgb(var(--sl-color-sky-500) / 5%); /* 5% opacity */
}
```

### Form Controls

Form controls should support validation through the following conventions:
Expand Down

0 comments on commit 1e65d45

Please sign in to comment.