From a182ff8562efcf6897739f00f5a5f3d6d7db459f Mon Sep 17 00:00:00 2001 From: Julien Danjou Date: Tue, 28 Apr 2026 23:06:33 +0200 Subject: [PATCH] feat(design): add primitive token layer (tokens.css) Change-Id: I6e0fbd73f4d59f2779d48cdedb8979da36c63271 --- src/styles/tokens.css | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/styles/tokens.css diff --git a/src/styles/tokens.css b/src/styles/tokens.css new file mode 100644 index 0000000000..bfd67ff3fc --- /dev/null +++ b/src/styles/tokens.css @@ -0,0 +1,40 @@ +/* + Primitive tokens — fixed values. Do NOT remap in dark mode. + Components must NEVER reference these directly. Use semantic tokens + in theme.css instead. +*/ + +:root { + /* Neutrals — clean ramp, no duplicates (intentionally diverges from + mergify.com which has gray-50 == gray-200 collisions). */ + --color-white: #ffffff; + --color-dark: #000000; + --color-gray-50: #f6f7f8; /* Docs body-bg tone — preserves the historical + "Mergify gray" character that the translucent + navbar relies on for visual presence. */ + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; + --color-gray-500: #6b7280; + --color-gray-600: #4b5563; + --color-gray-700: #374151; + --color-gray-800: #1f2937; + --color-gray-900: #111827; + + /* Product palette — verbatim from mergify.com/DESIGN.md. + Brand colors. Do NOT flip in dark mode. */ + --color-teal-400: #82ddbe; /* Merge Queue accent */ + --color-teal-700: #1cb893; /* Merge Queue label */ + --color-purple-400: #858ef4; /* CI Insights accent */ + --color-purple-700: #4d59e0; /* CI Insights label */ + --color-orange-400: #f9b070; /* Test Insights accent */ + --color-orange-700: #f27b2a; /* Test Insights label */ + --color-blue-400: #85c9f4; /* Merge Protections accent */ + --color-blue-700: #43a7e5; /* Merge Protections label */ + --color-blue-800: #237caf; /* Link hover (docs-only) */ + --color-coral-400: #ef9a9a; /* Stacks accent */ + --color-coral-700: #e53935; /* Stacks label */ + --color-rose-400: #f485b3; /* Workflow Automation accent */ + --color-rose-700: #e61e71; /* Workflow Automation label */ +}