Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update docs #239

Merged
merged 2 commits into from
Mar 26, 2024
Merged

Update docs #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
823d723
docs: correct and update docs, closes #229
GarthDB Mar 25, 2024
0de1e18
chore: fixed changeset config to ignore website package
GarthDB Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .changeset/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
"ignore": ["@adobe/leonardo-ui"]
}
40 changes: 26 additions & 14 deletions docs/ui/src/views/home_gettingStarted.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down