From bfc020eda95dea01582a3887af34c262c3a91a31 Mon Sep 17 00:00:00 2001 From: Jace <60551230+JaceThings@users.noreply.github.com> Date: Tue, 2 Jun 2026 20:34:13 +0200 Subject: [PATCH 1/2] =?UTF-8?q?feat(website):=20add=20Brazilian=20Portugue?= =?UTF-8?q?se=20(Portugu=C3=AAs,=20BR)=20translation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds the pt-BR locale: full translated message catalog (messages/pt-BR.json), registers the locale in project.inlang/settings.json, and a translated README.pt-BR.md. Branched off feat/i18n-infrastructure (merge that first). --- README.pt-BR.md | 106 ++++++++++++++ apps/website/messages/pt-BR.json | 166 ++++++++++++++++++++++ apps/website/project.inlang/settings.json | 3 +- 3 files changed, 274 insertions(+), 1 deletion(-) create mode 100644 README.pt-BR.md create mode 100644 apps/website/messages/pt-BR.json diff --git a/README.pt-BR.md b/README.pt-BR.md new file mode 100644 index 0000000..8ff3ab6 --- /dev/null +++ b/README.pt-BR.md @@ -0,0 +1,106 @@ +
+ +Lisse + +

Lisse

+ +Primitivas SVG de cantos suaves para React, Vue e Svelte. +Squircles do Figma pixel-perfect + três outras curvas de canto. + +[![npm](https://img.shields.io/npm/v/%40lisse%2Fcore?label=%40lisse%2Fcore)](https://www.npmjs.com/package/@lisse/core) +[![bundle](https://deno.bundlejs.com/badge?q=%40lisse%2Fcore&label=bundle)](https://bundlejs.com/?q=%40lisse%2Fcore) +[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE) +[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg)](https://www.typescriptlang.org/) + +**[Demo ao vivo →](https://corne.rs)** + +[English](./README.md) · [简体中文](./README.zh-Hans.md) · [日本語](./README.ja.md) · [한국어](./README.ko.md) · **Português (BR)** · [Русский](./README.ru.md) · [Deutsch](./README.de.md) + +
+ +## O que é isso? + +O `border-radius` padrão do CSS produz arcos circulares nos cantos. Designers (e a Apple, e o Figma) preferem **squircles** — cantos onde a curvatura faz a transição suavemente para as arestas retas, criando uma forma mais orgânica. + +O Lisse implementa o [algoritmo de suavização de cantos do Figma](https://www.figma.com/blog/desperately-seeking-squircles/) e três outras curvas de canto em JavaScript. Ele gera caminhos SVG e valores de `clip-path` do CSS, com bindings de primeira classe para React, Vue e Svelte. + +## Início rápido + +```sh +npm install @lisse/react +``` + +```tsx +import { SmoothCorners } from "@lisse/react"; + +function Card() { + return ( + +

Hello, squircle

+ + ); +} +``` + +Para Vue, Svelte ou o núcleo agnóstico de framework, veja os [pacotes](#pacotes) abaixo. + +## Tipos de curva + +| Curva | Descrição | +|---|---| +| `arc` | Quarto de círculo. Idêntico ao `border-radius` do CSS. | +| `squircle` *(padrão)* | Ombros cúbicos do Figma + arco central. | +| `superellipse` | `\|x/R\|^n + \|y/R\|^n = 1`. G2 com arestas para `n > 2`. | +| `clothoid` | Mescla com espiral de Euler da aresta reta ao arco central. G2 em toda parte. | + +Referência matemática: [`docs/curves.md`](docs/curves.md). + +## Pacotes + +| Pacote | npm | Descrição | +|---|---|---| +| `@lisse/core` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fcore?label=)](https://www.npmjs.com/package/@lisse/core) | Geração de caminhos + efeitos, agnóstica de framework | +| `@lisse/react` | [![npm](https://img.shields.io/npm/v/%40lisse%2Freact?label=)](https://www.npmjs.com/package/@lisse/react) | Hook e componente React | +| `@lisse/vue` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fvue?label=)](https://www.npmjs.com/package/@lisse/vue) | Composable e componente Vue | +| `@lisse/svelte` | [![npm](https://img.shields.io/npm/v/%40lisse%2Fsvelte?label=)](https://www.npmjs.com/package/@lisse/svelte) | Action Svelte | + +## Recursos + +- Quatro curvas de canto (`arc`, `squircle`, `superellipse`, `clothoid`) com mistura por canto +- Bordas interna / externa / central com variantes de estilo (solid, dashed, dotted, double, groove, ridge) +- Sombras projetadas e sombras internas, com bordas em gradiente via a API +- Auto-efeitos: `border` e `box-shadow` do CSS são convertidos em equivalentes SVG na montagem +- ~1.5 µs por chamada de `generatePath()`; 500 cantos recalculados em <1 ms ([detalhes](docs/performance.md)) +- Zero dependências em runtime; exportação dupla ESM + CJS; subcaminho `/path` seguro para SSR + +## Documentação + +- [Referência da API](docs/api.md): tabela completa de exportações +- [Migração](MIGRATION.md): atualizando entre versões +- [SSR](docs/ssr.md): renderização no servidor e runtimes de edge +- [Curvas](docs/curves.md): referência matemática para cada tipo de curva +- [Suporte de navegadores](docs/browser-support.md): matriz de compatibilidade +- [Hooks de estilização](docs/styling.md): atributos `data-slot` / `data-state` +- [Efeitos](docs/effects.md): bordas, sombras, gradientes, auto-efeitos +- [Performance](docs/performance.md): benchmarks e arquitetura de cache +- [Internals](docs/internals.md): como funcionam bordas, sombras e o tratamento de redimensionamento +- [Pegadinhas](docs/gotchas.md): peculiaridades do `clip-path` como contornos de foco, overflow, barras de rolagem +- [Configuração](docs/configuration.md): config por canto, qual API usar, uso com frameworks + +## Contribuindo + +Issues e PRs são bem-vindos. A documentação para contribuidores (processo de release, estratégia de testes, benchmarks) fica em [`docs/`](./docs/). + +## Licença + +[MIT](./LICENSE) + +--- + +
+ +Feito por [Jace](https://ja.mt) + +[X](https://ja.mt/x) | [Bluesky](https://ja.mt/bsky) | [Instagram](https://ja.mt/ig) | [Threads](https://ja.mt/threads) + +
diff --git a/apps/website/messages/pt-BR.json b/apps/website/messages/pt-BR.json new file mode 100644 index 0000000..1f6efde --- /dev/null +++ b/apps/website/messages/pt-BR.json @@ -0,0 +1,166 @@ +{ + "$schema": "https://inlang.com/schema/inlang-message-format", + "curves_effect_border": "borda de {n} px", + "curves_effect_drop_shadow": "sombra projetada", + "curves_effect_fill_only": "somente preenchimento", + "curves_effect_inner_border": "borda interna de {n} px", + "curves_effect_inner_shadow": "sombra interna", + "curves_effect_outer_border": "borda externa de {n} px", + "curves_effect_shadow_and_border": "sombra + borda", + "curves_matrix_description": "Raio {radius}, suavização {smoothing}. Cada linha é uma curva, cada coluna é um efeito.", + "curves_matrix_title": "Matriz de verificação curva × efeito", + "demo_compare_enter": "Entrar na visualização de comparação", + "demo_compare_exit": "Sair da visualização de comparação", + "demo_compare_label": "Comparação", + "demo_heading": "Demo do Squircle", + "demo_smoothing_disable": "Desativar suavização", + "demo_smoothing_enable": "Ativar suavização", + "demo_smoothing_label_off": "Sem suavização", + "demo_smoothing_label_on": "Suavização", + "demo_state_compare_active": "Visualização de comparação ativa.", + "demo_state_compare_smoothing_off": "A frente se sobrepõe ao fundo, então nenhum canto vermelho fica visível.", + "demo_state_compare_smoothing_on": "As quatro cunhas vermelhas mostram o quanto o squircle recua em relação ao fundo arredondado pelo CSS.", + "demo_state_smoothing_off": "A suavização está desligada; o quadrado de demonstração usa os cantos padrão de quarto de círculo do CSS.", + "demo_state_smoothing_on": "A suavização está ligada; o quadrado de demonstração usa os cantos squircle do Lisse.", + "header_def_1": "que tem uma superfície uniforme e contínua; liso ao toque", + "header_def_1_example": "un galet lisse", + "header_def_2": "elegante; sem quebra ou aspereza (cheveux lisses).", + "header_def_3": "fig. polido, sem atrito; fluindo sem interrupção.", + "header_def_b": "(de uma curva, linha ou transição) contínuo; sem mudança abrupta (une courbe lisse).", + "header_etymology_french_abbr": "fr.", + "header_etymology_smooth": "liso", + "header_pos_adjective": "adj.", + "header_pronunciation_sr": "Pronuncia-se liss, adjetivo, do francês lisse, que significa liso.", + "install_copied_announcement": "Comando de instalação {pkg} copiado para a área de transferência", + "install_copy_command_label": "Copiar {command} para a área de transferência", + "install_error_announcement": "Não foi possível copiar o comando de instalação {pkg}", + "install_heading": "Instalar", + "intro_lead": "Lisse é uma pequena biblioteca JavaScript que desenha cantos squircle, a mesma curva contínua que Figma e iOS usam. Bindings para React, Vue e Svelte, mais um núcleo agnóstico de framework. Controle por canto, bordas e sombras estão incluídos.", + "math_arc_body_after_code": "desenha: um quarto de círculo encaixado nas arestas retas. As tangentes coincidem, mas a curvatura salta de 0 na aresta para 1/R dentro do arco em um único passo — essa é a emenda de que os designers reclamam.", + "math_arc_body_before_code": "é o que o CSS", + "math_arc_radius_readout": "centro · R = {r}", + "math_clothoid_body": "mescla cada aresta reta em um arco circular central com um segmento de espiral de Euler cuja curvatura sobe linearmente ao longo do comprimento do arco — 0 na aresta, 1/R no arco. G2 em toda parte por construção (κ coincide em cada emenda), com um caráter visivelmente diferente do squircle da Apple/Figma: mais arredondado no ápice, com extensão de canto mais longa. Geometria clássica de transição de rodovia.", + "math_comb_density_smooth": "curva suave", + "math_comb_density_whiskers": "{n} cerdas", + "math_continuity_aria_label": "Continuidade: {gn}", + "math_copy_copied": "Copiado", + "math_copy_failed": "Falha ao copiar", + "math_copy_svg": "Copiar SVG", + "math_copy_svg_aria_label": "Copiar SVG para a área de transferência", + "math_curve_arc_label": "Arco", + "math_curve_arc_sub": "CSS border-radius", + "math_curve_clothoid_label": "Clothoid", + "math_curve_clothoid_sub": "mescla com espiral de Euler", + "math_curve_squircle_label": "Squircle", + "math_curve_squircle_sub": "padrão do Lisse · Figma", + "math_curve_superellipse_label": "Superellipse", + "math_curve_superellipse_sub": "CSS corner-shape", + "math_curve_type_aria_label": "Tipo de curva", + "math_diagram_aria_label": "Construção da curva do canto com pente de curvatura. Duas arestas retas se encontram em um canto, substituídas pela curva de suavização selecionada. Um pente verde mostra a curvatura em cada ponto ao longo da curva.", + "math_docs_reference": "As derivações matemáticas e as citações das fontes ficam em", + "math_download": "Baixar", + "math_download_svg_aria_label": "Baixar SVG", + "math_intro_g1": "significa que as tangentes coincidem na emenda, mas a curvatura pode dar um salto (o pente tem uma descontinuidade).", + "math_intro_g2": "significa que a curvatura é contínua, então o pente flui através das junções. Escolha uma curva e arraste R/suavização para ver como cada uma se comporta.", + "math_intro_lead": "Quatro construções candidatas de canto, extraídas da mesma matemática. O pente verde é a curvatura em cada ponto ao longo da curva — o comprimento de cada cerda é proporcional a κ.", + "math_shape_label_exponent": "Expoente (n)", + "math_shape_label_smoothing": "Suavização", + "math_slider_comb_density": "Densidade do pente", + "math_slider_corner_radius": "Raio do canto", + "math_squircle_body": "é a forma atual do Lisse e o que o Figma entrega. Dois ombros em Bézier cúbica se acomodam em um arco circular central menor. A curvatura sobe gradualmente em vez de saltar, mas ainda há um pequeno passo em P3 / P4 onde cada ombro encontra o arco — visível no pente como o \"chapéu do Batman\". Isso é G1, não G2.", + "math_superellipse_body_after": "resolve para (com n = 4). Para qualquer n > 2, a curvatura é exatamente 0 onde a curva encontra cada aresta — então é G2 sem precisar de nenhuma construção de ombro. Distribuição de curvatura diferente da forma da Apple/Figma, no entanto: ela se lê como uma família distinta, e não como uma versão mais suave da mesma curva.", + "math_superellipse_body_mid": "é o que o CSS", + "meta_app_description": "Biblioteca JavaScript que desenha cantos squircle — a mesma curva contínua que Figma e iOS usam. Bindings para React, Vue e Svelte, mais um núcleo agnóstico de framework. Controle por canto, bordas e sombras incluídos.", + "meta_home_description": "Cantos Squircle para a web. Bindings para React, Vue e Svelte.", + "meta_home_title": "lisse", + "meta_playground_description": "Ajuste raio, suavização, tipo de curva, bordas e sombras no seu navegador.", + "meta_playground_title": "playground — lisse", + "meta_what_description": "Por que os squircles parecem mais suaves que o border-radius do CSS, e como o Lisse os desenha.", + "meta_what_title": "o que é um squircle — lisse", + "nav_aria_site": "Site", + "nav_docs": "Docs", + "nav_follow": "Seguir", + "nav_home": "Início", + "nav_playground": "Playground", + "nav_what": "O quê?", + "playground_border_description": "Bordas com traço que seguem o caminho suave do canto. Sólida, tracejada, pontilhada, dupla, groove, ridge — os estilos de linha padrão do CSS.", + "playground_center_border_title": "Borda Central", + "playground_drop_shadow_description": "Sombras projetadas baseadas em SVG, traçadas a partir do mesmo caminho squircle do elemento acima. Acompanham a forma da superfície em qualquer raio.", + "playground_drop_shadow_title": "Sombra Projetada", + "playground_inner_border_title": "Borda Interna", + "playground_inner_shadow_description": "Sombras internas renderizadas dentro do caminho suave do canto. Úteis para superfícies rebaixadas, estados pressionados ou um preenchimento suave por baixo.", + "playground_inner_shadow_title": "Sombra Interna", + "playground_outer_border_title": "Borda Externa", + "section_border_dash_label": "Traço", + "section_border_dashcap_aria": "ponta do traço {title}", + "section_border_dashcap_none": "Nenhuma", + "section_border_dashcap_round": "Arredondada", + "section_border_dashcap_square": "Quadrada", + "section_border_gap_label": "Espaçamento", + "section_border_preset_aria": "estilo {title}", + "section_border_preset_dashed": "Tracejada", + "section_border_preset_dotted": "Pontilhada", + "section_border_preset_double": "Dupla", + "section_border_preset_groove": "Groove", + "section_border_preset_none": "Nenhuma", + "section_border_preset_ridge": "Ridge", + "section_border_preset_solid": "Sólida", + "section_border_thickness_label": "Espessura", + "section_cornershape_desc": "A suavização controla o quão gradualmente a curva faz a transição para a aresta reta. 0 produz um arco circular, 1 um squircle completo.", + "section_cornershape_ios_label": "iOS – {value}", + "section_cornershape_preset_aria": "Preset de suavização", + "section_cornershape_preset_off": "Sem Suavização", + "section_cornershape_preset_on": "Com Suavização", + "section_cornershape_slider_label": "Suavização", + "section_cornershape_title": "Forma do Canto", + "section_curvetype_desc": "Escolha a construção do canto. Squircle é o padrão do Lisse (a curva do Figma). Arc é o border-radius do CSS. Superellipse é a família corner-shape do CSS (n = 5 — a mais próxima do Figma 0.6). Clothoid é a mescla G2 com espiral de Euler.", + "section_curvetype_exponent_label": "Expoente (n)", + "section_curvetype_preset_arc": "Arc", + "section_curvetype_preset_aria": "Tipo de curva", + "section_curvetype_preset_clothoid": "Clothoid", + "section_curvetype_preset_squircle": "Squircle", + "section_curvetype_preset_superellipse": "Superellipse", + "section_curvetype_radius_label": "Raio", + "section_curvetype_smoothing_label": "Suavização", + "section_curvetype_title": "Tipo de Curva", + "section_percorner_bottom_left_label": "Inferior Esquerdo", + "section_percorner_bottom_right_label": "Inferior Direito", + "section_percorner_desc": "Cada canto pode ter seu próprio raio e suavização, controlados de forma independente. Útil para formas assimétricas como abas e chips.", + "section_percorner_preset_all": "Todos Iguais", + "section_percorner_preset_aria": "Preset por canto", + "section_percorner_preset_custom": "Personalizado", + "section_percorner_preset_single": "Único", + "section_percorner_preset_top": "Apenas Superior", + "section_percorner_title": "Raio por Canto", + "section_percorner_top_left_label": "Superior Esquerdo", + "section_percorner_top_right_label": "Superior Direito", + "section_radius_desc": "Controle o raio do canto. Valores mais altos produzem cantos mais arredondados — no máximo, a caixa se torna um círculo completo.", + "section_radius_preset_0": "Raio: 0", + "section_radius_preset_20": "Raio: 20", + "section_radius_preset_50": "Raio: 50", + "section_radius_preset_aria": "Preset de raio", + "section_radius_preset_custom": "Personalizado", + "section_radius_slider_label": "Raio", + "section_radius_title": "Raio", + "section_shadow_blur_label": "Desfoque", + "section_shadow_preset_aria": "preset {title}", + "section_shadow_preset_custom": "Personalizado", + "section_shadow_preset_medium": "Médio", + "section_shadow_preset_none": "Nenhum", + "section_shadow_preset_subtle": "Sutil", + "section_shadow_spread_label": "Difusão", + "section_shadow_x_label": "X", + "section_shadow_y_label": "Y", + "switcher_aria_label": "Idioma", + "what_p10_rest_translates": "O resto de um design se traduz de forma limpa para CSS. A curva é a parte que não se traduzia, e agora se traduz.", + "what_p11_docs_pointer": "Um detalhamento mais aprofundado e bastante técnico — a matemática do caminho, as regras de composição por canto e a estratégia de renderização do Lisse — fica na documentação linkada no rodapé da página.", + "what_p1_intro": "Um squircle é um retângulo arredondado cujos cantos se acomodam nas arestas retas com curvatura contínua, em vez de um único arco circular. A Apple introduziu a forma no iOS em 2013 com o iOS 7, onde cada ícone de app era recortado nela. Figma e Sketch ambos adicionaram suavização de cantos em 2018, e a forma vem se espalhando pelas ferramentas de design desde então.", + "what_p2_border_radius": "O border-radius do CSS desenha um único arco em cada canto. O arco encontra a aresta reta em uma tangente abrupta: a curvatura salta de zero ao seu máximo em um único passo. O olho lê isso como um canto encaixado por cima. Em raios pequenos ninguém percebe. Acima de cerca de 16 pixels a emenda aparece, e o canto se lê como mais duro do que deveria.", + "what_p3_two_shapes": "Duas formas resolvem a emenda. Uma superellipse fica entre um círculo e um quadrado, com um único número controlando o quão arredondada ou quão quadrada ela é. A outra forma é um pequeno arco circular no ápice do canto, com ombros suaves de cada lado que acomodam o arco nas arestas retas para que a curvatura nunca salte. As duas parecem semelhantes na escala de um ícone, mas são construídas de forma diferente por baixo.", + "what_p4_apple_baggage": "A Apple usa a forma de arco-com-ombros, e a implementação vem com algumas bagagens. As duas metades de cada canto não são bem imagens espelhadas uma da outra. Há um minúsculo segmento reto de um lado que quase certamente não deveria estar ali: os desenvolvedores que extraíram o caminho real do iOS o descrevem como um provável bug, preservado ao longo das versões. A forma também se desfaz em proporções baixas, onde deixa de parecer um squircle e começa a parecer um retângulo arredondado genérico. Nada disso é configurável. A curva da Apple é fixa.", + "what_p5_figma_redraw": "Quando o Figma adicionou a suavização em 2018, optaram por redesenhar a curva do zero em vez de copiar o caminho da Apple. O texto de Daniel Furse da época dá o raciocínio. O caminho da Apple não é uma fórmula limpa que você consiga descrever em uma linha. Ele carrega a assimetria adiante, não tem botão de suavização para girar e se desfaz em proporções baixas. Reimplementar a mesma família de forma resolveu os três de uma só vez. As duas metades de cada canto se espelham corretamente. Um único botão de suavização controla o quão suave o canto fica: zero devolve um simples arco circular, e um dá a suavidade máxima que a construção permite. Em torno de 0.6 fica próximo o suficiente da forma da Apple para que ninguém perceba na escala de um ícone, mas a geometria por baixo é mais sensata de se trabalhar.", + "what_p6_css_catching_up": "O próprio CSS está se atualizando. A especificação do CSS é o manual de regras que todo navegador concorda em implementar, escrito e revisado por um grupo de trabalho no W3C. Qualquer coisa que entra na especificação acaba aparecendo no Chrome, Safari e Firefox de alguma forma. Uma nova propriedade chamada corner-shape está passando por esse processo agora. Ela fica ao lado do border-radius e muda qual curva o raio traça, para que os autores possam escolher algo diferente do arco circular padrão sem recorrer a SVG.", + "what_p7_squircle_keyword": "A especificação inclui uma palavra-chave squircle, o que soa como se todo o problema estivesse resolvido. Leia a definição com atenção e a palavra-chave resolve para uma superellipse com um expoente fixo embutido. Essa é a outra família de forma. À primeira vista, parece próxima do squircle do iOS, mas a curvatura é distribuída de forma diferente, e nos tamanhos usados em interfaces a diferença é visível. Apple, Figma e Lisse desenham todos arco-com-ombros. O padrão do CSS desenha outra coisa e a chama pelo mesmo nome.", + "what_p8_browser_support": "O suporte dos navegadores também ainda não chegou. O Chrome adicionou a propriedade em agosto de 2025. O Safari a tem atrás de uma feature flag, mas não a entregou em uma versão estável. O Firefox nem começou. Mesmo no cronograma otimista em que todo motor entrega no próximo ano, o que está chegando primeiro não é a forma que combina com o iOS ou o Figma. A propriedade CSS é uma primitiva útil para novos designs que escolhem a superellipse de propósito. Ela não é um substituto para o squircle que as pessoas já veem no iOS, em arquivos do Figma e em design systems que os copiam.", + "what_p9_lisse_fits": "É aí que o Lisse se encaixa. Ele desenha o squircle do Figma como um caminho SVG e recorta o elemento nele. Bordas e sombras traçam a mesma forma: os traços seguem o squircle, e as sombras são cópias deslocadas do recorte, então a borda suave fica consistente com a superfície sobre a qual repousa. Os raios por canto se compõem de forma limpa, sem dobra na fronteira entre cantos de arredondamentos diferentes. Um único observador acompanha cada elemento envolvido pelo Lisse e só redesenha quando a caixa realmente muda de tamanho." +} diff --git a/apps/website/project.inlang/settings.json b/apps/website/project.inlang/settings.json index b2ef600..68c4970 100644 --- a/apps/website/project.inlang/settings.json +++ b/apps/website/project.inlang/settings.json @@ -2,7 +2,8 @@ "$schema": "https://inlang.com/schema/project-settings", "baseLocale": "en", "locales": [ - "en" + "en", + "pt-BR" ], "modules": [ "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4.4.0/dist/index.js", From e26361514326673999e25bb3abbc3fa41c375783 Mon Sep 17 00:00:00 2001 From: Jace <60551230+JaceThings@users.noreply.github.com> Date: Tue, 2 Jun 2026 22:53:05 +0200 Subject: [PATCH 2/2] fix(i18n): polish Brazilian Portuguese translation copy MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Naturalness pass from a native-speaker review of how these terms are actually used: superellipse→superelipse, clothoid→clotoide, Arc→Arco, calque fixes, slider 'botão'→controle. Keys, placeholders, and the enforced do-not-translate tokens are unchanged. --- apps/website/messages/pt-BR.json | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/apps/website/messages/pt-BR.json b/apps/website/messages/pt-BR.json index 1f6efde..3641194 100644 --- a/apps/website/messages/pt-BR.json +++ b/apps/website/messages/pt-BR.json @@ -49,11 +49,11 @@ "math_copy_svg_aria_label": "Copiar SVG para a área de transferência", "math_curve_arc_label": "Arco", "math_curve_arc_sub": "CSS border-radius", - "math_curve_clothoid_label": "Clothoid", + "math_curve_clothoid_label": "Clotoide", "math_curve_clothoid_sub": "mescla com espiral de Euler", "math_curve_squircle_label": "Squircle", "math_curve_squircle_sub": "padrão do Lisse · Figma", - "math_curve_superellipse_label": "Superellipse", + "math_curve_superellipse_label": "Superelipse", "math_curve_superellipse_sub": "CSS corner-shape", "math_curve_type_aria_label": "Tipo de curva", "math_diagram_aria_label": "Construção da curva do canto com pente de curvatura. Duas arestas retas se encontram em um canto, substituídas pela curva de suavização selecionada. Um pente verde mostra a curvatura em cada ponto ao longo da curva.", @@ -68,7 +68,7 @@ "math_slider_comb_density": "Densidade do pente", "math_slider_corner_radius": "Raio do canto", "math_squircle_body": "é a forma atual do Lisse e o que o Figma entrega. Dois ombros em Bézier cúbica se acomodam em um arco circular central menor. A curvatura sobe gradualmente em vez de saltar, mas ainda há um pequeno passo em P3 / P4 onde cada ombro encontra o arco — visível no pente como o \"chapéu do Batman\". Isso é G1, não G2.", - "math_superellipse_body_after": "resolve para (com n = 4). Para qualquer n > 2, a curvatura é exatamente 0 onde a curva encontra cada aresta — então é G2 sem precisar de nenhuma construção de ombro. Distribuição de curvatura diferente da forma da Apple/Figma, no entanto: ela se lê como uma família distinta, e não como uma versão mais suave da mesma curva.", + "math_superellipse_body_after": "resolve para (com n = 4). Para qualquer n > 2, a curvatura é exatamente 0 onde a curva encontra cada aresta — então é G2 sem precisar de nenhuma construção de ombro. Distribuição de curvatura diferente da forma da Apple/Figma, no entanto: ela parece uma família distinta, e não uma versão mais suave da mesma curva.", "math_superellipse_body_mid": "é o que o CSS", "meta_app_description": "Biblioteca JavaScript que desenha cantos squircle — a mesma curva contínua que Figma e iOS usam. Bindings para React, Vue e Svelte, mais um núcleo agnóstico de framework. Controle por canto, bordas e sombras incluídos.", "meta_home_description": "Cantos Squircle para a web. Bindings para React, Vue e Svelte.", @@ -113,13 +113,13 @@ "section_cornershape_preset_on": "Com Suavização", "section_cornershape_slider_label": "Suavização", "section_cornershape_title": "Forma do Canto", - "section_curvetype_desc": "Escolha a construção do canto. Squircle é o padrão do Lisse (a curva do Figma). Arc é o border-radius do CSS. Superellipse é a família corner-shape do CSS (n = 5 — a mais próxima do Figma 0.6). Clothoid é a mescla G2 com espiral de Euler.", + "section_curvetype_desc": "Escolha a construção do canto. Squircle é o padrão do Lisse (a curva do Figma). Arco é o border-radius do CSS. Superelipse é a família corner-shape do CSS (n = 5 — a mais próxima do Figma 0.6). Clotoide é a mescla G2 com espiral de Euler.", "section_curvetype_exponent_label": "Expoente (n)", - "section_curvetype_preset_arc": "Arc", + "section_curvetype_preset_arc": "Arco", "section_curvetype_preset_aria": "Tipo de curva", - "section_curvetype_preset_clothoid": "Clothoid", + "section_curvetype_preset_clothoid": "Clotoide", "section_curvetype_preset_squircle": "Squircle", - "section_curvetype_preset_superellipse": "Superellipse", + "section_curvetype_preset_superellipse": "Superelipse", "section_curvetype_radius_label": "Raio", "section_curvetype_smoothing_label": "Suavização", "section_curvetype_title": "Tipo de Curva", @@ -155,12 +155,12 @@ "what_p10_rest_translates": "O resto de um design se traduz de forma limpa para CSS. A curva é a parte que não se traduzia, e agora se traduz.", "what_p11_docs_pointer": "Um detalhamento mais aprofundado e bastante técnico — a matemática do caminho, as regras de composição por canto e a estratégia de renderização do Lisse — fica na documentação linkada no rodapé da página.", "what_p1_intro": "Um squircle é um retângulo arredondado cujos cantos se acomodam nas arestas retas com curvatura contínua, em vez de um único arco circular. A Apple introduziu a forma no iOS em 2013 com o iOS 7, onde cada ícone de app era recortado nela. Figma e Sketch ambos adicionaram suavização de cantos em 2018, e a forma vem se espalhando pelas ferramentas de design desde então.", - "what_p2_border_radius": "O border-radius do CSS desenha um único arco em cada canto. O arco encontra a aresta reta em uma tangente abrupta: a curvatura salta de zero ao seu máximo em um único passo. O olho lê isso como um canto encaixado por cima. Em raios pequenos ninguém percebe. Acima de cerca de 16 pixels a emenda aparece, e o canto se lê como mais duro do que deveria.", - "what_p3_two_shapes": "Duas formas resolvem a emenda. Uma superellipse fica entre um círculo e um quadrado, com um único número controlando o quão arredondada ou quão quadrada ela é. A outra forma é um pequeno arco circular no ápice do canto, com ombros suaves de cada lado que acomodam o arco nas arestas retas para que a curvatura nunca salte. As duas parecem semelhantes na escala de um ícone, mas são construídas de forma diferente por baixo.", - "what_p4_apple_baggage": "A Apple usa a forma de arco-com-ombros, e a implementação vem com algumas bagagens. As duas metades de cada canto não são bem imagens espelhadas uma da outra. Há um minúsculo segmento reto de um lado que quase certamente não deveria estar ali: os desenvolvedores que extraíram o caminho real do iOS o descrevem como um provável bug, preservado ao longo das versões. A forma também se desfaz em proporções baixas, onde deixa de parecer um squircle e começa a parecer um retângulo arredondado genérico. Nada disso é configurável. A curva da Apple é fixa.", - "what_p5_figma_redraw": "Quando o Figma adicionou a suavização em 2018, optaram por redesenhar a curva do zero em vez de copiar o caminho da Apple. O texto de Daniel Furse da época dá o raciocínio. O caminho da Apple não é uma fórmula limpa que você consiga descrever em uma linha. Ele carrega a assimetria adiante, não tem botão de suavização para girar e se desfaz em proporções baixas. Reimplementar a mesma família de forma resolveu os três de uma só vez. As duas metades de cada canto se espelham corretamente. Um único botão de suavização controla o quão suave o canto fica: zero devolve um simples arco circular, e um dá a suavidade máxima que a construção permite. Em torno de 0.6 fica próximo o suficiente da forma da Apple para que ninguém perceba na escala de um ícone, mas a geometria por baixo é mais sensata de se trabalhar.", + "what_p2_border_radius": "O border-radius do CSS desenha um único arco em cada canto. O arco encontra a aresta reta em uma tangente abrupta: a curvatura salta de zero ao seu máximo em um único passo. O olho percebe isso como um canto colado por cima. Em raios pequenos ninguém percebe. Acima de cerca de 16 pixels a emenda aparece, e o canto parece mais duro do que deveria.", + "what_p3_two_shapes": "Duas formas resolvem a emenda. Uma superelipse fica entre um círculo e um quadrado, com um único número controlando o quão arredondada ou quão quadrada ela é. A outra forma é um pequeno arco circular no ápice do canto, com ombros suaves de cada lado que acomodam o arco nas arestas retas para que a curvatura nunca salte. As duas parecem semelhantes na escala de um ícone, mas são construídas de forma diferente por baixo.", + "what_p4_apple_baggage": "A Apple usa a forma de arco-com-ombros, e a implementação traz algumas ressalvas. As duas metades de cada canto não são bem imagens espelhadas uma da outra. Há um minúsculo segmento reto de um lado que quase certamente não deveria estar ali: os desenvolvedores que extraíram o caminho real do iOS o descrevem como um provável bug, preservado ao longo das versões. A forma também se desfaz em proporções baixas, onde deixa de parecer um squircle e começa a parecer um retângulo arredondado genérico. Nada disso é configurável. A curva da Apple é fixa.", + "what_p5_figma_redraw": "Quando o Figma adicionou a suavização em 2018, optaram por redesenhar a curva do zero em vez de copiar o caminho da Apple. O texto de Daniel Furse da época dá o raciocínio. O caminho da Apple não é uma fórmula limpa que você consiga descrever em uma linha. Ele carrega a assimetria adiante, não tem controle de suavização para ajustar e se desfaz em proporções baixas. Reimplementar a mesma família de forma resolveu os três de uma só vez. As duas metades de cada canto se espelham corretamente. Um único controle de suavização define o quão suave o canto fica: zero devolve um simples arco circular, e um dá a suavidade máxima que a construção permite. Em torno de 0.6 fica próximo o suficiente da forma da Apple para que ninguém perceba na escala de um ícone, mas a geometria por baixo é mais sensata de se trabalhar.", "what_p6_css_catching_up": "O próprio CSS está se atualizando. A especificação do CSS é o manual de regras que todo navegador concorda em implementar, escrito e revisado por um grupo de trabalho no W3C. Qualquer coisa que entra na especificação acaba aparecendo no Chrome, Safari e Firefox de alguma forma. Uma nova propriedade chamada corner-shape está passando por esse processo agora. Ela fica ao lado do border-radius e muda qual curva o raio traça, para que os autores possam escolher algo diferente do arco circular padrão sem recorrer a SVG.", - "what_p7_squircle_keyword": "A especificação inclui uma palavra-chave squircle, o que soa como se todo o problema estivesse resolvido. Leia a definição com atenção e a palavra-chave resolve para uma superellipse com um expoente fixo embutido. Essa é a outra família de forma. À primeira vista, parece próxima do squircle do iOS, mas a curvatura é distribuída de forma diferente, e nos tamanhos usados em interfaces a diferença é visível. Apple, Figma e Lisse desenham todos arco-com-ombros. O padrão do CSS desenha outra coisa e a chama pelo mesmo nome.", - "what_p8_browser_support": "O suporte dos navegadores também ainda não chegou. O Chrome adicionou a propriedade em agosto de 2025. O Safari a tem atrás de uma feature flag, mas não a entregou em uma versão estável. O Firefox nem começou. Mesmo no cronograma otimista em que todo motor entrega no próximo ano, o que está chegando primeiro não é a forma que combina com o iOS ou o Figma. A propriedade CSS é uma primitiva útil para novos designs que escolhem a superellipse de propósito. Ela não é um substituto para o squircle que as pessoas já veem no iOS, em arquivos do Figma e em design systems que os copiam.", + "what_p7_squircle_keyword": "A especificação inclui uma palavra-chave squircle, o que soa como se todo o problema estivesse resolvido. Leia a definição com atenção e a palavra-chave resolve para uma superelipse com um expoente fixo embutido. Essa é a outra família de forma. À primeira vista, parece próxima do squircle do iOS, mas a curvatura é distribuída de forma diferente, e nos tamanhos usados em interfaces a diferença é visível. Apple, Figma e Lisse desenham todos arco-com-ombros. O padrão do CSS desenha outra coisa e a chama pelo mesmo nome.", + "what_p8_browser_support": "O suporte dos navegadores também ainda não chegou. O Chrome adicionou a propriedade em agosto de 2025. O Safari a tem atrás de uma feature flag, mas não a entregou em uma versão estável. O Firefox nem começou. Mesmo no cronograma otimista em que todo motor entrega no próximo ano, o que está chegando primeiro não é a forma que combina com o iOS ou o Figma. A propriedade CSS é uma primitiva útil para novos designs que escolhem a superelipse de propósito. Ela não é um substituto para o squircle que as pessoas já veem no iOS, em arquivos do Figma e em design systems que os copiam.", "what_p9_lisse_fits": "É aí que o Lisse se encaixa. Ele desenha o squircle do Figma como um caminho SVG e recorta o elemento nele. Bordas e sombras traçam a mesma forma: os traços seguem o squircle, e as sombras são cópias deslocadas do recorte, então a borda suave fica consistente com a superfície sobre a qual repousa. Os raios por canto se compõem de forma limpa, sem dobra na fronteira entre cantos de arredondamentos diferentes. Um único observador acompanha cada elemento envolvido pelo Lisse e só redesenha quando a caixa realmente muda de tamanho." }