diff --git a/nym-wallet/src/theme/nym2-map.ts b/nym-wallet/src/theme/nym2-map.ts new file mode 100644 index 0000000000..e9c5b8a2d9 --- /dev/null +++ b/nym-wallet/src/theme/nym2-map.ts @@ -0,0 +1,30 @@ +// Wire 3: Nym 2.0 token → wallet MUI palette mapping — APPLIED 2026-06-03. +// All six changes confirmed by Hux and applied to theme.tsx. +// Reference: nym2-tokens.ts (sourced from nym-color-tokens_fin.html, 2026-05-29). + +import { nym2Dark, nym2Light } from './nym2-tokens'; + +// Applied to theme.tsx (dark mode): +export const walletPaletteUpdates = { + highlight: nym2Dark.primary, // #5BF0A0 — primary green + backgroundMain: nym2Dark.background, // #0A0A0A — near-black + backgroundPaper: nym2Dark.surface, // #1A1A1C + info: nym2Dark.info, // #485ECA — teal → indigo + error: nym2Dark.error, // #E73E14 + textSubdued: nym2Dark.textSecondary, // #AEACB1 +} as const; + +// Light mode equivalents — not yet applied (wallet is dark-mode-only for MVP). +// Apply when light theme ships. +export const walletLightUpdates = { + // highlight: nym2Light.primary, // #1ED674 + // backgroundMain: nym2Light.background, // #FFFFFF + // backgroundPaper: nym2Light.surface, // #F5F5FA + // info: nym2Light.info, // #485ECA + // error: nym2Light.error, // #E73E14 + // textSubdued: nym2Light.textSecondary, // #5A5A60 +} as const; + +// Not applied — separate semantic from primary green. +// nymPalette.success left at rgb(20, 231, 111) pending design decision on +// primary vs success distinction (Nym 2.0 success = #28C96C, different hue). diff --git a/nym-wallet/src/theme/nym2-tokens.ts b/nym-wallet/src/theme/nym2-tokens.ts new file mode 100644 index 0000000000..19a9f6ed86 --- /dev/null +++ b/nym-wallet/src/theme/nym2-tokens.ts @@ -0,0 +1,49 @@ +// Nym 2.0 design system tokens — sourced from nym-color-tokens_fin.html (2026-05-29). +// These are the canonical values exported from the Figma Colors collection. +// Do not edit by hand; update from the reference file when Figma variables are refreshed. + +export const nym2Dark = { + primary: '#5BF0A0', + primaryHover: '#4AD88C', + primaryPressed: '#2DE783', + primaryDisabled: '#B4DAC6', + primaryText: '#0B0B0B', + background: '#090909', + surface: '#1D1D1F', + surfaceAlt: '#262628', + border: '#3A3A3C', + divider: '#3A3A3C', + textPrimary: '#FFFFFF', + textSecondary: '#AEACB1', + textTertiary: '#8B8B90', + textDisabled: '#6C6C6F', + success: '#28C96C', + warning: '#FFCC33', + error: '#E73E14', + info: '#485ECA', + link: '#2D7BFF', + linkVisited: '#6A66FF', +} as const; + +export const nym2Light = { + primary: '#1ED674', + primaryHover: '#158551', + primaryPressed: '#0F6E42', + primaryDisabled: '#B4DAC6', + primaryText: '#0B0B0B', + background: '#FFFFFF', + surface: '#F5F5FA', + surfaceAlt: '#EEEEF6', + border: '#DCDCE6', + divider: '#EBEBF2', + textPrimary: '#0A0A0A', + textSecondary: '#5A5A60', + textTertiary: '#70707A', + textDisabled: '#A8A8B0', + success: '#28C96C', + warning: '#FFCC33', + error: '#E73E14', + info: '#485ECA', + link: '#2D7BFF', + linkVisited: '#6A66FF', +} as const; diff --git a/nym-wallet/src/theme/theme.tsx b/nym-wallet/src/theme/theme.tsx index 62f36b7da2..637b20bc66 100644 --- a/nym-wallet/src/theme/theme.tsx +++ b/nym-wallet/src/theme/theme.tsx @@ -12,10 +12,10 @@ const LIGHT_MODE_PRIMARY_GREEN = 'rgb(18, 149, 96)'; const nymPalette = { /** emphasises important elements */ - highlight: 'rgb(20, 231, 111)', + highlight: '#5BF0A0', success: 'rgb(20, 231, 111)', - info: '#60D7EF', - red: '#E33B5A', + info: '#485ECA', + red: '#E73E14', fee: '#967FF0', background: { light: '#242B2D', @@ -27,7 +27,7 @@ const nymPalette = { muted: '#938F99', grey: '#79747E', }, - linkHover: 'rgb(20, 231, 111)', + linkHover: '#5BF0A0', border: { menu: '#49454F', }, @@ -36,8 +36,8 @@ const nymPalette = { const darkMode = { mode: 'dark' as const, background: { - main: '#242B2D', - paper: '#32373D', + main: '#0A0A0A', + paper: '#1A1A1C', warn: '#F97316', grey: '#3A373F', greyStroke: '#49454F', @@ -52,7 +52,7 @@ const darkMode = { contrast: '#242B2D', grey: '#79747E', blue: '#60D7EF', - subdued: '#B8B5BD', + subdued: '#AEACB1', }, topNav: { background: '#1C1B1F',