@ciromaciel/dashboard-kit 1.5.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ciromaciel/dashboard-kit",
-    "version": "1.5.0",
+    "version": "1.7.0",
     "license": "MIT",
     "type": "module",
     "description": "The components every dashboard shares: table, empty state, loading state, destructive confirm, danger zone and wordmark.",

package/src/components/ColorSchemeToggle.jsx

@@ -0,0 +1,56 @@
+import { ActionIcon, Tooltip, useMantineColorScheme } from '@mantine/core'
+import { useMounted } from '@mantine/hooks'
+import { IconDeviceDesktop, IconMoon, IconSun } from '@tabler/icons-react'
+
+/**
+ * The theme button — one icon that cycles Automático → Claro → Escuro
+ * (decided 14/10/2026).
+ *
+ * Automático follows the device and is the default for anyone who never chose.
+ * A single button hides its state in the icon, so the state is said in words
+ * twice: the tooltip and the accessible name both read "Tema: Claro. Mudar
+ * para Escuro." — what it is now, and what one click does.
+ *
+ * The icon waits for the mount. Mantine reads the stored choice from
+ * localStorage on the client only; a prerendered page would otherwise paint the
+ * server's icon and swap it on hydration.
+ *
+ * The same component lives in the components-kit for the sites; the two must
+ * move together.
+ */
+const NEXT = { auto: 'light', light: 'dark', dark: 'auto' }
+const NAME = { auto: 'Automático', light: 'Claro', dark: 'Escuro' }
+const ICON = { auto: IconDeviceDesktop, light: IconSun, dark: IconMoon }
+
+export function ColorSchemeToggle({ size = 36, ...props }) {
+    const { colorScheme, setColorScheme } = useMantineColorScheme()
+    const isMounted = useMounted()
+    const current = isMounted ? colorScheme : 'auto'
+    const Icon = ICON[current]
+    const label = `Tema: ${NAME[current]}. Mudar para ${NAME[NEXT[current]]}.`
+
+    return (
+        <Tooltip
+            label={label}
+            position="top"
+            withArrow={false}
+        >
+            <ActionIcon
+                data-color-scheme-toggle
+                variant="subtle"
+                color="gray.9"
+                size={size}
+                radius={0}
+                aria-label={label}
+                onClick={() => setColorScheme(NEXT[current])}
+                {...props}
+            >
+                <Icon
+                    size={18}
+                    stroke={1.5}
+                    aria-hidden
+                />
+            </ActionIcon>
+        </Tooltip>
+    )
+}

package/src/components/SidebarShell.jsx

@@ -1,9 +1,10 @@
 import { ActionIcon, Box, Group, ScrollArea, Stack, Text, TextInput, Tooltip } from '@mantine/core'
-import { IconSearch, IconX } from '@tabler/icons-react'
+import { IconPlus, IconSearch, IconX } from '@tabler/icons-react'
 
 import { GroupLabel } from './GroupLabel'
 import { ListSkeleton } from './ListSkeleton'
 import { NavItem } from './NavItem'
+import { ColorSchemeToggle } from './ColorSchemeToggle'
 
 /**
  * A coluna lateral de um painel, por CONFIGURAÇÃO em vez de por cópia.
@@ -39,8 +40,13 @@ import { NavItem } from './NavItem'
  * Nada de quota entra aqui. O painel resolve o gate e passa `createAllowed`
  * booleano — a coluna não sabe o que é um plano.
  */
-/** O botão de criar na linha da busca: quadrado de 36px, preto; em contorno cinza no limite do plano. */
-function CreateSquare({ icon: Icon, label, isAllowed, onClick }) {
+/**
+ * O botão de criar na linha da busca: quadrado de 36px, preto, colado à busca;
+ * em contorno cinza quando o plano chegou ao limite. É a forma única do "+" em
+ * todo painel — exportado como `CreateButton` para as colunas que ainda não
+ * são o SidebarShell. Nunca um item de lista "+ Novo …" abaixo da busca.
+ */
+export function CreateButton({ icon: Icon = IconPlus, label, isAllowed = true, onClick }) {
     return (
         <Tooltip
             label={label}
@@ -196,7 +202,7 @@ export function SidebarShell({
                         }
                         styles={{ input: { height: 36, minHeight: 36, fontSize: 13, background: 'var(--mantine-color-gray-1)' } }}
                     />
-                    {onCreate && <CreateSquare {...criar} />}
+                    {onCreate && <CreateButton {...criar} />}
                 </Group>
             )}
 
@@ -301,15 +307,21 @@ export function SidebarShell({
               menu dele, junto de Conta e Assinatura. Na coluna, competiriam com
               a lista — que é o assunto da coluna.
             */}
-            {footer && (
-                <Box
-                    pt={16}
-                    w="100%"
-                    style={{ borderTop: 'var(--rlg-border)' }}
-                >
-                    {footer}
-                </Box>
-            )}
+            {/*
+              O botão de tema mora ao lado do cartão: é preferência da pessoa,
+              como Conta, e não compete com a lista. Sem cartão, ele fica só.
+            */}
+            <Group
+                pt={16}
+                w="100%"
+                gap={8}
+                wrap="nowrap"
+                align="center"
+                style={{ borderTop: 'var(--rlg-border)' }}
+            >
+                {footer && <Box style={{ flex: 1, minWidth: 0 }}>{footer}</Box>}
+                <ColorSchemeToggle style={footer ? undefined : { marginLeft: 'auto' }} />
+            </Group>
 
             {children}
         </Stack>

package/src/components/SupportModal.jsx

@@ -81,14 +81,13 @@ export function useHealthCheck(enabled, apiUrl) {
 /**
  * The status light.
  *
- * `--rlg-status-up` is the system's only green, and it exists because this is
- * NOT the success of an action (that is gray.9 + IconCheck): it is the measured
- * state of an external system, and it never appears without the word next to
- * it.
+ * Green is the system's success colour (`--rlg-success`), the same one the
+ * notification and the status bars use. It never appears without the word
+ * next to it.
  */
 export function HealthRow({ health, host }) {
     const label = health.status === 'up' ? 'No ar' : health.status === 'down' ? 'Sem resposta' : 'Verificando…'
-    const color = health.status === 'up' ? 'var(--rlg-status-up)' : health.status === 'down' ? 'var(--mantine-color-red-6)' : 'var(--mantine-color-gray-4)'
+    const color = health.status === 'up' ? 'var(--rlg-success)' : health.status === 'down' ? 'var(--mantine-color-red-6)' : 'var(--mantine-color-gray-4)'
 
     return (
         <Group

package/src/components/Terminal.jsx

@@ -17,13 +17,18 @@ import { IconCopy, IconCheck } from '@tabler/icons-react'
  * usa em FeaturesGrid layout="split"), para que painel e site mostrem código
  * com a mesma cara. Os valores vieram de lá, não foram escolhidos aqui.
  *
- * O fundo é gray.9 — a única superfície escura do sistema. Ela se justifica
+ * O fundo é #11181C — a única superfície escura do sistema. Ela se justifica
  * porque código é conteúdo citado, não interface: o contraste invertido marca
  * "isto é a máquina falando", e é o mesmo tratamento de qualquer terminal que
  * o desenvolvedor já tem aberto ao lado.
+ *
+ * É LITERAL, não `var(--mantine-color-gray-9)`, de propósito: o terminal é
+ * escuro nos dois temas. No modo escuro o gray.9 vira claro, e o texto branco
+ * daqui ficaria branco sobre branco. A borda é `--rlg-shell-edge`, que no
+ * escuro clareia para o terminal não se fundir com a página.
  */
 const DARK = {
-    shell: 'var(--mantine-color-gray-9)',
+    shell: '#11181C',
     bar: 'rgba(255, 255, 255, 0.06)',
     /*
      * O token vem de `tokens.css` do kit, com fallback ao literal que as
@@ -51,7 +56,7 @@ export function Terminal({ children, label, copy = true, actions, style }) {
     return (
         <Box
             style={{
-                border: '1px solid var(--mantine-color-gray-9)',
+                border: '1px solid var(--rlg-shell-edge, #11181C)',
                 background: DARK.shell,
                 overflow: 'hidden',
                 ...style,
@@ -168,7 +173,7 @@ export function TerminalOutput({ children, label = 'output', tone = 'default' })
     return (
         <Box
             style={{
-                border: '1px solid var(--mantine-color-gray-9)',
+                border: '1px solid var(--rlg-shell-edge, #11181C)',
                 borderTop: 'none',
                 background: DARK.shell,
                 overflow: 'hidden',

package/src/components/notify.js

@@ -10,7 +10,7 @@ import { createElement } from 'react'
  * isn't to invent a color: it's to use the two dimensions that remain, color AND
  * glyph.
  *
- *   success  teal + IconCheck          (a confirmation mark)
+ *   success  green.6 + IconCheck       (a confirmation mark)
  *   error    red  + IconAlertCircle    (the system's chromatic exception)
  *   info     gray + IconInfoCircle     (neutral, asks for no action)
  *
@@ -63,7 +63,7 @@ const STICKY = { autoClose: false }
 
 export const notify = {
     success(title, message) {
-        show('teal', icon(IconCheck), title, message)
+        show('green.6', icon(IconCheck), title, message)
     },
 
     error(title, message) {

package/src/index.js

@@ -64,6 +64,7 @@ export { DangerZone } from './components/DangerZone'
 export { ZenLabel } from './components/ZenLabel'
 export { notify } from './components/notify'
 export { NOTIFICATIONS_PROPS, NOTIFY_DESCRIPTION_CSS, notificationTheme } from './components/notify-theme'
+export { panelTheme } from './theme'
 export { Wordmark } from './components/Wordmark'
 export { SupportModal, HealthRow, useHealthCheck } from './components/SupportModal'
 export { AuthLoader } from './components/AuthLoader'
@@ -83,7 +84,8 @@ export { ActiveResource } from './components/ActiveResource'
 export { ColumnBrand } from './components/ColumnBrand'
 export { ListSkeleton } from './components/ListSkeleton'
 export { DashboardFrame, SIDEBAR_WIDTH } from './components/DashboardFrame'
-export { SidebarShell } from './components/SidebarShell'
+export { SidebarShell, CreateButton } from './components/SidebarShell'
+export { ColorSchemeToggle } from './components/ColorSchemeToggle'
 export { AUTH_LABELS, AUTH_TEXTS } from './auth-labels'
 export { CardSkeleton } from './components/CardSkeleton'
 export { MoreResults } from './components/MoreResults'

package/src/theme.js

@@ -0,0 +1,448 @@
+import { createTheme, rem } from '@mantine/core'
+import { notificationTheme } from './components/notify-theme'
+
+/**
+ * The panel theme — one for every dashboard (14/10/2026).
+ *
+ * Until then each panel carried its own `theme.js`: eighteen files, seventeen of
+ * them different, copied from one another at different moments. None held a
+ * real exception — the differences were versions that stopped evolving. They
+ * all agreed on radius and font and diverged on the rest: buttons in two case
+ * styles, h2 bigger than h1, inputs at three sizes.
+ *
+ * A panel now does `export { panelTheme as theme } from '@ciromaciel/dashboard-kit'`,
+ * and an exception that is truly the product's own goes through
+ * `mergeThemeOverrides` with a comment saying why.
+ *
+ * The values come from the Zen design system (ciromaciel.click/design-system),
+ * at the PANEL density: data at 12-14px, screen title at 36px. The ramp is the
+ * same as the components-kit's; the two files must move together.
+ */
+export const panelTheme = createTheme({
+    fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    fontFamilyMonospace: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+
+    /**
+     * Radius 0 is an invariant, not a preference. A rounded corner is pure
+     * chrome — it communicates nothing, it only softens, and softening is the
+     * opposite of what massive hierarchy needs.
+     */
+    defaultRadius: 0,
+
+    /**
+     * h1 is 36px because in a panel the title shares the line with the actions
+     * and the width is controlled — it does not need to scale like a landing
+     * page's.
+     *
+     * Allowed tracking: -0.04em (display), 1px (control), 1.5px and 2px (label).
+     * Display needs to regroup; a label needs to breathe.
+     */
+    /**
+     * A ladder, each step clearly below the one above. Until 14/10/2026 every
+     * panel shipped h2 at 48px and h3 at 32px — both BIGGER than the 36px h1,
+     * the opposite of Law 2. It did not show because 29 of the 30 `order={2}`
+     * calls passed `fz` by hand; the one that trusted the theme got 48px.
+     */
+    headings: {
+        fontFamily: 'Montserrat, sans-serif',
+        fontWeight: '900',
+        sizes: {
+            h1: { fontSize: rem(36), lineHeight: '1', letterSpacing: '-0.04em' },
+            h2: { fontSize: rem(24), lineHeight: '1.1', letterSpacing: '-0.04em' },
+            h3: { fontSize: rem(18), lineHeight: '1.2', letterSpacing: '-0.02em', fontWeight: '800' },
+            h4: { fontSize: rem(15), lineHeight: '1.3', letterSpacing: '-0.02em', fontWeight: '800' },
+            h5: { fontSize: rem(13), lineHeight: '1.3', letterSpacing: '-0.02em', fontWeight: '800' },
+        },
+    },
+
+    /**
+     * Mantine's `--mantine-color-text` is `theme.black`, and no panel set it:
+     * every input, table cell and unstyled text came out #000, a black the ramp
+     * does not contain. gray.9 is the system's black.
+     */
+    black: '#11181C',
+
+    colors: {
+        /**
+         * The ramp. Steps 0-3 are surface and structure; 4-9 are ink. None of
+         * them crosses the boundary.
+         *
+         * gray.9 (#11181C) is not #000: pure black on a large screen vibrates and
+         * tires the eye. gray.4 fails AA for body text (2.6:1) — which is why it
+         * only lives in uppercase labels.
+         */
+        gray: [
+            '#FFFFFF', // 0 · App base
+            '#F9FAFB', // 1 · Alternate surface — table header, hover
+            '#F3F4F6', // 2 · Default hairline — EVERY border in the system
+            '#E5E7EB', // 3 · Mute border — quotation, disabled
+            '#9CA3AF', // 4 · Uppercase label ONLY
+            '#6B7280', // 5 · Labels, captions
+            '#4B5563', // 6 · Body — the most used color
+            '#374151', // 7 · Emphatic body, tabular data
+            '#1F2937', // 8 · Rare
+            '#11181C', // 9 · RiLiGar black — titles, metrics, filled button
+        ],
+
+        /**
+         * The system's chromatic exception. The semantics of LOSS and of error —
+         * never decoration, never the same color as success (Law 5).
+         *
+         * Success is green (below). The distinction is colour AND glyph,
+         * legible without reading the text.
+         */
+        /**
+         * Success — the measured "it worked" (14/10/2026). Green, not teal: it
+         * is the green "No ar" already used in every panel, and it separates
+         * from red better for red-green colour blindness. green.6 fills (dot,
+         * disc, bar); green.7 is the ink for text on white (5.0:1). Like red,
+         * it never appears without the word or the glyph beside it.
+         */
+        /* A rampa que o Mantine usa para as próprias superfícies no escuro
+           (corpo, campo, botão default, texto apagado). São os mesmos valores
+           do bloco escuro do CSS: dark.7 é a base, dark.6 a superfície
+           elevada, dark.4 a borda, dark.0–3 as tintas. */
+        dark: ['#D3D8DE', '#B6BEC8', '#98A1AC', '#7D8794', '#2F3840', '#2A333B', '#1A2127', '#0B0F12', '#080B0D', '#050708'],
+        green: ['#F0FDF4', '#DCFCE7', '#BBF7D0', '#86EFAC', '#4ADE80', '#22C55E', '#16A34A', '#15803D', '#166534', '#14532D'],
+
+        red: ['#FFF5F5', '#FFE3E3', '#FFC9C9', '#FFA8A8', '#FF8787', '#FF6B6B', '#E03131', '#C92A2A', '#B02525', '#962020'],
+    },
+
+    primaryColor: 'gray',
+    primaryShade: 9,
+    autoContrast: true,
+
+    // Zen: shadows exist only for real elevation (Modal, Popover, Menu).
+    // Surfaces use a 1px gray.2 border — never a shadow.
+    shadows: {
+        xs: 'none',
+        sm: 'none',
+        md: '0 4px 20px rgba(0,0,0,0.05)',
+        lg: '0 10px 30px rgba(0,0,0,0.06)',
+        xl: '0 20px 40px rgba(0,0,0,0.08)',
+    },
+
+    other: {
+        // Small Caps Label — the "announcement" of the canonical pair.
+        zenLabel: { fz: 11, fw: 800, tt: 'uppercase', lts: '1.5px', c: 'gray.4' },
+        // Panel geometry (spec §Panel geometry).
+        panel: { sidebar: 300, sidebarCollapsed: 64, px: 48, pt: 40, pb: 80, maw: 1280, headerMb: 32, blockGap: 20 },
+        // Destructive action through persistence, not through a dialog.
+        hold: { holdMs: 3000, tickMs: 50 },
+    },
+
+    components: {
+        // --- SURFACES ---
+        /**
+         * Depth comes from surface contrast and from the 1px hairline — never
+         * from a shadow.
+         *
+         * Paper = a declared surface (the block needs to stand out from the
+         *         stage).
+         * Card  = an invisible grouping (the space is already enough). When in
+         *         doubt, Card.
+         */
+        Paper: {
+            defaultProps: { withBorder: true, shadow: 'none', radius: '0' },
+            vars: () => ({ root: { '--paper-border-color': 'var(--mantine-color-gray-2)' } }),
+        },
+        Card: {
+            defaultProps: { withBorder: true, shadow: 'none', padding: 'lg' },
+            vars: () => ({ root: { '--paper-border-color': 'var(--mantine-color-gray-2)' } }),
+        },
+        Modal: {
+            defaultProps: {
+                centered: true,
+                size: 'md',
+                padding: 'xl',
+                radius: 0,
+                overlayProps: { backgroundOpacity: 0.45 }, // no blur: glassmorphism is chrome
+            },
+            styles: {
+                title: { fontWeight: 800, fontSize: rem(16), letterSpacing: '-0.04em' },
+            },
+        },
+        Menu: {
+            defaultProps: { shadow: 'none', width: 210, withinPortal: true, radius: 0 },
+            styles: theme => ({
+                dropdown: { border: `1px solid ${theme.colors.gray[2]}` },
+                item: { fontSize: rem(13), fontWeight: 500 },
+                label: { fontSize: rem(10), fontWeight: 800, textTransform: 'uppercase', letterSpacing: '1.5px' },
+            }),
+        },
+        Popover: {
+            defaultProps: { shadow: 'none', radius: 0 },
+            styles: theme => ({ dropdown: { border: `1px solid ${theme.colors.gray[2]}` } }),
+        },
+
+        // --- DATA ---
+        /**
+         * The "data" role: 12-14px, gray.7. A 16px paragraph is comfortable; a
+         * 200-row table at 16px is impossible to scan.
+         *
+         * The app's main table is CSS Grid (see components/zen/DataTable) — fr
+         * for content, fixed px for actions, the whole row clickable. These
+         * defaults apply to the simple tables that are left.
+         */
+        Table: {
+            defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'md', withRowBorders: true },
+            styles: theme => ({
+                th: {
+                    fontSize: rem(10),
+                    fontWeight: 800,
+                    textTransform: 'uppercase',
+                    letterSpacing: '1.5px',
+                    color: theme.colors.gray[5],
+                    borderBottom: `1px solid ${theme.colors.gray[2]}`,
+                    whiteSpace: 'nowrap',
+                },
+                td: { borderBottom: `1px solid ${theme.colors.gray[2]}`, fontSize: rem(13), color: theme.colors.gray[7] },
+            }),
+        },
+        Badge: {
+            defaultProps: { size: 'sm', variant: 'outline', color: 'gray', fw: 800, radius: 0 },
+            styles: { label: { textTransform: 'uppercase', letterSpacing: '1.5px', fontSize: rem(10) } },
+        },
+        Code: {
+            styles: { root: { fontSize: rem(12) } },
+        },
+        Skeleton: {
+            // The Skeleton reproduces the content's real grid — and square
+            // corners, like everything else.
+            defaultProps: { radius: 0 },
+        },
+
+        // --- CONTROLS ---
+        /**
+         * Hierarchy without color — filled (primary) → outline (secondary) →
+         * subtle (tertiary).
+         */
+        /*
+         * This panel follows the design system here where the theme inherited from
+         * Analytics did not: a button is a LABEL in a rectangle — uppercase,
+         * 800, 1px tracking (02-tipografia), as the prototype draws it.
+         */
+        Button: {
+            defaultProps: { size: 'sm', radius: '0' },
+            styles: { root: { textTransform: 'uppercase', fontWeight: 800, letterSpacing: '1px', fontSize: rem(12) } },
+        },
+        /**
+         * `loaderProps` exists because `bars` and `oval` do not occupy the same
+         * space with the same number. The ActionIcon sizes its loader at
+         * `calc(var(--ai-size) * 0.55)` — ~15px at the `md` used here. For the
+         * `oval` that is a thin-stroked ring; for the `bars` it is a FULL 15px
+         * block, three bars painted from end to end.
+         *
+         * Next to 16px glyphs with `stroke={1.5}`, the two numbers are equal and
+         * the two visual masses are not: the loader became the heaviest element
+         * of the row, and the whole row seemed to flicker in size when an audit
+         * started.
+         *
+         * 12px gives the loader back the mass of an outline icon. Here and not
+         * in the screen because the mismatch comes from the geometry of `bars`
+         * with the `ActionIcon` — it applies to every icon button in the panel,
+         * and defined case by case it diverges again on the next one.
+         */
+        ActionIcon: {
+            defaultProps: { size: 'md', variant: 'subtle', color: 'gray', radius: 0, loaderProps: { size: 12 } },
+        },
+        /**
+         * The input's frame is the gray.2 hairline at rest and gray.9 on focus.
+         * The `unstyled` variant (used on the stage) is left out: there only the
+         * bottom border exists.
+         *
+         * THE DESCRIPTION GOES BELOW THE FIELD, not between the label and it.
+         *
+         * Mantine's default order (label → description → input) misaligns any
+         * row of side-by-side fields: a two-line description pushes its own
+         * input 34px down, and the neighbor without a description is left
+         * hanging at the top. That is what happened with "Cor de marca / Fonte /
+         * Tema" on the status page screen — three inputs at three heights.
+         *
+         * Below the field, the top of every single-line input coincides, and the
+         * alignment stops depending on how many lines each text takes up. The
+         * reading also improves: the label says what it is, the field shows the
+         * value, and the note explains — in the order in which one reads and
+         * fills it in.
+         *
+         * It applies to the whole panel, not field by field: defined here, it is
+         * invariant; done in the screen, it diverges again on the next form.
+         */
+        TextInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: (theme, props) => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        /**
+         * The PasswordInput was left out when this block was written, and so it
+         * fell back to Mantine's default (`size: "md"`): on the sign-in screen,
+         * the password field was visibly larger than the e-mail one right above
+         * it — font, height and rounded corners, all different.
+         *
+         * It is not a simple input: it carries the eye button
+         * (`visibilityToggle`) and that is why it has its own component in the
+         * theme. Inheriting from `TextInput` does not happen — in Mantine each
+         * component reads its own key.
+         */
+        PasswordInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: (theme, props) => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        Textarea: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: (theme, props) => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        Select: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: (theme, props) => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: props.variant === 'unstyled' ? {} : { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        NumberInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: theme => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        Autocomplete: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: theme => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        /**
+         * The TagsInput is a PILL BOX, not a simple input — and that is why it
+         * misaligned with the TextInput next to it.
+         *
+         * Mantine sizes that box by its content: empty, it measured 22px against
+         * the TextInput's 36px, and it also got larger internal breathing room.
+         * On a "Nome | Tags" row the two fields started with 6px of difference —
+         * too little to name, enough to make the row look crooked.
+         *
+         * The target of `minHeight` is the FRAME (`.mantine-PillsInput-root`),
+         * not the `input`: in this component `input` names the typing field
+         * INSIDE the pill box, and sizing it does not move the frame. That is
+         * what made the first attempt fix nothing.
+         *
+         * The box keeps growing as the tags come in, which is the right behavior
+         * — the minimum only guarantees the alignment at rest.
+         */
+        TagsInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: theme => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: {
+                    border: `1px solid ${theme.colors.gray[2]}`,
+                    minHeight: rem(36),
+                    display: 'flex',
+                    alignItems: 'center',
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                },
+            }),
+        },
+        ColorInput: {
+            defaultProps: { size: 'sm', radius: '0', inputWrapperOrder: ['label', 'input', 'description', 'error'] },
+            styles: theme => ({
+                label: { marginBottom: rem(6), fontWeight: 700, fontSize: rem(13) },
+                input: { border: `1px solid ${theme.colors.gray[2]}` },
+            }),
+        },
+        SegmentedControl: {
+            defaultProps: { size: 'xs', radius: 0, color: 'gray.9' },
+            styles: { label: { fontWeight: 700, fontSize: rem(12) } },
+        },
+        Switch: {
+            defaultProps: { size: 'sm', color: 'gray.9', radius: 0 },
+            styles: { label: { fontSize: rem(13), fontWeight: 500 } },
+        },
+        Checkbox: {
+            defaultProps: { size: 'sm', radius: 0, color: 'gray.9' },
+        },
+        // The prototype's tabs: 11px labels, uppercase, 800, 1px tracking.
+        Tabs: {
+            styles: { tab: { fontSize: rem(11), fontWeight: 800, textTransform: 'uppercase', letterSpacing: '1px', borderRadius: 0 } },
+        },
+        Kbd: {
+            defaultProps: { size: 'xs' },
+            styles: theme => ({
+                root: {
+                    fontFamily: 'var(--mantine-font-family-monospace)',
+                    fontSize: rem(10),
+                    fontWeight: 700,
+                    color: theme.colors.gray[5],
+                    backgroundColor: theme.white,
+                    border: `1px solid ${theme.colors.gray[2]}`,
+                    borderBottomColor: theme.colors.gray[2],
+                    boxShadow: 'none',
+                    borderRadius: 0,
+                },
+            }),
+        },
+        ThemeIcon: {
+            // The ThemeIcon is always square, never a circle.
+            defaultProps: { size: 'lg', variant: 'light', color: 'gray', radius: 0 },
+        },
+        Avatar: {
+            // The system's portrait is square, like the ThemeIcon above.
+            defaultProps: { radius: 0, color: 'gray' },
+        },
+        Alert: {
+            defaultProps: { variant: 'light', color: 'gray', radius: 0 },
+            styles: { title: { fontWeight: 800, fontSize: rem(12) }, message: { fontSize: rem(13) } },
+        },
+        Tooltip: {
+            defaultProps: { fz: 'xs', withArrow: false, openDelay: 300, color: 'gray.9', radius: 0 },
+        },
+        Progress: {
+            defaultProps: { size: 'sm', color: 'gray.9', radius: 0 },
+        },
+        /**
+         * `bars` as the system default, and not `oval`.
+         *
+         * This `type` applies to EVERY loader in the panel — including the one
+         * that Button and ActionIcon build on their own when they receive
+         * `loading`. And that is exactly where the `oval` failed: a ring
+         * spinning inside a 16px button is indistinguishable from a still ring,
+         * and the defect showed up side by side on the same table row — the
+         * status indicator (which already used `bars`) moving, and the one on the
+         * button next to it not.
+         *
+         * The three bars change HEIGHT at different times: the silhouette
+         * changes on every frame, so the movement is legible even at 10px and
+         * even at a glance. It is the difference between an equalizer and a
+         * spinning disc — both spin, only one communicates.
+         */
+        Loader: {
+            defaultProps: { color: 'gray', type: 'bars' },
+        },
+        // The notification comes from the kit: one shape across the apps and the SDK.
+        ...notificationTheme,
+
+        // --- TYPOGRAPHY ---
+        Title: { defaultProps: { lh: 1, c: 'gray.9' } },
+        /**
+         * A Text with no colour inherits — and what it inherits from the page is
+         * body gray.6 (`--mantine-color-text`, set in tokens.css). Until
+         * 14/10/2026 that was #000: a paragraph left without a colour came out
+         * darker than the title. A fixed `c: 'gray.6'` here would break
+         * inheritance instead — the label inside a black button, the line inside
+         * the terminal. Title says gray.9; values and emphasis say their colour.
+         */
+        Text: { defaultProps: { lh: 1.6 } },
+        Anchor: { defaultProps: { underline: 'never', fw: 500, c: 'gray.9' } },
+        List: { defaultProps: { spacing: 'xs' } },
+        Divider: { defaultProps: { color: 'gray.2' } },
+    },
+})

package/src/tokens.css

@@ -29,21 +29,18 @@
     --rlg-terminal-rule: rgba(255, 255, 255, 0.08);
 
     /*
-     * The system's only green, used by the SupportModal's status light.
+     * Success — one green for every "it worked" (14/10/2026): the notification
+     * disc, the "No ar" light, the status bars, the inline "Salvo". It used to
+     * be three (teal in notify, teal.7 in the status bars, this green in the
+     * light). `--rlg-success` fills; `--rlg-success-ink` is for text on white.
      *
-     * Five panels declared it with this same value; Auth and Storage did not —
-     * and those are exactly the two that did not yet have the modal. Without
-     * this floor the "No ar" dot would render WITH NO COLOUR at all in those
-     * two: a `var()` with no value and no fallback does not apply the property,
-     * and there is no build error and no console warning. It is the same defect
-     * as the hairline described above.
-     *
-     * It lives outside the gray ramp because this is not the success of an
-     * ACTION (that is gray.9 + IconCheck): it is the measured state of an
-     * external system. The rule that keeps the exception honest is that the
-     * colour never appears without the word beside it.
+     * `--rlg-status-up` is the old name, kept so that panels still reading it
+     * get the same green. As with red, the colour never appears without the
+     * word or the glyph beside it.
      */
-    --rlg-status-up: #16a34a;
+    --rlg-success: var(--mantine-color-green-6, #16a34a);
+    --rlg-success-ink: var(--mantine-color-green-7, #15803d);
+    --rlg-status-up: var(--rlg-success);
 }
 
 /*
@@ -93,7 +90,18 @@
  * runtime, after this sheet.
  */
 @media (prefers-contrast: more) {
-    :root:root {
+    :root:root:root[data-mantine-color-scheme='dark'] {
+        /* No escuro o deslocamento é para o claro: o filete aparece, o label
+           e a legenda sobem um degrau. */
+        --mantine-color-gray-2: #3a444d;
+        --mantine-color-gray-3: #4b5563;
+        --mantine-color-gray-4: #b6bec8;
+        --mantine-color-gray-5: #d3d8de;
+        --mantine-color-gray-6: #e5e7eb;
+    }
+
+    :root:root[data-mantine-color-scheme='light'],
+    :root:root:not([data-mantine-color-scheme]) {
         --mantine-color-gray-2: #9ca3af;
         --mantine-color-gray-3: #9ca3af;
         --mantine-color-gray-4: #4b5563;
@@ -114,3 +122,107 @@
         transition: none !important;
     }
 }
+
+/*
+ * The page's colour is body. `--mantine-color-text` is what every text without
+ * a colour of its own inherits — body, a Text without `c`, a table cell, a list
+ * item. It was #000 (Mantine's default `black`), darker than the title itself.
+ * `:root:root[...]` beats the `:root[...]` Mantine injects after this sheet.
+ * Same rule as the components-kit's global.css.
+ */
+:root:root[data-mantine-color-scheme='light'] {
+    --mantine-color-text: var(--mantine-color-gray-6);
+}
+
+/* ===========================================================================
+ * MODO ESCURO (14/10/2026) — a rampa por elevação.
+ *
+ * A regra da Apple: a base recua e cada camada que sobe clareia — página,
+ * cartão e modal, menu aberto. Não é a rampa invertida (a proposta antiga
+ * espelhava gray.0 ↔ gray.9, e o modal herdava a cor exata da página).
+ *
+ * Os NOMES não mudam: gray.0 continua sendo "base", gray.9 continua sendo
+ * "título". Muda o valor que cada papel recebe, e todo `c="gray.6"` e
+ * `var(--mantine-color-gray-2)` já escrito acompanha sozinho. O Mantine monta
+ * `--mantine-color-gray-filled` e afins como `var(--mantine-color-gray-9)`,
+ * então o botão preenchido também vira.
+ *
+ * "white" vira a superfície elevada (#1A2127), e isso resolve duas coisas
+ * de uma vez: o Paper `bg="white"` sobe um degrau acima da página, e o texto
+ * que o autoContrast pôs em "white" sobre um preenchimento gray.9 — agora
+ * claro — fica escuro e legível.
+ *
+ * O que NÃO acompanha é o hexadecimal escrito à mão. Superfícies que são
+ * escuras nos dois temas (terminal, bloco de código, player) escrevem as
+ * suas cores literais de propósito; todo o resto usa o token.
+ *
+ * Mesmo bloco no global.css do components-kit e no tokens.css do
+ * dashboard-kit — os dois andam juntos.
+ * =========================================================================== */
+:root:root[data-mantine-color-scheme='dark'] {
+    color-scheme: dark;
+
+    --mantine-color-gray-0: #0b0f12; /* base da página */
+    --mantine-color-gray-1: #12181d; /* palco alternado, hover */
+    --mantine-color-gray-2: #222a31; /* filete */
+    --mantine-color-gray-3: #2f3840; /* borda forte, desabilitado */
+    --mantine-color-gray-4: #7d8794; /* label caixa alta — 5,3:1 */
+    --mantine-color-gray-5: #98a1ac; /* legenda — 7,4:1 */
+    --mantine-color-gray-6: #b6bec8; /* corpo — 10,3:1 */
+    --mantine-color-gray-7: #d3d8de; /* dado — 13,4:1 */
+    --mantine-color-gray-8: #e5e7eb;
+    --mantine-color-gray-9: #f3f4f6; /* título, botão — 17,5:1 */
+
+    --mantine-color-white: #1a2127; /* superfície elevada; tinta sobre preenchimento claro */
+    --mantine-color-body: #0b0f12;
+    --mantine-color-text: var(--mantine-color-gray-6);
+    --mantine-color-dimmed: var(--mantine-color-gray-5);
+    --mantine-color-placeholder: var(--mantine-color-gray-4);
+    --mantine-color-default: #1a2127;
+    --mantine-color-default-hover: #232b32;
+    --mantine-color-default-color: var(--mantine-color-gray-9);
+    --mantine-color-default-border: var(--mantine-color-gray-3);
+
+    /* Vermelho e verde clareiam: sobre a base escura, o red.6 (#E03131) e o
+       green.6 (#16A34A) do claro ficam abaixo de 4,5:1 como texto. */
+    --mantine-color-red-0: #2a1416;
+    --mantine-color-red-1: #3a1a1d;
+    --mantine-color-red-2: #5a2427;
+    --mantine-color-red-6: #ff6b6b;
+    --mantine-color-red-7: #ff8787;
+    --mantine-color-red-filled: #ff6b6b;
+    --mantine-color-red-filled-hover: #ff8787;
+    --mantine-color-green-6: #22c55e;
+    --mantine-color-green-7: #4ade80;
+
+    --rlg-elevated: #1a2127;   /* modal, gaveta */
+    --rlg-elevated-2: #232b32; /* menu, popover, lista suspensa, notificação */
+    --rlg-shell-edge: #2f3840; /* borda do terminal, escuro nos dois temas */
+}
+
+/* As camadas que sobem. No claro todas são brancas e a borda separa; no
+   escuro cada uma clareia um degrau. */
+:root[data-mantine-color-scheme='dark'] .mantine-Modal-content,
+:root[data-mantine-color-scheme='dark'] .mantine-Modal-header,
+:root[data-mantine-color-scheme='dark'] .mantine-Drawer-content,
+:root[data-mantine-color-scheme='dark'] .mantine-Drawer-header {
+    background-color: var(--rlg-elevated);
+}
+:root[data-mantine-color-scheme='dark'] .mantine-Popover-dropdown,
+:root[data-mantine-color-scheme='dark'] .mantine-Menu-dropdown,
+:root[data-mantine-color-scheme='dark'] .mantine-Combobox-dropdown,
+:root[data-mantine-color-scheme='dark'] .mantine-HoverCard-dropdown,
+:root[data-mantine-color-scheme='dark'] .mantine-Notification-root {
+    background-color: var(--rlg-elevated-2);
+}
+
+/* Imagens. A ilustração da casa é monocromática por regra (traço na rampa
+   cinza), então no escuro ela inverte: o traço preto vira claro e o fundo
+   branco some na página. Foto e captura só baixam o brilho, como a Apple
+   pede para imagem de fundo branco. `data-keep-colors` desliga as duas. */
+:root[data-mantine-color-scheme='dark'] img[src$='.svg']:not([data-keep-colors]) {
+    filter: invert(1) hue-rotate(180deg);
+}
+:root[data-mantine-color-scheme='dark'] img:not([src$='.svg']):not([data-keep-colors]) {
+    filter: brightness(0.88);
+}