00:00 All right, I'm going back to the split layout with the code and the UI for this one. And so right now, if I hover the link, nothing is happening. We don't have any hover styles. And if I focus, we have the default. Mine is pink in the OS settings, focus styles. And so we want to change this to look like the Figma design.

00:16 So it looks like the text remains black on hover, but the underline is going away. So we want to go no underline on hover. This is going to be the hover styles. That's pretty simple. So I'll scroll down to the paragraph tag, the anchor tag, sorry, here. And so we have text black underline.

00:36 And on hover, we're going to go no underline. Simple as that. Now, when I hover it, the link underline goes away. Nice. And now for the focus style, there's a little bit more work here. The first thing I want to do is undo the default focus outline. But when you do this, make sure, sure, sure that you replace it with something

00:56 visually noticeable, because this is very important for keyboard navigation, accessibility, etc. So here on focus, I will go outline none. And let me reiterate, do not do just that. Because now this thing, believe it or not, is in focus.

01:14 Now we add the styles, styles 3, 2, 1, and then I go back. This element is in focus, but we can't see anything because we've undone the browser default outline. So always make sure that you replace it with something. In our case, we're going to replace it with a two pixel border of the highlight color.

01:32 And when I say border, Figma says border. But we're not going to add an actual border here, because this would actually consume some vertical and horizontal space in the box model and make our paragraph jump a little bit on focus. Matter of fact, let me show you. I will go focus border 2.

01:49 And now when I focus, you can see the text jumping like this, because the border occupies space in the elements layout. So instead, we want to use an outline or a ring utility. The difference being ring utilities use box shadows, and they were created before the

02:08 outlines were able to follow rounded edges in all browsers. So technically, you can use almost interchangeably outline and ring. Here we're going to use ring mostly because of muscle memory and habits. So we're going to have a two pixel ring of the highlight color.

02:24 There is no rounded corners and it is snug on the outside outer alignment of the element. So I'll delete the focus border 2. And instead, we're going to have ring. That alone is going to give a three pixel light blue ring by default. But we can change the color and the size.

02:44 So for the size, I can change ring to ring 2 instead of the default 3. And I can go focus ring highlight for the color. And with that, we now have our beautiful focus styles that are matching precisely the Figma design and we are done.