Checkpoint: Design Tokens

Question 1 of 5

• It adapts automatically, because all tokens change in dark mode.
• It turns transparent, because primitives are removed in dark mode.
• The browser picks a dark equivalent through color-scheme.
• It keeps the light grey, because it references a primitive that dark mode doesn’t remap.

Question 2 of 5

• "inset-md": { "$type": "dimension", "$value": { "value": 1, "unit": "rem" } }
• "inset-md": { "$type": "dimension", "$value": "16px" }
• "inset.md": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } }
• "inset-md": { "$type": "dimension", "$value": { "value": 1, "unit": "em" } }

Question 3 of 5

• It works because primitives are always resolved last; no setting is involved.
• References were kept in the generated CSS, so the semantic token still points at the primitive at runtime.
• The pipeline generates one file per page.
• Style Dictionary watches the page and rebuilds when values change.

Question 4 of 5

• It’s too long for CSS.
• It’s missing the state part of the grammar.
• It bakes a brand, a color and a component into a semantic name, so it breaks when any of them changes.
• Token names can’t contain brand names in the DTCG format.

Question 5 of 5

• Nothing, because each axis remaps different tokens and the cascade combines them.
• A combined [data-theme="dark"][data-density="compact"] block.
• A JavaScript function that merges the two token sets.
• A third attribute, such as data-mode="dark-compact".