design-system Add new sizing variables

Implement the new sizing variables for the styles package.

Design: https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A4&t=NzPDShQYlcE7HnxN-0 Comments on the change: https://github.com/swisspost/design-system/discussions/588

See also #684

### Tasks
- [ ] https://github.com/swisspost/design-system/issues/1248
- [ ] Create variables for the new sizes
- [ ] https://github.com/swisspost/design-system/issues/1274
- [ ] Compile a list of components/cases where 1:1 replacement is not possible (breaking changes)
- [ ] https://github.com/swisspost/design-system/issues/1275
- [ ] https://github.com/swisspost/design-system/issues/541

Feb 28 '23 07:02 gfellerph

@gfellerph @oliverschuerch The decision to go with pixel sizes makes a lot of sense! However, spacing classes often tend to pile up, so how about keeping it short and dropping the -size in class names (i.e. pe-112 au instead of pe-size-112 )?

Mar 13 '23 18:03 alizedebray

@alizedebray I think this is a good idea. It will only generate one problem: Bootstrap defines for example the following classes for {property}{sides}-{size}: pe-0, pe-1, pe-2, pe-3, pe-4, pe-5, pe-auto

We should override the bootstrap variable $spacers completly, to get rid of the unwanted classes like pe-3, pe-5, etc. As described here: https://getbootstrap.com/docs/5.3/utilities/spacing/

Mar 14 '23 09:03 oliverschuerch

@oliverschuerch You're right, we'll have to get rid of the Bootstrap spacing classes first. These are generated using the Utility API, so it should be easy to replace or remove them. Otherwise we could find other short names like p-s112 or p-112px for example.

Mar 14 '23 13:03 alizedebray

@alizedebray I would suggest the following formats for the sizing:

Topic	Format	Sizes	Comment
SCSS variables	`$size-{size}`	DefaultSizes
CSS variables	`--size-{size}`	DefaultSizes
Margin classes	`.m-{size}` `.m-{breakpoint}-{size}` `.mt-{size}` `.mt-{breakpoint}-{size}` `.mb-{size}` `.mb-{breakpoint}-{size}` `.ms-{size}` `.ms-{breakpoint}-{size}` `.me-{size}` `.me-{breakpoint}-{size}` `.mx-{size}` `.mx-{breakpoint}-{size}` `.my-{size}` `.my-{breakpoint}-{size}`	DefaultSizes 'auto'
Padding classes	`.p-{size}` `.p-{breakpoint}-{size}` `.pt-{size}` `.pt-{breakpoint}-{size}` `.pb-{size}` `.pb-{breakpoint}-{size}` `.ps-{size}` `.ps-{breakpoint}-{size}` `.pe-{size}` `.pe-{breakpoint}-{size}` `.px-{size}` `.px-{breakpoint}-{size}` `.py-{size}` `.py-{breakpoint}-{size}`	DefaultSizes
Width classes			We will remove them and just leave the bootstrap classes `.w-25` `.w-50` `.w-75` `.w-100` `.w-auto`
MaxWidth classes			We will remove them and just leave the bootstrap classes `.mw-100`
Height classes			We will remove them and just leave the bootstrap classes `.h-25` `.h-50` `.h-75` `.h-100` `.h-auto`
MaxHeight classes			We will remove them and just leave the bootstrap classes `.mh-100`
Line-Height classes			Absurd! But this classes allready exist. We will remove them and just leave the bootstrap classes `.lh-1` `.lh-sm` `.lh-base` `.lh-lg`

DefaultSizes: [0, 1, 2, 4, 8, 16, 24, 32, 40, 48, 64, 80, 96, 112] (pixel values)

Tell me if you find an error or have any ideas to do something diffrently ;)

Mar 14 '23 16:03 oliverschuerch

Sounds great! I created the .lh-{...} classes a while ago because Bootstrap didn't provide line-height classes until version 5. But now that they do, we can remove the "absurd" classes and leave the bootstrap ones indeed. Do you think it might be useful to also add classes for min-width?

Mar 15 '23 14:03 alizedebray

Components where one-to-one replacement is not possible.

Component	Used sizes	New Size
Carousel	.carousel-indicators bottom: `$size-huge`	`$size-64`
List-Group	list-group-item-padding: `$size-small-regular` .list-group-item-big padding-y: `$size-small-large` .list-group-item-left-icon padding-left: `$size-small-regular` .list-group-item-left-icon .list-group-item-svg margin-right: `$size-small-regular`	list-group-item-padding: `$size-16` .list-group-item-big padding: `$size-24` .list-group-item-left-icon padding-left: `$size-16` .list-group-item-left-icon .list-group-item-svg margin-right: `$size-16`
Language-Chooser (Intranet-Header)	#languageParent .dropdown-item padding-y: `$size-small-regular`	`$size-8`
Type (Portal)	h1/.h1/h2/.h2 margin-bottom: `$size-small-large`	Refactoring necessary see: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=5962%3A32961&t=5mzQjs4il43FOfTt-1
Size (Mixin)	bezel-small-regular padding-y: `$size-small-regular` bezel-bigger-regular padding: `$size-small-large` bezel-medium padding-y: `$size-small-large`	We should deprecate. Discuss with Philipp!
Text (Placholders)	%default-modular-spacer margin-y: `$size-huge` %text-container ul.bulletpoints li:before width/height: `$size-small-large`	`$size-48`, We should deprecate the `%text-container` placeholder. Discuss with Philipp!
Animation	transition-distance-small: `$size-small-regular`, transition-distance-large: `$size-huge`	`$size-8`, `$size-64`
Type	blockquote-padding-left: `$size-small-regular`	`$size-16`
Accordion	body-padding-top: `$size-small-regular`	`$size-8`
Alert	padding-y: `$size-small-large`, toast-padding-y: `$size-small-regular`	`$size-24`, `$size-16`
Badge	gap-sm: `$size-small-regular`, check-input-height: `$size-small-large`	gap: `$size-8` for small badges and `$size-16` for big badges, `$badge-check-input-height` variables is not used anymore and can be removed
Button	input-btn-padding-x: `$size-small-large` input-btn-padding-y-rg: `$size-small-regular` input-btn-padding-y-lg: `$size-small-large` btn-padding-y-rg: `$size-small-regular` btn-animatoin-discance-md: `$size-small-regular` btn-icon-size-md: `$size-small-large` btn-padding-y-lg: `$size-small-large`	input-btn-padding-x: `$size-16` input-btn-padding-y-rg: `$size-8` input-btn-padding-y-lg: `$size-16 * 1.25` btn-padding-y-rg: variable is not used by our code btn-animation-discance-md: `$size-16` btn-icon-size-md: `$size-16 * 1.25` btn-padding-y-lg: variable is not used by our code
Card	spacer-y: `$size-small-large`	`$size-16`
Forms	input-padding-y-lg: `$size-small-large`	`$size-16 * 1.25`
Form-Check	$form-check-feedback-margin-top: `$size-small-regular`	`$size-8`
Modals	dialog-margin: `size-small-regular`	`$size-16`
Pagination	padding-y-lg: `$size-small-regular`	padding-y-lg: `$size-16`, padding-x-lg: `$size-8`, we need to change the `$pagination-width` as well!
Spinners	spinner-size-lg: `$size-huge` spinner-size-xs: `$size-small-regular`	spinner-size-lg: `$size-64`, spinner-size-xs: '$size-16`
Subnavigation	link-padding-xs (x-axis): `$size-small-regular` link-padding-lg (y-axis): `$size-small-large`	link-padding-xs (x-axis): `$size-16` link-padding-lg (y-axis): `$size-16`
Tables	cell-padding-y: `$size-small-regular`	$table-cell-padding-y: `$size-16`, $table-cell-padding-y-sm: `$size-8`

Mar 20 '23 10:03 oliverschuerch

@oliverschuerch can we close this issue in favor of tokens?

Aug 08 '24 13:08 gfellerph

Out of scope or already implemented through tokens.

Oct 09 '24 08:10 oliverschuerch