Blueprint

GuidesFoundationComponentsReleases
⌘K

Change Log

4.31.1

Patch Changes

4.31.0

Minor Changes

4.30.0

Minor Changes

4.29.0

Minor Changes

4.28.0

Minor Changes

  • #2972 ddcaa8123 Thanks @fhuyghe! - Add new animation for the dark variant of the Gallery.

  • #2985 70eec9fad Thanks @aculkin! - ### Placement prop cleanup

    Clean up the implementation of the left placement of the sheet component

    Bump package version

    Bump the package version from a previously un-bumped change from PR-2916

4.27.1

Patch Changes

4.27.0

Minor Changes

  • #2927 5ca3d0553 Thanks @fhuyghe! - Adds Bauhaus extra theme entrypoint and theme for Gallery.

    The new theme needs to be added to the DesignSystemProvider like so:

    App.tsx

    import { DesignSystemProvider } from '@hover/blueprint';
    import { Gallery } from '@hover/blueprint/extra/theme';
    const App: FC = ({ children }) => (
    <DesignSystemProvider extraComponentThemes={{ Gallery }}>
    {children}
    </DesignSystemProvider>
    );
    export { App };

Patch Changes

  • Updated dependencies [5ca3d0553]:
    • @hover/blueprint-theme@3.24.0

4.26.1

Patch Changes

4.26.0

Minor Changes

Patch Changes

4.25.4

Patch Changes

4.25.3

Patch Changes

4.25.2

Patch Changes

4.25.1

Patch Changes

  • #2877 96d7ad810 Thanks @jrolfs! - Bump the version on @hover/blueprint-theme to fix the recent Chakra upgrade as @hover/blueprint-theme contains an important theme helper function for the upgrade
  • Updated dependencies [96d7ad810]:
    • @hover/blueprint-theme@3.20.0

4.25.0

Minor Changes

  • #2868 a42d8a617 Thanks @jhines-hover! - This upgrades Chakra to 2.8.2 to allow consumers of @hover/blueprint to upgrade to Typescript 5+.

    ⚠️ While we've done our best to ensure the Chakra upgrade doesn't result in any breaking changes, there's still a small chance some styling or behavior has some subtle changes

    • Unfortunately, Chakra made a subtle breaking change in how it parses the theme when producing the theme CSS variables
      • toCSSVar from @chakra-ui/system started causing our color functions that live on the theme to be serialized into the CSS variable output, which breaks the theme
      • To work around this, we override toString on those functions, which prevents them from being serialized in toCSSVars
    • The Stack component was migrated from the lobotomized owl selector to native flex gap
      • This can subtly break our layouts, so we backported the 🦉-based spacing into our Stack
    • Upgrade to TypeScript 5 in the demo and documentation applications
      • This requires moving off of jsxImportSource for Emotion

4.24.0

Minor Changes

Patch Changes

  • Updated dependencies [c0f80837]:
    • @hover/blueprint-theme@3.19.0

4.23.2

Patch Changes

4.23.1

Patch Changes

  • #2841 e6f85609 Thanks @ALacker! - fixes spacing on iconButtons adds styling for glass toggleButtons that makes them more similar to the FilterChip designs makes tertiary button text legible (these will be immediately deprecated, but still better practice to fix it in case I missed one) removes underline for button as="a" uses box-sizing: border-box (which maintains previous behavior)

4.23.0

Minor Changes

  • #2832 a7ccf534 Thanks @ALacker! - Update button styling to Bauhaus

    Significant API changes are:

    • Adding colorMode instead of using colorScheme: 'light' | 'dark'
    • Using variants of primary/secondary/glass/ghost instead of primary/secondary/tertiary

Patch Changes

  • Updated dependencies [a7ccf534]:
    • @hover/blueprint-theme@3.18.0

4.22.0

Minor Changes

  • #2831 3c9698d8 Thanks @jrolfs! - Add new Bauhaus semantic color alias, for example:


    <system.button
    background="interactive.primary"
    color="interactive.primaryInvert"
    />

Patch Changes

  • Updated dependencies [3c9698d8]:
    • @hover/blueprint-theme@3.17.0

4.21.0

Minor Changes

  • #2821 fca506cf Thanks @tricia-work! - Add Accordion and AccordionItem components


    <Accordion>
    <AccordionItem
    headerContent={
    <Heading noMargin size="small">
    Simple item
    </Heading>
    }
    >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
    </AccordionItem>
    <AccordionItem
    headerContent={
    <Heading noMargin size="large">
    Custom item
    </Heading>
    }
    iconType="plus-minus"
    >
    <Box
    backgroundColor="neutral.100"
    borderRadius="200"
    mt="400"
    padding="200"
    >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
    </Box>
    </AccordionItem>
    </Accordion>

Patch Changes

  • Updated dependencies [ce576561]:
    • @hover/tokens-typography@6.6.1
    • @hover/blueprint-theme@3.16.1

4.20.0

Minor Changes

  • #2809 98734ac4 Thanks @aculkin! - Update the sheet component to respect the full spectrum of size and variant options

Patch Changes

4.19.1

Patch Changes

  • #2807 36f4245f Thanks @jrolfs! - Fix broken manual release that went out for @hover/blueprint@1.58 along the bumped depedencies (@hover/blueprint-theme and @hover/chakra-theme).
  • Updated dependencies [36f4245f]:
    • @hover/blueprint-theme@3.15.1

4.19.0

Minor Changes

  • #2787 2588c506 Thanks @jrolfs! - Theme TextInput and Select for Bauhaus and update Select to support a properly styled placeholder

Patch Changes

  • Updated dependencies [2588c506]:
    • @hover/blueprint-theme@3.15.0

4.18.0

Minor Changes

Patch Changes

  • Updated dependencies [ae7c621c]:
    • @hover/blueprint-theme@3.14.0

4.17.0

Minor Changes

Patch Changes

4.16.2

Patch Changes

4.16.1

Patch Changes

  • #2760 7866f580 Thanks @jrolfs! - Make accessing colors using the legacy theme structure (e.g: colors.primary500) instead of the current nested structure (e.g: colors.primary[500]) consistent when using the Bauhaus theme (as well as the /next theme for good measure).

    In the next major version, we should consider removing the legacy structure altogether to reduce confusion, but this prevents a far worse version of confusion where a developer would get the legacy color despite accessing useTheme() within DesignSystemProvider (Bauhuas) or NextProvider when they access the color using the old theme structure.

  • Updated dependencies [7866f580]:

    • @hover/blueprint-theme@3.12.1

4.16.0

Minor Changes

Patch Changes

4.15.0

Minor Changes

Patch Changes

  • Updated dependencies [f915ed4b]:
    • @hover/blueprint-theme@3.11.0

4.14.1

Patch Changes

  • #2734 4f36119e Thanks @jrolfs! - Fix mispelled bauhaus entry in the files field of the package.json for @hover/tokens-typography. This fixes import errors when trying to import the /bauhaus tokens.
  • Updated dependencies [4f36119e]:
    • @hover/tokens-typography@6.5.1
    • @hover/blueprint-theme@3.10.1

4.14.0

Minor Changes

Patch Changes

4.13.0

Minor Changes

  • #2719 2fcdb519 Thanks @aculkin! - Add a "full" size option to the sheet component which allows it to take up the full height of the viewport instead of be responsive to its content.

4.12.0

Minor Changes

Patch Changes

  • #2715 603da62e Thanks @jrolfs! - Reset native browser styles on the following components:

    • Breadcrumb - remove margin and padding from items
    • Kbd - explicitly set border-style to solid
    • Popover - set box-sizing on content to border-box

  • Updated dependencies [51d0d973]:

    • @hover/blueprint-theme@3.9.0
    • @hover/tokens-typography@6.4.4

4.11.1

Patch Changes

  • #2713 d530abf0 Thanks @jrolfs! - Bump @hover/chakra-theme to actually get the fix for using as="a" with the Button component without the text-decoration underline applied.

4.11.0

Minor Changes

  • #2697 ebf4cbad Thanks @jrolfs! - Update the styles for the neutral Link's colorScheme to support the /next theme and add the isUnderlined prop to Link to support adding a persistent underline in cases where the link would otherwise be difficult to discern as a link within other text.

    With the new visual design that the /next theme supports, links are often displayed without the primary color scheme applied. Set colorScheme to neutral to achieve this.


    <Link colorScheme="neutral" href="#">
    Next
    </Link>

    If you need the link to stand out as a call-to-action inline with text of the same color, pass isUnderlined.


    <Body>
    Here's some text with a&nbsp;
    <Link colorScheme="neutral" isUnderlined href="#">
    neutral link
    </Link>&nbsp; in it.
    </Body>

Patch Changes

  • #2701 dda9d003 Thanks @JeuelyFish! - Fix spacing and alignment issue with Next Radio Tile's label and its checkbox, also updates hover color.
  • Updated dependencies [ebf4cbad]:
    • @hover/blueprint-theme@3.8.0

4.10.0

Minor Changes

4.9.1

Patch Changes

  • 3560d519 Thanks @jrolfs! - Add filled variant to Checkbox and Radio type

  • Updated dependencies [3560d519]:

    • @hover/blueprint-theme@3.7.4

4.9.0

Minor Changes

Patch Changes

  • #2678 951508e7 Thanks @jrolfs! - Tweak Toggle (aka **Switch) styles in /next theme

  • #2682 7ed909ec Thanks @jrolfs! - Fix label alignment for Checkbox and Radio in /next theme by applying Capsize (unless alignItems is set to baseline for wrapping labels)

4.8.1

Patch Changes

  • #2674 e2baf219 Thanks @jrolfs! - Bring Capsize metrics for Diatype back closer to the extracted metrics. The previous tweaks overdid it and it turns out the main issue with vertical alignment at this point is our non-standard font-sizes and line-heighta.s

  • #2674 c1132c48 Thanks @jrolfs! - Target Button label with selector that prevents selecting nested span

  • Updated dependencies [e2baf219]:

    • @hover/tokens-typography@6.4.3
    • @hover/blueprint-theme@3.7.3

4.8.0

Minor Changes

  • #2670 a5efd5b4 Thanks @jrolfs! - Fix disabled state for dark mode (colorScheme="light") CheckButton and ToggleButton

  • #2668 e07620dd Thanks @jrolfs! - Add heading text presets that include both Capsize and margin-bottom

Patch Changes

  • #2670 fa99a151 Thanks @jrolfs! - Give selected CheckButton a :hover state (but not CheckRadio since a <input type="radio" /> can't be unchecked by clicking on the same input)

  • #2668 53ca5323 Thanks @jrolfs! - Use /next theme radii token keys for the type in cssVariables.radius() to make sure we support new border radii (the next radii tokens are a superset of the old tokens)

  • Updated dependencies [c526888a, a20db432, a20db432]:

    • @hover/blueprint-theme@3.7.2
    • @hover/tokens-typography@6.4.2

4.7.1

Patch Changes

  • #2665 7e991723 Thanks @jrolfs! - Publish missing assets for @hover/tokens-typography

  • #2665 188329dd Thanks @jrolfs! - Apply Capsize correctly to /next Button when using a responsize size value

  • Updated dependencies [7e991723]:

    • @hover/tokens-typography@6.4.1
    • @hover/blueprint-theme@3.7.1

4.7.0

Minor Changes

  • #2661 3a55c1ca Thanks @jrolfs! - Add textStyles that include typography adjustments for aligning inline text based on the height of capital letters instead of solely line-height (using Capsize metadata tokens added to @hover/tokens-typography and @hover/blueprint-theme).


    import { system } from '@hover/blueprint';
    <system.span textStyle="body500WithCapsize">Capsized text</system.span>;

  • #2661 3a55c1ca Thanks @jrolfs! - Fix heading with margin text styles in /next theme (heading500WithMargin, etc.) to use fixed margins @hover/tokens-typography/next tokens.

  • #2661 ec26c70b Thanks @jrolfs! - Use Capsize adjusted text styles for /next Button theme

Patch Changes

4.6.5

Patch Changes

  • #2662 c21fb137 Thanks @jrolfs! - Upgrade Ramda for compatibility with latest Node versions

  • Updated dependencies [c21fb137]:

    • @hover/blueprint-theme@3.6.2

4.6.4

Patch Changes

  • #2657 9f311f10 Thanks @dezman! - Separate top and right spacing for close X button in Sheet component, reduce right spacing to 400

4.6.3

Patch Changes

  • #2651 eccee628 Thanks @dezman! - Update bottom sheet to have equal top and right spacing (300) on the close button X. Also updated the demo app to have a bottom sheet.

  • #2651 eccee628 Thanks @dezman! - Remove rounded corners from Sheet component, bottom Sheet will now open with hard corners and no border radius.

4.6.2

Patch Changes

  • #2650 d60ff416 Thanks @bfranzen19! - Fix issue in Popover where it might not get the correct font in some cases by specifying font-family in the Popover theme

  • #2645 58a07fe1 Thanks @danielhover! - Fixes issue where sheet container would flow under safari tabs on ipad

4.6.1

Patch Changes

  • d47543f1 Thanks @jrolfs! - One last bump to get the new font to propagate correctly through the transitive dependencies 🤦🏻
  • Updated dependencies [d47543f1]:
    • @hover/blueprint-theme@3.6.1
    • @hover/tokens-typography@6.3.1

4.6.0

Minor Changes

  • 2a7dc00a Thanks @jrolfs! - Switch font from Inter to Diatype in /next theme

4.5.1

Patch Changes

  • #2634 2279dcba Thanks @jrolfs! - Fix selector that prevents Button from displaying a :hover state when disabled

4.5.0

Minor Changes

4.4.0

Minor Changes

Patch Changes

  • Updated dependencies [9d2260b7]:
    • @hover/blueprint-theme@3.5.0

4.3.3

Patch Changes

  • ef79625f Thanks @jrolfs! - Fix typo in new heading line-height

  • Updated dependencies [ef79625f]:

    • @hover/tokens-typography@6.2.2
    • @hover/blueprint-theme@3.4.4

4.3.2

Patch Changes

  • 377f7459 Thanks @jrolfs! - Adjust font-size and line-height for Heading preset 700 to match H3 font style in Figma (essentially we were missing a heading sixze from the original tokens that were provided)
  • Updated dependencies [377f7459]:
    • @hover/tokens-typography@6.2.1
    • @hover/blueprint-theme@3.4.3

4.3.1

Patch Changes

  • a6c22531 Thanks @jrolfs! - Update motion tokens to get firm and soft preset tweaks

  • Updated dependencies [a6c22531]:

    • @hover/blueprint-theme@3.4.2

4.3.0

Minor Changes

4.2.0

Minor Changes

  • #2602 5cca450c Thanks @jrolfs! - Add CheckButton and RadioButton components for representing selections with Button-like components

  • #2602 37f3fb01 Thanks @jrolfs! - Add theme.components.isNext flag for adapting theme conditionally based on applied theme

Patch Changes

4.1.0

Minor Changes

  • #2596 2a635aa8 Thanks @jrolfs! - Include all z-index values in scale exported from @hover/chakra-theme/foundation so they can be accessed statically without relying on theme context

  • #2592 92979fe4 Thanks @jrolfs! - Theme CloseButton in next theme

  • #2592 1a1ba535 Thanks @jrolfs! - Add and theme Sheet component

  • #2597 f2de206d Thanks @jrolfs! - Theme button for /next theme and update API with variant and colorScheme for new theme. Map existing fill values to new variants respectively when the new theme is enabled.

Patch Changes

4.0.0

Major Changes

  • #2587 046ad168 Thanks @jrolfs! - - Remove all Chakra foundation type definitions from Theme type used to type the theme returned from useTheme() and the theme export

    • Remove Chakra foundation tokens for radii, shadows, sizes and space (scales we explicitly provide and want to avoid allowing the default Chakra theme values from being used)

    The remaining Chakra tokens (besides zIndices) will likely be removed in a future release.

Minor Changes

  • #2587 4385115d Thanks @jrolfs! - Add new size tokens available at /next

  • #2587 e304b641 Thanks @jrolfs! - Add new space tokens available at /next

  • #2587 de6f572d Thanks @jrolfs! - Add new border radius tokens available at /next

  • #2587 71fad932 Thanks @jrolfs! - Add border width presets that don't include border color (width400 etc.) so that color can be applied separately:

    Before:


    <Box borderWidth="400" borderStyle="solid" borderColor="neutral.500" />

    After:


    <Box border="width400" borderColor="neutral.500" />

Patch Changes

3.2.0

Minor Changes

Patch Changes

  • #2585 e5f19c18 Thanks @jrolfs! - Fix Popover z-index (set it to popover theme value which is 1500, I'm not sure why the default Chakra theme hard-codes 10)
  • Updated dependencies [a85dd33d]:
    • @hover/blueprint-theme@3.2.0

3.1.0

Minor Changes

Patch Changes

  • Updated dependencies [0c46b22d]:
    • @hover/blueprint-theme@3.1.0

3.0.0

Major Changes

  • #2561 d312e19a Thanks @jrolfs! - Move color helpers from direct exports at the /foundation entrypoint to the colors theme scale.


    import {
    alpha,
    colorValueFor,
    softColorFor,
    colorFor,
    } from '@hover/chakra-theme/foundation';
    export const MyComponentTheme = {
    baseStyle: {
    background: alpha(0.5, 'primary.800'),
    },
    };


    export const MyComponentTheme = {
    baseStyle: ({ theme }) => ({
    background: theme.colors.alpha(0.5, 'primary.800'),
    }),
    };

    BREAKING CHANGE: color helpers like alpha etc. now must be accessed from the theme.

Minor Changes

  • #2561 96247010 Thanks @jrolfs! - Decouple shadow theme definitions from color tokens so colors can be changed at the theme level and will be reflected in shadows.

  • #2561 90dab173 Thanks @jrolfs! - Decouple border presets from color tokens

Patch Changes

  • 58580329 Thanks @jrolfs! - Fix z-index regression in Modal, Dialog, and Drawer components that was introduced when we removed the default Chakra theme from those components.
  • Updated dependencies [d312e19a, 659b9994, 90dab173]:
    • @hover/blueprint-theme@3.0.0

2.3.2

Patch Changes

2.3.1

Patch Changes

  • c3d40912 Thanks @jrolfs! - Bump typography tokens to fix missing /next entrypoint issue

  • Updated dependencies [987a249b, c3d40912]:

    • @hover/tokens-typography@6.1.0
    • @hover/blueprint-theme@2.0.1

2.3.0

Minor Changes

  • #2542 70fb7182 Thanks @jrolfs! - Start making new visual design available at /next entrypoint starting with typography

  • #2542 fadf264b Thanks @jrolfs! - Remove dependency on default theme for Popover and remove content borders (they can be applied via bodyProps etc. but weren't easily removed when defined in the theme)

  • #2542 4e264f1d Thanks @jrolfs! - Remove legacy typography (newTypography has been the default on BlueprintProvider for a long time now and setting it to false now has no effect)

Patch Changes

  • #2542 62aaef19 Thanks @jrolfs! - Ensure tab content in Tabs is vertically centered in the primary variant by offsetting the indicator border thickness with padding-top in the horizontal orientation.

  • #2542 6d973d89 Thanks @jrolfs! - Apply Checkbox color at the container level so that it can be overridden via the color style prop

  • #2542 e1e8cae3 Thanks @jrolfs! - Fix type on variable helper to include alpha palettes

  • #2542 1fff0587 Thanks @jrolfs! - Fix icon spacing and sizing in Dropdown when using a responsive value for size

  • Updated dependencies [64cb0039, 64cb0039, 22389a10, 22389a10]:

    • @hover/tokens-typography@6.0.0
    • @hover/blueprint-theme@2.0.0

2.2.0

Minor Changes

  • #2507 cdf3210b Thanks @jrolfs! - Add support for auto size to Modal and Dialog components that allows the modal content to determine the size of the modal container

Patch Changes

  • #2507 85834cff Thanks @jrolfs! - Fix overflow in Modal and Dialog components when using full size

  • Updated dependencies [cdf3210b]:

    • @hover/blueprint-theme@1.6.0

2.1.1

Patch Changes

  • 867c7cb0 Thanks @jrolfs! - Improve Progress indeterminate state and add short CSS transition for value changes

2.1.0

Minor Changes

2.0.0

Major Changes

  • #2481 17ef417c Thanks @jrolfs! - Prevent theme from inheriting Chakra's default breakpoints

    ⚠️ BREAKING CHANGE: we never officially supported or promoted using the default breakpoints from Chakra's theme, but there's a small chance some code was relying one them unknowingly (for example, array-style responsive style props).

Patch Changes

  • Updated dependencies [37aafd59]:
    • @hover/utilities@0.19.0
    • @hover/blueprint-theme@1.5.2

1.6.2

Patch Changes

  • Updated dependencies [df27a982, df27a982]:
    • @hover/utilities@0.18.0
    • @hover/blueprint-theme@1.5.1

1.6.1

Patch Changes

  • e1027ef7 Thanks @jrolfs! - Export colorValueFor helper for getting the raw value of a color token

1.6.0

Minor Changes

Patch Changes

  • f5ae27fe Thanks @jrolfs! - Add @chakra-ui/styled-system as a dependency to satisfy peer dependency from @chakra-ui/theme-tools

  • #2472 a92aff37 Thanks @jrolfs! - Explicitly set padding to 0 on Link component to override any default styling applied when the as prop is set to something like button

  • Updated dependencies [014ed1b2]:

    • @hover/utilities@0.17.1

1.5.1

Patch Changes

1.5.0

Minor Changes

Patch Changes

1.4.1

Patch Changes

1.4.0

Minor Changes

Patch Changes

  • #2354 5b800830 Thanks @jrolfs! - Fix selection bug in MenuItemOption when used as type="checkbox".

    (upgrade @chakra-ui/react to 2.3.1 to get fix released in @chakra-ui/menu@2.0.13)

  • #2371 71c6a22b Thanks @jrolfs! - Fix neutral background color of minimal variant for CloseButton

  • #2371 dab9bf16 Thanks @jrolfs! - Adjust font sizing slightly to make Code work better inline with Body text

  • Updated dependencies [c909cea0, 1462bf92]:

    • @hover/blueprint-theme@1.4.0

1.3.2

Patch Changes

  • #2353 9743158f Thanks @jrolfs! - Fix @chakra-ui/* pinning to avoid duplicate dependencies

  • Updated dependencies [021c7d91]:

    • @hover/utilities@0.16.1

1.3.1

Patch Changes

  • #2320 febfba7a Thanks @jrolfs! - Pin Chakra dependencies. We've run into too many compatibility issues with minor Chakra releases.

  • Updated dependencies [e3fc88bc]:

    • @hover/utilities@0.16.0
    • @hover/blueprint-theme@1.3.1

1.3.0

Minor Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

  • #2254 92bde7bb Thanks @jrolfs! - Add theme for new Dropdown component and new /extra entrypoint for component themes that aren't part of the core component set

  • #2254 e27d7469 Thanks @jrolfs! - Add alpha and transition style helpers (moved from @hover/blueprint)

  • #2254 1af88d7d Thanks @jrolfs! - Add menu variant to List component with similar styling to the list from Menu

  • #2254 9126573e Thanks @jrolfs! - Add soft variant to CloseButton component

  • #2254 90e36d61 Thanks @jrolfs! - Add soft variant to Tag

  • #2254 4aa6819e Thanks @jrolfs! - Expose color type guards (isColor, isBrandColorScheme, isColorScheme, isNeutralScheme)

Patch Changes

1.1.4

Patch Changes

  • edf841d9 Thanks @jrolfs! - Remove error-prone dependency on default Chakra theme in Tooltip theme

1.1.3

Patch Changes

1.1.2

Patch Changes

  • #2182 ecb00654 Thanks @jrolfs! - Fix some styling issues in Tabs with Chakra 2 by removing default Chakra theme styling altogether for tabs

1.1.1

Patch Changes

1.1.0

Patch Changes

  • Updated dependencies [479db9f3]:
    • @hover/blueprint-theme@1.1.0

1.0.0

Major Changes

  • #1916 38e4d7ea Thanks @jrolfs! - Simplify variants for Button a ton so that now variant maps directly to what used to be fill (solid, outline, minimal) instead of a combination of fill and shape (solid-box, solid-square, ... , outline-box, etc.)

    BREAKING CHANGE: Button now defaults to a border-radius of 300, if you want to implement the pill shape, you'll need to do that manually (like we do now in Button in @hover/blueprint)

  • #1916 14fb2eeb Thanks @jrolfs! - Lock down colorScheme type to supported system color schemes and rename one-off neutralLight and neutralDark schemes used in Tooltip and Tag to light and dark (and include them as standard system themes)

    BREAKING CHANGE: neutralLight and neutralDark have been renamed to light and dark for Tag and Tooltip

  • #1916 35a40aa2 Thanks @jrolfs! - Specify style prop and component theme types using feature added in #5579. This improves the TypeScript experience of @hover/chakra-theme (and @hover/blueprint) considerably and removes the need to use @chakra-ui/cli to get proper type definitions.

    BREAKING CHANGE: component theming props (size, variant, and colorScheme) are now strictly type-checked and invalid values will cause type errors.

Minor Changes

  • #1916 8115aaa9 Thanks @jrolfs! - Add helpers for creating CSS variables that reference the variables that Chakra creates from our theme foundation (tokens).

    ⚠️ Chakra automatically outputs these variables when style props are used, so they're only necessary when the value needs to be referenced for some reason


    import { calc } from '@chakra-ui/theme-tools';
    import { variables } from '@hover/chakra-theme';
    variables.color('primary.100').reference; // `var(--hover-colors-primary-100)`
    calc.multiply(variables.space(100), -1); // `calc(var(--hover-space-100) * -1)`

  • #1916 1041ba22 Thanks @jrolfs! - Support negative space tokens (mostly for consistency with Chakra, but negative margin might come in handy in some legitimate use cases?)

  • #1916 1c6393f5 Thanks @jrolfs! - Add Color union type (primary.100, primary.200, etc.)

  • #1916 14175551 Thanks @jrolfs! - Add BreakpointValue helper type for specifying a responsive style prop that adheres strictly to our system breakpoints

Patch Changes

  • #1916 a9f5dcfe Thanks @jrolfs! - Fix :focus-visible state for Link component for Chakra 2+ (was receiving overlapping default shadow from Chakra)

  • #1916 fca37074 Thanks @jrolfs! - Fix dimensions of Switch for Chakra latest version of Chakra.

  • #1916 3e945461 Thanks @jrolfs! - Make disabled secondary tab color a bit darker (probably still a contrast issue, but we don't really have a suitable neutral color right now)

  • #1916 a57339cd Thanks @jrolfs! - Fix Color type to exclude 0 hue from all scales but neutral

  • #1916 3844ff2b Thanks @jrolfs! - Add missing part to Checkbox theme (fixes broken TileCheckbox with Chakra 2.0)

  • #1916 bacded8d Thanks @jrolfs! - Fix text alignment in Tag in Chakra 2.0 by applying line-height to label theme part

  • Updated dependencies [1639b45c, 14175551, 8d96471a, 2cfe272c, 14fb2eeb]:

    • @hover/blueprint-theme@1.0.0

1.0.0-next.1

Major Changes

  • #1916 20c010ec Thanks @jrolfs! - Lock down colorScheme type to supported system color schemes and rename one-off neutralLight and neutralDark schemes used in Tooltip and Tag to light and dark (and include them as standard system themes)

    BREAKING CHANGE: neutralLight and neutralDark have been renamed to light and dark for Tag and Tooltip

  • #1916 44ba70f2 Thanks @jrolfs! - Specify style prop and component theme types using feature added in #5579. This improves the TypeScript experience of @hover/chakra-theme (and @hover/blueprint) considerably and removes the need to use @chakra-ui/cli to get proper type definitions.

    BREAKING CHANGE: component theming props (size, variant, and colorScheme) are now strictly type-checked and invalid values will cause type errors.

Minor Changes

  • #1916 45558e0b Thanks @jrolfs! - Support negative space tokens (mostly for consistency with Chakra, but negative margin might come in handy in some legitimate use cases?)

Patch Changes

1.0.0-next.0

Major Changes

  • #2089 3834bf50 Thanks @jrolfs! - Simplify variants for Button a ton so that now variant maps directly to what used to be fill (solid, outline, minimal) instead of a combination of fill and shape (solid-box, solid-square, ... , outline-box, etc.)

    BREAKING CHANGE: Button now defaults to a border-radius of 300, if you want to implement the pill shape, you'll need to do that manually (like we do now in Button in @hover/blueprint)

Minor Changes

  • #2089 33fedf38 Thanks @jrolfs! - Add helpers for creating CSS variables that reference the variables that Chakra creates from our theme foundation (tokens).

    ⚠️ Chakra automatically outputs these variables when style props are used, so they're only necessary when the value needs to be referenced for some reason


    import { calc } from '@chakra-ui/theme-tools';
    import { variables } from '@hover/chakra-theme';
    variables.color('primary.100').reference; // `var(--hover-colors-primary-100)`
    calc.multiply(variables.space(100), -1); // `calc(var(--hover-space-100) * -1)`

Patch Changes

  • #2089 f54c07e8 Thanks @jrolfs! - Fix :focus-visible state for Link component for Chakra 2+ (was receiving overlapping default shadow from Chakra)
  • #2089 1dbac854 Thanks @jrolfs! - Make disabled secondary tab color a bit darker (probably still a contrast issue, but we don't really have a suitable neutral color right now)
  • #2089 3a1a03f3 Thanks @jrolfs! - Add missing part to Checkbox theme (fixes broken TileCheckbox with Chakra 2.0)
  • #2089 ce41a6b4 Thanks @jrolfs! - Fix text alignment in Tag in Chakra 2.0 by applying line-height to label theme part
  • Updated dependencies [ba0c6522, b52324b8]:
    • @hover/blueprint-theme@1.0.0-next.0

0.56.1

Patch Changes

  • Updated dependencies [e74fcd2d]:
    • @hover/utilities@0.14.0

0.56.0

Minor Changes

Patch Changes

0.55.2

Patch Changes

0.55.1

Patch Changes

  • Updated dependencies []:
    • @hover/blueprint-theme@0.55.1
    • @hover/tokens-typography@5.1.2

0.55.0

Minor Changes

  • 38dc7507 Thanks @jrolfs! - Use smaller font size in Badge on account of the capitalization and to center text vertically

0.54.3

Patch Changes

0.54.2

Patch Changes

  • #1973 608a0ea3 Thanks @jrolfs! - Fix issue in Heading that caused isLight to use the incorrect color

0.54.1

Patch Changes

  • Updated dependencies [9924631c]:
    • @hover/utilities@0.12.0

0.54.0

Minor Changes

Patch Changes

  • #1925 d0b85e8e Thanks @jrolfs! - Override CSS reset that applies appearance: button to tabs (which made the tabs look "rounded" in mobile Safari etc.)

  • #1925 524324e5 Thanks @jrolfs! - Fix arrow alignment in Tooltip for left/right placements (a bit of a hack until we figure out exactly what's going on there)

  • Updated dependencies [d2e1adc7, 0dae11e2, ed69a883]:

    • @hover/utilities@0.11.0
    • @hover/blueprint-theme@0.54.0

0.53.0

Minor Changes

  • #1914 e9342852 Thanks @jrolfs! - Add primary variant to Tabs for primary navigation (header) use case

0.52.0

Minor Changes

  • #1871 6351e8fc Thanks @jrolfs! - Add brandPurple palette

    ⚠️ The brandPurple palette should be considered unstable and may be removed or modified outside of Semantic Version

  • #1871 be067b6c Thanks @jrolfs! - Add quote variant to Alert

Patch Changes

0.51.2

Patch Changes

  • a0cf6389 Thanks @jrolfs! - Revert this change:

    Update internal <input /> element styling in Radio, Checkbox, TileRadio, TileCheckbox, and Toggle such that e2e testing solutions such as Cypress and Playwright should be able to interact with them without passing the force option

    It was a red herring for Cypress failures, the actual issue in this particular case was that Chakra does not pass props (i.e: data-test-id) to the internal input element for these components.

    I may revisit this change, as the CSS being applied in the reverted changes is necessary for Playwright to interact with said inputs via check(), however I want to investigate the best approach before moving forward with any modifications to the default Chakra CSS. The approach that is being reverted here actually causes visibility tests to fail on account of using opacity to hide the input.

0.51.1

Patch Changes

  • #1818 163131e7 Thanks @jrolfs! - Update internal <input /> element styling in Radio, Checkbox, TileRadio, TileCheckbox, and Toggle such that e2e testing solutions such as Cypress and Playwright should be able to interact with them without passing the force option

0.51.0

Minor Changes

  • #1796 f7e0168b Thanks @jrolfs! - Add subtle-tile variant to Checkbox and Radio

  • #1796 dae25726 Thanks @jrolfs! - Set font weight and family on container (label) of Checkbox, Radio, TileCheckbox, and TileRadio so it can be overridden

Patch Changes

  • Updated dependencies [686feed1]:
    • @hover/utilities@0.10.0

0.50.0

Minor Changes

Patch Changes

  • #1766 7e3ca9a3 Thanks @jrolfs! - Fix missing lightAlpha.XXX and darkAlpha.XXX. They were available as legacy lightAlphaXXX and darkAlphaXXX, but those are going away soon.

  • #1766 a6d92830 Thanks @jrolfs! - Use correct color for dividers in Menu

  • #1784 fa16a549 Thanks @jrolfs! - Default display for Icon to block

  • #1785 578970ca Thanks @jrolfs! - Fix sizing and spacing of Tag component

  • Updated dependencies [4d442c37]:

    • @hover/blueprint-theme@0.50.0

0.49.0

Patch Changes

  • Updated dependencies [bf2aea67]:
    • @hover/blueprint-theme@0.49.0

0.48.0

Patch Changes

0.47.4

Patch Changes

  • Updated dependencies [95ae6d8f]:
    • @hover/utilities@0.9.0

0.47.3

Patch Changes

  • #1687 cc149dc5 Thanks @jrolfs! - Fix visual issue where an outline would flash when a Button with minimal fill that has :focus (not :focus-visible) is blurred

    BeforeAfter
    beforeafter

  • #1694 e50bb07c Thanks @jrolfs! - Fix spacing between form input and validation error message in Field

  • Updated dependencies [026ad6bb]:

    • @hover/utilities@0.8.0

0.47.2

Patch Changes

0.47.1

Patch Changes

  • #1618 7e5f8333 Thanks @richardhover! - Fix Button disabled state to be the correct color and consistent across browsers

    BrowserBeforeAfter
    Firefoxbefore--firefoxbefore--firefox
    Chromebefore--chromeafter--chrome
    Safaribefore--safariafter--safari

0.47.0

Minor Changes

Patch Changes

  • #1584 f38c1a82 Thanks @jrolfs! - Fix super weird issue where the Slider sometimes gets rendered without any dimensions (and is therefore invisible) due to a weird CSS variable issue

  • #1582 aae0b35a Thanks @jrolfs! - Add missing peer dependency for @chakra-ui/theme-tools (@chakra-ui/system)

  • Updated dependencies [1e8216e4]:

    • @hover/blueprint-theme@0.47.0

0.46.0

Minor Changes

Patch Changes

  • #1576 d49a48a3 Thanks @jrolfs! - Fix distance100 shadow to include top shadow bleed to create definition on the top of containers
  • Updated dependencies [d49a48a3, eec255f4]:
    • @hover/blueprint-theme@0.46.0

0.45.2

Patch Changes

  • 0a8581cd Thanks @jrolfs! - Transition color in brand-specific button

  • 060e5012 Thanks @jrolfs! - Default white-space to nowrap in brand-specific button

  • dd077b64 Thanks @jrolfs! - Update state colors for neutral color scheme in Link and brand-specific button's minimal variant to be white with primary hover/active states as the gray neutral color scheme doesn't actually have any valid usecases or really make sense at all.

0.45.1

Patch Changes

  • d600985b Thanks @jrolfs! - Fix typography in minimal variant of brand-specific Button

  • 7d2ef537 Thanks @jrolfs! - Add minimal variant to brand-specific Button

0.45.0

Minor Changes

  • 02fcb473 Thanks @jrolfs! - Add special /brand entrypoint with custom components intended for us in marketing collateral as opposed to product. Right now this includes:
    • A separate Button component that reads it's theme from BrandButton
    • "Decorations," intended to be used with the aforementioned Button, and are interactive icons

Patch Changes

  • Updated dependencies [02fcb473]:
    • @hover/blueprint-theme@0.45.0

0.44.0

Minor Changes

Patch Changes

0.42.1

Patch Changes

  • feffa1f7 Thanks @jrolfs! - Use currentColor for textDecorationColor in underline variant of Link

0.42.0

Minor Changes

0.41.0

Minor Changes

  • #1543 86b2cf1c Thanks @jrolfs! - Add font weight variants to Heading (light) and Text (semiBold and bold)

  • ed432a7f Thanks @jrolfs! - Tweak divider color and heading style in Menu navigation variant

0.40.0

Minor Changes

  • 46e74794 Thanks @jrolfs! - Add toast variant for when Alert is display as a toast

0.39.0

Patch Changes

0.38.5

Patch Changes

  • #1520 346b7f6a Thanks @cpalmatier! - Changes default body weight to 400 from 300 in new typography

  • Updated dependencies [346b7f6a]:

    • @hover/tokens-typography@5.1.1

0.38.4

Patch Changes

  • #1512 7ee110c3 Thanks @jrolfs! - Set position: relative on list items to create position context for absolutely positioned bullets

  • #1499 ab05bc57 Thanks @jrolfs! - Configure all font weights using system aliases instead of Chakra aliases

  • Updated dependencies [cf53238a, 42d7c954]:

    • @hover/tokens-typography@5.1.0

0.38.3

Patch Changes

  • #1491 14dc9596 Thanks @jrolfs! - Fix Link styling to not look disabled when as prop as passed (omitting href should make link look disabled unless it's being rendered as a button etc.)

0.38.2

Patch Changes

  • Updated dependencies [b2a3a71b]:
    • @hover/tokens-typography@5.0.0
    • @hover/blueprint-theme@0.38.2

0.38.1

Patch Changes

  • #1487 69e16ba8 Thanks @jrolfs! - Only display visual focus indicator for :focus-visible on Link component, don't highlight Links without href

  • #1487 e749afb3 Thanks @jrolfs! - Fix background color flash when Checkbox is initially rendered

  • Updated dependencies [99f233c9]:

    • @hover/utilities@0.7.0

0.38.0

Minor Changes

Patch Changes

  • #1435 73e57e59 Thanks @jrolfs! - Tweak focus indicator and hover state for Link component

  • Updated dependencies [8fda3f25]:

    • @hover/blueprint-theme@0.38.0

0.37.0

Minor Changes

Patch Changes

  • Updated dependencies [e34262f6]:
    • @hover/blueprint-theme@0.37.0

0.36.0

Minor Changes

Patch Changes

  • #1424 0bd525ef Thanks @jrolfs! - Add missing brandTan color scheme to Badge and Code

  • #1426 22139688 Thanks @jrolfs! - Fix layout shift caused by border-width changing when the Button component receives focus

    BeforeAfter
    button--layout-shiftbutton--layout-shift_fixed

  • #1423 69ba6923 Thanks @jrolfs! - Specify icon sizing in @hover/chakra-theme, fix sizing/spacing for icon in Alert with title

  • Updated dependencies [4aa0adeb, 54e8adb5]:

    • @hover/blueprint-theme@0.36.0
    • @hover/tokens-typography@4.1.0

0.35.1

Patch Changes

0.35.0

Minor Changes

Patch Changes

  • Updated dependencies [31829249]:
    • @hover/blueprint-theme@0.35.0

0.34.0

Minor Changes

Patch Changes

  • #1409 dfbf0dd0 Thanks @jrolfs! - Fix styling for isDisabled + isChecked state of Radio and TileRadio

  • Updated dependencies [93b2efe5]:

    • @hover/blueprint-theme@0.34.0

0.33.0

Minor Changes

Patch Changes

  • Updated dependencies [6a016aa2]:
    • @hover/utilities@0.5.0

0.32.0

Minor Changes

  • #1394 4acb1893 Thanks @jrolfs! - Add display variant and sizes (display200 etc.) to Heading component

    Display Heading Screenshot

Patch Changes

0.31.1

Patch Changes

  • #1392 612840d0 Thanks @jrolfs! - Default Checkbox and Radio control alignment to center and require alignItems to be set to baseline in order to align the control with the first line of the label when it wraps.
  • Updated dependencies [2d966af6]:
    • @hover/utilities@0.4.0

0.31.0

Minor Changes

  • #1355 eeb54a44 Thanks @jrolfs! - - Add small and large sizes for Checkbox and Radio

    • Align Checkbox and Radio controls properly when label text wraps

  • #1369 27619066 Thanks @cpalmatier! - Change Alert and Toast background colors to x.100 color tokens and modify Close Button default backgrounds accordingly.

Patch Changes

0.30.1

Patch Changes

  • Updated dependencies [4c9b2c4d]:
    • @hover/tokens-typography@4.0.0
    • @hover/blueprint-theme@0.30.1

0.30.0

Minor Changes

Patch Changes

0.29.0

Minor Changes

  • #1231 d1ea58c8 Thanks @jrolfs! - Add new brand color palettes and update success and danger palettes for use alongside new brand colors.

Patch Changes

  • Updated dependencies [d1ea58c8]:
    • @hover/blueprint-theme@0.29.0
    • @hover/tokens-typography@3.2.1

0.28.0

Minor Changes

  • c6141b34 Thanks @jrolfs! - Add default focus helper (resetFocus) and focus presets (noFocus and subtleFocus). They are available from the /foundation entrypoint."

  • c6141b34 Thanks @jrolfs! - Theme `Drawer` component

Patch Changes

  • Updated dependencies []:
    • @hover/blueprint-theme@0.28.0

0.26.2

Patch Changes

0.26.1

Patch Changes

0.26.0

Minor Changes

Patch Changes

0.25.0

Minor Changes

Patch Changes

  • #1214 e46b1467 Thanks @jrolfs! - Expose Heading and Text presets on /foundation entrypoint

  • Updated dependencies [a93e9736]:

    • @hover/blueprint-theme@0.25.0

0.24.0

Minor Changes

0.23.1

Patch Changes

0.23.0

Minor Changes

  • 6d47cae6 Thanks @jrolfs! - Apply default Body size via sizes (necessary for responsive size to work properly in Body in @hover/blueprint)

0.22.0

Minor Changes

0.21.0

Minor Changes

Patch Changes

  • Updated dependencies [72b6726b, dc61c816]:
    • @hover/blueprint-theme@0.21.0
    • @hover/tokens-typography@3.2.0

0.20.0

Minor Changes

Patch Changes

  • Updated dependencies [515fe97]:
    • @hover/blueprint-theme@0.20.0

0.19.1

Patch Changes

0.19.0

Patch Changes

  • Updated dependencies [78c8d5c]:
    • @hover/blueprint-theme@0.19.0

0.18.0

Minor Changes

  • #1079 b0e94fc Thanks @jrolfs! - Prefix numeric breakpoint keys, i.e: { 100: string } → { width100: string }

    Chakra convert breakpoints to a "hybrid" array + object structure and numeric keys are treated as array indices in that case (even though they are actually string, e.g: '100'). This was causing broken media queries because Chakra relies on sorting the array in order to apply breakpoints in the correct order.

    🚨 Unfortunately this is technically a breaking change for responsive style props, but the media query behavior is super broken due to the above issue as it stands now. I also don't think there is much usage of the numeric breakpoint scale.

    • Use base instead of default for the base media query
    • Use the new versions of the numeric scale (e.g: 500 → width500)

    <Heading size={{ default: 400, desktop: 500, 500: 700 }}>Heading</Heading>


    <Heading size={{ base: 400, desktop: 500, width500: 700 }}>Heading</Heading>

  • #1079 4300e30 Thanks @jrolfs! - Start theming Table component (it's a work in progress)

0.17.0

Patch Changes

  • Updated dependencies [b2e5b34, 92e9951]:
    • @hover/blueprint-theme@0.17.0
    • @hover/tokens-typography@3.1.0

0.16.0

Minor Changes

0.15.1

Patch Changes

  • #1044 fd2d371 Thanks @jrolfs! - Remove extraneous direct Chakra package dependencies in favor of the peerDependency on @chakra-ui/react

0.15.0

Minor Changes

Patch Changes

  • #1038 1dd7094 Thanks @glindelien! - Updated Tooltip API to use colorScheme instead of colorMode.

  • Updated dependencies [dded2f1]:

    • @hover/tokens-typography@3.0.0
    • @hover/blueprint-theme@0.15.0

0.14.0

Minor Changes

  • #1012 b099858 Thanks @jrolfs! - Expose theme foundations on foundations/ entrypoint:


    import { motion } from '@hover/chakra-theme/foundation';

0.13.0

Minor Changes

Patch Changes

  • #1003 e6708e5 Thanks @jrolfs! - Ensure Checkbox, Radio, Select, and Input render with the default size when an unsupported size is provided

0.12.0

Minor Changes

  • #962 1a12f7d Thanks @jrolfs! - Theme Checkbox component

    Note: this currently depends on the custom icon rendered in the Checkbox component in @hover/blueprint.

  • #962 1a12f7d Thanks @jrolfs! - Theme Checkbox component

  • #962 463c986 Thanks @jrolfs! - Add borderWidths foundations scale, this allows us to set the borderWidth style prop independently of border and still use a preset:


    <Box borderWidth="500" />

  • #976 4367f25 Thanks @sygessese! - Theme Radio component

  • #976 8d204a0 Thanks @sygessese! - Fix Checkbox label color for invalid state

Patch Changes

  • #962 459ddb0 Thanks @jrolfs! - Update focus border preset to use correct color (primary.700)

  • Updated dependencies [b77a8db, 459ddb0, 463c986]:

    • @hover/blueprint-theme@0.12.0
    • @hover/tokens-typography@2.2.3

0.11.0

Minor Changes

Patch Changes

  • #948 92effdc Thanks @jrolfs! - Fix theme for Select and Input by omitting them from the default Chakra theme before extending it.

    There were a handful of styles in the default theme that were a pain to override, so this is also an escape hatch for any future components that are easier to just theme from scratch.

  • #948 9e2e6cc Thanks @jrolfs! - Fix merge behavior when merging components styling with default Chakra theme

  • Updated dependencies [15cf2c2]:

    • @hover/blueprint-theme@0.11.0

0.10.0

Patch Changes

  • Updated dependencies [ae56b8f]:
    • @hover/blueprint-theme@0.10.0

0.9.1

Patch Changes

  • a7b1ce7 Thanks @jrolfs! - Remove default global styles applied with theme

0.9.1-next.0

Patch Changes

0.9.0

Minor Changes

  • #867 58a1498 Thanks @jrolfs! - Add sizes tokens to foundation, including values for 0.5 and 1 which fixes inconsistent fraction behavior (e.g: width={1} or width={0.5})

Patch Changes

  • Updated dependencies [58a1498]:
    • @hover/blueprint-theme@0.8.0

0.8.0

Minor Changes

  • #863 93adc89 Thanks @jrolfs! - Update color tokens dependency (preserving backwards compatability by aliasing neutral000 to neutral0)

Patch Changes

  • Updated dependencies [3116fe0, 93adc89]:
    • @hover/tokens-typography@2.2.1
    • @hover/blueprint-theme@0.7.0

0.7.0

Minor Changes

  • #860 5bd6955 Thanks @jrolfs! - Make colors backwards compatible (i.e: support both primary500 as well as Chakra-style primary.500)

Patch Changes

  • Updated dependencies []:
    • @hover/blueprint-theme@0.6.1

0.6.0

Minor Changes

0.5.3

Patch Changes

  • Updated dependencies [d210010, acbdc6d, 3717877]:
    • @hover/blueprint-theme@0.6.0
    • @hover/tokens-typography@2.2.0

0.5.2

Patch Changes

0.5.1

Patch Changes

0.5.0

Minor Changes

Patch Changes

0.4.0

Minor Changes

  • #797 aa1a7e1 Thanks @jrolfs! - 1. Add more "foundation" to the theme:

    • Radii

    • Shadows

    • Space

    • Typography

    1. Theme typography components (Heading and Text).

0.3.0

Minor Changes

  • #793 531cae8 Thanks @jrolfs! - - Apply theme types to Emotion's built-in theme
    • Export Theme type

0.2.0

Minor Changes

  • #785 bb5c852 Thanks @jrolfs! - Add support for all ChakraProvider props and default resetCSS to false

Patch Changes

Copyright © 2024 Hover Inc. All Rights Reserved.