Style top-level headers - Adam

apps/knapsack/data/blocks/block.1n5EI0yFsK.json

@@ -32,5 +32,6 @@
       ]
     }
   },
-  "blockType": "text-editor"
+  "blockType": "text-editor",
+  "spacing": "medium"
 }

apps/knapsack/data/blocks/block.JZIDv-Td5T.json

@@ -61,5 +61,6 @@
       "imageSize": "none"
     }
   },
-  "blockType": "guidelines"
+  "blockType": "guidelines",
+  "spacing": "medium"
 }

apps/knapsack/data/blocks/block.Xr9XGSQZEo.json

@@ -495,5 +495,6 @@
       ]
     }
   },
-  "blockType": "table"
+  "blockType": "table",
+  "spacing": "large"
 }

apps/knapsack/data/knapsack.custom-page.components.yml

@@ -4,3 +4,15 @@ blockIds:
   - LNe96Y7g2i
   - yQUYdOcLyh
 description: Fundamental building blocks designed to enhance interaction and usability.
+settings:
+  pageHeader:
+    backgroundColor:
+      type: design-token
+      tokenName: inversesurface
+    textColorTitle:
+      type: design-token
+      tokenName: inverseonsurface
+    textColorDescription:
+      type: design-token
+      tokenName: inverseonsurface
+    size: medium

apps/knapsack/data/knapsack.custom-page.guides.yml

@@ -3,3 +3,15 @@ title: Guides
 blockIds:
   - z7uw3T1AvI
 description: How-tos and process documents.
+settings:
+  pageHeader:
+    textColorTitle:
+      type: design-token
+      tokenName: inverseonsurface
+    textColorDescription:
+      type: design-token
+      tokenName: inverseonsurface
+    backgroundColor:
+      type: design-token
+      tokenName: inversesurface
+    size: medium

apps/knapsack/data/knapsack.custom-page.homepage.yml

@@ -8,10 +8,10 @@ settings:
     backgroundColor:
       type: design-token
       colorValue: ''
-      tokenName: inverse-background
+      tokenName: inversebackground
     textColorTitle:
       type: design-token
-      tokenName: inverse-on-surface
+      tokenName: inverseonsurface
     textColorDescription:
       type: design-token
       tokenName: inverse-on-surface

apps/knapsack/data/knapsack.custom-page.tokens.yml

@@ -2,9 +2,18 @@ title: Tokens
 id: tokens
 blockIds:
   - Qo5t01X6yw
-  - j1YamhhI93
 settings:
   pageHeader:
     backgroundSize: cover
     backgroundOverlay: false
+    backgroundColor:
+      type: design-token
+      tokenName: inversesurface
+    textColorTitle:
+      type: design-token
+      tokenName: inverseonsurface
+    textColorDescription:
+      type: design-token
+      tokenName: inverseonsurface
+    size: medium
 description: Standardized styles that we use across all our UI elements, in both design and code.

apps/knapsack/data/knapsack.custom-page.typography.yml

@@ -2,7 +2,3 @@ title: Typography
 id: typography
 blockIds:
   - qNXhstEiku
-settings:
-  pageHeader:
-    backgroundOverlay: false
-    backgroundSize: cover

apps/knapsack/data/knapsack.custom-page.writing.yml

@@ -5,3 +5,15 @@ blockIds:
 description: >-
   Our design system provides guidance for content designers, technical publication strategists, and anyone else who
   writes for Teradata products.
+settings:
+  pageHeader:
+    size: medium
+    backgroundColor:
+      type: design-token
+      tokenName: inversesurface
+    textColorDescription:
+      type: design-token
+      tokenName: inverseonsurface
+    textColorTitle:
+      type: design-token
+      tokenName: inverseonsurface

apps/knapsack/data/knapsack.design-tokens.json

@@ -11080,24 +11080,24 @@
     "$type": "color",
     "$value": "#F38800"
   },
-  "inverse-background": {
-    "$type": "color",
-    "$value": "#1E1D1E"
-  },
-  "inverse-on-surface": {
+  "on-surface": {
     "$type": "color",
-    "$value": "#F1F3F8"
+    "$value": "#00233C"
   },
-  "inverse-surface": {
+  "inversesurface": {
     "$type": "color",
     "$value": "#3E4557"
   },
-  "on-surface-variant": {
+  "onsurfacevariant": {
     "$type": "color",
     "$value": "#59627B"
   },
-  "on-surface": {
+  "inversebackground": {
     "$type": "color",
-    "$value": "#00233C"
+    "$value": "#1E1D1E"
+  },
+  "inverseonsurface": {
+    "$type": "color",
+    "$value": "#F1F3F8"
   }
 }