Theme

Overview

The theme option helps you to create common typography, colors, and assets for reusability across a project.

How To

A user can:

Creating Reusable Color Styles

You can create reusable color styles and reuse them across the project.

Note: There are a list of default colors available which you can use it directly or you can edit and use it:

To create reusable color styles,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available in the left panel:
  4. Select the COLORS option:
  5. Click the Add Color option.
  6. In the pop-up, provide a variable name:
  7. Click the SAVE button.
    A variable is created for the color.
  8. Click on the color variable name:
  9. Set the color value.
  10. Click the COPY button to copy the color variable name to reuse across the project:

    Note:

    • Click  or  to delete or rename the color variable.
    • You need to add the @ symbol before the color variable name to reuse it across the project. For example, @ButtonColor
  11. Use the copied color variable anywhere in the project where a color value is needed.
    For example,
    https://duseqpxtuo98y.cloudfront.net/studio/theme/studio-Theme.png
    The specific color is applied via the color variable to the selected item.

Creating Reusable Typography Styles

You can create reusable typography styles and reuse them across the project.

Note: There are a list of default typography styles available which you can use it directly or you can edit and use it:

To create reusable typography styles,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available in the left panel:
  4. Select the TYPOGRAPHY option:
  5. Click the Add Typography option.
  6. In the pop-up, provide a variable name:
  7. Click the SAVE button.
    Now, you can see a variable created for the typography:
  8. Click on the typography variable name.
  9. Set the typography values.
    Note: Click  or  to delete or rename the typography variable.
  10. Use the created typography variable anywhere in the project where typography value is needed.
    For example,

    Note:     Enable the Linked Style property and select the required typography variable for the property Typography.
    The specific typography is applied via the typography variable to the selected item.

Managing Spacing Styles

You can manage the spacing style needed for any project by adding the spacing styles, rename the spacing styles and delete the spacing styles.
Note: There are a list of default spacing styles available which you can use it directly or you can edit and use it:

Adding a Spacing Style

To add a spacing style,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available in the left panel:
  4. Select the SPACINGS option.
  5. Click the Add Spacings option:

    A pop-up appears.
  6. In the pop-up, provide a name for the spacing style to be created:
  7. Click the SAVE button.
    Now, you can see a spacing style has been created:

Renaming a Spacing Style

You can rename a spacing style.

To rename a spacing style,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available in the left panel:
  4. Select the SPACINGS option.
  5. Select  available next to the spacing style.
  6. Select Rename:

    The RENAME SPACING pop-up appears.
  7. Enter a new spacing style name:
  8. Click Rename.
    The spacing style has been renamed.

Deleting a Spacing Style

You can delete a spacing style if it is no longer required.

To delete a spacing style,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available in the left panel:
  4. Select the SPACINGS option:
  5. Select  available next to the spacing style name:
  6. Select Delete.
    The spacing style has been deleted.

Managing Assets

You can manage the assets needed for any project by adding the assets, rename the assets and delete the assets.

Adding an Asset

To add an asset,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available in the left panel:
  4. Select the ASSETS option:
  5. Click the Add Asset option.
    In the pop-up, click the SELECT ASSET button to select the asset:
  6. Click the Import Asset button to start the import process.
  7. Click on the asset.
    Now, you can find the asset has been imported:

Renaming an Asset

To rename an asset,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available in the left panel:
  4. Select the ASSETS option:
  5. Select  available next to the asset name.
  6. Select Rename:
  7. In the pop-up, provide a new asset name:
  8. Click Rename.
    The asset has been renamed.

Deleting an Asset

You can delete an asset if it is no longer required.

To delete an asset,

  1. Log in to the Infosys Equinox Studio environment with valid credentials provided to you.
  2. Open the required project or asset.
  3. Click available in the left panel:
  4. Select the ASSETS option:
  5. Select  available next to the asset name:
  6. Select Delete.
    The asset has been deleted.

 

 

Revision History 

Date   Description  Created By  Peer-Reviewed By  Approved By 
2023/06/22  Page created and content added.  AN  JP Suganya