@tgrx/getcontrasttext

Material-UI's getContrastText() function and helpers| TGRstack

Development and Production Ready |⸰| VSCode Extensions

Install

$ npm i -S @tgrx/getcontrasttext

About

Sometimes its useful to access some of the under the hood functionality of Material-UI. I basically copy pasted some of the functions from MUI-4.0.0-alpha.0 and put them on a /TGRstack/typescript-module. Easy Peasy.

Example

// TYPINGS
import { PaletteType } from '@material-ui/core'
import { SpacingOptions } from '@material-ui/core/styles/spacing'

// COLORS
import indigo from '@material-ui/core/colors/indigo'
import red from '@material-ui/core/colors/red'
import teal from '@material-ui/core/colors/teal'

// HELPERS
import getContrastText from '@tgrx/getcontrasttext'
import { isProd } from '_config/index'

// SETTINGS

// tslint:disable object-literal-sort-keys
const palette = {
  type: ('dark' as PaletteType),
  primary: indigo,
  secondary: teal,
  error: red,
  background: '#000',
  surface: '#111'
}
// tslint:enable object-literal-sort-keys

// Used by `getContrastText()` to maximize the contrast
//    between the background and the text.
const contrastThreshold = 3

// Used to shift a color's luminance by approximately
//   two indexes within its tonal palette.
//   E.g., shift from Red 500 to Red 300 or Red 700.
const tonalOffset = 0.2

const spacing = (4 as SpacingOptions)

const warnings = !isProd

// tslint:disable object-literal-sort-keys
export default {
  palette: {
    type: palette.type,
    primary: {
      light: palette.primary[300],
      main: palette.primary[500],
      dark: palette.primary[700],
      contrastText: getContrastText({  // example of import getContrastText()
        background: palette.primary[500],
        light: {text: {primary: palette.primary[300]}},
        dark: {text: {primary: palette.primary[700]}},
        contrastThreshold,
        warnings,
      }),
    },
    secondary: {
      light: palette.secondary.A200,
      main: palette.secondary.A400,
      dark: palette.secondary.A700,
      contrastText: getContrastText({  // example of import getContrastText()
        background: palette.secondary[500],
        light: {text: {primary: palette.secondary[300]}},
        dark: {text: {primary: palette.secondary[700]}},
        contrastThreshold,
        warnings,
      }),
    },
    error: {
      light: palette.error[300],
      main: palette.error[500],
      dark: palette.error[700],
      contrastText: getContrastText({  // example of import getContrastText()
        background: palette.error[500],
        light: {text: {primary: palette.error[300]}},
        dark: {text: {primary: palette.error[700]}},
        contrastThreshold,
        warnings,
      }),
    },
    background: {
      default: palette.background, // inDesign: surface-dark
      paper:   palette.surface,    // inDesign: surface-main
    },
    contrastThreshold,
    tonalOffset,
  },
  spacing,
  typography: {
    useNextVariants: true,
  },
}
// tslint:enable object-literal-sort-keys

Functions

import getContrastText, {
  decomposeColor,
  convertHexToRGB,
  getContrastRatio,
  getLuminance,
} from '@tgrx/getcontrasttext'

• default getContrastText()

getContrastText({
  background,
  contrastThreshold,
  dark,
  light,
  warnings = true
}: {
  background: string,
  contrastThreshold: number,
  dark: {text: {primary: string}},
  light: {text: {primary: string}},
  warnings?: boolean
}) 

• decomposeColor()

decomposeColor(color: string): {type: string, values: number[]} {

• convertHexToRGB()

convertHexToRGB(color: string)

• getContrastRatio()

getContrastRatio(foreground: string, background: string)

• getLuminance()

getLuminance(color: string)

Contributing

Docs

• Starterkit used for this Module
• TGRStack Wiki & Documentation
• Changelog

Commands - READ THIS

* nps                   # Executes the module, watching for rebuilds.
* nps help              # Displays all available commands
* nps commit            # Creates a commit, don't use `git commit -m ...`
* nps build             # Builds the module
* nps lint              # Lint checks the module
* nps test              # Test checks the module
* nps relase            # Semver actions
* nps publish           # NPM actions