@patreon/studio
Version:
Patreon Studio Design System
85 lines • 4.03 kB
JavaScript
function sharedMode({ surfaceLow, dynamic, dynamicText, richContent, surfaceRich, surfaceRichAlt, richAction, surfaceControl, }) {
return {
// Page tokens
'--global-bg-page-default': surfaceLow[1],
'--global-bg-page-hover': surfaceLow[2],
'--global-bg-page-pressed': surfaceLow[3],
'--global-bg-pageAlt-default': surfaceLow[0],
'--global-bg-pageAlt-hover': surfaceLow[1],
'--global-bg-pageAlt-pressed': surfaceLow[2],
// Primary tokens, surface
'--global-primary-surface-default': dynamic[0],
'--global-primary-surface-hover': dynamic[1],
'--global-primary-surface-pressed': dynamic[2],
'--global-primary-onSurface-default': dynamicText[0],
'--global-primary-onSurface-hover': dynamicText[1],
'--global-primary-onSurface-pressed': dynamicText[2],
// Primary tokens, action
'--global-content-primary-default': richContent[0],
'--global-content-primary-hover': richContent[1],
'--global-content-primary-pressed': richContent[2],
// Rich tokens
'--global-rich-surface-default': surfaceRichAlt[5],
'--global-rich-surface-hover': surfaceRichAlt[6],
'--global-rich-surface-pressed': surfaceRichAlt[7],
'--global-rich-surfaceAlt-default': surfaceRich[5],
'--global-rich-surfaceAlt-hover': surfaceRich[6],
'--global-rich-surfaceAlt-pressed': surfaceRich[7],
'--global-rich-action-default': richAction[0],
'--global-rich-action-hover': richAction[1],
'--global-rich-action-pressed': richAction[2],
// Control tokens
'--global-control-surface-default': surfaceControl[0],
'--global-control-surface-hover': surfaceControl[1],
'--global-control-surface-pressed': surfaceControl[2],
};
}
export function darkMode(props) {
const { surfaceLow, alphaDull } = props;
return {
...sharedMode(props),
// Base tokens
'--global-bg-base-default': surfaceLow[2],
'--global-bg-base-hover': surfaceLow[3],
'--global-bg-base-pressed': surfaceLow[4],
'--global-bg-baseAlt-default': surfaceLow[3],
'--global-bg-baseAlt-hover': surfaceLow[4],
'--global-bg-baseAlt-pressed': surfaceLow[5],
'--global-bg-elevated-default': surfaceLow[3],
'--global-bg-elevated-hover': surfaceLow[4],
'--global-bg-elevated-pressed': surfaceLow[5],
// Primary tokens, muted
'--global-primary-surfaceMuted-default': alphaDull[5],
'--global-primary-surfaceMuted-hover': alphaDull[6],
'--global-primary-surfaceMuted-pressed': alphaDull[7],
// Primary tokens, subtle
'--global-primary-surfaceSubtle-default': alphaDull[3],
'--global-primary-surfaceSubtle-hover': alphaDull[4],
'--global-primary-surfaceSubtle-pressed': alphaDull[5],
};
}
export function lightMode(props) {
const { surfaceLow, alphaDull } = props;
return {
...sharedMode(props),
// Base tokens
'--global-bg-base-default': surfaceLow[0],
'--global-bg-base-hover': surfaceLow[1],
'--global-bg-base-pressed': surfaceLow[2],
'--global-bg-baseAlt-default': surfaceLow[1],
'--global-bg-baseAlt-hover': surfaceLow[2],
'--global-bg-baseAlt-pressed': surfaceLow[3],
'--global-bg-elevated-default': surfaceLow[0],
'--global-bg-elevated-hover': surfaceLow[1],
'--global-bg-elevated-pressed': surfaceLow[2],
// Primary tokens, muted
'--global-primary-surfaceMuted-default': alphaDull[2],
'--global-primary-surfaceMuted-hover': alphaDull[3],
'--global-primary-surfaceMuted-pressed': alphaDull[4],
// Primary tokens, subtle
'--global-primary-surfaceSubtle-default': alphaDull[1],
'--global-primary-surfaceSubtle-hover': alphaDull[2],
'--global-primary-surfaceSubtle-pressed': alphaDull[3],
};
}
//# sourceMappingURL=default-token-maps.js.map