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:       ('light' as PaletteType),
  primary:    indigo,
  secondary:  teal,
  error:      red,
  background: '#EFF3FA',  // MUI.io: surface-dark
  surface:    '#F9FDFF',  // MUI.io: surface-main
}
const primary = {
  light:  palette.primary[100],
  main:   palette.primary[300],
  dark:   palette.primary[600],
}
const secondary = {
  light:  palette.secondary[600],
  main:   palette.secondary[800],
  dark:   palette.secondary[900],
}
const error = {
  light:  palette.error[300],
  main:   palette.error[700], // no "main vs dark" yet
  dark:   palette.error[700],
}

// 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: primary.light,
      main: primary.main,
      dark: primary.dark,
      contrastText: getContrastText({
        background: primary.dark,
        contrastThreshold,
        warnings,
      }),
    },
    secondary: {
      light: secondary.light,
      main: secondary.main,
      dark: secondary.dark,
      contrastText: getContrastText({
        background: secondary.main,
        contrastThreshold,
        warnings,
      }),
    },
    error: {
      light: error.light,
      main: error.main,
      dark: error.dark,
      contrastText: getContrastText({
        background: error.main,
        contrastThreshold,
        warnings,
      }),
    },
    background: {
      default: palette.background, // MUI.io: surface-dark
      paper:   palette.surface,    // MUI.io: 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,
  warnings = true
}: {
  background: string,
  contrastThreshold: number,
  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