import { createTheme } from '@vanilla-extract/css';
import { color } from 'folds';

// Dawn / Stream-v2 palette — see docs/plans/dm_1x1_redesign.md §1, §6 and
// docs/design/new-direct-messages-design/project/stream-v2-dawn.jsx const DAWN.
//
// Tier mapping vs. the canon (DAWN.{bg2, bg, surface}):
//   bg2  #0d0e11  — app/window deepest level. The DM list panel AND the chat
//                   content area share this tone in the canon (ChatListDawn
//                   line 130 `<div ... background: DAWN.bg2 ...>` ===
//                   DawnDesktopV3 line 220 `<WindowFrame bg={DAWN.bg2} ...>`).
//                   We use it for both `Background.Container` (sidebar / nav
//                   panels) and `Surface.Container` (room view) so the two big
//                   areas read as one uniform surface, divided only by a
//                   1-pixel line — matches the canon.
//   bg   #181a20  — raised one notch. In the canon this paints chat bubbles,
//                   file cards, the composer container. Mapped to
//                   `SurfaceVariant.Container`.
//   surface #21232b — raised two notches. Used for chips, reactions, active /
//                   hover rows. Mapped to `*.ContainerActive` family.

const darkThemeData = {
  Background: {
    Container: '#0d0e11',
    ContainerHover: '#181a20',
    ContainerActive: '#21232b',
    ContainerLine: '#1f2228',
    OnContainer: '#e6e6e9',
  },

  Surface: {
    Container: '#0d0e11',
    ContainerHover: '#181a20',
    ContainerActive: '#21232b',
    ContainerLine: '#1f2228',
    OnContainer: '#e6e6e9',
  },

  SurfaceVariant: {
    Container: '#181a20',
    ContainerHover: '#21232b',
    ContainerActive: '#2a2d36',
    ContainerLine: '#2f3340',
    OnContainer: '#e6e6e9',
  },

  Primary: {
    Main: '#9580ff',
    MainHover: '#a59cff',
    MainActive: '#b0a8ff',
    MainLine: '#bcb5ff',
    OnMain: '#0c0c0e',
    Container: '#3a3260',
    ContainerHover: '#443878',
    ContainerActive: '#4d3f87',
    ContainerLine: '#564796',
    OnContainer: '#e0dcff',
  },

  Secondary: {
    Main: '#e6e6e9',
    MainHover: '#d6d6d9',
    MainActive: '#c6c6c9',
    MainLine: '#b6b6b9',
    OnMain: '#181a20',
    Container: '#21232b',
    ContainerHover: '#2a2d36',
    ContainerActive: '#34384a',
    ContainerLine: '#3a3e54',
    OnContainer: '#e6e6e9',
  },

  Success: {
    Main: '#7dd3a8',
    MainHover: '#90dcb5',
    MainActive: '#9ee0bf',
    MainLine: '#abe5c8',
    OnMain: '#0e2e1f',
    Container: '#1a4a32',
    ContainerHover: '#1f5638',
    ContainerActive: '#23613f',
    ContainerLine: '#286c46',
    OnContainer: '#caf2d9',
  },

  Warning: {
    Main: '#d4b88a',
    MainHover: '#dabf95',
    MainActive: '#dfc59e',
    MainLine: '#e3cba8',
    OnMain: '#3a2c14',
    Container: '#5a4422',
    ContainerHover: '#664e27',
    ContainerActive: '#71562b',
    ContainerLine: '#7c5e30',
    OnContainer: '#f3e2c5',
  },

  Critical: {
    Main: '#c08e7b',
    MainHover: '#c89a88',
    MainActive: '#cea591',
    MainLine: '#d4ad9a',
    OnMain: '#3a1f17',
    Container: '#592e22',
    ContainerHover: '#653527',
    ContainerActive: '#6f3a2a',
    ContainerLine: '#7a402d',
    OnContainer: '#f0d4c8',
  },

  Other: {
    FocusRing: 'rgba(149, 128, 255, 0.5)',
    Shadow: 'rgba(0, 0, 0, 1)',
    Overlay: 'rgba(0, 0, 0, 0.85)',
  },
};

export const darkTheme = createTheme(color, darkThemeData);