@adaptavant/core@0.0.13

This release is our fourth Release Candidate for Earth 1.0.

As always, we encourage you to try it out and give us feedback to ensure we can address any issues before the stable release.

Here are the highlights:

Setmore is moving to using black as the accent colour. To avoid inconsistencies during the rollout phase, we’ve offered it as a separate brand so that apps can continue to use the blue tokens until the adoption of Earth is high enough that we can switch everything over seamlessly.

To use the new theme, all you need to do is change the brand in your Tailwind config.

-import { tokens } from '@adaptavant/brands/setmore';
+import { tokens } from '@adaptavant/brands/setmore-black';

🚨 Breaking change: We’ve renamed the tertiary variant to secondary and updated the hover and focus styles.

We’ve also updated Button and related components (ButtonLink, Chip, IconButton, IconLink, etc.) to remove all StyleEngine styles and only use Tailwind.

We’ve removed the -webkit-tap-highlight-color that some mobile browsers added.

🚨 Breaking change: We’ve updated the Loading component to accept literal values instead of t-shirt sizes and added a new larger size.

We’ve also slightly updated the underlying SVG.

Previous behaviour: The Popover component used width for the dynamic value provided by usePopover, as opposed to max-width. This was because popovers are typically absolutely positioned, and setting max-width: x; width: 100%; proved ineffective (since absolutely positioned elements are outside the normal document flow).

New behaviour: The Popover now dynamically obtains its max-width and sets a base width of max-content. This allows Popovers to match the width of their content without requiring a fixed width for every instance. This means that, Popovers will automatically adjust to the width of their content, reducing the need to provide a fixed width.

Note: For content with significant length variability (e.g., filterable lists with both long and short values), we still recommend using a fixed width to ensure the Popover width remains consistent when the content changes.

We’ve added more custom plugins to our Tailwind preset and introduced new tokens:

This plugin lets us use the where() pseudo-class to lower the specificity of utilities.

This plugin adds utilities for styling <stop> SVG elements. As part of this update, we’ve also added accent, critical, critical-onPrimary, and onPrimary to our icon tokens, meaning you can use these tokens for fill and stroke values as well.

Added a new none token so that rounded-none can be used to unset a border radius.

Here is the full changelog with links to commits where changes were introduced:

• 93406d3: Remove exports for style functions and types for styles
• f2386c6: Add no-focus-ring class
• 15b93df: FilterMenu:
  • Switch listboxOption styles in FilterMenu to Tailwind
  • Fix z-index bug in high contrast mode
• 1d7b02b: - Created Custom Tailwind plugin for stop-color CSS property
  • Update fill and stroke Tailwind classes to support, accent, critical, critical-onPrimary and onPrimary tokens.
• 9410db0: Update button styles
• 1d7b02b: Loading:
  • Update sizing from t-shirt sizes to literal values (px)
  • Update all styles to use Tailwind instead of sx
  • Update "large" size loading equivalent to 48px, from 32px
  • Add new 80px size to support full-page loaders
• ff23142: Added text critical onPrimary token. Added Setmore Black theme.
• 45dc301: Remove tap highlight color style for links and buttons
• 15b93df: Popover:
  • Update to use Tailwind styles
  • Update width to max-content
• c033490: Button: change text-inverse to text-onPrimary to fix theming issue on booking app
• 1727dc5: Field:
  • Make inputId in FieldContext required
  • Throw if useInputA11yProps is called outside of a FieldContextProvider
• fd561e3: - Button: remove styleEngine styles
  • ButtonLink: remove styleEngine styles
  • Chip: remove styleEngine styles
  • IconButton: remove styleEngine styles
  • IconLink: remove styleEngine styles
  • Calendar: remove styleEngine styles from cellButton
  • FilterMenu: remove styleEngine styles
• cffcaaf: Icons: Add new icon - Apple
• fd561e3: Add radius.none token
• 51169c3: Rename tertiary button variant to secondary
• 24a964d: Remove Style Dictionary package
• 54938b0: Created New InlineField component
• 21b15e0: Text: Use Tailwind styles to define display property for Text component and DS components composed with Text
• 21b15e0: Add where plugin for lower specificity styles
• 6993a07: Remove experimental_ prefix from types and styling functions.