Adjust spacing and size of logo section and deprecate the dense variant

[pastelcyborg]

Done

• Simplify dense logo section component, removing unnecessary styles and unifying sizes under new 4rem small and 6.5rem large sizes

Fixes #5157

QA

• Open demo
• Witness logos being 6.5rem in height
• Witness margin/padding on logos and logo section also having increased to match new sizings

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix release (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

[webteam-app]

Demo

Jenkins

demos.haus

[pastelcyborg]

@lyubomir-popov So there isn't actually a 6.5rem value in our Sass variables; I used medium instead, which is 6rem. It's worth noting that the size of these is defined by their heights, not widths. This is a pretty big size increase; please see demo to confirm.

[lyubomir-popov]

I would hardcode 6.5rewm. This is not a value we would be reusing anywhere outside, so no need for a variable.

[pastelcyborg]

@lyubomir-popov Done, but it's worth noting that using a value outside the small/medium/large range impacts the use of spacing around the component as well. Let me know if you're okay with this.

[bartaz]

@lyubomir-popov Using a new arbitrary value of 6.5rem disturbs a bit the spacing of logo section.

We already have 3 different sizes defined for regular variant on 3 breakpoints, with medium being 6rem. So why introduce another that is just 0.6rem bigger?

Also, we have this "offset" built in that pulls the logos closed together vertically, which is always by 1/8th of the size. Like 8rem desktop: 1rem offset, 6rem medium 0.75rem offset.

The value of 6.5rem does not work well with this math. If we use 6.5/8 we get into small fractions that will throw us off the baseline grid.

[lyubomir-popov]

We already have 3 different sizes defined for regular variant on 3 breakpoints, with medium being 6rem. So why introduce another that is just 0.6rem bigger?

• I think we should make 6.5rem the default and deprecate the dense version, as you're absolutely right.
• for the negative margin, can we just say -1rem and leave it at that? there's no need for compliated maths there

[bartaz]

Current implementation (not looking at dense variant):

• large screens: 8rem logos, -1rem margins
• medium screens: 6rem logos, -0.75rem margins
• small screens: 4rem logos, -0.5rem margins

@lyubomir-popov what exactly do you suggest changing to 6.5rem value? logo size on desktop? what about others?

[lyubomir-popov]

6.5rem/1rem on medium and desktop, small remains as is

[jmuzina]

Jinx! 😂

[bartaz]

Small suggestion, but lookin good!