docs: correct and update docs, closes #229

adobe · Mar 25, 2024 · cb87995 · cb87995
1 parent a9655fc
commit cb87995
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/docs/ui/src/views/home_gettingStarted.html b/docs/ui/src/views/home_gettingStarted.html
@@ -135,23 +135,28 @@ <h4 class="spectrum-Heading spectrum-Heading--sizeXS" id="docs-theme-addcolor-co
     <h4 class="spectrum-Heading spectrum-Heading--sizeXS" id="docs-theme-removecolor-color"><code>Theme.removeColor = color</code></h4>
     <p>Remove a <code>Color</code> from an existing theme. Accepts an object with the <code>Color</code>&#39;s name and value, or by passing the <code>Color</code> class itself.</p>
     <pre><code class="lang-js">// <span class="hljs-type">Remove</span> via color name
-    theme.removeColor = {name: '<span class="hljs-type">Red</span>'};
+theme.removeColor = {name: '<span class="hljs-type">Red</span>'};
 
     // <span class="hljs-type">Remove</span> via <span class="hljs-type">Color</span> class
     <span class="hljs-keyword">const</span> red = new <span class="hljs-type">Color</span>(<span class="hljs-meta">{...}</span>)
-    theme.removeColor = red;
+theme.removeColor = red;
     </code></pre>
     <h4 class="spectrum-Heading spectrum-Heading--sizeXS" id="docs-theme-updatecolor-name-property"><code>Theme.updateColor = {name, property}</code></h4>
     <p>Update a <code>Color</code> via its setters from the theme. Accepts an object with the name of the color you wish to modify, followed by the property and the new value you wish to modify.</p>
     <pre><code class="lang-js">const red = <span class="hljs-keyword">new</span> Color({...})
-    <span class="hljs-comment">// Change the colors ratios</span>
-    theme.updateColor = {<span class="hljs-string">name:</span> <span class="hljs-string">'red'</span>, <span class="hljs-string">ratios:</span> [<span class="hljs-number">3</span>, <span class="hljs-number">4.5</span>, <span class="hljs-number">7</span>]};
 
-    <span class="hljs-comment">// Change the colors colorKeys</span>
-    theme.updateColor = {<span class="hljs-string">name:</span> <span class="hljs-string">'red'</span>, <span class="hljs-string">colorKeys:</span> [<span class="hljs-string">'#ff0000'</span>]};
+<span class="hljs-comment">// Change the colors ratios</span>
+theme.updateColor = {<span class="hljs-string">color:</span> <span class="hljs-string">'red'</span>, <span class="hljs-string">ratios:</span> [<span class="hljs-number">3</span>, <span class="hljs-number">4.5</span>, <span class="hljs-number">7</span>]};
 
-    <span class="hljs-comment">// Change the color's name</span>
-    theme.updateColor = {<span class="hljs-string">name:</span> <span class="hljs-string">'red'</span>, <span class="hljs-string">name:</span> <span class="hljs-string">'Crimson'</span>};
+<span class="hljs-comment">// Change the colors colorKeys</span>
+theme.updateColor = {<span class="hljs-string">color:</span> <span class="hljs-string">'red'</span>, <span class="hljs-string">colorKeys:</span> [<span class="hljs-string">'#ff0000'</span>]};
+
+<span class="hljs-comment">// Change the color's name</span>
+theme.updateColor = {<span class="hljs-string">color:</span> <span class="hljs-string">'red'</span>, <span class="hljs-string">name:</span> <span class="hljs-string">'Crimson'</span>};
+    </code></pre>
+    <p>Alternatively, it's possible to change all 3 properties in the same call.</p>
+    <pre><code class="lang-js"><span class="hljs-comment">// It's also possible to change the color name and colorKeys in the same function</span>
+theme.updateColor = {<span class="hljs-string">color:</span> <span class="hljs-string">'red'</span>, <span class="hljs-string">ratios:</span> [<span class="hljs-number">3</span>, <span class="hljs-number">4.5</span>, <span class="hljs-number">7</span>], <span class="hljs-string">colorKeys:</span> [<span class="hljs-string">'#ff0000'</span>], <span class="hljs-string">name:</span> <span class="hljs-string">'Crimson'</span>};
     </code></pre>
     <h4 class="spectrum-Heading spectrum-Heading--sizeXS" id="docs-supported-output-formats">Supported output formats:</h4>
     <p>Available output formats conform to the <a href="https://www.w3.org/TR/css-color-4/">W3C CSS Color Module Level 4</a> spec for the supported options, as listed below:</p>