From c0353750841251dfd61822321fc210f06e778127 Mon Sep 17 00:00:00 2001 From: Roberto Redradix Date: Thu, 7 Sep 2023 15:02:01 +0200 Subject: [PATCH] chore(demo): update assets and HTML --- packages/demo/src/index.html | 60 +++++++++------- packages/demo/src/styles/colors.json | 81 ++++++++++++++------- packages/demo/src/styles/typographies.css | 36 ++++++---- packages/demo/src/styles/typographies.json | 82 ++++++++++++++-------- packages/demo/src/styles/ui.json | 18 +++-- 5 files changed, 174 insertions(+), 103 deletions(-) diff --git a/packages/demo/src/index.html b/packages/demo/src/index.html index 17992aa..8dd6730 100644 --- a/packages/demo/src/index.html +++ b/packages/demo/src/index.html @@ -37,6 +37,9 @@
Body Small
+
+ Body Small Uppercase +

🖥 Type scale for > 768px devices

Title Large @@ -56,35 +59,38 @@
Body Small
+
+ Body Small Uppercase +

Colors

diff --git a/packages/demo/src/styles/colors.json b/packages/demo/src/styles/colors.json index a7181b4..0b804ae 100644 --- a/packages/demo/src/styles/colors.json +++ b/packages/demo/src/styles/colors.json @@ -1,110 +1,137 @@ [ { - "name": "Primary_900", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 900", "value": "rgba(0, 110, 84, 1)" }, { - "name": "Secondary_500", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 500", "value": "rgba(191, 152, 254, 1)" }, { - "name": "Secondary_400", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 400", "value": "rgba(207, 179, 255, 1)" }, { - "name": "Neutral_100", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 100", "value": "rgba(247, 248, 249, 1)" }, { - "name": "Neutral_500", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 500", "value": "rgba(133, 144, 162, 1)" }, { - "name": "Primary_200", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 200", "value": "rgba(202, 255, 233, 1)" }, { - "name": "Secondary_800", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 800", "value": "rgba(105, 31, 209, 1)" }, { - "name": "Primary_100", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 100", "value": "rgba(233, 255, 247, 1)" }, { - "name": "Secondary_200", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 200", "value": "rgba(240, 232, 255, 1)" }, { - "name": "Neutral_200", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 200", "value": "rgba(241, 242, 244, 1)" }, { - "name": "Neutral_300", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 300", "value": "rgba(220, 223, 228, 1)" }, { - "name": "Neutral_700", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 700", "value": "rgba(98, 111, 134, 1)" }, { - "name": "Neutral_400", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 400", "value": "rgba(179, 185, 196, 1)" }, { - "name": "Neutral_600", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 600", "value": "rgba(117, 129, 149, 1)" }, { - "name": "Secondary_600", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 600", "value": "rgba(148, 83, 249, 1)" }, { - "name": "Primary_300", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 300", "value": "rgba(154, 255, 217, 1)" }, { - "name": "Primary_400", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 400", "value": "rgba(90, 251, 199, 1)" }, { - "name": "Secondary_300", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 300", "value": "rgba(228, 212, 255, 1)" }, { - "name": "Primary_800", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 800", "value": "rgba(0, 139, 105, 1)" }, { - "name": "Neutral_900", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 900", "value": "rgba(23, 43, 77, 1)" }, { - "name": "Neutral_800", + "scope": "EasyFest: Design System & Landing page", + "name": "Neutral 800", "value": "rgba(68, 84, 111, 1)" }, { - "name": "Secondary_900", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 900", "value": "rgba(91, 31, 170, 1)" }, { - "name": "Primary_700", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 700", "value": "rgba(0, 174, 127, 1)" }, { - "name": "Secondary_700", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 700", "value": "rgba(125, 48, 237, 1)" }, { - "name": "Primary_500", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 500", "value": "rgba(49, 239, 184, 1)" }, { - "name": "Secondary_100", + "scope": "EasyFest: Design System & Landing page", + "name": "Secondary 100", "value": "rgba(249, 245, 255, 1)" }, { - "name": "Primary_600", + "scope": "EasyFest: Design System & Landing page", + "name": "Primary 600", "value": "rgba(0, 213, 154, 1)" } ] \ No newline at end of file diff --git a/packages/demo/src/styles/typographies.css b/packages/demo/src/styles/typographies.css index c0376ad..77a6c1a 100644 --- a/packages/demo/src/styles/typographies.css +++ b/packages/demo/src/styles/typographies.css @@ -13,27 +13,37 @@ font-style: normal; text-transform: none; font-weight: 700; - font-size: 35px; + font-size: 37px; letter-spacing: 0px; font-family: "Work Sans"; } +.EasyFest\:_Design_System_\&_Landing_page--Body_Small_Uppercase { + line-height: 1.4; + font-style: normal; + text-transform: uppercase; + font-weight: 400; + font-size: 15px; + letter-spacing: 1px; + font-family: "Work Sans"; +} + .EasyFest\:_Design_System_\&_Landing_page--🖥_Title_Large { - line-height: 1.1; + line-height: 1.2; font-style: normal; text-transform: none; font-weight: 700; - font-size: 85px; + font-size: 77px; letter-spacing: 0px; font-family: "Work Sans"; } .EasyFest\:_Design_System_\&_Landing_page--Body_Large { - line-height: 1.2; + line-height: 1.4; font-style: normal; text-transform: none; font-weight: 400; - font-size: 22px; + font-size: 21px; letter-spacing: 0px; font-family: "Work Sans"; } @@ -43,43 +53,43 @@ font-style: normal; text-transform: none; font-weight: 700; - font-size: 28px; + font-size: 31px; letter-spacing: 0px; font-family: "Work Sans"; } .EasyFest\:_Design_System_\&_Landing_page--🖥_Title_Small { - line-height: 1.2000000000000002; + line-height: 1.2; font-style: normal; text-transform: none; font-weight: 700; - font-size: 35px; + font-size: 31px; letter-spacing: 0px; font-family: "Work Sans"; } .EasyFest\:_Design_System_\&_Landing_page--Body_Small { - line-height: 1.2; + line-height: 1.4; font-style: normal; text-transform: none; font-weight: 400; - font-size: 14px; + font-size: 15px; letter-spacing: 0px; font-family: "Work Sans"; } .EasyFest\:_Design_System_\&_Landing_page--📱_Title_Large { - line-height: 1; + line-height: 1.2; font-style: normal; text-transform: none; font-weight: 700; - font-size: 44px; + font-size: 45px; letter-spacing: 0px; font-family: "Work Sans"; } .EasyFest\:_Design_System_\&_Landing_page--Body_Medium { - line-height: 1.2; + line-height: 1.4; font-style: normal; text-transform: none; font-weight: 400; diff --git a/packages/demo/src/styles/typographies.json b/packages/demo/src/styles/typographies.json index d8c3f04..2be926e 100644 --- a/packages/demo/src/styles/typographies.json +++ b/packages/demo/src/styles/typographies.json @@ -1,6 +1,7 @@ [ { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--🖥_Title_Medium", + "scope": "EasyFest: Design System & Landing page", + "name": "🖥 Title Medium", "cssProps": { "lineHeight": "1.2000000000000002", "fontStyle": "normal", @@ -12,93 +13,114 @@ } }, { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--📱_Title_Medium", + "scope": "EasyFest: Design System & Landing page", + "name": "📱 Title Medium", "cssProps": { "lineHeight": "1.2000000000000002", "fontStyle": "normal", "textTransform": "none", "fontWeight": "700", - "fontSize": "35px", + "fontSize": "37px", "letterSpacing": "0px", "fontFamily": "\"Work Sans\"" } }, { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--🖥_Title_Large", + "scope": "EasyFest: Design System & Landing page", + "name": "Body Small Uppercase", "cssProps": { - "lineHeight": "1.1", + "lineHeight": "1.4", + "fontStyle": "normal", + "textTransform": "uppercase", + "fontWeight": "400", + "fontSize": "15px", + "letterSpacing": "1px", + "fontFamily": "\"Work Sans\"" + } + }, + { + "scope": "EasyFest: Design System & Landing page", + "name": "🖥 Title Large", + "cssProps": { + "lineHeight": "1.2", "fontStyle": "normal", "textTransform": "none", "fontWeight": "700", - "fontSize": "85px", + "fontSize": "77px", "letterSpacing": "0px", "fontFamily": "\"Work Sans\"" } }, { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--Body_Large", + "scope": "EasyFest: Design System & Landing page", + "name": "Body Large", "cssProps": { - "lineHeight": "1.2", + "lineHeight": "1.4", "fontStyle": "normal", "textTransform": "none", "fontWeight": "400", - "fontSize": "22px", + "fontSize": "21px", "letterSpacing": "0px", "fontFamily": "\"Work Sans\"" } }, { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--📱_Title_Small", + "scope": "EasyFest: Design System & Landing page", + "name": "📱 Title Small", "cssProps": { "lineHeight": "1.2000000000000002", "fontStyle": "normal", "textTransform": "none", "fontWeight": "700", - "fontSize": "28px", + "fontSize": "31px", "letterSpacing": "0px", "fontFamily": "\"Work Sans\"" } }, { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--🖥_Title_Small", - "cssProps": { - "lineHeight": "1.2000000000000002", - "fontStyle": "normal", - "textTransform": "none", - "fontWeight": "700", - "fontSize": "35px", - "letterSpacing": "0px", - "fontFamily": "\"Work Sans\"" - } - }, - { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--Body_Small", + "scope": "EasyFest: Design System & Landing page", + "name": "🖥 Title Small", "cssProps": { "lineHeight": "1.2", "fontStyle": "normal", "textTransform": "none", + "fontWeight": "700", + "fontSize": "31px", + "letterSpacing": "0px", + "fontFamily": "\"Work Sans\"" + } + }, + { + "scope": "EasyFest: Design System & Landing page", + "name": "Body Small", + "cssProps": { + "lineHeight": "1.4", + "fontStyle": "normal", + "textTransform": "none", "fontWeight": "400", - "fontSize": "14px", + "fontSize": "15px", "letterSpacing": "0px", "fontFamily": "\"Work Sans\"" } }, { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--📱_Title_Large", + "scope": "EasyFest: Design System & Landing page", + "name": "📱 Title Large", "cssProps": { - "lineHeight": "1", + "lineHeight": "1.2", "fontStyle": "normal", "textTransform": "none", "fontWeight": "700", - "fontSize": "44px", + "fontSize": "45px", "letterSpacing": "0px", "fontFamily": "\"Work Sans\"" } }, { - "selector": ".EasyFest\\:_Design_System_\\&_Landing_page--Body_Medium", + "scope": "EasyFest: Design System & Landing page", + "name": "Body Medium", "cssProps": { - "lineHeight": "1.2", + "lineHeight": "1.4", "fontStyle": "normal", "textTransform": "none", "fontWeight": "400", diff --git a/packages/demo/src/styles/ui.json b/packages/demo/src/styles/ui.json index a5536de..1727cc1 100644 --- a/packages/demo/src/styles/ui.json +++ b/packages/demo/src/styles/ui.json @@ -1,6 +1,7 @@ [ { - "selector": ".Variables--H5", + "scope": "Variables", + "name": "H5", "cssProps": { "fontStyle": "normal", "fontSize": "18px", @@ -10,7 +11,8 @@ } }, { - "selector": ".Variables--H4", + "scope": "Variables", + "name": "H4", "cssProps": { "fontStyle": "normal", "fontSize": "24px", @@ -20,7 +22,8 @@ } }, { - "selector": ".Variables--H1", + "scope": "Variables", + "name": "H1", "cssProps": { "fontStyle": "normal", "fontSize": "72px", @@ -30,7 +33,8 @@ } }, { - "selector": ".Variables--H5", + "scope": "Variables", + "name": "H5", "cssProps": { "fontStyle": "normal", "fontSize": "48px", @@ -40,7 +44,8 @@ } }, { - "selector": ".Variables--Body", + "scope": "Variables", + "name": "Body", "cssProps": { "fontStyle": "normal", "fontSize": "14px", @@ -50,7 +55,8 @@ } }, { - "selector": ".Variables--H4", + "scope": "Variables", + "name": "H4", "cssProps": { "fontStyle": "normal", "fontSize": "36px",