@1doc/1ds-react 2.11.0 → 2.11.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @1doc/1ds-react
 
+## 2.11.1
+
+### Patch Changes
+
+- ffc6176: remove(tokens): `--umds-semantic-font-family-mono` e `--umds-primitive-font-family-mono` saem
+
+  REMOÇÃO de token, não acréscimo. O DS não cria token novo: a família monoespaçada (introduzida no 0.6.0) volta a não
+  existir. Como estamos em 0.x, a remoção sai como minor nos tokens.
+
+  - `Kbd` e `CodeBlock` passam a usar `--umds-semantic-font-family-base`: o texto da tecla e do código sai na fonte do DS,
+    não mais monoespaçada (muda a largura dos caracteres; o espaço e as quebras de linha do `CodeBlock` seguem mantidos).
+  - `RichTextEditor`: a opção "Monoespaçada" da ferramenta `fontFamily` sai (o label `fontFamilyMono` também). Fica só a
+    opção "Padrão" (`fontFamilyBase`). A higienização do valor passa a aceitar só `font-family-base` em `font-family`:
+    um `<span style="font-family: var(--umds-semantic-font-family-mono)">` salvo antes perde a declaração ao carregar.
+  - Quem usou o token: troque por `--umds-semantic-font-family-base`.
+
 ## 2.11.0
 
 ### Minor Changes

package/dist/components/CodeBlock/CodeBlock.css

@@ -1,6 +1,6 @@
 /* ─────────────────────────────────────────────
    CODE BLOCK
-   Texto em fonte monoespaçada, com borda, rolagem e botão de copiar.
+   Texto na fonte do DS (a base, sem fonte de código), com borda, rolagem e botão de copiar.
 
    Fundo claro e texto escuro (contraste de texto, nos temas claro e escuro: os
    dois vêm dos semânticos). Sem cor de sintaxe.
@@ -28,7 +28,7 @@
 }
 
 .umds-code-block__language {
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
   font-weight: var(--umds-primitive-font-weight-semibold);
   color: var(--umds-semantic-color-neutral-dark-down);
@@ -65,7 +65,7 @@
   margin: 0;
   padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* 12px 16px */
   overflow: auto;
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
   font-size: var(--umds-primitive-font-size-xxs); /* 14px */
   line-height: var(--umds-primitive-font-line-height-lg);
   color: var(--umds-semantic-color-neutral-dark-pure);

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -1,6 +1,6 @@
 import './CodeBlock.css';
 /**
- * CodeBlock — trecho de código (ou JSON, ou um log) em fonte monoespaçada, com
+ * CodeBlock — trecho de código (ou JSON, ou um log) com a fonte do DS, com
  * borda, rolagem e botão de copiar.
  *
  * O texto vem por `code` ou como conteúdo (`<CodeBlock>{...}</CodeBlock>`); o
@@ -25,7 +25,7 @@ import './CodeBlock.css';
  * @property {string} ariaLabel - Nome da área de rolagem (padrão: a linguagem, ou "Código")
  * @property {string} className - Classes CSS adicionais
  * @property {function} onCopy - Chamado com o texto depois de copiar
- * @quandoUsar Mostrar JSON de uma resposta, um comando, um log, um exemplo de uso: texto que se lê em fonte monoespaçada e se copia.
+ * @quandoUsar Mostrar JSON de uma resposta, um comando, um log, um exemplo de uso: texto que se lê como foi escrito e se copia.
  * @quandoNaoUsar Para uma tecla ou atalho, use `Kbd`. Para código dentro de uma frase, use `<code>` direto. Para editar código, use um editor especializado: este bloco só mostra.
  */
 export interface CodeBlockProps {

package/dist/components/Kbd/Kbd.css

@@ -1,6 +1,6 @@
 /* ─────────────────────────────────────────────
    KBD
-   Uma tecla, ou uma combinação, em fonte monoespaçada.
+   Uma tecla, ou uma combinação, na fonte do DS (a base).
 
    A caixa é cinza com borda e uma sombra de base de 1px (a "espessura" da
    tecla). Texto escuro sobre cinza claro: contraste de texto, não só de cor.
@@ -13,7 +13,7 @@
   box-sizing: border-box;
   min-width: var(--umds-primitive-spacing-xxs); /* 24px */
   padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano); /* 2px 8px */
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
   font-weight: var(--umds-primitive-font-weight-semibold);
   line-height: var(--umds-primitive-font-line-height-lg);
   text-align: center;
@@ -40,7 +40,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--umds-primitive-spacing-quarck); /* 4px */
-  font-family: var(--umds-semantic-font-family-mono);
+  font-family: var(--umds-semantic-font-family-base);
 }
 
 .umds-kbd-combo__item {

package/dist/components/Kbd/Kbd.d.ts

@@ -4,7 +4,7 @@ import './Kbd.css';
  *
  * Uma tecla: `<Kbd>Esc</Kbd>`. Uma combinação: `keys` (`["Ctrl", "Shift", "P"]`),
  * que desenha uma caixa por tecla com o `separator` entre elas (`+` por padrão).
- * A fonte é a monoespaçada do DS (`--umds-semantic-font-family-mono`), a caixa é
+ * A fonte é a do DS (`--umds-semantic-font-family-base`), a caixa é
  * cinza com borda e uma sombra de base, como uma tecla de verdade.
  *
  * Semântica: `<kbd>` é o elemento HTML de "entrada de teclado", e um `<kbd>`

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -35,7 +35,7 @@ export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "
  * higienização: só PNG, JPEG, GIF e WebP em `data:`, ou `http(s)`; sem SVG.
  *
  * Estilo de texto por TOKEN do DS, também opcional na `toolbar`: `fontFamily`
- * (padrão ou monoespaçada), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
+ * (a fonte do DS), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
  * `textColor` (a paleta do DS). Cada um abre um painel abaixo da barra e aplica ao
  * texto selecionado (sem seleção, o painel pede que se selecione). O valor guarda
  * `<span style="color: var(--umds-primitive-red-pure)">`: só token do DS passa na
@@ -53,7 +53,7 @@ export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "
  * @property {string} placeholder - Texto de apoio com o editor vazio
  * @property {string[]} toolbar - Ferramentas da barra, em ordem: 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'link' | 'undo' | 'redo' | 'clear' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'image' | 'table' | 'fontFamily' | 'fontSize' | 'textColor' | '|' (separador)
  * @property {string} toolbarLabel - Nome da barra (padrão "Formatação")
- * @property {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, fontFamilyMono, styleClose, styleNeedsSelection }`
+ * @property {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, styleClose, styleNeedsSelection }`
  * @property {number} minHeight - Altura mínima da área de escrita, em px (padrão 120)
  * @property {boolean} resizable - Deixa redimensionar a altura pelo canto
  * @property {boolean} disabled - Desabilita barra e área

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -148,7 +148,6 @@ function RichTextEditor(props) {
             fontSize: "Tamanho da fonte",
             textColor: "Cor do texto",
             fontFamilyBase: "Padrão",
-            fontFamilyMono: "Monoespaçada",
             styleClose: "Fechar",
             styleNeedsSelection: "Selecione o texto antes de aplicar.",
         };
@@ -790,10 +789,6 @@ function RichTextEditor(props) {
                 label: rotulo("fontFamilyBase"),
                 value: "var(--umds-semantic-font-family-base)",
             },
-            {
-                label: rotulo("fontFamilyMono"),
-                value: "var(--umds-semantic-font-family-mono)",
-            },
         ];
     }
     function fontSizeOptions() {

package/dist/teste/RichTextEditorEstiloDeTexto.test.js

@@ -25,7 +25,7 @@ describe("html-seguro: estilo de texto por token", () => {
         expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
         expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
         expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
-        expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+        expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-base)")).toBe("font-family: var(--umds-semantic-font-family-base);");
         for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
             expect(estiloDeTexto("color", mau)).toBe("");
         }
@@ -36,7 +36,7 @@ describe("html-seguro: estilo de texto por token", () => {
     });
     it("o span guarda só as declarações válidas; o resto do style sai", () => {
         expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe('<span style="color: var(--umds-primitive-red-pure);">a</span>');
-        expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>');
+        expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe('<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm);">a</span>');
         expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
     });
     it("estilo só vale em span: em outras tags sai", () => {
@@ -62,15 +62,15 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
         fireEvent.keyDown(screen.getByRole("group", { name: "Cor do texto" }), { key: "Escape" });
         expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
     });
-    it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+    it("a fonte do DS embrulha o texto selecionado num span com o token", async () => {
         const usuario = userEvent.setup();
         const aoMudar = vi.fn();
         abrir(["fontFamily"], { onChange: aoMudar });
         selecionarTexto();
         await usuario.click(screen.getByRole("button", { name: "Fonte" }));
         await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
-        await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
-        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+        await usuario.click(screen.getByRole("option", { name: "Padrão" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-base);">Parecer</span>');
         expect(aoMudar).toHaveBeenCalled();
         expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
     });
@@ -105,11 +105,11 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
     });
     it("os textos vêm por labels", async () => {
         const usuario = userEvent.setup();
-        abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+        abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyBase: "Default", styleClose: "Close" } });
         selecionarTexto();
         await usuario.click(screen.getByRole("button", { name: "Font" }));
         await usuario.click(screen.getByRole("combobox", { name: "Font" }));
-        expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+        expect(screen.getByRole("option", { name: "Default" })).toBeInTheDocument();
         await usuario.keyboard("{Escape}");
         expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
     });

package/dist/utils/html-seguro.js

@@ -53,7 +53,7 @@ export const normalizarEndereco = (bruto) => {
 /** Cor, tamanho e família de fonte só valem como TOKEN do DS: `var(--umds-...)`. Cor em hex, rgb ou nome sai. */
 const COR_TOKEN = /^var\(--umds-(?:primitive|semantic)-[a-z0-9-]+\)$/;
 const TAMANHO_TOKEN = /^var\(--umds-primitive-font-size-[a-z0-9]+\)$/;
-const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-(?:base|mono)\)$/;
+const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-base\)$/;
 /**
  * Declaração de estilo de texto que o editor aceita: `color`, `font-size` e `font-family`,
  * cada uma só com um token do DS. Devolve a declaração limpa ("color: var(--x);") ou "".

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,8 +45,8 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.11.0",
-    "@1doc/1ds-tokens": "0.6.0"
+    "@1doc/1ds-core": "2.11.1",
+    "@1doc/1ds-tokens": "0.7.0"
   },
   "publishConfig": {
     "access": "public"

package/src/teste/RichTextEditorEstiloDeTexto.test.tsx

@@ -29,7 +29,7 @@ describe("html-seguro: estilo de texto por token", () => {
     expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
     expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
     expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
-    expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+    expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-base)")).toBe("font-family: var(--umds-semantic-font-family-base);");
     for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
       expect(estiloDeTexto("color", mau)).toBe("");
     }
@@ -43,8 +43,8 @@ describe("html-seguro: estilo de texto por token", () => {
     expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe(
       '<span style="color: var(--umds-primitive-red-pure);">a</span>',
     );
-    expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe(
-      '<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>',
+    expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe(
+      '<span style="font-family: var(--umds-semantic-font-family-base); font-size: var(--umds-primitive-font-size-sm);">a</span>',
     );
     expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
   });
@@ -74,15 +74,15 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
     expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
   });
 
-  it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+  it("a fonte do DS embrulha o texto selecionado num span com o token", async () => {
     const usuario = userEvent.setup();
     const aoMudar = vi.fn();
     abrir(["fontFamily"], { onChange: aoMudar });
     selecionarTexto();
     await usuario.click(screen.getByRole("button", { name: "Fonte" }));
     await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
-    await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
-    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+    await usuario.click(screen.getByRole("option", { name: "Padrão" }));
+    expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-base);">Parecer</span>');
     expect(aoMudar).toHaveBeenCalled();
     expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
   });
@@ -121,11 +121,11 @@ describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
 
   it("os textos vêm por labels", async () => {
     const usuario = userEvent.setup();
-    abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+    abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyBase: "Default", styleClose: "Close" } });
     selecionarTexto();
     await usuario.click(screen.getByRole("button", { name: "Font" }));
     await usuario.click(screen.getByRole("combobox", { name: "Font" }));
-    expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "Default" })).toBeInTheDocument();
     await usuario.keyboard("{Escape}");
     expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
   });

package/src/utils/html-seguro.ts

@@ -51,7 +51,7 @@ export const normalizarEndereco = (bruto: string): string => {
 /** Cor, tamanho e família de fonte só valem como TOKEN do DS: `var(--umds-...)`. Cor em hex, rgb ou nome sai. */
 const COR_TOKEN = /^var\(--umds-(?:primitive|semantic)-[a-z0-9-]+\)$/;
 const TAMANHO_TOKEN = /^var\(--umds-primitive-font-size-[a-z0-9]+\)$/;
-const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-(?:base|mono)\)$/;
+const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-base\)$/;
 
 /**
  * Declaração de estilo de texto que o editor aceita: `color`, `font-size` e `font-family`,