JavaScript material-ui/utils/colorManipulator lightenの例

コード例 #1

ファイル: theme.js プロジェクト: mib32/react-shopify-app

var yellow = '#f1c40f';

var headlineTextSize = 24;
var headlineTextWeight = 300;

var buttonTextSize = 14;
var buttonTextWeight = 400;
var buttonTextTransform = 'uppercase';

module.exports = {
  spacing: Spacing,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: topNavColor,
    primary2Color: ColorManipulator.darken(orange, 0.3),
    primary3Color: ColorManipulator.lighten(topNavColor, 0.3),

    accent1Color: orange,
    accent2Color: subNavColor,
    accent3Color: '#000',

    textColor: foregroundBlack,
    alternateTextColor: foregroundWhite,
    disabledTextColor: foregroundGrey,

    canvasColor: Colors.white,
    borderColor: ColorManipulator.fade(foregroundGrey, 0.5),
    disabledColor: foregroundGrey,

    foregroundBlack: foregroundBlack,
    foregroundBlackFaded: ColorManipulator.fade(foregroundBlack, 0.5),

コード例 #2

ファイル: solemnTheme.js プロジェクト: sveinburne/colab

const primary1 = jet
const secondary1 = darkSeaGreen

const theme = {
  spacing: spacing,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: primary1,
    primary2Color: secondary1,
    primary3Color: dolphinGray,
    accent1Color: cyan800,
    accent2Color: dimGray,
    accent3Color: dolphinGray,
    textColor: aeroBlue,
    alternateTextColor: lighten(aeroBlue, 0.12),
    highContrastTextColor: primary1,
    canvasColor: grey900,
    borderColor: auroreGreen,
    disabledColor: 'rgb(120, 120, 120)',
    pickerHeaderColor: darkSeaGreen,
    clockCircleColor: fade(grey900, 0.07),
    shadowColor: secondary1,
    headerColor: secondary1,
    successColor: lightGreen500,
    failureColor: redA700,
    warningColor: amber500,
    infoColor: lightBlue900,
    controlsColor: fade('#000', 0.850),
    pageBackground: primary1
  }

コード例 #3

ファイル: custom-theme.js プロジェクト: Pooya-Tolideh/Statflo-CRM-Challenge

//Activate these imports if needed:
/*import zIndex from 'material-ui/styles/zIndex';
import autoprefixer from 'material-ui/utils/autoprefixer';
import callOnce from 'material-ui/utils/callOnce';
import rtl from 'material-ui/utils/rtl';
import typography from 'material-ui/styles/typography';*/
//

import {darken, fade, emphasize, lighten} from 'material-ui/utils/colorManipulator';
import {white, blue500,blueGrey300,lightBlueA400,lightBlueA200} from 'material-ui/styles/colors';

import getMuiTheme from 'material-ui/styles/getMuiTheme';

export default  getMuiTheme({

        tableRow: {stripeColor:fade(lighten(blue500, 0.9), 0.4)},

        tableHeaderColumn:{
            textColor:blueGrey300,
            height:20
        },

        textField:{
            focusColor:blueGrey300,
            borderColor:blueGrey300
        },

        radioButton:{
            labelColor:lightBlueA400,
            checkedColor:lightBlueA400,
            textColor: lightBlueA400,

コード例 #4

ファイル: Geobuffer.js プロジェクト: rezonski/sandbox

const primaryColor = '#3f3d48';
const accentColor = '#f16078';
const textColor = 'rgba(33, 33, 33, 0.87)';
const canvasColor = white;
const borderColor = '#d3d3d3';
const secondaryTextColor = 'rgba(33, 33, 33, 0.54)';
const fontFamily = 'Roboto, sans-serif';

export default {
    spacing: spacingWithContentMaxWidth,
    fontFamily,
    typography,
    palette: {
        primary1Color: primaryColor,
        primary2Color: lighten(primaryColor, 0.2),
        primary3Color: lighten(primaryColor, 0.4),
        accent1Color: accentColor,
        accent2Color: lighten(accentColor, 0.2),
        accent3Color: lighten(accentColor, 0.4),
        textColor,
        secondaryTextColor,
        alternateTextColor: 'rgba(255, 255, 255, 0.87)',
        canvasColor,
        borderColor,
        disabledColor: 'rgba(33, 33, 33, 0.38)',
        shadowColor: fullBlack,
    },
    dataTable: {
        headerHeight: 56,
        rowHeight: 48,