Plugins styles

Colors

Fonts

Display

Title L

Title M

Title S

Headline L

Headline M

Headline S

Body large

Body medium

Body small

Caption

Code font

<p class="display">Display</p>
<p class="title-l">Title L</p>
<p class="title-m">Title M</p>
<p class="title-s">Title S</p>
<p class="headline-l">Headline L</p>
<p class="headline-m">Headline M</p>
<p class="headline-s">Headline S</p>
<p class="body-l">Body large</p>
<p class="body-m">Body medium</p>
<p class="body-s">Body small</p>
<p class="caption">Caption</p>
<p class="code-font">Code font</p>

Spacing

Icons

Buttons

Primary button

<div data-theme="dark">
 <button type="button" data-appearance="primary">Primary Dark</button>
 <button type="button" data-appearance="primary">Primary Dark destructive</button>
</div>
<div data-theme="light">
 <button type="button" data-appearance="primary">Primary Light</button>
 <button type="button" data-appearance="primary" data-variant="destructive">Primary Light destructive</button>
</div>

Secondary button

<div data-theme="dark">
 <button type="button" data-appearance="secondary">Secondary Dark</button>
</div>
<div data-theme="light">
 <button type="button" data-appearance="secondary">Secondary Light</button>
</div>

Checkox

<div data-theme="dark">
 <div class="checkbox-container">
   <input class="checkbox-input" type="checkbox" id="checkbox1" value="checkbox_one" />
   <label for="checkbox1" class="checkbox-hidden">Dark checkbox</label>
 </div>

 <div class="checkbox-container">
   <input class="checkbox-input" type="checkbox" id="checkbox2" value="checkbox_second" />
   <label for="checkbox2" class="body-small">Dark checkbox with label</label>
 </div> </div>
<div data-theme="light">
 <div class="checkbox-container">
   <input class="checkbox-input" type="checkbox" id="checkbox3" value="third" />
   <label for="checkbox3" class="checkbox-hidden">Light checkbox</label>
 </div>

 <div class="checkbox-container">
   <input class="checkbox-input" type="checkbox" id="checkbox4" value="checkbox_fourth" />
   <label for="checkbox4" class="body-small">Light checkbox with label</label>
 </div> </div>

Radio button

<div data-theme="dark">
 <div class="radio-container">
  <input type="radio" class="radio-input" id="quokka" name="animal" value="quokka">
  <label class="radio-label" for="quokka">quokka</label>
 </div>
 <div class="radio-container">
  <input type="radio" class="radio-input" id="capybara" name="animal" value="capybara">
  <label class="radio-label" for="capybara">capybara</label>
 </div>
 <div class="radio-container">
  <input type="radio" class="radio-input" id="goat" name="animal" value="goat">
  <label class="radio-label" for="goat">goat</label>
 </div>
</div>
<div data-theme="light">
 <div class="radio-container">
  <input type="radio" class="radio-input" id="rabbit" name="small-animals" value="rabbit">
  <label class="radio-label" for="rabbit">rabbit</label>
 </div>
 <div class="radio-container">
  <input type="radio" class="radio-input" id="mouse" name="small-animals" value="mouse">
  <label class="radio-label" for="mouse">mouse</label>
 </div>
 <div class="radio-container">
  <input type="radio" class="radio-input" id="chinchilla" name="small-animals" value="chinchilla">
  <label class="radio-label" for="chinchilla">chinchilla</label>
 </div>
</div>