feat(demo): provide a demo Penpot file

packages/demos/demo-css/index.html

@@ -20,47 +20,47 @@
         <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="penpot-export:_demo--📱_Title_Large">Title Large</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--📱_Title_Medium">Title Medium</span>
+            <span class="penpot-export:_demo--📱_Title_Medium">Title Medium</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--📱_Title_Small">Title Small</span>
+            <span class="penpot-export:_demo--📱_Title_Small">Title Small</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--Body_Large">Body Large</span>
+            <span class="penpot-export:_demo--Body_Large">Body Large</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--Body_Medium">Body Medium</span>
+            <span class="penpot-export:_demo--Body_Medium">Body Medium</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--Body_Small">Body Small</span>
+            <span class="penpot-export:_demo--Body_Small">Body Small</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--Body_Small_Uppercase">Body Small Uppercase</span>
+            <span class="penpot-export:_demo--Body_Small_Uppercase">Body Small Uppercase</span>
         </div>
         <h2>🖥 Type scale for > 768px devices</h2>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--🖥_Title_Large">Title Large</span>
+            <span class="penpot-export:_demo--🖥_Title_Large">Title Large</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--🖥_Title_Medium">Title Medium</span>
+            <span class="penpot-export:_demo--🖥_Title_Medium">Title Medium</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--🖥_Title_Small">Title Small</span>
+            <span class="penpot-export:_demo--🖥_Title_Small">Title Small</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--Body_Large">Body Large</span>
+            <span class="penpot-export:_demo--Body_Large">Body Large</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--Body_Medium">Body Medium</span>
+            <span class="penpot-export:_demo--Body_Medium">Body Medium</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--Body_Small">Body Small</span>
+            <span class="penpot-export:_demo--Body_Small">Body Small</span>
         </div>
         <div>
-            <span class="EasyFest:_Design_System_&_Landing_page--Body_Small_Uppercase">Body Small Uppercase</span>
+            <span class="penpot-export:_demo--Body_Small_Uppercase">Body Small Uppercase</span>
         </div>
         <h1>Colors</h1>
         <ul>

packages/demos/demo-css/styles/colors.css

@@ -1,29 +1,29 @@
 :root {
-  --Primary_900: #006e54ff;
-  --Secondary_500: #bf98feff;
-  --Secondary_400: #cfb3ffff;
   --Neutral_100: #f7f8f9ff;
-  --Neutral_500: #8590a2ff;
-  --Primary_200: #caffe9ff;
-  --Secondary_800: #691fd1ff;
-  --Primary_100: #e9fff7ff;
-  --Secondary_200: #f0e8ffff;
   --Neutral_200: #f1f2f4ff;
   --Neutral_300: #dcdfe4ff;
-  --Neutral_700: #626f86ff;
   --Neutral_400: #b3b9c4ff;
+  --Neutral_500: #8590a2ff;
   --Neutral_600: #758195ff;
-  --Secondary_600: #9453f9ff;
+  --Neutral_700: #626f86ff;
+  --Neutral_800: #44546fff;
+  --Neutral_900: #172b4dff;
+  --Primary_100: #e9fff7ff;
+  --Primary_200: #caffe9ff;
   --Primary_300: #9affd9ff;
   --Primary_400: #5afbc7ff;
-  --Secondary_300: #e4d4ffff;
-  --Primary_800: #008b69ff;
-  --Neutral_900: #172b4dff;
-  --Neutral_800: #44546fff;
-  --Secondary_900: #5b1faaff;
-  --Primary_700: #00ae7fff;
-  --Secondary_700: #7d30edff;
   --Primary_500: #31efb8ff;
-  --Secondary_100: #f9f5ffff;
   --Primary_600: #00d59aff;
+  --Primary_700: #00ae7fff;
+  --Primary_800: #008b69ff;
+  --Primary_900: #006e54ff;
+  --Secondary_100: #f9f5ffff;
+  --Secondary_200: #f0e8ffff;
+  --Secondary_300: #e4d4ffff;
+  --Secondary_400: #cfb3ffff;
+  --Secondary_500: #bf98feff;
+  --Secondary_600: #9453f9ff;
+  --Secondary_700: #7d30edff;
+  --Secondary_800: #691fd1ff;
+  --Secondary_900: #5b1faaff;
 }

packages/demos/demo-css/styles/typographies.css

@@ -2,50 +2,10 @@
  * These generated typography declarations rely on the given font being already available in your front end code.
  * There are 0 custom fonts and 1 fonts from Google Fonts.
  * You can choose to load the latter from the Google Fonts CSS API in a HTML document using:
- * <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:700,400">
+ * <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:400,700">
 */
 
-.EasyFest\:_Design_System_\&_Landing_page--🖥_Title_Medium {
-  line-height: 1.2000000000000002;
-  font-style: normal;
-  text-transform: none;
-  font-weight: 700;
-  font-size: 54px;
-  letter-spacing: 0px;
-  font-family: "Work Sans";
-}
-
-.EasyFest\:_Design_System_\&_Landing_page--📱_Title_Medium {
-  line-height: 1.2000000000000002;
-  font-style: normal;
-  text-transform: none;
-  font-weight: 700;
-  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: 13px;
-  letter-spacing: 1px;
-  font-family: "Work Sans";
-}
-
-.EasyFest\:_Design_System_\&_Landing_page--🖥_Title_Large {
-  line-height: 1.2;
-  font-style: normal;
-  text-transform: none;
-  font-weight: 700;
-  font-size: 77px;
-  letter-spacing: 0px;
-  font-family: "Work Sans";
-}
-
-.EasyFest\:_Design_System_\&_Landing_page--Body_Large {
+.penpot-export\:_demo--Body_Large {
   line-height: 1.4;
   font-style: normal;
   text-transform: none;
@@ -55,27 +15,17 @@
   font-family: "Work Sans";
 }
 
-.EasyFest\:_Design_System_\&_Landing_page--📱_Title_Small {
-  line-height: 1.2000000000000002;
+.penpot-export\:_demo--Body_Medium {
+  line-height: 1.4;
   font-style: normal;
   text-transform: none;
-  font-weight: 700;
-  font-size: 31px;
+  font-weight: 400;
+  font-size: 18px;
   letter-spacing: 0px;
   font-family: "Work Sans";
 }
 
-.EasyFest\:_Design_System_\&_Landing_page--🖥_Title_Small {
-  line-height: 1.2;
-  font-style: normal;
-  text-transform: none;
-  font-weight: 700;
-  font-size: 31px;
-  letter-spacing: 0px;
-  font-family: "Work Sans";
-}
-
-.EasyFest\:_Design_System_\&_Landing_page--Body_Small {
+.penpot-export\:_demo--Body_Small {
   line-height: 1.4;
   font-style: normal;
   text-transform: none;
@@ -85,7 +35,17 @@
   font-family: "Work Sans";
 }
 
-.EasyFest\:_Design_System_\&_Landing_page--📱_Title_Large {
+.penpot-export\:_demo--Body_Small_Uppercase {
+  line-height: 1.4;
+  font-style: normal;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-size: 13px;
+  letter-spacing: 1px;
+  font-family: "Work Sans";
+}
+
+.penpot-export\:_demo--📱_Title_Large {
   line-height: 1.2;
   font-style: normal;
   text-transform: none;
@@ -95,12 +55,52 @@
   font-family: "Work Sans";
 }
 
-.EasyFest\:_Design_System_\&_Landing_page--Body_Medium {
-  line-height: 1.4;
+.penpot-export\:_demo--📱_Title_Medium {
+  line-height: 1.2000000000000002;
   font-style: normal;
   text-transform: none;
-  font-weight: 400;
-  font-size: 18px;
+  font-weight: 700;
+  font-size: 37px;
+  letter-spacing: 0px;
+  font-family: "Work Sans";
+}
+
+.penpot-export\:_demo--📱_Title_Small {
+  line-height: 1.2000000000000002;
+  font-style: normal;
+  text-transform: none;
+  font-weight: 700;
+  font-size: 31px;
+  letter-spacing: 0px;
+  font-family: "Work Sans";
+}
+
+.penpot-export\:_demo--🖥_Title_Large {
+  line-height: 1.2;
+  font-style: normal;
+  text-transform: none;
+  font-weight: 700;
+  font-size: 77px;
+  letter-spacing: 0px;
+  font-family: "Work Sans";
+}
+
+.penpot-export\:_demo--🖥_Title_Medium {
+  line-height: 1.2000000000000002;
+  font-style: normal;
+  text-transform: none;
+  font-weight: 700;
+  font-size: 54px;
+  letter-spacing: 0px;
+  font-family: "Work Sans";
+}
+
+.penpot-export\:_demo--🖥_Title_Small {
+  line-height: 1.2;
+  font-style: normal;
+  text-transform: none;
+  font-weight: 700;
+  font-size: 31px;
   letter-spacing: 0px;
   font-family: "Work Sans";
 }

packages/demos/demo-json/design-tokens/colors.tokens.json

@@ -1,50 +1,10 @@
 {
-  "$description": "EasyFest: Design System & Landing page",
-  "Primary_900": {
-    "$description": "Primary 900",
-    "$type": "color",
-    "$value": "#006e54ff"
-  },
-  "Secondary_500": {
-    "$description": "Secondary 500",
-    "$type": "color",
-    "$value": "#bf98feff"
-  },
-  "Secondary_400": {
-    "$description": "Secondary 400",
-    "$type": "color",
-    "$value": "#cfb3ffff"
-  },
+  "$description": "penpot-export: demo",
   "Neutral_100": {
     "$description": "Neutral 100",
     "$type": "color",
     "$value": "#f7f8f9ff"
   },
-  "Neutral_500": {
-    "$description": "Neutral 500",
-    "$type": "color",
-    "$value": "#8590a2ff"
-  },
-  "Primary_200": {
-    "$description": "Primary 200",
-    "$type": "color",
-    "$value": "#caffe9ff"
-  },
-  "Secondary_800": {
-    "$description": "Secondary 800",
-    "$type": "color",
-    "$value": "#691fd1ff"
-  },
-  "Primary_100": {
-    "$description": "Primary 100",
-    "$type": "color",
-    "$value": "#e9fff7ff"
-  },
-  "Secondary_200": {
-    "$description": "Secondary 200",
-    "$type": "color",
-    "$value": "#f0e8ffff"
-  },
   "Neutral_200": {
     "$description": "Neutral 200",
     "$type": "color",
@@ -55,25 +15,45 @@
     "$type": "color",
     "$value": "#dcdfe4ff"
   },
-  "Neutral_700": {
-    "$description": "Neutral 700",
-    "$type": "color",
-    "$value": "#626f86ff"
-  },
   "Neutral_400": {
     "$description": "Neutral 400",
     "$type": "color",
     "$value": "#b3b9c4ff"
   },
+  "Neutral_500": {
+    "$description": "Neutral 500",
+    "$type": "color",
+    "$value": "#8590a2ff"
+  },
   "Neutral_600": {
     "$description": "Neutral 600",
     "$type": "color",
     "$value": "#758195ff"
   },
-  "Secondary_600": {
-    "$description": "Secondary 600",
+  "Neutral_700": {
+    "$description": "Neutral 700",
     "$type": "color",
-    "$value": "#9453f9ff"
+    "$value": "#626f86ff"
+  },
+  "Neutral_800": {
+    "$description": "Neutral 800",
+    "$type": "color",
+    "$value": "#44546fff"
+  },
+  "Neutral_900": {
+    "$description": "Neutral 900",
+    "$type": "color",
+    "$value": "#172b4dff"
+  },
+  "Primary_100": {
+    "$description": "Primary 100",
+    "$type": "color",
+    "$value": "#e9fff7ff"
+  },
+  "Primary_200": {
+    "$description": "Primary 200",
+    "$type": "color",
+    "$value": "#caffe9ff"
   },
   "Primary_300": {
     "$description": "Primary 300",
@@ -85,54 +65,74 @@
     "$type": "color",
     "$value": "#5afbc7ff"
   },
-  "Secondary_300": {
-    "$description": "Secondary 300",
+  "Primary_500": {
+    "$description": "Primary 500",
     "$type": "color",
-    "$value": "#e4d4ffff"
+    "$value": "#31efb8ff"
   },
-  "Primary_800": {
-    "$description": "Primary 800",
+  "Primary_600": {
+    "$description": "Primary 600",
     "$type": "color",
-    "$value": "#008b69ff"
-  },
-  "Neutral_900": {
-    "$description": "Neutral 900",
-    "$type": "color",
-    "$value": "#172b4dff"
-  },
-  "Neutral_800": {
-    "$description": "Neutral 800",
-    "$type": "color",
-    "$value": "#44546fff"
-  },
-  "Secondary_900": {
-    "$description": "Secondary 900",
-    "$type": "color",
-    "$value": "#5b1faaff"
+    "$value": "#00d59aff"
   },
   "Primary_700": {
     "$description": "Primary 700",
     "$type": "color",
     "$value": "#00ae7fff"
   },
-  "Secondary_700": {
-    "$description": "Secondary 700",
+  "Primary_800": {
+    "$description": "Primary 800",
     "$type": "color",
-    "$value": "#7d30edff"
+    "$value": "#008b69ff"
   },
-  "Primary_500": {
-    "$description": "Primary 500",
+  "Primary_900": {
+    "$description": "Primary 900",
     "$type": "color",
-    "$value": "#31efb8ff"
+    "$value": "#006e54ff"
   },
   "Secondary_100": {
     "$description": "Secondary 100",
     "$type": "color",
     "$value": "#f9f5ffff"
   },
-  "Primary_600": {
-    "$description": "Primary 600",
+  "Secondary_200": {
+    "$description": "Secondary 200",
     "$type": "color",
-    "$value": "#00d59aff"
+    "$value": "#f0e8ffff"
+  },
+  "Secondary_300": {
+    "$description": "Secondary 300",
+    "$type": "color",
+    "$value": "#e4d4ffff"
+  },
+  "Secondary_400": {
+    "$description": "Secondary 400",
+    "$type": "color",
+    "$value": "#cfb3ffff"
+  },
+  "Secondary_500": {
+    "$description": "Secondary 500",
+    "$type": "color",
+    "$value": "#bf98feff"
+  },
+  "Secondary_600": {
+    "$description": "Secondary 600",
+    "$type": "color",
+    "$value": "#9453f9ff"
+  },
+  "Secondary_700": {
+    "$description": "Secondary 700",
+    "$type": "color",
+    "$value": "#7d30edff"
+  },
+  "Secondary_800": {
+    "$description": "Secondary 800",
+    "$type": "color",
+    "$value": "#691fd1ff"
+  },
+  "Secondary_900": {
+    "$description": "Secondary 900",
+    "$type": "color",
+    "$value": "#5b1faaff"
   }
 }

packages/demos/demo-json/design-tokens/typographies.tokens.json

@@ -1,49 +1,5 @@
 {
-  "$description": "EasyFest: Design System & Landing page",
-  "🖥_Title_Medium": {
-    "$description": "🖥 Title Medium",
-    "$type": "typography",
-    "$value": {
-      "lineHeight": 1.2000000000000002,
-      "fontWeight": 700,
-      "fontSize": "54px",
-      "letterSpacing": "0px",
-      "fontFamily": "Work Sans"
-    }
-  },
-  "📱_Title_Medium": {
-    "$description": "📱 Title Medium",
-    "$type": "typography",
-    "$value": {
-      "lineHeight": 1.2000000000000002,
-      "fontWeight": 700,
-      "fontSize": "37px",
-      "letterSpacing": "0px",
-      "fontFamily": "Work Sans"
-    }
-  },
-  "Body_Small_Uppercase": {
-    "$description": "Body Small Uppercase",
-    "$type": "typography",
-    "$value": {
-      "lineHeight": 1.4,
-      "fontWeight": 400,
-      "fontSize": "13px",
-      "letterSpacing": "1px",
-      "fontFamily": "Work Sans"
-    }
-  },
-  "🖥_Title_Large": {
-    "$description": "🖥 Title Large",
-    "$type": "typography",
-    "$value": {
-      "lineHeight": 1.2,
-      "fontWeight": 700,
-      "fontSize": "77px",
-      "letterSpacing": "0px",
-      "fontFamily": "Work Sans"
-    }
-  },
+  "$description": "penpot-export: demo",
   "Body_Large": {
     "$description": "Body Large",
     "$type": "typography",
@@ -55,24 +11,13 @@
       "fontFamily": "Work Sans"
     }
   },
-  "📱_Title_Small": {
-    "$description": "📱 Title Small",
+  "Body_Medium": {
+    "$description": "Body Medium",
     "$type": "typography",
     "$value": {
-      "lineHeight": 1.2000000000000002,
-      "fontWeight": 700,
-      "fontSize": "31px",
-      "letterSpacing": "0px",
-      "fontFamily": "Work Sans"
-    }
-  },
-  "🖥_Title_Small": {
-    "$description": "🖥 Title Small",
-    "$type": "typography",
-    "$value": {
-      "lineHeight": 1.2,
-      "fontWeight": 700,
-      "fontSize": "31px",
+      "lineHeight": 1.4,
+      "fontWeight": 400,
+      "fontSize": "18px",
       "letterSpacing": "0px",
       "fontFamily": "Work Sans"
     }
@@ -88,6 +33,17 @@
       "fontFamily": "Work Sans"
     }
   },
+  "Body_Small_Uppercase": {
+    "$description": "Body Small Uppercase",
+    "$type": "typography",
+    "$value": {
+      "lineHeight": 1.4,
+      "fontWeight": 400,
+      "fontSize": "13px",
+      "letterSpacing": "1px",
+      "fontFamily": "Work Sans"
+    }
+  },
   "📱_Title_Large": {
     "$description": "📱 Title Large",
     "$type": "typography",
@@ -99,13 +55,57 @@
       "fontFamily": "Work Sans"
     }
   },
-  "Body_Medium": {
-    "$description": "Body Medium",
+  "📱_Title_Medium": {
+    "$description": "📱 Title Medium",
     "$type": "typography",
     "$value": {
-      "lineHeight": 1.4,
-      "fontWeight": 400,
-      "fontSize": "18px",
+      "lineHeight": 1.2000000000000002,
+      "fontWeight": 700,
+      "fontSize": "37px",
+      "letterSpacing": "0px",
+      "fontFamily": "Work Sans"
+    }
+  },
+  "📱_Title_Small": {
+    "$description": "📱 Title Small",
+    "$type": "typography",
+    "$value": {
+      "lineHeight": 1.2000000000000002,
+      "fontWeight": 700,
+      "fontSize": "31px",
+      "letterSpacing": "0px",
+      "fontFamily": "Work Sans"
+    }
+  },
+  "🖥_Title_Large": {
+    "$description": "🖥 Title Large",
+    "$type": "typography",
+    "$value": {
+      "lineHeight": 1.2,
+      "fontWeight": 700,
+      "fontSize": "77px",
+      "letterSpacing": "0px",
+      "fontFamily": "Work Sans"
+    }
+  },
+  "🖥_Title_Medium": {
+    "$description": "🖥 Title Medium",
+    "$type": "typography",
+    "$value": {
+      "lineHeight": 1.2000000000000002,
+      "fontWeight": 700,
+      "fontSize": "54px",
+      "letterSpacing": "0px",
+      "fontFamily": "Work Sans"
+    }
+  },
+  "🖥_Title_Small": {
+    "$description": "🖥 Title Small",
+    "$type": "typography",
+    "$value": {
+      "lineHeight": 1.2,
+      "fontWeight": 700,
+      "fontSize": "31px",
       "letterSpacing": "0px",
       "fontFamily": "Work Sans"
     }

packages/demos/demo-scss/styles/styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../main.scss","../variables/colors.scss","../variables/typographies.scss"],"names":[],"mappings":"AAYA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAZA;EACE,kBCDU;;ADAZ;EACE,kBCHU;;ADEZ;EACE,kBCOU;;ADRZ;EACE,kBCQU;;ADTZ;EACE,kBCgBU;;ADjBZ;EACE,kBCkBU;;ADnBZ;EACE,kBCcU;;ADfZ;EACE,kBCUU;;ADXZ;EACE,kBCRU;;ADOZ;EACE,kBCiBY;;ADlBd;EACE;;AADF;EACE,kBCSY;;ADVd;EACE,kBCNY;;ADKd;EACE,kBCPY;;ADMd;EACE,kBCMY;;ADPd;EACE,kBCeY;;ADhBd;EACE,kBCFY;;ADCd;EACE,kBCaY;;ADdd;EACE,kBCLU;;ADIZ;EACE,kBCCU;;ADFZ;EACE,kBCEU;;ADHZ;EACE,kBCIU;;ADLZ;EACE,kBCJU;;ADGZ;EACE,kBCKU;;ADNZ;EACE,kBCGU;;ADJZ;EACE,kBCYU;;ADbZ;EACE,kBCWU;;;ADuCZ;EAEI,aEfO;EFeP,YEfO;EFeP,gBEfO;EFeP,aEfO;EFeP,WEfO;EFeP,gBEfO;EFeP,aEfO;;;AFaX;EAEI,aEmCQ;EFnCR,YEmCQ;EFnCR,gBEmCQ;EFnCR,aEmCQ;EFnCR,WEmCQ;EFnCR,gBEmCQ;EFnCR,aEmCQ;;;AFrCZ;EAEI,aEeO;EFfP,YEeO;EFfP,gBEeO;EFfP,aEeO;EFfP,WEeO;EFfP,gBEeO;EFfP,aEeO;;;AFjBX;EAEI,aEnCiB;EFmCjB,YEnCiB;EFmCjB,gBEnCiB;EFmCjB,aEnCiB;EFmCjB,WEnCiB;EFmCjB,gBEnCiB;EFmCjB,aEnCiB;;;AFiCrB;EAEI,aEyBW;EFzBX,YEyBW;EFzBX,gBEyBW;EFzBX,aEyBW;EFzBX,WEyBW;EFzBX,gBEyBW;EFzBX,aEyBW;;;AF3Bf;EAEI,aE7CY;EF6CZ,YE7CY;EF6CZ,gBE7CY;EF6CZ,aE7CY;EF6CZ,WE7CY;EF6CZ,gBE7CY;EF6CZ,aE7CY;;;AF2ChB;EAEI,aELW;EFKX,YELW;EFKX,gBELW;EFKX,aELW;EFKX,WELW;EFKX,gBELW;EFKX,aELW;;;AFFf;EAKA;IAEI,aEzBW;IFyBX,YEzBW;IFyBX,gBEzBW;IFyBX,aEzBW;IFyBX,WEzBW;IFyBX,gBEzBW;IFyBX,aEzBW;;EFuBf;IAEI,aEvDY;IFuDZ,YEvDY;IFuDZ,gBEvDY;IFuDZ,aEvDY;IFuDZ,WEvDY;IFuDZ,gBEvDY;IFuDZ,aEvDY;;EFqDhB;IAEI,aEKW;IFLX,YEKW;IFLX,gBEKW;IFLX,aEKW;IFLX,WEKW;IFLX,gBEKW;IFLX,aEKW","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../main.scss","../variables/colors.scss","../variables/typographies.scss"],"names":[],"mappings":"AAYA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAZA;EACE,kBCCU;;ADFZ;EACE,kBCEU;;ADHZ;EACE,kBCGU;;ADJZ;EACE,kBCIU;;ADLZ;EACE,kBCKU;;ADNZ;EACE,kBCMU;;ADPZ;EACE,kBCOU;;ADRZ;EACE,kBCQU;;ADTZ;EACE,kBCSU;;ADVZ;EACE,kBCUY;;ADXd;EACE,kBCWY;;ADZd;EACE,kBCYY;;ADbd;EACE,kBCaY;;ADdd;EACE,kBCcY;;ADfd;EACE,kBCeY;;ADhBd;EACE,kBCgBY;;ADjBd;EACE,kBCiBY;;ADlBd;EACE,kBCkBY;;ADnBd;EACE,kBCRU;;ADOZ;EACE,kBCPU;;ADMZ;EACE,kBCNU;;ADKZ;EACE,kBCLU;;ADIZ;EACE,kBCJU;;ADGZ;EACE,kBCHU;;ADEZ;EACE,kBCFU;;ADCZ;EACE,kBCDU;;ADAZ;EACE;;;AAkDF;EAEI,aEvDO;EFuDP,YEvDO;EFuDP,gBEvDO;EFuDP,aEvDO;EFuDP,WEvDO;EFuDP,gBEvDO;EFuDP,aEvDO;;;AFqDX;EAEI,aE7CQ;EF6CR,YE7CQ;EF6CR,gBE7CQ;EF6CR,aE7CQ;EF6CR,WE7CQ;EF6CR,gBE7CQ;EF6CR,aE7CQ;;;AF2CZ;EAEI,aEnCO;EFmCP,YEnCO;EFmCP,gBEnCO;EFmCP,aEnCO;EFmCP,WEnCO;EFmCP,gBEnCO;EFmCP,aEnCO;;;AFiCX;EAEI,aEzBiB;EFyBjB,YEzBiB;EFyBjB,gBEzBiB;EFyBjB,aEzBiB;EFyBjB,WEzBiB;EFyBjB,gBEzBiB;EFyBjB,aEzBiB;;;AFuBrB;EAEI,aEfW;EFeX,YEfW;EFeX,gBEfW;EFeX,aEfW;EFeX,WEfW;EFeX,gBEfW;EFeX,aEfW;;;AFaf;EAEI,aELY;EFKZ,YELY;EFKZ,gBELY;EFKZ,aELY;EFKZ,WELY;EFKZ,gBELY;EFKZ,aELY;;;AFGhB;EAEI,aEKW;EFLX,YEKW;EFLX,gBEKW;EFLX,aEKW;EFLX,WEKW;EFLX,gBEKW;EFLX,aEKW;;;AFZf;EAKA;IAEI,aEeW;IFfX,YEeW;IFfX,gBEeW;IFfX,aEeW;IFfX,WEeW;IFfX,gBEeW;IFfX,aEeW;;EFjBf;IAEI,aEyBY;IFzBZ,YEyBY;IFzBZ,gBEyBY;IFzBZ,aEyBY;IFzBZ,WEyBY;IFzBZ,gBEyBY;IFzBZ,aEyBY;;EF3BhB;IAEI,aEmCW;IFnCX,YEmCW;IFnCX,gBEmCW;IFnCX,aEmCW;IFnCX,WEmCW;IFnCX,gBEmCW;IFnCX,aEmCW","file":"styles.css"}

packages/demos/demo-scss/variables/colors.scss

@@ -1,27 +1,27 @@
-$Primary_900: #006e54ff;
-$Secondary_500: #bf98feff;
-$Secondary_400: #cfb3ffff;
 $Neutral_100: #f7f8f9ff;
-$Neutral_500: #8590a2ff;
-$Primary_200: #caffe9ff;
-$Secondary_800: #691fd1ff;
-$Primary_100: #e9fff7ff;
-$Secondary_200: #f0e8ffff;
 $Neutral_200: #f1f2f4ff;
 $Neutral_300: #dcdfe4ff;
-$Neutral_700: #626f86ff;
 $Neutral_400: #b3b9c4ff;
+$Neutral_500: #8590a2ff;
 $Neutral_600: #758195ff;
-$Secondary_600: #9453f9ff;
+$Neutral_700: #626f86ff;
+$Neutral_800: #44546fff;
+$Neutral_900: #172b4dff;
+$Primary_100: #e9fff7ff;
+$Primary_200: #caffe9ff;
 $Primary_300: #9affd9ff;
 $Primary_400: #5afbc7ff;
-$Secondary_300: #e4d4ffff;
-$Primary_800: #008b69ff;
-$Neutral_900: #172b4dff;
-$Neutral_800: #44546fff;
-$Secondary_900: #5b1faaff;
-$Primary_700: #00ae7fff;
-$Secondary_700: #7d30edff;
 $Primary_500: #31efb8ff;
+$Primary_600: #00d59aff;
+$Primary_700: #00ae7fff;
+$Primary_800: #008b69ff;
+$Primary_900: #006e54ff;
 $Secondary_100: #f9f5ffff;
-$Primary_600: #00d59aff;
+$Secondary_200: #f0e8ffff;
+$Secondary_300: #e4d4ffff;
+$Secondary_400: #cfb3ffff;
+$Secondary_500: #bf98feff;
+$Secondary_600: #9453f9ff;
+$Secondary_700: #7d30edff;
+$Secondary_800: #691fd1ff;
+$Secondary_900: #5b1faaff;

packages/demos/demo-scss/variables/typographies.scss

@@ -1,47 +1,7 @@
 // These generated typography declarations rely on the given font being already available in your front end code.
 // There are 0 custom fonts and 1 fonts from Google Fonts.
 // You can choose to load the latter from the Google Fonts CSS API in a HTML document using:
-// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:700,400">
-
-$🖥_Title_Medium: (
-  "line-height": 1.2000000000000002,
-  "font-style": normal,
-  "text-transform": none,
-  "font-weight": 700,
-  "font-size": 54px,
-  "letter-spacing": 0px,
-  "font-family": "Work Sans",
-);
-
-$📱_Title_Medium: (
-  "line-height": 1.2000000000000002,
-  "font-style": normal,
-  "text-transform": none,
-  "font-weight": 700,
-  "font-size": 37px,
-  "letter-spacing": 0px,
-  "font-family": "Work Sans",
-);
-
-$Body_Small_Uppercase: (
-  "line-height": 1.4,
-  "font-style": normal,
-  "text-transform": uppercase,
-  "font-weight": 400,
-  "font-size": 13px,
-  "letter-spacing": 1px,
-  "font-family": "Work Sans",
-);
-
-$🖥_Title_Large: (
-  "line-height": 1.2,
-  "font-style": normal,
-  "text-transform": none,
-  "font-weight": 700,
-  "font-size": 77px,
-  "letter-spacing": 0px,
-  "font-family": "Work Sans",
-);
+// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work%20Sans:400,700">
 
 $Body_Large: (
   "line-height": 1.4,
@@ -53,22 +13,12 @@ $Body_Large: (
   "font-family": "Work Sans",
 );
 
-$📱_Title_Small: (
-  "line-height": 1.2000000000000002,
+$Body_Medium: (
+  "line-height": 1.4,
   "font-style": normal,
   "text-transform": none,
-  "font-weight": 700,
-  "font-size": 31px,
-  "letter-spacing": 0px,
-  "font-family": "Work Sans",
-);
-
-$🖥_Title_Small: (
-  "line-height": 1.2,
-  "font-style": normal,
-  "text-transform": none,
-  "font-weight": 700,
-  "font-size": 31px,
+  "font-weight": 400,
+  "font-size": 18px,
   "letter-spacing": 0px,
   "font-family": "Work Sans",
 );
@@ -83,6 +33,16 @@ $Body_Small: (
   "font-family": "Work Sans",
 );
 
+$Body_Small_Uppercase: (
+  "line-height": 1.4,
+  "font-style": normal,
+  "text-transform": uppercase,
+  "font-weight": 400,
+  "font-size": 13px,
+  "letter-spacing": 1px,
+  "font-family": "Work Sans",
+);
+
 $📱_Title_Large: (
   "line-height": 1.2,
   "font-style": normal,
@@ -93,12 +53,52 @@ $📱_Title_Large: (
   "font-family": "Work Sans",
 );
 
-$Body_Medium: (
-  "line-height": 1.4,
+$📱_Title_Medium: (
+  "line-height": 1.2000000000000002,
   "font-style": normal,
   "text-transform": none,
-  "font-weight": 400,
-  "font-size": 18px,
+  "font-weight": 700,
+  "font-size": 37px,
+  "letter-spacing": 0px,
+  "font-family": "Work Sans",
+);
+
+$📱_Title_Small: (
+  "line-height": 1.2000000000000002,
+  "font-style": normal,
+  "text-transform": none,
+  "font-weight": 700,
+  "font-size": 31px,
+  "letter-spacing": 0px,
+  "font-family": "Work Sans",
+);
+
+$🖥_Title_Large: (
+  "line-height": 1.2,
+  "font-style": normal,
+  "text-transform": none,
+  "font-weight": 700,
+  "font-size": 77px,
+  "letter-spacing": 0px,
+  "font-family": "Work Sans",
+);
+
+$🖥_Title_Medium: (
+  "line-height": 1.2000000000000002,
+  "font-style": normal,
+  "text-transform": none,
+  "font-weight": 700,
+  "font-size": 54px,
+  "letter-spacing": 0px,
+  "font-family": "Work Sans",
+);
+
+$🖥_Title_Small: (
+  "line-height": 1.2,
+  "font-style": normal,
+  "text-transform": none,
+  "font-weight": 700,
+  "font-size": 31px,
   "letter-spacing": 0px,
   "font-family": "Work Sans",
 );