本文整理汇总了TypeScript中styled-tools.palette函数的典型用法代码示例。如果您正苦于以下问题：TypeScript palette函数的具体用法？TypeScript palette怎么用？TypeScript palette使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了palette函数的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: palette
(opaque, paletteProp, tone = 0) =>
palette(opaque ? `${paletteProp}Text` : paletteProp, tone, "inherit")示例2: p
import { css } from "reakit";
import { prop, palette as p, ifProp } from "styled-tools";
export const palette = {
white: "#ffffff",
whiteText: p("black"),
black: "#212121",
blackText: p("white"),
// https://coolors.co/2196f3-42a5f5-64b5f6-90caf9-bbdefb
primary: ["#2196f3", "#42a5f5", "#64b5f6", "#90caf9", "#bbdefb"],
primaryText: [p("white"), p("white"), p("black"), p("black"), p("black")],
// https://coolors.co/e91e63-ec407a-f06292-f48fb1-f8bbd0
secondary: ["#e91e63", "#ec407a", "#f06292", "#f48fb1", "#f8bbd0"],
secondaryText: [p("white"), p("white"), p("black"), p("black"), p("black")],
// https://coolors.co/f44336-ef5350-e57373-ef9a9a-ffcdd2
danger: ["#f44336", "#ef5350", "#e57373", "#ef9a9a", "#ffcdd2"],
dangerText: [p("white"), p("white"), p("black"), p("black"), p("black")],
// https://coolors.co/ffc107-ffca28-ffd54f-ffe082-ffecb3
alert: ["#ffc107", "#ffca28", "#ffd54f", "#ffe082", "#ffecb3"],
alertText: [p("black"), p("black"), p("black"), p("black"), p("black")],
// https://coolors.co/4caf50-66bb6a-81c784-a5d6a7-c8e6c9
success: ["#4caf50", "#66bb6a", "#81c784", "#a5d6a7", "#c8e6c9"],
successText: [p("white"), p("white"), p("white"), p("black"), p("black")],
grayscale: [示例3:
import { css } from "reakit";
import { prop, palette as p, ifProp } from "styled-tools";
export const Blockquote = css`
color: ${p("alertText", -1)};
background-color: ${p("alert", -1)};
border-left-color: ${p("alert", 1)};
border-left-width: 8px;
border-left-style: solid;
padding: 20px 16px;
margin: 20px -24px;
@media (max-width: 768px) {
margin-right: 0;
padding-right: 8px;
}
`;
export const Button = css`
display: inline-flex;
position: relative;
appearance: none;
align-items: center;
justify-content: center;
cursor: pointer;
min-width: 2.5em;
height: 2.5em;
padding: 0 0.68em;
flex: none;
user-select: none;
white-space: nowrap;示例4: p
import { palette as p } from "styled-tools";
import * as components from "./components";
export const palette = {
white: "#ffffff",
whiteText: p("black"),
black: "#212121",
blackText: p("white"),
primary: ["#fc4678", "#fd6199", "#fd88ce"],
primaryText: [p("white"), p("white"), p("black")],
// https://coolors.co/f44336-ef5350-e57373-ef9a9a-ffcdd2
danger: ["#f44336", "#ef5350", "#e57373", "#ef9a9a", "#ffcdd2"],
dangerText: [p("white"), p("white"), p("black"), p("black"), p("black")],
// https://coolors.co/ffdd32-ffe566-ffeb8c-fff2b2-fff8d8
alert: ["#ffdd32", "#ffe566", "#ffeb8c", "#fff2b2", "#fff8d8"],
alertText: [p("black"), p("black"), p("black"), p("black"), p("black")],
// https://coolors.co/4caf50-66bb6a-81c784-a5d6a7-c8e6c9
success: ["#4caf50", "#66bb6a", "#81c784", "#a5d6a7", "#c8e6c9"],
successText: [p("white"), p("white"), p("white"), p("black"), p("black")],
grayscale: [
p("black"),
"#414141",
"#616161",
"#9e9e9e",
"#bdbdbd",示例5: p
import { css } from "reakit";
import { palette as p } from "styled-tools";
import * as components from "./components";
export const palette = {
white: "#ffffff",
whiteText: p("black"),
black: "#212121",
blackText: p("white"),
primary: ["#fc4678", "#fd6199", "#fd88ce"],
primaryText: [p("white"), p("white"), p("black")],
// https://coolors.co/f44336-ef5350-e57373-ef9a9a-ffcdd2
danger: ["#f44336", "#ef5350", "#e57373", "#ef9a9a", "#ffcdd2"],
dangerText: [p("white"), p("white"), p("black"), p("black"), p("black")],
// https://coolors.co/ffdd32-ffe566-ffeb8c-fff2b2-fff8d8
alert: ["#ffdd32", "#ffe566", "#ffeb8c", "#fff2b2", "#fff8d8"],
alertText: [p("black"), p("black"), p("black"), p("black"), p("black")],
// https://coolors.co/4caf50-66bb6a-81c784-a5d6a7-c8e6c9
success: ["#4caf50", "#66bb6a", "#81c784", "#a5d6a7", "#c8e6c9"],
successText: [p("white"), p("white"), p("white"), p("black"), p("black")],
grayscale: [
p("white"),
"#f5f5f5",
"#eaeaea",
"#bdbdbd",示例6: styled
import { styled, Button } from "reakit";
import { palette } from "styled-tools";
const ButtonGray = styled(Button)`
color: ${palette("grayscale", 1)};
background-color: ${palette("background", -3)};
`;
export default ButtonGray;