[Dúvida] Nomenclatura Design Tokens

Gostaria de tirar uma dúvida relacionada à nomenclatura dos design tokens: na aula 5 "Elaborando Design Tokens" do curso "Design System: definindo estilos e tokens" é mencionado o excel gerador dos nomes dos tokens, porém o professor não menciona o que seria o "Level 2 Component", no caso o "component" seriam os componentes como botão, input de texto, barra de progresso, e assim por diante?

Também não é mencionado o que é o "Leve 4 State", pra esse seria por exemplo os estados de um componente? Tipo "default", "hover", "pressed", e assim por diante? Insira aqui a descrição dessa imagem para ajudar na acessibilidade Em uma aplicação prática, pensei em gerar um token para a cor de background de um botão primário, o resultado gerado foi esse abaixo. Está correto?

Olá, João, como vai?

O Level 2: Component refere-se, sim, ao nome do componente da interface para o qual o token será usado — como botão, input de texto, etc. Isso ajuda a identificar de forma rápida a que parte da interface o token pertence.

Já o Level 4: State indica o estado do componente. Por exemplo, para um botão, você pode ter estados como:

default (estado normal)
hover (quando o mouse passa por cima)
pressed (quando está pressionado)
disabled (quando está desativado)

Portanto, sim, o token que você gerou para a cor de fundo de um botão primário no estado default (ci-button-color-background-primary-default-100) está correto e segue a estrutura apresentada.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado