Update docs (#239)

* docs: correct and update docs, closes #229 * chore: fixed changeset config to ignore website package
adobe · Mar 26, 2024 · ac2237b · ac2237b
1 parent a9655fc
commit ac2237b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["@adobe/leonardo-ui"]
 }
diff --git a/docs/ui/src/views/home_gettingStarted.html b/docs/ui/src/views/home_gettingStarted.html
@@ -128,30 +128,42 @@ <h4 class="spectrum-Heading spectrum-Heading--sizeXS" id="docs-setters">Setters<
     </table class="spectrum-Table spectrum-Table--sizeM">
     <h4 class="spectrum-Heading spectrum-Heading--sizeXS" id="docs-theme-addcolor-color"><code>Theme.addColor = color</code></h4>
     <p>Add a <code>Color</code> to an existing theme</p>
-    <pre><code class="lang-js"><span class="hljs-keyword">const</span> red = new <span class="hljs-type">Color</span>(<span class="hljs-meta">{...}</span>)
+    <pre><code class="lang-js"><span class="hljs-keyword">let</span> red = <span class="hljs-keyword">new</span> Color({
+    name: <span class="hljs-string">'red'</span>,
+    colorKeys: [<span class="hljs-string">'#FF9A81'</span>, <span class="hljs-string">'#FF0000'</span>],
+    ratios: [<span class="hljs-number">3</span>, <span class="hljs-number">4.5</span>]
+});
 
-    theme.addColor = red;
+theme.addColor = red;
     </code></pre>
     <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>'};
+    <pre><code class="lang-js"><span class="hljs-comment">// Remove via color name</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;
+<span class="hljs-comment">// Remove via Color class</span>
+<span class="hljs-keyword">const</span> red = <span class="hljs-keyword">new</span> Color({
+   name: <span class="hljs-string">'red'</span>,
+   colorKeys: [<span class="hljs-string">'#FF9A81'</span>, <span class="hljs-string">'#FF0000'</span>],
+   ratios: [<span class="hljs-number">3</span>, <span class="hljs-number">4.5</span>]
+});
+
+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>]};
+    <pre><code class="lang-js"><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 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 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">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 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>