Penpot/penpot-export
0
Fork 0
mirror of https://github.com/penpot/penpot-export.git synced 2025-02-12 18:18:01 -05:00
Code Issues Activity

chore(demo): demonstrate colors CSS working in a web document

Browse source
This commit is contained in:
Roberto Redradix 2023-08-29 18:09:46 +02:00 • committed by Roberto RedRadix
parent e2812c99ea
commit 3a61990e62
2 changed files with 71 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
packages/demo/src/index.html
View file

@ -3,6 +3,18 @@
<title>penpot-css-export 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>
@ -44,5 +56,35 @@
<div>
<span class="EasyFest:_Design_System_&_Landing_page--Body_Small">Body Small</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>

29
packages/demo/src/styles/colors.css Normal file
View file

@ -0,0 +1,29 @@
:root {
--primary_900: #006e54;
--secondary_500: #bf98fe;
--secondary_400: #cfb3ff;
--neutral_100: #f7f8f9;
--neutral_500: #8590a2;
--primary_200: #caffe9;
--secondary_800: #691fd1;
--primary_100: #e9fff7;
--secondary_200: #f0e8ff;
--neutral_200: #f1f2f4;
--neutral_300: #dcdfe4;
--neutral_700: #626f86;
--neutral_400: #b3b9c4;
--neutral_600: #758195;
--secondary_600: #9453f9;
--primary_300: #9affd9;
--primary_400: #5afbc7;
--secondary_300: #e4d4ff;
--primary_800: #008b69;
--neutral_900: #172b4d;
--neutral_800: #44546f;
--secondary_900: #5b1faa;
--primary_700: #00ae7f;
--secondary_700: #7d30ed;
--primary_500: #31efb8;
--secondary_100: #f9f5ff;
--primary_600: #00d59a;
}