From 2b34669645e3fae9e725c317157d376c28cf49ae Mon Sep 17 00:00:00 2001
From: Matt Gregg <matt.gregg@blackbaud.com>
Date: Tue, 14 Jan 2025 16:19:43 -0500
Subject: [PATCH] feat: page tokens (#127)

---
 src/tokens/$themes.json              |  30 +++---
 src/tokens/layout/bb-productive.json | 134 ++++++++++++++++++---------
 src/tokens/layout/modern.json        | 116 +++++++++++++++++++----
 3 files changed, 204 insertions(+), 76 deletions(-)

diff --git a/src/tokens/$themes.json b/src/tokens/$themes.json
index b7e1787..ccc8809 100644
--- a/src/tokens/$themes.json
+++ b/src/tokens/$themes.json
@@ -261,16 +261,12 @@
       "space.inset.pillarbox.left.m": "bb604fe9f09b327853cafe7061efe376e61f4717",
       "space.inset.pillarbox.left.l": "6af827019c3d1ca5901200594f813f4843e9593d",
       "space.inset.letterbox.top.s": "1a2f91707a21b11627336ae0c62e83b2cc90e673",
-      "space.inset.letterbox.top.m": "75f44095cd9c7398b394aaf86d71ada731754023",
       "space.inset.letterbox.top.l": "f41f426b2efe1c261c79cf2a4410a7aa236a2d44",
       "space.inset.letterbox.right.s": "40ab0f484dca366262219d678f7b462da56b65d6",
-      "space.inset.letterbox.right.m": "8484ec4b7c0266299edf2a80cf4b1134d17460d4",
       "space.inset.letterbox.right.l": "a3bb94ccaf27c2d29e09681a4ae68d44d7daf4ed",
       "space.inset.letterbox.bottom.s": "a6b36a0ff607c37f68489f3bc846f328f77c8762",
-      "space.inset.letterbox.bottom.m": "f156285e540b6d2e1f18b4fa32585b42e6dd0247",
       "space.inset.letterbox.bottom.l": "b987ef4f2fef30b4192827b914d58074b4e736b0",
       "space.inset.letterbox.left.s": "3afb11037963f68825fabdaa5f843fa37c069247",
-      "space.inset.letterbox.left.m": "b23303feae6f10717dba2baf31132560b429629e",
       "space.inset.letterbox.left.l": "a62a780ccd5e92c59bdbbba7678d15a53f97d660",
       "space.inset.bottomless.top.l": "cfa84f5679e9aca2eaff762303cd4db0def1fa0f",
       "space.inset.bottomless.top.xl": "ca6c76a9b4ab114d125e8b2642b9779218c6b8da",
@@ -371,7 +367,11 @@
       "border.width.action.active": "cdd33f6934ab61b43ab6a325ea80760ecb3d2844",
       "border.width.action.focus": "4b2dae44eeb9bdc3243e4b06cdd5eba6ebead644",
       "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3",
-      "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9"
+      "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9",
+      "space.inset.letterbox.1_2.top.m": "75f44095cd9c7398b394aaf86d71ada731754023",
+      "space.inset.letterbox.1_2.right.m": "8484ec4b7c0266299edf2a80cf4b1134d17460d4",
+      "space.inset.letterbox.1_2.bottom.m": "f156285e540b6d2e1f18b4fa32585b42e6dd0247",
+      "space.inset.letterbox.1_2.left.m": "b23303feae6f10717dba2baf31132560b429629e"
     },
     "group": "Layout"
   },
@@ -389,16 +389,12 @@
       "space.inset.balanced.l": "f4aae0c5b31b8c6c91788ab6a8e453e81850e751",
       "space.inset.balanced.xl": "3453889c8090d7bed31a8dc42eea469520c03ec5",
       "space.inset.letterbox.top.s": "1a2f91707a21b11627336ae0c62e83b2cc90e673",
-      "space.inset.letterbox.top.m": "75f44095cd9c7398b394aaf86d71ada731754023",
       "space.inset.letterbox.top.l": "f41f426b2efe1c261c79cf2a4410a7aa236a2d44",
       "space.inset.letterbox.right.s": "40ab0f484dca366262219d678f7b462da56b65d6",
-      "space.inset.letterbox.right.m": "8484ec4b7c0266299edf2a80cf4b1134d17460d4",
       "space.inset.letterbox.right.l": "a3bb94ccaf27c2d29e09681a4ae68d44d7daf4ed",
       "space.inset.letterbox.bottom.s": "a6b36a0ff607c37f68489f3bc846f328f77c8762",
-      "space.inset.letterbox.bottom.m": "f156285e540b6d2e1f18b4fa32585b42e6dd0247",
       "space.inset.letterbox.bottom.l": "b987ef4f2fef30b4192827b914d58074b4e736b0",
       "space.inset.letterbox.left.s": "3afb11037963f68825fabdaa5f843fa37c069247",
-      "space.inset.letterbox.left.m": "b23303feae6f10717dba2baf31132560b429629e",
       "space.inset.letterbox.left.l": "a62a780ccd5e92c59bdbbba7678d15a53f97d660",
       "size.icon.xl": "05240cc44dcd2b44124dd6769af11ed458e15809",
       "space.inset.balanced.none": "30e1d42ffb486c44df5ea9b47541cc88e32c8a0e",
@@ -512,7 +508,11 @@
       "border.width.action.active": "cdd33f6934ab61b43ab6a325ea80760ecb3d2844",
       "border.width.action.focus": "4b2dae44eeb9bdc3243e4b06cdd5eba6ebead644",
       "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3",
-      "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9"
+      "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9",
+      "space.inset.letterbox.1_2.top.m": "75f44095cd9c7398b394aaf86d71ada731754023",
+      "space.inset.letterbox.1_2.right.m": "8484ec4b7c0266299edf2a80cf4b1134d17460d4",
+      "space.inset.letterbox.1_2.bottom.m": "f156285e540b6d2e1f18b4fa32585b42e6dd0247",
+      "space.inset.letterbox.1_2.left.m": "b23303feae6f10717dba2baf31132560b429629e"
     },
     "$figmaCollectionId": "VariableCollectionId:2142:337",
     "$figmaModeId": "2142:2",
@@ -573,16 +573,12 @@
       "space.inset.pillarbox.left.m": "bb604fe9f09b327853cafe7061efe376e61f4717",
       "space.inset.pillarbox.left.l": "6af827019c3d1ca5901200594f813f4843e9593d",
       "space.inset.letterbox.top.s": "1a2f91707a21b11627336ae0c62e83b2cc90e673",
-      "space.inset.letterbox.top.m": "75f44095cd9c7398b394aaf86d71ada731754023",
       "space.inset.letterbox.top.l": "f41f426b2efe1c261c79cf2a4410a7aa236a2d44",
       "space.inset.letterbox.right.s": "40ab0f484dca366262219d678f7b462da56b65d6",
-      "space.inset.letterbox.right.m": "8484ec4b7c0266299edf2a80cf4b1134d17460d4",
       "space.inset.letterbox.right.l": "a3bb94ccaf27c2d29e09681a4ae68d44d7daf4ed",
       "space.inset.letterbox.bottom.s": "a6b36a0ff607c37f68489f3bc846f328f77c8762",
-      "space.inset.letterbox.bottom.m": "f156285e540b6d2e1f18b4fa32585b42e6dd0247",
       "space.inset.letterbox.bottom.l": "b987ef4f2fef30b4192827b914d58074b4e736b0",
       "space.inset.letterbox.left.s": "3afb11037963f68825fabdaa5f843fa37c069247",
-      "space.inset.letterbox.left.m": "b23303feae6f10717dba2baf31132560b429629e",
       "space.inset.letterbox.left.l": "a62a780ccd5e92c59bdbbba7678d15a53f97d660",
       "space.inset.bottomless.top.l": "035a5cae28f35115c161e496050aa747f86d399c",
       "space.inset.bottomless.right.l": "7ded0530c3c23b54b1ae601958aaadcfd90fa9c2",
@@ -670,7 +666,11 @@
       "border.width.action.active": "cdd33f6934ab61b43ab6a325ea80760ecb3d2844",
       "border.width.action.focus": "4b2dae44eeb9bdc3243e4b06cdd5eba6ebead644",
       "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3",
-      "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9"
+      "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9",
+      "space.inset.letterbox.1_2.top.m": "75f44095cd9c7398b394aaf86d71ada731754023",
+      "space.inset.letterbox.1_2.right.m": "8484ec4b7c0266299edf2a80cf4b1134d17460d4",
+      "space.inset.letterbox.1_2.bottom.m": "f156285e540b6d2e1f18b4fa32585b42e6dd0247",
+      "space.inset.letterbox.1_2.left.m": "b23303feae6f10717dba2baf31132560b429629e"
     },
     "group": "Layout"
   }
diff --git a/src/tokens/layout/bb-productive.json b/src/tokens/layout/bb-productive.json
index 9952fb5..aa81f63 100644
--- a/src/tokens/layout/bb-productive.json
+++ b/src/tokens/layout/bb-productive.json
@@ -176,60 +176,82 @@
         }
       },
       "letterbox": {
-        "top": {
-          "s": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.50}"
-          },
-          "m": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.100}"
+        "1_3": {
+          "top": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.150}"
+            }
           },
-          "l": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.150}"
-          }
-        },
-        "right": {
-          "s": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.25}"
+          "right": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.50}"
+            }
           },
-          "m": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.50}"
+          "bottom": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.150}"
+            }
           },
-          "l": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.100}"
+          "left": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.50}"
+            }
           }
         },
-        "bottom": {
-          "s": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.50}"
+        "1_2": {
+          "top": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.100}"
+            }
           },
-          "m": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.100}"
+          "right": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.50}"
+            }
           },
-          "l": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.150}"
+          "bottom": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.100}"
+            }
+          },
+          "left": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.50}"
+            }
           }
         },
-        "left": {
-          "s": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.25}"
+        "2_3": {
+          "top": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.75}"
+            }
           },
-          "m": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.50}"
+          "right": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.50}"
+            }
           },
-          "l": {
-            "$type": "spacing",
-            "$value": "{bb.size.fluid.100}"
+          "bottom": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.75}"
+            }
+          },
+          "left": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{bb.size.fluid.50}"
+            }
           }
         }
       },
@@ -403,6 +425,32 @@
           }
         }
       },
+      "sunk": {
+        "top": {
+          "l": {
+            "$type": "spacing",
+            "$value": "{bb.size.fluid.150}"
+          }
+        },
+        "right": {
+          "l": {
+            "$type": "spacing",
+            "$value": "{bb.size.fluid.150}"
+          }
+        },
+        "bottom": {
+          "l": {
+            "$type": "spacing",
+            "$value": "{bb.size.fluid.100}"
+          }
+        },
+        "left": {
+          "l": {
+            "$type": "spacing",
+            "$value": "{bb.size.fluid.150}"
+          }
+        }
+      },
       "tabs": {
         "s": {
           "$type": "spacing",
diff --git a/src/tokens/layout/modern.json b/src/tokens/layout/modern.json
index b6206d7..2f751f8 100644
--- a/src/tokens/layout/modern.json
+++ b/src/tokens/layout/modern.json
@@ -610,28 +610,82 @@
         }
       },
       "letterbox": {
-        "top": {
-          "m": {
-            "$type": "spacing",
-            "$value": "{modern.space.lg}"
-          }
-        },
-        "right": {
-          "m": {
-            "$type": "spacing",
-            "$value": "{modern.space.s}"
+        "1_3": {
+          "top": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.xl}"
+            }
+          },
+          "right": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.s}"
+            }
+          },
+          "bottom": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.xl}"
+            }
+          },
+          "left": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.s}"
+            }
           }
         },
-        "bottom": {
-          "m": {
-            "$type": "spacing",
-            "$value": "{modern.space.lg}"
+        "1_2": {
+          "top": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.lg}"
+            }
+          },
+          "right": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.s}"
+            }
+          },
+          "bottom": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.lg}"
+            }
+          },
+          "left": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.s}"
+            }
           }
         },
-        "left": {
-          "m": {
-            "$type": "spacing",
-            "$value": "{modern.space.s}"
+        "2_3": {
+          "top": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.md}"
+            }
+          },
+          "right": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.s}"
+            }
+          },
+          "bottom": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.md}"
+            }
+          },
+          "left": {
+            "m": {
+              "$type": "spacing",
+              "$value": "{modern.space.s}"
+            }
           }
         }
       },
@@ -805,6 +859,32 @@
           }
         }
       },
+      "sunk": {
+        "top": {
+          "l": {
+            "$type": "spacing",
+            "$value": "{modern.space.xl}"
+          }
+        },
+        "right": {
+          "l": {
+            "$type": "spacing",
+            "$value": "{modern.space.xl}"
+          }
+        },
+        "bottom": {
+          "l": {
+            "$type": "spacing",
+            "$value": "{modern.space.lg}"
+          }
+        },
+        "left": {
+          "l": {
+            "$type": "spacing",
+            "$value": "{modern.space.xl}"
+          }
+        }
+      },
       "tabs": {
         "s": {
           "$type": "spacing",