Add new sizing variables

gfellerph commented 1 year ago

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

alizedebray commented 1 year ago

@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 )?

oliverschuerch commented 1 year ago

@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/

alizedebray commented 1 year ago

@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.

oliverschuerch commented 1 year ago

@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 ;)

alizedebray commented 1 year ago

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?

oliverschuerch commented 1 year ago

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`

gfellerph commented 1 month ago

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

swisspost / design-system

Add new sizing variables #1195