Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Renaming the SwissPost Design-System sizing variables #684

Closed
oliverschuerch opened this issue Nov 2, 2022 · 2 comments
Closed

Renaming the SwissPost Design-System sizing variables #684

oliverschuerch opened this issue Nov 2, 2022 · 2 comments
Labels
📦 styles Related to the @swisspost/design-system-styles package
Milestone

Comments

@oliverschuerch
Copy link
Contributor

oliverschuerch commented Nov 2, 2022

Relevant links:

The following table shows how we're gonna rename the sizes:

# Size name (now) Size name (new) Size name in classes (new) Size in Pixels Comments
1 Hair Size1 *-size-1 1 px
2 Line Size2 *-size-2 2 px
3 Micro Size4 *-size-4 4 px
4 Mini Size8 *-size-8 8 px
5 SmallRegular Size12 *-size-12 12 px
6 Regular Size16 *-size-16 16 px
7 SmallLarge Size20 *-size-20 20 px
8 Large Size24 *-size-24 24 px
9 Big Size32 *-size-32 32 px
10 BiggerBig Size40 *-size-40 40 px
11 SmallHuge Size48 *-size-48 48 px
12 Huge Size56 *-size-56 56 px
13 Size64 *-size-64 64 px added for logic reasons
14 Size72 *-size-72 72 px added for logic reasons
15 Giant Size80 *-size-80 80 px
16 Size88 *-size-88 88 px added for logic reasons
17 Size96 *-size-96 96 px added for logic reasons
18 Size104 *-size-104 104 px added for logic reasons
19 BiggerGiant Size112 *-size-112 112 px
@oliverschuerch oliverschuerch added the 📦 styles Related to the @swisspost/design-system-styles package label Nov 2, 2022
@oliverschuerch oliverschuerch added this to the Next milestone Nov 2, 2022
@wueestd
Copy link

wueestd commented Feb 6, 2023

What do you think of this @oliverschuerch :

# Size name (now) Size name (new) Size name in classes (new) Size in Pixels Comments
1 Hair Size1 *-size-1 1 px  
2 Line Size2 *-size-2 2 px  
3 Micro Size4 *-size-4 4 px  
4 Mini Size8 *-size-8 8 px  
5 SmallRegular removed
6 Regular Size16 *-size-16 16 px  
7 SmallLarge removed
8 Large Size24 *-size-24 24 px  
9 Big Size32 *-size-32 32 px  
10 BiggerBig Size40 *-size-40 40 px  
11 SmallHuge Size48 *-size-48 48 px  
12 Huge removed
13   Size64 *-size-64 64 px added for logic reasons
14   removed
15 Giant Size80 *-size-80 80 px  
16   removed
17   Size96 *-size-96 96 px added for logic reasons
18 removed
19 BiggerGiant Size112 *-size-122 112 px

I removed a couple of inbetweens to have a better visual hirarchie. can be seen here: https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A4&t=3l79cEV9nhi7RAwg-1

@oliverschuerch
Copy link
Contributor Author

#1195 summarizes everything we need and therefore I close this ticket as a duplicate.

@github-project-automation github-project-automation bot moved this from 📋 Backlog to ✅ Done in Design System Production Board Mar 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 styles Related to the @swisspost/design-system-styles package
Projects
Development

No branches or pull requests

2 participants