Style Workspace

Modern applications rely heavily on consistency in design. Colors, typography, spacing, and component behavior must work together to deliver a cohesive user experience. WaveMaker addresses this need through the Style Workspace, a centralized environment for configuring and managing application styling.

The Style Workspace acts as a visual control panel for customizing and managing an application's design, allowing developers to preview changes in real time and maintain brand consistency across UI components.The Style Workspace in WaveMaker is designed around the principles of design systems, which provide a modern, reusable, and scalable foundation for building user interfaces. These systems ensure that application's look and feel remains consistent and easy to maintain.

In WaveMaker, the Style Workspace brings together key styling aspects such as:

• Colors and themes

• Typography and text styles

• Spacing and sizing

• Component appearance and variants

These elements work together to define the visual language of an application.

Global and Component Tokens

Global tokens define application-wide styles such as primary colors, fonts, borders, and shadows, while Component tokens control styling for specific UI elements like buttons, data tables, and panels and so on.

1. Token Groups

   Styling options are categorized into four main token groups:

   • Color

   • Size

   • Text

   • Style

   Each group contains configurable values called token key value pairs.

2. Real-Time Preview

   A preview panel displays a sample page with common UI components, allowing users to see the effect of style changes immediately.

3. Component Token groups UI provides a Variant properties panel where Variants can be modified for each Components with a real time preview of the changes in the preview panal.

For a detailed understanding of the workspace, including navigation, token configuration, and the creation of component variants, watch the full walkthrough video below.

Style Workspace

View on Academy

00:00: Welcome to the WaveMaker Style Workspace.

00:02: In this video, we walk through the Style workspace and show how applications achieve a consistent look and feel using an easy-to-use style configurator.

00:13: You may already be familiar with design systems,a modern, reusable, and scalable UI foundation that ensures applications remain consistent, accessible, and quick to build. WaveMaker’s design philosophy is built on the same principles

00:29: Let's see where text styles spacing colors, and themes are defined and how they come together in the overall styling workflow.

00:38: Let us go straight to the style workspace of wave maker.

00:42: The style workspace can be accessed by clicking on this dial icon in the left navigation strip.

00:48: The style workspace in wavemaker, studio is your visual control panel for customizing and managing your applications design?

00:56: It helps maintain brand consistency across all UI components while allowing you to preview changes in real time and modified design tokens.

01:05: So, let's quickly see what this UI has to offer.

01:08: On the left, we have the settings and configurators and on the main Central section we have a demo preview.

01:15: We will gradually go to towards more intricate details.

01:18: At the top we have Global and components panel tabs.

01:22: At launch Global is pre-selected and besides these two tabs is another set of tabs for chosen between light and dark modes.

01:30: By default light mode is selected.

01:33: In global token Styles that are in general part of the application like primary secondary Colors of links and button.

01:40: default font size of paragraphs headings subheadings typography related styles

01:47: like borders shadow type border radius, etc.

01:51: We will go into more details about what these two sets of tokens are for.

01:56: In the center Stage is the preview area that provides a real-time preview of all style configurations done on the global and component level styles.

02:05: To help with the preview a typical page is chosen with components like left nav menu button data table, etc. This demo page gives a fair idea of what your page would look like with your modifications.

02:19: Just below the Panel Tabs is the Token Groups, tab area.

02:22: There are 4 token groups for each Global and Component tokens. And they are Color, size, Text, and Style.

02:30: Let us go one by one.

02:32: You must be familiar with design systems in design systems. We have Colors defined as primary secondary tertiary, etc.

02:40: In wave makers color token groups for global tokens. We have 10 Colors defined in tokens and under each of these tokens are also a couple of derived tokens defined.

02:52: A user can choose the defined color or any of the derived tokens or even edit one of these tokens to choose their own colors.

03:00: Let us see how to edit a token. We go to any of the tokens, like primary, secondary etc. or we can also choose any of the derived token.

03:09: Once decided click on the value.

03:12: Since this is a color token I see a color picker. I can give my own hex code, or choose any color from the color picker or preset colors.

03:21: I am choosing a color from the preset color of the color picker. Click outside to accept the color.

03:27: What we get to see here is that, the primary color got changed to the teal color I chose.

03:33: And the orange button on the preview area got changed to this new primary color.

03:37: And the derived color tokens under primary color got changed to different hues derived from the primary color.

03:43: "Before saving the change, you can preview it.

03:46: As shown here, the fixed token Primary in the Colors token group is now assigned this new color.

03:52: You can now save this change.

03:54: Once saved, this defined color will be applied wherever the primary class is used across the application.

04:01: Now let us move on to the next token group called size.

04:05: We see by default the spacing tokens are selected.

04:08: There is a base token and bunch of derived tokens.

04:12: The derived tokens and named as numbers from 0 to 12 and each has a sending order of values in pixel unit.

04:18: Let us see what other tokens are contained in this token group.

04:22: So, there are two others, Icons and Border

04:37: We edit the icon size by sliding the provided slider.

04:43: Notice the icons at the right side of the header and the plus icon of the primary button.

04:49: On setting the slider to 52px for the base size, the icons grew bigger to that size. And also worth noting are the derived tokens, they also adjusted proportionally to the base size.

05:01: Now let's go to the border size tokens. These also have a base size slider. And couple of derived sizes.

05:08: As we slide the slider, keep your eyes on the preview Area.

05:15: The vertical line separating the left navigation from the rest of the page, and also the lines under the rows of the table are changing based on the value set by the slider.

05:26: The derived token values have also changed accordingly

05:29: Now let us move to the next token group, Text.

05:32: The first token is font-weight, and as expected it has the various numbers as token, like the lower numbers like 100, 200 for lighter font weight, 400, 500 for medium font weight and so on.

05:45: Now let's look at all the other tokens provided in the Text Group. The top to are related to font. Font-weight and Font-Family.

05:53: The next three are for Body text styling. And they are named as Body.large, body.medium and body.small.

06:00: The next 6 are for Heading text. From H1 to H6.

06:05: The next one is for Paragraph text.

06:08: This one is for various sized labels like, large, medium, and small.

06:12: And at last we have something called Display.

06:15: These three sized display texts tokens are to be used for very large size text that are often seen in banners or poster

06:23: Let's see how we configure font family.

06:27: There are three options that we can set. Brand, this is where we define the main Font-family, the other two are plain, and back-up.

06:35: We get five derived tokens to set up the three sizes of body text. The three sizes are categorized as large medium and small.

06:44: And the set of derived tokens provided in each category are font family font weight font size line height letter spacing.

06:53: Similarly for all other text token categories like paragraph the six types of headings labels and display text we get the same set of five derived tokens.

07:04: The values of these derived tokens are set according to the usage mostly the font size is the defining token.

07:13: Now let us explore the style token group here properties like shadow radius of curvature of corner of rectangular components opacity on colors in various. States and border styles are configured.

07:25: By default the selected property is border radius.

07:29: Adjusting the bass border radius is with the help of a slider.

07:33: And there are various sized names created for various sizes presented as derived token.

07:39: After border-radius is elevation.

07:42: In elevation there are certain border-shadow provions to address the 3 dimensional aspect of a rectangular area.

07:48: The options are None, and five variations of shadows.

07:52: Opacity decides the opacity of the color in various states like, active, hover, and focus.

07:58: and last of all is border Style

08:00: these are around 10 possible values for CSS border style like solid hidden dotted and none.

08:07: This desires if an area or components has border then what should be the style of the border.

08:14: So that was all about Global token groups.

08:17: Now it's time to move on to the next token group. That is component token groups.

08:21: Component Tokens group is about the styling of 50 plus tokens, available in the WaveMaker Library of components.

08:28: To name a few, are, Buttons, anchors, containers, Data tables, Lists, Cards and so on.

08:37: In this section we shall pick three components to explore the styling options

08:42: We accessed this Token group by selecting the Components tab

08:46: On the left hand side we see the entire list of Components, more than 50 of them.

08:51: At the center of the UI is the preview of the selected component

08:55: At the right of the workspace is the Properties panel.

08:58: Where we start of by selecting a variant and it's state.

09:27: Next let us check on Accordion. This also has four variants but only one appearance, that is, defau.

09:39: After accordion, let's move to breadcrumb this provides a trail of navigation.

09:45: Breadcrumbs have three variants and three types. It's variants are classic attribute-based and path-based and the three types are arrow classic one and Classic 2.

09:58: next let us check out a very important data component called data table

10:03: This is wave makers, tabular grid display.

10:06: This has four appearances default condensed striped even and striped odd.

10:12: And each of this appearances are provided with one variant called standard.

10:20: Ok, one last component that we are checking out is Panel.

10:25: This is a display frame with a title, content section and a footer.

10:29: This has four variants of only one appearance, called default.

10:34: The 4 variants are, default, Primary, Secondary, and tertiary.

10:38: let us go back to buttons and get the experience of exploring the variants and how to edit them.

10:44: After selecting buttons in the component list in the left we shift our focus to the right of the screen. And expand the Variant dropdown.

10:53: we see a grouped list of appearance and their variants.

10:56: You can see their are four appearances, namely, Filled, Outlined, Text, and Transparent.

11:03: Each of these have four variants each except transparent which has only one called standard. Let us select any one variant.

11:10: I am selecting default variant of Filled appearance.

11:14: The preview of only that variant shows up in the preview area along with the Appearance name and Variant name

11:20: Based on the selected variant all the associated tokens. Key value is shown up.

11:25: In this case, there is a select drop-down for state that is default hover Focus active and disabled.

11:33: Whenever we select a state the respective tokens key value pairs shown.

11:38: The tokens are in four groups color size text and style.

11:43: In color, tokens like background color text and icon color border color is seen.

11:50: In size tokens we see Gap sizes that is sized between icon and text button height icon size min-width and padding in text tokens font family font size font weight line height and let a space in a provided.

12:07: And under style tokens border style border with cursor radius shadow opacity for states and text transform a listed.

12:17: Let's try to edit an existing variant. I am selecting the filled default variant. It shows me tokens available for edit.

12:24: I can select one of the state of the Variant, that I want to edit. I am choosing default here.

12:28: Let me choose a couple of tokens and show how they can be modified.

12:32: At first, I am trying to choose a background color for the button.

12:36: I selected the error color from Global color tokens.

12:40: Choosing a border color for the button from the color picker.

12:50: I am choosing a color for the label of the bu

12:53: In the style group of tokens, I am setting the border size to 2 pixels

13:00: And when I am done with all the changes, it is time to save the variant changes.

13:05: And so, now, the filled default variant has this new look and feel.

13:11: And in my application whenever I choose to use this Button variant, it will look like this everytime

13:16: Sometimes, we might find ourselves in a situation where we want a component styled in such a way that it is not possible with the all the tokens provided for that component.

13:26: In such cases we have the option to design our own variant.

13:30: For that we use the Add Variant feature provided in the Style workspace.

13:35: Name your variant in the field provided

13:39: Choose the variant to base your custom variant on.

13:41: Your custom variable gets created. And it's now ready to be modified and designed

13:46: Select the state for which you are doing the modifications

13:49: Let's start modifying the token values. To start with I am modifying the value of the Background color token.

13:56: Changing border color.

13:58: triggering the color pick

14:00: locking on the color.

14:02: And now lets save the modifications to our custom button variant, that we named "My Custom Button".

14:11: So now, in the variant select dropdown we can see the newly created variant as an option

14:17: and also when we choose the modified variant, that is the, "filled default", button variant, the preview reflects the new variants look and feel

14:26: Ok, so let's explore what are the posibilities with a data table.

14:30: We will create a variant to experience the designing.

14:36: Naming my Data table variant, Compact Table.

14:42: Let's choose a base Variant.

14:43: Selecting Condensed standard as the foundation.

14:46: Compact Table variant created successfully.

14:49: Selecting a cell border color from the available tokens.

14:53: I want the even rows to be shaded, so selecting row background even color.

14:59: Selecting a more prominent header border color.

15:05: I want my rows to be a bit more spacious than the condense table.

15:08: So increasing the cell padding.

15:10: Let's save the changes to our custom table variant called Compact table.

15:14: Now if we expand the Variant selector we see our new custom Data Table variant, called Compact tab

15:21: The base variant looked like this.

15:23: We chose this variant because we wanted a condensed table but not to condensed.

15:28: So this new custom variant is bit more spacious than the condensed table but not too spacious as the default standard table.

15:35: Before we end this video on style workspace one last component, Panel.

15:40: This is a framing UI component, with a heading title a subheading, A content area, and a footer.

15:47: Let's see what variants and tokens are available for design.

15:50: let's start with creating a new Variant.

15:53: Naming my custom Panel variant

15:57: Selecting a base variant.

16:05: New variant is created.

16:07: Now let's proceed to token modification.

16:10: Want to change the header background color to a light teal color.

16:14: Choosing an existing token value.

16:16: And the new color is showing up instead of the previous Mauve color

16:20: Wanted a bolder heading title, hence choosing the Error color to

16:24: The heading font-size is too big, choosing a smaller font-size token

16:33: I wanted the footer and content seperator line to be dashed. So changing the border style of footer to dashed. And now at last I'll save these modifications.