mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-24 15:48:53 -05:00
519 lines
25 KiB
HTML
519 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="lib/styles.css">
|
|
<link rel="stylesheet" href="examples.css">
|
|
</head>
|
|
<body>
|
|
<h1 class="display">Plugins styles</h1>
|
|
<main>
|
|
<section aria-label="colors">
|
|
<h2 class="title-large">Colors</h2>
|
|
<ul class="color-section">
|
|
<li>
|
|
<h4 class="title-medium">Background</h4>
|
|
<h5 class="title-small">Dark</h5>
|
|
<ul>
|
|
<li class="color">
|
|
<code class="color-label">--db-primary</code>
|
|
<span class="color-preview" style="background-color: var(--db-primary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--db-secondary</code>
|
|
<span class="color-preview" style="background-color: var(--db-secondary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--db-tertiary</code>
|
|
<span class="color-preview" style="background-color: var(--db-tertiary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--db-quaternary</code>
|
|
<span class="color-preview" style="background-color: var(--db-quaternary);"></span></button>
|
|
</li>
|
|
</ul>
|
|
<h5 class="title-small">Light</h5>
|
|
<ul>
|
|
<li class="color">
|
|
<code class="color-label">--lb-primary</code>
|
|
<span class="color-preview" style="background-color: var(--lb-primary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--lb-secondary</code>
|
|
<span class="color-preview" style="background-color: var(--lb-secondary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--lb-tertiary</code>
|
|
<span class="color-preview" style="background-color: var(--lb-tertiary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--lb-quaternary</code>
|
|
<span class="color-preview" style="background-color: var(--lb-quaternary);"></span></button>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h4 class="title-medium">Foreground</h4>
|
|
<h5 class="title-small">Dark</h5>
|
|
<ul>
|
|
<li class="color">
|
|
<code class="color-label">--df-primary</code>
|
|
<span class="color-preview" style="background-color: var(--df-primary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--df-secondary</code>
|
|
<span class="color-preview" style="background-color: var(--df-secondary);"></span></button>
|
|
</li>
|
|
</ul>
|
|
<h5 class="title-small">Light</h5>
|
|
<ul>
|
|
<li class="color">
|
|
<code class="color-label">--lf-primary</code>
|
|
<span class="color-preview" style="background-color: var(--lf-primary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--lf-secondary</code>
|
|
<span class="color-preview" style="background-color: var(--lf-secondary);"></span></button>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h4 class="title-medium">Accent</h4>
|
|
<h5 class="title-small">Dark</h5>
|
|
<ul>
|
|
<li class="color">
|
|
<code class="color-label">--da-primary</code>
|
|
<span class="color-preview" style="background-color: var(--da-primary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--da-primary-muted</code>
|
|
<span class="color-preview" style="background-color: var(--da-primary-muted);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--da-secondary</code>
|
|
<span class="color-preview" style="background-color: var(--da-secondary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--da-tertiary</code>
|
|
<span class="color-preview" style="background-color: var(--da-tertiary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--da-quaternary</code>
|
|
<span class="color-preview" style="background-color: var(--da-quaternary);"></span></button>
|
|
</li>
|
|
</ul>
|
|
<h5 class="title-small">Light</h5>
|
|
<ul>
|
|
<li class="color">
|
|
<code class="color-label">--la-primary</code>
|
|
<span class="color-preview" style="background-color: var(--la-primary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--la-primary-muted</code>
|
|
<span class="color-preview" style="background-color: var(--la-primary-muted);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--la-seconlary</code>
|
|
<span class="color-preview" style="background-color: var(--la-seconlary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--la-tertiary</code>
|
|
<span class="color-preview" style="background-color: var(--la-tertiary);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--la-quaternary</code>
|
|
<span class="color-preview" style="background-color: var(--la-quaternary);"></span></button>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h4 class="title-medium">Status color</h4>
|
|
<ul>
|
|
<li class="color">
|
|
<code class="color-label">--success-50</code>
|
|
<span class="color-preview" style="background-color: var(--success-50);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--success-500</code>
|
|
<span class="color-preview" style="background-color: var(--success-500);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--success-950</code>
|
|
<span class="color-preview" style="background-color: var(--success-950);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--warning-50</code>
|
|
<span class="color-preview" style="background-color: var(--warning-50);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--warning-500</code>
|
|
<span class="color-preview" style="background-color: var(--warning-500);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--warning-950</code>
|
|
<span class="color-preview" style="background-color: var(--warning-950);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--error-50</code>
|
|
<span class="color-preview" style="background-color: var(--error-50);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--error-500</code>
|
|
<span class="color-preview" style="background-color: var(--error-500);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--error-950</code>
|
|
<span class="color-preview" style="background-color: var(--error-950);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--info-50</code>
|
|
<span class="color-preview" style="background-color: var(--info-50);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--info-500</code>
|
|
<span class="color-preview" style="background-color: var(--info-500);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--info-950</code>
|
|
<span class="color-preview" style="background-color: var(--info-950);"></span></button>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<h4 class="title-medium">App color</h4>
|
|
<ul>
|
|
<li class="color">
|
|
<code class="color-label">--app-white</code>
|
|
<span class="color-preview" style="background-color: var(--app-white);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-black</code>
|
|
<span class="color-preview" style="background-color: var(--app-black);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-pink</code>
|
|
<span class="color-preview" style="background-color: var(--app-pink);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-blue</code>
|
|
<span class="color-preview" style="background-color: var(--app-blue);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-gold</code>
|
|
<span class="color-preview" style="background-color: var(--app-gold);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-indigo</code>
|
|
<span class="color-preview" style="background-color: var(--app-indigo);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-red</code>
|
|
<span class="color-preview" style="background-color: var(--app-red);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-yellow</code>
|
|
<span class="color-preview" style="background-color: var(--app-yellow);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-purple</code>
|
|
<span class="color-preview" style="background-color: var(--app-purple);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-lemon</code>
|
|
<span class="color-preview" style="background-color: var(--app-lemon);"></span></button>
|
|
</li>
|
|
<li class="color">
|
|
<code class="color-label">--app-orange</code>
|
|
<span class="color-preview" style="background-color: var(--app-orange);"></span></button>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section aria-label="fonts">
|
|
<h2 class="title-large">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>
|
|
|
|
<code class="code code-font">
|
|
<p class="display">Display</p> <br>
|
|
<p class="title-l">Title L</p> <br>
|
|
<p class="title-m">Title M</p> <br>
|
|
<p class="title-s">Title S</p> <br>
|
|
<p class="headline-l">Headline L</p> <br>
|
|
<p class="headline-m">Headline M</p> <br>
|
|
<p class="headline-s">Headline S</p> <br>
|
|
<p class="body-l">Body large</p> <br>
|
|
<p class="body-m">Body medium</p> <br>
|
|
<p class="body-s">Body small</p> <br>
|
|
<p class="caption">Caption</p> <br>
|
|
<p class="code-font">Code font</p> <br>
|
|
</code>
|
|
</section>
|
|
|
|
<section aria-label="spacing">
|
|
<h2 class="title-large">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></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-8</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-8);"></span></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-12</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-12);"></span></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-16</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-16);"></span></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-20</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-20);"></span></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-24</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-24);"></span></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-28</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-28);"></span></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-32</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-32);"></span></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-36</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-36);"></span></button>
|
|
</li>
|
|
<li class="spacing-group">
|
|
<code class="spacing-label">--spacing-40</code>
|
|
<span class="spacing-preview" style="inline-size: var(--spacing-40);"></span></button>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section aria-label="icons">
|
|
<h2 class="title-large">Icons</h2>
|
|
<div class="component-section">
|
|
<span class="icon icon-arrow-bottom"></span>
|
|
<span class="icon icon-arrow-top"></span>
|
|
<span class="icon icon-arrow-right"></span>
|
|
<span class="icon icon-arrow-left"></span>
|
|
<span class="icon icon-actions-close"></span>
|
|
<span class="icon icon-actions-close-l"></span>
|
|
<span class="icon icon-actions-delete"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-label="buttons">
|
|
<h2 class="title-large">Buttons</h2>
|
|
<h3 class="title-medium">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>
|
|
|
|
<code class="code code-font">
|
|
<div data-theme="dark"> <br>
|
|
<button type="button" data-appearance="primary">Primary Dark</button> <br>
|
|
<button type="button" data-appearance="primary">Primary Dark destructive</button> <br>
|
|
</div>
|
|
</code>
|
|
</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>
|
|
<code class="code code-font">
|
|
<div data-theme="light"> <br>
|
|
<button type="button" data-appearance="primary">Primary Light</button> <br>
|
|
<button type="button" data-appearance="primary" data-variant="destructive">Primary Light destructive</button> <br>
|
|
</div>
|
|
</code>
|
|
</div>
|
|
|
|
<h3 class="title-medium">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>
|
|
<code class="code code-font">
|
|
<div data-theme="dark"> <br>
|
|
<button type="button" data-appearance="secondary">Secondary Dark</button> <br>
|
|
</div>
|
|
</code>
|
|
</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>
|
|
<code class="code code-font">
|
|
<div data-theme="light"> <br>
|
|
<button type="button" data-appearance="secondary">Secondary Light</button> <br>
|
|
</div>
|
|
</code>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-label="checkox">
|
|
<h2 class="title-large">Checkox</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>
|
|
<code class="code code-font">
|
|
<div data-theme="dark"> <br>
|
|
<div class="checkbox-container"> <br>
|
|
<input class="checkbox-input" type="checkbox" id="checkbox1" value="checkbox_one" /> <br>
|
|
<label for="checkbox1" class="checkbox-hidden">Dark checkbox</label> <br>
|
|
</div> <br> <br>
|
|
<div class="checkbox-container"> <br>
|
|
<input class="checkbox-input" type="checkbox" id="checkbox2" value="checkbox_second" /> <br>
|
|
<label for="checkbox2" class="body-small">Dark checkbox with label</label> <br>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</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>
|
|
<code class="code code-font">
|
|
<div data-theme="light"> <br>
|
|
<div class="checkbox-container"> <br>
|
|
<input class="checkbox-input" type="checkbox" id="checkbox3" value="third" /> <br>
|
|
<label for="checkbox3" class="checkbox-hidden">Light checkbox</label> <br>
|
|
</div> <br> <br>
|
|
<div class="checkbox-container"> <br>
|
|
<input class="checkbox-input" type="checkbox" id="checkbox4" value="checkbox_fourth" /> <br>
|
|
<label for="checkbox4" class="body-small">Light checkbox with label</label> <br>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</div>
|
|
</section>
|
|
|
|
<section aria-label="radio">
|
|
<h2 class="title-large">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>
|
|
<code class="code code-font">
|
|
<div data-theme="dark"> <br>
|
|
<div class="radio-container"> <br>
|
|
<input type="radio" class="radio-input" id="quokka" name="animal" value="quokka"> <br>
|
|
<label class="radio-label" for="quokka">quokka</label> <br>
|
|
</div> <br>
|
|
<div class="radio-container"> <br>
|
|
<input type="radio" class="radio-input" id="capybara" name="animal" value="capybara"> <br>
|
|
<label class="radio-label" for="capybara">capybara</label> <br>
|
|
</div> <br>
|
|
<div class="radio-container"> <br>
|
|
<input type="radio" class="radio-input" id="goat" name="animal" value="goat"> <br>
|
|
<label class="radio-label" for="goat">goat</label> <br>
|
|
</div> <br>
|
|
</div>
|
|
</code>
|
|
</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>
|
|
<code class="code code-font">
|
|
<div data-theme="light"> <br>
|
|
<div class="radio-container"> <br>
|
|
<input type="radio" class="radio-input" id="rabbit" name="small-animals" value="rabbit"> <br>
|
|
<label class="radio-label" for="rabbit">rabbit</label> <br>
|
|
</div> <br>
|
|
<div class="radio-container"> <br>
|
|
<input type="radio" class="radio-input" id="mouse" name="small-animals" value="mouse"> <br>
|
|
<label class="radio-label" for="mouse">mouse</label> <br>
|
|
</div> <br>
|
|
<div class="radio-container"> <br>
|
|
<input type="radio" class="radio-input" id="chinchilla" name="small-animals" value="chinchilla"> <br>
|
|
<label class="radio-label" for="chinchilla">chinchilla</label> <br>
|
|
</div> <br>
|
|
</div>
|
|
</code>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|