Web Framework

This is a high level overview of what changed between Minerva v1.7.0 and v2.0.0. For old-to-new mappings of every breaking change, read the Migration Guide. For the details of any single component (its full prop list, behavior, and examples), read that component's docs page. Full framework documentation can be found at ua-stratcom.github.io/minerva/

If you need help or run into any problems upgrading Minerva to v2, please reach out to DSC Web Strategy (web@ua.edu) and we'll be happy to help in any way we can

Distribution

• ESM only. The CommonJS build has been dropped.
• The minerva.php aggregate file, the minerva-functions.js bundle of frontend JS classes, and the tokens directory of SCSS sources are all new outputs.
• Per-component CSS and SCSS are emitted for every component, so you can build a stylesheet containing only what you use.
• The Critical CSS file has been removed. The Baseline CSS file moved into the css directory.
• The package exports map adds ./css, ./js, and ./php entrypoints, plus a wildcard for reaching anything else in the distribution.

New platforms

Minerva v1 shipped React components and CSS. v2 adds two more implementations of the same component library, all producing the same markup.

• PHP template functions. Every component now has a PHP counterpart: a snake_case ua_* function that takes an associative array of props and, where the component has content, a second $children argument. The whole library is concatenated into a single minerva.php file you can require_once.
• Standalone frontend JavaScript. Interactive behavior now lives in ES classes (UA_PrimaryNav, UA_Modal, UA_Tabs, and so on) rather than in React effects, so React, PHP, and plain HTML consumers all get identical interactions. minerva.js initializes everything automatically on DOMContentLoaded; minerva-functions.js exports the classes so SPA-like shells can construct and cleanup() instances by hand.
• CSS utility classes have been removed.

Component reorganization

All components now live in a single components directory. In v1 they were spread across components, core, layout, navigation, and utils, and the distribution reflected that split.

• PrimaryNavigation is now PrimaryNav, and SecondaryNavigation is now SecondaryNav.
• Accordion (an alias of Details), CallToActionList, Swatch, and the Heading utility have been removed.

New components

• Cover: a section container that layers content over a background image and a tinted overlay, with content placement and a color theme inferred from the overlay. It replaces the background prop removed from Group and more closely matches the WordPress theme's cover block.
• Tabs: several panels of related content in one space.
• Eyebrow: short introductory text, usually (but not necessarily) given a heading as its children so the two are wrapped in an hgroup.
• SkipLink: a visually hidden "skip to content" link that appears on focus. Its default target matches the Page component's skipTargetID, so the two work together with no configuration.
• CookieBanner: the standard university cookie notice. It takes no props, reveals itself only when the visitor has not already acknowledged it, and stores consent for 90 days.
• Tag: the single pill from a TagList, exported for the rare case where one is needed outside a list.

Enhancements

Unified link and icon props

Components used to take links and icons apart, as href plus newTab, or iconName plus isBrand. In v2 they take a single prop.

• link accepts either a URL string or an object of any valid anchor attribute, including a component override for framework routing.
• icon accepts either a FontAwesome icon name or a full set of Icon props (name, type, label, inverse).
• A target of _blank now automatically adds rel="noopener noreferrer".
• The finalLinkProps and finalIconProps utilities are exported for use in your own components, with ua_resolve_link_props and ua_resolve_icon_props as the PHP equivalents.

Component improvements

• BrandBar
  • Added official
  • Added links
• Callout can now be used as an alert with the alert prop. Refer to docs for usage guidelines.
• Carousel now supports className
• CodeBlock lang is now optional and defaults to "none"
• Details
  • Now supports name attribute
  • Added a hover/focus indicator
• Icon has new inverse prop to swap duotone icon colors
• LinkBox
  • Added id
• Modal has new button prop for custom open button content
• Page now accepts a featured image
• PageSearch now supports className
• PrimaryNav now supports dropdowns where the parent is not a link by assigning it an href of #
• TagList has a new label prop
• TitleBar search input can now be controlled with search prop
• Group
  • Added align, justify, and textAlign props
  • Added minHeight prop

The table element no longer has a row hover indicator by default, but this can be brought back by adding the ua_table--hover-guide class to either the table element or the ua_table-wrapper. We've also added a class for striped tables ua_table--striped

Design tokens & theming

The token system was rebuilt from scratch and is now shipped as source in the tokens directory, so you can compile a customized tokens.css.

• Semantic color roles. Components reference a small set of role variables. v1's long list of contextual and element-specific color variables is gone.
• Themes, modes, and color sets. Those role variables are resolved through three layers: a mode (light or dark), a theme (default, secondary, inverse, bold), and a color set (base, elevated, positive, negative, info, neutral). Changing any layer re-points the semantic variables, so component CSS never has to know which theme it is in. Only use the semantic variables; the reference and set-level variables belong to the color system itself.
• Fluid typography. Font sizes are now clamp() expressions that scale continuously between a minimum and maximum viewport width, replacing v1's breakpoint-stepped sizes. Line heights are a smaller set of unitless values that adapt to the text size. Type is now Inter and Poppins, loaded from Google Fonts rather than Typekit.
• Spacing. The numbered --ua_space--* scale is replaced by named tokens derived from the base line height so vertical rhythm and spacing stay in step.
• Renames. --ua_border-radius--* is now --ua_radius--*, --ua_font--body is now --ua_font, --ua_layout-width--* is now --ua_layout--*, and the duotone icon colors moved to --ua_color-duotone--*. Border preset variables were removed.
• Zero-specificity scoping. Minerva's styles are scoped with :where(.ua_minerva) instead of .ua_minerva, so the scope no longer adds specificity and your own selectors override component styles more predictably. The token scope is configurable and defaults to :root.

The layout width classes were replaced by a measure-based system, which also maps onto WordPress's layout model.

• ua_measure constrains a container's children to the reading width, replacing ua_layout--standard, ua_layout--wide, and ua_layout--full. Explicit ua_width--content, ua_width--sidebar, ua_width--wide, ua_width--extra-wide, and ua_width--full classes handle the cases that need a specific width.
• ua_stack and ua_stack--tight replace ua_layout--flow and ua_layout--flow-half, and now adjust the space before headings automatically.
• ua_layout--grid is now ua_grid, and ua_layout--columns is now ua_text-columns.
• ua_justify--*, ua_align--*, and ua_text-align--* cover alignment, and are what the justify, align, and textAlign props on components emit.

See the layout documentation for how the pieces fit together, and the color documentation for the theme and color set model.

Class names

Most class names were renamed to follow BEM more closely. The component wrapper is now ua_component rather than ua_component_wrapper, and element names use a double underscore — ua_callout__title, ua_card__content, ua_title-bar__name. Custom CSS targeting Minerva classes needs to be reviewed and retested; the Migration Guide has the full old-to-new table.

Box Download

New Features

• Added support for border-radius (#562)
  • New design tokens are now available ua_border-radius--small, ua_border-radius--medium, ua_border-radius--large, and ua_border-radius--full
• Added a ribbon display option to the TagList component (#629)
• Added new utility classes for border radius (#634)
  • Class names follow the pattern .ua-util_radius#{$side}--#{$size} for example .ua-util_radius-top-left--large
• Added a new elephant HR style (#638)

Enhancements

• Tables have been re-worked and now support multiple rows in the tfoot area (#562)
• Updated the designs of the SiteFooter and BrandFooter components (#624)
• Updated the design of the LinkList component (#625)
• Added a label to the PageSearch component (#626)
• Updated the design of the SocialLinks component (#627)
• Updated the design of the Breadcrumbs component (#630)
• Updated the design of the Details component and added a subtle style (#631)
• Updated the design of the Steps component and fixed a number of typography issues in the component content (#635)
• Updated the design of the SecondaryNavigation component and updated it's behavior to include a toggle on small viewports (#637)
• Updated the design of the Pullquote component and added a subtle style (#639)

Bug Fixes

• Fixed a bug where Card components with a link prop could not be clicked on (#562)
• Fixes an issue where Card components with a link prop that could be clicked on prevented the user from selecting any text on the card or interacting with any links in the card description (#562)
• Updated the TitleBar JS to prevent edge-case errors (#610)
  • Adds checks for all HTML elements
  • Adds the initialization check we're adding in Minerva 2
  • Provides a cleanup function to remove event listeners added by the script
  • Greatly improves performance of the media query
  • Changes the behavior so that the menu will automatically close if the viewport is adjusted to a smaller size
• Updated the color of HR elements to use text color (#638)
• Miscellaneous design fixes (#628)
  • Removed the unintentional hover border from subtle cards
  • Removed a bit of CSS that was tampering with the margins on cards, mostly visible in contact cards
  • Reduced the line height on contact card subtitles
  • Reduced the line height on data highlight stats
  • Removed the unintentional padding on modal button images and added a border radius
  • Added a default border radius to generic inputs
  • Fixed an issue where the HR color would not update based on contrast changes
  • Changed the title font on the Callout, Card, Event, and Steps components to use the body font
  • Fixed an issue where the HR element would be wider than the content in a layout area

Markup changes

These components have had their HTML markup changed

• BrandFooter
• SiteFooter
• TitleBar
• PageSearch
• TagList

Box Download

Enhancements

• Added a component wrapper to the carousel (#598)
• Added an advanceType prop to the carousel to control the behavior of slide navigation (#598)
• Disabled carousel autoplay on touch devices (#600)
• Changed the page search behavior to scroll the result to the top of the page rather than the middle (#599)

Bug Fixes

• Fixed a bug where clicking the next button on the last page of a carousel with a number of slides that isn't evenly divisible by the number of pages would break the navigation of all other buttons. (#598)
• Fixed an issue with the page search component where it would scroll past the target result (#599)

Box Download

New Features

• Added the Modal component (#578)
• Added the Carousel component (#587)
• Added the PageSearch component (#586)
• Added design tokens for box shadows (#591)

Enhancements

• Updated FontAwesome to 6.7.2 (#585)

Box Download

Bug Fixes

• Fixes an issue with dropdown alignment on the primary navigation (#570)
• Fixes an issue where the newTab prop was not respected by the LinkList component (#573)
• Updated SCSS files to use the sass @use command to import stylesheets, since @import is being deprecated. (#575)

Box Download

New Features

• Added support for dark mode to the design system (#524)
  • Dark mode can be enabled for non-wordpress web applications by adding the class ua_color-mode--dark to the same element as ua_minerva
  • Updated the BrandFooter and BrandBar components to use static colors from the color reference tokens, this ensures they retain all color settings regardless of color mode
  • Dark mode is not supported in the WordPress theme at this time
• Added new variable link-accent used for applying accent color to links and navigational elements where text contrast would fail. These mostly apply to borders and underlines (#540)

Enhancements

• Updated the design of the SiteFooter component for high contrast and dark mode (#524)
• Updated the colors of duotone icons for better accessibility contrast (#542)
• Adjusted some code block syntax highlighting colors for better accessibility contrast (#524)
• Changed the value of a number of CSS color variables to better meet contrast requirements in all color contexts (#540)
• Updated the design of the ContactCard component (#551)
• Increased the border thickness of the LinkBox component by 1px (#564)
• Changed the color for site title to crimson to better indicate it's behavior as a link (#540)

Bug Fixes

• Fixed an issue where the CodeBlock component was not keyboard accessible with horizontal scrolling (#533)
• Fixed an issue where the "new tab icon" on links in the primary navigation would break to the next line (#561)
• Fixed an issue where content such as links in the description of a Card could not be selected or activated if the Card itself was setup as a link (#564)

Breaking changes

The HTML for the following components has been modified, and those changes will need to be reflected in any web applications using static HTML with Minerva CSS:

• ContactCard (#551)
• BrandFooter (#524)

These changes are only relevant to users extending minerva with custom CSS

• Changed the name of two CSS variables
  • ua_color-icon--primary is now ua_color-icon--duotone-primary
  • ua_color-icon--secondary is now ua_color-icon--duotone-secondary

Internal notes

These changes are only relevant to users working with Minerva directly as a development resource

• Major refactor to how design tokens are handled (#524)
  • Move token maps to JS objects to be accessible to JS projects
  • Added a script to transpile the JS objects into SCSS maps
  • Updated the storybook toolbar to add an option for setting the color mode
  • Changed how the ua_minerva class is added to storybook stories using a decorator
  • Updated the storybook configuration to omit decorators from the html plugin
• Changed the media criteria "reduce-motion" because its a media query to put motion in to respect user motion preference. (#524)

Download from box

Enhancements

• Added underline to Card component headings where the Card is linked

Bug Fixes

• Adds the 'use client' directive to components that call React useEffect, which should allow Minerva to be used with setups that utilize SSR without error. See React Documentation
• Fixes an autoprefixer warning related to an alignment property in the Event component. It now uses flex-start instead of start for alignment.

Box Download

Bug Fixes

• Increased the touch target size of links in the universal footer to meet accessibility requirements (#514)
• Fixed an edge case issue with the sidebar navigation (#510)

Box Download

New Features

• Added a new ContactCard component (#477)

Enhancements

• Added an active state for SecondaryNavigation menu items (#503)
• The SecondaryNavigation menu will automatically expand to show the active item if the active item is a child (#503)
• Added a subtle style for the Event component (#502)

Bug Fixes

• Addressed an issue with h1 alignment, adding new props titleAlign and titleWidth to the Page component, and removing some aggressive CSS (#495)
• Fixed an issue where the TitleBar title would have a larger clickable area than intended. (#504)
• Fixed an issue where the expander in the TitleBar could wrap to the next line in edge cases (#504)

Deprecations

• The CallToAction has had the text prop deprecated in favor of the children prop. The text prop will still work, but will display a warning in the console. A warning will also be shown if the children prop is undefined, as it will be made a required prop in a future version, when the text prop is removed completely. (#477)
• The Card component has had the description prop deprecated in favor of the children prop. A warning will be provided if the description prop is used, and the description prop will be removed completely in a future version. (#477)

Maintenance

• Updated Storybook and made slight changes to the project directory structure (#492)
• Moved the FA Icon generator to it's own repository (#492)
• Introduced snapshot testing (#494)
• Overhauled the build and dist scripts to enable more consistent release workflows (#497)

HTML Changes

• The h1 in page layouts should now be wrapped in an element with a layout class, such as ua_layout--standard See (#495)
• A new wrapper div has been added in the TitleBar component, wrapping around the title bar content and expander button. See (#504)
• The "Accessibility" link in the universal footer has been updated to point to https://accessibility.ua.edu/statement/. See (#505)
• In the SecondaryNavigation component, the aria-current attribute should be added to the active page's <a> element. The resulting html should look something like <a href="..." aria-current="true"> See (#503)

Box Download

Bug Fixes

• Restores margin and padding utilities for flow double and flow half (#489)

Box Download

New Features

Added new variable --ua_color-text--alt (#479)

Enhancements

Added a 3px border top to the tfoot element to match WordPress styling (#481)

Bug Fixes

• Fixed an issue where border colors were not changing based on contrast / context (#480)

Deprecations

• Removed border variables (#480)

Box Download

Enhancements

• Updates the space between the content and sidebar to be gutter instead of grid-gap
• Updates layout width variables, specifically the wide width layout, which is now a calculation of the combined layout widths instead of being hard coded
• Added some redundant styling to the Pullquote component to enforce text alignment

Bug Fixes

• Adds justify content: center to the content wrapper inside ua_app
• Revamps list spacing so that the indentation is applied more predictably

Box Download

New Features

• Added a new variable ua_space--flex-gap (#458)
• Added a new wrapper #ua_app that will allow short pages to fill the available viewport height (#466)

Enhancements

• Added showLocation prop to the EventFeed component to allow the locations to be toggled off (#447)
• Updated the time format used in the Event component to respect AP style (#448)
• Added an open prop to the Details component, allowing users to set the default state (#453)
• Updated the style for the Pullquote component to match the design system mockup of this component (#452)
• Updated the text color on the AlertBanner component to use negative text color (#456)
• Made the AlertBanner href prop optional (#456)
• Removed default style for the fieldset html element (#457)
• Updated the value of ua_space--flow-half and ua_space--flow-double to be a calc function of ua_space--flow (#457)
• Changed the background and text colors on positive, negative, and info contexts inside "most contrast" sections (#458)
• Changed the background colors on positive, negative, and info contexts inside "more contrast" sections (#458)
• Updated FontAwesome to 6.6 (#467)

Bug Fixes

• Removed the outbound link icon from the UA System Logo (#445)

Deprecations

• The Accordion block has been renamed to Details. This is for better language parity between minerva and the wordpress theme (#453)
• The Blockquote component has been renamed to Pullquote. This was done to avoid confusion with the blockquote html element and to provide more parity to component names between the wordpress theme and minerva framework (#452)
• Removed ua_space--gap in favor of ua_space--grid-gap (#458)
• Removed ua_color--text-inverse in favor of ua_color--background-surface (#458)
• Removed ua_color--background-disabled in favor of ua_color--background-chip (#458)
• Removed the following components: DefinitionListItem, Video, Image. Please use plain HTML instead (#465)

Other notable changes

• Removes advanced styles from the blockquote html element allowing it to be used as a simple quote with no class name requirements (#452)
• Changes the markup of the new Pullquote component to apply styles more intuitively based on HTML markup rather than require additional wrappers and class names (#452)
• Added the ua_ prefix to the classes media-wrapper and visually-hidden (#457)
• Added a $scope SCSS variable to allow custom builds of Minerva with different global scope (#462)
• Moved list styles to placeholder selectors that can be extended to any other selector (#462)

Box Download

New Features

• Added support for the font weights: Thin, Light, Medium, and Extra Bold (#436, #439)

Bug fixes

• Fixed an issue where the primary nav dropdown would not display in edge cases (#433)
• Fixed an issue where the primary nav dropdown button would not work in edge cases (#433)

Box Download

New Features

• Add support for text and list columns through the class ua_layout--columns (#427)

Enhancements

• Add space for contents inside the accordion component (#429)

Box Download

Enhancements

• Add link to UA System Logo in footer (#420)

Bug Fixes

• Fixed an issue where the prominent link box icon was not centered (#422)

Box Download

New Features

• Updated the Font Awesome CSS to support duotone icons (#415)
• Added a prominent style for the LinkBox component (#415)
• Added a type prop to the Icon component that enables duotone icons (#415)

Enhancements

• Redesigned the accordion component (details/summary) (#413)

Deprecations

• Removed the isBrand prop from the Icon component, use type instead (#415)

Box Download

Bug Fixes

• Fixes an issue where Cards are not given equal height when added to a Grid (#411)
• Fixes an issue with subtle card content alignment (#411)
• Fixes an issue where a small margin was being applied to the right of the page content (#411)

Box Download

New Features

• Added utilities for text and background color (#397)
• Added a "sidebar" area to the page layout grid (#406)
  • This grid area will display below the page content on smaller viewports while the sub-nav grid area will continue to display above the page content

Enhancements

• Updated Font Awesome to 6.5.2 (#391)
• Overhauled how the primary menu expander behaves (#402)
  • The sub menu will only display on hover with fine cursor input
  • Hovering over the expander will no longer open the sub menu
  • The menu should now be able to be closed by clicking on the expander, even on devices with fine cursors
  • The sub menu should now be collapsible on mobile
• Added a small crimson border to the top of the site footer (#404)
• Added a border on hover to standard cards that have a link to show that the entire card is clickable (#405)

Bug Fixes

• Removed some styles specific to SVG images causing unexpected behavior (#401)

Deprecations

• Removed the "footer" grid area from the Page component layout as it wasn't being used.

Box Download

Enhancements

• Added a new media breakpoint for text. This should help display longer words on smaller viewport widths without needing hyphenation. (#383)

Box Download

Bug Fixes

• Fixes typescript definitions when installed as a package (#380)

Box Download

Bug Fixes

• Fixes typescript associations when installed manually (#378)

Box Download

New Features

• Added the AlertBanner component (#375)
• The distribution now includes the core SCSS file, so you can import it into your own SCSS projects to use the same functions and mixins as minerva (#376)

Enhancements

• Removed letter spacing from text utilities (#376)
• Fixed inconsistencies in text utility class names (#376)

Deprecations

• Removed deprecated typeset variables (#376)

Box Download

Bug fixes

• Isolated tests, removing the SASS True dependency

Box Download

New Features

• Added design tokens for font size (#361)
• Added design tokens for line height (#361)
• Added new color variable --ua_color-text--subtle (#365)
• Removed the bold styling from parent menu items in preparation of adding active page styles (#367)

Enhancements

• Adjusted the gap between primary nav menu items (#358)
• Moved esm components to top level so they can be imported from minerva/src (#359)
• Added a border to the CTA component to match the height of it's subtle variant (#361)
• Increased the contrast of disabled buttons (365)

Bug fixes

• Fixed an issue where the Link component would be styled incorrectly when the className prop was not passed (#360)
• Fixed an issue where buttons may not be styled correctly (365)
• Fixed an issue where the navigation elements TitleBar and PrimaryNavigation would be hidden if Javascript failed or was disabled. (#363)
• Fixed an issue where the navigation element SecondaryNavigation would have inaccessible children if javascript failed or was disabled (#363)
• Fixed an issue where the expander of SecondaryNavigation would wrap to next line instead of the link text. (#367)

Breaking changes and deprecations

• Changed the name of --ua_space--0 to --ua_space--05 for better transparency (#361)
• The old typeset variables are deprecated and will be removed in the next version. Consider switching to the new line height and font size variables (#361)
• Removed ua_color-text--disabled effective immediately. Use --ua_color-text--inverse instead (#365)
• Removed ua_context--subtle since its only purpose was to get subtle style callouts. We'll add these as component variants in the future (365)
• Renamed ua_context--elevated to ua_contrast--more (365)
• Renamed ua_context--prominent to ua_contrast--most (365)
• Changed the presence prop on the Group component to be contrast with accepted values "more" and "most" (365)
• Markup for the TitleBar, SecondaryNavigation and PrimaryNavigation have changed (#363, #367)

Box Download

New Features

• Added a bunch of utility classes (#331)
• Added subtle variant for the CallToAction component (#337)
• Added a disabled state to the CallToAction component (#337)

Enhancements

• Updates the to TagList component to improve styling (#326)
• Improved behavior of ua_layout--flow-half (#331)
• Added a background to the link list items, which should improve their use on top of complex backgrounds (#338)
• Adjusted the props of the CallToActionList component, improving justification and classes (#342)

Bug Fixes

• Fixed a bug where flow spacing was not being applied to Step components (#335)
• Fixed an issue where the TagList would overflow the container instead of wrapping (#340)
• The CodeBlock will no longer wrap long lines, providing a horizontal scroll bar instead (#351)
• Fixed an issue where the TitleBar menu wouldn't display (#350)

Other notable changes

• Removed "About this site" from the brand footer (#334)
• Removed default hyphenation rules for H1s (#349)

Box Download

New Features

• Added the CallToActionList Component (#318)

Enhancements

• Update FontAwesome from 6.4.1 to 6.5.1 (#321)

Bug Fixes

• Fixed an issue with incorrect margins on horizontal cards with the subtle presence (#320)
• Fixed an issue with horizontal card image sizes (#310)
• Moved presence class to wrapper div to improve compatibility with wordpress (#317, #312)
• Fixed a bug where images were being sized incorrectly in a Grid (#316)

Deprecations

• Setting aspect ratio with a horizontal card is no longer permitted (#310)
• The SearchBox component has been removed (#313)

Box Download

Features

• Added several utility classes related to spacing (#292)
  • ua_space--flow-double
  • ua_space--section
  • ua_space--0
  • ua_space-start--flow-double
  • ua_space-start--section
  • ua_space-start--0
  • ua_space-end--flow-double
  • ua_space-end--section
  • ua_space-end--0

Enhancements

• Redesigned the primary navigation dropdown on large viewports (#300)
• Significant refactor of the layout system. This fixes numerous bugs and layout issues but also introduces a few changes to be aware of. (#292, #303, #304)
• Added the ClassName prop to all components (#292)
• Added a component wrapper to the LeadText component (#292)
• Added header and footer options to the Group element prop (#292)

Breaking changes

• The class name ua_align--standard changed to ua_width--standard
• The class name ua_align--wide changed to ua_width--wide
• The class name ua_align--full changed to ua_width--full
• The class name ua_layout_flow changed to ua_layout--flow
• The class name ua_layout_grid changed to ua_layout--grid
• The class name ua_layout_flex changed to ua_layout--flex
• The class name ua_layout_standard changed to ua_layout--standard
• The class name ua_layout_wide changed to ua_layout--wide
• All prop names dealing with component alignment has been renamed from align to justify except in cases where the alignment is strictly text alignment

Box Download

Features

• Added Tag and TagList components (#267)
• Added landscape option to the Card component (#244)
• Added EventFeed component (#293)

Enhancements

• Updated Font Awesome to 6.4.2 (#266)
• Added the align prop to the Heading component (#293)
• Use text/accent color where possible for better accessibility in prominent contexts (#291)

Bug Fixes

• Fixed a bug where LinkList items would not expand to fill the height of wrapped lines (#262)
• Changed the color of DataHighlight to use text/accent color (#263)
• Fixed an issue where the event name size would change depending on the heading level (#293)
• Fixed an issue where the event component would display the full date range even if the event ends on the same day as it starts (#293)
• Fix specificity of lead-in selector (#291)

Other Changes

• Refactored token system (#291)
• Added new border tokens (#291)
• Add word break to event names (#291)
• Updated the text styling of Blockquote, LeadText, DataHighlight Lead-In Text, Image Caption and Video Caption (#296)

Box Download

Features

• Re-Added the Steps component with new design (#251)
  • Now supports nested lists (#256)
• Added a Swatch component (#254)

Enhancements

• Adjusted section spacing on smaller screens (#252)
• Redesigned the Event component (#249)
• Optimized distribution for core brand UI (#247)

Bug fixes

• Adjusted the link styling for better state indications in sections with prominent context (#250)
• The Event component now accepts a heading_level prop (#248)
• Updated the syntax highlighting colors to be more accessible (#239)
• Changed LinkList layout to Grid and LinkList will now accept Grid props (#238)
• Added a missing export for SocialLinks (#238)
• Tweaked the color value of Primary 300 to be more accessible (#242)
• Adjusted the CSS so that alignment props will work correctly (#253)

Breaking changes

• Changed how we handle variable value shifts, these will now be controlled by ua_context--prominent, ua_context--elevated, and ua_context--subtle (#245)

Box Download