search

innovaccer / design-system

Masala Design System (MDS) is an open-source design system built at Innovaccer. Figma file : https://www.figma.com/community/file/974368355920553546/masala-design-system-web-guidelines
https://mds.innovaccer.com
MIT License
85 stars 86 forks source link

Border Token: create new tokens for border-radius and border-width #2412

Open anuradha9712 opened 1 week ago

anuradha9712 commented 1 week ago

Summary

Add new tokens for border-radius and border-width 

Border Radius:
border-radius-0: 0px
border-radius-50: 2px
border-radius-100: 4px
border-radius-150: 6px
border-radius-200: 8px
border-radius-400: 16px
border-radius-full: 9999px

Border Width:
border-width-0: 0px
border-width-025: 1px
border-width-050: 2px
border-width-075: 3px
border-width-100: 4px
youngheart12 commented 6 days ago

@anuradha9712 is it ready for dev or is the discussion is still in place

varundhawan5792 commented 1 day ago

The naming of tokens for border radius should be consistent with the tokens for spacing and opacity

  --spacing: 8px;
  --spacing-2: 16px;
  --spacing-3: 32px;
  --spacing-4: 48px;
  --opacity-1: 0.04;
  --opacity-2: 0.08;
  --opacity-3: 0.12;
  --opacity-4: 0.16;
  --opacity-6: 0.24;

Here are the suggested values

Border Radius:

border-radius-0: 0px
border-radius-0-5: 2px
border-radius-1: 4px
border-radius-1-5: 6px
border-radius-2: 8px
border-radius-4: 16px
border-radius-full: 9999px

Border Width:

border-width-0: 0px
border-width-0-25: 1px
border-width-0-50: 2px
border-width-0-75: 3px
border-width-1: 4px