From ac2237b82cae7e10e5248d104c697ac70c168d14 Mon Sep 17 00:00:00 2001 From: Garth Braithwaite Date: Tue, 26 Mar 2024 12:13:14 -0600 Subject: [PATCH] Update docs (#239) * docs: correct and update docs, closes #229 * chore: fixed changeset config to ignore website package --- .changeset/config.json | 2 +- docs/ui/src/views/home_gettingStarted.html | 40 ++++++++++++++-------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index fce1c265..86344307 100644 --- 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 index 636c517d..1b71cb52 100644 --- a/docs/ui/src/views/home_gettingStarted.html +++ b/docs/ui/src/views/home_gettingStarted.html @@ -128,30 +128,42 @@

Setters<

Theme.addColor = color

Add a Color to an existing theme

- 
const red = new Color({...})
+    
let red = new Color({
+    name: 'red',
+    colorKeys: ['#FF9A81', '#FF0000'],
+    ratios: [3, 4.5]
+});
 
-    theme.addColor = red;
+theme.addColor = red;
     

     
Theme.removeColor = color

     
Remove a Color from an existing theme. Accepts an object with the Color's name and value, or by passing the Color class itself.

-    
// Remove via color name
-    theme.removeColor = {name: 'Red'};
+    
// Remove via color name
+theme.removeColor = {name: 'Red'};
 
-    // Remove via Color class
-    const red = new Color({...})
-    theme.removeColor = red;
+// Remove via Color class
+const red = new Color({
+   name: 'red',
+   colorKeys: ['#FF9A81', '#FF0000'],
+   ratios: [3, 4.5]
+});
+
+theme.removeColor = red;
     

     
Theme.updateColor = {name, property}

     
Update a Color 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.

-    
const red = new Color({...})
-    // Change the colors ratios
-    theme.updateColor = {name: 'red', ratios: [3, 4.5, 7]};
+    
// Change the colors ratios
+theme.updateColor = {color: 'red', ratios: [3, 4.5, 7]};
 
-    // Change the colors colorKeys
-    theme.updateColor = {name: 'red', colorKeys: ['#ff0000']};
+// Change the colors colorKeys
+theme.updateColor = {color: 'red', colorKeys: ['#ff0000']};
 
-    // Change the color's name
-    theme.updateColor = {name: 'red', name: 'Crimson'};
+// Change the color's name
+theme.updateColor = {color: 'red', name: 'Crimson'};
+    

+    
Alternatively, it's possible to change all 3 properties in the same call.

+    
// It's also possible to change the color name and colorKeys in the same function
+theme.updateColor = {color: 'red', ratios: [3, 4.5, 7], colorKeys: ['#ff0000'], name: 'Crimson'};
     

     
Supported output formats:

     
Available output formats conform to the W3C CSS Color Module Level 4 spec for the supported options, as listed below: