From 1e65d458440f78de72bd0695176c759cdc17e9d4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 19 Aug 2021 08:36:12 -0400
Subject: [PATCH] add design token section

---
 docs/resources/contributing.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/docs/resources/contributing.md b/docs/resources/contributing.md
index fd14b48bf..93ba36027 100644
--- a/docs/resources/contributing.md
+++ b/docs/resources/contributing.md
@@ -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: