Plugin styles

Colors

  • Background

    • --db-primary
    • --db-secondary
    • --db-tertiary
    • --db-quaternary
    • --lb-primary
    • --lb-secondary
    • --lb-tertiary
    • --lb-quaternary

  • Foreground

    • --df-primary
    • --df-secondary
    • --lf-primary
    • --lf-secondary

  • Accent

    • --da-primary
    • --da-primary-muted
    • --da-secondary
    • --da-tertiary
    • --da-quaternary
    • --la-primary
    • --la-primary-muted
    • --la-secondary
    • --la-tertiary
    • --la-quaternary

  • Status color

    • --success-50
    • --success-500
    • --success-950
    • --warning-50
    • --warning-500
    • --warning-950
    • --error-50
    • --error-500
    • --error-950
    • --info-50
    • --info-500
    • --info-950

  • App color

    • --app-white
    • --app-black
    • --app-pink
    • --app-blue
    • --app-gold
    • --app-indigo
    • --app-red
    • --app-yellow
    • --app-purple
    • --app-lemon
    • --app-orange

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

  • --spacing-4
  • --spacing-8
  • --spacing-12
  • --spacing-16
  • --spacing-20
  • --spacing-24
  • --spacing-28
  • --spacing-32
  • --spacing-36
  • --spacing-40

Select


<div class="form-group">
  <label class="select-label-hidden" for="select-1">Which is your favorite animal?</label>
  <select class="select" id="select-1">
    <option value="1">Quokka</option>
    <option value="2">Rabbit</option>
    <option value="3">Goat</option>
    <option value="4">Capybara</option>
  </select>
</div>
<div class="form-group">
  <label class="select-label-hidden" for="select-2">Which is your favorite animal?</label>
  <select class="select" id="select-2" disabled="">
    <option value="1">Quokka</option>
    <option value="2">Rabbit</option>
    <option value="3">Goat</option>
    <option value="4">Capybara</option>
  </select>
</div>
      

<div class="form-group">
  <label class="select-label-hidden" for="select-1">Which is your favorite animal?</label>
  <select class="select" id="select-1">
    <option value="1">Quokka</option>
    <option value="2">Rabbit</option>
    <option value="3">Goat</option>
    <option value="4">Capybara</option>
  </select>
</div>
<div class="form-group">
  <label class="select-label-hidden" for="select-2">Which is your favorite animal?</label>
  <select class="select" id="select-2" disabled="">
    <option value="1">Quokka</option>
    <option value="2">Rabbit</option>
    <option value="3">Goat</option>
    <option value="4">Capybara</option>
  </select>
</div>

Input


<div class="theme-group" data-theme="dark">
  <div class="form-group">
    <label class="input-label-hidden" for="input-1">This is the label</label>
    <input class="input" type="text" placeholder="Input dark
 theme" id="input-1">
  </div>
  <div class="form-group">
    <label class="input-label-hidden" for="input-2">This is the label</label>
    <input class="input success" type="text" placeholder="Input dark theme success" id="input-2">
  </div>
  <div class="form-group">
    <label class="input-label-hidden" for="input-3">This is the label</label>
    <input class="input error" type="text" placeholder="Input
 dark theme error" id="input-3">
  </div>
</div>
      

<div class="theme-group" data-theme="light">
  <div class="form-group">
    <label class="input-label-hidden" for="input-4">This is the label</label>
    <input class="input" type="text" placeholder="Input light
 theme" id="input-4">
  </div>
  <div class="form-group">
    <label class="input-label-hidden" for="input-5">This is the label</label>
    <input class="input success" type="text" placeholder="Input light theme success" id="input-5">
  </div>
  <div class="form-group">
    <label class="input-label-hidden" for="input-6">This is the label</label>
    <input class="input error" type="text" placeholder="Input
 light theme error" id="input-6">
  </div>
</div>

Buttons

Primary button


<div data-theme="dark">
  <button type="button" data-appearance="primary">Primary Dark</button>
  <button type="button" data-appearance="primary" data-variant="destructive">
    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>

Checkbox


<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>