本文整理汇总了TypeScript中@library/styles/globalStyleVars.globalVariables函数的典型用法代码示例。如果您正苦于以下问题：TypeScript globalVariables函数的具体用法？TypeScript globalVariables怎么用？TypeScript globalVariables使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了globalVariables函数的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: useThemeCache
export const loaderVariables = useThemeCache(() => {
const globalVars = globalVariables();
const makeThemeVars = variableFactory("loader");
const colors = makeThemeVars("colors", {
fg: globalVars.mainColors.primary,
});
const fullPage: ISpinnerProps = makeThemeVars("fullPage", {
size: 100,
thickness: 6,
color: colors.fg,
});
const medium: ISpinnerProps = makeThemeVars("medium", {
size: 50,
thickness: 4,
color: colors.fg,
});
const small: ISpinnerProps = makeThemeVars("small", {
size: 36,
thickness: 4,
color: colors.fg,
});
return { fullPage, small, medium };
});示例2: useThemeCache
export const panelListVariables = useThemeCache(() => {
const globalVals = globalVariables();
const makeThemeVars = variableFactory("panelList");
const title = makeThemeVars("title", {
fontSize: globalVals.fonts.size.large,
});
const offset = makeThemeVars("offset", {
default: 12,
});
const link = makeThemeVars("link", {
fontSize: globalVals.fonts.size.medium,
hover: {
color: globalVals.links.colors.default,
},
focus: {
color: globalVals.links.colors.focus,
},
});
return {
title,
offset,
link,
};
});示例3: useThemeCache
export const dayPickerVariables = useThemeCache(() => {
const globalVars = globalVariables();
const formElementVars = formElementsVariables();
const themeVars = componentThemeVariables("datePicker");
const spacing = {
padding: 9,
...themeVars.subComponentStyles("spacing"),
};
const sizing = {
height: formElementVars.sizing.height,
};
const colors = {
today: globalVars.mainColors.primary,
selected: {
color: globalVars.states.selected.color,
},
hover: {
bg: globalVars.states.hover.color,
},
};
const border = {
radius: globalVars.border.radius,
};
return { spacing, sizing, colors, border };
});示例4: useThemeCache
export const countClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = countVariables();
const style = styleFactory("count");
const root = (countBg?: ColorValues) => {
return style({
...absolutePosition.topRight(4),
display: "block",
backgroundColor: countBg ? colorOut(countBg) : colorOut(vars.notifications.bg),
height: unit(vars.sizing.height),
lineHeight: unit(vars.sizing.height),
minWidth: unit(vars.sizing.height),
fontSize: unit(vars.font.size),
fontWeight: globalVars.fonts.weights.semiBold,
borderRadius: unit(vars.sizing.height / 2),
whiteSpace: "nowrap",
padding: `0 3px`,
});
};
const text = (countFg?: ColorValues) => {
return style("text", {
display: "block",
textAlign: "center",
color: !!countFg ? colorOut(countFg) : "inherit",
});
};
return { root, text };
});示例5: defaultHyphenation
export function defaultHyphenation() {
const vars = globalVariables().userContentHyphenation;
return {
"-ms-hyphens": "auto",
"-webkit-hyphens": "auto",
hyphens: "auto",
/* legacy properties */
"-webkit-hyphenate-limit-before": vars.minimumCharactersBeforeBreak,
"-webkit-hyphenate-limit-after": vars.minimumCharactersAfterBreak,
/* current proposal */
"-moz-hyphenate-limit-chars": `${vars.minimumCharactersToHyphenate} ${vars.minimumCharactersBeforeBreak} ${
vars.minimumCharactersAfterBreak
}` /* not yet supported */,
"-webkit-hyphenate-limit-chars": `${vars.minimumCharactersToHyphenate} ${vars.minimumCharactersBeforeBreak} ${
vars.minimumCharactersAfterBreak
}` /* not yet supported */,
"-ms-hyphenate-limit-chars": `${vars.minimumCharactersToHyphenate} ${vars.minimumCharactersBeforeBreak} ${
vars.minimumCharactersAfterBreak
}`,
"hyphenate-limit-chars": `${vars.minimumCharactersToHyphenate} ${vars.minimumCharactersBeforeBreak} ${
vars.minimumCharactersAfterBreak
}`,
// Maximum consecutive lines to have hyphenation
"-ms-hyphenate-limit-lines": vars.maximumConsecutiveBrokenLines,
"-webkit-hyphenate-limit-lines": vars.maximumConsecutiveBrokenLines,
"hyphenate-limit-lines": vars.maximumConsecutiveBrokenLines,
// Limit "zone" to hyphenate
"hyphenate-limit-zone": unit(vars.hyphenationZone),
};
}示例6: useThemeCache
export const typographyClasses = useThemeCache(() => {
const style = styleFactory("typography");
const globalVars = globalVariables();
const vars = containerVariables();
const mediaQueries = layoutVariables().mediaQueries();
const pageTitle = style(
"pageTitle",
{
fontSize: unit(globalVars.fonts.size.title),
lineHeight: globalVars.lineHeights.condensed,
$nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
},
mediaQueries.oneColumnDown({
fontSize: unit(globalVars.fonts.mobile.size.title),
}),
);
const subTitle = style("subTitle", {
fontSize: unit(globalVars.fonts.size.subTitle),
});
const componentSubTitle = style("componentSubTitle", {
fontSize: unit(globalVars.fonts.size.large),
});
return { pageTitle, subTitle, componentSubTitle };
});示例7: useThemeCache
export const nubClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = richEditorVariables();
const style = styleFactory("nub");
const root = style({
position: "relative",
display: "block",
width: unit(vars.nub.width),
height: unit(vars.nub.width),
borderTop: singleBorder({
width: vars.menu.borderWidth,
}),
borderRight: singleBorder({
width: vars.menu.borderWidth,
}),
boxShadow: globalVars.overlay.dropShadow,
background: colorOut(vars.colors.bg),
});
const position = style("position", {
position: "absolute",
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
overflow: "hidden",
width: unit(vars.nub.width * 2),
height: unit(vars.nub.width * 2),
...userSelect(),
transform: translateX("-50%"),
pointerEvents: "none",
});
return { root, position };
});示例8: useThemeCache
export const containerClasses = useThemeCache(() => {
const style = styleFactory("container");
const globalVars = globalVariables();
const vars = containerVariables();
const mediaQueries = layoutVariables().mediaQueries();
const root = style(
{
display: "flex",
flexDirection: "column",
position: "relative",
boxSizing: "border-box",
width: percent(100),
maxWidth: globalVars.content.width,
marginLeft: "auto",
marginRight: "auto",
...paddings(vars.spacing.padding),
},
mediaQueries.oneColumnDown({
...paddings({
horizontal: 8,
}),
}),
);
return { root };
});示例9: useThemeCache
export const siteNavVariables = useThemeCache(() => {
const globalVars = globalVariables();
const makeThemeVars = variableFactory("siteNav");
const node = makeThemeVars("node", {
fontSize: globalVars.fonts.size.medium,
fg: globalVars.mainColors.fg,
lineHeight: globalVars.lineHeights.condensed,
borderWidth: 1,
padding: 4,
active: {
fg: globalVars.links.colors.default,
fontWeight: globalVars.fonts.weights.bold,
},
});
const title = makeThemeVars("title", {
fontSize: globalVars.fonts.size.large,
fontWeight: globalVars.fonts.weights.bold,
});
const nodeToggle = makeThemeVars("nodeToggle", {
height: node.fontSize * node.lineHeight,
width: globalVars.gutter.size,
iconWidth: 7,
});
const spacer = makeThemeVars("spacer", {
default: 7,
});
return { node, title, nodeToggle, spacer };
});