Skip to content

Commit 7c74eb0

Browse files
valentin0hvalentin0h
committed
get semantic colors from the api
1 parent 876988c commit 7c74eb0

File tree

3 files changed

+47
-15
lines changed

3 files changed

+47
-15
lines changed

‎bun.lock‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"packages/colors": {
2626
"name": "@gitbook/colors",
27-
"version": "0.1.0",
27+
"version": "0.2.0",
2828
"devDependencies": {
2929
"typescript": "^5.5.3",
3030
},
@@ -38,9 +38,9 @@
3838
},
3939
"packages/gitbook": {
4040
"name": "gitbook",
41-
"version": "0.6.1",
41+
"version": "0.6.2",
4242
"dependencies": {
43-
"@gitbook/api": "^0.94.0",
43+
"@gitbook/api": "^0.95.0",
4444
"@gitbook/cache-do": "workspace:*",
4545
"@gitbook/colors": "workspace:*",
4646
"@gitbook/emoji-codepoints": "workspace:*",
@@ -155,7 +155,7 @@
155155
},
156156
"packages/openapi-parser": {
157157
"name": "@gitbook/openapi-parser",
158-
"version": "1.0.0",
158+
"version": "1.0.1",
159159
"dependencies": {
160160
"@scalar/openapi-parser": "^0.10.4",
161161
"@scalar/openapi-types": "^0.1.6",
@@ -211,7 +211,7 @@
211211
},
212212
"packages/react-openapi": {
213213
"name": "@gitbook/react-openapi",
214-
"version": "1.0.1",
214+
"version": "1.0.2",
215215
"dependencies": {
216216
"@gitbook/openapi-parser": "workspace:*",
217217
"@scalar/api-client-react": "1.0.87",
@@ -4651,7 +4651,7 @@
46514651

46524652
"gaxios/https-proxy-agent": ["[email protected]", "", { "dependencies": { "agent-base": "6", "debug": "4" } }, "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA=="],
46534653

4654-
"gitbook/@gitbook/api": ["@gitbook/api@0.94.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-jOvqUSdyXeuPpBiujkQLb14uVQA5A0XL+P89MmC/53hV7v/8gR8WlJN9RJVDrP0LX51dsLT+/zYN8xWp19nPwA=="],
4654+
"gitbook/@gitbook/api": ["@gitbook/api@0.95.0", "", { "dependencies": { "event-iterator": "^2.0.0", "eventsource-parser": "^3.0.0" } }, "sha512-9KAbt27Ile6cqAch7QEbiJHALQHojYlhsPzilgdQ5wpHgLwsrd7Smd58A3/8bWBKq4KV0vP4rh3oYhIw+LlWFw=="],
46554655

46564656
"gitbook-v2/next": ["[email protected]", "", { "dependencies": { "@next/env": "15.2.0-canary.45", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.15", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.2.0-canary.45", "@next/swc-darwin-x64": "15.2.0-canary.45", "@next/swc-linux-arm64-gnu": "15.2.0-canary.45", "@next/swc-linux-arm64-musl": "15.2.0-canary.45", "@next/swc-linux-x64-gnu": "15.2.0-canary.45", "@next/swc-linux-x64-musl": "15.2.0-canary.45", "@next/swc-win32-arm64-msvc": "15.2.0-canary.45", "@next/swc-win32-x64-msvc": "15.2.0-canary.45", "sharp": "^0.33.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-UsneTQn9tntbiAaXpvoXhhsTBb58Q2XIs2Dfka+qWA8motBz0ZvW297YHLxhdur4xN0IJvknnZKl5Bs7wAGlOg=="],
46574657

‎packages/gitbook/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"clean": "rm -rf ./.next && rm -rf ./public/~gitbook/static/icons && rm -rf ./public/~gitbook/static/math"
1818
},
1919
"dependencies": {
20-
"@gitbook/api": "^0.94.0",
20+
"@gitbook/api": "^0.95.0",
2121
"@gitbook/cache-do": "workspace:*",
2222
"@gitbook/colors": "workspace:*",
2323
"@gitbook/emoji-codepoints": "workspace:*",

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

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ import {
1414
colorScale,
1515
type ColorScaleOptions,
1616
DEFAULT_TINT_COLOR,
17+
DEFAULT_HINT_INFO_COLOR,
18+
DEFAULT_HINT_SUCCESS_COLOR,
19+
DEFAULT_HINT_DANGER_COLOR,
20+
DEFAULT_HINT_WARNING_COLOR,
1721
hexToRgb,
1822
} from '@gitbook/colors';
1923
import { IconsProvider, IconStyle } from '@gitbook/icons';
@@ -42,6 +46,7 @@ export async function CustomizationRootLayout(props: {
4246
const tintColor = getTintColor(customization);
4347
const mixColor = getTintMixColor(customization.styling.primaryColor, tintColor);
4448
const sidebarStyles = getSidebarStyles(customization);
49+
const { infoColor, successColor, warningColor, dangerColor } = getSemanticColors(customization);
4550

4651
return (
4752
<html
@@ -86,10 +91,10 @@ export async function CustomizationRootLayout(props: {
8691
};
8792
--header-link: ${hexToRgb(customization.header.linkColor?.light ?? colorContrast(tintColor?.light ?? customization.styling.primaryColor.light))};
8893
89-
${generateColorVariable('info', '#ff0000')}
90-
${generateColorVariable('warning', '#ff0000')}
91-
${generateColorVariable('danger', '#ff0000')}
92-
${generateColorVariable('success', '#ff0000')}
94+
${generateColorVariable('info', infoColor.light)}
95+
${generateColorVariable('warning', warningColor.light)}
96+
${generateColorVariable('danger', dangerColor.light)}
97+
${generateColorVariable('success', successColor.light)}
9398
}
9499
95100
.dark {
@@ -100,10 +105,10 @@ export async function CustomizationRootLayout(props: {
100105
--header-background: ${hexToRgb(customization.header.backgroundColor?.dark ?? tintColor?.dark ?? customization.styling.primaryColor.dark)};
101106
--header-link: ${hexToRgb(customization.header.linkColor?.dark ?? colorContrast(tintColor?.dark ?? customization.styling.primaryColor.dark))};
102107
103-
${generateColorVariable('info', '#ff0000', { darkMode: true })}
104-
${generateColorVariable('warning', '#ff0000', { darkMode: true })}
105-
${generateColorVariable('danger', '#ff0000', { darkMode: true })}
106-
${generateColorVariable('success', '#ff0000', { darkMode: true })}
108+
${generateColorVariable('info', infoColor.dark, { darkMode: true })}
109+
${generateColorVariable('warning', warningColor.dark, { darkMode: true })}
110+
${generateColorVariable('danger', dangerColor.dark, { darkMode: true })}
111+
${generateColorVariable('success', successColor.dark, { darkMode: true })}
107112
}
108113
`}</style>
109114
</head>
@@ -208,6 +213,33 @@ function getSidebarStyles(
208213
};
209214
}
210215

216+
/**
217+
* Get the semnatic color customization settings.
218+
* If it is a space customization, it will return the default styles.
219+
*/
220+
function getSemanticColors(
221+
customization: CustomizationSettings | SiteCustomizationSettings,
222+
): Pick<
223+
SiteCustomizationSettings['styling'],
224+
'infoColor' | 'successColor' | 'warningColor' | 'dangerColor'
225+
> {
226+
if ('infoColor' in customization.styling) {
227+
return {
228+
infoColor: customization.styling.infoColor,
229+
successColor: customization.styling.successColor,
230+
warningColor: customization.styling.warningColor,
231+
dangerColor: customization.styling.dangerColor,
232+
};
233+
}
234+
235+
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,
240+
};
241+
}
242+
211243
type ColorInput = string;
212244
function generateColorVariable(
213245
name: string,

0 commit comments

Comments
 (0)