Metaverses will free us from the Tyranny of Reality

Creating and Styling Variants

Time to create some variants for the other states and style them. With the primary variant in place, we’ll now create additional variants that respond to user interactions. Let’s begin by creating a second variant and renaming it “Focus.” In this state, move the placeholder text back up and reduce its size to 12px. Before moving on with the styling, create two additional variants named “Blur” and “Invalid,” which will share the same layout as the Focus state. To ensure smooth transitions, you’ll  add a border to the input of the primary variant, setting it to 2px width with a color opacity of 0%. Then, customize the “Focus” variant by changing the border color to blue, and for the “Invalid” variant, we can change both the border and text color to red to draw attention.