Cascading T-Shirt Sizes

Hi George!

My name is justgu.us and I'm an indie dev that loves to create systematical naming conventions that spark the narrative of code in a more semantical way.

I implemented my model for cascading t-shirt sizes on your spaceSteps and spacePairs naming convention, that used to be -2xl etc. It might look fresh at first, but you will soon spot the cascading pattern of the sizing I use; XX, XS, SS, SM, MM, ML, LL, LD, DD, ZZ

It's a way to make fluid scales have a better relationship to each other as tokens. I believe that will improve the user experience of end-users to create their own customPairs like I did, plus it makes for a programmatical pattern to step up or down the scales & sizes if you wish to take it further.

As a bonus, it cleans up the tokens quite nicely and makes them all stick to using the same amount of characters per token.

I added one step that was missing in the current spacePairs; the use of 3XL (-ZZ) as a pair at the end.

Thanks for reviewing and take care!

netlify/functions/build-fluid-design-system.js

@@ -181,28 +181,35 @@ async function handler(event, context) {
     ...config,
     typeScaleSteps: [-2, -1, 0, 1, 2, 3, 4, 5],
     spaceSteps: {
-      "-3XS": 0.25,
-      "-2XS": 0.5,
-      "-XS": 0.75,
-      "-S": 1,
-      "-M": 1.5,
-      "-L": 2,
-      "-XL": 3,
-      "-2XL": 4,
-      "-3XL": 6,
-      "-4XL": 8,
+      "-XX": 0.25,
+      "-XS": 0.5,
+      "-SS": 0.75,
+      "-SM": 1,
+      "-MM": 1.5,
+      "-ML": 2,
+      "-LL": 3,
+      "-LD": 4,
+      "-DD": 6,
+      "-ZZ": 8,
     },
     spacePairs: {
-      "-3XS": "-2XS",
-      "-2XS": "-XS",
-      "-XS": "-S",
-      "-S": "-M",
-      "-M": "-L",
-      "-L": "-XL",
-      "-XL": "-2XL",
-      "-2XL": "-3XL",
+      "-XX": "-XS",
+      "-XS": "-SS",
+      "-SS": "-SM",
+      "-SM": "-MM",
+      "-MM": "-ML",
+      "-ML": "-LL",
+      "-LL": "-LD",
+      "-LD": "-DD",
+      "-DD": "-ZZ",
+    },
+    customPairs: {
+      "-XX": "-SS",
+      "-XX": "-MM",
+      "-MM": "-LL",
+      "-MM": "-DD",
+      "-MM": "-ZZ",
     },
-    customPairs: {},
   });
 
   return {