diff --git a/packages/demo/src/index.html b/packages/demo/src/index.html index 0c9aa23..9d799d5 100644 --- a/packages/demo/src/index.html +++ b/packages/demo/src/index.html @@ -6,23 +6,43 @@

Typography

+

📱 Type scale for < 768px devices

- Title Large + Title Large
- Title Medium + Title Medium
- Title Small + Title Small
- Body Large + Body Large
- Body Medium + Body Medium
- Body Small + Body Small +
+

🖥 Type scale for > 768px devices

+
+ Title Large +
+
+ Title Medium +
+
+ Title Small +
+
+ Body Large +
+
+ Body Medium +
+
+ Body Small
diff --git a/packages/demo/src/styles/typographies.css b/packages/demo/src/styles/typographies.css index 610b9a0..c0376ad 100644 --- a/packages/demo/src/styles/typographies.css +++ b/packages/demo/src/styles/typographies.css @@ -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; diff --git a/packages/demo/src/styles/ui.css b/packages/demo/src/styles/ui.css index 6c4a1df..81ebab9 100644 --- a/packages/demo/src/styles/ui.css +++ b/packages/demo/src/styles/ui.css @@ -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;