@thecodecodex/design-system 0.1.0 → 0.2.0

package/src/styles/base.css

@@ -1,4 +1,4 @@
-/* Base: barras de rolagem, foco, títulos, tabelas e seleção (opcional: importe só tokens.css e themes.css para dispensá-la) */
+/* Base: barras de rolagem, foco e seleção. Serve a sites e a apps (títulos e tabelas de conteúdo ficam em content.css) */
 @layer base {
 
   /* Barras de rolagem: padrão (Firefox, Chrome/Edge 121+); a da página usa o fundo como trilho,
@@ -69,42 +69,6 @@
     outline-offset: 2px;
   }
 
-  h1 {
-    @apply font-display uppercase font-black leading-none mb-6 mt-12;
-    font-size: clamp(2rem, 4vw, 2.5rem);
-  }
-
-  h2 {
-    @apply font-display uppercase font-extrabold leading-none mb-5 mt-10;
-    font-size: clamp(1.6rem, 3vw, 2rem);
-  }
-
-  h3 {
-    @apply font-display font-bold leading-none mb-4 mt-8;
-    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
-  }
-
-  h4 {
-    @apply font-display tracking-wide font-semibold leading-none mb-4 mt-6;
-    font-size: clamp(1.2rem, 2vw, 1.6rem);
-  }
-
-  h5 {
-    @apply font-display tracking-wide font-medium leading-none mb-3 mt-5;
-    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
-  }
-
-  h6 {
-    @apply font-display font-normal leading-none mb-2 mt-4;
-    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
-  }
-
-  table:not(.plain),
-  table:not(.plain) th,
-  table:not(.plain) td {
-    border: 1px solid var(--border);
-  }
-
   ::selection {
     color: var(--bg-primary);
     background: var(--contrast);

package/src/styles/content.css

@@ -0,0 +1,39 @@
+/* Conteúdo editorial: títulos com escala e margens de artigo, bordas em toda tabela.
+ * Faz parte de styles.css (sites). Apps/painéis costumam dispensar: importe tokens.css + themes.css + base.css. */
+@layer base {
+  h1 {
+    @apply font-display uppercase font-black leading-none mb-6 mt-12;
+    font-size: clamp(2rem, 4vw, 2.5rem);
+  }
+
+  h2 {
+    @apply font-display uppercase font-extrabold leading-none mb-5 mt-10;
+    font-size: clamp(1.6rem, 3vw, 2rem);
+  }
+
+  h3 {
+    @apply font-display font-bold leading-none mb-4 mt-8;
+    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
+  }
+
+  h4 {
+    @apply font-display tracking-wide font-semibold leading-none mb-4 mt-6;
+    font-size: clamp(1.2rem, 2vw, 1.6rem);
+  }
+
+  h5 {
+    @apply font-display tracking-wide font-medium leading-none mb-3 mt-5;
+    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
+  }
+
+  h6 {
+    @apply font-display font-normal leading-none mb-2 mt-4;
+    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
+  }
+
+  table:not(.plain),
+  table:not(.plain) th,
+  table:not(.plain) td {
+    border: 1px solid var(--border);
+  }
+}

package/src/styles/index.css

@@ -2,3 +2,4 @@
 @import "./tokens.css";
 @import "./themes.css";
 @import "./base.css";
+@import "./content.css";

package/src/styles/raw.d.ts

@@ -0,0 +1,5 @@
+// Importação de arquivos como texto (Vite/Vitest), usada nos testes dos CSS
+declare module "*?raw" {
+  const content: string
+  export default content
+}

package/src/styles/themes.css

@@ -16,6 +16,11 @@
     /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
     --chart-1: #2a78d6;
     --chart-2: #eb6834;
+    /* status (ligado/desligado, ok/atenção/erro): texto, contorno e ponto; ≥ 4.5:1 sobre bg-primary e sobre o -soft */
+    --ok: #166534;
+    --warn: #854d0e;
+    --danger: #be123c;
+    --info: #1d4ed8;
     /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
     --diff-add: #dcfce7;
     --diff-add-strong: #86efac;
@@ -50,6 +55,11 @@
     /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
     --chart-1: #2a78d6;
     --chart-2: #eb6834;
+    /* status (ligado/desligado, ok/atenção/erro): texto, contorno e ponto; ≥ 4.5:1 sobre bg-primary e sobre o -soft */
+    --ok: #166534;
+    --warn: #854d0e;
+    --danger: #9f1239;
+    --info: #1e40af;
     /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
     --diff-add: #dcefd4;
     --diff-add-strong: #9fd18a;
@@ -84,6 +94,11 @@
     /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
     --chart-1: #3987e5;
     --chart-2: #d95926;
+    /* status (ligado/desligado, ok/atenção/erro): texto, contorno e ponto; ≥ 4.5:1 sobre bg-primary e sobre o -soft */
+    --ok: #6ee7a0;
+    --warn: #f2c35a;
+    --danger: #ff8fa3;
+    --info: #93c5fd;
     /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
     --diff-add: #1f3a2a;
     --diff-add-strong: #2f6b45;
@@ -118,6 +133,11 @@
     /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
     --chart-1: #3987e5;
     --chart-2: #d95926;
+    /* status (ligado/desligado, ok/atenção/erro): texto, contorno e ponto; ≥ 4.5:1 sobre bg-primary e sobre o -soft */
+    --ok: #4ade80;
+    --warn: #facc15;
+    --danger: #f87171;
+    --info: #60a5fa;
     /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
     --diff-add: #12341f;
     --diff-add-strong: #1d6b3a;
@@ -152,6 +172,11 @@
     /* gráficos: slots 1 e 2 da paleta de dataviz, validados (CVD e contraste) contra a superfície deste tema */
     --chart-1: #3987e5;
     --chart-2: #d95926;
+    /* status (ligado/desligado, ok/atenção/erro): texto, contorno e ponto; ≥ 4.5:1 sobre bg-primary e sobre o -soft */
+    --ok: #3efd2d;
+    --warn: #ffe500;
+    --danger: #ff7a93;
+    --info: #7cc4ff;
     /* diff: fundo da linha e realce do trecho alterado; texto do tema ≥ 4.5:1 sobre todos */
     --diff-add: #003d1a;
     --diff-add-strong: #00692c;
@@ -177,6 +202,11 @@
   /* borda suave: derivada da borda do tema (o alto contraste define a sua) */
   :where(:root) {
     --soft: color-mix(in srgb, var(--border) 18%, transparent);
+    /* fundos suaves de status (avisos): derivados do tom e da superfície do tema */
+    --ok-soft: color-mix(in srgb, var(--ok) 10%, var(--bg-primary));
+    --warn-soft: color-mix(in srgb, var(--warn) 10%, var(--bg-primary));
+    --danger-soft: color-mix(in srgb, var(--danger) 10%, var(--bg-primary));
+    --info-soft: color-mix(in srgb, var(--info) 10%, var(--bg-primary));
     /* barras de rolagem: derivadas do texto secundário (o alto contraste define as suas) */
     --scrollbar-thumb: color-mix(in srgb, var(--text-secondary) 55%, transparent);
     --scrollbar-thumb-hover: var(--text-secondary);

package/src/styles/themes.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest"
+import { THEMES } from "../theme/theme.js"
+import css from "./themes.css?raw"
+import tokens from "./tokens.css?raw"
+
+// Bloco de declarações de um tema (o claro também vale para :root)
+function block(theme: string): string {
+  const start = css.indexOf(`.theme-${theme} {`)
+  return css.slice(start, css.indexOf("}", start))
+}
+
+describe("cores de status", () => {
+  it.each(THEMES)("o tema %s define ok, warn, danger e info", (theme) => {
+    for (const name of ["ok", "warn", "danger", "info"]) {
+      expect(block(theme)).toMatch(new RegExp(`--${name}: #[0-9a-f]{6};`))
+    }
+  })
+
+  it("gera utilidades para cada tom e seu fundo suave", () => {
+    for (const name of ["ok", "warn", "danger", "info"]) {
+      expect(tokens).toContain(`--color-${name}: var(--${name});`)
+      expect(tokens).toContain(`--color-${name}-soft: var(--${name}-soft);`)
+    }
+  })
+})

package/src/styles/tokens.css

@@ -31,6 +31,16 @@
   --color-inset: var(--bg-secondary);
   --color-soft: var(--soft);
 
+  /* Status: texto, contorno e ponto (ok/warn/danger/info); -soft é o fundo de avisos */
+  --color-ok: var(--ok);
+  --color-ok-soft: var(--ok-soft);
+  --color-warn: var(--warn);
+  --color-warn-soft: var(--warn-soft);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-info: var(--info);
+  --color-info-soft: var(--info-soft);
+
   /* Cores de categoria (docs/redesign/01-tokens-e-temas.md) */
   --color-cat-guide: var(--cat-guide);
   --color-cat-guide-fg: var(--cat-guide-fg);