styles

README.md

@@ -1,5 +1,10 @@
 # Time Zone Converter
 
-## Resources
+> A simple date and time converted.
 
-- [YUI 3.18.1 Documentation](http://yssl.org/lib/yui/docs/)
+## Stack
+
+- [YUI 3.18.1](https://github.com/yui/yui3) ([Working Documentation](http://yssl.org/lib/yui/docs/))
+- [Day.js](https://day.js.org/) & [tzdb](https://github.com/vvo/tzdb)
+- [Feather Icons](https://feathericons.com/)
+- [Vite](https://vitejs.dev/)

index.html

@@ -58,6 +58,7 @@ <h1 class="u-visually-hidden">Time Zones</h1>
               list="timezone-data"
               type="text"
               id="tz-name"
+              required
               placeholder="Add a new timezone..."
               autocomplete="off"
             />

src/css/components/button.css

@@ -5,13 +5,19 @@
   transition: background-color 200ms ease-out;
   border: 0;
   border-radius: var(--size-border-radius-s);
+  outline: 0;
   background-color: var(--color-background-action);
   color: var(--color-text-action);
   font-weight: var(--font-weight-semibold);
   cursor: pointer;
   gap: var(--s-1);
 }
 
+.c-button:focus-visible:focus {
+  outline: 2px solid var(--color-background-action);
+  outline-offset: 2px;
+}
+
 .c-button:where(:hover, :focus) {
   background-color: var(--color-background-action-active);
 }

src/css/components/field.css

@@ -12,15 +12,31 @@
   row-gap: var(--s-1);
 }
 
+.c-field::after,
 .c-field::before {
   content: '';
   display: block;
   grid-area: input;
+  border-radius: var(--size-border-radius-s);
+  pointer-events: none;
+}
+
+.c-field::before {
   padding: var(--s-1) var(--s-2);
   border-radius: var(--size-border-radius-s);
   opacity: 0.1;
   background-color: currentColor;
-  pointer-events: none;
+}
+
+.c-field::after {
+  transition: opacity 100ms ease-out;
+  border: 2px solid currentColor;
+  opacity: 0;
+}
+
+.c-field:focus-within::after {
+  border: 2px solid currentColor;
+  opacity: 0.5;
 }
 
 .c-field__input {
@@ -29,6 +45,7 @@
   min-width: 0;
   padding: var(--s-1) var(--s-2);
   border: 0;
+  outline: 0;
   background-color: transparent;
   color: inherit;
   font-family: inherit;

src/css/main.css

@@ -20,4 +20,5 @@ html {
 
 body {
   min-height: 100%;
+  background-color: var(--color-background-canvas);
 }

src/css/tokens.css

@@ -2,6 +2,7 @@
   /* Palette */
   --color-white: 0, 0%, 100%;
   --color-gray-800: 0, 0%, 22%;
+  --color-gray-50: 0, 0%, 96%;
   --color-blue-700: 220, 49%, 35%;
   --color-blue-600: 205, 64%, 43%;
   --color-blue-500: 202, 50%, 47%;
@@ -10,7 +11,7 @@
   --color-yellow-300: 43, 90%, 72%;
 
   /* UI colors */
-  --color-background-canvas: hsl(var(--color-white));
+  --color-background-canvas: hsl(var(--color-gray-50));
   --color-background-primary: hsl(var(--color-gray-800));
   --color-background-action: hsl(var(--color-yellow-400));
   --color-background-action-active: hsl(var(--color-yellow-300));