[Enhancement] Flag color and font

[henrikvoetmand]

• [x] I have written a good issue

Describe the enhancement

To improve readability of text in our red "danger" flags, we would like to change both the background color and the text font.

Describe the solution you'd like

Set the red background color of "danger" flags to red-30 ( #FF878A - one of the new kirby colors) Change font weight to "medium" (500)

Have you considered any alternatives?

No!

Are there any additional context?

See comment for context.

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

• [ ] Request that the issue is UX refined; do not proceed until this is done.
• [ ] Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• [ ] Make sure you have read: "Before you get coding".
• [ ] Signal to others you are working on the issue by assigning yourself.
• [ ] Create a branch from the master branch following our branch naming convention.
• [ ] Publish a WIP implementation to Github as a draft PR and ask for feedback.
• [ ] Make sure you have implemented tests following the guidelines in: "The good: Test".
• [ ] Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

• [ ] Do a self-review.
• [ ] Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".

[MadsBuchmann]

We will use this as a tester for a new design token structure. Therefore we will have a meeting to refine how this should be done. But the task itself should be simple enough - we're just complicating it a bit by testing the new structure 😄

[MadsBuchmann]

Design tokens discussion write up

We should have the following layers:

1. Named colors (red-30, green-10, etc...)
2. Semantic named tokens (encodes intention, usage & meaning)
3. Application to component (not an actual layer - we just apply the tokens from layer 2 to the individual components)

A naming convention for the second layer could be (inspired by this talk):

We're still a bit iffy on whether we need each part of that naming convention to serve our needs.

In the case of flag, we decided on implementing the following structure:

Next steps

We discussed whether to include both danger-background-weak and danger-background for this issue.

I'm a bit iffy on where we eventually landed. My understanding is, that we decided on introducing danger-background-weak as part of this issue and then spin off an additional issue for danger-background and replacing instances of red-50 with the new semantic token.

This is to be able to quickly ship this issue.

A new issue has been created for this:

• [ ] #2079

Generated colors

@henrikvoetmand mentioned that it is desired to have some colors which are generated programatically to be part of kirby. The code for this is in Sass; we decided that it could be done. A new issue has been created for this:

• [ ] #2080

[MadsBuchmann]

Further tech refinement

This issue should:

1. Introduce the named color token red-30 for the value #FF878A
2. Introduce the semantic named token danger-background-weak which should point to red-30
3. Use the token danger-background-weak for the flags background color.

Unknows

The file structure for storing these tokens still has to be decided.

Personally i think we should start out with a rudimentary structure that we then can refine after also having solved #2041. Perhaps just add something along the lines of the below to libs/core/src/scss/themes/_colors.scss:

$colors: (
   'red-30': #ff878a
);

$danger-background-weak: $colors.red-30; 

We could then look into tools such as style-dictionary which maybe will allow us to remove our json token generation script 👀

[jkaltoft]

Ultimately I still think we should go for at ITCSS inspired architecture. To keep the scope of this issue under control I agree that we should "just throw it" into the existing colors partial. Later that partial should be placed in the Settings layer. We should probably also hold our horses regarding style-dictionary, but it does sound interesting 🙂

[MadsBuchmann]

@jkaltoft out of curiosity, if we were to go the ITCSS route the tokens would belong to the settings layer, aight?

[jkaltoft]

@jkaltoft out of curiosity, if we were to go the ITCSS route the tokens would belong to the settings layer, aight?

Yes! 😁

[MadsBuchmann]

My two remaining brain cells were on vacation when i read that 🤦

[MadsBuchmann]

After having discussed this last Friday (11/3/2022), the tokens should just be created in the _colors.scss file as described in: https://github.com/kirbydesign/designsystem/issues/2041#issuecomment-1061569887.

The file structure can then be further refined in the future. For example using ITCSS.