tradecn/ui

tradecn-slate-east

Slate's light and dark palettes with the direction pair reversed: red for up and green for down.

:root {
  --accent: oklch(0.93 0.012 245);
  --accent-foreground: oklch(0.25 0.03 245);
  --background: oklch(0.985 0.003 250);
  --border: oklch(0.88 0.008 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.02 250);
  --chart-1: oklch(0.5 0.15 245);
  --chart-2: oklch(0.58 0.15 60);
  --chart-3: oklch(0.52 0.13 165);
  --chart-4: oklch(0.5 0.15 330);
  --chart-5: oklch(0.58 0.12 90);
  --chart-6: oklch(0.52 0.12 225);
  --chart-7: oklch(0.5 0.18 40);
  --chart-8: var(--color-foreground);
  --destructive: oklch(0.53 0.22 27);
  --down: oklch(0.52 0.13 165);
  --down-soft: oklch(0.52 0.13 165 / 18%);
  --expiring: oklch(0.53 0.2 350);
  --expiring-soft: oklch(0.53 0.2 350 / 18%);
  --flat: var(--color-muted-foreground);
  --flat-soft: oklch(0.55 0 0 / 14%);
  --foreground: oklch(0.2 0.02 250);
  --input: oklch(0.88 0.008 250);
  --link-1: oklch(0.53 0.2 25);
  --link-2: oklch(0.5 0.15 250);
  --link-3: oklch(0.5 0.13 150);
  --link-4: oklch(0.52 0.12 85);
  --muted: oklch(0.95 0.006 250);
  --muted-foreground: oklch(0.46 0.02 250);
  --panel-active: var(--color-primary);
  --panel-drag-target: var(--color-ring);
  --panel-error: var(--color-destructive);
  --panel-sync: oklch(0.5 0.12 220);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.02 250);
  --primary: oklch(0.5 0.15 245);
  --primary-foreground: oklch(0.99 0.003 250);
  --radius: 0.375rem;
  --ring: oklch(0.5 0.15 245);
  --secondary: oklch(0.95 0.006 250);
  --secondary-foreground: oklch(0.25 0.02 250);
  --sidebar: oklch(0.965 0.005 250);
  --sidebar-accent: oklch(0.92 0.01 245);
  --sidebar-accent-foreground: oklch(0.25 0.03 245);
  --sidebar-border: oklch(0.88 0.008 250);
  --sidebar-foreground: oklch(0.2 0.02 250);
  --sidebar-primary: oklch(0.5 0.15 245);
  --sidebar-primary-foreground: oklch(0.99 0.003 250);
  --sidebar-ring: oklch(0.5 0.15 245);
  --stale: oklch(0.52 0.13 75);
  --stale-soft: oklch(0.52 0.13 75 / 16%);
  --tradecn-color-body-bg: oklch(0.985 0.003 250);
  --tradecn-color-body-fg: oklch(0.2 0.02 250);
  --tradecn-font-accessible: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --tradecn-font-accessible-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tradecn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tradecn-font-numeric: var(--tradecn-font-sans);
  --tradecn-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --tradecn-font-weight-body: 450;
  --tradecn-font-weight-grid: 500;
  --tradecn-line-height-body: 1.45;
  --tradecn-line-height-grid: 1.35;
  --tradecn-numeric-variant: lining-nums tabular-nums;
  --tradecn-text-size-body: 14px;
  --tradecn-text-size-grid: 13px;
  --tradecn-text-size-grid-min: 12px;
  --up: oklch(0.46 0.19 40);
  --up-soft: oklch(0.46 0.19 40 / 18%);
}

.dark {
  --accent: oklch(0.29 0.02 245);
  --accent-foreground: oklch(0.95 0.008 250);
  --background: oklch(0.16 0.01 250);
  --border: oklch(0.3 0.012 250);
  --card: oklch(0.2 0.012 250);
  --card-foreground: oklch(0.95 0.008 250);
  --chart-1: oklch(0.74 0.12 240);
  --chart-2: oklch(0.78 0.15 65);
  --chart-3: oklch(0.74 0.15 165);
  --chart-4: oklch(0.74 0.15 330);
  --chart-5: oklch(0.85 0.13 90);
  --chart-6: oklch(0.78 0.11 225);
  --chart-7: oklch(0.7 0.18 40);
  --chart-8: var(--color-foreground);
  --destructive: oklch(0.7 0.19 22);
  --down: oklch(0.77 0.14 165);
  --down-soft: oklch(0.77 0.14 165 / 18%);
  --expiring: oklch(0.74 0.17 350);
  --expiring-soft: oklch(0.74 0.17 350 / 18%);
  --flat: var(--color-muted-foreground);
  --flat-soft: oklch(0.7 0 0 / 14%);
  --foreground: oklch(0.95 0.008 250);
  --input: oklch(0.32 0.012 250);
  --link-1: oklch(0.7 0.19 25);
  --link-2: oklch(0.7 0.14 250);
  --link-3: oklch(0.74 0.14 150);
  --link-4: oklch(0.85 0.15 90);
  --muted: oklch(0.24 0.01 250);
  --muted-foreground: oklch(0.72 0.015 250);
  --panel-active: var(--color-primary);
  --panel-drag-target: var(--color-ring);
  --panel-error: var(--color-destructive);
  --panel-sync: oklch(0.78 0.12 220);
  --popover: oklch(0.21 0.012 250);
  --popover-foreground: oklch(0.95 0.008 250);
  --primary: oklch(0.74 0.12 240);
  --primary-foreground: oklch(0.16 0.02 250);
  --ring: oklch(0.7 0.12 240);
  --secondary: oklch(0.26 0.012 250);
  --secondary-foreground: oklch(0.95 0.008 250);
  --sidebar: oklch(0.13 0.01 250);
  --sidebar-accent: oklch(0.24 0.012 250);
  --sidebar-accent-foreground: oklch(0.95 0.008 250);
  --sidebar-border: oklch(0.3 0.012 250);
  --sidebar-foreground: oklch(0.95 0.008 250);
  --sidebar-primary: oklch(0.74 0.12 240);
  --sidebar-primary-foreground: oklch(0.16 0.02 250);
  --sidebar-ring: oklch(0.7 0.12 240);
  --stale: oklch(0.8 0.15 80);
  --stale-soft: oklch(0.8 0.15 80 / 16%);
  --tradecn-color-body-bg: oklch(0.16 0.01 250);
  --tradecn-color-body-fg: oklch(0.95 0.008 250);
  --tradecn-font-accessible: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --tradecn-font-accessible-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tradecn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tradecn-font-numeric: var(--tradecn-font-sans);
  --tradecn-font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --tradecn-font-weight-body: 450;
  --tradecn-font-weight-grid: 500;
  --tradecn-line-height-body: 1.45;
  --tradecn-line-height-grid: 1.35;
  --tradecn-numeric-variant: lining-nums tabular-nums;
  --tradecn-text-size-body: 14px;
  --tradecn-text-size-grid: 13px;
  --tradecn-text-size-grid-min: 12px;
  --up: oklch(0.66 0.19 40);
  --up-soft: oklch(0.66 0.19 40 / 18%);
}

@layer base {
  :root {
    font-variant-numeric: var(--tradecn-numeric-variant);
  }
  .tradecn-num, [data-numeric] {
    font-variant-numeric: var(--tradecn-numeric-variant);
  }
}
:root[data-accessibility="hyperlegible"], [data-accessibility="hyperlegible"] {
  --tradecn-font-sans: var(--tradecn-font-accessible);
  --tradecn-font-mono: var(--tradecn-font-accessible-mono);
}

Installation

pnpm dlx shadcn@latest add tradecn/ui/tradecn-slate-east#v2.0.0
npx shadcn@latest add tradecn/ui/tradecn-slate-east#v2.0.0
yarn dlx shadcn@latest add tradecn/ui/tradecn-slate-east#v2.0.0
bunx --bun shadcn@latest add tradecn/ui/tradecn-slate-east#v2.0.0

Usage

A theme installs no files. It rewrites the variables in your stylesheet. Configure the @tradecn namespace for the release you want, following Installation. When reading an older versioned page, select that same release in the Installation guide's version menu before copying the namespace. Replace src/index.css below with the tailwind.css path from your components.json:

pnpm dlx shadcn@latest add @tradecn/tradecn-slate-east --diff src/index.css

npx shadcn@latest add @tradecn/tradecn-slate-east --diff src/index.css

yarn dlx shadcn@latest add @tradecn/tradecn-slate-east --diff src/index.css

bunx --bun shadcn@latest add @tradecn/tradecn-slate-east --diff src/index.css

A bare --diff does not show theme CSS changes. Review the stylesheet diff and commit your current files, then remove --diff and the stylesheet path to install the theme.

API Reference

See tradecn-slate for the shared surfaces, installation behavior, typography resets, mode selection, and contrast-test coverage. Install one theme; installing another replaces its variables.

What differs

Both modes swap up with down and up-soft with down-soft. Other palette values and the base CSS match Slate. The theme test checks that only these four palette keys differ.

Token Light Dark
--up oklch(0.46 0.19 40) oklch(0.66 0.19 40)
--down oklch(0.52 0.13 165) oklch(0.77 0.14 165)
--up-soft oklch(0.46 0.19 40 / 18%) oklch(0.66 0.19 40 / 18%)
--down-soft oklch(0.52 0.13 165 / 18%) oklch(0.77 0.14 165 / 18%)

Up and down describe direction, not whether a move benefits a position. Components that reuse these tokens also change: FeedHealth's connected dot uses up, so it becomes red. destructive and panel-error keep Slate's values.

Why it exists

Red for rises and green for falls appears in mainland Chinese A-share displays, Japan's Rakuten Market Speed, and Yahoo Taiwan's stock signals. Choose the convention your desk expects; these examples do not establish a rule for every screen in each region.

Bazley, Cronqvist, and Mormann found that red affected risk preferences, return expectations, and trading decisions, with muted effects in their China experiments, where red is associated with prosperity (paper, university summary). That finding supports considering the audience's color associations; it does not establish one convention for all Asian markets.

The pair adapts Okabe and Ito's vermilion and bluish green, with Slate's assignments reversed. Both colors clear 4.5 to 1 on the page and card in both modes. Swapping them preserves the calculated grayscale ratios: 1.54 to 1 in light and 1.72 to 1 in dark. These gaps do not guarantee distinguishability in print or with color vision deficiencies. Keep direction visible in signs or labels, as WCAG's use-of-color guidance requires when color alone carries meaning.

This page is docs/tradecn-slate-east.md at v2.0.0.