@spectrum-css/[email protected]

Patch Changes

• #3969 d952e0c Thanks @renovate! - Updated from @adobe/spectrum-tokens v13.10.0 -> 13.10.1.

  • #517 8f8f8a6 Thanks @larz0!

  Updated tokens

  • accordion-focus-indicator-gap
    • value: 0px -> 2px
  • accordion-top-to-text-medium
    • desktop.value: 12px -> 9px
    • mobile.value: 16px -> 10px

@spectrum-css/[email protected]

Patch Changes

• Updated dependencies [d952e0c]:
  • @spectrum-css/[email protected]
  • @spectrum-css/[email protected]

@spectrum-css/[email protected]

Patch Changes

• Updated dependencies [d952e0c]:
  • @spectrum-css/[email protected]

@spectrum-css/[email protected]

Patch Changes

• #3818 f20e1e7 Thanks @marissahuysentruyt! - Adds --spectrum-table-selected-row-background-color-rgb to light-vars.css and dark-vars.css for custom tokens.

@spectrum-css/[email protected]

Minor Changes

📝 #3818 f20e1e7 Thanks @marissahuysentruyt!

S2 table migration (continued)

Net-new features

• New sparkline SVGs available for cell content

Description of other S2 table work

A new .spectrum-Table-headCell--alignEnd class was created to correspond to tables that may have end-aligned numerical data so the head cell follows the text alignment correctly.

Semantically, if a table should enable column sorting, the content of a column's head cell should actually be a button, since it is triggering an action. If the column header cell could trigger a menu, the content of that cell should also be a button. New markup has been included to improve the semantic design of the content of header cells, utilizing button components to signify an action can be triggered, or a menu can be triggered.

In Storybook, new stories have been added to the docs page and the testing grid for Chromatic. These stories include WithMenuButton, WithChartContent. Documentation has been added for each of these stories, as well as expanded in other stories.

Modifier changes

Renamed modifiers

Old modifier	New modifier
--mod-table-row-active-color	--mod-table-row-background-color-active

New modifiers

• --mod-table-header-font-style
• --mod-table-header-icons-color-active
• --mod-table-header-icons-color-default
• --mod-table-header-icons-color-hover
• --mod-table-header-icons-color-key-focus
• --mod-table-row-font-family
• --mod-table-row-font-style
• --mod-table-row-text-color-active
• --mod-table-row-text-color-hover

Removed modifiers

• --mod-table-header-background-color-quiet
• --mod-table-row-background-color-quiet

@spectrum-css/[email protected]

Patch Changes

• Updated dependencies [f20e1e7]:
  • @spectrum-css/[email protected]
  • @spectrum-css/[email protected]

@spectrum-css/[email protected]

Patch Changes

• Updated dependencies [f0c6273, f20e1e7, f20e1e7]:
  • @spectrum-css/[email protected]
  • @spectrum-css/[email protected]
  • @spectrum-css/[email protected]

@spectrum-css/[email protected]

Major Changes

📝 #3684 f0c6273 Thanks @jawinn!

Spectrum 2 migration

Accordion now uses Spectrum 2 tokens and specifications.

New sized tokens are used for corner rounding, the spacing around the disclosure icon, and
the spacing around the content area.

New features

• Adds the optional "quiet" style, which does not show dividers between accordion items.
• Adds CSS transition to animate the rotation of the disclosure indicator when expanding and
  collapsing the accordion item.
• Adds no inline padding variant (.spectrum-Accordion--noInlinePadding) in which the item
  header does not have padding.
• Per design spec, accordion items have a min-width and default width. Default width can be
  overridden with --mod-accordion-item-width but should not be smaller than
  --spectrum-accordion-item-minimum-width.

Markup changes

The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved
from outside the button (spectrum-Accordion-itemHeader), to within the button. The extra
element with class spectrum-Accordion-itemIconContainer, previously wrapping the icon, has
been removed. A span with class spectrum-Accordion-itemTitle has been added around the heading
text.

Modifier changes

The following --mod custom properties have been renamed to better reflect how they are used:

• --mod-accordion-item-height has been renamed to --mod-accordion-item-minimum-height
• --mod-accordion-min-block-size has been renamed to --mod-accordion-item-min-block-size
• --mod-accordion-component-edge-to-text has been renamed to --mod-accordion-content-padding-inline

New modifiers:

• --mod-accordion-animation-duration
• --mod-accordion-edge-to-content-area
• --mod-accordion-item-minimum-width
• --mod-accordion-top-to-disclosure-indicator

@spectrum-css/[email protected]

Patch Changes

• #3883 4e3a120 Thanks @byteakp!

Fixed --spectrum-cjk-font variable to correctly reference --spectrum-cjk-font-family-stack instead of --spectrum-code-font-family-stack.

@spectrum-css/[email protected]

Patch Changes

• Updated dependencies [4e3a120]:
  • @spectrum-css/[email protected]