Codigo da Live: CRUD com Qualidade implementando o CSS

GlobalStyles.tsx

// Onde aprender base de CSS? https://www.youtube.com/watch?v=alqWVx0p3U0
const basePadding = "5%";
// Como dar bons nomes de classes no CSS?
// https://www.alura.com.br/artigos/criando-componentes-css-com-padrao-bem
// E o tailwind? É só traduzir o CSS para Tailwind: https://tailwindcss.com/

// Referências para tamanhos de Breakpoints: https://tailwindcss.com/docs/screens
const breakpoint = "850px";


export function GlobalStylesLive() {
  return (
    // https://nextjs.org/blog/styling-next-with-styled-jsx
    <style jsx global>{`
      /*  Reset Geral */
      :root {
        /* Desafio Da LIVE:
        - Criar um Objeto com o seu tema respeitando as cores
          - neutral
          - primary
          - negative
        - Estudar:
          - Métodos de Objeto como: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
          - Estudar forEach e Map: https://www.youtube.com/watch?v=JbzcLKiTThk
            - Procura na MDN
        */
        --color-basic-light: #FFFFFF;
        --color-basic-dark: #000;
        --color-basic-transparent: transparent;

        --color-neutral-x050: #F5F7FA;
        --color-neutral-x100: #E4E7EB;
        --color-neutral-x200: #CBD2D9;
        --color-neutral-x300: #9AA5B1;
        --color-neutral-x400: #7B8794;
        --color-neutral-x500: #616E7C;
        --color-neutral-x600: #52606D;
        --color-neutral-x700: #3E4C59;
        --color-neutral-x800: #323F4B;
        --color-neutral-x900: #1F2933;

        --color-primary-x050: #FFE8D9;
        --color-primary-x100: #FFD0B5;
        --color-primary-x200: #FFB088;
        --color-primary-x300: #FF9466;
        --color-primary-x400: #F9703E;
        --color-primary-x500: #F35627;
        --color-primary-x600: #DE3A11;
        --color-primary-x700: #C52707;
        --color-primary-x800: #AD1D07;
        --color-primary-x900: #841003;

        --color-negative-x050: #FFE3E3;
        --color-negative-x100: #FFBDBD;
        --color-negative-x200: #FF9B9B;
        --color-negative-x300: #F86A6A;
        --color-negative-x400: #EF4E4E;
        --color-negative-x500: #E12D39;
        --color-negative-x600: #CF1124;
        --color-negative-x700: #AB091E;
        --color-negative-x800: #8A041A;
        --color-negative-x900: #610316;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
          font-family: ui-sans-serif, system-ui, -apple-system,
            BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
            Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
            Segoe UI Symbol, Noto Color Emoji;
      }

      /*  Reset de Elementos */
      // == [Table Reset]
      table {
        width: 100%;
        border: 0;
        border: none;
        border-collapse: collapse;
        border-spacing: 0;
      }
      table td,
      table th {
        border: none;
      }
      // ./[Table Reset]
      button {
        border: none;
        cursor: pointer;
        outline: none;
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
        --outline: currentColor;
      }
      input {
        --outline: currentColor;
      }
      input[type="text"]:focus-visible,
      button:focus-visible {
        outline-offset: 2px;
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
        outline: 2px solid var(--outline);
      }
      button:disabled {
        cursor: not-allowed;
      }
      input[type="checkbox"] {
        accent-color: var(--color-primary-x500);
        border-radius: 4px;
        --outline: var(--color-primary-x500);
      }
      input[type="checkbox"]:focus-visible {
        outline-offset: 2px;
        outline: 2px solid var(--outline);
      }

      /* Reset do Height 100% */
      html {
        min-height: 100%;
        display: flex;
        flex-direction: column;
      }

      #__next,
      main,
      body {
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      /* Mobile First, onde os estilos customizados vem nos media queries */
      /* Desktop */
      @media(min-width: ${breakpoint}) {
        main {
          flex-direction: row;
        }
        /* Header que for filho direto de main */
        main > header,
        main > section {
          flex: 1;
          /* TODO: Forte candidato a sair fora */
          padding-left: 5%;
          padding-right: 5%;
        }

        /* Cascading StyleSheets */
        /* Como usamos o mesmo seletor, só irá ter uma sobrescrita */
        main > header {
          flex: 0.7;
        }

        main > section {
          overflow-y: auto;
        }
      }

      // [Header Area]
      header {
        min-height: 250px;
        /* TODO: Voltar aqui até o final da live */
        color: var(--color-neutral-x050);
        background-color: var(--color-primary-x500);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: luminosity;
        position: relative;
        padding-left: ${basePadding};
        padding-right: ${basePadding};
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      /* Backdrop Overlay  */
      header:before {
        content: "";
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      header > * {
        z-index: 2;
        position: relative;
      }

      header h1 {
        max-width: 600px;
        /* Mobile font Menor */
        font-size: 24px;
      }
      @media (min-width: ${breakpoint}) {
        header h1 {
          /* Desktop font maior */
          font-size: 36px;
        }
      }

      /* Header > Form */
      header > form {
          position: relative;
          font-size: 18px;
          max-width: 320px;
          width: 100%;
          margin-top: 16px;
          display: flex;
          align-items: stretch;
          box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
            rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
            rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
      }
      header > form input {
        --outline: var(--color-neutral-x100);
        border-radius: 8px;
        font-size: inherit;
        flex: 1;
        border: 0;
        padding: 12px 24px;
        padding-right: calc(48px + 16px);
      }

      header > form button {
        --outline: var(--color-primary-x500);
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        cursor: pointer;
        /* Vale estudar */
        aspect-ratio: 1;
        border: none;
        padding: 0;
        font-size: 30px;
        transform: scale(0.8);
        transition: all 0.2s;
        background-color: var(--color-primary-x500);
        color: var(--color-neutral-x050);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      header > form button:hover,
      header > form button:focus {
          background-color: var(--color-primary-x600);
      }

      // [Content Area]
      section {
          flex: 1;
          background-color: var(--color-neutral-x100);
          padding-top: 50px;
          padding-bottom: 50px;
          padding-left: ${basePadding};
          padding-right: ${basePadding};
      }
      section form {
          --iconSize: 24px;
          margin: 0 auto;
          max-width: 600px;
          position: relative;
          font-size: 18px;
      }
      section form::before {
        content: "🔎";
        width: var(--iconSize);
        height: var(--iconSize);
        position: absolute;
        top: -4px;
        left: 16px;
        bottom: 0;
        margin: auto;
        font-size: inherit;
      }
      section form input {
        display: flex;
        font-size: inherit;
        border: 0;
        border-radius: 8px;
        padding: 16px 32px;
        padding-left: calc(16px + 2px + var(--iconSize));
        width: 100%;
        box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
          rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
          rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
          rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
      }

      table {
          font-size: 16px;
          border-radius: 8px;
          overflow: hidden;
          margin: 0 auto;
          max-width: 600px;
          margin-top: 16px;
          box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
            rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
            rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
        }
        thead {
          background-color: var(--color-neutral-x050);
        }
        thead th {
          font-weight: bold;
          color: var(--color-neutral-x900);
          font-weight: 600;
          padding: 10px;
        }
        tbody {
          background-color: var(--color-basic-light);
        }
        tbody td {
          padding: 10px;
        }
        button,
        a {
          transition: all 0.2s;
        }
        a:focus,
        a:hover {
          opacity: 0.6;
        }

        button[data-type] {
          border: 0;
          border-radius: 8px;
          padding: 8px 12px;
        }
        button[data-type="delete"] {
          background-color: transparent;
          color: var(--color-negative-x500);
        }
        button[data-type="delete"]:hover,
        button[data-type="delete"]:focus {
          background-color: var(--color-negative-x050);
        }
        button[data-type="load-more"] {
          font-weight: bold;
          color: var(--color-primary-x500);
          background-color: var(--color-primary-x050);
        }
        button[data-type="load-more"]:hover,
        button[data-type="load-more"]:focus {
          background-color: var(--color-primary-x100);
        }

        // [Common Stuff]
        .typewriter h1 {
          display: inline-block;
          overflow: hidden; /* Ensures the content is not revealed until the animation */
          border-right: 0.15em solid var(--color-primary-x100); /* The typwriter cursor */
          white-space: nowrap; /* Keeps the content on a single line */
          margin: 0 auto; /* Gives that scrolling effect as the typing happens */
          letter-spacing: 0.05em; /* Adjust as needed */
          animation: typing 3s steps(40, end),
            blink-caret 0.75s step-end infinite;
        }
        /* The typing effect */
        @keyframes typing {
          from {
            width: 0;
          }
          to {
            width: 100%;
          }
        }
        /* The typewriter cursor effect */
        @keyframes blink-caret {
          from,
          to {
            border-color: transparent;
          }
          50% {
            border-color: var(--color-primary-x100);
          }
        }
    `}</style>
  )
}