Merge pull request #363 from thoughtspot/theme-builder

Theme builder

Author: rani2655

modules/ROOT/pages/theme-builder.adoc

@@ -1,22 +1,23 @@
-= Theme builder
+= Theme builder [beta betaBackground]^Beta^
 :toc: true
 :toclevels: 2
 
 :page-title: Theme builder
 :page-pageid: theme-builder-doc
 :page-description: Understanding how to use the theme builder
 
-Theme Builder[beta betaBackground]^Beta^ provides a graphical interface to explore the CSS customization options   that are currently available for various ThoughtSpot components. You can try out these style customization options and get a preview of the desired look and feel before applying these changes to the ThoughtSpot components in your application environment.
+Theme Builder provides a graphical interface to explore the CSS customization options   that are currently available for various ThoughtSpot components. You can try out these style customization options and get a preview of the desired look and feel before applying these changes to the ThoughtSpot components in your application environment.
 
-In the current version, Theme Builder supports style customization options for embed components such as Liveboard, visualization, Search data page, and full ThoughtSpot app experience. The Theme Builder playground also provides an option to download and upload CSS variables with custom values in JSON format.
+In the current version, Theme Builder supports style customization options for embed components such as Liveboard, visualization, Search data page, Spotter and full ThoughtSpot app experience. The Theme Builder playground also provides an option to import and export CSS variables with custom values in JSON format.
 
-To access Theme Builder, click *Live Playgrounds* > *Theme Builder* [beta betaBackground]^Beta^ on this documentation site, or go to link:https://developers.thoughtspot.com/docs/theme-builder[https://developers.thoughtspot.com/docs/theme-builder, window=_blank].
+//To access Theme Builder, go to *Develop* tab > *Customisations* and click *Theme Builder*.
+Click *Live Playgrounds* > *Theme Builder* on this documentation site, or go to link:https://developers.thoughtspot.com/docs/theme-builder[https://developers.thoughtspot.com/docs/theme-builder, window=_blank].
 
 == Try out styles and load changes
 
 To try out the customization options:
 
-. Go to link:https://developers.thoughtspot.com/docs/theme-builder[Theme Builder].
+. Go to link:https://developers.thoughtspot.com/docs/theme-builder[*Theme Builder*, window=_blank].
 . Choose the desired embed component from the dropdown on the left panel.
 +
 [.bordered]
@@ -25,37 +26,37 @@ image::./images/tb-embed.png[Embed components menu]
 
 . Select the UI element or property to customize. For instance, if you want to edit the background color of the context menu, then click the dropdown for the *Context Menu*. Click on the text box for *Background* and select your desired color.
 +
+If you want to the exact variable name of the element as in ThoughtSpot, hover over the name of the element in the left panel.
++
 [.bordered]
 [.widthAuto]
 image::./images/tb-style-menu.png[Style components menu]
 
-. To view the style customizations you just applied, click *Load Changes* in the top-right corner. +
-Alternatively, you can also choose *Realtime loading* checkbox in the top-right corner. If you choose this,
-the iframe refreshes automatically on each customization with your selected input.
+. You will see the style customizations you just applied in real time, as the iframe refreshes automatically on each customization with your selected input.
 
-== Download CSS variables in JSON format
+== Export CSS variables in JSON format
 
 To download a copy of the CSS variables in JSON:
 
-. In the Theme Builder Playground, click *Save JSON*. +
+. In the Theme Builder Playground, click *Export JSON*. +
 . To copy the CSS variables, click *Copy JSON*.
-. To download the JSON to your local directory, click *Download*.
+. To download the JSON to your local directory, click *Export*.
 
-The CSS variables in the JSON have default values. You can edit the JSON to add custom specifications as per your Organization's branding guidelines and upload the customized JSON to review the changes.
+You can use this exported JSON to implement the style in your embedded ThoughtSpot instance.
 
-== Upload CSS variables with custom specifications
+== Import CSS variables with custom specifications
 
 To upload CSS variables JSON:
 
-. In the Theme Builder Playground, click *Upload JSON* on the bottom of the left panel.
+. In the Theme Builder Playground, click *Import JSON* on the bottom of the left panel.
 +
-The Upload JSON modal opens.
+The Import JSON modal opens.
 +
 [.bordered]
 [.widthAuto]
-image::./images/json.png[JSON button]
-. Paste the JSON with your custom specifications.
-. Click *Submit*. +
+image::./images/json.png[Import JSON button]
+. Paste the JSON with your custom specifications. Currently, the Theme builder supports only the JSON styling variables.
+. Click *Import*. +
 If there are no errors, a success message appears at the bottom left and the iframe refreshes with the applied JSON.
 
 == Additional resources