@orangesys/tokens 0.0.0-stage → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 llypeDev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,47 @@
-# Temporary Holding Version
+# @orangesys/tokens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Tokens de design do **Orange**: cores, tipografia, espaço, raios, sombras e movimento, com quatro temas
+— escuro, claro e os de alto contraste `dark-hc` e `light-hc` — e testes de contraste WCAG no build.
+
+**Documentação:** https://orange.llypedev.com.br
+
+## Instalação
+
+```bash
+pnpm add @orangesys/tokens
+```
+
+## Uso
+
+### CSS
+
+```css
+@import '@orangesys/tokens/tokens.css';
+
+.card {
+  background: var(--or-color-surface);
+  color: var(--or-color-text);
+  border: 1px solid var(--or-color-border);
+}
+```
+
+O tema vem do atributo `data-theme` (`dark`, `light`, `dark-hc`, `light-hc`). Sem atributo, vale o escuro
+— ou o escuro de alto contraste quando o sistema pede `prefers-contrast: more`.
+
+### TypeScript
+
+```ts
+import { themes, primitives } from '@orangesys/tokens'
+
+themes.light.accent // valor resolvido do acento no tema claro
+```
+
+### Figma e outras ferramentas
+
+`@orangesys/tokens/tokens.dtcg.json` traz os tokens no formato W3C Design Tokens (DTCG), com um modo por
+tema. O passo a passo para importar no Figma ou no Tokens Studio — e o script `figma:sync` — está em
+[Figma](https://orange.llypedev.com.br/pt/usage/figma).
+
+## Licença
+
+MIT

package/css/tokens.css

@@ -0,0 +1,565 @@
+/**
+ * Orange design tokens — arquivo gerado por packages/tokens/scripts/build.ts.
+ * Não edite manualmente: altere packages/tokens/src/index.ts e rode `pnpm build:tokens`.
+ */
+
+:root {
+  --or-palette-carbon-0: #0a0a0d;
+  --or-palette-carbon-50: #0f0f12;
+  --or-palette-carbon-100: #16161a;
+  --or-palette-carbon-150: #1c1c21;
+  --or-palette-carbon-200: #2a2a30;
+  --or-palette-carbon-300: #3a3a42;
+  --or-palette-carbon-400: #55555e;
+  --or-palette-carbon-500: #75757f;
+  --or-palette-carbon-600: #9c9588;
+  --or-palette-carbon-700: #b8b0a0;
+  --or-palette-carbon-800: #d4cdb5;
+  --or-palette-carbon-900: #f0ebdb;
+  --or-palette-carbon-950: #faf7ec;
+  --or-palette-paper-0: #fffdf6;
+  --or-palette-paper-50: #faf7ec;
+  --or-palette-paper-100: #f0ebdb;
+  --or-palette-paper-200: #ece7d7;
+  --or-palette-paper-300: #e2ddcd;
+  --or-palette-paper-400: #d9d3bf;
+  --or-palette-paper-500: #c9c4b5;
+  --or-palette-paper-600: #8a8478;
+  --or-palette-paper-700: #666057;
+  --or-palette-paper-800: #525252;
+  --or-palette-paper-900: #2a2a2a;
+  --or-palette-paper-950: #0f0f12;
+  --or-palette-orange-50: #fff3eb;
+  --or-palette-orange-100: #fde2cf;
+  --or-palette-orange-200: #fbc6a2;
+  --or-palette-orange-300: #f8a675;
+  --or-palette-orange-400: #f6945f;
+  --or-palette-orange-500: #f58549;
+  --or-palette-orange-550: #e06a2c;
+  --or-palette-orange-600: #d4622a;
+  --or-palette-orange-700: #b85a24;
+  --or-palette-orange-800: #9c4416;
+  --or-palette-orange-850: #8a3a10;
+  --or-palette-orange-900: #6b2e0e;
+  --or-palette-green-100: #e4f1d1;
+  --or-palette-green-300: #a6d16a;
+  --or-palette-green-500: #7fb236;
+  --or-palette-green-600: #5f8f22;
+  --or-palette-green-700: #3d6614;
+  --or-palette-green-900: #22390b;
+  --or-palette-blue-100: #dfe5f8;
+  --or-palette-blue-300: #8da2ea;
+  --or-palette-blue-400: #6b85e0;
+  --or-palette-blue-500: #4a66d4;
+  --or-palette-blue-700: #2a4494;
+  --or-palette-blue-900: #18275a;
+  --or-palette-red-100: #fde4e1;
+  --or-palette-red-300: #f79a8f;
+  --or-palette-red-500: #ef6a5a;
+  --or-palette-red-700: #b42318;
+  --or-palette-red-800: #961d13;
+  --or-palette-red-900: #6e140d;
+  --or-palette-amber-100: #faefcd;
+  --or-palette-amber-300: #efd27f;
+  --or-palette-amber-500: #e8c15a;
+  --or-palette-amber-600: #a57c10;
+  --or-palette-amber-700: #8a5a00;
+  --or-palette-amber-900: #4d3200;
+  --or-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --or-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --or-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --or-text-2xs: 0.6875rem;
+  --or-text-xs: 0.75rem;
+  --or-text-sm: 0.8125rem;
+  --or-text-md: 0.9375rem;
+  --or-text-lg: 1.0625rem;
+  --or-text-xl: 1.25rem;
+  --or-text-2xl: 1.5rem;
+  --or-text-3xl: 2rem;
+  --or-text-4xl: 2.75rem;
+  --or-text-5xl: 3.75rem;
+  --or-text-display: 5.375rem;
+  --or-weight-regular: 400;
+  --or-weight-medium: 500;
+  --or-weight-semibold: 600;
+  --or-weight-bold: 700;
+  --or-leading-display: 1;
+  --or-leading-heading: 1.1;
+  --or-leading-tight: 1.35;
+  --or-leading-body: 1.55;
+  --or-leading-loose: 1.7;
+  --or-tracking-display: -0.045em;
+  --or-tracking-heading: -0.03em;
+  --or-tracking-body: -0.005em;
+  --or-tracking-meta: 0.14em;
+  --or-space-0: 0;
+  --or-space-1: 0.25rem;
+  --or-space-2: 0.5rem;
+  --or-space-3: 0.75rem;
+  --or-space-4: 1rem;
+  --or-space-5: 1.25rem;
+  --or-space-6: 1.5rem;
+  --or-space-7: 1.75rem;
+  --or-space-8: 2rem;
+  --or-space-10: 2.5rem;
+  --or-space-12: 3rem;
+  --or-space-14: 3.5rem;
+  --or-space-16: 4rem;
+  --or-space-20: 5rem;
+  --or-space-24: 6rem;
+  --or-radius-none: 0;
+  --or-radius-sm: 2px;
+  --or-radius-md: 4px;
+  --or-radius-full: 9999px;
+  --or-border-thin: 1px;
+  --or-border-thick: 2px;
+  --or-border-accent: 3px;
+  --or-shadow-none: none;
+  --or-shadow-lift: 0 8px 0 -4px var(--or-color-text);
+  --or-shadow-hover-accent: 0 8px 0 -4px var(--or-color-accent);
+  --or-shadow-hover-ink: 0 4px 0 -2px var(--or-color-text);
+  --or-shadow-raised: 0 1px 0 0 var(--or-color-border-strong);
+  --or-shadow-overlay: 0 24px 64px -16px var(--or-color-shadow), 0 0 0 1px var(--or-color-border-strong);
+  --or-duration-press: 90ms;
+  --or-duration-instant: 80ms;
+  --or-duration-fast: 160ms;
+  --or-duration-medium: 250ms;
+  --or-duration-slow: 400ms;
+  --or-duration-reveal: 600ms;
+  --or-duration-slower: 640ms;
+  --or-duration-loop: 2400ms;
+  --or-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --or-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --or-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.05);
+  --or-ease-snap: cubic-bezier(0.19, 1, 0.22, 1);
+  --or-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --or-distance-sm: 4px;
+  --or-distance-md: 8px;
+  --or-distance-lg: 24px;
+  --or-distance-lift: -4px;
+  --or-stagger: 80ms;
+  --or-z-base: 0;
+  --or-z-raised: 10;
+  --or-z-sticky: 100;
+  --or-z-header: 200;
+  --or-z-dropdown: 1000;
+  --or-z-overlay: 1100;
+  --or-z-modal: 1200;
+  --or-z-popover: 1300;
+  --or-z-toast: 1400;
+  --or-z-tooltip: 1500;
+  --or-layout-max-width: 1200px;
+  --or-layout-gutter: 2rem;
+  --or-layout-header-height: 4rem;
+  --or-layout-sidebar-width: 17.5rem;
+  --or-control-sm: 2rem;
+  --or-control-md: 2.5rem;
+  --or-control-lg: 3rem;
+}
+
+/* Tema escuro (padrão) */
+:root,
+[data-theme='dark'] {
+  color-scheme: dark;
+  --or-color-bg: #0f0f12;
+  --or-color-bg-subtle: #16161a;
+  --or-color-surface: #0f0f12;
+  --or-color-surface-raised: #1c1c21;
+  --or-color-surface-hover: #2a2a30;
+  --or-color-surface-active: #3a3a42;
+  --or-color-surface-inverse: #f0ebdb;
+  --or-color-overlay: rgba(5, 5, 7, 0.72);
+  --or-color-shadow: rgba(0, 0, 0, 0.55);
+  --or-color-text: #f0ebdb;
+  --or-color-text-muted: #b8b0a0;
+  --or-color-text-subtle: #9c9588;
+  --or-color-text-disabled: #6b6b74;
+  --or-color-text-inverse: #0f0f12;
+  --or-color-text-on-accent: #0f0f12;
+  --or-color-border: #2a2a30;
+  --or-color-border-subtle: #1f1f26;
+  --or-color-border-strong: #3a3a42;
+  --or-color-border-control: #75757f;
+  --or-color-accent: #f58549;
+  --or-color-accent-hover: #f6945f;
+  --or-color-accent-active: #e06a2c;
+  --or-color-accent-subtle: rgba(245, 133, 73, 0.12);
+  --or-color-accent-text: #f58549;
+  --or-color-accent-border: rgba(245, 133, 73, 0.45);
+  --or-color-neutral: #f0ebdb;
+  --or-color-neutral-hover: #faf7ec;
+  --or-color-text-on-neutral: #0f0f12;
+  --or-color-success: #7fb236;
+  --or-color-success-subtle: rgba(127, 178, 54, 0.14);
+  --or-color-success-text: #a6d16a;
+  --or-color-warning: #e8c15a;
+  --or-color-warning-subtle: rgba(232, 193, 90, 0.14);
+  --or-color-warning-text: #efd27f;
+  --or-color-danger: #ef6a5a;
+  --or-color-danger-hover: #f79a8f;
+  --or-color-danger-subtle: rgba(239, 106, 90, 0.14);
+  --or-color-danger-text: #f79a8f;
+  --or-color-text-on-danger: #0f0f12;
+  --or-color-text-on-success: #0f0f12;
+  --or-color-text-on-warning: #0f0f12;
+  --or-color-text-on-info: #fffdf6;
+  --or-color-info: #4a66d4;
+  --or-color-info-subtle: rgba(74, 102, 212, 0.16);
+  --or-color-info-text: #8da2ea;
+  --or-color-focus: #f6945f;
+  --or-color-grid-line: rgba(240, 235, 219, 0.045);
+  --or-color-code-bg: #0a0a0d;
+  --or-color-code-text: #d4cdb5;
+  --or-color-selection: rgba(245, 133, 73, 0.32);
+  /* Visualização de dados: categórica, "outros", sequencial e divergente */
+  --or-color-viz-1: #7fb236;
+  --or-color-viz-2: #6b85e0;
+  --or-color-viz-3: #e8c15a;
+  --or-color-viz-4: #d4622a;
+  --or-color-viz-5: #f79a8f;
+  --or-color-viz-other: #75757f;
+  --or-color-viz-seq-1: #6b2e0e;
+  --or-color-viz-seq-2: #9c4416;
+  --or-color-viz-seq-3: #b85a24;
+  --or-color-viz-seq-4: #d4622a;
+  --or-color-viz-seq-5: #f58549;
+  --or-color-viz-seq-6: #f8a675;
+  --or-color-viz-seq-7: #fde2cf;
+  --or-color-viz-div-1: #8da2ea;
+  --or-color-viz-div-2: #6b85e0;
+  --or-color-viz-div-3: #2a4494;
+  --or-color-viz-div-4: #55555e;
+  --or-color-viz-div-5: #9c4416;
+  --or-color-viz-div-6: #d4622a;
+  --or-color-viz-div-7: #f8a675;
+}
+
+/* Tema claro */
+[data-theme='light'] {
+  color-scheme: light;
+  --or-color-bg: #faf7ec;
+  --or-color-bg-subtle: #f0ebdb;
+  --or-color-surface: #fffdf6;
+  --or-color-surface-raised: #fffdf6;
+  --or-color-surface-hover: #ece7d7;
+  --or-color-surface-active: #e2ddcd;
+  --or-color-surface-inverse: #0f0f12;
+  --or-color-overlay: rgba(15, 15, 18, 0.48);
+  --or-color-shadow: rgba(15, 15, 18, 0.14);
+  --or-color-text: #0f0f12;
+  --or-color-text-muted: #525252;
+  --or-color-text-subtle: #666057;
+  --or-color-text-disabled: #8a8478;
+  --or-color-text-inverse: #faf7ec;
+  --or-color-text-on-accent: #0f0f12;
+  --or-color-border: #d9d3bf;
+  --or-color-border-subtle: #e2ddcd;
+  --or-color-border-strong: #c9c4b5;
+  --or-color-border-control: #7a7468;
+  --or-color-accent: #d4622a;
+  --or-color-accent-hover: #e06a2c;
+  --or-color-accent-active: #b85a24;
+  --or-color-accent-subtle: rgba(212, 98, 42, 0.12);
+  --or-color-accent-text: #9c4416;
+  --or-color-accent-border: rgba(184, 90, 36, 0.5);
+  --or-color-neutral: #0f0f12;
+  --or-color-neutral-hover: #2b2b2c;
+  --or-color-text-on-neutral: #faf7ec;
+  --or-color-success: #7fb236;
+  --or-color-success-subtle: rgba(127, 178, 54, 0.16);
+  --or-color-success-text: #3d6614;
+  --or-color-warning: #e8c15a;
+  --or-color-warning-subtle: rgba(232, 193, 90, 0.22);
+  --or-color-warning-text: #8a5a00;
+  --or-color-danger: #b42318;
+  --or-color-danger-hover: #c9301f;
+  --or-color-danger-subtle: rgba(180, 35, 24, 0.1);
+  --or-color-danger-text: #b42318;
+  --or-color-text-on-danger: #ffffff;
+  --or-color-text-on-success: #0f0f12;
+  --or-color-text-on-warning: #0f0f12;
+  --or-color-text-on-info: #fffdf6;
+  --or-color-info: #2a4494;
+  --or-color-info-subtle: rgba(42, 68, 148, 0.1);
+  --or-color-info-text: #2a4494;
+  --or-color-focus: #b85a24;
+  --or-color-grid-line: rgba(15, 15, 18, 0.05);
+  --or-color-code-bg: #0f0f12;
+  --or-color-code-text: #d4cdb5;
+  --or-color-selection: rgba(245, 133, 73, 0.28);
+  /* Visualização de dados: categórica, "outros", sequencial e divergente */
+  --or-color-viz-1: #3d6614;
+  --or-color-viz-2: #4a66d4;
+  --or-color-viz-3: #8a5a00;
+  --or-color-viz-4: #e06a2c;
+  --or-color-viz-5: #b42318;
+  --or-color-viz-other: #8a8478;
+  --or-color-viz-seq-1: #fde2cf;
+  --or-color-viz-seq-2: #fbc6a2;
+  --or-color-viz-seq-3: #f8a675;
+  --or-color-viz-seq-4: #f58549;
+  --or-color-viz-seq-5: #d4622a;
+  --or-color-viz-seq-6: #9c4416;
+  --or-color-viz-seq-7: #6b2e0e;
+  --or-color-viz-div-1: #2a4494;
+  --or-color-viz-div-2: #4a66d4;
+  --or-color-viz-div-3: #8da2ea;
+  --or-color-viz-div-4: #d9d3bf;
+  --or-color-viz-div-5: #f8a675;
+  --or-color-viz-div-6: #e06a2c;
+  --or-color-viz-div-7: #9c4416;
+}
+
+/* Tema escuro de alto contraste (WCAG AAA) */
+[data-theme='dark-hc'] {
+  color-scheme: dark;
+  --or-color-bg: #0a0a0d;
+  --or-color-bg-subtle: #0f0f12;
+  --or-color-surface: #0a0a0d;
+  --or-color-surface-raised: #0f0f12;
+  --or-color-surface-hover: #1c1c21;
+  --or-color-surface-active: #2a2a30;
+  --or-color-surface-inverse: #faf7ec;
+  --or-color-overlay: rgba(0, 0, 0, 0.8);
+  --or-color-shadow: rgba(0, 0, 0, 0.7);
+  --or-color-text: #faf7ec;
+  --or-color-text-muted: #d4cdb5;
+  --or-color-text-subtle: #b8b0a0;
+  --or-color-text-disabled: #85858e;
+  --or-color-text-inverse: #0a0a0d;
+  --or-color-text-on-accent: #0a0a0d;
+  --or-color-border: #9c9588;
+  --or-color-border-subtle: #85858e;
+  --or-color-border-strong: #b8b0a0;
+  --or-color-border-control: #b8b0a0;
+  --or-color-accent: #f58549;
+  --or-color-accent-hover: #f6945f;
+  --or-color-accent-active: #f8a675;
+  --or-color-accent-subtle: rgba(245, 133, 73, 0.16);
+  --or-color-accent-text: #f6945f;
+  --or-color-accent-border: #f58549;
+  --or-color-neutral: #faf7ec;
+  --or-color-neutral-hover: #f0ebdb;
+  --or-color-text-on-neutral: #0a0a0d;
+  --or-color-success: #7fb236;
+  --or-color-success-subtle: rgba(127, 178, 54, 0.16);
+  --or-color-success-text: #a6d16a;
+  --or-color-warning: #e8c15a;
+  --or-color-warning-subtle: rgba(232, 193, 90, 0.16);
+  --or-color-warning-text: #efd27f;
+  --or-color-danger: #f79a8f;
+  --or-color-danger-hover: #fde4e1;
+  --or-color-danger-subtle: rgba(239, 106, 90, 0.16);
+  --or-color-danger-text: #f79a8f;
+  --or-color-text-on-danger: #0a0a0d;
+  --or-color-text-on-success: #0a0a0d;
+  --or-color-text-on-warning: #0a0a0d;
+  --or-color-text-on-info: #0a0a0d;
+  --or-color-info: #8da2ea;
+  --or-color-info-subtle: rgba(74, 102, 212, 0.16);
+  --or-color-info-text: #8da2ea;
+  --or-color-focus: #f8a675;
+  --or-color-grid-line: rgba(250, 247, 236, 0.08);
+  --or-color-code-bg: #0f0f12;
+  --or-color-code-text: #f0ebdb;
+  --or-color-selection: rgba(245, 133, 73, 0.4);
+  /* Visualização de dados: categórica, "outros", sequencial e divergente */
+  --or-color-viz-1: #7fb236;
+  --or-color-viz-2: #8da2ea;
+  --or-color-viz-3: #e8c15a;
+  --or-color-viz-4: #d4622a;
+  --or-color-viz-5: #f79a8f;
+  --or-color-viz-other: #9c9588;
+  --or-color-viz-seq-1: #9c4416;
+  --or-color-viz-seq-2: #b85a24;
+  --or-color-viz-seq-3: #d4622a;
+  --or-color-viz-seq-4: #f58549;
+  --or-color-viz-seq-5: #f6945f;
+  --or-color-viz-seq-6: #f8a675;
+  --or-color-viz-seq-7: #fde2cf;
+  --or-color-viz-div-1: #8da2ea;
+  --or-color-viz-div-2: #6b85e0;
+  --or-color-viz-div-3: #4a66d4;
+  --or-color-viz-div-4: #55555e;
+  --or-color-viz-div-5: #b85a24;
+  --or-color-viz-div-6: #f58549;
+  --or-color-viz-div-7: #f8a675;
+}
+
+/* Tema claro de alto contraste (WCAG AAA) */
+[data-theme='light-hc'] {
+  color-scheme: light;
+  --or-color-bg: #fffdf6;
+  --or-color-bg-subtle: #faf7ec;
+  --or-color-surface: #fffdf6;
+  --or-color-surface-raised: #fffdf6;
+  --or-color-surface-hover: #ece7d7;
+  --or-color-surface-active: #e2ddcd;
+  --or-color-surface-inverse: #0f0f12;
+  --or-color-overlay: rgba(15, 15, 18, 0.64);
+  --or-color-shadow: rgba(15, 15, 18, 0.28);
+  --or-color-text: #0f0f12;
+  --or-color-text-muted: #2a2a2a;
+  --or-color-text-subtle: #525252;
+  --or-color-text-disabled: #666057;
+  --or-color-text-inverse: #fffdf6;
+  --or-color-text-on-accent: #fffdf6;
+  --or-color-border: #525252;
+  --or-color-border-subtle: #666057;
+  --or-color-border-strong: #2a2a2a;
+  --or-color-border-control: #2a2a2a;
+  --or-color-accent: #8a3a10;
+  --or-color-accent-hover: #6b2e0e;
+  --or-color-accent-active: #6b2e0e;
+  --or-color-accent-subtle: rgba(138, 58, 16, 0.08);
+  --or-color-accent-text: #6b2e0e;
+  --or-color-accent-border: #8a3a10;
+  --or-color-neutral: #0f0f12;
+  --or-color-neutral-hover: #2a2a2a;
+  --or-color-text-on-neutral: #fffdf6;
+  --or-color-success: #22390b;
+  --or-color-success-subtle: rgba(61, 102, 20, 0.1);
+  --or-color-success-text: #22390b;
+  --or-color-warning: #4d3200;
+  --or-color-warning-subtle: rgba(165, 124, 16, 0.14);
+  --or-color-warning-text: #4d3200;
+  --or-color-danger: #961d13;
+  --or-color-danger-hover: #6e140d;
+  --or-color-danger-subtle: rgba(150, 29, 19, 0.08);
+  --or-color-danger-text: #961d13;
+  --or-color-text-on-danger: #fffdf6;
+  --or-color-text-on-success: #fffdf6;
+  --or-color-text-on-warning: #fffdf6;
+  --or-color-text-on-info: #fffdf6;
+  --or-color-info: #2a4494;
+  --or-color-info-subtle: rgba(42, 68, 148, 0.08);
+  --or-color-info-text: #2a4494;
+  --or-color-focus: #6b2e0e;
+  --or-color-grid-line: rgba(15, 15, 18, 0.08);
+  --or-color-code-bg: #0a0a0d;
+  --or-color-code-text: #f0ebdb;
+  --or-color-selection: rgba(138, 58, 16, 0.24);
+  /* Visualização de dados: categórica, "outros", sequencial e divergente */
+  --or-color-viz-1: #3d6614;
+  --or-color-viz-2: #4a66d4;
+  --or-color-viz-3: #8a5a00;
+  --or-color-viz-4: #6b2e0e;
+  --or-color-viz-5: #b42318;
+  --or-color-viz-other: #666057;
+  --or-color-viz-seq-1: #f8a675;
+  --or-color-viz-seq-2: #f58549;
+  --or-color-viz-seq-3: #e06a2c;
+  --or-color-viz-seq-4: #b85a24;
+  --or-color-viz-seq-5: #9c4416;
+  --or-color-viz-seq-6: #8a3a10;
+  --or-color-viz-seq-7: #6b2e0e;
+  --or-color-viz-div-1: #18275a;
+  --or-color-viz-div-2: #2a4494;
+  --or-color-viz-div-3: #4a66d4;
+  --or-color-viz-div-4: #c9c4b5;
+  --or-color-viz-div-5: #e06a2c;
+  --or-color-viz-div-6: #9c4416;
+  --or-color-viz-div-7: #6b2e0e;
+}
+
+/*
+ * Alto contraste automático: sem tema escolhido (nenhum data-theme no <html>),
+ * quem pede mais contraste ao sistema recebe o dark-hc no lugar do dark.
+ * Com o OrangeProvider em theme="system", o provider faz a mesma troca para os
+ * dois esquemas (dark → dark-hc, light → light-hc). Um data-theme explícito vence.
+ */
+@media (prefers-contrast: more) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --or-color-bg: #0a0a0d;
+    --or-color-bg-subtle: #0f0f12;
+    --or-color-surface: #0a0a0d;
+    --or-color-surface-raised: #0f0f12;
+    --or-color-surface-hover: #1c1c21;
+    --or-color-surface-active: #2a2a30;
+    --or-color-surface-inverse: #faf7ec;
+    --or-color-overlay: rgba(0, 0, 0, 0.8);
+    --or-color-shadow: rgba(0, 0, 0, 0.7);
+    --or-color-text: #faf7ec;
+    --or-color-text-muted: #d4cdb5;
+    --or-color-text-subtle: #b8b0a0;
+    --or-color-text-disabled: #85858e;
+    --or-color-text-inverse: #0a0a0d;
+    --or-color-text-on-accent: #0a0a0d;
+    --or-color-border: #9c9588;
+    --or-color-border-subtle: #85858e;
+    --or-color-border-strong: #b8b0a0;
+    --or-color-border-control: #b8b0a0;
+    --or-color-accent: #f58549;
+    --or-color-accent-hover: #f6945f;
+    --or-color-accent-active: #f8a675;
+    --or-color-accent-subtle: rgba(245, 133, 73, 0.16);
+    --or-color-accent-text: #f6945f;
+    --or-color-accent-border: #f58549;
+    --or-color-neutral: #faf7ec;
+    --or-color-neutral-hover: #f0ebdb;
+    --or-color-text-on-neutral: #0a0a0d;
+    --or-color-success: #7fb236;
+    --or-color-success-subtle: rgba(127, 178, 54, 0.16);
+    --or-color-success-text: #a6d16a;
+    --or-color-warning: #e8c15a;
+    --or-color-warning-subtle: rgba(232, 193, 90, 0.16);
+    --or-color-warning-text: #efd27f;
+    --or-color-danger: #f79a8f;
+    --or-color-danger-hover: #fde4e1;
+    --or-color-danger-subtle: rgba(239, 106, 90, 0.16);
+    --or-color-danger-text: #f79a8f;
+    --or-color-text-on-danger: #0a0a0d;
+    --or-color-text-on-success: #0a0a0d;
+    --or-color-text-on-warning: #0a0a0d;
+    --or-color-text-on-info: #0a0a0d;
+    --or-color-info: #8da2ea;
+    --or-color-info-subtle: rgba(74, 102, 212, 0.16);
+    --or-color-info-text: #8da2ea;
+    --or-color-focus: #f8a675;
+    --or-color-grid-line: rgba(250, 247, 236, 0.08);
+    --or-color-code-bg: #0f0f12;
+    --or-color-code-text: #f0ebdb;
+    --or-color-selection: rgba(245, 133, 73, 0.4);
+    /* Visualização de dados: categórica, "outros", sequencial e divergente */
+    --or-color-viz-1: #7fb236;
+    --or-color-viz-2: #8da2ea;
+    --or-color-viz-3: #e8c15a;
+    --or-color-viz-4: #d4622a;
+    --or-color-viz-5: #f79a8f;
+    --or-color-viz-other: #9c9588;
+    --or-color-viz-seq-1: #9c4416;
+    --or-color-viz-seq-2: #b85a24;
+    --or-color-viz-seq-3: #d4622a;
+    --or-color-viz-seq-4: #f58549;
+    --or-color-viz-seq-5: #f6945f;
+    --or-color-viz-seq-6: #f8a675;
+    --or-color-viz-seq-7: #fde2cf;
+    --or-color-viz-div-1: #8da2ea;
+    --or-color-viz-div-2: #6b85e0;
+    --or-color-viz-div-3: #4a66d4;
+    --or-color-viz-div-4: #55555e;
+    --or-color-viz-div-5: #b85a24;
+    --or-color-viz-div-6: #f58549;
+    --or-color-viz-div-7: #f8a675;
+  }
+}
+
+/* Movimento reduzido: anula durações para quem prefere menos animação */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --or-duration-press: 0ms;
+    --or-duration-instant: 0ms;
+    --or-duration-fast: 0ms;
+    --or-duration-medium: 0ms;
+    --or-duration-slow: 0ms;
+    --or-duration-reveal: 0ms;
+    --or-duration-slower: 0ms;
+    --or-duration-loop: 0ms;
+    --or-distance-sm: 0px;
+    --or-distance-md: 0px;
+    --or-distance-lg: 0px;
+    --or-distance-lift: 0px;
+    --or-stagger: 0ms;
+  }
+}

package/dist/contrast.d.ts

@@ -0,0 +1,8 @@
+/** Utilitários de contraste WCAG 2.x usados nos testes e na documentação. */
+/** Luminância relativa (0–1). */
+export declare function luminance(color: string): number;
+/** Razão de contraste entre duas cores sólidas (1–21). */
+export declare function contrastRatio(a: string, b: string): number;
+export type WcagLevel = 'AAA' | 'AA' | 'AA Large' | 'Fail';
+/** Classifica a razão de contraste para texto. */
+export declare function wcagLevel(ratio: number): WcagLevel;

package/dist/contrast.js

@@ -0,0 +1,35 @@
+/** Utilitários de contraste WCAG 2.x usados nos testes e na documentação. */
+function parseColor(input) {
+    const hex = input.trim().replace('#', '');
+    if (/^[0-9a-f]{6}$/i.test(hex)) {
+        return [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16));
+    }
+    if (/^[0-9a-f]{3}$/i.test(hex)) {
+        return hex.split('').map((c) => parseInt(c + c, 16));
+    }
+    throw new Error(`Cor não suportada para cálculo de contraste: ${input}`);
+}
+function channel(value) {
+    const c = value / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+/** Luminância relativa (0–1). */
+export function luminance(color) {
+    const [r, g, b] = parseColor(color).map(channel);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** Razão de contraste entre duas cores sólidas (1–21). */
+export function contrastRatio(a, b) {
+    const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (l1 + 0.05) / (l2 + 0.05);
+}
+/** Classifica a razão de contraste para texto. */
+export function wcagLevel(ratio) {
+    if (ratio >= 7)
+        return 'AAA';
+    if (ratio >= 4.5)
+        return 'AA';
+    if (ratio >= 3)
+        return 'AA Large';
+    return 'Fail';
+}