feat: add new theme token

- add canvas palette on --o-color-canvas-{n} variable
circular-o · Jul 6, 2023 · f56534e · f56534e
1 parent 757b039
commit f56534e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/docs/tokens/color.md b/docs/tokens/color.md
@@ -98,6 +98,24 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
   <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-neutral-950);"></div>950</div>
 </div>
 
+<div class="color-palette">
+  <div class="color-palette__name">
+    Canvas<br>
+    <code>--o-color-canvas-<em>{n}</em></code>
+  </div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-50);"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-100);"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-200);"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-300);"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-400);"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-500);"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-600);"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-700);"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-800);"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-900);"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--o-color-canvas-950);"></div>950</div>
+</div>
+
 <div class="color-palette">
   <div class="color-palette__name">
     Black & White<br>

diff --git a/src/themes/light.css b/src/themes/light.css
@@ -193,6 +193,19 @@
   --o-color-neutral-900: var(--o-color-CW-900);
   --o-color-neutral-950: var(--o-color-CW-950);
 
+  /* Canvas */
+  --o-color-canvas-50: var(--o-color-GR-50);
+  --o-color-canvas-100: var(--o-color-GR-100);
+  --o-color-canvas-200: var(--o-color-GR-200);
+  --o-color-canvas-300: var(--o-color-GR-300);
+  --o-color-canvas-400: var(--o-color-GR-400);
+  --o-color-canvas-500: var(--o-color-GR-500);
+  --o-color-canvas-600: var(--o-color-GR-600);
+  --o-color-canvas-700: var(--o-color-GR-700);
+  --o-color-canvas-800: var(--o-color-GR-800);
+  --o-color-canvas-900: var(--o-color-GR-900);
+  --o-color-canvas-950: var(--o-color-GR-950);
+
   /* Neutral one-offs */
   --o-color-neutral-0: hsl(0, 0%, 100%);
   --o-color-neutral-1000: hsl(0, 0%, 0%);