@visual-framework/vf-design-tokens/src/theme.palette.alias.yml

A collection of design tokens for consumption across projects and products

aliases:

  # EMBL Brand Colours
  # ------------------

  vf-color--brand: '#18974C'
  vf-color--brand--dark: '#0A5032'

  # Text Colours
  # ------------

  vf-color__text--primary: '#1a1c1a'
  vf-color__text--secondary: '#373a36'

  # Interactive Text Colours

  vf-color__link: '#3B6FB6'
  vf-color__link--hover: '#193f90'
  vf-color__link--focus: '#193f90'
  vf-color__link--visited: '#563D82'

  # Background Colours
  # ------------------

  vf-color__background--primary: '#FFFFFF'
  vf-color__background--secondary: '#D0D0CE'
  vf-color__background--tertiary: '#54585A'

  # Interactive Colours
  # --------------

  vf-color__interactive: '#3B6FB6'
  vf-color__interactive--background: '#D1E3F6'

  # Button Colours
  # --------------

  # Primary Button

  vf-color__button__text--primary: '#FFFFFF'
  vf-color__button__border--primary: '#3B6FB6'
  vf-color__button__background--primary: '#3B6FB6'
  vf-color__button__shadow--primary: '#193f90'

  # Secondary Button

  vf-color__button__text--secondary: '#3B6FB6'
  vf-color__button__border--secondary: '#3B6FB6'
  vf-color__button__background--secondary: '#FFFFFF'
  vf-color__button__shadow--secondary: '#193f90'

  # Tertiary Button

  vf-color__button__text--tertiary: '#FFFFFF'
  vf-color__button__border--tertiary: '#373A36'
  vf-color__button__background--tertiary: '#373A36'
  vf-color__button__shadow--tertiary: '#000000'