Skip to content

Improve global/severity colors usage #3522

@mimarz

Description

@mimarz

1. Override

Feature request after meeting with Enova about the possibility for defining the base color used for global colors.

This is due to need for global/system colors to resonate better with brand colors and their ui as a whole.

They are override this today by adding "global colors" in the main/support set and manually copying the json color scale and overwriting global colors.

Image
//Designsystemet  // Enova
blue: '#0A71C0', // '#3c7c97'
green: '#068718', // '#267352'
orange: '#EA9B1B', // '#fbde51'
purple: '#663299', // '#8156ab'
red: '#C01B1B', // '#ac3d3a'

This could be an advanced feature we support only via the config file.

ieg.

 "digdir": {
      "colors": {
        "main": {
          "accent": "#0062BA"
        },
        "support": {
          "brand1": "#F45F63",
          "brand2": "#E5AA20",
          "brand3": "#1E98F5"
        },
        "neutral": "#1E2B3C",
        "global": {
          "blue": "#3c7c97",
          "green": "#267352",
          "orange": "#fbde51",
          "purple": "#8156ab",
          "red": "#ac3d3a"
       }
      }
    },

2. Rename global colors to match severity

The colors are exclusively used for severity colors 1:1, so we suggest renaming these to match the severity color they are mapped to streamline the color tokens creationg, usage and readability for people wanting to customize colors.

blue -> info
green -> success
orange -> warning
red -> danger
purple -> purple?

Sub-issues

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    ☂ Todo Epics

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions