-
Notifications
You must be signed in to change notification settings - Fork 0
/
03a-css-tokens.html
26 lines (25 loc) · 14.3 KB
/
03a-css-tokens.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DS Barebones | Tokens (Variables)</title>
<meta name="description" content="Draft of DS structure">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/cookbook.css">
<link rel="preload" href="/assets/css/0.styles.d230a1b7.css" as="style"><link rel="preload" href="/assets/js/app.ffe7ce23.js" as="script"><link rel="preload" href="/assets/js/57.b96e9034.js" as="script"><link rel="prefetch" href="/assets/js/1.bb0869bb.js"><link rel="prefetch" href="/assets/js/2.dda4c906.js"><link rel="prefetch" href="/assets/js/3.4448bd14.js"><link rel="prefetch" href="/assets/js/4.d7a8c37c.js"><link rel="prefetch" href="/assets/js/5.0053a591.js"><link rel="prefetch" href="/assets/js/6.635f180c.js"><link rel="prefetch" href="/assets/js/7.0edba530.js"><link rel="prefetch" href="/assets/js/8.06e01e5f.js"><link rel="prefetch" href="/assets/js/9.043e2e98.js"><link rel="prefetch" href="/assets/js/10.e52efe6a.js"><link rel="prefetch" href="/assets/js/11.da1cefb3.js"><link rel="prefetch" href="/assets/js/12.f8644e41.js"><link rel="prefetch" href="/assets/js/13.76a94682.js"><link rel="prefetch" href="/assets/js/14.f92133e5.js"><link rel="prefetch" href="/assets/js/15.1d2c1de0.js"><link rel="prefetch" href="/assets/js/16.64529fa9.js"><link rel="prefetch" href="/assets/js/17.764db229.js"><link rel="prefetch" href="/assets/js/18.a61dad1d.js"><link rel="prefetch" href="/assets/js/19.2328b6a5.js"><link rel="prefetch" href="/assets/js/20.5292c81b.js"><link rel="prefetch" href="/assets/js/21.f40f88ca.js"><link rel="prefetch" href="/assets/js/22.9a33f057.js"><link rel="prefetch" href="/assets/js/23.126fba23.js"><link rel="prefetch" href="/assets/js/24.0a040e88.js"><link rel="prefetch" href="/assets/js/25.dec2d660.js"><link rel="prefetch" href="/assets/js/26.31e58c5f.js"><link rel="prefetch" href="/assets/js/27.b5ecf243.js"><link rel="prefetch" href="/assets/js/28.43bad0a2.js"><link rel="prefetch" href="/assets/js/29.88b4d737.js"><link rel="prefetch" href="/assets/js/30.95f20909.js"><link rel="prefetch" href="/assets/js/31.1ce5875f.js"><link rel="prefetch" href="/assets/js/32.e5aedb4b.js"><link rel="prefetch" href="/assets/js/33.b4006fc7.js"><link rel="prefetch" href="/assets/js/34.5a868c3b.js"><link rel="prefetch" href="/assets/js/35.6017117d.js"><link rel="prefetch" href="/assets/js/36.582547c2.js"><link rel="prefetch" href="/assets/js/37.87cd32c9.js"><link rel="prefetch" href="/assets/js/38.00b0253a.js"><link rel="prefetch" href="/assets/js/39.72453420.js"><link rel="prefetch" href="/assets/js/40.8483a6b6.js"><link rel="prefetch" href="/assets/js/41.192228ca.js"><link rel="prefetch" href="/assets/js/42.9a591743.js"><link rel="prefetch" href="/assets/js/43.527a27c0.js"><link rel="prefetch" href="/assets/js/44.a0d2ad3e.js"><link rel="prefetch" href="/assets/js/45.45ffe352.js"><link rel="prefetch" href="/assets/js/46.86b9bdf8.js"><link rel="prefetch" href="/assets/js/47.e6a0e01f.js"><link rel="prefetch" href="/assets/js/48.041526d9.js"><link rel="prefetch" href="/assets/js/49.2c7a5d9e.js"><link rel="prefetch" href="/assets/js/50.14bab849.js"><link rel="prefetch" href="/assets/js/51.1fc9ddc0.js"><link rel="prefetch" href="/assets/js/52.fb8ddfff.js"><link rel="prefetch" href="/assets/js/53.39b130c3.js"><link rel="prefetch" href="/assets/js/54.d04e0c53.js"><link rel="prefetch" href="/assets/js/55.3d68ed37.js"><link rel="prefetch" href="/assets/js/56.c00d4e7e.js"><link rel="prefetch" href="/assets/js/58.650ffd7e.js"><link rel="prefetch" href="/assets/js/59.6eb3cfcc.js"><link rel="prefetch" href="/assets/js/60.b7f96d9a.js"><link rel="prefetch" href="/assets/js/61.9a28508d.js"><link rel="prefetch" href="/assets/js/62.e61b4e7f.js"><link rel="prefetch" href="/assets/js/63.0b6f5ecc.js"><link rel="prefetch" href="/assets/js/64.4fb4969e.js">
<link rel="stylesheet" href="/assets/css/0.styles.d230a1b7.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><!----><span class="site-name">
DS Barebones
</span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><!----></div></header><div class="sidebar-mask"></div><div class="sidebar"><!----><ul class="sidebar-links"><li><div class="sidebar-group first collapsable"><p class="sidebar-heading"><span>Main</span><span class="arrow right"></span></p><!----></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading open"><span>CSS Library</span><span class="arrow down"></span></p><ul class="sidebar-group-items"><li><a href="/02-css-typography.html" class="sidebar-link">Typography</a></li><li><a href="/03-css-colors.html" class="sidebar-link">Colors</a></li><li><a href="/03a-css-tokens.html" class="active sidebar-link">Tokens</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/03a-css-tokens.html#spacing" class="sidebar-link">Spacing</a></li><li class="sidebar-sub-header"><a href="/03a-css-tokens.html#elevations" class="sidebar-link">Elevations</a></li><li class="sidebar-sub-header"><a href="/03a-css-tokens.html#radius" class="sidebar-link">Radius</a></li></ul></li><li><a href="/04-css-buttons.html" class="sidebar-link">Buttons</a></li><li><a href="/05-css-forms.html" class="sidebar-link">Forms</a></li><li><a href="/006-css-logos.html" class="sidebar-link">Logos</a></li><li><a href="/06-css-svg-icons.html" class="sidebar-link">SVG Icons</a></li><li><a href="/07-css-xml-icons.html" class="sidebar-link">XML Icons</a></li><li><a href="/08-css-tables.html" class="sidebar-link">Tables</a></li><li><a href="/09-css-responsive.html" class="sidebar-link">Responsive</a></li><li><a href="/10-css-layout.html" class="sidebar-link">Layout</a></li><li><a href="/11-css-borders.html" class="sidebar-link">Borders</a></li><li><a href="/12-css-grid.html" class="sidebar-link">Grid</a></li><li><a href="/13-css-flexbox.html" class="sidebar-link">Flexbox</a></li><li><a href="/14-css-block-grid.html" class="sidebar-link">Block Grid</a></li></ul></div></li><li><div class="sidebar-group collapsable"><p class="sidebar-heading"><span>Components</span><span class="arrow right"></span></p><!----></div></li></ul></div><div class="page"><div class="content"><h1 id="tokens-variables"><a href="#tokens-variables" aria-hidden="true" class="header-anchor">#</a> Tokens (Variables)</h1><h2 id="spacing"><a href="#spacing" aria-hidden="true" class="header-anchor">#</a> Spacing</h2><h3 id="spacing-half"><a href="#spacing-half" aria-hidden="true" class="header-anchor">#</a> spacing-half</h3><div class="spacing-container spacing-half"><code class="var-name">$spacing-half</code><br><code class="var-value">4px</code><div class="boxes-container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div><h3 id="spacing-xs"><a href="#spacing-xs" aria-hidden="true" class="header-anchor">#</a> spacing-xs</h3><div class="spacing-container spacing-xs"><code class="var-name">$spacing-xs</code><br><code class="var-value">8px</code><div class="boxes-container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div><h3 id="spacing-sm"><a href="#spacing-sm" aria-hidden="true" class="header-anchor">#</a> spacing-sm</h3><div class="spacing-container spacing-sm"><code class="var-name">$spacing-sm</code><br><code class="var-value">16px</code><div class="boxes-container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div><h3 id="spacing-md"><a href="#spacing-md" aria-hidden="true" class="header-anchor">#</a> spacing-md</h3><div class="spacing-container spacing-md"><code class="var-name">$spacing-md</code><br><code class="var-value">24px</code><div class="boxes-container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div><h3 id="spacing-ld"><a href="#spacing-ld" aria-hidden="true" class="header-anchor">#</a> spacing-ld</h3><div class="spacing-container spacing-ld"><code class="var-name">$spacing-ld</code><br><code class="var-value">32px</code><div class="boxes-container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div><h3 id="spacing-xl"><a href="#spacing-xl" aria-hidden="true" class="header-anchor">#</a> spacing-xl</h3><div class="spacing-container spacing-xl"><code class="var-name">$spacing-xl</code><br><code class="var-value">48px</code><div class="boxes-container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div><h3 id="spacing-xxl"><a href="#spacing-xxl" aria-hidden="true" class="header-anchor">#</a> spacing-xxl</h3><div class="spacing-container spacing-xxl"><code class="var-name">$spacing-xxl</code><br><code class="var-value">64px</code><div class="boxes-container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div><h3 id="spacing-xxxl"><a href="#spacing-xxxl" aria-hidden="true" class="header-anchor">#</a> spacing-xxxl</h3><div class="spacing-container spacing-xxxl"><code class="var-name">$spacing-xxxl</code><br><code class="var-value">80px</code><div class="boxes-container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div><h2 id="elevations"><a href="#elevations" aria-hidden="true" class="header-anchor">#</a> Elevations</h2><h3 id="elevation-lvl0"><a href="#elevation-lvl0" aria-hidden="true" class="header-anchor">#</a> elevation-lvl0</h3><div class="elevation-container elevation-lvl0"><code class="var-name">$elevation-lvl0</code><ul><li><code class="var-value">OffsetX: -</code></li><li><code class="var-value">OffsetY: -</code></li><li><code class="var-value">Blur: -</code></li><li><code class="var-value">Color: -</code></li></ul><div class="elevation-box"></div></div><h3 id="elevation-lvl1"><a href="#elevation-lvl1" aria-hidden="true" class="header-anchor">#</a> elevation-lvl1</h3><div class="elevation-container elevation-lvl1"><code class="var-name">$elevation-lvl1</code><ul><li><code class="var-value">OffsetX: 0</code></li><li><code class="var-value">OffsetY: 2</code></li><li><code class="var-value">Blur: 8</code></li><li><code class="var-value">Color: $color-overlay-lvl3 (8% Black)</code></li></ul><div class="elevation-box"></div></div><h3 id="elevation-lvl2"><a href="#elevation-lvl2" aria-hidden="true" class="header-anchor">#</a> elevation-lvl2</h3><div class="elevation-container elevation-lvl2"><code class="var-name">$elevation-lvl2</code><ul><li><code class="var-value">OffsetX: 0</code></li><li><code class="var-value">OffsetY: 2</code></li><li><code class="var-value">Blur: 16</code></li><li><code class="var-value">Color: $color-overlay-lvl3 (8% Black)</code></li></ul><div class="elevation-box"></div></div><h3 id="elevation-lvl3"><a href="#elevation-lvl3" aria-hidden="true" class="header-anchor">#</a> elevation-lvl3</h3><div class="elevation-container elevation-lvl3"><code class="var-name">$elevation-lvl3</code><ul><li><code class="var-value">OffsetX: 0</code></li><li><code class="var-value">OffsetY: 2</code></li><li><code class="var-value">Blur: 28</code></li><li><code class="var-value">Color: $color-overlay-lvl4 (12% Black)</code></li></ul><div class="elevation-box"></div></div><h3 id="elevation-lvl4"><a href="#elevation-lvl4" aria-hidden="true" class="header-anchor">#</a> elevation-lvl4</h3><div class="elevation-container elevation-lvl4"><code class="var-name">$elevation-lvl4</code><ul><li><code class="var-value">OffsetX: 0</code></li><li><code class="var-value">OffsetY: 2</code></li><li><code class="var-value">Blur: 40</code></li><li><code class="var-value">Color: $color-overlay-lvl5 (16% Black)</code></li></ul><div class="elevation-box"></div></div><h3 id="elevation-lvl5"><a href="#elevation-lvl5" aria-hidden="true" class="header-anchor">#</a> elevation-lvl5</h3><div class="elevation-container elevation-lvl5"><code class="var-name">$elevation-lvl5</code><ul><li><code class="var-value">OffsetX: 0</code></li><li><code class="var-value">OffsetY: 2</code></li><li><code class="var-value">Blur: 64</code></li><li><code class="var-value">Color: $color-overlay-lvl5 (16% Black)</code></li></ul><div class="elevation-box"></div></div><h2 id="radius"><a href="#radius" aria-hidden="true" class="header-anchor">#</a> Radius</h2><h3 id="radius-form"><a href="#radius-form" aria-hidden="true" class="header-anchor">#</a> radius-form</h3><div class="radius-container radius-form"><code class="var-name">$radius-form</code><br><code class="var-value">Radius: 0</code><p><strong>Usage:</strong> buttons, toggles, inputs, etc.</p><div class="radius-box"></div></div><h3 id="radius-sticky"><a href="#radius-sticky" aria-hidden="true" class="header-anchor">#</a> radius-sticky</h3><div class="radius-container radius-sticky"><code class="var-name">$radius-sticky</code><br><code class="var-value">Radius: 0</code><p><strong>Usage:</strong> sticky components (header, bars, sticky buttons card)</p><div class="radius-box"></div></div><h3 id="radius-card"><a href="#radius-card" aria-hidden="true" class="header-anchor">#</a> radius-card</h3><div class="radius-container radius-card"><code class="var-name">$radius-card</code><br><code class="var-value">Radius: 0</code><p><strong>Usage:</strong> card (v tile, tracking card, etc.)</p><div class="radius-box"></div></div></div><!----><div class="content page-nav"><p class="inner"><span class="prev">
← <a href="/03-css-colors.html" class="prev">
Colors
</a></span><span class="next"><a href="/04-css-buttons.html">
Buttons
</a> →
</span></p></div></div></div></div>
<script src="/assets/js/57.b96e9034.js" defer></script><script src="/assets/js/app.ffe7ce23.js" defer></script>
</body>
</html>