Add base and theme aware tokens for splitter bar

[jattasNI]

Pull Request

🤨 Rationale

We are working on making a resizable chat pane. Brandon provided guidance about how to style the draggable splitter bar. Some of the colors are not yet present in the design system.

👩‍💻 Implementation

1. Add a new base token for Black77_100
2. Add a new theme-aware token for splitter background color.
3. Update description of divider background color to distinguish it from splitter

🧪 Testing

Storybook inspection

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[jattasNI]

I'm open to feedback about naming. I went with "divider" for a non-interactive border between panes and "splitter" for an interactive / draggable border between panes. Brandon indicated that this token is intentionally darker to convey its interactivity.

A few component libraries use "splitter" (Kendo, DevExtreme), but none of the major design systems that I checked do. We could also go with divider-interactive or divider-draggable or divider-enabled or something like that (the part after the dash would be a "state" in our token naming guidelines).

[rajsite]

Chatted offline about one idea of if the calendar event concept of static vs dynamic applies to the states here (I think dynamic events are ones that are draggable but I don't actually know). Could be divider-dynamic + dynamic-static or something. If there is something there we can go for it or any of the other proposals here. Don't feel strongly.

[jattasNI]

Here is the thread where we discussed the "dynamic" / "static" terminology: #2310 (comment)

It does seem like we used the terms to mean "movable" vs "fixed in place" so I think it makes sense to use that here. And I'm ok with scrapping the "splitter" terminology since it doesn't seem to be broadly used.

So the approved proposal is divider-background-dynamic-color:

• component: divider
• part: background
• state: dynamic
• type: color

If I don't find time to update this today, feel free to push updates to the PR while I'm out.

[rajsite]

Note for implementor (jesse, me, or otherwise) please also update the comments to emphasize the text for this token and the calendar tokens, i.e.
'Background color for static calendar events' -> 'Background color for static, non-movable calendar events',
'Background color for dynamic calendar events', -> 'Background color for dynamic, movable calendar events',
'Interactive splitter background color', -> 'Background color for dynamic, movable splitters',