npm - matcha-components - Versions diffs - 20.13.0 → 20.15.0 - Mend

matcha-components 20.13.0 → 20.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (810) hide show

package/src/documentation/tokens/colors.mdx ADDED Viewed

@@ -0,0 +1,1884 @@
+import { Meta } from "@storybook/addon-docs";
+<Meta title="Tokens / Colors" />
+# Colors
+Os tokens de cores definem as cores base usadas no design do material.
+### Atributos
+<div class="w-100-p">
+    <table class="w-100-p">
+        <thead>
+            <tr>
+                <th>Token</th>
+                <th>Propriedade</th>
+                <th>Preview</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>$dark-primary-text</td>
+                <td>rgba(black, 0.87)</td>
+                <td><div style={{ backgroundColor: 'rgba(0, 0, 0, 0.87)', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$light-primary-text</td>
+                <td>white</td>
+                <td><div style={{ backgroundColor: 'white', width: '24px', height: '24px', border: '1px solid #000' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-50</td>
+                <td>#fce7e7</td>
+                <td><div style={{ backgroundColor: '#fce7e7', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-100</td>
+                <td>#f7c4c4</td>
+                <td><div style={{ backgroundColor: '#f7c4c4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-200</td>
+                <td>#f29d9d</td>
+                <td><div style={{ backgroundColor: '#f29d9d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-300</td>
+                <td>#ed7575</td>
+                <td><div style={{ backgroundColor: '#ed7575', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-400</td>
+                <td>#e95858</td>
+                <td><div style={{ backgroundColor: '#e95858', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-500</td>
+                <td>#e53a3a</td>
+                <td><div style={{ backgroundColor: '#e53a3a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-600</td>
+                <td>#e23434</td>
+                <td><div style={{ backgroundColor: '#e23434', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-700</td>
+                <td>#de2c2c</td>
+                <td><div style={{ backgroundColor: '#de2c2c', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-800</td>
+                <td>#da2525</td>
+                <td><div style={{ backgroundColor: '#da2525', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-900</td>
+                <td>#d31818</td>
+                <td><div style={{ backgroundColor: '#d31818', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-a100</td>
+                <td>#ff8a80</td>
+                <td><div style={{ backgroundColor: '#ff8a80', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-a200</td>
+                <td>#ff5252</td>
+                <td><div style={{ backgroundColor: '#ff5252', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-a400</td>
+                <td>#ff1744</td>
+                <td><div style={{ backgroundColor: '#ff1744', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-a700</td>
+                <td>#d50000</td>
+                <td><div style={{ backgroundColor: '#d50000', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-200-alpha</td>
+                <td>#f29d9d33</td>
+                <td><div style={{ backgroundColor: '#f29d9d33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-500-alpha</td>
+                <td>#e53a3a33</td>
+                <td><div style={{ backgroundColor: '#e53a3a33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-red-900-alpha</td>
+                <td>#d3181833</td>
+                <td><div style={{ backgroundColor: '#d3181833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-50</td>
+                <td>#fce4ec</td>
+                <td><div style={{ backgroundColor: '#fce4ec', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-100</td>
+                <td>#f8bbd0</td>
+                <td><div style={{ backgroundColor: '#f8bbd0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-200</td>
+                <td>#f48fb1</td>
+                <td><div style={{ backgroundColor: '#f48fb1', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-300</td>
+                <td>#f06e9a</td>
+                <td><div style={{ backgroundColor: '#f06e9a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-400</td>
+                <td>#ec407a</td>
+                <td><div style={{ backgroundColor: '#ec407a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-500</td>
+                <td>#e91e63</td>
+                <td><div style={{ backgroundColor: '#e91e63', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-600</td>
+                <td>#d81b60</td>
+                <td><div style={{ backgroundColor: '#d81b60', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-700</td>
+                <td>#c2185b</td>
+                <td><div style={{ backgroundColor: '#c2185b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-800</td>
+                <td>#ad1457</td>
+                <td><div style={{ backgroundColor: '#ad1457', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-900</td>
+                <td>#880e4f</td>
+                <td><div style={{ backgroundColor: '#880e4f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-a100</td>
+                <td>#ff80ab</td>
+                <td><div style={{ backgroundColor: '#ff80ab', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-a200</td>
+                <td>#ff4081</td>
+                <td><div style={{ backgroundColor: '#ff4081', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-a400</td>
+                <td>#f50057</td>
+                <td><div style={{ backgroundColor: '#f50057', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-a700</td>
+                <td>#c51162</td>
+                <td><div style={{ backgroundColor: '#c51162', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-200-alpha</td>
+                <td>#f48fb133</td>
+                <td><div style={{ backgroundColor: '#f48fb133', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-pink-600-alpha</td>
+                <td>#d81b6033</td>
+                <td><div style={{ backgroundColor: '#d81b6033', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-50</td>
+                <td>#f3e6ff</td>
+                <td><div style={{ backgroundColor: '#f3e6ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-100</td>
+                <td>#e1bee7</td>
+                <td><div style={{ backgroundColor: '#e1bee7', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-200</td>
+                <td>#ce93d8</td>
+                <td><div style={{ backgroundColor: '#ce93d8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-300</td>
+                <td>#ba68c8</td>
+                <td><div style={{ backgroundColor: '#ba68c8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-400</td>
+                <td>#ab47bc</td>
+                <td><div style={{ backgroundColor: '#ab47bc', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-500</td>
+                <td>#9c27b0</td>
+                <td><div style={{ backgroundColor: '#9c27b0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-600</td>
+                <td>#8e24aa</td>
+                <td><div style={{ backgroundColor: '#8e24aa', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-700</td>
+                <td>#7b1fa2</td>
+                <td><div style={{ backgroundColor: '#7b1fa2', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-800</td>
+                <td>#6a1b9a</td>
+                <td><div style={{ backgroundColor: '#6a1b9a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-900</td>
+                <td>#4a148c</td>
+                <td><div style={{ backgroundColor: '#4a148c', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-a100</td>
+                <td>#ea80fc</td>
+                <td><div style={{ backgroundColor: '#ea80fc', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-a200</td>
+                <td>#e040fb</td>
+                <td><div style={{ backgroundColor: '#e040fb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-a400</td>
+                <td>#d500f9</td>
+                <td><div style={{ backgroundColor: '#d500f9', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-a700</td>
+                <td>#aa00ff</td>
+                <td><div style={{ backgroundColor: '#aa00ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-200-alpha</td>
+                <td>#ce93d833</td>
+                <td><div style={{ backgroundColor: '#ce93d833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-purple-500-alpha</td>
+                <td>#9c27b033</td>
+                <td><div style={{ backgroundColor: '#9c27b033', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-50</td>
+                <td>#ede7f6</td>
+                <td><div style={{ backgroundColor: '#ede7f6', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-100</td>
+                <td>#d1c4e9</td>
+                <td><div style={{ backgroundColor: '#d1c4e9', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-200</td>
+                <td>#b39ddb</td>
+                <td><div style={{ backgroundColor: '#b39ddb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-300</td>
+                <td>#9575cd</td>
+                <td><div style={{ backgroundColor: '#9575cd', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-400</td>
+                <td>#7e57c2</td>
+                <td><div style={{ backgroundColor: '#7e57c2', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-500</td>
+                <td>#673ab7</td>
+                <td><div style={{ backgroundColor: '#673ab7', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-600</td>
+                <td>#5e35b1</td>
+                <td><div style={{ backgroundColor: '#5e35b1', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-700</td>
+                <td>#512da8</td>
+                <td><div style={{ backgroundColor: '#512da8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-800</td>
+                <td>#4527a0</td>
+                <td><div style={{ backgroundColor: '#4527a0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-900</td>
+                <td>#311b92</td>
+                <td><div style={{ backgroundColor: '#311b92', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-a100</td>
+                <td>#cf97ff</td>
+                <td><div style={{ backgroundColor: '#cf97ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-a200</td>
+                <td>#be73ff</td>
+                <td><div style={{ backgroundColor: '#be73ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-a400</td>
+                <td>#9f2eff</td>
+                <td><div style={{ backgroundColor: '#9f2eff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-a700</td>
+                <td>#7212ff</td>
+                <td><div style={{ backgroundColor: '#7212ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-200-alpha</td>
+                <td>#b39ddb33</td>
+                <td><div style={{ backgroundColor: '#b39ddb33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-purple-500-alpha</td>
+                <td>#673ab733</td>
+                <td><div style={{ backgroundColor: '#673ab733', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-50</td>
+                <td>#e8eaf6</td>
+                <td><div style={{ backgroundColor: '#e8eaf6', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-100</td>
+                <td>#c5cae9</td>
+                <td><div style={{ backgroundColor: '#c5cae9', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-200</td>
+                <td>#9fa8da</td>
+                <td><div style={{ backgroundColor: '#9fa8da', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-300</td>
+                <td>#7986cb</td>
+                <td><div style={{ backgroundColor: '#7986cb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-400</td>
+                <td>#5c6bc0</td>
+                <td><div style={{ backgroundColor: '#5c6bc0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-500</td>
+                <td>#3f51b5</td>
+                <td><div style={{ backgroundColor: '#3f51b5', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-600</td>
+                <td>#3949ab</td>
+                <td><div style={{ backgroundColor: '#3949ab', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-700</td>
+                <td>#303f9f</td>
+                <td><div style={{ backgroundColor: '#303f9f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-800</td>
+                <td>#283593</td>
+                <td><div style={{ backgroundColor: '#283593', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-900</td>
+                <td>#1a237e</td>
+                <td><div style={{ backgroundColor: '#1a237e', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-a100</td>
+                <td>#8c9eff</td>
+                <td><div style={{ backgroundColor: '#8c9eff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-a200</td>
+                <td>#536dfe</td>
+                <td><div style={{ backgroundColor: '#536dfe', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-a400</td>
+                <td>#3d5afe</td>
+                <td><div style={{ backgroundColor: '#3d5afe', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-a700</td>
+                <td>#304ffe</td>
+                <td><div style={{ backgroundColor: '#304ffe', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-200-alpha</td>
+                <td>#9fa8da33</td>
+                <td><div style={{ backgroundColor: '#9fa8da33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-indigo-500-alpha</td>
+                <td>#3f51b533</td>
+                <td><div style={{ backgroundColor: '#3f51b533', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-50</td>
+                <td>#e4ebfb</td>
+                <td><div style={{ backgroundColor: '#e4ebfb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-100</td>
+                <td>#bccef4</td>
+                <td><div style={{ backgroundColor: '#bccef4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-200</td>
+                <td>#8faded</td>
+                <td><div style={{ backgroundColor: '#8faded', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-300</td>
+                <td>#628ce5</td>
+                <td><div style={{ backgroundColor: '#628ce5', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-400</td>
+                <td>#4074e0</td>
+                <td><div style={{ backgroundColor: '#4074e0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-500</td>
+                <td>#1e5bda</td>
+                <td><div style={{ backgroundColor: '#1e5bda', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-600</td>
+                <td>#1a53d6</td>
+                <td><div style={{ backgroundColor: '#1a53d6', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-700</td>
+                <td>#1649d0</td>
+                <td><div style={{ backgroundColor: '#1649d0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-800</td>
+                <td>#1240cb</td>
+                <td><div style={{ backgroundColor: '#1240cb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-900</td>
+                <td>#0a2fc2</td>
+                <td><div style={{ backgroundColor: '#0a2fc2', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-a100</td>
+                <td>#82b1ff</td>
+                <td><div style={{ backgroundColor: '#82b1ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-a200</td>
+                <td>#448aff</td>
+                <td><div style={{ backgroundColor: '#448aff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-a400</td>
+                <td>#2979ff</td>
+                <td><div style={{ backgroundColor: '#2979ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-a700</td>
+                <td>#2962ff</td>
+                <td><div style={{ backgroundColor: '#2962ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-200-alpha</td>
+                <td>#8faded33</td>
+                <td><div style={{ backgroundColor: '#8faded33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-500-alpha</td>
+                <td>#1e5bda33</td>
+                <td><div style={{ backgroundColor: '#1e5bda33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-50</td>
+                <td>#e1f5fe</td>
+                <td><div style={{ backgroundColor: '#e1f5fe', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-100</td>
+                <td>#b3e5fc</td>
+                <td><div style={{ backgroundColor: '#b3e5fc', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-200</td>
+                <td>#81d4fa</td>
+                <td><div style={{ backgroundColor: '#81d4fa', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-300</td>
+                <td>#4fc3f7</td>
+                <td><div style={{ backgroundColor: '#4fc3f7', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-400</td>
+                <td>#29b6f6</td>
+                <td><div style={{ backgroundColor: '#29b6f6', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-500</td>
+                <td>#03a9f4</td>
+                <td><div style={{ backgroundColor: '#03a9f4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-600</td>
+                <td>#039be5</td>
+                <td><div style={{ backgroundColor: '#039be5', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-700</td>
+                <td>#0288d1</td>
+                <td><div style={{ backgroundColor: '#0288d1', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-800</td>
+                <td>#0277bd</td>
+                <td><div style={{ backgroundColor: '#0277bd', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-900</td>
+                <td>#01579b</td>
+                <td><div style={{ backgroundColor: '#01579b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-a100</td>
+                <td>#80d8ff</td>
+                <td><div style={{ backgroundColor: '#80d8ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-a200</td>
+                <td>#40c4ff</td>
+                <td><div style={{ backgroundColor: '#40c4ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-a400</td>
+                <td>#33b6ff</td>
+                <td><div style={{ backgroundColor: '#33b6ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-a700</td>
+                <td>#0091ea</td>
+                <td><div style={{ backgroundColor: '#0091ea', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-200-alpha</td>
+                <td>#81d4fa33</td>
+                <td><div style={{ backgroundColor: '#81d4fa33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-blue-500-alpha</td>
+                <td>#03a9f433</td>
+                <td><div style={{ backgroundColor: '#03a9f433', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-50</td>
+                <td>#e0f7fa</td>
+                <td><div style={{ backgroundColor: '#e0f7fa', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-100</td>
+                <td>#b2ebf2</td>
+                <td><div style={{ backgroundColor: '#b2ebf2', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-200</td>
+                <td>#84e1eb</td>
+                <td><div style={{ backgroundColor: '#84e1eb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-300</td>
+                <td>#4dd0e1</td>
+                <td><div style={{ backgroundColor: '#4dd0e1', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-400</td>
+                <td>#08c3d6</td>
+                <td><div style={{ backgroundColor: '#08c3d6', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-500</td>
+                <td>#00bcd4</td>
+                <td><div style={{ backgroundColor: '#00bcd4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-600</td>
+                <td>#00acc1</td>
+                <td><div style={{ backgroundColor: '#00acc1', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-700</td>
+                <td>#02a1bc</td>
+                <td><div style={{ backgroundColor: '#02a1bc', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-800</td>
+                <td>#00838f</td>
+                <td><div style={{ backgroundColor: '#00838f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-900</td>
+                <td>#006064</td>
+                <td><div style={{ backgroundColor: '#006064', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-a100</td>
+                <td>#84ffff</td>
+                <td><div style={{ backgroundColor: '#84ffff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-a200</td>
+                <td>#18ffff</td>
+                <td><div style={{ backgroundColor: '#18ffff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-a400</td>
+                <td>#00e5ff</td>
+                <td><div style={{ backgroundColor: '#00e5ff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-a700</td>
+                <td>#00b8d4</td>
+                <td><div style={{ backgroundColor: '#00b8d4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-200-alpha</td>
+                <td>#84e1eb33</td>
+                <td><div style={{ backgroundColor: '#84e1eb33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-cyan-500-alpha</td>
+                <td>#00bcd433</td>
+                <td><div style={{ backgroundColor: '#00bcd433', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-50</td>
+                <td>#e0f2f1</td>
+                <td><div style={{ backgroundColor: '#e0f2f1', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-100</td>
+                <td>#b2dfdb</td>
+                <td><div style={{ backgroundColor: '#b2dfdb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-200</td>
+                <td>#80cbc4</td>
+                <td><div style={{ backgroundColor: '#80cbc4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-300</td>
+                <td>#4db6ac</td>
+                <td><div style={{ backgroundColor: '#4db6ac', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-400</td>
+                <td>#26a69a</td>
+                <td><div style={{ backgroundColor: '#26a69a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-500</td>
+                <td>#009688</td>
+                <td><div style={{ backgroundColor: '#009688', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-600</td>
+                <td>#00897b</td>
+                <td><div style={{ backgroundColor: '#00897b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-700</td>
+                <td>#00796b</td>
+                <td><div style={{ backgroundColor: '#00796b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-800</td>
+                <td>#00695c</td>
+                <td><div style={{ backgroundColor: '#00695c', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-900</td>
+                <td>#004d40</td>
+                <td><div style={{ backgroundColor: '#004d40', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-a100</td>
+                <td>#a7ffeb</td>
+                <td><div style={{ backgroundColor: '#a7ffeb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-a200</td>
+                <td>#64ffda</td>
+                <td><div style={{ backgroundColor: '#64ffda', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-a400</td>
+                <td>#1de9b6</td>
+                <td><div style={{ backgroundColor: '#1de9b6', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-a700</td>
+                <td>#00bfa5</td>
+                <td><div style={{ backgroundColor: '#00bfa5', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-200-alpha</td>
+                <td>#80cbc433</td>
+                <td><div style={{ backgroundColor: '#80cbc433', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-teal-500-alpha</td>
+                <td>#00968833</td>
+                <td><div style={{ backgroundColor: '#00968833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-50</td>
+                <td>#e2f2e9</td>
+                <td><div style={{ backgroundColor: '#e2f2e9', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-100</td>
+                <td>#b8dec8</td>
+                <td><div style={{ backgroundColor: '#b8dec8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-200</td>
+                <td>#88c8a3</td>
+                <td><div style={{ backgroundColor: '#88c8a3', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-300</td>
+                <td>#58b17e</td>
+                <td><div style={{ backgroundColor: '#58b17e', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-400</td>
+                <td>#35a162</td>
+                <td><div style={{ backgroundColor: '#35a162', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-500</td>
+                <td>#119046</td>
+                <td><div style={{ backgroundColor: '#119046', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-600</td>
+                <td>#0f883f</td>
+                <td><div style={{ backgroundColor: '#0f883f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-700</td>
+                <td>#0c7d37</td>
+                <td><div style={{ backgroundColor: '#0c7d37', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-800</td>
+                <td>#0a732f</td>
+                <td><div style={{ backgroundColor: '#0a732f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-900</td>
+                <td>#056120</td>
+                <td><div style={{ backgroundColor: '#056120', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-a100</td>
+                <td>#b9f6ca</td>
+                <td><div style={{ backgroundColor: '#b9f6ca', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-a200</td>
+                <td>#69f0ae</td>
+                <td><div style={{ backgroundColor: '#69f0ae', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-a400</td>
+                <td>#2cff5b</td>
+                <td><div style={{ backgroundColor: '#2cff5b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-a700</td>
+                <td>#13ff48</td>
+                <td><div style={{ backgroundColor: '#13ff48', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-200-alpha</td>
+                <td>#88c8a333</td>
+                <td><div style={{ backgroundColor: '#88c8a333', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-green-500-alpha</td>
+                <td>#11904633</td>
+                <td><div style={{ backgroundColor: '#11904633', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-50</td>
+                <td>#f1f8e9</td>
+                <td><div style={{ backgroundColor: '#f1f8e9', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-100</td>
+                <td>#dcedc8</td>
+                <td><div style={{ backgroundColor: '#dcedc8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-200</td>
+                <td>#c5e1a5</td>
+                <td><div style={{ backgroundColor: '#c5e1a5', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-300</td>
+                <td>#aed581</td>
+                <td><div style={{ backgroundColor: '#aed581', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-400</td>
+                <td>#9ccc65</td>
+                <td><div style={{ backgroundColor: '#9ccc65', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-500</td>
+                <td>#8bc34a</td>
+                <td><div style={{ backgroundColor: '#8bc34a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-600</td>
+                <td>#7cb342</td>
+                <td><div style={{ backgroundColor: '#7cb342', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-700</td>
+                <td>#689f38</td>
+                <td><div style={{ backgroundColor: '#689f38', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-800</td>
+                <td>#558b2f</td>
+                <td><div style={{ backgroundColor: '#558b2f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-900</td>
+                <td>#33691e</td>
+                <td><div style={{ backgroundColor: '#33691e', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-a100</td>
+                <td>#ccff90</td>
+                <td><div style={{ backgroundColor: '#ccff90', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-a200</td>
+                <td>#b2ff59</td>
+                <td><div style={{ backgroundColor: '#b2ff59', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-a400</td>
+                <td>#76ff03</td>
+                <td><div style={{ backgroundColor: '#76ff03', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-a700</td>
+                <td>#64dd17</td>
+                <td><div style={{ backgroundColor: '#64dd17', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-200-alpha</td>
+                <td>#c5e1a533</td>
+                <td><div style={{ backgroundColor: '#c5e1a533', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-green-700-alpha</td>
+                <td>#689f3833</td>
+                <td><div style={{ backgroundColor: '#689f3833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-50</td>
+                <td>#f0f7e0</td>
+                <td><div style={{ backgroundColor: '#f0f7e0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-100</td>
+                <td>#dbebb3</td>
+                <td><div style={{ backgroundColor: '#dbebb3', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-200</td>
+                <td>#c3de80</td>
+                <td><div style={{ backgroundColor: '#c3de80', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-300</td>
+                <td>#aad14d</td>
+                <td><div style={{ backgroundColor: '#aad14d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-400</td>
+                <td>#98c726</td>
+                <td><div style={{ backgroundColor: '#98c726', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-500</td>
+                <td>#86bd00</td>
+                <td><div style={{ backgroundColor: '#86bd00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-600</td>
+                <td>#7eb700</td>
+                <td><div style={{ backgroundColor: '#7eb700', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-700</td>
+                <td>#73ae00</td>
+                <td><div style={{ backgroundColor: '#73ae00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-800</td>
+                <td>#69a600</td>
+                <td><div style={{ backgroundColor: '#69a600', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-900</td>
+                <td>#569800</td>
+                <td><div style={{ backgroundColor: '#569800', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-a100</td>
+                <td>#f4ff81</td>
+                <td><div style={{ backgroundColor: '#f4ff81', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-a200</td>
+                <td>#eeff41</td>
+                <td><div style={{ backgroundColor: '#eeff41', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-a400</td>
+                <td>#c6ff00</td>
+                <td><div style={{ backgroundColor: '#c6ff00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-a700</td>
+                <td>#aeea00</td>
+                <td><div style={{ backgroundColor: '#aeea00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-200-alpha</td>
+                <td>#c3de8033</td>
+                <td><div style={{ backgroundColor: '#c3de8033', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-lime-500-alpha</td>
+                <td>#86bd0033</td>
+                <td><div style={{ backgroundColor: '#86bd0033', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-50</td>
+                <td>#fcf8e0</td>
+                <td><div style={{ backgroundColor: '#fcf8e0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-100</td>
+                <td>#f8edb3</td>
+                <td><div style={{ backgroundColor: '#f8edb3', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-200</td>
+                <td>#f4e180</td>
+                <td><div style={{ backgroundColor: '#f4e180', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-300</td>
+                <td>#efd54d</td>
+                <td><div style={{ backgroundColor: '#efd54d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-400</td>
+                <td>#ebcc26</td>
+                <td><div style={{ backgroundColor: '#ebcc26', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-500</td>
+                <td>#e8c300</td>
+                <td><div style={{ backgroundColor: '#e8c300', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-600</td>
+                <td>#e5bd00</td>
+                <td><div style={{ backgroundColor: '#e5bd00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-700</td>
+                <td>#e2b500</td>
+                <td><div style={{ backgroundColor: '#e2b500', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-800</td>
+                <td>#deae00</td>
+                <td><div style={{ backgroundColor: '#deae00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-900</td>
+                <td>#d8a100</td>
+                <td><div style={{ backgroundColor: '#d8a100', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-a100</td>
+                <td>#ffff8d</td>
+                <td><div style={{ backgroundColor: '#ffff8d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-a200</td>
+                <td>#ffff00</td>
+                <td><div style={{ backgroundColor: '#ffff00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-a400</td>
+                <td>#ffea00</td>
+                <td><div style={{ backgroundColor: '#ffea00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-a700</td>
+                <td>#ffd600</td>
+                <td><div style={{ backgroundColor: '#ffd600', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-200-alpha</td>
+                <td>#f4e18033</td>
+                <td><div style={{ backgroundColor: '#f4e18033', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-yellow-500-alpha</td>
+                <td>#e8c30033</td>
+                <td><div style={{ backgroundColor: '#e8c30033', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-50</td>
+                <td>#fef4e4</td>
+                <td><div style={{ backgroundColor: '#fef4e4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-100</td>
+                <td>#fee4ba</td>
+                <td><div style={{ backgroundColor: '#fee4ba', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-200</td>
+                <td>#fdd38d</td>
+                <td><div style={{ backgroundColor: '#fdd38d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-300</td>
+                <td>#fcc15f</td>
+                <td><div style={{ backgroundColor: '#fcc15f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-400</td>
+                <td>#fbb33c</td>
+                <td><div style={{ backgroundColor: '#fbb33c', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-500</td>
+                <td>#faa61a</td>
+                <td><div style={{ backgroundColor: '#faa61a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-600</td>
+                <td>#f99e17</td>
+                <td><div style={{ backgroundColor: '#f99e17', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-700</td>
+                <td>#f99513</td>
+                <td><div style={{ backgroundColor: '#f99513', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-800</td>
+                <td>#f88b0f</td>
+                <td><div style={{ backgroundColor: '#f88b0f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-900</td>
+                <td>#f67b08</td>
+                <td><div style={{ backgroundColor: '#f67b08', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-a100</td>
+                <td>#ffe57f</td>
+                <td><div style={{ backgroundColor: '#ffe57f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-a200</td>
+                <td>#ffd740</td>
+                <td><div style={{ backgroundColor: '#ffd740', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-a400</td>
+                <td>#ffc400</td>
+                <td><div style={{ backgroundColor: '#ffc400', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-a700</td>
+                <td>#ffab00</td>
+                <td><div style={{ backgroundColor: '#ffab00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-200-alpha</td>
+                <td>#fdd38d33</td>
+                <td><div style={{ backgroundColor: '#fdd38d33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-amber-500-alpha</td>
+                <td>#faa61a33</td>
+                <td><div style={{ backgroundColor: '#faa61a33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-50</td>
+                <td>#feefe3</td>
+                <td><div style={{ backgroundColor: '#feefe3', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-100</td>
+                <td>#fdd7b9</td>
+                <td><div style={{ backgroundColor: '#fdd7b9', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-200</td>
+                <td>#fbbc8a</td>
+                <td><div style={{ backgroundColor: '#fbbc8a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-300</td>
+                <td>#f9a15b</td>
+                <td><div style={{ backgroundColor: '#f9a15b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-400</td>
+                <td>#f88c37</td>
+                <td><div style={{ backgroundColor: '#f88c37', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-500</td>
+                <td>#f77814</td>
+                <td><div style={{ backgroundColor: '#f77814', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-600</td>
+                <td>#f67012</td>
+                <td><div style={{ backgroundColor: '#f67012', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-700</td>
+                <td>#f5650e</td>
+                <td><div style={{ backgroundColor: '#f5650e', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-800</td>
+                <td>#f35b0b</td>
+                <td><div style={{ backgroundColor: '#f35b0b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-900</td>
+                <td>#f14806</td>
+                <td><div style={{ backgroundColor: '#f14806', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-a100</td>
+                <td>#ffd180</td>
+                <td><div style={{ backgroundColor: '#ffd180', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-a200</td>
+                <td>#ffab40</td>
+                <td><div style={{ backgroundColor: '#ffab40', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-a400</td>
+                <td>#ff9100</td>
+                <td><div style={{ backgroundColor: '#ff9100', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-a700</td>
+                <td>#ff6d00</td>
+                <td><div style={{ backgroundColor: '#ff6d00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-200-alpha</td>
+                <td>#fbbc8a33</td>
+                <td><div style={{ backgroundColor: '#fbbc8a33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-orange-500-alpha</td>
+                <td>#f7781433</td>
+                <td><div style={{ backgroundColor: '#f7781433', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-50</td>
+                <td>#fbe9e7</td>
+                <td><div style={{ backgroundColor: '#fbe9e7', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-100</td>
+                <td>#ffccbc</td>
+                <td><div style={{ backgroundColor: '#ffccbc', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-200</td>
+                <td>#ffab91</td>
+                <td><div style={{ backgroundColor: '#ffab91', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-300</td>
+                <td>#ff8a65</td>
+                <td><div style={{ backgroundColor: '#ff8a65', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-400</td>
+                <td>#ff7043</td>
+                <td><div style={{ backgroundColor: '#ff7043', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-500</td>
+                <td>#ff5722</td>
+                <td><div style={{ backgroundColor: '#ff5722', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-600</td>
+                <td>#f4511e</td>
+                <td><div style={{ backgroundColor: '#f4511e', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-700</td>
+                <td>#e64a19</td>
+                <td><div style={{ backgroundColor: '#e64a19', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-800</td>
+                <td>#d84315</td>
+                <td><div style={{ backgroundColor: '#d84315', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-900</td>
+                <td>#bf360c</td>
+                <td><div style={{ backgroundColor: '#bf360c', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-a100</td>
+                <td>#ff9e80</td>
+                <td><div style={{ backgroundColor: '#ff9e80', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-a200</td>
+                <td>#ff6e40</td>
+                <td><div style={{ backgroundColor: '#ff6e40', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-a400</td>
+                <td>#ff3d00</td>
+                <td><div style={{ backgroundColor: '#ff3d00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-a700</td>
+                <td>#dd2c00</td>
+                <td><div style={{ backgroundColor: '#dd2c00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-200-alpha</td>
+                <td>#ffab9133</td>
+                <td><div style={{ backgroundColor: '#ffab9133', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-deep-orange-500-alpha</td>
+                <td>#ff572233</td>
+                <td><div style={{ backgroundColor: '#ff572233', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-50</td>
+                <td>#efebe9</td>
+                <td><div style={{ backgroundColor: '#efebe9', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-100</td>
+                <td>#d7ccc8</td>
+                <td><div style={{ backgroundColor: '#d7ccc8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-200</td>
+                <td>#bcaaa4</td>
+                <td><div style={{ backgroundColor: '#bcaaa4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-300</td>
+                <td>#a1887f</td>
+                <td><div style={{ backgroundColor: '#a1887f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-400</td>
+                <td>#8d6e63</td>
+                <td><div style={{ backgroundColor: '#8d6e63', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-500</td>
+                <td>#795548</td>
+                <td><div style={{ backgroundColor: '#795548', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-600</td>
+                <td>#6d4c41</td>
+                <td><div style={{ backgroundColor: '#6d4c41', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-700</td>
+                <td>#5d4037</td>
+                <td><div style={{ backgroundColor: '#5d4037', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-800</td>
+                <td>#4e342e</td>
+                <td><div style={{ backgroundColor: '#4e342e', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-900</td>
+                <td>#3e2723</td>
+                <td><div style={{ backgroundColor: '#3e2723', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-a100</td>
+                <td>#d7ccc8</td>
+                <td><div style={{ backgroundColor: '#d7ccc8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-a200</td>
+                <td>#bcaaa4</td>
+                <td><div style={{ backgroundColor: '#bcaaa4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-a400</td>
+                <td>#8d6e63</td>
+                <td><div style={{ backgroundColor: '#8d6e63', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-a700</td>
+                <td>#5d4037</td>
+                <td><div style={{ backgroundColor: '#5d4037', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-200-alpha</td>
+                <td>#bcaaa433</td>
+                <td><div style={{ backgroundColor: '#bcaaa433', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-brown-500-alpha</td>
+                <td>#79554833</td>
+                <td><div style={{ backgroundColor: '#79554833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-50</td>
+                <td>#fafafa</td>
+                <td><div style={{ backgroundColor: '#fafafa', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-100</td>
+                <td>#f5f5f5</td>
+                <td><div style={{ backgroundColor: '#f5f5f5', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-200</td>
+                <td>#eeeeee</td>
+                <td><div style={{ backgroundColor: '#eeeeee', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-300</td>
+                <td>#e0e0e0</td>
+                <td><div style={{ backgroundColor: '#e0e0e0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-400</td>
+                <td>#bdbdbd</td>
+                <td><div style={{ backgroundColor: '#bdbdbd', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-500</td>
+                <td>#9e9e9e</td>
+                <td><div style={{ backgroundColor: '#9e9e9e', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-600</td>
+                <td>#757575</td>
+                <td><div style={{ backgroundColor: '#757575', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-700</td>
+                <td>#616161</td>
+                <td><div style={{ backgroundColor: '#616161', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-800</td>
+                <td>#464646</td>
+                <td><div style={{ backgroundColor: '#464646', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-900</td>
+                <td>#262626</td>
+                <td><div style={{ backgroundColor: '#262626', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-a100</td>
+                <td>#f5f5f5</td>
+                <td><div style={{ backgroundColor: '#f5f5f5', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-a200</td>
+                <td>#eeeeee</td>
+                <td><div style={{ backgroundColor: '#eeeeee', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-a400</td>
+                <td>#bdbdbd</td>
+                <td><div style={{ backgroundColor: '#bdbdbd', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-a700</td>
+                <td>#616161</td>
+                <td><div style={{ backgroundColor: '#616161', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-200-alpha</td>
+                <td>#eeeeee33</td>
+                <td><div style={{ backgroundColor: '#eeeeee33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-grey-500-alpha</td>
+                <td>#9e9e9e33</td>
+                <td><div style={{ backgroundColor: '#9e9e9e33', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-50</td>
+                <td>#f5f7fa</td>
+                <td><div style={{ backgroundColor: '#f5f7fa', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-100</td>
+                <td>#d4dde3</td>
+                <td><div style={{ backgroundColor: '#d4dde3', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-200</td>
+                <td>#b5c1c8</td>
+                <td><div style={{ backgroundColor: '#b5c1c8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-300</td>
+                <td>#a3b1b9</td>
+                <td><div style={{ backgroundColor: '#a3b1b9', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-400</td>
+                <td>#91a0aa</td>
+                <td><div style={{ backgroundColor: '#91a0aa', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-500</td>
+                <td>#636f78</td>
+                <td><div style={{ backgroundColor: '#636f78', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-600</td>
+                <td>#4c545a</td>
+                <td><div style={{ backgroundColor: '#4c545a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-700</td>
+                <td>#3c4044</td>
+                <td><div style={{ backgroundColor: '#3c4044', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-800</td>
+                <td>#2b2c2d</td>
+                <td><div style={{ backgroundColor: '#2b2c2d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-900</td>
+                <td>#1b1c1d</td>
+                <td><div style={{ backgroundColor: '#1b1c1d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-a100</td>
+                <td>#acb4ba</td>
+                <td><div style={{ backgroundColor: '#acb4ba', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-a200</td>
+                <td>#707f88</td>
+                <td><div style={{ backgroundColor: '#707f88', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-a400</td>
+                <td>#435560</td>
+                <td><div style={{ backgroundColor: '#435560', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-a700</td>
+                <td>#223744</td>
+                <td><div style={{ backgroundColor: '#223744', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-200-alpha</td>
+                <td>#b5c1c833</td>
+                <td><div style={{ backgroundColor: '#b5c1c833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-blue-grey-500-alpha</td>
+                <td>#636f7833</td>
+                <td><div style={{ backgroundColor: '#636f7833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-50</td>
+                <td>#fbfbfb</td>
+                <td><div style={{ backgroundColor: '#fbfbfb', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-100</td>
+                <td>#f8f8f8</td>
+                <td><div style={{ backgroundColor: '#f8f8f8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-200</td>
+                <td>#f6f6f6</td>
+                <td><div style={{ backgroundColor: '#f6f6f6', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-300</td>
+                <td>#f4f4f4</td>
+                <td><div style={{ backgroundColor: '#f4f4f4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-400</td>
+                <td>#f2f2f2</td>
+                <td><div style={{ backgroundColor: '#f2f2f2', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-500</td>
+                <td>#f0f0f0</td>
+                <td><div style={{ backgroundColor: '#f0f0f0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-600</td>
+                <td>#efefef</td>
+                <td><div style={{ backgroundColor: '#efefef', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-700</td>
+                <td>#eeeeee</td>
+                <td><div style={{ backgroundColor: '#eeeeee', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-800</td>
+                <td>#ededed</td>
+                <td><div style={{ backgroundColor: '#ededed', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-900</td>
+                <td>#ececec</td>
+                <td><div style={{ backgroundColor: '#ececec', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-a100</td>
+                <td>#f8f8f8</td>
+                <td><div style={{ backgroundColor: '#f8f8f8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-a200</td>
+                <td>#f6f6f6</td>
+                <td><div style={{ backgroundColor: '#f6f6f6', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-a400</td>
+                <td>#f2f2f2</td>
+                <td><div style={{ backgroundColor: '#f2f2f2', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-a700</td>
+                <td>#eeeeee</td>
+                <td><div style={{ backgroundColor: '#eeeeee', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-200-alpha</td>
+                <td>#f6f6f633</td>
+                <td><div style={{ backgroundColor: '#f6f6f633', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-light-grey-500-alpha</td>
+                <td>#f0f0f033</td>
+                <td><div style={{ backgroundColor: '#f0f0f033', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-50</td>
+                <td>#464646</td>
+                <td><div style={{ backgroundColor: '#464646', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-100</td>
+                <td>#3b3b3b</td>
+                <td><div style={{ backgroundColor: '#3b3b3b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-200</td>
+                <td>#383838</td>
+                <td><div style={{ backgroundColor: '#383838', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-300</td>
+                <td>#303030</td>
+                <td><div style={{ backgroundColor: '#303030', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-400</td>
+                <td>#2b2b2b</td>
+                <td><div style={{ backgroundColor: '#2b2b2b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-500</td>
+                <td>#282828</td>
+                <td><div style={{ backgroundColor: '#282828', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-600</td>
+                <td>#262626</td>
+                <td><div style={{ backgroundColor: '#262626', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-700</td>
+                <td>#1b1b1b</td>
+                <td><div style={{ backgroundColor: '#1b1b1b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-800</td>
+                <td>#181818</td>
+                <td><div style={{ backgroundColor: '#181818', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-900</td>
+                <td>#161616</td>
+                <td><div style={{ backgroundColor: '#161616', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-a100</td>
+                <td>#3b3b3b</td>
+                <td><div style={{ backgroundColor: '#3b3b3b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-a200</td>
+                <td>#383838</td>
+                <td><div style={{ backgroundColor: '#383838', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-a400</td>
+                <td>#2b2b2b</td>
+                <td><div style={{ backgroundColor: '#2b2b2b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-a700</td>
+                <td>#1b1b1b</td>
+                <td><div style={{ backgroundColor: '#1b1b1b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-200-alpha</td>
+                <td>#38383833</td>
+                <td><div style={{ backgroundColor: '#38383833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-dark-grey-500-alpha</td>
+                <td>#28282833</td>
+                <td><div style={{ backgroundColor: '#28282833', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-white</td>
+                <td>#ffffff</td>
+                <td><div style={{ backgroundColor: '#ffffff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-base-black</td>
+                <td>#000000</td>
+                <td><div style={{ backgroundColor: '#000000', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-brand-primary</td>
+                <td>#86bd00</td>
+                <td><div style={{ backgroundColor: '#86bd00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-brand-primary-wl</td>
+                <td>#1e5bda</td>
+                <td><div style={{ backgroundColor: '#1e5bda', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-error</td>
+                <td>#e53a3a</td>
+                <td><div style={{ backgroundColor: '#e53a3a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-error-light</td>
+                <td>#f29d9d</td>
+                <td><div style={{ backgroundColor: '#f29d9d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-error-dark</td>
+                <td>#d31818</td>
+                <td><div style={{ backgroundColor: '#d31818', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-warning</td>
+                <td>#e8c300</td>
+                <td><div style={{ backgroundColor: '#e8c300', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-warning-light</td>
+                <td>#f4e180</td>
+                <td><div style={{ backgroundColor: '#f4e180', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-warning-dark</td>
+                <td>#d8a100</td>
+                <td><div style={{ backgroundColor: '#d8a100', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-success</td>
+                <td>#35a162</td>
+                <td><div style={{ backgroundColor: '#35a162', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-success-light</td>
+                <td>#b8dec8</td>
+                <td><div style={{ backgroundColor: '#b8dec8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-feedback-success-dark</td>
+                <td>#0f883f</td>
+                <td><div style={{ backgroundColor: '#0f883f', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-blue</td>
+                <td>#1e5bda</td>
+                <td><div style={{ backgroundColor: '#1e5bda', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-blue-light</td>
+                <td>#628ce5</td>
+                <td><div style={{ backgroundColor: '#628ce5', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-blue-dark</td>
+                <td>#1649d0</td>
+                <td><div style={{ backgroundColor: '#1649d0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-cyan</td>
+                <td>#00bcd4</td>
+                <td><div style={{ backgroundColor: '#00bcd4', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-cyan-light</td>
+                <td>#4dd0e1</td>
+                <td><div style={{ backgroundColor: '#4dd0e1', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-cyan-dark</td>
+                <td>#02a1bc</td>
+                <td><div style={{ backgroundColor: '#02a1bc', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-purple</td>
+                <td>#9c27b0</td>
+                <td><div style={{ backgroundColor: '#9c27b0', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-purple-light</td>
+                <td>#ba68c8</td>
+                <td><div style={{ backgroundColor: '#ba68c8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-purple-dark</td>
+                <td>#7b1fa2</td>
+                <td><div style={{ backgroundColor: '#7b1fa2', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-orange</td>
+                <td>#f77814</td>
+                <td><div style={{ backgroundColor: '#f77814', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-orange-light</td>
+                <td>#f9a15b</td>
+                <td><div style={{ backgroundColor: '#f9a15b', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-graphic-orange-dark</td>
+                <td>#f5650e</td>
+                <td><div style={{ backgroundColor: '#f5650e', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-font-base</td>
+                <td>#1b1c1d</td>
+                <td><div style={{ backgroundColor: '#1b1c1d', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-font-inverse</td>
+                <td>#ffffff</td>
+                <td><div style={{ backgroundColor: '#ffffff', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-font-primary</td>
+                <td>#86bd00</td>
+                <td><div style={{ backgroundColor: '#86bd00', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-font-primary-wl</td>
+                <td>#1e5bda</td>
+                <td><div style={{ backgroundColor: '#1e5bda', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-font-label</td>
+                <td>#4c545a</td>
+                <td><div style={{ backgroundColor: '#4c545a', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-font-placeholder</td>
+                <td>#91a0aa</td>
+                <td><div style={{ backgroundColor: '#91a0aa', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            <tr>
+                <td>$color-font-disabled</td>
+                <td>#b5c1c8</td>
+                <td><div style={{ backgroundColor: '#b5c1c8', width: '24px', height: '24px' }}></div></td>
+            </tr>
+            ...
+        </tbody>
+    </table>
+</div>
+### Instalação
+Não é necessario instalar nenhuma dependência para utilizar os tokens. Os tokens são utilizados internamente em todas as bibliotecas do Matcha Design System. Portanto quando você importar qualquer biblioteca do Matcha Design System, você já estará utilizando os tokens dessa documentação.