1. Advisor
  2. @kiwicom/orbit-design-tokens
  3. functions
  4. @kiwicom/orbit-design-tokens/lib/convertHexToRgba
View all @kiwicom/orbit-design-tokens analysis

How to use the @kiwicom/orbit-design-tokens/lib/convertHexToRgba function in @kiwicom/orbit-design-tokens

To help you get started, we’ve selected a few @kiwicom/orbit-design-tokens 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 kiwicom / orbit-components / src / ButtonLink / helpers / getButtonLinkBoxShadow.js View on Github external
}) => {
  if (disabled) {
    return null;
  }
  if (state === BUTTON_STATES.ACTIVE && !transparent) {
    return css`
      box-shadow: inset 0 0 6px 3px ${convertHexToRgba(theme.orbit.paletteInkNormal, 8)};
      // TODO: token
    `;
  }
  if (state === BUTTON_STATES.FOCUS) {
    return css`
      ${!transparent &&
        css`
          &:active {
            box-shadow: inset 0 0 6px 3px ${convertHexToRgba(theme.orbit.paletteInkNormal, 8)};
          }
        `};
    `;
  }
  return null;
};
export default getButtonLinkBoxShadow;
github kiwicom / orbit-components / src / Button / helpers / getTypeToken.js View on Github external
[TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.borderColorButtonWhiteBorderedActive,
    },
    [TOKENS.borderColorButtonFocus]: {
      [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 50),
      [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
      [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 50),
      [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 50),
      [TYPE_OPTIONS.WARNING]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 50),
      [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 50),
      [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteSocialFacebook, 50),
      [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
      [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 50),
    },
  };
  return tokens[name][type];
};
github kiwicom / orbit-components / src / ButtonLink / helpers / getTypeToken.js View on Github external
[TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondaryHover,
    },
    [TOKENS.colorTextButton]: {
      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimary,
      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondary,
    },
    [TOKENS.colorTextButtonHover]: {
      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryHover,
      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryHover,
    },
    [TOKENS.colorTextButtonActive]: {
      [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryActive,
      [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryActive,
    },
    [TOKENS.backgroundButtonFocus]: {
      [TYPES.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 10),
      [TYPES.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 10),
    },
  };

  return tokens[name][type];
};
github kiwicom / orbit-components / src / Popover / components / ContentWrapper.js View on Github external
  background-color: ${({ theme }) => convertHexToRgba(theme.orbit.paletteInkNormal, 60)};
  transition: opacity ${({ theme }) => theme.orbit.durationNormal} ease-in-out;
github kiwicom / orbit-components / src / Slider / components / Handle / index.js View on Github external
    box-shadow: 0 1px 4px 0 ${({ theme }) => convertHexToRgba(theme.orbit.paletteInkNormal, 10)},
      0 0 0 2px ${({ theme }) => convertHexToRgba(theme.orbit.paletteProductNormal, 20)};
github kiwicom / orbit-components / src / Button / helpers / getTypeToken.js View on Github external
},
    [TOKENS.borderColorButtonActive]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.borderColorButtonWhiteBorderedActive,
    },
    [TOKENS.borderColorButtonFocus]: {
      [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 50),
      [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
      [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 50),
      [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 50),
      [TYPE_OPTIONS.WARNING]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 50),
      [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 50),
      [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteSocialFacebook, 50),
      [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
      [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 50),
    },
  };
  return tokens[name][type];
};
github kiwicom / orbit-components / src / Button / helpers / getTypeToken.js View on Github external
[TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebookActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteActive,
    },
    [TOKENS.backgroundButtonFocus]: {
      [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 10),
      [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 10),
      [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 10),
      [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 10),
      [TYPE_OPTIONS.WARNING]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 10),
      [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 10),
      [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteSocialFacebook, 10),
      [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 10),
      [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 20),
    },
    [TOKENS.backgroundButtonBordered]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteBordered,
    },
    [TOKENS.backgroundButtonBorderedHover]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBorderedHover,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBorderedHover,
github kiwicom / orbit-components / src / Button / helpers / getTypeToken.js View on Github external
[TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleHover,
      [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteHover,
    },
    [TOKENS.backgroundButtonActive]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebookActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteActive,
    },
    [TOKENS.backgroundButtonFocus]: {
      [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 10),
      [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 10),
      [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 10),
      [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 10),
      [TYPE_OPTIONS.WARNING]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 10),
      [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 10),
      [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteSocialFacebook, 10),
      [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 10),
      [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 20),
    },
    [TOKENS.backgroundButtonBordered]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonBordered,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonBordered,
github kiwicom / orbit-components / src / Button / helpers / getTypeToken.js View on Github external
[TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.borderColorButtonWhiteBorderedActive,
    },
    [TOKENS.borderColorButtonFocus]: {
      [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 50),
      [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
      [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 50),
      [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 50),
      [TYPE_OPTIONS.WARNING]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 50),
      [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 50),
      [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteSocialFacebook, 50),
      [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
      [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 50),
    },
  };
  return tokens[name][type];
};
github kiwicom / orbit-components / src / Button / helpers / getTypeToken.js View on Github external
[TOKENS.borderColorButtonActive]: {
      [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedActive,
      [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedActive,
      [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedActive,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedActive,
      [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedActive,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedActive,
      [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedActive,
      [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedActive,
      [TYPE_OPTIONS.WHITE]: theme.orbit.borderColorButtonWhiteBorderedActive,
    },
    [TOKENS.borderColorButtonFocus]: {
      [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 50),
      [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
      [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 50),
      [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 50),
      [TYPE_OPTIONS.WARNING]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 50),
      [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 50),
      [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteSocialFacebook, 50),
      [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
      [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 50),
    },
  };
  return tokens[name][type];
};

@kiwicom/orbit-design-tokens

Design tokens for Kiwi.com.

GitHub
MIT
Latest version published 2 months ago

Package Health Score

87 / 100
Full package analysis

Popular @kiwicom/orbit-design-tokens functions

Similar packages