Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-04-11 22:41:37 -05:00
Code Issues Activity

feat: fonts plugins styles

Browse source
This commit is contained in:
Marina López 2024-02-07 14:35:29 +01:00
parent 9e82646c91
commit f68faaaa2c
5 changed files with 348 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,10 @@
@import url("styles.css");
html, body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
@ -5,13 +12,14 @@ ul {
}
.color-section {
background: var(--app-black);
color: var(--app-white);
display: flex;
flex-wrap: wrap;
gap: 80px;
list-style: none;
padding-left: 0;
padding: 10px 30px;
width: 100%;
gap: 20px;
justify-content: space-between;
}
.color {
@ -23,6 +31,8 @@ ul {
.color-preview {
block-size: 35px;
border: 1px solid #8F9DA3;
border-radius: 4px;
display: block;
inline-size: 35px;
margin-inline-start: 10px;

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

@ -1,113 +1,256 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/styles.css">
<link rel="stylesheet" href="examples.css">
</head>
<body>
<head>
<link rel="stylesheet" href="lib/styles.css">
<link rel="stylesheet" href="examples.css">
</head>
<body>
<h1 class="display">Plugins styles</h1>
<main>
<h1>Examples</h1>
<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>
<h3>Colors</h3>
<ul class="color-section">
<li>
<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>
</li>
<li>
<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>
<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>
<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>
<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>
</li>
</ul>
<h3 class="title-large">Fonts</h3>
<h3>Fonts</h3>
<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>
<h3>Buttons</h3>
<div data-theme="dark">
<button data-appearance="primary">Button</button>
<button data-appearance="primary" data-variant="destructive">Button</button>
</div>
<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>
<div data-theme="light">
<button data-appearance="primary">Button</button>
<button data-appearance="primary" data-variant="destructive">Button</button>
</div>
<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>
</body>
<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>

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

@ -1,16 +1,48 @@
button {
border: 0;
font-weight: 500;
font-size: 12px;
border-radius: 8px;
line-height: 1.2;
padding: 8.5px 24px 8.5px 24px;
text-transform: uppercase;
&:hover:not(:disabled) {
cursor: pointer;
}
}
[data-theme="dark"] {
[data-appearance="primary"]:is(button) {
background-color: var(--da-primary);
&:hover {
background-color: var(--da-tertiary);
}
&:focus {
border: 2px solid var(--da-primary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--db-quaternary);
color: var(--df-secondary);
}
&[data-variant="destructive"] {
background-color: var(--error-500);
&:focus {
background-color: var(--app-red);
border: 2px solid var(--error-950);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--error-950);
color: var(--df-secondary);
}
}
}

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

@ -0,0 +1,55 @@
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400+500&display=swap');
:root {
/* Font weight */
--font-weight-regular: 400;
--font-weight-medium: 500;
}
html, body {
font-family: 'Work Sans', sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
.display {
font-weight: 400;
font-size: 36px;
line-height: 1.2;
}
.title-small {
font-weight: 400;
font-size: 14px;
line-height: 1.2;
}
.title-medium {
font-weight: 400;
font-size: 20px;
line-height: 1.2;
}
.title-large {
font-weight: 400;
font-size: 24px;
line-height: 1.1;
}
.body-small {
font-weight: 400;
font-size: 12px;
line-height: 1.4;
}
.body-medium {
font-weight: 400;
font-size: 14px;
line-height: 1.5;
}
.body-large {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
}

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

@ -2,4 +2,5 @@
@import url("components/button.css");
/*core*/
@import url("core/fonts.css");
@import url("core/swatches.css");