Right colors, fixing small errors in functions

Author: forstisabella

src/_sass/components/_prisim.scss

@@ -23,13 +23,13 @@ pre[class*="language-"] {
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 	text-shadow: none;
-	background: #b3d4fc;
+	background: #eceef0;
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
 	text-shadow: none;
-	background: #b3d4fc;
+	background: #eceef0;
 }
 
 @media print {
@@ -48,7 +48,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background: #f5f2f0;
+	background: #eceef0;
 }
 
 /* Inline code */
@@ -61,11 +61,11 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: slategray;
+	color: #474d66;
 }
 
 .token.punctuation {
-	color: #999;
+	color: #474d66;
 }
 
 .namespace {
@@ -79,7 +79,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-	color: #905;
+	color: #d52039;
 }
 
 .token.selector,
@@ -88,32 +88,32 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-	color: #690;
+	color: #6fba97;
 }
 
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string {
-	color: #a67f59;
+	color: #f89c56;
 	background: hsla(0, 0%, 100%, .5);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-	color: #07a;
+	color: #2e98df;
 }
 
 .token.function {
-	color: #DD4A68;
+	color: #ff678d;
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-	color: #e90;
+	color: #f89c56;
 }
 
 .token.important,

src/connections/spec/identify.md

@@ -96,6 +96,9 @@ Here's a complete example of an `identify` call:
   "version": "1.1"
 }
 ```
+### Create your own Identify call
+
+Use the following interactive code pen to see what your Identify calls would look like with user-provided information:
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <link rel="stylesheet" href="/src/_sass/components/_prisim.scss"/>
@@ -108,8 +111,8 @@ Here's a complete example of an `identify` call:
       var street = document.getElementById("street").value;
       var city = document.getElementById("city").value;
       var state = document.getElementById("state").value;
-      var postalCode = document.getElementById("postalCode");
-      var country = document.getElementById("country");
+      var postcode = document.getElementById("postcode").value;
+      var country = document.getElementById("country").value;
       var output = `{
   "anonymousId": "507f191e810c19729de860ea",
   "channel": "browser",
@@ -135,7 +138,7 @@ Here's a complete example of an `identify` call:
       "street": "${street}",
       "city": "${city}",
       "state": "${state}",
-      "postalCode": "${postalCode}",
+      "postalCode": "${postcode}",
       "country": "${country}"
     }
   },
@@ -160,7 +163,7 @@ Here's a complete example of an `identify` call:
 
 <div class="sample-code-container">
 <div class="form">
-  <h3> Sample Identify </h3>
+  <h4> Sample Identify </h4>
   <p><b>See what your identify call looks like</b></p>
   <label for="name">Name:</label>
   <input type="text" id="name"><br>
@@ -176,16 +179,16 @@ Here's a complete example of an `identify` call:
   <input type="text" id="city"><br>
   <label for="state">State:</label>
   <input type="text" id="state"><br>
-  <label for="postalCode">Postal Code:</label>
-  <input type="text" id="postalCode"><br>
+  <label for="postcode">Postal Code:</label>
+  <input type="text" id="postcode"><br>
   <label for="country">Country:</label>
   <input type="text" id="country"><br>
   <input type="submit" id="submit" onclick="showMessage(); showOutput()" value="See a sample identify call">
 </div>
 
 <div class="output">
-<h3>Sample Identify Call</h3>
-<pre class="language-javascript"><code class="language-javascript" id="output_container"></code></pre>
+<h4>Sample Identify Call</h4>
+<pre><code class="language-javascript" id="output_container"></code></pre>
 </div></div>
 
 ## Identities

src/connections/spec/track.md

@@ -82,7 +82,6 @@ Here's a complete example of a `track` call:
   function showMessage(){
       var event = document.getElementById("event").value;
       var title = document.getElementById("title").value;
-      var variation = document.getElementById("variation").value;
       var output = 
 `{
   "anonymousId": "23adfd82-aa0f-45a7-a756-24f2a7a4c895",
@@ -141,7 +140,7 @@ Here's a complete example of a `track` call:
 </div>
 
 <div class="output">
-<h3>Sample Screen Call</h3>
+<h3>Sample Track Call</h3>
 <pre class="language-javascript"><code class="language-javascript" id="output_container">
 
 </code></pre>