osl-ds-full

One Star Labs — Design System v1.0. Tokens, paleta, tipografía y componentes React para Platform Monitoring Agentic.

Arquitectura de 3 capas: primitivos → semánticos → componente. Todos los colores provienen del brandbook One Star Labs — Design System; lo que no está en el brandbook está derivado y comentado en el CSS.

• 14 componentes React tipados (.d.ts publicados)
• Light y dark en todos los tokens, con prefers-color-scheme para el primer paint
• 46/46 pares texto/fondo verificados WCAG 2.2 AA por script en cada build
• Tipografía incluida en el paquete (Poppins + JetBrains Mono vía @fontsource)
• Compatible con el contrato de tokens de react-admin-shell

Instalación

npm install osl-ds-full

react y react-dom (>= 18) son peer dependencies.

Uso mínimo

// main.tsx — una sola vez en el entry de la app
import 'osl-ds-full/styles.css';  // tokens + estilos de componentes
import 'osl-ds-full/fonts';       // Poppins + JetBrains Mono

import { Button, Card, CardTitle, Badge, useTheme } from 'osl-ds-full';

export function DeviceCard() {
  const { theme, toggleTheme } = useTheme();

  return (
    <Card
      header={<><CardTitle>ubuntu-llm-01</CardTitle><Badge tone="success" dot>Online</Badge></>}
      footer={<><Button variant="primary" size="sm">Runbook</Button>
               <Button variant="secondary" size="sm">Terminal</Button></>}
    >
      Ubuntu 22.04 LTS — Perfil: LLM Server. Última auditoría hace 2h.
      <Button variant="link" onClick={toggleTheme}>Tema actual: {theme}</Button>
    </Card>
  );
}

Solo los tokens

import 'osl-ds-full/tokens.css';              // únicamente capas 1 y 2
import { palette, semanticColors } from 'osl-ds-full/tokens';

Tema claro / oscuro

El tema se controla con el atributo data-theme en <html> — exactamente lo que escribe el ThemeContext de react-admin-shell:

<html data-theme="dark">

• useTheme() lo hace por ti: persiste la elección en localStorage (osl-theme) y sigue al sistema mientras no haya elección explícita.
• applyTheme('dark') lo escribe sin hook, útil en un script inline anti-flash.
• Sin atributo, @media (prefers-color-scheme: dark) ya entrega los valores oscuros en el primer paint.

Contrato de tokens

tokens.css publica dos capas. La primera, con prefijo --osl-*, son los primitivos del brandbook. La segunda son los alias semánticos que consume el shell tal cual:

--color-bg  --color-bg-elevated  --color-surface  --color-border  --color-border-strong
--color-text  --color-text-muted  --color-text-disabled  --color-link
--color-primary  --color-primary-hover  --color-primary-active
--color-primary-soft  --color-primary-contrast
--color-hover  --color-active  --color-focus
--color-success  --color-warning  --color-danger  --color-info  (+ -soft y -contrast)
--font-body  --font-heading  --font-mono
--radius-sm|md|lg|full     --shadow-sm|md|lg
--space-1|2|3|4|6|8|12|16  --transition-fast|base
--gradient-brand

Un componente de aplicación nunca usa --osl-* directamente: usa la capa semántica.

Paleta (brandbook)

| Escala | 50 | 500 | 950 | |---|---|---|---| | Blue (marca) | #f0f4ff | #0065ff | #061937 | | Cyan (acento) | #f0fbfd | #00d4f0 | #063137 | | Neutral | #f8f9fb | #6e7785 | #0f1117 |

Feedback: green 500 #22c55e / 700 #15803d, amber 500 #f59e0b / 700 #b45309, red 500 #ef4444 / 700 #b91c1c. Gradiente de marca: linear-gradient(135deg, #0065ff 0%, #00d4f0 100%).

Iconografía

El DS no trae íconos propios. El estándar es lucide-react (mismo que react-admin-shell), pasado por props (leadingIcon, icon). El brandbook ilustra la selección con Tabler; la equivalencia de nombres está en docs/AI-GUIDE.md.

npm install lucide-react

Componentes

Button, Input, Select, Textarea, Checkbox, Radio + RadioGroup, Card + CardTitle, Badge, Alert, Modal, Tabs, Table, Avatar, Spinner.

Props completas en docs/components.json. Guía de uso para agentes en docs/AI-GUIDE.md.

Desarrollo

npm run check:contrast   # valida WCAG AA de todos los pares declarados
npm run build            # contraste + tsc (.js + .d.ts) + CSS concatenado
node scripts/smoke.mjs   # renderiza todo y genera preview-light/dark.html

El build falla si algún par de color queda bajo el umbral. Un par que no cumple se corrige ajustando el gris o el tono derivado, nunca el color de marca.

Licencia

MIT