Stepped lists: Change counter font-size to root font size

[lyubomir-popov]

Pattern to amend

Proposal:

1. make counters (numbers in circles) paragraph size, regardless of the heading style of the titles
2. replace gray-filled circles with ones that are white with a black outline. This way it will be consistent with the new stepper designs

Counter circles become too large and prominent when they contain a digit in the same size as the heading:

Can we instead stick to paragraph size like so:

Visual

[bartaz]

@lyubomir-popov as purely visual update - can it go straight for development, or do you want it discussed/reviewed first?

[lyubomir-popov]

I would say straight to development. I don't think a minor detail like this requires extensive debate.

[huwshimi]

Just wanted to confirm a couple of things:

The size of the counters will be fixed to the base line height size (with the text set to the base font size)?

The font-weight will be set to the regular text weight (300) ignoring the title's font weight?

Something like this:

[bartaz]

@lyubomir-popov Can you have a look at Huw's questions about it - it's a bit unclear what we want to achieve here.

[lyubomir-popov]

@huwshimi

The size of the counters will be fixed to the base line height size (with the text set to the base font size)? Yes please The font-weight will be set to the regular text weight (300) ignoring the title's font weight? yes

Only one more thing - we need to ensure they sit correctly next to the headings, they should ideally align with the lowercase. Once you have a pr up I ca ntry and help with the final vertica lalignment

[lyubomir-popov]

@huwshimi I had to quickly hack it together in one place, here's what I did

        &::before {
          font-size: 1rem;
          font-weight: 500;
          line-height: 2rem;
          margin-top: .6rem;
          width: 2rem !important;
        }

[huwshimi]

@lyubomir-popov I've pushed up a draft PR here: https://github.com/canonical/vanilla-framework/pull/4584.

I haven't updated the size yet as the base line height is 1.5rem but in your example you've set it to 2rem so I wasn't sure which to go with...