Add relative "REM" based tokens

[alisonailea]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

Pre-November

• [x] Review space and size tokens from design. Note changes to values in existing tokens
• [ ] create token transformer script to convert semantic space, size, and font-size tokens to REMs. (#10051)

November release

Calcite Design Tokens

• [ ] add and update tokens to semantic design tokens package.
  • [ ] Size (#10014)
  • [ ] Space (#10012)

Calcite Components

• [ ] update calcite-preset to use calcite-design-tokens for spacing, sizing, font-size, and line-height (#10052)
• [ ] update components to use newly tokens where applicable. Spacing, Sizing, and Font-size.

Acceptance Criteria

• [ ] Semantic tier spacing, sizing, and font-size variables build to CSS with REM values with a 16px base
• [ ] Calcite Components use Calcite Design Tokens for all spacing, sizing, and font-size references.
• [ ] values for height, width, inline-size, block-size, and scale should use "sizing" tokens
• [ ] values for padding, margin, gap, etc should use "spacing" tokens
• [ ] line-height and font-size should use "font-size" tokens

Relevant Info

Tailwind has previously covered this with a selection of "applied" tailwind classes. In many components these have been replaces with direct "space" or "line-height" properties. So both will need to be searched for.

Which Component

All.

Example Use Case

.scale-m {
  @apply text-n1h;
  padding: var(--calcite-space-sm);
  max-width: var(--calcite-size-xxl);
}

Priority impact

p3 - want for upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [X] @esri/calcite-design-tokens

Esri team

Calcite (dev)

[alisonailea]

This should be as easy as adding https://amzn.github.io/style-dictionary/#/transforms?id=sizepxtorem to the Design Token's build with a filter for specific token types. This requires some input from Design on naming.