Switch from RGB to OKLCH color definitions

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -15,7 +15,7 @@ import colors from 'tailwindcss/colors';
 import { fontNotoColorEmoji, fonts, ibmPlexMono } from '@/fonts';
 import { getSpaceLanguage } from '@/intl/server';
 import { getStaticFileURL } from '@/lib/assets';
-import { colorContrast, colorScale, hexToRgb, shadesOfColor } from '@/lib/colors';
+import { colorContrast, colorScale, hexToOklch, hexToRgb } from '@/lib/colors';
 import { tcls } from '@/lib/tailwind';
 
 import { ClientContexts } from './ClientContexts';
@@ -171,10 +171,9 @@ function generateColorVariable(
 
     return Object.entries(shades)
         .map(([key, value]) => {
-            const rgbValue = hexToRgb(value); // Check the original hex value
-            const contrastValue = withContrast ? hexToRgb(colorContrast(value)) : undefined; // Add contrast if needed
-            return `--${name}-${key}: ${rgbValue}; ${
-                contrastValue ? `--contrast-${name}-${key}: ${contrastValue};` : ''
+            const contrastValue = withContrast ? colorContrast(value) : undefined; // Add contrast if needed
+            return `--${name}-${key}: ${hexToOklch(value)}; ${
+                contrastValue ? `--contrast-${name}-${key}: ${hexToOklch(contrastValue)};` : ''
             }`;
         })
         .join('\n');

packages/gitbook/src/lib/colors.ts

@@ -89,6 +89,11 @@ export function hexToRgb(hex: string): string {
     return `${r} ${g} ${b}`;
 }
 
+export function hexToOklch(hex: string): string {
+    const { L, C, H } = rgbToOklch(hexToRgbArray(hex));
+    return `${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(3)}`;
+}
+
 /**
  * Convert a hex color to a RGBA color.
  */

packages/gitbook/tailwind.config.ts

@@ -18,9 +18,9 @@ function generateVarShades(varName: string, filter: ColorCategory[] = []) {
         if (filter.length === 0 || filter.includes(categoryName as ColorCategory)) {
             Object.entries(category).forEach(([key, value]) => {
                 if (filter.length > 0) {
-                    result[key] = `rgb(var(--${varName}-${value}))`;
+                    result[key] = `oklch(var(--${varName}-${value}) / <alpha-value>)`;
                 } else {
-                    result[value] = `rgb(var(--${varName}-${value}))`;
+                    result[value] = `oklch(var(--${varName}-${value}) / <alpha-value>)`;
                 }
             });
         }