本文整理汇总了TypeScript中@library/styles/styleHelpers.modifyColorBasedOnLightness函数的典型用法代码示例。如果您正苦于以下问题：TypeScript modifyColorBasedOnLightness函数的具体用法？TypeScript modifyColorBasedOnLightness怎么用？TypeScript modifyColorBasedOnLightness使用的例子？那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了modifyColorBasedOnLightness函数的4个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: useThemeCache
//.........这里部分代码省略.........
},
focus: {
fonts: {
color: globalVars.mainColors.bg,
},
colors: {
bg: globalVars.mainColors.secondary,
},
borders: {
color: globalVars.mainColors.secondary,
},
},
focusAccessible: {
fonts: {
color: globalVars.mainColors.bg,
},
colors: {
bg: globalVars.mainColors.secondary,
},
borders: {
color: globalVars.mainColors.secondary,
},
},
});
const transparent: IButtonType = makeThemeVars("transparent", {
colors: {
bg: transparentColor,
},
fonts: {
color: globalVars.mainColors.fg,
},
border: {
color: modifyColorBasedOnLightness(globalVars.mainColors.fg, 1, true),
radius: globalVars.border.radius,
},
hover: {
colors: {
bg: modifyColorBasedOnLightness(globalVars.mainColors.fg, 0.9),
},
},
active: {
colors: {
bg: modifyColorBasedOnLightness(globalVars.mainColors.fg, 0.9),
},
},
focus: {
colors: {
bg: modifyColorBasedOnLightness(globalVars.mainColors.fg, 0.9),
},
},
focusAccessible: {
colors: {
bg: modifyColorBasedOnLightness(globalVars.mainColors.fg, 0.9),
},
},
});
const translucid: IButtonType = makeThemeVars("translucid", {
colors: {
bg: modifyColorBasedOnLightness(globalVars.mainColors.bg, 1).fade(0.1),
},
fonts: {
color: globalVars.mainColors.bg,
},
spinnerColor: globalVars.mainColors.bg,示例2: useThemeCache
//.........这里部分代码省略.........
lineHeights: {
default: lineHeights.base,
},
colors: {
fg: mixBgAndFg(0.85),
},
});
const states = makeThemeVars("states", {
icon: {
opacity: 0.6,
},
text: {
opacity: 0.75,
},
hover: {
color: mixPrimaryAndBg(0.08),
opacity: 1,
},
selected: {
color: mixPrimaryAndBg(0.5),
opacity: 1,
},
active: {
color: mixPrimaryAndBg(0.2),
opacity: 1,
},
focus: {
color: mixPrimaryAndBg(0.15),
opacity: 1,
},
});
const overlayBg = modifyColorBasedOnLightness(mainColors.fg, 0.5);
const overlay = makeThemeVars("overlay", {
dropShadow: `2px -2px 5px ${colorOut(overlayBg.fade(0.3))}`,
bg: overlayBg,
border: {
color: mixBgAndFg(0.1),
radius: border.radius,
},
fullPageHeadingSpacer: 32,
spacer: 32,
});
const userContent = makeThemeVars("userContent", {
font: {
sizes: {
default: fonts.size.medium,
h1: "2em",
h2: "1.5em",
h3: "1.25em",
h4: "1em",
h5: ".875em",
h6: ".85em",
},
},
list: {
margin: "2em",
listDecoration: {
minWidth: "2em",
},
},
});
const buttonIconSize = 36;示例3: useThemeCache
export const titleBarVariables = useThemeCache(() => {
const globalVars = globalVariables();
const formElementVars = formElementsVariables();
const makeThemeVars = variableFactory("titleBar");
const sizing = makeThemeVars("sizing", {
height: 48,
spacer: 12,
mobile: {
height: 44,
width: formElementVars.sizing.height,
},
});
const colors = makeThemeVars("colors", {
fg: globalVars.mainColors.bg,
bg: globalVars.mainColors.primary,
});
const guest = makeThemeVars("guest", {
spacer: 8,
});
const buttonSize = formElementVars.sizing.height;
const button = makeThemeVars("button", {
borderRadius: globalVars.border.radius,
size: buttonSize,
guest: {
minWidth: 86,
},
mobile: {
fontSize: 16,
width: buttonSize,
},
state: {
bg: emphasizeLightness(colors.bg, 0.04),
},
});
const count = makeThemeVars("count", {
size: 18,
fontSize: 10,
fg: globalVars.mainColors.bg,
bg: globalVars.mainColors.primary,
});
const dropDownContents = makeThemeVars("dropDownContents", {
minWidth: 350,
maxHeight: viewHeight(90),
});
const endElements = makeThemeVars("endElements", {
flexBasis: buttonSize * 4,
mobile: {
flexBasis: button.mobile.width * 2,
},
});
const compactSearch = makeThemeVars("compactSearch", {
maxWidth: 672,
mobile: {
width: button.mobile.width,
},
});
const buttonContents = makeThemeVars("buttonContents", {
state: {
bg: button.state.bg,
},
});
const signIn = makeThemeVars("signIn", {
fg: colors.fg,
bg: modifyColorBasedOnLightness(globalVars.mainColors.primary, 0.1, true),
hover: {
bg: modifyColorBasedOnLightness(globalVars.mainColors.primary, 0.2, true),
},
});
const resister = makeThemeVars("register", {
fg: colors.bg,
bg: colors.fg,
borderColor: colors.bg,
states: {
bg: colors.fg.fade(0.9),
},
});
const mobileDropDown = makeThemeVars("mobileDropdown", {
height: px(sizing.mobile.height),
});
const meBox = makeThemeVars("meBox", {
sizing: {
buttonContents: 32,
},
});
const bottomRow = makeThemeVars("bottomRow", {
bg: modifyColorBasedOnLightness(colors.bg, 0.1).desaturate(0.2, true),
//.........这里部分代码省略.........
示例4: useThemeCache
export const splashVariables = useThemeCache(() => {
const makeThemeVars = variableFactory("splash");
const globalVars = globalVariables();
const widgetVars = widgetVariables();
const formElVars = formElementsVariables();
const topPadding = 69;
const spacing = makeThemeVars("spacing", {
padding: {
top: topPadding as PaddingProperty<TLength>,
bottom: (topPadding * 0.8) as PaddingProperty<TLength>,
right: unit(widgetVars.spacing.inner.horizontalPadding + globalVars.gutter.quarter) as PaddingProperty<
TLength
>,
left: unit(widgetVars.spacing.inner.horizontalPadding + globalVars.gutter.quarter) as PaddingProperty<
TLength
>,
},
});
// Main colors
const colors = makeThemeVars("colors", {
primary: globalVars.mainColors.primary,
secondary: globalVars.mainColors.secondary,
contrast: globalVars.elementaryColors.white,
input: globalVars.mainColors.fg,
});
const outerBackground: IBackground = makeThemeVars("outerBackground", {
color: colors.primary,
backgroundPosition: "50% 50%",
backgroundSize: "cover",
image: assetUrl("/resources/design/fallbackSplashBackground.svg"),
fallbackImage: assetUrl("/resources/design/fallbackSplashBackground.svg"),
});
const innerBackground = makeThemeVars("innerBackground", {
bg: undefined,
padding: {
top: spacing.padding,
right: spacing.padding,
bottom: spacing.padding,
left: spacing.padding,
},
});
const text = makeThemeVars("text", {
shadowMix: 1, // We want to get the most extreme lightness contrast with text color (i.e. black or white)
innerShadowOpacity: 0.25,
outerShadowOpacity: 0.75,
});
const title = makeThemeVars("title", {
maxWidth: 700,
font: {
color: colors.contrast,
size: globalVars.fonts.size.title,
weight: globalVars.fonts.weights.semiBold as FontWeightProperty,
align: "center",
shadow: `0 1px 1px ${colorOut(
modifyColorBasedOnLightness(colors.contrast, text.shadowMix).fade(text.innerShadowOpacity),
)}, 0 1px 25px ${colorOut(
modifyColorBasedOnLightness(colors.contrast, text.shadowMix).fade(text.outerShadowOpacity),
)}` as TextShadowProperty,
},
marginTop: 28,
marginBottom: 40,
text: "How can we help you?",
});
const border = makeThemeVars("border", {
color: colors.contrast,
});
const searchContainer = makeThemeVars("searchContainer", {
width: 670,
});
const paragraph = makeThemeVars("paragraph", {
margin: ".4em",
text: {
size: 24,
weight: 300,
},
});
const search = makeThemeVars("search", {
margin: 30,
fg: colors.contrast,
bg: colors.contrast,
});
const searchDrawer = makeThemeVars("searchDrawer", {
bg: colors.contrast,
});
const searchBar = makeThemeVars("searchBar", {
sizing: {
height: formElVars.giantInput.height,
width: 705,
//.........这里部分代码省略.........