Skip to content

Commit 1df4279

Browse files
valentin0hvalentin0h
committed
tests
1 parent 7c74eb0 commit 1df4279

File tree

3 files changed

+51
-23
lines changed

3 files changed

+51
-23
lines changed

‎packages/gitbook/src/lib/colors.ts‎ renamed to ‎packages/colors/src/transformations.ts‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { DARK_BASE, LIGHT_BASE, DEFAULT_TINT_COLOR } from './colors';
2+
13
type ColorShades = {
24
[key: string]: string;
35
};
@@ -6,9 +8,6 @@ type RGBColor = [number, number, number];
68
type OKLABColor = { L: number; A: number; B: number };
79
type OKLCHColor = { L: number; C: number; H: number };
810

9-
export const DARK_BASE = '#1d1d1d';
10-
export const LIGHT_BASE = '#ffffff';
11-
export const DEFAULT_TINT_COLOR = '#787878';
1211
const D65 = [95.047, 100.0, 108.883]; // Reference white (D65)
1312

1413
export enum ColorCategory {
@@ -226,7 +225,7 @@ export function colorScale(
226225
/**
227226
* Convert a hex color to an RGB color set.
228227
*/
229-
function hexToRgbArray(hex: string): RGBColor {
228+
export function hexToRgbArray(hex: string): RGBColor {
230229
const originalHex = hex;
231230

232231
let value = hex.replace('#', '');
@@ -252,7 +251,7 @@ function hexToRgbArray(hex: string): RGBColor {
252251
/**
253252
* Convert a RGB color set to a hex color.
254253
*/
255-
function rgbArrayToHex(rgb: RGBColor): string {
254+
export function rgbArrayToHex(rgb: RGBColor): string {
256255
return `#${rgb
257256
.map((channel) => {
258257
const component = channel.toString(16);
@@ -262,7 +261,7 @@ function rgbArrayToHex(rgb: RGBColor): string {
262261
.join('')}`;
263262
}
264263

265-
function getColor(percentage: number, start: RGBColor, end: RGBColor) {
264+
export function getColor(percentage: number, start: RGBColor, end: RGBColor) {
266265
const rgb = end.map((channel, index) => {
267266
return Math.round(channel + percentage * (start[index] - channel));
268267
});
@@ -271,21 +270,21 @@ function getColor(percentage: number, start: RGBColor, end: RGBColor) {
271270
}
272271

273272
// Utility constants and helper functions
274-
function rgbToLinear(rgb: RGBColor): [number, number, number] {
273+
export function rgbToLinear(rgb: RGBColor): [number, number, number] {
275274
return rgb.map((v) => {
276275
const scaled = v / 255;
277276
return scaled <= 0.04045 ? scaled / 12.92 : ((scaled + 0.055) / 1.055) ** 2.4;
278277
}) as [number, number, number];
279278
}
280279

281-
function linearToRgb(linear: [number, number, number]): RGBColor {
280+
export function linearToRgb(linear: [number, number, number]): RGBColor {
282281
return linear.map((v) => {
283282
const scaled = v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
284283
return Math.round(Math.max(0, Math.min(1, scaled)) * 255);
285284
}) as RGBColor;
286285
}
287286

288-
function rgbToOklab(rgb: RGBColor): OKLABColor {
287+
export function rgbToOklab(rgb: RGBColor): OKLABColor {
289288
const [r, g, b] = rgbToLinear(rgb);
290289

291290
const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
@@ -303,7 +302,7 @@ function rgbToOklab(rgb: RGBColor): OKLABColor {
303302
};
304303
}
305304

306-
function oklabToRgb(oklab: OKLABColor): RGBColor {
305+
export function oklabToRgb(oklab: OKLABColor): RGBColor {
307306
const { L, A, B } = oklab;
308307

309308
const lRoot = L + 0.3963377774 * A + 0.2158037573 * B;
@@ -321,14 +320,14 @@ function oklabToRgb(oklab: OKLABColor): RGBColor {
321320
return linearToRgb([r, g, b]);
322321
}
323322

324-
function oklabToOklch(oklab: OKLABColor): OKLCHColor {
323+
export function oklabToOklch(oklab: OKLABColor): OKLCHColor {
325324
const { L, A, B } = oklab;
326325
const C = Math.sqrt(A ** 2 + B ** 2);
327326
const H = (Math.atan2(B, A) * 180) / Math.PI;
328327
return { L, C, H: H < 0 ? H + 360 : H };
329328
}
330329

331-
function oklchToOklab(oklch: OKLCHColor): OKLABColor {
330+
export function oklchToOklab(oklch: OKLCHColor): OKLABColor {
332331
const { L, C, H } = oklch;
333332
const rad = (H * Math.PI) / 180;
334333
return {
@@ -338,15 +337,15 @@ function oklchToOklab(oklch: OKLCHColor): OKLABColor {
338337
};
339338
}
340339

341-
function rgbToOklch(rgb: RGBColor): OKLCHColor {
340+
export function rgbToOklch(rgb: RGBColor): OKLCHColor {
342341
return oklabToOklch(rgbToOklab(rgb));
343342
}
344343

345-
function oklchToRgb(oklch: OKLCHColor): RGBColor {
344+
export function oklchToRgb(oklch: OKLCHColor): RGBColor {
346345
return oklabToRgb(oklchToOklab(oklch));
347346
}
348347

349-
function rgbToXyz(rgb: RGBColor): [number, number, number] {
348+
export function rgbToXyz(rgb: RGBColor): [number, number, number] {
350349
const [r, g, b] = rgbToLinear(rgb);
351350
return [
352351
(r * 0.4124564 + g * 0.3575761 + b * 0.1804375) * 100,
@@ -355,7 +354,11 @@ function rgbToXyz(rgb: RGBColor): [number, number, number] {
355354
];
356355
}
357356

358-
function xyzToLab65(xyz: [number, number, number]): { L: number; A: number; B: number } {
357+
export function xyzToLab65(xyz: [number, number, number]): {
358+
L: number;
359+
A: number;
360+
B: number;
361+
} {
359362
const [x, y, z] = xyz.map((v, i) => {
360363
const scaled = v / D65[i];
361364
return scaled > 0.008856 ? Math.cbrt(scaled) : 7.787 * scaled + 16 / 116;
@@ -368,15 +371,15 @@ function xyzToLab65(xyz: [number, number, number]): { L: number; A: number; B: n
368371
};
369372
}
370373

371-
function rgbTolab65(rgb: RGBColor): { L: number; A: number; B: number } {
374+
export function rgbTolab65(rgb: RGBColor): { L: number; A: number; B: number } {
372375
return xyzToLab65(rgbToXyz(rgb));
373376
}
374377

375378
/*
376379
Delta Phi Star perceptual lightness contrast by Andrew Somers:
377380
https://github.com/Myndex/deltaphistar
378381
*/
379-
const PHI = 0.5 + Math.sqrt(1.25);
382+
export const PHI = 0.5 + Math.sqrt(1.25);
380383

381384
export function dpsContrast(a: RGBColor, b: RGBColor) {
382385
const dps = Math.abs(rgbTolab65(a).L ** PHI - rgbTolab65(b).L ** PHI);
@@ -387,7 +390,10 @@ export function dpsContrast(a: RGBColor, b: RGBColor) {
387390
export function colorContrast(background: string, foreground: string[] = [LIGHT_BASE, DARK_BASE]) {
388391
const bg = hexToRgbArray(background);
389392

390-
const best: { color?: RGBColor; contrast: number } = { color: undefined, contrast: 0 };
393+
const best: { color?: RGBColor; contrast: number } = {
394+
color: undefined,
395+
contrast: 0,
396+
};
391397
for (const color of foreground) {
392398
const c = hexToRgbArray(color);
393399

‎packages/gitbook/e2e/util.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ import rison from 'rison';
2020
import { DeepPartial } from 'ts-essentials';
2121

2222
import { getContentTestURL } from '../tests/utils';
23+
import {
24+
DEFAULT_HINT_DANGER_COLOR,
25+
DEFAULT_HINT_INFO_COLOR,
26+
DEFAULT_HINT_SUCCESS_COLOR,
27+
DEFAULT_HINT_WARNING_COLOR,
28+
} from '@gitbook/colors';
2329

2430
export interface Test {
2531
name: string;
@@ -222,6 +228,10 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
222228
styling: {
223229
theme: newTheme,
224230
primaryColor: { light: '#346DDB', dark: '#346DDB' },
231+
infoColor: { light: DEFAULT_HINT_INFO_COLOR, dark: DEFAULT_HINT_INFO_COLOR },
232+
successColor: { light: DEFAULT_HINT_SUCCESS_COLOR, dark: DEFAULT_HINT_SUCCESS_COLOR },
233+
warningColor: { light: DEFAULT_HINT_WARNING_COLOR, dark: DEFAULT_HINT_WARNING_COLOR },
234+
dangerColor: { light: DEFAULT_HINT_DANGER_COLOR, dark: DEFAULT_HINT_DANGER_COLOR },
225235
corners: CustomizationCorners.Rounded,
226236
font: CustomizationFont.Inter,
227237
background: CustomizationBackground.Plain,

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -233,10 +233,22 @@ function getSemanticColors(
233233
}
234234

235235
return {
236-
infoColor: DEFAULT_HINT_INFO_COLOR,
237-
successColor: DEFAULT_HINT_SUCCESS_COLOR,
238-
warningColor: DEFAULT_HINT_WARNING_COLOR,
239-
dangerColor: DEFAULT_HINT_DANGER_COLOR,
236+
infoColor: {
237+
light: DEFAULT_HINT_INFO_COLOR,
238+
dark: DEFAULT_HINT_INFO_COLOR,
239+
},
240+
successColor: {
241+
light: DEFAULT_HINT_SUCCESS_COLOR,
242+
dark: DEFAULT_HINT_SUCCESS_COLOR,
243+
},
244+
warningColor: {
245+
light: DEFAULT_HINT_WARNING_COLOR,
246+
dark: DEFAULT_HINT_WARNING_COLOR,
247+
},
248+
dangerColor: {
249+
light: DEFAULT_HINT_DANGER_COLOR,
250+
dark: DEFAULT_HINT_DANGER_COLOR,
251+
},
240252
};
241253
}
242254

0 commit comments

Comments
 (0)