From 2e512526d02ec85ee4e9c412632827e4b48e33cc Mon Sep 17 00:00:00 2001
From: Ryan Nono <rnono@palantir.com>
Date: Mon, 11 May 2026 09:25:57 -0400
Subject: [PATCH] Preview BP7 token structure changes

---
 .../tokens/base/emphasis.tokens.json          |   2 +-
 .../tokens/base/intent.tokens.json            |  26 +-
 .../tokens/base/surface.tokens.json           | 243 ++++++++++++++----
 .../tokens/base/typography.tokens.json        |  77 +-----
 .../tokens/themes/dark/surface.tokens.json    |  32 ++-
 .../tokens/themes/dark/typography.tokens.json |   6 +-
 6 files changed, 238 insertions(+), 148 deletions(-)

diff --git a/packages/core/src/design-tokens/tokens/base/emphasis.tokens.json b/packages/core/src/design-tokens/tokens/base/emphasis.tokens.json
index db8d5343f1e..7446991a6dc 100644
--- a/packages/core/src/design-tokens/tokens/base/emphasis.tokens.json
+++ b/packages/core/src/design-tokens/tokens/base/emphasis.tokens.json
@@ -18,7 +18,7 @@
         },
         "focus-color": {
             "$type": "color",
-            "$value": "{intent.primary.rest}"
+            "$value": "{intent.primary}"
         },
         "focus-width": {
             "$type": "dimension",
diff --git a/packages/core/src/design-tokens/tokens/base/intent.tokens.json b/packages/core/src/design-tokens/tokens/base/intent.tokens.json
index 2286f85e018..895d641bce0 100644
--- a/packages/core/src/design-tokens/tokens/base/intent.tokens.json
+++ b/packages/core/src/design-tokens/tokens/base/intent.tokens.json
@@ -1,40 +1,24 @@
 {
     "intent": {
         "$type": "color",
-        "$description": "Semantic intent colors with interaction states (BP6 pattern: darker on hover)",
         "default": {
-            "rest": { "$value": "{palette.gray.1}" },
-            "hover": { "$value": "{palette.dark-gray.5}" },
-            "active": { "$value": "{palette.dark-gray.4}" },
-            "disabled": { "$value": "{palette.gray.3}" },
+            "$value": "{palette.gray.1}",
             "foreground": { "$value": "{palette.white}" }
         },
         "primary": {
-            "rest": { "$value": "{palette.blue.3}" },
-            "hover": { "$value": "{palette.blue.2}" },
-            "active": { "$value": "{palette.blue.1}" },
-            "disabled": { "$value": "{palette.blue.4}" },
+            "$value": "{palette.blue.3}",
             "foreground": { "$value": "{palette.white}" }
         },
         "success": {
-            "rest": { "$value": "{palette.green.3}" },
-            "hover": { "$value": "{palette.green.2}" },
-            "active": { "$value": "{palette.green.1}" },
-            "disabled": { "$value": "{palette.green.4}" },
+            "$value": "{palette.green.3}",
             "foreground": { "$value": "{palette.white}" }
         },
         "warning": {
-            "rest": { "$value": "{palette.orange.3}" },
-            "hover": { "$value": "{palette.orange.2}" },
-            "active": { "$value": "{palette.orange.1}" },
-            "disabled": { "$value": "{palette.orange.4}" },
+            "$value": "{palette.orange.3}",
             "foreground": { "$value": "{palette.black}" }
         },
         "danger": {
-            "rest": { "$value": "{palette.red.3}" },
-            "hover": { "$value": "{palette.red.2}" },
-            "active": { "$value": "{palette.red.1}" },
-            "disabled": { "$value": "{palette.red.4}" },
+            "$value": "{palette.red.3}",
             "foreground": { "$value": "{palette.white}" }
         }
     }
diff --git a/packages/core/src/design-tokens/tokens/base/surface.tokens.json b/packages/core/src/design-tokens/tokens/base/surface.tokens.json
index 503d807a368..0cc651b81d5 100644
--- a/packages/core/src/design-tokens/tokens/base/surface.tokens.json
+++ b/packages/core/src/design-tokens/tokens/base/surface.tokens.json
@@ -1,24 +1,32 @@
 {
     "surface": {
-        "border-color": {
+        "divider-color": {
             "$type": "color",
             "default": {
-                "$value": "{intent.default.rest}",
+                "$value": "{palette.black}",
                 "$extensions": {
                     "com.blueprint.derive": {
-                        "alpha": 0.12
+                        "alpha": 0.1
                     }
                 }
             },
             "strong": {
-                "$value": "{intent.default.rest}",
+                "$value": "{palette.black}",
                 "$extensions": {
                     "com.blueprint.derive": {
-                        "alpha": 0.25
+                        "alpha": 0.2
                     }
                 }
             }
         },
+        "border-color": {
+            "$type": "color",
+            "default": { "$value": "{intent.default}" },
+            "primary": { "$value": "{intent.primary}" },
+            "success": { "$value": "{intent.success}" },
+            "warning": { "$value": "{intent.warning}" },
+            "danger": { "$value": "{intent.danger}" }
+        },
         "border-width": {
             "$type": "dimension",
             "$value": {
@@ -173,105 +181,246 @@
         },
         "layer-opacity": {
             "$type": "number",
-            "$value": 0.05,
-            "$description": "Shared opacity for surface layers"
+            "app": {
+                "rest": { "$value": 0.01 },
+                "hover": { "$value": 0.01 },
+                "active": { "$value": 0.01 }
+            },
+            "intent": {
+                "rest": { "$value": 0.03 },
+                "hover": { "$value": 0.03 },
+                "active": { "$value": 0.03 }
+            }
         },
         "layer-color": {
             "$type": "color",
             "$description": "Composed color with opacity applied, usable as color anywhere",
+            "app": {
+                "rest": {
+                    "$value": "{intent.default}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.app.rest}" } }
+                },
+                "hover": {
+                    "$value": "{intent.default}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.app.hover}" } }
+                },
+                "active": {
+                    "$value": "{intent.default}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.app.active}" } }
+                }
+            },
             "default": {
-                "$value": "{intent.default.rest}",
-                "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } }
+                "rest": {
+                    "$value": "{intent.default}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.rest}" } }
+                },
+                "hover": {
+                    "$value": "{intent.default}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.hover}" } }
+                },
+                "active": {
+                    "$value": "{intent.default}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.active}" } }
+                }
             },
             "primary": {
-                "$value": "{intent.primary.rest}",
-                "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } }
+                "rest": {
+                    "$value": "{intent.primary}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.rest}" } }
+                },
+                "hover": {
+                    "$value": "{intent.primary}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.hover}" } }
+                },
+                "active": {
+                    "$value": "{intent.primary}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.active}" } }
+                }
             },
             "success": {
-                "$value": "{intent.success.rest}",
-                "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } }
+                "rest": {
+                    "$value": "{intent.success}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.rest}" } }
+                },
+                "hover": {
+                    "$value": "{intent.success}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.hover}" } }
+                },
+                "active": {
+                    "$value": "{intent.success}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.active}" } }
+                }
             },
             "warning": {
-                "$value": "{intent.warning.rest}",
-                "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } }
+                "rest": {
+                    "$value": "{intent.warning}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.rest}" } }
+                },
+                "hover": {
+                    "$value": "{intent.warning}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.hover}" } }
+                },
+                "active": {
+                    "$value": "{intent.warning}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.active}" } }
+                }
             },
             "danger": {
-                "$value": "{intent.danger.rest}",
-                "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity}" } }
+                "rest": {
+                    "$value": "{intent.danger}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.rest}" } }
+                },
+                "hover": {
+                    "$value": "{intent.danger}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.hover}" } }
+                },
+                "active": {
+                    "$value": "{intent.danger}",
+                    "$extensions": { "com.blueprint.derive": { "alpha": "{surface.layer-opacity.intent.active}" } }
+                }
             }
         },
         "layer": {
             "$type": "color",
             "$description": "Wraps layer-color in linear-gradient() for background stacking",
+            "app": {
+                "rest": {
+                    "$value": "{surface.layer-color.app.rest}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "hover": {
+                    "$value": "{surface.layer-color.app.hover}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "active": {
+                    "$value": "{surface.layer-color.app.active}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                }
+            },
             "default": {
-                "$value": "{surface.layer-color.default}",
-                "$extensions": { "com.blueprint.role": "stackable-layer" }
+                "rest": {
+                    "$value": "{surface.layer-color.default.rest}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "hover": {
+                    "$value": "{surface.layer-color.default.hover}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "active": {
+                    "$value": "{surface.layer-color.default.active}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                }
             },
             "primary": {
-                "$value": "{surface.layer-color.primary}",
-                "$extensions": { "com.blueprint.role": "stackable-layer" }
+                "rest": {
+                    "$value": "{surface.layer-color.primary.rest}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "hover": {
+                    "$value": "{surface.layer-color.primary.hover}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "active": {
+                    "$value": "{surface.layer-color.primary.active}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                }
             },
             "success": {
-                "$value": "{surface.layer-color.success}",
-                "$extensions": { "com.blueprint.role": "stackable-layer" }
+                "rest": {
+                    "$value": "{surface.layer-color.success.rest}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "hover": {
+                    "$value": "{surface.layer-color.success.hover}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "active": {
+                    "$value": "{surface.layer-color.success.active}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                }
             },
             "warning": {
-                "$value": "{surface.layer-color.warning}",
-                "$extensions": { "com.blueprint.role": "stackable-layer" }
+                "rest": {
+                    "$value": "{surface.layer-color.warning.rest}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "hover": {
+                    "$value": "{surface.layer-color.warning.hover}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "active": {
+                    "$value": "{surface.layer-color.warning.active}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                }
             },
             "danger": {
-                "$value": "{surface.layer-color.danger}",
-                "$extensions": { "com.blueprint.role": "stackable-layer" }
+                "rest": {
+                    "$value": "{surface.layer-color.danger.rest}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "hover": {
+                    "$value": "{surface.layer-color.danger.hover}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                },
+                "active": {
+                    "$value": "{surface.layer-color.danger.active}",
+                    "$extensions": { "com.blueprint.role": "stackable-layer" }
+                }
             }
         },
         "background-color": {
             "$type": "color",
             "$description": "Light mode app backgrounds: white → light-gray on interaction",
+            "app": {
+                "rest": { "$value": "{palette.white}" },
+                "hover": { "$value": "{palette.white}" },
+                "active": { "$value": "{palette.white}" }
+            },
             "default": {
                 "rest": {
-                    "$value": "{intent.default.rest}",
+                    "$value": "{intent.default}",
                     "$extensions": { "com.blueprint.derive": { "lightnessScale": 1.909, "chromaScale": 0 } }
                 },
                 "hover": {
-                    "$value": "{intent.default.hover}",
+                    "$value": "{intent.default}",
                     "$extensions": {
                         "com.blueprint.derive": { "lightnessOffset": 0.577, "chromaOffset": -0.02, "hueOffset": 6.2 }
                     }
                 },
                 "active": {
-                    "$value": "{intent.default.active}",
+                    "$value": "{intent.default}",
                     "$extensions": {
                         "com.blueprint.derive": { "lightnessOffset": 0.59, "chromaOffset": -0.013, "hueOffset": 0 }
                     }
                 },
                 "disabled": {
-                    "$value": "{intent.default.disabled}",
+                    "$value": "{intent.default}",
                     "$extensions": { "com.blueprint.derive": { "lightnessScale": 1.471, "chromaScale": 0 } }
                 }
             },
             "primary": {
-                "rest": { "$value": "{intent.primary.rest}" },
-                "hover": { "$value": "{intent.primary.hover}" },
-                "active": { "$value": "{intent.primary.active}" },
-                "disabled": { "$value": "{intent.primary.disabled}" }
+                "rest": { "$value": "{intent.primary}" },
+                "hover": { "$value": "{intent.primary}" },
+                "active": { "$value": "{intent.primary}" },
+                "disabled": { "$value": "{intent.primary}" }
             },
             "success": {
-                "rest": { "$value": "{intent.success.rest}" },
-                "hover": { "$value": "{intent.success.hover}" },
-                "active": { "$value": "{intent.success.active}" },
-                "disabled": { "$value": "{intent.success.disabled}" }
+                "rest": { "$value": "{intent.success}" },
+                "hover": { "$value": "{intent.success}" },
+                "active": { "$value": "{intent.success}" },
+                "disabled": { "$value": "{intent.success}" }
             },
             "warning": {
-                "rest": { "$value": "{intent.warning.rest}" },
-                "hover": { "$value": "{intent.warning.hover}" },
-                "active": { "$value": "{intent.warning.active}" },
-                "disabled": { "$value": "{intent.warning.disabled}" }
+                "rest": { "$value": "{intent.warning}" },
+                "hover": { "$value": "{intent.warning}" },
+                "active": { "$value": "{intent.warning}" },
+                "disabled": { "$value": "{intent.warning}" }
             },
             "danger": {
-                "rest": { "$value": "{intent.danger.rest}" },
-                "hover": { "$value": "{intent.danger.hover}" },
-                "active": { "$value": "{intent.danger.active}" },
-                "disabled": { "$value": "{intent.danger.disabled}" }
+                "rest": { "$value": "{intent.danger}" },
+                "hover": { "$value": "{intent.danger}" },
+                "active": { "$value": "{intent.danger}" },
+                "disabled": { "$value": "{intent.danger}" }
             }
         }
     }
diff --git a/packages/core/src/design-tokens/tokens/base/typography.tokens.json b/packages/core/src/design-tokens/tokens/base/typography.tokens.json
index aa09fab5878..a25103c82db 100644
--- a/packages/core/src/design-tokens/tokens/base/typography.tokens.json
+++ b/packages/core/src/design-tokens/tokens/base/typography.tokens.json
@@ -116,91 +116,30 @@
         },
         "color-muted": {
             "$type": "color",
-            "$value": "{intent.default.rest}"
+            "$value": "{intent.default}"
         },
         "color-default": {
             "$type": "color",
-            "rest": {
-                "$value": "{intent.default.rest}",
-                "$extensions": {
-                    "com.blueprint.derive": { "lightnessOffset": -0.279, "chromaOffset": -0.017, "hueOffset": -4 }
-                }
-            },
-            "hover": {
-                "$value": "{intent.default.hover}",
-                "$extensions": {
-                    "com.blueprint.derive": { "lightnessOffset": -0.209, "chromaOffset": -0.013, "hueOffset": -2.7 }
-                }
-            },
-            "active": {
-                "$value": "{intent.default.active}",
-                "$extensions": {
-                    "com.blueprint.derive": { "lightnessOffset": -0.079, "chromaOffset": -0.003, "hueOffset": -1.6 }
-                }
-            },
-            "disabled": {
-                "$value": "{intent.default.disabled}"
+            "$value": "{intent.default}",
+            "$extensions": {
+                "com.blueprint.derive": { "lightnessOffset": -0.279, "chromaOffset": -0.017, "hueOffset": -4 }
             }
         },
         "color-primary": {
             "$type": "color",
-            "rest": {
-                "$value": "{intent.primary.rest}"
-            },
-            "hover": {
-                "$value": "{intent.primary.hover}"
-            },
-            "active": {
-                "$value": "{intent.primary.active}"
-            },
-            "disabled": {
-                "$value": "{intent.primary.disabled}"
-            }
+            "$value": "{intent.primary}"
         },
         "color-success": {
             "$type": "color",
-            "rest": {
-                "$value": "{intent.success.rest}"
-            },
-            "hover": {
-                "$value": "{intent.success.hover}"
-            },
-            "active": {
-                "$value": "{intent.success.active}"
-            },
-            "disabled": {
-                "$value": "{intent.success.disabled}"
-            }
+            "$value": "{intent.success}"
         },
         "color-warning": {
             "$type": "color",
-            "rest": {
-                "$value": "{intent.warning.rest}"
-            },
-            "hover": {
-                "$value": "{intent.warning.hover}"
-            },
-            "active": {
-                "$value": "{intent.warning.active}"
-            },
-            "disabled": {
-                "$value": "{intent.warning.disabled}"
-            }
+            "$value": "{intent.warning}"
         },
         "color-danger": {
             "$type": "color",
-            "rest": {
-                "$value": "{intent.danger.rest}"
-            },
-            "hover": {
-                "$value": "{intent.danger.hover}"
-            },
-            "active": {
-                "$value": "{intent.danger.active}"
-            },
-            "disabled": {
-                "$value": "{intent.danger.disabled}"
-            }
+            "$value": "{intent.danger}"
         }
     }
 }
diff --git a/packages/core/src/design-tokens/tokens/themes/dark/surface.tokens.json b/packages/core/src/design-tokens/tokens/themes/dark/surface.tokens.json
index bf705bbd767..f32c4dad430 100644
--- a/packages/core/src/design-tokens/tokens/themes/dark/surface.tokens.json
+++ b/packages/core/src/design-tokens/tokens/themes/dark/surface.tokens.json
@@ -1,12 +1,12 @@
 {
     "surface": {
-        "border-color": {
+        "divider-color": {
             "$type": "color",
             "default": {
                 "$value": "{palette.white}",
                 "$extensions": {
                     "com.blueprint.derive": {
-                        "alpha": 0.2
+                        "alpha": 0.1
                     }
                 }
             },
@@ -14,11 +14,24 @@
                 "$value": "{palette.white}",
                 "$extensions": {
                     "com.blueprint.derive": {
-                        "alpha": 0.3
+                        "alpha": 0.2
                     }
                 }
             }
         },
+        "layer-opacity": {
+            "$type": "number",
+            "app": {
+                "rest": { "$value": 0.03 },
+                "hover": { "$value": 0.03 },
+                "active": { "$value": 0.03 }
+            },
+            "intent": {
+                "rest": { "$value": 0.1 },
+                "hover": { "$value": 0.1 },
+                "active": { "$value": 0.1 }
+            }
+        },
         "shadow": {
             "$type": "shadow",
             "$description": "BP6 dark mode elevation shadows - white inset borders, deeper black shadows",
@@ -152,15 +165,20 @@
         "background-color": {
             "$type": "color",
             "$description": "Dark mode app backgrounds: black → dark-gray on interaction",
+            "app": {
+                "rest": { "$value": "{palette.black}" },
+                "hover": { "$value": "{palette.black}" },
+                "active": { "$value": "{palette.black}" }
+            },
             "default": {
                 "rest": {
-                    "$value": "{intent.default.rest}",
+                    "$value": "{intent.default}",
                     "$extensions": {
                         "com.blueprint.derive": { "lightnessScale": 0.362, "chromaScale": 0.308, "hueOffset": -1.44 }
                     }
                 },
                 "hover": {
-                    "$value": "{intent.default.hover}",
+                    "$value": "{intent.default}",
                     "$extensions": {
                         "com.blueprint.derive": {
                             "lightnessOffset": null,
@@ -172,7 +190,7 @@
                     }
                 },
                 "active": {
-                    "$value": "{intent.default.active}",
+                    "$value": "{intent.default}",
                     "$extensions": {
                         "com.blueprint.derive": {
                             "lightnessOffset": null,
@@ -184,7 +202,7 @@
                     }
                 },
                 "disabled": {
-                    "$value": "{intent.default.disabled}",
+                    "$value": "{intent.default}",
                     "$extensions": {
                         "com.blueprint.derive": { "lightnessScale": 0.279, "chromaScale": 0.377, "hueOffset": -2.74 }
                     }
diff --git a/packages/core/src/design-tokens/tokens/themes/dark/typography.tokens.json b/packages/core/src/design-tokens/tokens/themes/dark/typography.tokens.json
index b2eff23598f..c1dd6c452fc 100644
--- a/packages/core/src/design-tokens/tokens/themes/dark/typography.tokens.json
+++ b/packages/core/src/design-tokens/tokens/themes/dark/typography.tokens.json
@@ -3,19 +3,19 @@
         "color-default": {
             "$type": "color",
             "rest": {
-                "$value": "{intent.default.rest}",
+                "$value": "{intent.default}",
                 "$extensions": {
                     "com.blueprint.derive": { "lightnessOffset": 0.212, "chromaOffset": -0.016, "hueOffset": 6.2 }
                 }
             },
             "hover": {
-                "$value": "{intent.default.hover}",
+                "$value": "{intent.default}",
                 "$extensions": {
                     "com.blueprint.derive": { "lightnessOffset": 0.12, "chromaOffset": -0.01, "hueOffset": 0 }
                 }
             },
             "active": {
-                "$value": "{intent.default.active}",
+                "$value": "{intent.default}",
                 "$extensions": {
                     "com.blueprint.derive": { "lightnessOffset": 0.095, "chromaOffset": -0.008, "hueOffset": 0 }
                 }