本文整理汇总了TypeScript中@library/styles/styleHelpers.colorOut函数的典型用法代码示例。如果您正苦于以下问题：TypeScript colorOut函数的具体用法？TypeScript colorOut怎么用？TypeScript colorOut使用的例子？那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了colorOut函数的8个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: unit
const iconMixin = (dimension: number): NestedCSSProperties => ({
...buttonResetMixin(),
alignItems: "center",
display: "flex",
height: unit(dimension),
minWidth: unit(dimension),
width: unit(dimension),
justifyContent: "center",
border: "none",
padding: 0,
...allButtonStates({
hover: {
color: colorOut(globalVars.mainColors.primary),
},
focusNotKeyboard: {
outline: 0,
color: colorOut(globalVars.mainColors.secondary),
},
focus: {
color: colorOut(globalVars.mainColors.secondary),
},
accessibleFocus: {
color: colorOut(globalVars.mainColors.secondary),
},
active: {
color: colorOut(globalVars.mainColors.secondary),
},
}),
});示例2: useThemeCache
export const richEditorFlyoutClasses = useThemeCache(() => {
const vars = richEditorVariables();
const style = styleFactory("richEditorFlyout");
const shadows = shadowHelper();
const globalVars = globalVariables();
const root = style({
...shadows.dropDown(),
position: "absolute",
left: 0,
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
zIndex: 6,
overflow: "hidden",
backgroundColor: colorOut(vars.colors.bg),
...borders(),
$nest: {
"&& .ReactVirtualized__Grid": {
width: important(unit(vars.richEditorWidth) as string),
},
},
});
const header = style("header", {
position: "relative",
borderBottom: singleBorder(),
...paddings(vars.emojiHeader.padding),
});
const title = style("title", {
display: "flex",
alignItems: "center",
...longWordEllipsis(),
margin: 0,
maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
minHeight: vars.menuButton.size - vars.emojiBody.padding.horizontal,
fontSize: percent(100),
lineHeight: "inherit",
color: colorOut(globalVars.mainColors.fg),
$nest: {
"&:focus": {
outline: 0,
},
},
});
const body = style("body", {
...paddings(vars.emojiBody.padding),
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
});
const footer = style("footer", {
borderTop: singleBorder(),
});
return { root, header, body, footer, title };
});示例3: useThemeCache
export const modalVariables = useThemeCache(() => {
const globalVars = globalVariables();
const makeThemeVars = variableFactory("modal");
const { elementaryColors } = globalVars;
const colors = makeThemeVars("colors", {
fg: globalVars.mainColors.fg,
bg: globalVars.mainColors.bg,
overlayBg:
globalVars.mainColors.fg.lightness() > 0.5
? elementaryColors.white.fade(0.4)
: elementaryColors.black.fade(0.4),
});
const sizing = makeThemeVars("sizing", {
large: 720,
medium: 516,
small: 375,
});
const spacing = makeThemeVars("spacing", {
horizontalMargin: 16,
});
const border = makeThemeVars("border", {
radius: globalVars.border.radius,
});
const dropDown = makeThemeVars("dropDown", {
padding: globalVars.spacer.size,
});
const header = makeThemeVars("header", {
minHeight: 60,
verticalPadding: 12,
boxShadow: `0 1px 2px 0 ${colorOut(globalVars.overlay.bg)}`,
});
const footer = makeThemeVars("footer", {
minHeight: header.minHeight,
verticalPadding: header.verticalPadding,
boxShadow: `0 -1px 2px 0 ${colorOut(globalVars.overlay.bg)}`,
});
return {
colors,
sizing,
spacing,
border,
dropDown,
header,
footer,
};
});示例4: style
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`,
});
};示例5: 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 };
});示例6: useThemeCache
export const bodyCSS = useThemeCache(() => {
const globalVars = globalVariables();
cssRule("html, body", {
backgroundColor: colorOut(globalVars.body.backgroundImage.color),
...fonts({
size: globalVars.fonts.size.medium,
family: globalVars.fonts.families.body,
color: globalVars.mainColors.fg,
}),
wordBreak: "break-word",
overscrollBehavior: "none", // For IE -> https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
});
cssRule("*", {
// For Mobile Safari -> https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
"-webkit-overflow-scrolling": "touch",
});
cssRule("h1, h2, h3, h4, h5, h6", {
display: "block",
lineHeight: globalVars.lineHeights.condensed,
...margins({
all: 0,
}),
...paddings({
all: 0,
}),
});
cssRule("p", {
...margins({
all: 0,
}),
...paddings({
all: 0,
}),
});
cssRule(".page", {
display: "flex",
overflow: "visible",
flexDirection: "column",
width: percent(100),
minHeight: viewHeight(100),
position: "relative",
zIndex: 0,
});
cssRule(".page-minHeight", {
flexGrow: 1,
display: "flex",
flexDirection: "column",
});
});示例7: useThemeCache
export const tabButtonListClasses = useThemeCache(() => {
const globalVars = globalVariables();
const style = styleFactory("tabButtonList");
const classesCount = countClasses();
const compactMeBoxVars = compactMeBoxVariables();
const root = style({
display: "flex",
alignItems: "center",
justifyContent: "stretch",
});
const button = style("button",{
flexGrow: 1,
color: colorOut(globalVars.mainColors.fg),
$nest: {
".icon": {
...defaultTransition("opacity"),
opacity: 0.8,
},
"&:hover": {
color: colorOut(globalVars.mainColors.primary),
$nest: {
".icon": {
opacity: 1,
},
},
},
"&:focus, &:active, &.focus-visible": {
color: colorOut(globalVars.mainColors.primary),
},
[`& .${classesCount.text()}`]: {
color: colorOut(compactMeBoxVars.colors.bg),
},
},
});
return { root, button };
});示例8: useThemeCache
export const frameFooterClasses = useThemeCache(() => {
const globalVars = globalVariables();
const style = styleFactory("frameFooter");
const vars = frameVariables();
const root = style({
display: "flex",
minHeight: unit(vars.footer.minHeight),
alignItems: "center",
position: "relative",
zIndex: 1,
borderTop: singleBorder(),
flexWrap: "wrap",
justifyContent: "space-between",
...paddings({
top: 0,
bottom: 0,
left: vars.footer.spacing,
right: vars.footer.spacing,
}),
});
const justifiedRight = style("justifiedRight", {
$nest: {
"&&": {
justifyContent: "flex-end",
},
},
});
const markRead = style("markRead", {
$nest: {
"&.buttonAsText": {
fontWeight: globalVars.fonts.weights.semiBold,
color: colorOut(globalVars.mainColors.primary),
},
},
});
const actionButton = style("actionButton", {
marginLeft: unit(24),
});
const selfPadded = style({
paddingLeft: important(0),
paddingRight: important(0),
});
return { root, markRead, selfPadded, actionButton, justifiedRight };
});