fix: gap naming schema in space tokens (#88)

blackbaud · Sep 27, 2024 · fb1deff · fb1deff
1 parent 277f903
commit fb1deff
Show file tree

Hide file tree

Showing 3 changed files with 262 additions and 192 deletions.
diff --git a/src/tokens/base-modern.json b/src/tokens/base-modern.json
@@ -252,6 +252,10 @@
       "320": {
         "$type": "sizing",
         "$value": "320"
+      },
+      "400": {
+        "$type": "sizing",
+        "$value": "400"
       }
     },
     "font": {

diff --git a/src/tokens/layout/bb-productive.json b/src/tokens/layout/bb-productive.json
@@ -394,144 +394,146 @@
           "$type": "spacing",
           "$value": "{bb.size.fluid.150}"
         }
-      }
-    },
-    "action_group_gap": {
-      "0": {
-        "$type": "spacing",
-        "$value": "0"
-      },
-      "s": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.25}"
-      },
-      "m": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.50}"
-      },
-      "l": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.75}"
-      },
-      "xl": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.100}"
-      }
-    },
-    "form_gap": {
-      "0": {
-        "$type": "spacing",
-        "$value": "0"
-      },
-      "s": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.50}"
-      },
-      "m": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.75}"
-      },
-      "l": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.100}"
-      },
-      "xl": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.150}"
-      }
-    },
-    "icon_gap": {
-      "0": {
-        "$type": "spacing",
-        "$value": "0"
-      },
-      "s": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.25}"
-      },
-      "m": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.50}"
-      },
-      "l": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.75}"
-      },
-      "xl": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.100}"
-      }
-    },
-    "label_gap": {
-      "0": {
-        "$type": "spacing",
-        "$value": "0"
-      },
-      "xxs": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.6}"
       },
-      "xs": {
+      "switch": {
         "$type": "spacing",
-        "$value": "{bb.size.fluid.12}"
-      },
-      "s": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.25}"
-      },
-      "m": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.50}"
-      },
-      "l": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.75}"
-      },
-      "xl": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.100}"
+        "$value": "calc({size.switch}+{space.gap.label.s})"
       }
     },
-    "stacked_supplemental": {
-      "0": {
-        "$type": "spacing",
-        "$value": "0"
-      },
-      "s": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.25}"
+    "gap": {
+      "action_group": {
+        "0": {
+          "$type": "spacing",
+          "$value": "0"
+        },
+        "s": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.25}"
+        },
+        "m": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.50}"
+        },
+        "l": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.75}"
+        },
+        "xl": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.100}"
+        }
       },
-      "m": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.50}"
-      }
-    },
-    "text_action_gap": {
-      "0": {
-        "$type": "spacing",
-        "$value": "0"
+      "form": {
+        "0": {
+          "$type": "spacing",
+          "$value": "0"
+        },
+        "s": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.50}"
+        },
+        "m": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.75}"
+        },
+        "l": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.100}"
+        },
+        "xl": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.150}"
+        }
       },
-      "xs": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.25}"
+      "icon": {
+        "0": {
+          "$type": "spacing",
+          "$value": "0"
+        },
+        "s": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.25}"
+        },
+        "m": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.50}"
+        },
+        "l": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.75}"
+        },
+        "xl": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.100}"
+        }
       },
-      "s": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.50}"
+      "label": {
+        "0": {
+          "$type": "spacing",
+          "$value": "0"
+        },
+        "xxs": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.6}"
+        },
+        "xs": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.12}"
+        },
+        "s": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.25}"
+        },
+        "m": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.50}"
+        },
+        "l": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.75}"
+        },
+        "xl": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.100}"
+        }
       },
-      "m": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.75}"
+      "stacked_supplemental": {
+        "0": {
+          "$type": "spacing",
+          "$value": "0"
+        },
+        "s": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.25}"
+        },
+        "m": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.50}"
+        }
       },
-      "l": {
-        "$type": "spacing",
-        "$value": "{bb.size.fluid.100}"
+      "text_action": {
+        "0": {
+          "$type": "spacing",
+          "$value": "0"
+        },
+        "xs": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.25}"
+        },
+        "s": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.50}"
+        },
+        "m": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.75}"
+        },
+        "l": {
+          "$type": "spacing",
+          "$value": "{bb.size.fluid.100}"
+        }
       }
     },
-    "switch_inset": {
-      "$type": "spacing",
-      "$value": "calc({size.switch}+{space.label_gap.s})"
-    },
     "inline": {
       "xs": {
         "$type": "spacing",