Align and update tokens with Figma component library

[steppy452]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[x] Other... Please describe:  Shifting around some design tokens to align better with how our Figma component library works

What is the current behavior?

Issue Number: N/A

{
  panel: {
    // Panel backgrounds, such as cards, tables, popovers, dialogs, dropdown menus, etc.
    DEFAULT: colorPalette['black-pearl'],
    content: colorPalette['athens-gray'],
    'secondary-content': colorPalette.gray[600],
    accent: colorPalette['charade']
  },
  surface: {
    // Form component backgrounds, such as text fields, checkboxes, select, etc.
    DEFAULT: colorPalette['charade'],
    content: colorPalette['athens-gray'],
    accent: colorPalette.blue[500],
    disabled: colors.gray[800]
  }
}

What is the new behavior?

{
  panel: {
    // Panel backgrounds, such as cards, tables, popovers, dialogs, dropdown menus, etc.
    DEFAULT: colorPalette['black-pearl'],
    accent: colorPalette['charade']
  },
  surface: {
    // Form component backgrounds, such as text fields, checkboxes, select, etc.
    DEFAULT: colorPalette['charade'],
    accent: colorPalette.blue[500],
  },
  text: {
    'content-primary': colorPalette['athens-gray'],
    'content-secondary': colorPalette.gray[600]
  }
}

Does this PR introduce a breaking change?

[x] Yes
[ ] No

Move panel.content, panel.secondary-content and surface.content tokens into a text block and renaming to content-primary and content-secondary

Theme files where *-panel-content, *-panel-secondary-content and *-surface-content are being used have been updated to *-content-primary and *-content-secondary. If existing applications panel.content and surface.content variables are different, updates to the following component theme files will need to be updated if the component is being used in the existing app:

• PagerTheme: base
• RedactTheme: base
• SortTheme: base
• ArrowTheme: base
• AvatarGroupTheme: base
• BadgeTheme:
  • colors.primary
  • colors.secondary
  • colors.error
• ButtonTheme:
  • base
  • colors.default.text
  • colors.primary.filled
  • colors.secondary.filled
  • colors.success.filled
  • colors.warning.filled
  • colors.error.filled
• DotsLoaderTheme: dot
• CheckboxTheme: base
• InputTheme:
  • base
  • adornment.base
• RangeTheme: tooltip
• SelectMenuTheme: groupItem.title
• TooltipTheme: base
• ListItemTheme:
  • base
  • header
• StackTheme: base
• TreeTheme:
  • arrow
  • node.base
  • node.button.icon

Other information

Not affecting Reablocks theme, but surface.disabled was also removed and the story using the token was updated accordingly for both light and dark theme.

Figma plugin updates here

Migration notes will be updated as part of the reablocks website PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
reablocks-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 19, 2024 5:06pm

[netlify]

✅ Deploy Preview for reablocks-storybook ready!

Name	Link
🔨 Latest commit	937d91f
🔍 Latest deploy log	https://app.netlify.com/sites/reablocks-storybook/deploys/66730ffb54676b000833f72e
😎 Deploy Preview	https://deploy-preview-232--reablocks-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[steppy452]

@amcdnl after seeing some of the changes that Kyle is working on, I think it might be a good idea to try and take into account the changes that he's proposing before merging this.

[amcdnl]

text-text-secondary - Not in love w/ that.