# Sistema de design Workday Canvas ## Prévia da interface do sistema de design Workday Canvas Filtre os títulos dos cursos, adicione cada curso uma única vez, remova seleções e compare o tempo total atualizado. ## Referência de design do sistema de design Workday Canvas Código-fonte atual do Canvas Kit e sys.json de tokens do Canvas. Os nomes JSON brutos abaixo são caminhos do código-fonte, não nomes inventados de variáveis CSS geradas. Valores que são aliases de tokens base são apresentados como aliases; a referência de migração datada é identificada explicitamente como histórica. ### Semântica atual de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | sys.padding.xs | {base.size.100} | Função de preenchimento horizontal do campo de entrada. | | sys.padding.md | {base.size.200} | Preenchimento padrão do componente. | | sys.padding.xl | {base.size.300} | Preenchimento do cartão. | | sys.gap.sm | {base.size.100} | Espaçamento compacto entre elementos adjacentes. | | sys.gap.md | {base.size.200} | Espaçamento padrão entre elementos em linha. | | sys.gap.xl | {base.size.400} | Espaçamento interno do cartão. | | sys.gap.xxl | {base.size.800} | Espaçamento entre seções. | ### Tipografia e formato atuais | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | sys.type.body.sm | font-size body.sm + line-height body.sm + normal weight | Função composta de texto do corpo. | | sys.font-size.body.sm | {base.size.200} | Alias do tamanho base do texto do corpo. | | sys.line-height.body.sm | {base.size.300} | Alias da entrelinha do texto do corpo. | | sys.font-weight.normal | {base.font-weight.400} | Nome atual para o estilo normal, não regular. | | sys.shape.sm | {base.size.50} | Arredondamento pequeno. | | sys.shape.md | {base.size.100} | Arredondamento do campo de entrada. | | sys.shape.full | {base.size.75} × 100 | Arredondamento total. | ### Composição de FormField | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | FormField.Label | Connected label element | Relação gerada com o campo de entrada. | | FormField.Input as={TextInput} | Polymorphic input slot | Não é a antiga propriedade API label. | | FormField.Hint | Linked helper content | Descreva o campo de entrada esperado. | | orientation | vertical / horizontalStart / horizontalEnd | Use os valores atuais de alinhamento. | | FormField.Field | Input and hint alignment wrapper | Útil em layouts horizontais. | ### Implementação de TextInput | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | grow | 100% width when true | Expansão responsiva do campo de entrada. | | width | number or string | Substituição opcional. | | minimum width fallback | px2rem(280) | Verifique layouts de contêineres estreitos. | | error | error / caution styling | A aplicação fornece a validação. | | transition | 0.2s box-shadow, 0.2s border-color | Transição da fonte atual. | | font size role | system.legacy.fontSize.subtext.lg | Não substitua os componentes internos por um tipo de título sem relação. | ### Implementação de PrimaryButton | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Background | brand.action.base, with legacy accent fallback | Identidade visual do tenant. | | Hover | brand.action.dark or colorSpace.hover | O estado deriva da cor da ação. | | Pressed | brand.action.darkest or colorSpace.pressed | Estilo pressionado distinto. | | variant="inverse" | Inverse surface and foreground roles | Para um contexto de contraste adequado. | | Border radius | system.legacy.shape.full | A fonte atual ainda mantém compatibilidade com versões anteriores. | ### Referência de migração, não nomes atuais de tokens | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Former space.s → system.space.x4 | 1rem in 2023 migration table | A fonte atual separa padding e gap. | | Former space.m → system.space.x6 | 1.5rem in 2023 migration table | Não presuma que os nomes antigos continuem sendo os preferidos. | | Former borderRadius.m → system.shape.x1 | 0.25rem in 2023 migration table | A fonte atual usa tamanhos semânticos de forma. | ## Workday Canvas Guia completo do sistema de design Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Workday Canvas: consulte a fonte atual antes de copiar um exemplo de migração ### O espaçamento agora distingue finalidades > O Canvas evoluiu das constantes de espaço no estilo de tamanhos de camiseta em canvas-kit-react/tokens para os tokens numerados system.space e, depois, para categorias da fonte, como padding e gap. O sys.json atual expressa os valores subjacentes como referências a tokens base. Esta referência preserva os caminhos reais, em vez de inventar uma variável CSS pela concatenação de palavras. A tabela de migração continua sendo útil para converter uma aplicação antiga: ela explica por que space.s correspondia a um rem. É um registro histórico, não uma garantia de que toda exportação antiga seja a interface atual preferencial. A prévia usa intervalos de aplicação escolhidos explicitamente, de 16 e 24px; a tabela da fonte continua sendo a referência oficial para os nomes dos tokens da biblioteca. Consulte a especificação de apoio ## Sistema de design Workday Canvas: as cores pertencem ao tenant e ao estado do componente ### Um botão primário é mais do que uma amostra fixa de azul PrimaryButton primeiro consulta brand.action.base e, se não estiver disponível, usa o destaque primário legado. Os estilos de hover e pressionado também consultam as funções de ação da marca antes de derivar os estados com os auxiliares colorSpace. Por isso, alterar apenas uma cor de fundo fixa não reproduz o contrato de tema do componente. A prévia de aprendizagem original usa uma paleta de aplicação azul e discreta e se identifica como uma interpretação HTML. Ela não representa a renderização de um tenant específico de cliente nem o tema mais recente do Sana Canvas. O exemplo nativo completo permite que as camadas de tokens instaladas forneçam as cores dos componentes. Consulte a especificação de apoio ## Sistema de design Workday Canvas: estilos compostos preservam a altura da linha e o peso ### Um alias de tamanho não define o estilo inteiro O objeto de tipografia body.sm atual combina família tipográfica, peso normal, tamanho de texto de corpo e entrelinha do corpo. Os estilos de título usam o peso negrito. Escolher apenas um tamanho em pixels de uma captura de tela antiga eliminaria essas relações. A fonte usa normal, em vez da chave regular que aparece em textos de migração mais antigos. As fontes não estão incluídas no pacote de componentes do Canvas Kit. Mantenha o carregamento de fontes como uma decisão de integração separada; o exemplo offline usa uma fonte substituta do sistema e não afirma incluir Roboto nem uma fonte do Sana. Consulte a especificação de apoio ## Sistema de design Workday Canvas: FormField é um componente composto ### Deixe o campo compor o rótulo, a entrada e a dica A fonte disponibiliza FormField.Label, FormField.Input e FormField.Hint. Passar TextInput pela propriedade as de Input permite que o modelo gere as associações de acessibilidade. Isso difere dos exemplos antigos, que definiam uma propriedade label no campo externo e colocavam uma entrada sem encapsulamento diretamente dentro dele. Em formulários horizontais, horizontalStart e horizontalEnd são os valores atuais de orientação. FormField.Field agrupa a entrada e a dica dentro desse alinhamento. Nosso filtro permanece vertical porque sua explicação deve ficar logo abaixo do rótulo e do controle. - Coloque um rótulo visível em FormField.Label. - Passe TextInput pelo slot composto Input. - Use Hint para delimitar o escopo do filtro. - Ao introduzir restrições, mantenha a lógica de validação na aplicação. Consulte a especificação de apoio ## Sistema de design Workday Canvas: um campo de entrada expansível ainda precisa de um contêiner flexível ### Considere a largura mínima TextInput tem uma largura mínima substituta de 280px, expressa por meio de px2rem na fonte. grow solicita largura total; isso não faz com que um contêiner rígido de duas colunas se ajuste magicamente a uma janela de visualização estreita. O catálogo offline empilha a barra lateral do plano abaixo dos cartões de cursos em dispositivos móveis e permite que cada coluna do layout encolha. O valor da busca é um estado React comum. A aplicação faz uma correspondência de substring sem diferenciar maiúsculas de minúsculas nos títulos dos três cursos e exibe explicitamente quando não há resultados. O filtro não limpa os cursos selecionados, pois visibilidade e inclusão no plano são estados diferentes. Consulte a especificação de apoio ## Sistema de design Workday Canvas: a seleção persiste independentemente dos resultados visíveis ### Use IDs estáveis para os cursos e derive os totais Cada curso original tem um ID, um título e uma duração. A lista de seleção armazena IDs, enquanto o total exibido é derivado dos registros dos cursos. Filtrar o catálogo não remove um item selecionado. Remover um item restaura imediatamente a ação Adicionar e reduz o total. Este é um cenário original de planejamento local. Ele não chama APIs do Workday, não matricula um funcionário nem modifica um registro de aprendizagem. Deixar esse limite explícito evita que um protótipo sugira uma transação comercial real. 1. Filtre apenas a visualização do catálogo. 2. Adicione cada ID de curso apenas uma vez. 3. Derive os cursos selecionados e o total de minutos a partir desses IDs. 4. Remova uma seleção sem redefinir a busca. Consulte a especificação de apoio ## Sistema de design Workday Canvas: carregue os tokens antes de esperar que os componentes tenham um tema ### Provider e camadas CSS têm responsabilidades diferentes O exemplo atual de introdução importa os estilos de variáveis base, de marca, de componentes e do sistema no ponto de entrada da aplicação e, em seguida, envolve a interface com CanvasProvider. Um provider não substitui essas definições CSS. O código aqui segue essa composição e fornece uma raiz React completa. Sana Canvas é opcional: suas variáveis são carregadas após as variáveis do sistema, e o atributo documentado html data-theme seleciona esse tema. Aplicações incorporadas que não podem controlar a raiz do documento contam com uma opção de tema dedicada no provider para propagar o tema aos pop-ups. Não adicione esse tema por engano a um tenant existente ao atualizar pacotes. Consulte a especificação de apoio ## Workday Canvas Exemplos de componentes do sistema de design ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação HTML original e offline dos padrões de interação do Canvas e de uma hierarquia corporativa discreta. A paleta e o layout são escolhas da aplicação, não a renderização de um tenant do Sana. ``` Canvas learning plan interpretation
Learning workspacePersonal development · Local plan

Make room to grow

Choose a few focused lessons for your learning plan.

Search filters the catalog; your selected courses stay in the plan.

Independent HTML interpretation of Canvas composition patterns. Original palette, course illustrations and content; no Workday account or enrollment service is connected.

``` Referência de código - Adicionar um curso altera o plano de aprendizagem de exemplo. A entrada nativa demonstra separadamente CanvasProvider e o FormField composto API; nenhuma matrícula é enviada. ### Campo composto e itens de aprendizagem selecionáveis FormField gera a associação da entrada, TextInput filtra os dados originais dos cursos, e cada PrimaryButton adiciona um item uma única vez. A remoção recalcula o total selecionado. ``` // In a React 18+ application with a bundler: // npm install @workday/canvas-kit-react @workday/canvas-tokens-web @workday/canvas-kit-styling @emotion/react @emotion/styled import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {FormField} from '@workday/canvas-kit-react/form-field'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {system} from '@workday/canvas-tokens-web'; import {cssVar} from '@workday/canvas-kit-styling'; import '@workday/canvas-tokens-web/css/base/_variables.css'; import '@workday/canvas-tokens-web/css/brand/_variables.css'; import '@workday/canvas-tokens-web/css/component/_variables.css'; import '@workday/canvas-tokens-web/css/system/_variables.css'; // Default theme example; do not silently add a Sana theme to an existing tenant. const courses=[{id:'feedback',name:'Giving useful feedback',minutes:25},{id:'planning',name:'Planning a focused week',minutes:20},{id:'meetings',name:'Running inclusive meetings',minutes:30}]; function LearningPlan(){ const [query,setQuery]=useState(''),[chosen,setChosen]=useState([]); const visible=courses.filter(c=>c.name.toLowerCase().includes(query.toLowerCase())); const selected=courses.filter(c=>chosen.includes(c.id)); return

Build a learning plan

Find a course setQuery(e.target.value)}/> Filter the three example course titles. {!visible.length&&

No matching courses.

}

Your local plan

{selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes

No enrollment is submitted.

; } createRoot(document.getElementById('root')).render(); ``` Referência de código - PrimaryButton pertence a cada item de curso independente; o plano inteiro não tem uma ação de matrícula enganosa. - Remover usa um botão nativo explicitamente controlado pela aplicação. - O estado Adicionado desativado evita duplicações, enquanto uma contagem dinâmica confirma a alteração. ## Sistema de design Workday Canvas Configuração do agente de IA ### Ponto de partida para implementação Composição React completa para uma aplicação empacotada. Configuração atual de CanvasProvider e das camadas de tokens CSS; dados originais dos cursos e controles nativos de remoção. Sem matrícula remota. Fonte verificada, mas o pacote não foi compilado neste ambiente de trabalho. ``` // In a React 18+ application with a bundler: // npm install @workday/canvas-kit-react @workday/canvas-tokens-web @workday/canvas-kit-styling @emotion/react @emotion/styled import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {FormField} from '@workday/canvas-kit-react/form-field'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {system} from '@workday/canvas-tokens-web'; import {cssVar} from '@workday/canvas-kit-styling'; import '@workday/canvas-tokens-web/css/base/_variables.css'; import '@workday/canvas-tokens-web/css/brand/_variables.css'; import '@workday/canvas-tokens-web/css/component/_variables.css'; import '@workday/canvas-tokens-web/css/system/_variables.css'; // Default theme example; do not silently add a Sana theme to an existing tenant. const courses=[{id:'feedback',name:'Giving useful feedback',minutes:25},{id:'planning',name:'Planning a focused week',minutes:20},{id:'meetings',name:'Running inclusive meetings',minutes:30}]; function LearningPlan(){ const [query,setQuery]=useState(''),[chosen,setChosen]=useState([]); const visible=courses.filter(c=>c.name.toLowerCase().includes(query.toLowerCase())); const selected=courses.filter(c=>chosen.includes(c.id)); return

Build a learning plan

Find a course setQuery(e.target.value)}/> Filter the three example course titles. {!visible.length&&

No matching courses.

}

Your local plan

{selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes

No enrollment is submitted.

; } createRoot(document.getElementById('root')).render(); ``` ### Um prompt para seu projeto ``` Use a composição atual de FormField do Canvas e as camadas de tokens CSS. Mantenha a filtragem dos cursos separada do estado de seleção, evite duplicações e derive o total de minutos. Preserve a tematização do tenant por meio de funções semânticas; não confunda nomes históricos numerados de espaço com as categorias preferenciais atuais da fonte. ``` ## Workday Canvas Fontes e escopo do sistema de design Referência OpenDesign independente. Não há matrícula de funcionários nem uso de API do Workday. Os nomes atuais da fonte e os nomes antigos de migração são diferenciados explicitamente. - Configuração do Canvas Kit Importações atuais, provider e limites do Sana. - Fonte atual de tokens do sistema Categorias de espaçamento, aliases de tipografia e forma. - Fonte de FormField Composição API e orientação. - Fonte de TextInput Dimensionamento e estilos de estado. - Fonte de PrimaryButton Funções de estado adaptadas à marca. - Origem dos botões Comportamento herdado e direção dos ícones. - Migração histórica Nomes antigos mantidos apenas como referência de migração. ## Workday Canvas Recursos relacionados ao sistema de design ### Zendesk Garden Um guia Garden para tarefas de suporte, com aliases de tema reais, escalas de tipografia e raio, um editor de resposta completo, rascunhos locais que levam em conta a visibilidade e recuperação de campos. ### Adeo Mozaic Crie uma composição prática de controle de quantidade usando a unidade mágica de 16 px da Mozaic, controles correspondentes de 48 px, imports SCSS reais e classes BEM. O planejador de prateleiras permite observar limites, erros tipados e um resumo local de materiais. ### Adobe Spectrum Conheça o Spectrum v3 da React com uma tabela selecionável de recursos criativos e um inspetor de predefinições de exportação. Entenda os temas Provider e a escala de entrada, as propriedades de estilo compatíveis, as coleções com chaves e a diferença entre o v3 e a implementação mais recente do Spectrum 2. - [Referência de implementação](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Fonte](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Fonte](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Fonte](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Fonte](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Fonte](https://github.com/Workday/canvas-tokens/discussions/77) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/Button.tsx) - [Consulte a especificação de apoio](https://github.com/Workday/canvas-kit) - [Referência de código](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Configuração do Canvas Kit Importações atuais, provider e limites do Sana.](https://github.com/Workday/canvas-kit) - [Fonte atual de tokens do sistema Categorias de espaçamento, aliases de tipografia e forma.](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Fonte de FormField Composição API e orientação.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Fonte de TextInput Dimensionamento e estilos de estado.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Fonte de PrimaryButton Funções de estado adaptadas à marca.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Origem dos botões Comportamento herdado e direção dos ícones.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/Button.tsx) - [Migração histórica Nomes antigos mantidos apenas como referência de migração.](https://github.com/Workday/canvas-tokens/discussions/77)