mirror of
https://github.com/penpot/penpot-export.git
synced 2025-01-21 14:12:29 -05:00
96 lines
5.8 KiB
HTML
96 lines
5.8 KiB
HTML
<html>
|
|
<head>
|
|
<title>penpot-export CSS demo</title>
|
|
<link href='https://fonts.googleapis.com/css?family=Work%20Sans:400,700' rel='stylesheet'>
|
|
<link rel="stylesheet" href="./styles/typographies.css">
|
|
<link rel="stylesheet" href="./styles/colors.css">
|
|
<style>
|
|
.color-patch {
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
margin-right: .3em;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
border-radius: 50%;
|
|
background-color: inherit;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Typography</h1>
|
|
<h2>📱 Type scale for < 768px devices</h2>
|
|
<div>
|
|
<span class="penpot-export:_demo--📱_Title_Large">Title Large</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--📱_Title_Medium">Title Medium</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--📱_Title_Small">Title Small</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--Body_Large">Body Large</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--Body_Medium">Body Medium</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--Body_Small">Body Small</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--Body_Small_Uppercase">Body Small Uppercase</span>
|
|
</div>
|
|
<h2>🖥 Type scale for > 768px devices</h2>
|
|
<div>
|
|
<span class="penpot-export:_demo--🖥_Title_Large">Title Large</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--🖥_Title_Medium">Title Medium</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--🖥_Title_Small">Title Small</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--Body_Large">Body Large</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--Body_Medium">Body Medium</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--Body_Small">Body Small</span>
|
|
</div>
|
|
<div>
|
|
<span class="penpot-export:_demo--Body_Small_Uppercase">Body Small Uppercase</span>
|
|
</div>
|
|
<h1>Colors</h1>
|
|
<ul>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_100);"></output><label>Neutral 100</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_200);"></output><label>Neutral 200</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_300);"></output><label>Neutral 300</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_400);"></output><label>Neutral 400</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_500);"></output><label>Neutral 500</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_600);"></output><label>Neutral 600</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_700);"></output><label>Neutral 700</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_800);"></output><label>Neutral 800</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Neutral_900);"></output><label>Neutral 900</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_100);"></output><label>Primary 100</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_200);"></output><label>Primary 200</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_300);"></output><label>Primary 300</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_400);"></output><label>Primary 400</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_500);"></output><label>Primary 500</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_600);"></output><label>Primary 600</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_700);"></output><label>Primary 700</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_800);"></output><label>Primary 800</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Primary_900);"></output><label>Primary 900</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_100);"></output><label>Secondary 100</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_200);"></output><label>Secondary 200</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_300);"></output><label>Secondary 300</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_400);"></output><label>Secondary 400</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_500);"></output><label>Secondary 500</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_600);"></output><label>Secondary 600</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_700);"></output><label>Secondary 700</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_800);"></output><label>Secondary 800</label></li>
|
|
<li><output class="color-patch" style="background-color: var(--Secondary_900);"></output><label>Secondary 900</label></li>
|
|
</ul>
|
|
</body>
|
|
</html>
|