== Background/Goal
Our system needs to document the different allowed shadow styles.
Once defined, the system's shadow values will be documented as tokens, which will ensure the application of system-compliant shadows in various contexts.
=== User stories
As a designer, I need to have access to the system's shadow values, so I can apply the right shadows when creating system compliant designs.
=== Figma
You can view the Figma spec sheet with all [[ https://www.figma.com/file/4cXXU5YqFnDqrMRefj3K89/?node-id=111%3A167 | shadow tokens here ]].
=== Developer notes
`box-shadow`s are a bit more complex in backwards-compatibility.
<table>
<tr>
<th>WikimediaUI Base v0.19.0</th>
<th>OOUI</th>
</tr>
<tr>
<td>
`@box-shadow-base--focus: inset 0 0 0 1px @wmui-color-accent50;`
`@box-shadow-primary--focus: inset 0 0 0 1px @color-primary, inset 0 0 0 2px @color-base--inverted;`
`@box-shadow-destructive--focus: inset 0 0 0 1px @color-destructive, inset 0 0 0 2px @color-base--inverted;`
</td>
<td>
`@box-shadow-progressive--focus: inset 0 0 0 1px @color-primary, inset 0 0 0 2px @color-base--inverted;`
`@box-shadow-frameless-indicator--focus: 0 0 0 2px @color-primary;`
</td>
</tr>
</table>
As `@box-shadow-base--focus` will become `@box-shadow-progressive--focus` and `@box-shadow-progressive--focus` will become `box-shadow.progressive-filled--focus` we will need to rename variables downstream in order to carry on with the unchanged values in the right places.
=== Acceptance criteria (or Done)
**Design**
[-] Define global shadows (drop & insets)
[-] Define decision shadow tokens
[] Add the new styles in our Figma libraries
**Codex**
[] Add shadow tokens in Codex