Add relative "REM" based tokens

[alisonailea]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Pre-November

• 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. (TokenTransformer script - convert px to REMs in CSS #10051)

November release

Calcite Design Tokens

• add and update tokens to semantic design tokens package.
  • Size (Incorrect semantic size tokens #10014)
  • Space (Incorrect semantic space tokens #10012)

Calcite Components

• update calcite-preset to use calcite-design-tokens for spacing, sizing, font-size, and line-height (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

• @esri/calcite-components
• @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.