TypeScript styled-tools.palette函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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")

开发者ID:IgorCRD，项目名称:reakit，代码行数:2，代码来源:styledProps.ts

示例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: [

开发者ID:IgorCRD，项目名称:reakit，代码行数:31，代码来源:index.ts

示例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;

开发者ID:IgorCRD，项目名称:reakit，代码行数:31，代码来源:components.ts

示例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",

开发者ID:IgorCRD，项目名称:reakit，代码行数:31，代码来源:light.ts

示例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",

开发者ID:IgorCRD，项目名称:reakit，代码行数:31，代码来源:dark.ts

示例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;

开发者ID:IgorCRD，项目名称:reakit，代码行数:9，代码来源:ButtonGray.ts

注：本文中的styled-tools.palette函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。