Overhaul colour system & classes (#2783)

Author: zenoachtig

.changeset/friendly-seals-sip.md

@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Overhaul colour scale & Tailwind colour classes

bun.lock

@@ -66,7 +66,6 @@
         "openapi-types": "^12.1.3",
         "p-map": "^7.0.0",
         "parse-cache-control": "^1.0.1",
-        "postcss-color-contrast": "^1.1.0",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-hotkeys-hook": "^4.4.1",
@@ -2558,8 +2557,6 @@
 
     "postcss": ["[email protected]", "", { "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.1.0", "source-map-js": "^1.2.1" } }, "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ=="],
 
-    "postcss-color-contrast": ["[email protected]", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "*" } }, "sha512-NYZcZf+D70RlM71cTBl7Vkz+ZmHY5iik0BXmG089GnVv0iAEODhXqQDdH8LVBPQANLKV/ZcW0y4nVtOoFk4d2g=="],
-
     "postcss-import": ["[email protected]", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
 
     "postcss-js": ["[email protected]", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw=="],

packages/gitbook/package.json

@@ -49,7 +49,6 @@
         "openapi-types": "^12.1.3",
         "p-map": "^7.0.0",
         "parse-cache-control": "^1.0.1",
-        "postcss-color-contrast": "^1.1.0",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-hotkeys-hook": "^4.4.1",

packages/gitbook/src/app/middleware/(site)/(content)/RocketLoaderDetector.tsx

@@ -15,7 +15,7 @@ export function RocketLoaderDetector(props: { nonce: string }) {
         document.addEventListener("DOMContentLoaded", () => {
           if (Array.from(document.scripts).find(script => script.src.includes('rocket-loader.min.js'))) {
             const alert = document.createElement('div');
-            alert.className = 'p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 mt-8 mx-8';
+            alert.className = 'p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 mt-8 mx-8';
             alert.innerHTML = \`
               <strong>Error in site configuration:</strong>
                 It looks like \${window.location.hostname} has been incorrectly configured in Cloudflare. This may lead to unexpected behavior or issues with the page loading. If you are the owner of this site, please refer to <a href="https://docs.gitbook.com/published-documentation/custom-domain/configure-dns#are-you-using-cloudflare" class="underline">GitBook's documentation</a> for steps to fix the problem.

packages/gitbook/src/app/middleware/(site)/(core)/~gitbook/icon/route.tsx

@@ -48,7 +48,7 @@ export async function GET(req: NextRequest) {
     return new ImageResponse(
         (
             <div
-                tw={tcls(options.theme === 'light' ? 'bg-white' : 'bg-gray-900', size.boxStyle)}
+                tw={tcls(options.theme === 'light' ? 'bg-white' : 'bg-black', size.boxStyle)}
                 style={{
                     width: '100%',
                     height: '100%',
@@ -62,7 +62,7 @@ export async function GET(req: NextRequest) {
                         size.textSize,
                         'font-bold',
                         'tracking-tight',
-                        options.theme === 'light' ? 'text-gray-900' : 'text-white',
+                        options.theme === 'light' ? 'text-black' : 'text-white',
                     )}
                 >
                     {'emoji' in customization.favicon

packages/gitbook/src/app/middleware/(site)/(core)/~gitbook/ogimage/[pageId]/route.tsx

@@ -2,10 +2,10 @@ import { CustomizationHeaderPreset } from '@gitbook/api';
 import { redirect } from 'next/navigation';
 import { ImageResponse } from 'next/og';
 import { NextRequest } from 'next/server';
-import colorContrast from 'postcss-color-contrast/js';
 import React from 'react';
 
 import { googleFontsMap } from '@/fonts';
+import { colorContrast } from '@/lib/colors';
 import { getAbsoluteHref } from '@/lib/links';
 import { filterOutNullable } from '@/lib/typescript';
 import { getContentTitle } from '@/lib/utils';

packages/gitbook/src/app/middleware/(space)/~gitbook/pdf/PageControlButtons.tsx

@@ -133,7 +133,7 @@ export function PageControlButtons(props: {
                         'items-center',
                         'justify-center',
                         'text-lg',
-                        'text-dark/6',
+                        'text-tint',
                         'px-6',
                         'py-2',
                         'bg-slate-100',

packages/gitbook/src/app/middleware/(space)/~gitbook/pdf/page.tsx

@@ -97,10 +97,9 @@ export default async function PDFHTMLOutput(props: {
                             'items-center',
                             'justify-center',
                             'text-sm',
-                            'text-dark/6',
+                            'text-tint',
                             'hover:text-primary',
                             'p-4',
-                            'dark:text-light/5',
                             'rounded-full',
                             'bg-white',
                             'shadow-sm',
@@ -123,10 +122,9 @@ export default async function PDFHTMLOutput(props: {
                         'items-center',
                         'justify-center',
                         'text-sm',
-                        'text-dark/6',
+                        'text-tint',
                         'hover:text-primary',
                         'p-4',
-                        'dark:text-light/5',
                         'rounded-full',
                         'bg-white',
                         'shadow-sm',

packages/gitbook/src/components/AdminToolbar/AdminToolbar.tsx

@@ -26,14 +26,17 @@ function ToolbarLayout(props: { children: React.ReactNode }) {
                 'transform',
                 '-translate-x-1/2',
                 'rounded-full',
-                'bg-dark-1/9',
+
+                'bg-tint-12/9',
+                'dark:bg-tint-1/9',
+
                 'shadow-lg',
                 'min-h-10',
                 'min-w-40',
                 'p-2',
                 'max-w-md',
-                'border-dark-1',
-                'backdrop-blur-sm',
+                'border-tint-12/1',
+                'backdrop-blur-md',
             )}
         >
             <React.Suspense fallback={null}>{props.children}</React.Suspense>
@@ -88,7 +91,7 @@ async function ChangeRequestToolbar(props: { spaceId: string; changeRequestId: s
                     <p>
                         #{changeRequest.number}: {changeRequest.subject ?? 'No subject'}
                     </p>
-                    <p className="text-xs text-light/8 dark:text-light/8">
+                    <p className="text-xs text-tint-2 dark:text-tint-11">
                         Change request updated <DateRelative value={changeRequest.updatedAt} />
                     </p>
                 </ToolbarBody>
@@ -126,7 +129,7 @@ async function RevisionToolbar(props: { spaceId: string; revisionId: string }) {
                         Revision created <DateRelative value={revision.createdAt} />
                     </p>
                     {revision.git ? (
-                        <p className="text-xs text-light/8 dark:text-light/8">
+                        <p className="text-xs text-tint-2 dark:text-tint-11">
                             {revision.git.message}
                         </p>
                     ) : null}

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

@@ -19,8 +19,8 @@ export function Toolbar(props: { children: React.ReactNode }) {
                 'py-1',
                 'rounded-full',
                 'truncate',
-                'text-light',
-                'dark:text-light',
+                'text-tint-1',
+                'dark:text-tint-12',
             )}
         >
             {children}
@@ -50,12 +50,11 @@ export function ToolbarButton(props: React.HTMLProps<HTMLAnchorElement>) {
                 'gap-1',
                 'text-sm',
                 'rounded-full',
-                'hover:bg-dark-1',
-                'hover:text-white',
                 'truncate',
-                'text-light',
-                'dark:text-light',
-                'dark:hover:bg-dark-2',
+                'text-tint-1', // Equal to text-tint-strong in dark mode
+                'dark:text-tint-12', // Equal to text-tint-strong in dark mode
+                'hover:bg-tint-12',
+                'dark:hover:bg-tint-1',
                 'hover:shadow-lg',
                 'cursor-pointer',
             )}