Extended spacing systems with fallback

[vikramrojo]

Proposal to change spacing classes to a singular class .marX with modifier isSpace allowing for a more memorable spacing utility. Early explorations ran into limitations with destructiveness in children which required swapping css variables & resetting children.

:root {
  --gap-1: 2rem;
  --gap-2: 4rem;
}

.isSpace {
  --space-1: 4rem;
  --space-2: 6rem;
}

.isSpace * {
  --space-1: initial;
  --space-2: initial;
}

.mar1 {
  margin: var(--space-1, var(--gap-1));
}

.mar2 {
  margin: var(--space-2, var(--gap-2));
}

[vikramrojo]

Seemingly an issue with isSpace being used much more frequently, is a fallback needed?

[vikramrojo]

There are maybe three approaches.

1. Remove gap entirely by adding 01-05, which adds five classes instead a switch?

   --space-01: 0.0625rem; /* 1px */
   --space-02: 0.125rem; /* 2px */
   --space-03: 0.25rem; /* 4px */
   --space-04: 0.5rem; /* 8px */
   --space-05: 0.75rem; /* 12px */

2. Change .isSpace to .isGap but have it only operate from 0 to 5, default all component spacing to initial instead of gap,

3. Keep only spaceX but add arithmetic classes like plushalf which would add 0.5rem for example

[vikramrojo]

Removed --gap-x from all components which makes much more sense. Prev if you changed your scale, there was unpredictable behavior across components.