How to use the polished.parseToRgb function in polished

To help you get started, we’ve selected a few polished examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github gamejolt / frontend-lib / components / theme / theme.model.ts View on Github external
function getReadableCustom(custom: string | undefined, background: 'light' | 'dark') {
	if (!custom) {
		return undefined;
	}

	const initialRgb = parseToRgb('#' + custom);
	const initialRgbArr = rgbToTuple(initialRgb);
	const initialHsl = parseToHsl('#' + custom);
	const labColor = rgb2lab(initialRgbArr);
	const labLitNorm = labColor[0] / 100; // Lab lightness normalized to 0 to 1 range.

	if (background === 'light') {
		// Note: We can use the raw MaxLitBase value for the IF and the clamp, because we don't need
		// any hue dependant modifications.

		// If color's lightness is higher than our preferred ceiling value.
		if (labLitNorm > MaxLitBase) {
			// Force lightness down to preferred ceiling value.
			// Due to the preceding IF, this is essentially a ceiling clamp.
			labColor[0] = MaxLitBase * 100;
			const convertedRgb = lab2rgb(labColor);
github vasturiano / three-render-objects / src / three-render-objects.js View on Github external
state.container.style.width = state.width;
      state.container.style.height = state.height;
      state.renderer.setSize(state.width, state.height);
      state.camera.aspect = state.width/state.height;
      state.camera.updateProjectionMatrix();
    }

    if (changedProps.hasOwnProperty('skyRadius') && state.skyRadius) {
      state.controls.hasOwnProperty('maxDistance') && (state.controls.maxDistance = state.skyRadius);
      state.camera.far = state.skyRadius * 2.5;
      state.camera.updateProjectionMatrix();
      state.skysphere.geometry = new three.SphereGeometry(state.skyRadius);
    }

    if (changedProps.hasOwnProperty('backgroundColor')) {
      let alpha = parseToRgb(state.backgroundColor).alpha;
      if (alpha === undefined) alpha = 1;
      state.renderer.setClearColor(new three.Color(opacify(1, state.backgroundColor)), alpha);
    }

    if (changedProps.hasOwnProperty('backgroundImageUrl')) {
      if (!state.backgroundImageUrl) {
        state.skysphere.visible = false;
        state.skysphere.material.map = null;

        !state.loadComplete && finishLoad();
      } else {
        new three.TextureLoader().load(state.backgroundImageUrl, texture => {
          state.skysphere.material = new three.MeshBasicMaterial({ map: texture, side: three.BackSide });
          state.skysphere.visible = true;

          // triggered when background image finishes loading (asynchronously to allow 1 frame to load texture)
github souporserious / tonality / src / index.js View on Github external
export function adjustLightness(amount, color) {
  const { red, green, blue, alpha = 1 } = parseToRgb(color)
  let rgb
  if (amount === 0) {
    rgb = rgba(0, 0, 0, alpha)
  } else if (amount === 1) {
    rgb = rgba(255, 255, 255, alpha)
  } else {
    let maxIteration = 20
    const test = (color1, color2) => {
      const mixed = mix(0.5, color1, color2)
      const mixedlightness = getLightness(mixed)
      if (Math.abs(amount - mixedlightness) < EPS || !maxIteration--) {
        return mixed
      }
      if (mixedlightness > amount) {
        return test(color1, mixed)
      }
github smooth-code / smooth-ui / packages / shared / core / theme.js View on Github external
export const colorYik = props => color => {
  color = typeof color === 'function' ? color(props) : color
  const { red: r, green: g, blue: b } = parseToRgb(color)
  const yik = (r * 299 + g * 587 + b * 114) / 1000
  return yik >= th('yiqContrastedThreshold')(props)
    ? th('yikTextDark')(props)
    : th('yikTextLight')(props)
}
github xDae / styled-bootstrap / utils / src / color-functions.js View on Github external
export function colorYiq(color: string): string {
  const r = parseToRgb(color).red;
  const g = parseToRgb(color).green;
  const b = parseToRgb(color).blue;

  const yiq = (r * 299 + g * 587 + b * 114) / 1000;

  if (yiq >= 150) {
    return '#111';
  }

  return '#fff';
}
github elastic / kibana / x-pack / legacy / plugins / infra / public / utils / styles.ts View on Github external
export const transparentize = (amount: number, color: string): string => {
  if (color === 'transparent') {
    return color;
  }

  const parsedColor = parseToRgb(color);
  const alpha: number =
    'alpha' in parsedColor && typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
  const colorWithAlpha = {
    ...parsedColor,
    alpha: clampValue((alpha * 100 - amount * 100) / 100, 0, 1),
  };

  return rgba(colorWithAlpha);
};
github xDae / styled-bootstrap / utils / es / index.js View on Github external
function colorYiq(color) {
  var r = parseToRgb(color).red;
  var g = parseToRgb(color).green;
  var b = parseToRgb(color).blue;

  var yiq = (r * 299 + g * 587 + b * 114) / 1000;

  if (yiq >= 150) {
    return '#111';
  }

  return '#fff';
}
github xDae / styled-bootstrap / utils / src / color-functions.js View on Github external
export function colorYiq(color: string): string {
  const r = parseToRgb(color).red;
  const g = parseToRgb(color).green;
  const b = parseToRgb(color).blue;

  const yiq = (r * 299 + g * 587 + b * 114) / 1000;

  if (yiq >= 150) {
    return '#111';
  }

  return '#fff';
}
github vrk-kpa / suomifi-ui-components / src / utils / css / colors.ts View on Github external
export const alphaHex = (value: number) => (hex: string) =>
  toColorString({
    ...parseToRgb(hex),
    alpha: value,
  });
github Volst / ui-components / src / config.ts View on Github external
export function readableColor(color: string) {
  const { red, green, blue } = parseToRgb(color);
  const yiq = (red * 299 + green * 587 + blue * 114) / 1000;
  return yiq >= 150 ? '#111' : '#fff';
}