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): update typography demo and generated CSS

Browse source
This commit is contained in:
Roberto Redradix 2023-08-29 16:56:39 +02:00 • committed by Roberto RedRadix
parent ee2531f6c6
commit c5288352ab
3 changed files with 86 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,23 +6,43 @@
</head>
<body>
<h1>Typography</h1>
<h2>📱 Type scale for < 768px devices</h2>
<div>
<span class="easyfest__design_system___landing_page--___title_large">Title Large</span>
<span class="EasyFest:_Design_System_&_Landing_page--📱_Title_Large">Title Large</span>
</div>
<div>
<span class="easyfest__design_system___landing_page--___title_medium">Title Medium</span>
<span class="EasyFest:_Design_System_&_Landing_page--📱_Title_Medium">Title Medium</span>
</div>
<div>
<span class="easyfest__design_system___landing_page--___title_small">Title Small</span>
<span class="EasyFest:_Design_System_&_Landing_page--📱_Title_Small">Title Small</span>
</div>
<div>
<span class="easyfest__design_system___landing_page--body_large">Body Large</span>
<span class="EasyFest:_Design_System_&_Landing_page--Body_Large">Body Large</span>
</div>
<div>
<span class="easyfest__design_system___landing_page--body_medium">Body Medium</span>
<span class="EasyFest:_Design_System_&_Landing_page--Body_Medium">Body Medium</span>
</div>
<div>
<span class="easyfest__design_system___landing_page--body_small">Body Small</span>
<span class="EasyFest:_Design_System_&_Landing_page--Body_Small">Body Small</span>
</div>
<h2>🖥 Type scale for > 768px devices</h2>
<div>
<span class="EasyFest:_Design_System_&_Landing_page--🖥_Title_Large">Title Large</span>
</div>
<div>
<span class="EasyFest:_Design_System_&_Landing_page--🖥_Title_Medium">Title Medium</span>
</div>
<div>
<span class="EasyFest:_Design_System_&_Landing_page--🖥_Title_Small">Title Small</span>
</div>
<div>
<span class="EasyFest:_Design_System_&_Landing_page--Body_Large">Body Large</span>
</div>
<div>
<span class="EasyFest:_Design_System_&_Landing_page--Body_Medium">Body Medium</span>
</div>
<div>
<span class="EasyFest:_Design_System_&_Landing_page--Body_Small">Body Small</span>
</div>
</body>
</html>

78
packages/demo/src/styles/typographies.css
View file

@ -1,4 +1,4 @@
.easyfest__design_system___landing_page--___title_medium {
.EasyFest\:_Design_System_\&_Landing_page--🖥_Title_Medium {
line-height: 1.2000000000000002;
font-style: normal;
text-transform: none;
@ -8,27 +8,7 @@
font-family: "Work Sans";
}
.easyfest__design_system___landing_page--___title_large {
line-height: 1;
font-style: normal;
text-transform: none;
font-weight: 700;
font-size: 85px;
letter-spacing: 0px;
font-family: "Work Sans";
}
.easyfest__design_system___landing_page--body_large {
line-height: 1.2;
font-style: normal;
text-transform: none;
font-weight: 400;
font-size: 22px;
letter-spacing: 0px;
font-family: "Work Sans";
}
.easyfest__design_system___landing_page--___title_small {
.EasyFest\:_Design_System_\&_Landing_page--📱_Title_Medium {
line-height: 1.2000000000000002;
font-style: normal;
text-transform: none;
@ -38,7 +18,47 @@
font-family: "Work Sans";
}
.easyfest__design_system___landing_page--body_small {
.EasyFest\:_Design_System_\&_Landing_page--🖥_Title_Large {
line-height: 1.1;
font-style: normal;
text-transform: none;
font-weight: 700;
font-size: 85px;
letter-spacing: 0px;
font-family: "Work Sans";
}
.EasyFest\:_Design_System_\&_Landing_page--Body_Large {
line-height: 1.2;
font-style: normal;
text-transform: none;
font-weight: 400;
font-size: 22px;
letter-spacing: 0px;
font-family: "Work Sans";
}
.EasyFest\:_Design_System_\&_Landing_page--📱_Title_Small {
line-height: 1.2000000000000002;
font-style: normal;
text-transform: none;
font-weight: 700;
font-size: 28px;
letter-spacing: 0px;
font-family: "Work Sans";
}
.EasyFest\:_Design_System_\&_Landing_page--🖥_Title_Small {
line-height: 1.2000000000000002;
font-style: normal;
text-transform: none;
font-weight: 700;
font-size: 35px;
letter-spacing: 0px;
font-family: "Work Sans";
}
.EasyFest\:_Design_System_\&_Landing_page--Body_Small {
line-height: 1.2;
font-style: normal;
text-transform: none;
@ -48,7 +68,17 @@
font-family: "Work Sans";
}
.easyfest__design_system___landing_page--body_medium {
.EasyFest\:_Design_System_\&_Landing_page--📱_Title_Large {
line-height: 1;
font-style: normal;
text-transform: none;
font-weight: 700;
font-size: 44px;
letter-spacing: 0px;
font-family: "Work Sans";
}
.EasyFest\:_Design_System_\&_Landing_page--Body_Medium {
line-height: 1.2;
font-style: normal;
text-transform: none;

12
packages/demo/src/styles/ui.css
View file

@ -1,4 +1,4 @@
.variables--h5 {
.Variables--H5 {
font-style: normal;
font-size: 18px;
font-weight: 800;
@ -6,7 +6,7 @@
font-family: "Source Code Pro";
}
.variables--h4 {
.Variables--H4 {
font-style: normal;
font-size: 24px;
font-weight: 800;
@ -14,7 +14,7 @@
font-family: "Source Code Pro";
}
.variables--h1 {
.Variables--H1 {
font-style: normal;
font-size: 72px;
font-weight: 900;
@ -22,7 +22,7 @@
font-family: "Source Code Pro";
}
.variables--h5 {
.Variables--H5 {
font-style: normal;
font-size: 48px;
font-weight: 800;
@ -30,7 +30,7 @@
font-family: "Source Code Pro";
}
.variables--body {
.Variables--Body {
font-style: normal;
font-size: 14px;
font-weight: 400;
@ -38,7 +38,7 @@
font-family: "Source Code Pro";
}
.variables--h4 {
.Variables--H4 {
font-style: normal;
font-size: 36px;
font-weight: 800;