Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5843

Replace some colors to align with the design system

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Released
    • Icon: Should have Should have
    • 2.50.3

      Replace these CSS colors by colors from the design system, then delete them from the codebase:

      Black / Grey colors:

      • #000000 = $black > replace by #020202 = $grey-80-
      • #030403 = $header-footer-bg -> replace by #020202 = $grey-80
      • #1a1a1a = none -> replace by #020202 = $grey-80
      • #052a30 = $dark-tiber -> replace by #020202 = $grey-80
      • #242424 = none -> replace by #23292d = $grey
      • #a7a7a7 = $step-number -> unused, was removed with https://jira.greenpeace.org/browse/PLANET-5842
      • #aaaaaa = none -> replace by #a3a5a7 = $grey-20 -> couldn't find it, seems unused 

      Blue colors:

      •  #0a3351 = $med-blue -> replace by #074365 = $dark-blue
      • #094464 = $cookie-blue -> replace by #074365 = $dark-blue
      • #014c8c = $menu-blue ->replace by #020202 = $grey-80
      • #0058cc = $link-hover-color -> replace by #006dfd = $link-color
      • #3290de = $blue-80 -> replace by #006dfd = $link-color
      • #21cbca = $java-dark -> replace by #68dfde = $aquamarine
      • #093944 = $blue-tiber -> replace by #074365 = $dark-blue
      • #c0dbe2 = $cookie-bkg -> replace by #FFFFFF = $white -> we leave this one for now because it looks weird in white, the component will be redesigned
      • #074365 = none -> replace by #074365 = $dark-blue
      • #86eee7 = $spray = -> replace by #FFFFFF = $white
      • #3b5998 = $facebook = -> replace by #4267b2

      Green colors:

      • #418482 = $faded-jade -> replace by #074365 = $dark-blue
      • #0f6459 = $eden -> replace by #FFFFFF = $white
      • #1e5f65 = $top-nav -> replace by #006dfd = $link-color
      • #d9e6d7 = $green-20 -> replace by #FFFFFF = $white

      Orange / Red colors:

      • #ad2330 = $red -> replace by #F75848
      • #a01604 = $red -> replace by #F75848
      • #dd4a22 = $orange-active -> replace by #ee562d = $orange-hover
      • #ff3333 = none -> replace by #F75848
      • #faf7ec = $brown-bg -> replace by #FFFFFF = $white
      • #ea7179 = $email -> replace by #8a49de

       Tasks

      • Before merge, deploy that in all dev sites and ask for feedback
      • Check accessibility reports before and after the change. Flag with the design team any new a11y issues.

            mleray Maud Leray
            mfatome Magali Fatome (Inactive)
            Magali Fatome Magali Fatome (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: