@fission-suite/kit
Version:
Fission UI Kit
3,068 lines (1,068 loc) • 60.3 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title>@fission-suite/kit 2.1.0 | Documentation</title>
<meta name='description' content='Fission UI Kit'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<link href='assets/bass.css' rel='stylesheet'>
<link href='assets/style.css' rel='stylesheet'>
<link href='assets/github.css' rel='stylesheet'>
<link href='assets/split.css' rel='stylesheet'>
</head>
<body class='documentation m0'>
<div class='flex'>
<div id='split-left' class='overflow-auto fs0 height-viewport-100'>
<div class='py1 px2'>
<h3 class='mb0 no-anchor'>@fission-suite/kit</h3>
<div class='mb1'><code>2.1.0</code></div>
<input
placeholder='Filter'
id='filter-input'
class='col12 block input'
spellcheck='false'
autocapitalize='off'
autocorrect='off'
type='text' />
<div id='toc'>
<ul class='list-reset h5 py1-ul'>
<li><a
href='#animations'
class=" toggle-sibling">
animations
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#animationsloading'
class='regular pre-open'>
.loading
</a></li>
<li><a
href='#animationsloading-left-spin'
class='regular pre-open'>
.loading-left-spin
</a></li>
<li><a
href='#animationsloading-right-spin'
class='regular pre-open'>
.loading-right-spin
</a></li>
<li><a
href='#animationsloading-line-1'
class='regular pre-open'>
.loading-line-1
</a></li>
<li><a
href='#animationsloading-line-2'
class='regular pre-open'>
.loading-line-2
</a></li>
<li><a
href='#animationsloading-line-3'
class='regular pre-open'>
.loading-line-3
</a></li>
<li><a
href='#animationsloading-line-4'
class='regular pre-open'>
.loading-line-4
</a></li>
<li><a
href='#animationsloading-bugfix-placeholder-rotate'
class='regular pre-open'>
.loading-bugfix-placeholder-rotate
</a></li>
<li><a
href='#animationsloading-bugfix-placeholder-line-1'
class='regular pre-open'>
.loading-bugfix-placeholder-line-1
</a></li>
<li><a
href='#animationsloading-bugfix-placeholder-line-2'
class='regular pre-open'>
.loading-bugfix-placeholder-line-2
</a></li>
<li><a
href='#animationsloading-bugfix-placeholder-line-3'
class='regular pre-open'>
.loading-bugfix-placeholder-line-3
</a></li>
<li><a
href='#animationsloading-bugfix-placeholder-line-4'
class='regular pre-open'>
.loading-bugfix-placeholder-line-4
</a></li>
</ul>
</div>
</li>
<li><a
href='#keyframes'
class=" toggle-sibling">
keyframes
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#keyframesloading-rotate'
class='regular pre-open'>
.loading-rotate
</a></li>
<li><a
href='#keyframesloading-left-spin'
class='regular pre-open'>
.loading-left-spin
</a></li>
<li><a
href='#keyframesloading-right-spin'
class='regular pre-open'>
.loading-right-spin
</a></li>
<li><a
href='#keyframesloading-line-1'
class='regular pre-open'>
.loading-line-1
</a></li>
<li><a
href='#keyframesloading-line-2'
class='regular pre-open'>
.loading-line-2
</a></li>
<li><a
href='#keyframesloading-line-3'
class='regular pre-open'>
.loading-line-3
</a></li>
<li><a
href='#keyframesloading-line-4'
class='regular pre-open'>
.loading-line-4
</a></li>
</ul>
</div>
</li>
<li><a
href='#colors'
class=" toggle-sibling">
colors
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#colorspink'
class='regular pre-open'>
.pink
</a></li>
<li><a
href='#colorspink_tint'
class='regular pre-open'>
.pink_tint
</a></li>
<li><a
href='#colorspink_shade'
class='regular pre-open'>
.pink_shade
</a></li>
<li><a
href='#colorspurple'
class='regular pre-open'>
.purple
</a></li>
<li><a
href='#colorspurple_tint'
class='regular pre-open'>
.purple_tint
</a></li>
<li><a
href='#colorspurple_shade'
class='regular pre-open'>
.purple_shade
</a></li>
<li><a
href='#colorsyellow'
class='regular pre-open'>
.yellow
</a></li>
<li><a
href='#colorsbase_25'
class='regular pre-open'>
.base_25
</a></li>
<li><a
href='#colorsbase_50'
class='regular pre-open'>
.base_50
</a></li>
<li><a
href='#colorsbase_100'
class='regular pre-open'>
.base_100
</a></li>
<li><a
href='#colorsbase_200'
class='regular pre-open'>
.base_200
</a></li>
<li><a
href='#colorsbase_300'
class='regular pre-open'>
.base_300
</a></li>
<li><a
href='#colorsbase_400'
class='regular pre-open'>
.base_400
</a></li>
<li><a
href='#colorsbase_500'
class='regular pre-open'>
.base_500
</a></li>
<li><a
href='#colorsbase_600'
class='regular pre-open'>
.base_600
</a></li>
<li><a
href='#colorsbase_700'
class='regular pre-open'>
.base_700
</a></li>
<li><a
href='#colorsbase_800'
class='regular pre-open'>
.base_800
</a></li>
<li><a
href='#colorsbase_900'
class='regular pre-open'>
.base_900
</a></li>
<li><a
href='#colorsbase_950'
class='regular pre-open'>
.base_950
</a></li>
<li><a
href='#colorsmarker_yellow'
class='regular pre-open'>
.marker_yellow
</a></li>
<li><a
href='#colorsmarker_yellow_tint'
class='regular pre-open'>
.marker_yellow_tint
</a></li>
<li><a
href='#colorsmarker_yellow_shade'
class='regular pre-open'>
.marker_yellow_shade
</a></li>
<li><a
href='#colorsblack'
class='regular pre-open'>
.black
</a></li>
<li><a
href='#colorsgreen'
class='regular pre-open'>
.green
</a></li>
<li><a
href='#colorsred'
class='regular pre-open'>
.red
</a></li>
<li><a
href='#colorswhite'
class='regular pre-open'>
.white
</a></li>
</ul>
</div>
</li>
<li><a
href='#primarycolor'
class="">
primaryColor
</a>
</li>
<li><a
href='#secondarycolor'
class="">
secondaryColor
</a>
</li>
<li><a
href='#hsl'
class="">
hsl
</a>
</li>
<li><a
href='#rgb'
class="">
rgb
</a>
</li>
<li><a
href='#fonts'
class=" toggle-sibling">
fonts
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#fontsbody'
class='regular pre-open'>
.body
</a></li>
<li><a
href='#fontsdisplay'
class='regular pre-open'>
.display
</a></li>
<li><a
href='#fontsmono'
class='regular pre-open'>
.mono
</a></li>
</ul>
</div>
</li>
<li><a
href='#fontsizes'
class=" toggle-sibling">
fontSizes
<span class='icon'>▸</span>
</a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Static members</span></li>
<li><a
href='#fontsizestiny'
class='regular pre-open'>
.tiny
</a></li>
<li><a
href='#fontsizesslight'
class='regular pre-open'>
.slight
</a></li>
</ul>
</div>
</li>
<li><a
href='#fontfaces'
class="">
fontFaces
</a>
</li>
<li><a
href='#dasherizeobjectkeys'
class="">
dasherizeObjectKeys
</a>
</li>
<li><a
href='#tailwindpurgelist'
class="">
tailwindPurgeList
</a>
</li>
</ul>
</div>
<div class='mt1 h6 quiet'>
<a href='https://documentation.js.org/reading-documentation.html'>Need help reading this?</a>
</div>
</div>
</div>
<div id='split-right' class='relative overflow-auto height-viewport-100'>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='animations'>
animations
</h3>
</div>
<div class='pre p1 fill-light mt0'>animations</div>
<div class='py1 quiet mt1 prose-big'>Static Members</div>
<div class="clearfix">
<div class='border-bottom' id='animationsloading'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-left-spin'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-left-spin</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-left-spin</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-right-spin'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-right-spin</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-right-spin</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-line-1'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-line-1</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-line-1</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-line-2'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-line-2</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-line-2</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-line-3'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-line-3</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-line-3</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-line-4'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-line-4</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-line-4</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-bugfix-placeholder-rotate'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-bugfix-placeholder-rotate</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-bugfix-placeholder-rotate</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-bugfix-placeholder-line-1'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-bugfix-placeholder-line-1</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-bugfix-placeholder-line-1</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-bugfix-placeholder-line-2'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-bugfix-placeholder-line-2</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-bugfix-placeholder-line-2</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-bugfix-placeholder-line-3'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-bugfix-placeholder-line-3</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-bugfix-placeholder-line-3</div>
</section>
</div>
</div>
<div class='border-bottom' id='animationsloading-bugfix-placeholder-line-4'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-bugfix-placeholder-line-4</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-bugfix-placeholder-line-4</div>
</section>
</div>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='keyframes'>
keyframes
</h3>
</div>
<div class='pre p1 fill-light mt0'>keyframes</div>
<div class='py1 quiet mt1 prose-big'>Static Members</div>
<div class="clearfix">
<div class='border-bottom' id='keyframesloading-rotate'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-rotate</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-rotate</div>
</section>
</div>
</div>
<div class='border-bottom' id='keyframesloading-left-spin'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-left-spin</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-left-spin</div>
</section>
</div>
</div>
<div class='border-bottom' id='keyframesloading-right-spin'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-right-spin</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-right-spin</div>
</section>
</div>
</div>
<div class='border-bottom' id='keyframesloading-line-1'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-line-1</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-line-1</div>
</section>
</div>
</div>
<div class='border-bottom' id='keyframesloading-line-2'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-line-2</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-line-2</div>
</section>
</div>
</div>
<div class='border-bottom' id='keyframesloading-line-3'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-line-3</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-line-3</div>
</section>
</div>
</div>
<div class='border-bottom' id='keyframesloading-line-4'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>loading-line-4</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>loading-line-4</div>
</section>
</div>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='colors'>
colors
</h3>
</div>
<p>Colors dictionary.</p>
<div class='pre p1 fill-light mt0'>colors</div>
<div class='py1 quiet mt1 prose-big'>Static Members</div>
<div class="clearfix">
<div class='border-bottom' id='colorspink'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>pink</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>pink</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorspink_tint'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>pink_tint</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>pink_tint</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorspink_shade'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>pink_shade</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>pink_shade</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorspurple'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>purple</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>purple</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorspurple_tint'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>purple_tint</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>purple_tint</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorspurple_shade'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>purple_shade</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>purple_shade</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsyellow'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>yellow</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>yellow</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_25'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_25</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_25</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_50'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_50</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_50</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_100'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_100</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_100</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_200'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_200</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_200</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_300'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_300</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_300</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_400'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_400</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_400</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_500'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_500</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_500</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_600'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_600</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_600</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_700'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_700</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_700</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_800'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_800</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_800</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_900'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_900</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_900</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsbase_950'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>base_950</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>base_950</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsmarker_yellow'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>marker_yellow</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>marker_yellow</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsmarker_yellow_tint'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>marker_yellow_tint</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>marker_yellow_tint</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsmarker_yellow_shade'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>marker_yellow_shade</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>marker_yellow_shade</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsblack'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>black</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>black</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsgreen'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>green</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>green</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorsred'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>red</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>red</div>
</section>
</div>
</div>
<div class='border-bottom' id='colorswhite'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>white</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>white</div>
</section>
</div>
</div>
</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='primarycolor'>
primaryColor
</h3>
</div>
<div class='pre p1 fill-light mt0'>primaryColor</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='secondarycolor'>
secondaryColor
</h3>
</div>
<div class='pre p1 fill-light mt0'>secondaryColor</div>
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='hsl'>
hsl
</h3>
</div>
<p>hsl css color function.</p>
<div class='pre p1 fill-light mt0'>hsl(h: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, s: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, l: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>h</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>s</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='space-bottom0'>
<div>
<span class='code bold'>l</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
</div>
<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>:
</section>
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='clearfix'>
<h3 class='fl m0' id='rgb'>
rgb
</h3>
</div>
<p>rgb css color function.</p>
<div class='pre p1 fill-light mt0'>rgb(r: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, g: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, b: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>r</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
</div>
</div>
<div class='