119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
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);
|