feat(ui-toggle-details): rework ToggleDetails

[ToMESSKa]

INSTUI-4815

ISSUE:

• ToggleDetails needs to be migrated to the new theming system

TEST PLAN:

• compare the component to the Figma design https://www.figma.com/design/5WFqF3HVlNdfcJooCaiFoh/InstUI-Component-Library---Beta?node-id=9871-951&p=f&m=dev
• check if all tokens are used in styles.ts
• check if the component works the same as before

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2380/
Built to branch gh-pages at 2026-01-27 10:09 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[adamlobler]

I’m not sure why, but when I set the line-height of the toggleDetails content to 150% in the inspector, it looks good. However, when it gets the same value from the toggleDetails style, it appears much smaller. It looks like the 150% is not connected to the element's font-size its 150% of some general font-size.

150% line-height set by the component style:

150% line-height set in the inspector:

[ToMESSKa]

I’m not sure why, but when I set the line-height of the toggleDetails content to 150% in the inspector, it looks good. However, when it gets the same value from the toggleDetails style, it appears much smaller. It looks like the 150% is not connected to the element's font-size its 150% of some general font-size.

150% line-height set by the component style:

150% line-height set in the inspector:

@adamlobler I fixed this, can you please check it?

The problem was that the token's value changed form a unitless to a percentage value. When line-height is unitless (like 1.5), the number itself is inherited, not the computed px value. This lets each child element calculate its line-height based on its own font size. However, using a percentage (like 150%) means the parent’s computed line-height value is passed down and applied directly to children, regardless of children's font size. https://stackoverflow.com/questions/20695333/why-does-unitless-line-height-behave-differently-from-percentage-or-em-in-this-e

I applied the token to the all the children elements instead if the parent.

[git-nandor]

The icons appear slightly misaligned, and I don’t see any difference between the small and medium sizes.

[git-nandor]

In the dark theme, the icons have incorrect colors.

[git-nandor]

The filled variant has an incorrect background color, and the icons used for the expanded and closed states don’t match the designs in Figma.

[git-nandor]

See my comments

[adamlobler]

The line-height looks great, thanks for the modifications! 🙌 Other than the icon misalignment that Nandi mentioned, I think it’s going to be okay, the other issues are related to the button component, which we should fix there.