mirror of
https://github.com/penpot/penpot.git
synced 2026-04-26 11:48:28 +00:00
1354 lines
41 KiB
HTML
1354 lines
41 KiB
HTML
<h1 class="display">Plugin styles</h1>
|
|
<main>
|
|
<section aria-label="colors">
|
|
<h2 class="title-large title-margin">Colors</h2>
|
|
<ul class="color-section">
|
|
<li>
|
|
<h4 class="title-medium title-margin">Background</h4>
|
|
<ul class="theme-group" data-theme="dark">
|
|
<li class="color">
|
|
<code class="color-label">--db-primary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--db-primary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--db-secondary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--db-secondary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--db-tertiary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--db-tertiary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--db-quaternary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--db-quaternary)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
<ul class="theme-group" data-theme="light">
|
|
<li class="color">
|
|
<code class="color-label">--lb-primary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--lb-primary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--lb-secondary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--lb-secondary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--lb-tertiary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--lb-tertiary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--lb-quaternary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--lb-quaternary)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h4 class="title-medium title-margin">Foreground</h4>
|
|
<ul class="theme-group" data-theme="dark">
|
|
<li class="color">
|
|
<code class="color-label">--df-primary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--df-primary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--df-secondary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--df-secondary)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
<ul class="theme-group" data-theme="light">
|
|
<li class="color">
|
|
<code class="color-label">--lf-primary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--lf-primary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--lf-secondary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--lf-secondary)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h4 class="title-medium title-margin">Accent</h4>
|
|
<ul class="theme-group" data-theme="dark">
|
|
<li class="color">
|
|
<code class="color-label">--da-primary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--da-primary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--da-primary-muted</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--da-primary-muted)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--da-secondary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--da-secondary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--da-tertiary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--da-tertiary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--da-quaternary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--da-quaternary)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
<ul class="theme-group" data-theme="light">
|
|
<li class="color">
|
|
<code class="color-label">--la-primary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--la-primary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--la-primary-muted</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--la-primary-muted)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--la-secondary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--la-secondary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--la-tertiary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--la-tertiary)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--la-quaternary</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--la-quaternary)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h4 class="title-medium title-margin">Status color</h4>
|
|
<ul class="theme-group" data-theme="dark">
|
|
<li class="color">
|
|
<code class="color-label">--success-50</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--success-50)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--success-500</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--success-500)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--success-950</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--success-950)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--warning-50</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--warning-50)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--warning-500</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--warning-500)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--warning-950</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--warning-950)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--error-50</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--error-50)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--error-500</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--error-500)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--error-950</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--error-950)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--info-50</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--info-50)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--info-500</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--info-500)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--info-950</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--info-950)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h4 class="title-medium title-margin">App color</h4>
|
|
<ul class="theme-group" data-theme="dark">
|
|
<li class="color">
|
|
<code class="color-label">--app-white</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-white)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-black</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-black)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-pink</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-pink)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-blue</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-blue)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-gold</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-gold)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-indigo</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-indigo)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-red</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-red)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-yellow</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-yellow)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-purple</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-purple)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-lemon</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-lemon)"
|
|
></span>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-orange</code>
|
|
<span
|
|
class="color-preview"
|
|
style="background-color: var(--app-orange)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section aria-label="fonts">
|
|
<h2 class="title-large title-margin">Fonts</h2>
|
|
<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>
|
|
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</section>
|
|
|
|
<section aria-label="spacing">
|
|
<h2 class="title-large title-margin">Spacing</h2>
|
|
<ul>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-4</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-4)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-8</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-8)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-12</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-12)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-16</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-16)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-20</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-20)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-24</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-24)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-28</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-28)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-32</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-32)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-36</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-36)"
|
|
></span>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-40</code>
|
|
<span
|
|
class="spacing-preview"
|
|
style="inline-size: var(--spacing-40)"
|
|
></span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section aria-label="select">
|
|
<h2 class="title-large title-margin">Select</h2>
|
|
<div class="component-section select-section">
|
|
<div class="theme-group" data-theme="dark">
|
|
<div class="inputs-list">
|
|
<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="">Select an animal</option>
|
|
<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>
|
|
</div>
|
|
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
<div class="component-section select-section">
|
|
<div class="theme-group" data-theme="light">
|
|
<div class="inputs-list">
|
|
<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="">Select an animal</option>
|
|
<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>
|
|
</div>
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-label="input">
|
|
<h2 class="title-large title-margin">Input</h2>
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="dark">
|
|
<div class="inputs-list">
|
|
<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>
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="light">
|
|
<div class="inputs-list">
|
|
<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>
|
|
</div>
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-label="buttons">
|
|
<h2 class="title-large title-margin">Buttons</h2>
|
|
<h3 class="title-medium title-margin">Primary button</h3>
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="dark">
|
|
<ul class="button-list">
|
|
<li>
|
|
<button type="button" data-appearance="primary">
|
|
Primary dark
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" data-appearance="primary" disabled>
|
|
Disabled
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<ul class="button-list">
|
|
<li>
|
|
<button
|
|
type="button"
|
|
data-appearance="primary"
|
|
data-variant="destructive"
|
|
>
|
|
Primary dark destructive
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
data-appearance="primary"
|
|
data-variant="destructive"
|
|
disabled
|
|
>
|
|
Disabled
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="light">
|
|
<ul class="button-list">
|
|
<li>
|
|
<button type="button" data-appearance="primary">
|
|
Primary Light
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" data-appearance="primary" disabled>
|
|
Disabled
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<ul class="button-list">
|
|
<li>
|
|
<button
|
|
type="button"
|
|
data-appearance="primary"
|
|
data-variant="destructive"
|
|
>
|
|
Primary light destructive
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button
|
|
type="button"
|
|
data-appearance="primary"
|
|
data-variant="destructive"
|
|
disabled
|
|
>
|
|
Disabled
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
|
|
<h3 class="title-medium title-margin">Secondary button</h3>
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="dark">
|
|
<ul class="button-list">
|
|
<li>
|
|
<button type="button" data-appearance="secondary">
|
|
Secondary dark
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" data-appearance="secondary" disabled>
|
|
Disabled
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<template lang="html">
|
|
<div data-theme="dark">
|
|
<button type="button" data-appearance="secondary">
|
|
Secondary Dark
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="light">
|
|
<ul class="button-list">
|
|
<li>
|
|
<button type="button" data-appearance="secondary">
|
|
Secondary Light
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button type="button" data-appearance="secondary" disabled>
|
|
Disabled
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<template lang="html">
|
|
<div data-theme="light">
|
|
<button type="button" data-appearance="secondary">
|
|
Secondary Light
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-label="checkbox">
|
|
<h2 class="title-large title-margin">Checkbox</h2>
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="dark">
|
|
<div
|
|
class="checkbox-container"
|
|
style="margin-block-end: var(--spacing-8)"
|
|
>
|
|
<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>
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="light">
|
|
<div
|
|
class="checkbox-container"
|
|
style="margin-block-end: var(--spacing-8)"
|
|
>
|
|
<input
|
|
class="checkbox-input"
|
|
type="checkbox"
|
|
id="checkbox3"
|
|
value="checkbox_third"
|
|
/>
|
|
<label for="checkbox3" class="checkbox-hidden">Light checkbox</label>
|
|
</div>
|
|
<label 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
|
|
>
|
|
</label>
|
|
</div>
|
|
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-label="radio">
|
|
<h2 class="title-large title-margin">Radio button</h2>
|
|
<div class="component-section">
|
|
<div class="theme-group" 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>
|
|
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="component-section">
|
|
<div class="theme-group" 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>
|
|
|
|
<template lang="html">
|
|
<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>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-label="switch">
|
|
<h2 class="title-large title-margin">Switch</h2>
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="dark">
|
|
<ul class="switch-list">
|
|
<li>
|
|
<label for="switch1" id="switch1-label" class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch1-label"
|
|
id="switch1"
|
|
value="switch1"
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="switch2" id="switch2-label" class="body-m">
|
|
Checked
|
|
</label>
|
|
<label class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch2-label"
|
|
id="switch2"
|
|
value="switch2"
|
|
checked
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="switch3" id="switch3-label" class="body-m">
|
|
Disabled
|
|
</label>
|
|
<label class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch3-label"
|
|
id="switch3"
|
|
value="switch3"
|
|
disabled
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<template lang="html">
|
|
<div class="theme-group" data-theme="dark">
|
|
<label for="switch1" id="switch1-label" class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch1-label"
|
|
id="switch1"
|
|
value="switch1"
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
|
|
<div>
|
|
<label for="switch2" id="switch2-label" class="body-m">
|
|
Checked
|
|
</label>
|
|
<label class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch2-label"
|
|
id="switch2"
|
|
value="switch2"
|
|
checked
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="switch3" id="switch3-label" class="body-m">
|
|
Disabled
|
|
</label>
|
|
<label class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch3-label"
|
|
id="switch3"
|
|
value="switch3"
|
|
disabled
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="component-section">
|
|
<div class="theme-group" data-theme="light">
|
|
<ul class="switch-list">
|
|
<li>
|
|
<label for="switch4" id="switch4-label" class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch4-label"
|
|
id="switch4"
|
|
value="switch4"
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="switch5" id="switch5-label" class="body-m">
|
|
Checked
|
|
</label>
|
|
<label class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch5-label"
|
|
id="switch5"
|
|
value="switch5"
|
|
checked
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</li>
|
|
|
|
<li>
|
|
<label for="switch6" id="switch6-label" class="body-m">
|
|
Disabled
|
|
</label>
|
|
<label class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch6-label"
|
|
id="switch6"
|
|
value="switch6"
|
|
disabled
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<template lang="html">
|
|
<div class="theme-group" data-theme="light">
|
|
<label for="switch4" id="switch4-label" class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch4-label"
|
|
id="switch4"
|
|
value="switch4"
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
|
|
<div>
|
|
<label for="switch5" id="switch5-label" class="body-m">
|
|
Checked
|
|
</label>
|
|
<label class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch5-label"
|
|
id="switch5"
|
|
value="switch5"
|
|
checked
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="switch6" id="switch6-label" class="body-m">
|
|
Disabled
|
|
</label>
|
|
<label class="switch-container">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-hidden"
|
|
aria-labelledby="switch6-label"
|
|
id="switch6"
|
|
value="switch6"
|
|
disabled
|
|
/>
|
|
<span class="switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
</main>
|