Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-01-21 06:02:34 -05:00
Code Issues Activity

feat: plugins styles

Browse source
This commit is contained in:
Marina López 2024-02-16 15:12:59 +01:00
parent ee96862ed5
commit 885482908d
18 changed files with 966 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
plugins-styles/src/examples.css
View file

@ -1,24 +1,57 @@
@import url("styles.css");
@import url("lib/styles.css");
html, body {
margin: 0;
background: var(--app-black);
color: var(--app-white);
margin: 0 var(--spacing-20);
padding: 0;
}
section {
border-bottom: 1px solid var(--app-white);
padding-block: var(--spacing-32);
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.code {
background-color: var(--app-white);
border-radius: var(--spacing-4);
color: var(--app-black);
display: block;
padding: var(--spacing-20);
}
.theme-group {
border-radius: var(--spacing-20);
margin-block-end: var(--spacing-20);
padding: var(--spacing-32);
&[data-theme="dark"] {
background-color: var(--db-primary);
border: 1px solid var(--db-quaternary);
}
&[data-theme="light"] {
background-color: var(--lb-primary);
border: 1px solid var(--lb-quaternary);
}
}
.component-section {
margin-block-end: var(--spacing-40);
}
/* COLOR */
.color-section {
background: var(--app-black);
color: var(--app-white);
display: flex;
flex-wrap: wrap;
gap: 80px;
gap: calc(var(--spacing-40) * 2);
list-style: none;
padding: 10px 30px;
width: 100%;
}
@ -26,14 +59,39 @@ ul {
align-items: center;
display: flex;
justify-content: space-between;
margin-block-end: 10px;
margin-block-end: var(--spacing-16);
}
.color-preview {
block-size: 35px;
block-size: var(--spacing-36);
border: 1px solid #8F9DA3;
border-radius: 4px;
border-radius: var(--spacing-4);
display: block;
inline-size: 35px;
margin-inline-start: 10px;
inline-size: var(--spacing-36);
margin-inline-start: var(--spacing-16);
}
/* SPACING */
.spacing-group {
display: grid;
margin-block-end: var(--spacing-16);
grid-template-columns: calc(var(--spacing-4) * 30) 1fr;
}
.spacing-label {
margin-inline-end: var(--spacing-24);
}
.spacing-preview {
background-color: var(--error-500);
}
/* BUTTONS */
.button-list {
display: flex;
gap: var(--spacing-20);
&:not(:last-child) {
margin-block-end: var(--spacing-20);
}
}

739
plugins-styles/src/examples.html
View file

@ -7,250 +7,513 @@
<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>
<h3 class="title-large">Colors</h3>
<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 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>
<h3 class="title-large">Fonts</h3>
<code class="code code-font">
&lt;p class="display">Display&lt;/p&gt; <br>
&lt;p class="title-l">Title L&lt;/p&gt; <br>
&lt;p class="title-m">Title M&lt;/p&gt; <br>
&lt;p class="title-s">Title S&lt;/p&gt; <br>
&lt;p class="headline-l">Headline L&lt;/p&gt; <br>
&lt;p class="headline-m">Headline M&lt;/p&gt; <br>
&lt;p class="headline-s">Headline S&lt;/p&gt; <br>
&lt;p class="body-l">Body large&lt;/p&gt; <br>
&lt;p class="body-m">Body medium&lt;/p&gt; <br>
&lt;p class="body-s">Body small&lt;/p&gt; <br>
&lt;p class="caption">Caption&lt;/p&gt; <br>
&lt;p class="code-font">Code font&lt;/p&gt; <br>
</code>
</section>
<h3 class="title-large">Buttons</h3>
<ul data-theme="dark">
<li><button type="button" data-appearance="primary">Primary dark</button></li>
<li><button type="button" data-appearance="primary" disabled>Disabled</button></li>
</ul>
<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>
<ul data-theme="dark">
<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>Primary dark destructive</button></li>
</ul>
<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>
<ul data-theme="light">
<li><button type="button" data-appearance="primary">Primary Light</button></li>
<li><button type="button" data-appearance="primary" disabled>Primary Light</button></li>
</ul>
<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">
&lt;div data-theme="dark"&gt; <br>
&nbsp;&lt;button type="button" data-appearance="primary"&gt;Primary Dark&lt;/button&gt; <br>
&nbsp;&lt;button type="button" data-appearance="primary"&gt;Primary Dark destructive&lt;/button&gt; <br>
&lt;/div&gt;
</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">
&lt;div data-theme="light"&gt; <br>
&nbsp;&lt;button type="button" data-appearance="primary"&gt;Primary Light&lt;/button&gt; <br>
&nbsp;&lt;button type="button" data-appearance="primary" data-variant="destructive"&gt;Primary Light destructive&lt;/button&gt; <br>
&lt;/div&gt;
</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">
&lt;div data-theme="dark"&gt; <br>
&nbsp;&lt;button type="button" data-appearance="secondary"&gt;Secondary Dark&lt;/button&gt; <br>
&lt;/div&gt;
</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">
&lt;div data-theme="light"&gt; <br>
&nbsp;&lt;button type="button" data-appearance="secondary"&gt;Secondary Light&lt;/button&gt; <br>
&lt;/div&gt;
</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">
&lt;div data-theme="dark"&gt; <br>
&nbsp;&lt;div class="checkbox-container"&gt; <br>
&nbsp;&nbsp; &lt;input class="checkbox-input" type="checkbox" id="checkbox1" value="checkbox_one" /&gt; <br>
&nbsp;&nbsp; &lt;label for="checkbox1" class="checkbox-hidden"&gt;Dark checkbox&lt;/label&gt; <br>
&nbsp;&lt;/div&gt; <br> <br>
&nbsp;&lt;div class="checkbox-container"&gt; <br>
&nbsp;&nbsp; &lt;input class="checkbox-input" type="checkbox" id="checkbox2" value="checkbox_second" /&gt; <br>
&nbsp;&nbsp; &lt;label for="checkbox2" class="body-small"&gt;Dark checkbox with label&lt;/label&gt; <br>
&nbsp;&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div data-theme="light"&gt; <br>
&nbsp;&lt;div class="checkbox-container"&gt; <br>
&nbsp;&nbsp; &lt;input class="checkbox-input" type="checkbox" id="checkbox3" value="third" /&gt; <br>
&nbsp;&nbsp; &lt;label for="checkbox3" class="checkbox-hidden"&gt;Light checkbox&lt;/label&gt; <br>
&nbsp;&lt;/div&gt; <br> <br>
&nbsp;&lt;div class="checkbox-container"&gt; <br>
&nbsp;&nbsp; &lt;input class="checkbox-input" type="checkbox" id="checkbox4" value="checkbox_fourth" /&gt; <br>
&nbsp;&nbsp; &lt;label for="checkbox4" class="body-small"&gt;Light checkbox with label&lt;/label&gt; <br>
&nbsp;&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div data-theme="dark"&gt; <br>
&nbsp;&lt;div class="radio-container"&gt; <br>
&nbsp;&nbsp;&lt;input type="radio" class="radio-input" id="quokka" name="animal" value="quokka"&gt; <br>
&nbsp;&nbsp;&lt;label class="radio-label" for="quokka"&gt;quokka&lt;/label&gt; <br>
&nbsp;&lt;/div&gt; <br>
&nbsp;&lt;div class="radio-container"&gt; <br>
&nbsp;&nbsp;&lt;input type="radio" class="radio-input" id="capybara" name="animal" value="capybara"&gt; <br>
&nbsp;&nbsp;&lt;label class="radio-label" for="capybara"&gt;capybara&lt;/label&gt; <br>
&nbsp;&lt;/div&gt; <br>
&nbsp;&lt;div class="radio-container"&gt; <br>
&nbsp;&nbsp;&lt;input type="radio" class="radio-input" id="goat" name="animal" value="goat"&gt; <br>
&nbsp;&nbsp;&lt;label class="radio-label" for="goat"&gt;goat&lt;/label&gt; <br>
&nbsp;&lt;/div&gt; <br>
&lt;/div&gt;
</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">
&lt;div data-theme="light"&gt; <br>
&nbsp;&lt;div class="radio-container"&gt; <br>
&nbsp;&nbsp;&lt;input type="radio" class="radio-input" id="rabbit" name="small-animals" value="rabbit"&gt; <br>
&nbsp;&nbsp;&lt;label class="radio-label" for="rabbit"&gt;rabbit&lt;/label&gt; <br>
&nbsp;&lt;/div&gt; <br>
&nbsp;&lt;div class="radio-container"&gt; <br>
&nbsp;&nbsp;&lt;input type="radio" class="radio-input" id="mouse" name="small-animals" value="mouse"&gt; <br>
&nbsp;&nbsp;&lt;label class="radio-label" for="mouse"&gt;mouse&lt;/label&gt; <br>
&nbsp;&lt;/div&gt; <br>
&nbsp;&lt;div class="radio-container"&gt; <br>
&nbsp;&nbsp;&lt;input type="radio" class="radio-input" id="chinchilla" name="small-animals" value="chinchilla"&gt; <br>
&nbsp;&nbsp;&lt;label class="radio-label" for="chinchilla"&gt;chinchilla&lt;/label&gt; <br>
&nbsp;&lt;/div&gt; <br>
&lt;/div&gt;
</code>
</div>
</section>
<ul data-theme="light">
<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>Primary light destructive</button></li>
</ul>
</main>
</body>
</html>

71
plugins-styles/src/lib/components/button.css
View file

@ -1,5 +1,5 @@
button {
border: 0;
border: 1px solid transparent;
font-weight: 500;
font-size: 12px;
border-radius: 8px;
@ -10,18 +10,22 @@ button {
&:hover:not(:disabled) {
cursor: pointer;
}
&:focus-visible {
outline: none;
}
}
[data-theme="dark"] {
[data-appearance="primary"]:is(button) {
background-color: var(--da-primary);
&:hover {
&:hover:not(:disabled) {
background-color: var(--da-tertiary);
}
&:focus {
border: 2px solid var(--da-primary);
&:focus, &:focus-visible {
border:1px solid var(--da-tertiary);
}
&:disabled {
@ -33,9 +37,13 @@ button {
&[data-variant="destructive"] {
background-color: var(--error-500);
&:focus {
&:hover:not(:disabled) {
background-color: var(--error-500);
}
&:focus, &:focus-visible {
background-color: var(--app-red);
border: 2px solid var(--error-950);
border: 1px solid var(--error-950);
}
&:disabled {
@ -48,19 +56,70 @@ button {
[data-appearance="secondary"]:is(button) {
background-color: var(--db-tertiary);
color: var(--df-secondary);
&:hover:not(:disabled) {
background-color: var(--db-quaternary);
color: var(--da-primary);
}
&:focus, &:focus-visible {
border: 1px solid var(--da-primary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--db-quaternary);
}
}
}
[data-theme="light"] {
[data-appearance="primary"]:is(button) {
background-color: var(--la-primary);
color: var(--lb-primary);
&:disabled {
background-color: transparent;
border: 1px solid var(--lb-quaternary);
color: var(--lf-secondary);
}
&[data-variant="destructive"] {
background-color: var(--error-500);
&:disabled {
background-color: transparent;
border: 1px solid var(--error-200);
color: var(--lf-secondary);
}
}
&:hover:not(:disabled) {
background-color: var(--la-tertiary);
}
&:focus, &:focus-visible {
border: 1px solid var(--la-tertiary);
}
}
[data-appearance="secondary"]:is(button) {
background-color: var(--lb-tertiary);
color: var(--lf-secondary);
&:hover:not(:disabled) {
background-color: var(--lb-quaternary);
color: var(--la-primary);
}
&:focus, &:focus-visible {
background-color: var(--lb-tertiary);
border: 1px solid var(--la-primary);
}
&:disabled {
border: 1px solid var(--lb-quaternary);
}
}
}

122
plugins-styles/src/lib/components/checkbox.css Normal file
View file

@ -0,0 +1,122 @@
.checkbox-container {
align-items: center;
color: var(--df-secondary);
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
& .checkbox-input[type="checkbox"] {
appearance: none;
block-size: var(--spacing-16);
border-radius: var(--spacing-4);
box-sizing: border-box;
cursor: pointer;
inline-size: var(--spacing-16);
margin: 0;
position: relative;
transition: 120ms all ease-in-out;
&::after {
block-size: 6px;
border-style: solid;
border-width: 0;
content: "";
display: flex;
inline-size: 3px;
margin-block-start: 2px;
margin-inline-start: 5px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
&:focus-visible, &:focus-within {
outline: none;
}
}
& label {
cursor: pointer;
margin-inline-start: var(--spacing-8);
}
}
.checkbox-hidden {
block-size: 1px;
border: 0;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
inline-size: 1px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
[data-theme="dark"] {
.checkbox-input[type="checkbox"] {
background-color: var(--db-quaternary);
border: 1px solid var(--df-secondary);
&::after {
border-color: var(--db-primary);
}
&:hover {
background-color: var(--db-quaternary);
border: 1px solid var(--da-primary-muted);
}
&:focus {
background-color: var(--db-quaternary);
border: 1px solid var(--da-primary);
}
&:checked {
background-color: var(--da-primary);
border: 1px solid var(--da-primary);
}
&:checked::after{
border-color: var(--db-primary);
border-width: 0 2px 2px 0;
}
}
}
[data-theme="light"] {
.checkbox-input[type="checkbox"] {
background-color: var(--lb-quaternary);
border: 1px solid var(--la-primary);
&::after {
border-color: var(--db-primary);
}
&:hover {
background-color: var(--lf-secondary);
border: 1px solid var(--lf-secondary);
}
&:focus {
border: 1px solid var(--lf-secondary);
}
&:checked {
background-color: var(--la-primary);
border: 1px solid var(--la-primary);
}
&:checked::after{
border-color: var(--lb-primary);
border-width: 0 2px 2px 0;
}
}
}

39
plugins-styles/src/lib/components/icon.css Normal file
View file

@ -0,0 +1,39 @@
.icon {
display: flex;
align-items: center;
block-size: var(--spacing-16);
cursor: default;
font-family: var(--body-font);
font-size: var(--font-size-medium);
inline-size: var(--spacing-16);
justify-content: center;
user-select: none;
}
.icon-arrow-bottom {
background-image: url('../icons/arrow-bottom.svg');
}
.icon-arrow-left {
background-image: url('../icons/arrow-left.svg');
}
.icon-arrow-right {
background-image: url('../icons/arrow-right.svg');
}
.icon-arrow-top {
background-image: url('../icons/arrow-top.svg');
}
.icon-actions-close {
background-image: url('../icons/actions-close.svg');
}
.icon-actions-close-l {
background-image: url('../icons/actions-close-l.svg');
}
.icon-actions-delete {
background-image: url('../icons/actions-delete.svg');
}

91
plugins-styles/src/lib/components/radio-button.css Normal file
View file

@ -0,0 +1,91 @@
.radio-container {
align-items: center;
display: flex;
&:not(:last-child) {
margin-block-end: var(--spacing-8);
}
.radio-input {
align-items: center;
appearance: none;
block-size: var(--spacing-16);
border-radius: 50%;
display: grid;
inline-size: var(--spacing-16);
justify-content: center;
margin: 0;
margin-block-start: 2px;
transform: translateY(-0.075em);
}
.radio-input::before {
border-radius: 50%;
content: "";
transform: scale(0);
transition: 120ms transform ease-in-out;
}
.radio-input:checked::before {
transform: scale(1);
}
.radio-input:focus-within {
outline: none;
}
.radio-label {
color: var(--df-secondary);
cursor: pointer;
margin-inline-start: var(--spacing-8);
}
}
[data-theme="dark"] {
.radio-input {
background-color: var(--db-quaternary);
border: 1px solid var(--df-secondary);
}
.radio-input::before {
border: 5px solid var(--db-primary);
}
.radio-input:checked {
background-color: var(--da-primary);
border: 1px solid var(--da-primary);
}
.radio-input:hover {
border: 1px solid var(--da-primary-muted);
}
.radio-input:focus {
border: 1px solid var(--da-primary);
}
}
[data-theme="light"] {
.radio-input {
background-color: var(--lb-quaternary);
border: 1px solid var(--lf-secondary);
}
.radio-input::before {
border: 5px solid var(--lb-primary);
}
.radio-input:checked {
background-color: var(--la-primary);
border: 1px solid var(--la-primary);
}
.radio-input:hover {
border: 1px solid var(--la-primary-muted);
}
.radio-input:focus {
border: 1px solid var(--la-primary);
}
}

0
plugins-styles/src/lib/components/tabs.css Normal file
View file

64
plugins-styles/src/lib/core/fonts.css
View file

@ -3,7 +3,10 @@
:root {
/* Font weight */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 500;
--font-line-height-s: 1.2;
--font-line-height-m: 1.4;
--font-line-height-l: 1.2;
}
html, body {
@ -13,43 +16,76 @@ html, body {
}
.display {
font-weight: 400;
font-weight: var(--font-weight-regular);
font-size: 36px;
line-height: 1.2;
}
.title-small {
font-weight: 400;
.title-s {
font-weight: var(--font-weight-regular);
font-size: 14px;
line-height: 1.2;
}
.title-medium {
font-weight: 400;
.title-m {
font-weight: var(--font-weight-regular);
font-size: 20px;
line-height: 1.2;
}
.title-large {
font-weight: 400;
.title-l {
font-weight: var(--font-weight-regular);
font-size: 24px;
line-height: 1.1;
}
.body-small {
font-weight: 400;
.headline-s {
font-weight: var(--font-weight-bold);
font-size: 12px;
line-height: 1.2;
text-transform: uppercase;
}
.headline-m {
font-weight: var(--font-weight-regular);
font-size: 16px;
line-height: 1.4;
text-transform: uppercase;
}
.headline-l {
font-weight: var(--font-weight-regular);
font-size: 18px;
line-height: 1.2;
text-transform: uppercase;
}
.body-s {
font-weight: var(--font-weight-regular);
font-size: 12px;
line-height: 1.4;
}
.body-medium {
font-weight: 400;
.body-m {
font-weight: var(--font-weight-regular);
font-size: 14px;
line-height: 1.5;
}
.body-large {
font-weight: 400;
.body-l {
font-weight: var(--font-weight-regular);
font-size: 16px;
line-height: 1.5;
}
.caption {
font-weight: var(--font-weight-regular);
font-size: 12px;
line-height: 1.2;
}
.code-font {
font-weight: var(--font-weight-regular);
font-size: 12px;
line-height: 1.5;
}

12
plugins-styles/src/lib/core/spacing.css Normal file
View file

@ -0,0 +1,12 @@
:root {
--spacing-4: 0.25rem;
--spacing-8: calc(var(--spacing-4) * 2);
--spacing-12: calc(var(--spacing-4) * 3);
--spacing-16: calc(var(--spacing-4) * 4);
--spacing-20: calc(var(--spacing-4) * 5);
--spacing-24: calc(var(--spacing-4) * 6);
--spacing-28: calc(var(--spacing-4) * 7);
--spacing-32: calc(var(--spacing-4) * 8);
--spacing-36: calc(var(--spacing-4) * 9);
--spacing-40: calc(var(--spacing-4) * 10);
}

1
plugins-styles/src/lib/core/swatches.css
View file

@ -51,6 +51,7 @@
--warning-500: #fe4811;
--warning-950: #440806;
--error-50: #fff0f3;
--error-200: #ffcada;
--error-500: #ff3277;
--error-950: #500124;
--info-50: #f0f8ff;

1
plugins-styles/src/lib/icons/actions-close-l.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997" class="fills"/><g class="strokes"><path d="M11.997 3.997 8 8l-3.997 4.003m-.006-8L8 8l4.003 3.997" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 498 B

1
plugins-styles/src/lib/icons/actions-close.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M10.397 5.601 8 8.002l-2.397 2.401m-.006-4.8L8 8.002l2.403 2.399" class="fills"/><g class="strokes"><path d="M10.397 5.601 8 8.002l-2.397 2.401m-.006-4.8L8 8.002l2.403 2.399" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 518 B

1
plugins-styles/src/lib/icons/actions-delete.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M2 4h12m-1.333 0v9.333c0 .737-.597 1.334-1.334 1.334H4.667a1.334 1.334 0 0 1-1.334-1.334V4m2 0V2.667c0-.737.597-1.334 1.334-1.334h2.666c.737 0 1.334.597 1.334 1.334V4m-4 3.333v4m2.666-4v4" class="fills"/><g class="strokes"><path d="M2 4h12m-1.333 0v9.333c0 .737-.597 1.334-1.334 1.334H4.667a1.334 1.334 0 0 1-1.334-1.334V4m2 0V2.667c0-.737.597-1.334 1.334-1.334h2.666c.737 0 1.334.597 1.334 1.334V4m-4 3.333v4m2.666-4v4" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 764 B

1
plugins-styles/src/lib/icons/arrow-bottom.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="m4 6 4 4 4-4" class="fills"/><g class="strokes"><path d="m4 6 4 4 4-4" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 414 B

1
plugins-styles/src/lib/icons/arrow-left.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="M10 12 6 8l4-4" class="fills"/><g class="strokes"><path d="M10 12 6 8l4-4" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 418 B

1
plugins-styles/src/lib/icons/arrow-right.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="m6 12 4-4-4-4" class="fills"/><g class="strokes"><path d="m6 12 4-4-4-4" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 416 B

1
plugins-styles/src/lib/icons/arrow-top.svg Normal file
View file

@ -0,0 +1 @@
<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" fill="none"><g class="fills"><rect rx="0" ry="0" width="16" height="16" class="frame-background"/></g><g class="frame-children"><path d="m4 10 4-4 4 4" class="fills"/><g class="strokes"><path d="m4 10 4-4 4 4" style="fill: none; stroke-width: 1; stroke: rgb(143, 157, 163); stroke-opacity: 1; stroke-linecap: round;" class="stroke-shape"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 416 B

13
plugins-styles/src/lib/styles.css
View file

@ -1,6 +1,11 @@
/*core*/
@import url("core/swatches.css");
@import url("core/fonts.css");
@import url("core/spacing.css");
/*components*/
@import url("components/button.css");
/*core*/
@import url("core/fonts.css");
@import url("core/swatches.css");
@import url("components/checkbox.css");
@import url("components/radio-button.css");
@import url("components/tabs.css");
@import url("components/icon.css");