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

Convert all campaigns CSS to variables

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Fixed
    • Icon: Must have Must have
    • None
    • None
    • 5
    • Campaigns
    • Sprint #156, Sprint #157, Sprint #158, Sprint #159, Sprint #160, Sprint #161, Sprint #162, Sprint #163, Sprint #164, Sprint #165, Sprint #166
    • nix

      We can rewrite all campaigns customizations to use CSS variables instead of overrides. Doing this is fairly straightforward, and has no risk of breaking our base CSS. It will immediately be beneficial since it will make it a lot easier and safer to make the many planned design system alignment changes.

      With the current situation any CSS change we make is slower than it could be because we need to check if all overrides are still working as intended. So even though we're not working on campaigns themselves, the implementation that relies on overrides is still costing us a lot of time developing and a continuous stream of regressions.

      As an added benefit these same variables can be used to talk to the design system. (See WIP ADR on design tokens integration)

      Example of how easy it is to add variables: https://github.com/greenpeace/planet4-styleguide/compare/add-some-vars#diff-b776a35a889a05ee173cc59283d1d951e2daaccde98821839caa86ff2a7bbd27L49-R56 

      Tasks 

      • Add a variable to the base rules that campaigns are overriding.
      • Replace the override with a usage of the variable.
      • Remove old stylesheets
      • Add documentation to Gitbook

            pvincent Pieter Vincent (Inactive)
            pvincent Pieter Vincent (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: