CSS Design System - Reorder design system rules to enable more flexible overwriting

[sabieber]

Description

CSS rules of the same specificity (most of our helpers only use a single class, so have the specificity 0,1,0) are applied in the order they are loaded/defined. This means that we should place more specific helpers below more board components to increase the flexibility. Doing so reduces the need for !important markings on rules, which can get quite out of hand.

Examples of what the proposed changes allow to do:

1. sci-button-primary sci-p-1 - allows to reduce the default padding of our button class

2. sci-d-flex sci-d-none - Allows to hide an element and show it as soon as the sci-d-none is removed (the JS code does not need to know what proper display class has to be added)

Concrete example:

• Toggle only shows when sci-d-none is removed
• Toggle buttons have reduced padding to match the dop-downs next to them
• Active toggle button has blue border to match the size of the inactive outline button

Source:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Scoping proximity and order of appearance become relevant when the selector specificities of the competing declarations in the cascade layer with precedence are equal.

Additional Notes

• This PR fixes or works on following ticket(s): OX-11120

Checklist

• Code change has been tested and works locally
• Code was formatted via IntelliJ and follows SonarLint & best practices
• Patch Tasks: Is local execution of Patch Tasks necessary? If so, please also mark the PR with the tag.