[RFC] Additional spacing scale for widths/heights

[kzuraw]

Short description of the feature

We want to introduce a new scale for widths and heights into the MacawUI.

Full description

There are specific use cases where our current spacing scale needs to be fixed. Right now we are using escape hatches in the Box component that allow us to pass any value to __width. This approach introduces a problem of maintaining the UI components and unit migration. Thus we want to introduce a new scale for the following CSS properties:

• width
• height
• max-width
• max-height

The new solution should allow us to specify those properties with values from the scale.

Possible solutions:

1. Dedicated scale for widths/heights with percentage values. For example:

const widths = {
  ...spacing,
  "auto": "auto",
  "1/2": "50%",
  "1/3": "33.333333%",
  "2/3": "66.666667%",
  "1/4": "25%",
  "2/4": "50%",
  "3/4": "75%",
  "1/5": "20%",
  "2/5": "40%",
  "3/5": "60%",
  "4/5": "80%",
  "1/6": "16.666667%",
  "2/6": "33.333333%",
  "3/6": "50%",
  "4/6": "66.666667%",
  "5/6": "83.333333%",
  "1/12": "8.333333%",
  "2/12": "16.666667%",
  "3/12": "25%",
  "4/12": "33.333333%",
  "5/12": "41.666667%",
  "6/12": "50%",
  "7/12": "58.333333%",
  "8/12": "66.666667%",
  "9/12": "75%",
  "10/12": "83.333333%",
  "11/12": "91.666667%",
  "full": "100%",
  "screen": "100vw",
  "min": "min-content",
  "max": "max-content",
  "fit": "fit-content",
};

2. Add more values to the current spacing scale as well with new percentage values just for widths/heights. For example:

const spacing = {
  0: "0px",
  px: "1px",
  0.5: "2px",
  1: "4px",
  1.5: "6px",
  2: "8px",
  2.5: "10px",
  3: "12px",
  3.5: "14px",
  4: "16px",
  5: "20px",
  6: "24px",
  7: "28px",
  8: "32px",
  9: "36px",
  10: "40px",
  11: "44px",
  12: "48px",
  14: "56px",
  16: "64px",
  20: "80px",
  24: "96px",
  28: "112px",
  32: "128px",
  36: "144px",
  40: "160px",
  44: "176px",
  48: "192px",
  52: "208px",
  56: "224px",
  60: "240px",
  64: "256px",
  72: "288px",
  80: "320px",
  96: "384p",
};

const widths = {
  ...spacing,
  "auto": "auto",
  "1/2": "50%",
  "1/3": "33.333333%",
  "2/3": "66.666667%",
  "1/4": "25%",
  "2/4": "50%",
  "3/4": "75%",
  "1/5": "20%",
  "2/5": "40%",
  "3/5": "60%",
  "4/5": "80%",
  "1/6": "16.666667%",
  "2/6": "33.333333%",
  "3/6": "50%",
  "4/6": "66.666667%",
  "5/6": "83.333333%",
  "1/12": "8.333333%",
  "2/12": "16.666667%",
  "3/12": "25%",
  "4/12": "33.333333%",
  "5/12": "41.666667%",
  "6/12": "50%",
  "7/12": "58.333333%",
  "8/12": "66.666667%",
  "9/12": "75%",
  "10/12": "83.333333%",
  "11/12": "91.666667%",
  "full": "100%",
  "screen": "100vw",
  "min": "min-content",
  "max": "max-content",
  "fit": "fit-content",
};

In both solutions we can use:

• numeric values e.g 100 or 52 + percentage values
• text values e.g lg or md + percentage values

Acceptance Criteria

• As a developer, I should be able to set the width against the given scale tokens
• As a developer, I should be able to set height against the given scale tokens
• As a developer, I should be able to set max-width against the given scale tokens
• As a developer, I should be able to set max-height against the given scale tokens

Additional notes

[typeofweb]

Option number 2 looks great!

I'd also add:

const widths = {
  // …
  xs: '…',
  sm: '…',
  md: '720px', // Adyen App actually uses this value :)
  lg: '1152px', // Adyen App actually uses this value :)
};

or similar.

[github-actions[bot]]

This issue is stale because it has been open 14 days with no activity.