Skip to main content

Exercise 2 - Activity 1

Component-level Style Editing​

Component-level style editing is a recently added feature to Theme Builder. We will work on editing some component styles through the next couple of activities to familiarize ourselves with this new feature. Component-level styling is currently limited to select components available through Theme Builder, but the selection will be expanding with future releases.

Note: You can apply themes even with accessibility issues being present, but we suggest you address these issues before pushing your themes to production for the best experience for your end users.

  1. From the Editor view of Theme Builder, click on the Component styles tab at the top left corner.

  2. There are two main views of the Component styles tabs, "Preview" and "Editing". First, we will explore the "Preview" view:

    1. In the left corner you can filter the components by their different categories and sort by category or alphabetical order.

      1. In the center you will see the stage. Here you can see how your theme currently applies to the provided components.

      2. In the top right corner, you will be able to change the "Canvas color" to preview what your components might look like in different backgrounds.

      3. Additionally in the top right corner you'll find the Accessibility preferences icon. If you click on it, it will show you how many contrast issues have been found, we will go over this in further detail in the following activities.

  3. Next, click on the "Editing" half of the app pill in the center. We will now explore the "Editing" view, which brings you to the Component overview:

    1. The left hand Filter now has changed to have checkboxes. This can help filter what is shown in the stage in the center.

    2. In the right you should see the Component options pane. If you don't, click on any component in the stage and it should appear. This displays the currently set options for the specific component you have selected. You can click on any option and make changes to it as you wish. At the bottom you can click and go to Component Editor.

    3. Each component will have various options you can change when it concerns Color, Shape, Font and Accessibility. It's also important to note that many components also have Variants and States.

      1. Variants are styling variants such as "Primary", "Secondary", and "Tertiary". These are used to portray different styling decisions concerning branding and are an industry standard. A good example of this is that typically, you'll see some buttons be filled in and others that are just an outline, and those are typically the Primary and Secondary variant options.

      2. States refer to the different interaction states that a component might be in at any given moment. You can have a button be in many different states but the ones directly supported are Default, Hover, Active and Disabled. When you hover over a button, it will change to the "Hover" state, for example.

  4. Click on the Primary Button component variant, and then click Go to Component Editor inside the Component options pane.

  5. We will now explore the "Component Editor":

    1. In the center you'll find the "Interactive preview" - here you can see changes you make in real-time as you make them.

    2. Below that you'll find the "Interaction states", you can freely choose between these as you make changes to change what is displayed on the right-hand pane. Note that there is a red triangle on the "Default" state - keep this in mind for a future activity.

    3. To the right you'll find the Component options pane, with the options you can change for each component and it's states.

    4. In the top left corner, click Return to component overview so we can begin the next activity.