Replace inconsistent shadow styles with new shadow tokens

[rmstinson]

Check existing issues

• I have checked for existing issues to avoid duplicates

Blocked issues: #9758

Description

A handful of Calcite components use a different shadow style than the tailwind style shadow.2. Most of them currently use the style "0 0 16px 0 rgba(0, 0, 0, 0.16)." Some are inheriting the style from the classes "calcite-floating-ui-anim" + "calcite-floating-ui-anim--active." Those components' shadow styles need to be replaced with shadow.2 in the code.

Acceptance Criteria

• Ensure the opacities used in shadow tokens are set in core

  • 0.04
  • 0.08
  • 0.10
  • 0.12
  • 0.16

• Add new semantic black color tokens for use with shadows:

  • color.shadow.1
    • light mode: rgba({core.color.neutral.blk-240}, {core.opacity.04})
    • dark mode: rgba({core.color.neutral.blk-240}, {core.opacity.12})
  • color.shadow.2
    • light mode: rgba({core.color.neutral.blk-240}, {core.opacity.08})
    • darkmode: rgba({core.color.neutral.blk-240}, {core.opacity.12})
  • color.shadow.3
    • light mode: rgba({core.color.neutral.blk-240}, {core.opacity.10})
    • dark mode: rgba({core.color.neutral.blk-240}, {core.opacity.16})

• Add new semantic shadow tokens:

  • shadow.sm = box-shadow: 0px 2px 8px 0px {semantic.color.shadow.3}, 0px 2px 8px 0px {semantic.color.shadow.1};
  • shadow.md = box-shadow: 0px 6px 20px -4px {semantic.color.shadow.3}, 0px 4px 12px -2px {semantic.color.shadow.2};

• Apply shadow tokens as listed in Which Component section below.

Relevant Info

Figma spec reference

Which Component

shadow.sm

• Notice
• Sheet
• Shell Panel display-mode=“float-all” | “float-content” | “overlay”

shadow.md

• Action Menu (renders a Popover)
• Action Pad
• Alert
• Autocomplete
• Dialog
• Dropdown
• FAB
• Combobox / Input Time Zone
• Input Date Picker
• Input Time Picker
• Menu Item (horizontal submenus)
• Popover
• Tooltip

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[macandcheese]

Note: Shell Panel also has similar bespoke values for "directional" shadows based on "overlay" displayMode and Shell Panel placement.

[anveshmekala]

date-picker uses a custom value here when day is focused. Does this qualify for a new core token?

[ashetland]

@anveshmekala Is that box-shadow needed? Button also uses an outset focus and does not do this.

[ashetland]

Updated issue title and description and marking ready for dev. cc @matgalla @alisonailea

[github-actions]

cc @geospatialem, @brittneytewks

[alisonailea]

Updated issue title and description and marking ready for dev. cc @matgalla @alisonailea

Updated issue description with additional Token Studio references

[ashetland]

@geospatialem, I'm assigning this to @matgalla for the initial tokens effort. The last item will need to be picked up once Matt's work is complete.