javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
36dfc50fa317aaa1329912a80b9116ac4abab4f7
ionic-framework/core/src/foundations/tokens.preview.html
Bernardo Cardoso 3b93bb4a9b feat(tokens): add html preview based on design-tokens (#29545) 
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added new files to scripts/tokens for the html template and css to
style the generated preview
- Added Style Dictionary register for generating html elements for each
main token

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
2024-05-28 15:57:30 +01:00

1744 lines
60 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Design Tokens</title>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="../../scripts/tokens/preview.styles.css" />
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Design Tokens - Preview</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding-horizontal">
<h1>Color Tokens</h1>
<div class="token-wrapper">
<table>
<thead>
<tr>
<th>Color</th>
<th>Hex</th>
<th>Token Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="color-swatch" style="background-color: #ffffff"></div></td>
<td>#ffffff</td>
<td>-color-base-white</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #111111"></div></td>
<td>#111111</td>
<td>-color-base-black</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f1f1f1"></div></td>
<td>#f1f1f1</td>
<td>-color-neutral-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e7e7e7"></div></td>
<td>#e7e7e7</td>
<td>-color-neutral-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #cfcfcf"></div></td>
<td>#cfcfcf</td>
<td>-color-neutral-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b9b9b9"></div></td>
<td>#b9b9b9</td>
<td>-color-neutral-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #a2a2a2"></div></td>
<td>#a2a2a2</td>
<td>-color-neutral-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #8c8c8c"></div></td>
<td>#8c8c8c</td>
<td>-color-neutral-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #777777"></div></td>
<td>#777777</td>
<td>-color-neutral-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #626262"></div></td>
<td>#626262</td>
<td>-color-neutral-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #4e4e4e"></div></td>
<td>#4e4e4e</td>
<td>-color-neutral-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #3b3b3b"></div></td>
<td>#3b3b3b</td>
<td>-color-neutral-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #292929"></div></td>
<td>#292929</td>
<td>-color-neutral-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #242424"></div></td>
<td>#242424</td>
<td>-color-neutral-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #feeded"></div></td>
<td>#feeded</td>
<td>-color-red-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fde1e1"></div></td>
<td>#fde1e1</td>
<td>-color-red-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fcc1c1"></div></td>
<td>#fcc1c1</td>
<td>-color-red-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #faa1a1"></div></td>
<td>#faa1a1</td>
<td>-color-red-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f97d7d"></div></td>
<td>#f97d7d</td>
<td>-color-red-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f85151"></div></td>
<td>#f85151</td>
<td>-color-red-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e52929"></div></td>
<td>#e52929</td>
<td>-color-red-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #bf2222"></div></td>
<td>#bf2222</td>
<td>-color-red-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #991b1b"></div></td>
<td>#991b1b</td>
<td>-color-red-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #761515"></div></td>
<td>#761515</td>
<td>-color-red-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #540f0f"></div></td>
<td>#540f0f</td>
<td>-color-red-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #330909"></div></td>
<td>#330909</td>
<td>-color-red-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #feedea"></div></td>
<td>#feedea</td>
<td>-color-pumpkin-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fde0db"></div></td>
<td>#fde0db</td>
<td>-color-pumpkin-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fbbdb1"></div></td>
<td>#fbbdb1</td>
<td>-color-pumpkin-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f9947c"></div></td>
<td>#f9947c</td>
<td>-color-pumpkin-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f75d07"></div></td>
<td>#f75d07</td>
<td>-color-pumpkin-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #da5206"></div></td>
<td>#da5206</td>
<td>-color-pumpkin-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #bd4705"></div></td>
<td>#bd4705</td>
<td>-color-pumpkin-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #9f3c05"></div></td>
<td>#9f3c05</td>
<td>-color-pumpkin-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #803004"></div></td>
<td>#803004</td>
<td>-color-pumpkin-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #602403"></div></td>
<td>#602403</td>
<td>-color-pumpkin-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #401802"></div></td>
<td>#401802</td>
<td>-color-pumpkin-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #210c01"></div></td>
<td>#210c01</td>
<td>-color-pumpkin-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fff1ea"></div></td>
<td>#fff1ea</td>
<td>-color-orange-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffe8db"></div></td>
<td>#ffe8db</td>
<td>-color-orange-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffcfb1"></div></td>
<td>#ffcfb1</td>
<td>-color-orange-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffb37b"></div></td>
<td>#ffb37b</td>
<td>-color-orange-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ff9400"></div></td>
<td>#ff9400</td>
<td>-color-orange-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e18300"></div></td>
<td>#e18300</td>
<td>-color-orange-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #c37100"></div></td>
<td>#c37100</td>
<td>-color-orange-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #a45f00"></div></td>
<td>#a45f00</td>
<td>-color-orange-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #844d00"></div></td>
<td>#844d00</td>
<td>-color-orange-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #633a00"></div></td>
<td>#633a00</td>
<td>-color-orange-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #422700"></div></td>
<td>#422700</td>
<td>-color-orange-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #221400"></div></td>
<td>#221400</td>
<td>-color-orange-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fff9ea"></div></td>
<td>#fff9ea</td>
<td>-color-yellow-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fff5db"></div></td>
<td>#fff5db</td>
<td>-color-yellow-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffebb1"></div></td>
<td>#ffebb1</td>
<td>-color-yellow-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffe07b"></div></td>
<td>#ffe07b</td>
<td>-color-yellow-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffd600"></div></td>
<td>#ffd600</td>
<td>-color-yellow-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e1bd00"></div></td>
<td>#e1bd00</td>
<td>-color-yellow-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #c3a400"></div></td>
<td>#c3a400</td>
<td>-color-yellow-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #a48a00"></div></td>
<td>#a48a00</td>
<td>-color-yellow-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #846f00"></div></td>
<td>#846f00</td>
<td>-color-yellow-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #635300"></div></td>
<td>#635300</td>
<td>-color-yellow-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #423800"></div></td>
<td>#423800</td>
<td>-color-yellow-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #221d00"></div></td>
<td>#221d00</td>
<td>-color-yellow-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f3faea"></div></td>
<td>#f3faea</td>
<td>-color-lime-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #eaf7db"></div></td>
<td>#eaf7db</td>
<td>-color-lime-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #d3efb2"></div></td>
<td>#d3efb2</td>
<td>-color-lime-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #bbe77d"></div></td>
<td>#bbe77d</td>
<td>-color-lime-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #a0df18"></div></td>
<td>#a0df18</td>
<td>-color-lime-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #8dc515"></div></td>
<td>#8dc515</td>
<td>-color-lime-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #7aab12"></div></td>
<td>#7aab12</td>
<td>-color-lime-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #678f0f"></div></td>
<td>#678f0f</td>
<td>-color-lime-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #53730c"></div></td>
<td>#53730c</td>
<td>-color-lime-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #3e5709"></div></td>
<td>#3e5709</td>
<td>-color-lime-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #2a3a06"></div></td>
<td>#2a3a06</td>
<td>-color-lime-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #151e03"></div></td>
<td>#151e03</td>
<td>-color-lime-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ebf9ec"></div></td>
<td>#ebf9ec</td>
<td>-color-green-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #dcf5de"></div></td>
<td>#dcf5de</td>
<td>-color-green-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b3ebb7"></div></td>
<td>#b3ebb7</td>
<td>-color-green-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #7fe089"></div></td>
<td>#7fe089</td>
<td>-color-green-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #23d643"></div></td>
<td>#23d643</td>
<td>-color-green-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1fbd3b"></div></td>
<td>#1fbd3b</td>
<td>-color-green-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1ba433"></div></td>
<td>#1ba433</td>
<td>-color-green-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #178a2b"></div></td>
<td>#178a2b</td>
<td>-color-green-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #126f23"></div></td>
<td>#126f23</td>
<td>-color-green-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0e531a"></div></td>
<td>#0e531a</td>
<td>-color-green-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #093811"></div></td>
<td>#093811</td>
<td>-color-green-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #051d09"></div></td>
<td>#051d09</td>
<td>-color-green-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #eaf8f5"></div></td>
<td>#eaf8f5</td>
<td>-color-teal-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #dbf3ee"></div></td>
<td>#dbf3ee</td>
<td>-color-teal-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b1e7dd"></div></td>
<td>#b1e7dd</td>
<td>-color-teal-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #7bdbca"></div></td>
<td>#7bdbca</td>
<td>-color-teal-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #00cfb7"></div></td>
<td>#00cfb7</td>
<td>-color-teal-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #00b7a2"></div></td>
<td>#00b7a2</td>
<td>-color-teal-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #009e8c"></div></td>
<td>#009e8c</td>
<td>-color-teal-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #008576"></div></td>
<td>#008576</td>
<td>-color-teal-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #006b5f"></div></td>
<td>#006b5f</td>
<td>-color-teal-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #005147"></div></td>
<td>#005147</td>
<td>-color-teal-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #003630"></div></td>
<td>#003630</td>
<td>-color-teal-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #001c19"></div></td>
<td>#001c19</td>
<td>-color-teal-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ebf9fe"></div></td>
<td>#ebf9fe</td>
<td>-color-aqua-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #dcf4fd"></div></td>
<td>#dcf4fd</td>
<td>-color-aqua-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b3e9fc"></div></td>
<td>#b3e9fc</td>
<td>-color-aqua-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #80defa"></div></td>
<td>#80defa</td>
<td>-color-aqua-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #27d3f9"></div></td>
<td>#27d3f9</td>
<td>-color-aqua-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #22bbdc"></div></td>
<td>#22bbdc</td>
<td>-color-aqua-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1ea2bf"></div></td>
<td>#1ea2bf</td>
<td>-color-aqua-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1988a0"></div></td>
<td>#1988a0</td>
<td>-color-aqua-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #146d81"></div></td>
<td>#146d81</td>
<td>-color-aqua-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0f5261"></div></td>
<td>#0f5261</td>
<td>-color-aqua-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0a3741"></div></td>
<td>#0a3741</td>
<td>-color-aqua-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #051c21"></div></td>
<td>#051c21</td>
<td>-color-aqua-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f2f4fd"></div></td>
<td>#f2f4fd</td>
<td>-color-blue-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e9ecfc"></div></td>
<td>#e9ecfc</td>
<td>-color-blue-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #d0d7fa"></div></td>
<td>#d0d7fa</td>
<td>-color-blue-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b5c0f7"></div></td>
<td>#b5c0f7</td>
<td>-color-blue-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #94a5f4"></div></td>
<td>#94a5f4</td>
<td>-color-blue-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #6986f2"></div></td>
<td>#6986f2</td>
<td>-color-blue-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #105cef"></div></td>
<td>#105cef</td>
<td>-color-blue-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0f54da"></div></td>
<td>#0f54da</td>
<td>-color-blue-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0d4bc3"></div></td>
<td>#0d4bc3</td>
<td>-color-blue-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0b41a9"></div></td>
<td>#0b41a9</td>
<td>-color-blue-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #09358a"></div></td>
<td>#09358a</td>
<td>-color-blue-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #072561"></div></td>
<td>#072561</td>
<td>-color-blue-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f3f2fb"></div></td>
<td>#f3f2fb</td>
<td>-color-indigo-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #eae9f9"></div></td>
<td>#eae9f9</td>
<td>-color-indigo-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #d3d1f2"></div></td>
<td>#d3d1f2</td>
<td>-color-indigo-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #bab5eb"></div></td>
<td>#bab5eb</td>
<td>-color-indigo-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #9d95e4"></div></td>
<td>#9d95e4</td>
<td>-color-indigo-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #786bdd"></div></td>
<td>#786bdd</td>
<td>-color-indigo-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #411bd5"></div></td>
<td>#411bd5</td>
<td>-color-indigo-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #3b19c3"></div></td>
<td>#3b19c3</td>
<td>-color-indigo-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #3516ae"></div></td>
<td>#3516ae</td>
<td>-color-indigo-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #2e1397"></div></td>
<td>#2e1397</td>
<td>-color-indigo-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #26107b"></div></td>
<td>#26107b</td>
<td>-color-indigo-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1a0b57"></div></td>
<td>#1a0b57</td>
<td>-color-indigo-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f5f2fe"></div></td>
<td>#f5f2fe</td>
<td>-color-violet-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #eee9fd"></div></td>
<td>#eee9fd</td>
<td>-color-violet-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #dcd1fb"></div></td>
<td>#dcd1fb</td>
<td>-color-violet-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #c9b6f9"></div></td>
<td>#c9b6f9</td>
<td>-color-violet-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b396f6"></div></td>
<td>#b396f6</td>
<td>-color-violet-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #9a6cf4"></div></td>
<td>#9a6cf4</td>
<td>-color-violet-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #7c20f2"></div></td>
<td>#7c20f2</td>
<td>-color-violet-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #711ddd"></div></td>
<td>#711ddd</td>
<td>-color-violet-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #651ac5"></div></td>
<td>#651ac5</td>
<td>-color-violet-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #5817ab"></div></td>
<td>#5817ab</td>
<td>-color-violet-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #48128c"></div></td>
<td>#48128c</td>
<td>-color-violet-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #330d63"></div></td>
<td>#330d63</td>
<td>-color-violet-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f9f3fe"></div></td>
<td>#f9f3fe</td>
<td>-color-purple-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f5eafd"></div></td>
<td>#f5eafd</td>
<td>-color-purple-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e9d3fa"></div></td>
<td>#e9d3fa</td>
<td>-color-purple-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #deb9f8"></div></td>
<td>#deb9f8</td>
<td>-color-purple-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #d29bf6"></div></td>
<td>#d29bf6</td>
<td>-color-purple-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #c575f3"></div></td>
<td>#c575f3</td>
<td>-color-purple-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b73cf1"></div></td>
<td>#b73cf1</td>
<td>-color-purple-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #a737dc"></div></td>
<td>#a737dc</td>
<td>-color-purple-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #9531c5"></div></td>
<td>#9531c5</td>
<td>-color-purple-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #812aaa"></div></td>
<td>#812aaa</td>
<td>-color-purple-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #6a238b"></div></td>
<td>#6a238b</td>
<td>-color-purple-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #4b1862"></div></td>
<td>#4b1862</td>
<td>-color-purple-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fdf3fb"></div></td>
<td>#fdf3fb</td>
<td>-color-magenta-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fcebf8"></div></td>
<td>#fcebf8</td>
<td>-color-magenta-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f9d4f1"></div></td>
<td>#f9d4f1</td>
<td>-color-magenta-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f6bcea"></div></td>
<td>#f6bcea</td>
<td>-color-magenta-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f39fe3"></div></td>
<td>#f39fe3</td>
<td>-color-magenta-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f07cdb"></div></td>
<td>#f07cdb</td>
<td>-color-magenta-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ed4ad3"></div></td>
<td>#ed4ad3</td>
<td>-color-magenta-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #d844c1"></div></td>
<td>#d844c1</td>
<td>-color-magenta-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #c13cac"></div></td>
<td>#c13cac</td>
<td>-color-magenta-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #a83495"></div></td>
<td>#a83495</td>
<td>-color-magenta-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #892b7a"></div></td>
<td>#892b7a</td>
<td>-color-magenta-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #611e56"></div></td>
<td>#611e56</td>
<td>-color-magenta-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fef3f5"></div></td>
<td>#fef3f5</td>
<td>-color-pink-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fdeaee"></div></td>
<td>#fdeaee</td>
<td>-color-pink-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fad3dc"></div></td>
<td>#fad3dc</td>
<td>-color-pink-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f8b9c9"></div></td>
<td>#f8b9c9</td>
<td>-color-pink-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f69bb3"></div></td>
<td>#f69bb3</td>
<td>-color-pink-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f3759a"></div></td>
<td>#f3759a</td>
<td>-color-pink-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f13b7d"></div></td>
<td>#f13b7d</td>
<td>-color-pink-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #dc3672"></div></td>
<td>#dc3672</td>
<td>-color-pink-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #c53066"></div></td>
<td>#c53066</td>
<td>-color-pink-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #aa2a58"></div></td>
<td>#aa2a58</td>
<td>-color-pink-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #8b2248"></div></td>
<td>#8b2248</td>
<td>-color-pink-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #621833"></div></td>
<td>#621833</td>
<td>-color-pink-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f2f4fd"></div></td>
<td>#f2f4fd</td>
<td>-color-primary-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e9ecfc"></div></td>
<td>#e9ecfc</td>
<td>-color-primary-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #d0d7fa"></div></td>
<td>#d0d7fa</td>
<td>-color-primary-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b5c0f7"></div></td>
<td>#b5c0f7</td>
<td>-color-primary-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #94a5f4"></div></td>
<td>#94a5f4</td>
<td>-color-primary-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #6986f2"></div></td>
<td>#6986f2</td>
<td>-color-primary-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #105cef"></div></td>
<td>#105cef</td>
<td>-color-primary-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0f54da"></div></td>
<td>#0f54da</td>
<td>-color-primary-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0d4bc3"></div></td>
<td>#0d4bc3</td>
<td>-color-primary-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0b41a9"></div></td>
<td>#0b41a9</td>
<td>-color-primary-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #09358a"></div></td>
<td>#09358a</td>
<td>-color-primary-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #072561"></div></td>
<td>#072561</td>
<td>-color-primary-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #105cef"></div></td>
<td>#105cef</td>
<td>-color-primary-base</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ebf9fe"></div></td>
<td>#ebf9fe</td>
<td>-color-info-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #dcf4fd"></div></td>
<td>#dcf4fd</td>
<td>-color-info-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b3e9fc"></div></td>
<td>#b3e9fc</td>
<td>-color-info-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #80defa"></div></td>
<td>#80defa</td>
<td>-color-info-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #27d3f9"></div></td>
<td>#27d3f9</td>
<td>-color-info-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #22bbdc"></div></td>
<td>#22bbdc</td>
<td>-color-info-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1ea2bf"></div></td>
<td>#1ea2bf</td>
<td>-color-info-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1988a0"></div></td>
<td>#1988a0</td>
<td>-color-info-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #146d81"></div></td>
<td>#146d81</td>
<td>-color-info-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0f5261"></div></td>
<td>#0f5261</td>
<td>-color-info-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0a3741"></div></td>
<td>#0a3741</td>
<td>-color-info-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #051c21"></div></td>
<td>#051c21</td>
<td>-color-info-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1ea2bf"></div></td>
<td>#1ea2bf</td>
<td>-color-info-base</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fff1ea"></div></td>
<td>#fff1ea</td>
<td>-color-warning-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffe8db"></div></td>
<td>#ffe8db</td>
<td>-color-warning-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffcfb1"></div></td>
<td>#ffcfb1</td>
<td>-color-warning-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ffb37b"></div></td>
<td>#ffb37b</td>
<td>-color-warning-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ff9400"></div></td>
<td>#ff9400</td>
<td>-color-warning-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e18300"></div></td>
<td>#e18300</td>
<td>-color-warning-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #c37100"></div></td>
<td>#c37100</td>
<td>-color-warning-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #a45f00"></div></td>
<td>#a45f00</td>
<td>-color-warning-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #844d00"></div></td>
<td>#844d00</td>
<td>-color-warning-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #633a00"></div></td>
<td>#633a00</td>
<td>-color-warning-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #422700"></div></td>
<td>#422700</td>
<td>-color-warning-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #221400"></div></td>
<td>#221400</td>
<td>-color-warning-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #c37100"></div></td>
<td>#c37100</td>
<td>-color-warning-base</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #feeded"></div></td>
<td>#feeded</td>
<td>-color-danger-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fde1e1"></div></td>
<td>#fde1e1</td>
<td>-color-danger-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #fcc1c1"></div></td>
<td>#fcc1c1</td>
<td>-color-danger-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #faa1a1"></div></td>
<td>#faa1a1</td>
<td>-color-danger-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f97d7d"></div></td>
<td>#f97d7d</td>
<td>-color-danger-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #f85151"></div></td>
<td>#f85151</td>
<td>-color-danger-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e52929"></div></td>
<td>#e52929</td>
<td>-color-danger-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #bf2222"></div></td>
<td>#bf2222</td>
<td>-color-danger-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #991b1b"></div></td>
<td>#991b1b</td>
<td>-color-danger-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #761515"></div></td>
<td>#761515</td>
<td>-color-danger-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #540f0f"></div></td>
<td>#540f0f</td>
<td>-color-danger-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #330909"></div></td>
<td>#330909</td>
<td>-color-danger-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #e52929"></div></td>
<td>#e52929</td>
<td>-color-danger-base</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #ebf9ec"></div></td>
<td>#ebf9ec</td>
<td>-color-success-100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #dcf5de"></div></td>
<td>#dcf5de</td>
<td>-color-success-200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #b3ebb7"></div></td>
<td>#b3ebb7</td>
<td>-color-success-300</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #7fe089"></div></td>
<td>#7fe089</td>
<td>-color-success-400</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #23d643"></div></td>
<td>#23d643</td>
<td>-color-success-500</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1fbd3b"></div></td>
<td>#1fbd3b</td>
<td>-color-success-600</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1ba433"></div></td>
<td>#1ba433</td>
<td>-color-success-700</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #178a2b"></div></td>
<td>#178a2b</td>
<td>-color-success-800</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #126f23"></div></td>
<td>#126f23</td>
<td>-color-success-900</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #0e531a"></div></td>
<td>#0e531a</td>
<td>-color-success-1000</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #093811"></div></td>
<td>#093811</td>
<td>-color-success-1100</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #051d09"></div></td>
<td>#051d09</td>
<td>-color-success-1200</td>
</tr>
<tr>
<td><div class="color-swatch" style="background-color: #1ba433"></div></td>
<td>#1ba433</td>
<td>-color-success-base</td>
</tr>
</tbody>
</table>
</div>
<hr />
<h1>Font Size Tokens</h1>
<div class="token-wrapper">
<div class="font-size-token" style="font-size: 11px">-font-size-275 (11px)</div>
<div class="font-size-token" style="font-size: 12px">-font-size-300 (12px)</div>
<div class="font-size-token" style="font-size: 14px">-font-size-350 (14px)</div>
<div class="font-size-token" style="font-size: 16px">-font-size-400 (16px)</div>
<div class="font-size-token" style="font-size: 18px">-font-size-450 (18px)</div>
<div class="font-size-token" style="font-size: 20px">-font-size-500 (20px)</div>
<div class="font-size-token" style="font-size: 22px">-font-size-550 (22px)</div>
<div class="font-size-token" style="font-size: 24px">-font-size-600 (24px)</div>
<div class="font-size-token" style="font-size: 26px">-font-size-650 (26px)</div>
<div class="font-size-token" style="font-size: 28px">-font-size-700 (28px)</div>
<div class="font-size-token" style="font-size: 32px">-font-size-800 (32px)</div>
<div class="font-size-token" style="font-size: 36px">-font-size-900 (36px)</div>
</div>
<hr />
<h1>Font Weight Tokens</h1>
<div class="token-wrapper">
<div class="weight-token" style="font-weight: 100">-font-weight-thin (100)</div>
<div class="weight-token" style="font-weight: 200">-font-weight-extra-light (200)</div>
<div class="weight-token" style="font-weight: 300">-font-weight-light (300)</div>
<div class="weight-token" style="font-weight: 400">-font-weight-regular (400)</div>
<div class="weight-token" style="font-weight: 500">-font-weight-medium (500)</div>
<div class="weight-token" style="font-weight: 600">-font-weight-semi-bold (600)</div>
<div class="weight-token" style="font-weight: 700">-font-weight-bold (700)</div>
<div class="weight-token" style="font-weight: 800">-font-weight-extra-bold (800)</div>
<div class="weight-token" style="font-weight: 900">-font-weight-black (900)</div>
</div>
<hr />
<h1>Letter Spacing Tokens</h1>
<div class="token-wrapper">
<div class="letter-spacing-token" style="letter-spacing: 0px">-letter-spacing-0 (0px)</div>
<div class="letter-spacing-token" style="letter-spacing: 1px">-letter-spacing-1 (1px)</div>
<div class="letter-spacing-token" style="letter-spacing: 1.5px">-letter-spacing-2 (1.5px)</div>
</div>
<hr />
<h1>Box Shadow Tokens</h1>
<div class="token-wrapper">
<div
class="shadow-token"
style="box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)"
>
-elevation-100
</div>
<div
class="shadow-token"
style="box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05)"
>
-elevation-200
</div>
<div
class="shadow-token"
style="box-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.16), 0px 2px 7px 0px rgba(0, 0, 0, 0.05)"
>
-elevation-300
</div>
<div
class="shadow-token"
style="box-shadow: 0px 15px 48px 0px rgba(0, 0, 0, 0.18), 0px 3px 12px 0px rgba(0, 0, 0, 0.12)"
>
-elevation-400
</div>
<div
class="shadow-token"
style="box-shadow: 0px 3px 9px 0px rgba(6, 43, 99, 0.07), 0px 0px 4px 0px rgba(6, 43, 99, 0.04)"
>
-elevation-500
</div>
<div
class="shadow-token"
style="box-shadow: 0px 8px 25px 0px rgba(6, 43, 99, 0.08), 0px 1px 5px 0px rgba(6, 43, 99, 0.05)"
>
-elevation-600
</div>
<div
class="shadow-token"
style="box-shadow: 0px 15px 32px 0px rgba(6, 43, 99, 0.09), 0px 2px 7px 0px rgba(6, 43, 99, 0.05)"
>
-elevation-700
</div>
<div
class="shadow-token"
style="box-shadow: 0px 20px 48px 0px rgba(6, 43, 99, 0.12), 0px 3px 14px 0px rgba(6, 43, 99, 0.12)"
>
-elevation-800
</div>
</div>
<hr />
<h1>Border Size Tokens</h1>
<div class="token-wrapper">
<div class="border-token" style="border-width: 0px">-border-size-0 (0px)</div>
<div class="border-token" style="border-width: 1px">-border-size-025 (1px)</div>
<div class="border-token" style="border-width: 2px">-border-size-050 (2px)</div>
<div class="border-token" style="border-width: 3px">-border-size-075 (3px)</div>
</div>
<hr />
<h1>Border Radius Tokens</h1>
<div class="token-wrapper">
<div class="border-token" style="border-radius: 0px">-border-radius-0 (0px)</div>
<div class="border-token" style="border-radius: 2px">-border-radius-050 (2px)</div>
<div class="border-token" style="border-radius: 4px">-border-radius-100 (4px)</div>
<div class="border-token" style="border-radius: 8px">-border-radius-200 (8px)</div>
<div class="border-token" style="border-radius: 12px">-border-radius-300 (12px)</div>
<div class="border-token" style="border-radius: 16px">-border-radius-400 (16px)</div>
<div class="border-token" style="border-radius: 32px">-border-radius-800 (32px)</div>
<div class="border-token" style="border-radius: 40px">-border-radius-1000 (40px)</div>
<div class="border-token" style="border-radius: 999px">-border-radius-full (999px)</div>
</div>
<hr />
<h1>Border Style Tokens</h1>
<div class="token-wrapper">
<div class="border-token" style="border: 1px none #000">-border-style-none (none)</div>
<div class="border-token" style="border: 1px solid #000">-border-style-solid (solid)</div>
<div class="border-token" style="border: 1px dashed #000">-border-style-dashed (dashed)</div>
<div class="border-token" style="border: 1px dotted #000">-border-style-dotted (dotted)</div>
</div>
<hr />
<h1>Space Tokens</h1>
<div class="token-wrapper">
<div class="spacing-wrapper">
<div class="space-token" style="margin: 0px">-space-0 (0px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 2px">-space-050 (2px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 4px">-space-100 (4px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 6px">-space-150 (6px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 8px">-space-200 (8px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 10px">-space-250 (10px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 12px">-space-300 (12px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 16px">-space-400 (16px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 20px">-space-500 (20px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 24px">-space-600 (24px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 28px">-space-700 (28px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 32px">-space-800 (32px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 36px">-space-900 (36px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 40px">-space-1000 (40px)</div>
</div>
<div class="spacing-wrapper">
<div class="space-token" style="margin: 48px">-space-1200 (48px)</div>
</div>
</div>
</ion-content>
</ion-app>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink