@intility/bifrost-css/CHANGELOG.md

# @intility/bifrost-css

## 6.5.2

### Patch Changes

- c1121d3: Changes to `.bf-label-feedback`:
  - No longer has `text-align: right`.
  - Support `.bfc-*` color classes by lowering specificity.

## 6.5.1 - 2025-11-27

### Patch Changes

- 76b01ab: - Add `state="alert"` prop to `<Checkbox>` components:
  - `<Checkbox>`
  - `<CheckboxCard>`
  - `<Radio>`
  - `<RadioCard>`
  - `<Switch>`
  - `<SwitchCard>`
  - `<Checkbox indeterminate>` now uses theme color
- fd58f73: fix rendering issues in firefox with .bf-break-word
- 036fd40: Update `.bf-tabs` and `.bf-tab` to support descendant `.bf-badge`.

## 6.5.0 - 2025-11-20

### Minor Changes

- a4c8f66: Reworked `<Nav.Item>`:
  - Now uses flexbox internally - hopefully we didn't break anything (let us know!)
  - Centered icons properly this time maybe.
  - New `external` prop displays an arrow equivalent to `<Box.Arrow external>` #480
  - The `name` prop of `<Nav.Group>` reworked slightly to behave the same for collapsed
    and non-collapsed sidebar.
- 0100f2c: Add new `state` prop for `<Dropdown.Item>`:
  - `"default"`
  - `"alert"`
  - `"success"`
  - `"warning"`
  - `"inactive"`

## 6.4.1 - 2025-11-07

### Patch Changes

- 4fc3607: Fix: Changed font-size for `.bf-nav-header` from small (12px) to medium (14px). #489

## 6.4.0 - 2025-10-22

### Minor Changes

- 4ec68a5: Some visual and prop updates to tabs, to make it easier to insert into a section. Related to: #87 and #16
  - Added `paddingInline` prop for `<Tabs>`
  - Added `padding` prop for `<Tabs.Item>`
  - `<Tabs>` height changed to match `<Section.Header>`

  #### Basic tabs
  - Changed padding for `<Tabs.Item>`
  - Added gap between each `<Tabs.Item>` (from `0px` to `16px`)

  #### Styled tabs
  - Changed padding for `<Tabs.Item>`

- cbd329a: New prop `loading` for `<ProgressBar>` which adds animated loading stripes

## 6.3.2 - 2025-10-14

### Patch Changes

- 75be909: Fix ellipsis tooltip not working on buttons and tags by adding `pointer-events: none` to the ::before pseudo-element

## 6.3.1 - 2025-10-08

### Patch Changes

- d4ee37c: Changed for progress bar:
  - `.bf-progressbar` bg changed from `theme-c-2` to `base`
  - `.bf-progressbar-progress` bg changed from `theme` to `base-c-theme`
  - Disabled transition for users who `prefers-reduced-motion`

## 6.3.0 - 2025-10-08

### Minor Changes

- 4d55846: - Increase default border-radius of `<Message>` from `8px` to `12px`.
  - Add new `radius` prop to `<Message>`, accepts one of:
    - `"none"` = no border radius
    - `"xs"` = `4px`
    - `"s"` = `8px`
    - `"m"`= `12px` (default)
    - `"l"` = `16px`
    - `"xl"` = `24px`

## 6.2.2 - 2025-10-06

### Patch Changes

- 4e2e89a: Fix: Content inside `<main>` should no longer overlap nav top/side bar. #421

## 6.2.1 - 2025-09-30

### Patch Changes

- 0fc84d4: Fix: Links wrapping `<Section>` elements should now get appropriate keyboard
  focus styling.

## 6.2.0 - 2025-09-19

### Minor Changes

- edfc022: Changed `neutral`-variables (#368):
  - `--bfc-neutral` (dark mode) is lighter than before.
  - `--bfc-neutral-2` (dark mode) is lighter than before.
  - `--bfc-neutral` (light mode) is darker than before.
  - `--bfc-neutral-2` (light mode) is darker than before.
  - `--bfc-neutral-c` (light mode) is darker than before.
  - `--bfc-neutral-fade-c` (light mode) is darker than before.
  - `--bfc-neutral-fade-c` (dark mode) is lighter than before.

## 6.1.0 - 2025-08-27

### Minor Changes

- 3a06ee4: Slight restyling of Nav.Logo #211
  - Larger logo graphic and font size for tablet/desktop
  - Smaller logo, font, and spacing for mobile
  - New SVG file for "it" fallback logo

## 6.0.0 - 2025-08-13

### Major Changes

- 5de0e05: No changes, only bumping major to keep in sync with `bifrost-react` package.

## 5.5.0 - 2025-08-07

### Minor Changes

- a79e31b: Feat: Added `.bf-checkboxcard-left` class to allow left-aligned icon. #246
  Fix: Spacing for switch toggle inside `.bf-checkboxcard`.

### Patch Changes

- 26b8063: Add focus styling for `recharts` (`accessibilityLayer` is default active since v3) #258
- 96b38eb: Minor formatting changes after updating `stylelint` config intarnally.

## 5.4.1 - 2025-07-30

### Patch Changes

- 4dc9711: Fix: Simplify `.bf-fieldgroup-item` selectors so disabled fieldgroup items get correct text color. #272

## 5.4.0 - 2025-07-22

### Minor Changes

- 3180fb3: Support html attribute `data-bf-color-mode` to set color mode.

### Patch Changes

- 5ca8cab: Explicitly set `font-size` on `.bf-modal` to avoid inheriting #254

## 5.3.0 - 2025-07-04

### Minor Changes

- b16e76d: Added new prop `readOnly` and changed `disabled` styling for:
  - `<Input>`
  - `<TextArea>`
  - `<FieldGroup>`
  - `<Label>`
    Changed icon from "ban" to "lock" for disabled (and readOnly) labels.

## 5.2.0 - 2025-07-02

### Minor Changes

- a161a0c: feat: add `noArrow` and `unstyled` props to `<Dropdown>` to allow custom styling

## 5.1.1 - 2025-06-24

### Patch Changes

- aea5b6f: fix: inactive filled button should not have a border color #225

## 5.1.0 - 2025-06-02

### Minor Changes

- 75033e2: - Added new theme colors
  - `.bf-theme-pink` applies a pink theme (equivalent to "attn").
  - `.bf-theme-yellow` applies a yellow theme
    - Equivalent to "warning" in dark mode
    - A new "gold/tan" color in light mode
    - While in yellow theme, do not use `--bfc-warning` (e.g. inverted warning badge) on `--bfc-theme` background (this will look like it is working in light mode, but will be invisible in dark mode)
  - `<Box theme>` prop now allows `"pink"` and `"yellow"` values.
  - `--bfc-theme-c` has been updated for all color themes in light mode. It is
    now using a lighter color to establish WCAG-approved contrast against main
    colors (`--bfc-theme`, `--bfc-theme-2`, `--bfc-theme-3`).

## 5.0.6 - 2025-05-27

### Patch Changes

- 8267f6a: `--bfc-theme-2` value updated to match figma. Fixes #198
- c7dfe7f: fix text `color` for filled input icon button. #199

## 5.0.5 - 2025-05-07

### Patch Changes

- 3fd8295: Tweaked size of `<button>` in `.bf-accordion-item-title` to better match
  `.bf-section-header`.
  Added `border-top` to `.bf-accordion-item-content` for "styled" variant.
- 87f41a8: Fix: `.bf-checkbox-button` height should now match Figma component properly
  (`40px` height, or `32px` when `small`) #142
- 41412ec: Fix: Prevent `<Tooltip>` and `<Dropdown>` from overflowing viewport width. #148

## 5.0.4 - 2025-04-28

### Patch Changes

- 15a5ea0: Fix: `.bf-state-icon` icon color (used by `<Input state="warning">`) should be `base-c` by default. #127

## 5.0.3 - 2025-04-04

### Patch Changes

- 391862a: Fix: Add explicit `margin: auto` to `.bf-modal` (Should override tailwind 4 CSS preflight reset) #113

## 5.0.2 - 2025-04-01

### Patch Changes

- e136063: Fix: checkbox icon, radio icon, switch toggle, and their labels should align better with inline elements #51
- 6d67f5f: Fix: Explicitly set `font-feature-settings: normal` for `.bf-open-sans` to
  prevent inheriting wrong font settings from parent. #86
- 4b313b9: Fix: Changed neutral flat button (`.bf-button-flat.bf-button-neutral`) color from `--bfc-neutral` to `--bfc-base-c` so it looks less disabled by default.

## 5.0.1 - 2025-03-26

### Patch Changes

- b1a6a7f: Fix: Revert some color values and fixed values for `--base-c-success`, `--base-dimmed`, and `--bfc-base-disabled`.

## 5.0.0 - 2025-03-26

### Major Changes

- a40486b: Styling changes:
  - `.bf-message` padding increased from `12px` to `16px`
  - New `.bf-link` styling. Improved underline visibility.
  - `.bf-code` no longer `inline-block` in order to support new `.bf-link` styling
  - Added theme classes, can be applied to any element (use `<html>` to use as
    global app theme)
    - `.bf-theme-teal`
    - `.bf-theme-purple`
  - Added new color classes
    - `.bfc-neutral-bg`
    - `.bfc-neutral-fade-bg`
    - `.bfc-brand-bg`
    - `.bfc-brand-fade-bg`
    - `.bfc-chill-fade-bg`
    - `.bfc-attn-fade-bg`
    - Updated `badge` styling to use new class names.
  - Added new color variables
    - `--bfc-base-c-brand` (teal)
    - `--bfc-theme-hc` (dynamic)
    - `--bfc-theme-fade`
    - `--bfc-theme-fade-c`
    - `--bfc-neutral` (grayscale)
    - `--bfc-neutral-c`
    - `--bfc-neutral-hc`
    - `--bfc-neutral-fade`
    - `--bfc-neutral-fade-c`
    - `--bfc-brand` (teal)
    - `--bfc-brand-c`
    - `--bfc-brand-fade-c`
    - `--bfc-brand-fade`
    - `--bfc-brand-hc`
    - `--bfc-chill-fade-c` (purple)
    - `--bfc-chill-fade`
    - `--bfc-chill-hc`
    - `--bfc-attn-fade-c` (pink)
    - `--bfc-attn-fade`
    - `--bfc-attn-hc`
    - `--bfc-success-hc` (green)
    - `--bfc-warning-hc` (yellow)
    - `--bfc-alert-hc` (red)
  - Changed values for
    - `--bfc-theme` (dark mode)
    - `--bfc-theme-2` (dark mode)
    - `--bfc-theme-3` (dark mode)
    - `--bfc-theme-c` (dark mode)
    - `--bfc-theme-c-2` (dark mode)
    - `--bfc-chill`
    - `--bfc-chill-c`
  - Removed class names:
    - `.bfc-chill-c-bg` - use `.bfc-chill-fade-bg` instead
    - `.bfc-attn-c-bg` - use `.bfc-attn-fade-bg` instead
    - `.bfc-base-c-theme-bg` - use `.bfc-theme-bg` instead
    - `.bfc-base-c-chill-bg` - use `.bfc-chill-bg` instead
    - `.bfc-base-c-attn-bg` - use `.bfc-attn-bg` instead
    - `.bfc-base-c-bg` and `.bfc-base-c-1-bg` - use `.bfc-inverted-bg` instead
    - `.bfc-dimmed-c-bg` - use `.bfc-inverted-2-bg` instead
  - Removed variables:
    - `--bfc-theme-c-base-3`
      - use `--bfc-theme-hc` on `--bfc-theme` backgrounds
      - otherwise use `--bfc-base-3`
    - `--bfc-theme-gradient` and `--bfc-theme-grad`
      - use `linear-gradient(90deg, var(--bfc-theme-3), var(--bfc-theme-1))`
    - `--bfc-theme-hs` (internal)
    - `--bfc-base-hs` (internal)
- 11e52eb: Removed deprecated class names:
  - `.bf-button-left-icon`
  - `.bf-button-right-icon`
  - `.bf-small-it-logo`
  - `.bf-full-intility-logo`
  - `.bf-nav-top-appname`
  - `.bf-nav-side-appname`
  - `.bf-nav-group-item-circle-wrapper`
  - `.bf-nav-group-item-circle`
  - `.bf-nav-group-item-dot-circle`
  - `.bf-spinner-container`
  - `.bf-spinner-color`
  - `.bf-spinner-label`
  - `.bf-overlay` (used by `<Spinner>`)
- 3e16543: Bifrost spacing `--bfs\*` CSS variables now defined using `px` instead of `rem`. Only noticable when using a custom font-size browser setting.
- Removed css variable: `--bfl-border-radius` (deprecated in 4.x)
  - use `--bf-radius-xs` for `4px` or `--bf-radius` for `12px` instead.
- Removed class: `.bfl-border-radius` (deprecated in 4.x)
  - use `.bf-radius-xs` for `4px` or `.bf-radius` for `12px` instead.

## 4.18.3 - 2025-02-26

### Patch Changes

- 1e2116f: update package metadata

## 4.18.2 - 2025-02-14

### Patch Changes

- 66a9741: Fix: Feedback text for datepicker in `alert` state should now correctly be colored red.
- 8bc2846: Fix: Floating message `box-shadow` should no longer be cut off, leaving only the corners visible. #813

## 4.18.1 - 2025-01-29

### Patch Changes

- 53e3e7b: fix: `<Ellipsis>` and `.bf-ellipsis` should now work for single-word content,
  and also not break on hyphens for single line (will take all available width)

## 4.18.0 - 2025-01-13

### Minor Changes

- 96071ef: - New `.bf-menu` and `.bf-menu-item` classes suitable for creating generic menus (or a step-bar)
  - `.bf-menu-horizontal` applies `flex-direction: row;` and `flex-grow: 1` for its children
  - New `.bf-step-icon` class to create an icon suitable for a step bar (or menu)

### Patch Changes

- 49c20c4: Fix: Checkbox icon should be better centered when using "button" styled checheckboxes #791
- 1716d20: Fix: The bottom 1px of "Skip to main" button should no longer be visible regardless of browser/zoom level while hidden #810

## 4.17.0 - 2024-12-13

### Minor Changes

- 10509f3: - Introduced `padded` parameter to `<Ellipsis>` component to prevent clipping of focus outline
  - Added `bf-ellipsis-padded` css class

### Patch Changes

- eb3b1cc: Fix: Text color should be `base-c-2` for disabled inputs (when they have a value).
- 97de3fe: fix: progressbar fill `.progressbar-progress` should no longer overflow its container `.bf-progressbar` #802
- 174f259: Fix: hovering over a `.bf-checkboxcard` (that is not disabled) should now always display a pointer cursor.

## 4.16.0 - 2024-11-28

### Minor Changes

- b9c82ea: Add `transparent` prop to `<Modal>` to allow better control for custom styling

## 4.15.0 - 2024-11-26

### Minor Changes

- 91f354b: New `.bf-ellipsis` class, cuts off overflowing text and adds an ellipsis (…)
  - Configure allowed lines with `--bf-ellipsis-lines` (default `1`)

### Patch Changes

- bbb8a57: Deprecate `<Spinner>` component in favor of using the more flexible `<Icon>` directly. Example:

  ```tsx
  <Icon icon={faSpinnerThird} className="bf-icon-spinner bfc-theme" />
  ```

- bae3a2f: Fix: checkbox/switch/radio (and theird card equivalents) should no longer get a pointer cursor on hover while disabled.

## 4.14.1 - 2024-11-06

### Patch Changes

- 7668263: Fix scaling issue with nav branding
- 908fd54: - Fixed `disabled` styling for pagination next/prev buttons
  - Fixed `:focus` styling for link-styled buttons

## 4.14.0 - 2024-10-21

### Minor Changes

- d090112: `<Drawer>` design update
  - Removed left border from right-positioned drawer
  - New drop shadow (while open)
  - Changed background from `bfc-base-2` to `bfc-base-3`
  - Changed right-positioned drawer width to `550px` for all screen widths wider than small
- c8990f1: Color change in light mode: `bfc-theme-*` variables and classes are now teal colored instead of blue.

### Patch Changes

- 7915aaf: `.bf-li` and list items inside `.bf-toc`, `.bf-ul`, `.bf-ol`, `.bf-elements`, and `.bf-contents` now has `8px` margin between each item regardless of nesting level. #786
- a486693: New `--bf-mode` CSS var allows devs to use style queries to determine if current bifrost color mode is `dark` or `light`.
  Note: Not yet supported by Firefox. Example:

  ```css
  @container style(--bf-mode: dark) {
    /* styles to apply only when in dark mode */
  }
  @container style(--bf-mode: light) {
    /* styles to apply only when in light mode */
  }
  ```

- cb6baa6: Fix css selector, so border-radius is correctly set to last expandable row for Table

## 4.13.0 - 2024-10-15

### Minor Changes

- 2703b98: Add support for `small` variants for most form field inputs, to match existing `small` button styling.
  - `<Input>`
  - `<DatePicker>`
  - `<FieldGroup.Item>`
  - `<Select>`

### Patch Changes

- 1fa1483: Color tweaks:
  - `.bf-accordion-action` color and focus outline
  - `.bf-banner` font weight
  - `.bf-button-expand` and `.bf-expand-icon-wrapper` focus outline, size and spacing
  - `.bf-checkbox-checked` is now `theme` colored
  - `.bf-progressbar` flat color (previously gradient) and new `.bf-progressbar-disabled` styling (0.3 opacity)
  - `.bf-label-feedback` is `alert` colored when associated field is in `alert` state
  - Other minor cleanup and tweaks

- 1fbff6b: Fix: Section.Header and Section.Content now has `border-radius` (useful when designers put separate custom background colors on them)

## 4.12.0 - 2024-09-16

### Minor Changes

- eac9a11: New `<Dropdown.Item>` sub-component for styling buttons and links in a dropdown. #774
  - Padding for `<Dropdown>` reduced from `12` to `8` px.

### Patch Changes

- de00f8f: Fixed typo for base-dimmed-1 css variable
- e7d617e: Add `.bf-highlight-target` class to enable highlight animation when browser
  scrolls to (or opens a page with) a h1-h6 heading with an `id` matching the
  current location `#hash`. #781
- 4fd0770: Lower specificity for link focus styling to avoid overriding custom `border-radius`

## 4.11.0 - 2024-09-03

### Minor Changes

- df8ce99: `<Tabs>` component restyled and made a bit more flexible
  - Neutralised active tab underline color for default `variant`
  - Added shadow on styled tab selected and hover
  - Added border bottom for basic tab on hover
  - Changed paddings
  - New props for `<Tabs>`:
    - `noBakground` (boolean) makes the tab bar transparent
    - `noPadding` (boolean) removes padding from the tab bar
    - `contentProps` (object) props forwarded to the content area `<div>` element (if any)
    - `contentBackground` (string) sets background-color for content area and active tab for `variant="styled"`. Possible values:
      - `"base"` (default),
      - `"base-2"`
      - `"base-3"`
      - `"transparent"` (not supported by `variant="styled"`)
    - `radius` (string | boolean) adds a border-radius to top of tab bar, and bottom of content area (if any). Possible values:
      - `false` or `undefined` (default) = no border radius
      - `"xs"` = `4px`
      - `"s"` = `8px`
      - `true` or `"m"` = `12px`
      - `"l"` = `16px`
      - `"xl"` = `24px`
  - `radiusTop` same values as `radius`, but only applied to top of tab bar
  - `radiusBottom` same values as `radius`, but only applied to bottom of content area (if any)

### Patch Changes

- cfc369e: Minor CSS tweaks
  - `.bf-box-arrow-external` no longer requires `.bf-box-arrow` to be applied at the same time
  - Removed unused and undocumented `.bf-box` class.
  - Added `.bf-block` utility class, applies `display: block`. When applied to `<button>` also gives `width: 100%` (to make it behave like a block level element)
  - Lowered specificity for `.bf-neutral-link` when used on a `<button>` (to allow visual classes like `.bf-border` to take precedence when used together)
- 3bcdf74: Removed some old CSS that was mis-styling the input background color based on parent context. This was needed before inputs got their current outline styling, and removing it should fix several small issues, including:
  - Nesting form elements like `<Input>`, `<Select>`, and `<TextArea>`, inside `.bfc-base-3-bg` should no longer result in wrong background colors.
  - Nesting a `<Select>` that is `disabled` inside a `<Section>` should now look as expected.
  - `<Input>` should look the same inside a `<Table>` as it does outside.
- 3a5ae26: Fix: List elements (`ul`, `ol`, `li`, `.bf-ul` etc) and table of contents (`.bf-toc`) now inherit font-size. #768

## 4.10.1 - 2024-08-27

### Patch Changes

- 6ef5ced: Fix: Use pointer cursor when hovering hidden native `<input>` for checkbox, radio, switch, and checkboxcard. #777

## 4.10.0 - 2024-08-22

### Minor Changes

- 810663f: Added some new color classes: `.bfc-base-c-attention-bg` and `.bfc-base-c-chill-bg`
  Recolored some badges to use base-3 as text color (attn, chill)
  Fixed link color for background class names
- f1be5f4: Added new `.bf-box-arrow-external` class. Use alongside `.bf-box-arrow` and a right-pointing arrow icon, to tilt it upwards, suitable for use with external links.

### Patch Changes

- 46d07a6: Fix: "skip to content" button (from `<Nav>`) should no longer be part of printed content.
- 8cbbf46: fix: `<Button.Group active>` focus and hover styling fixes
- bb6765e: fix: increase native (hidden) checkbox input element size to make it more compatible with how tippy works (Dropdown and Tooltip components) #525

## 4.9.0 2024-08-14

### Minor Changes

- a727d33: Based on feedback we've changed the default `<Button>` color back to `theme`. We're preparing components to be compatible with a theming system we're currently working on. Hopefully we don't create too many issues :)
  - Same goes for `<Input iconButton>`, `<Button.Group>` and `<Tag active>`
  - Add new `state="neutral"` to `<Button>` (`.bf-button-neutral` CSS class)

### Patch Changes

- 8685fcf: Removed theme color from table header and border left
- e8faca6: Fixed bug where clicking the outer edges of wide buttons doesn't register clicks (because it was scaled down, placing the cursor outside button)
- fe7ec62: fix: hover glitch for input button hover

## 4.8.0 - 2024-08-07

### Minor Changes

- 77c67b4: Updated checkbox styling
  - Removed theme color
  - Increased size of checkbox, radio and switch
  - Now supports custom browser font size
  - New active state for switch
  - New hover state for checkbox, radio and switch
  - Neutralized select checkboxes

## 4.7.2 - 2024-08-07

### Patch Changes

- fd3acaa: Fix: lower specificity for button focus css to prevent overriding custom styling

## 4.7.1 - 2024-08-06

### Patch Changes

- 899927b: Fix: form field height should follow browser font-size setting. Use `rem` over `px` for height-related units for form fields (input, button, select, datepicker).
- 2cbf99a: Fix: button group hover styling

## 4.7.0 - 2024-08-02

### Minor Changes

- 6dfd55d: Styling for tooltip
  - Changed color styling on default tooltip; from theme to neutral colors
  - Increased font-size and removed bold font-weight on regular size tooltip
  - Increased padding on both tooltip sizes
  - Added example of tooltip with both icon and text
- 14c207d: Add new `.bf-select` class to style native HTML `<select>`.

### Patch Changes

- 3ccc958: Fix: Drawer overlay should be visible for mobile screens. #764

## 4.6.1 - 2024-07-31

### Patch Changes

- 9ae0e80: - Fixed rendering glitch issues for button hover on certain scale or zoom levels. #762
  - Fixed `border-radius` on focus for button-styled links.
  - Fixed Checkbox button `border-color` change on hover when `disabled`.
  - Reverted Checkbox button and CheckboxCard border color to match input styling instead of button styling.

## 4.6.0 - 2024-07-30

### Minor Changes

- daa6eee: New breadcrumbs styling
  - Added CSS to allow buttons inside `.bf-breadcrumbs` container (to allow forward/back buttons)
  - Use `/` instead of `>` icon to separate path segments
    - `.bf-breadcrumb-angle` renamed to `.bf-breadcrumb-separator`
- a23cc4f: New container query CSS classes:
  - Specify a container element with `.bf-container` class.
  - Container breakpoint CSS classes `.from-[size]-container` and `.to-[size]-container` for hiding content at certain container widths where `[size]` is one of:
    - `xs` 300px
    - `small` 600px
    - `medium` 960px
    - `large` 1280px
    - `xl` 1920px
    - `xxl` 1600px

  For example:

  ```html
  <div class="bf-container">
    <div class="to-large-container">
      Only visible if `.bf-container` element is narrower than 1280px
    </div>
    <div class="from-small-container">
      Only visible if `.bf-container` element is wider than 600px
    </div>
    <div class="from-small-container to-large-container">
      Only visible if `.bf-container` element is wider than 600px and narrower
      than 1280px
    </div>
  </div>
  ```

  [Read more at bifrost.intility.com/css/container](https://bifrost.intility.com/css/container)

- 365100c: Changed color values for:
  - `--bfc-base-dimmed`
  - `--bfc-base-c-alert`
  - `--bfc-base-c-wcag`
  - `--bfc-base-c-dimmed` (alias for `--bfc-base-dimmed`)
  - `--bfc-base-c-inverted-1`
  - `--bfc-base-c-inverted-2`
  - `--bfc-alert`
  - `--bfc-alert-c` (big change, from almost black to white)
  - `--bfc-alert-fade`
  - `--bfc-alert-fade-c`
  - `--bfc-alert-fade-1` (alias for `--bfc-alert-fade`)
  - `--bfc-alert-fade-1-c` (alias for `--bfc-alert-fade-c`)

  Added new colors:
  - `--bfc-base-c-inverted-3`
  - `--bfc-base-dimmed-1` (alias for existing `--bfc-base-dimmed`)
  - `--bfc-base-dimmed-2`
  - `--bfc-base-dimmed-3`
  - `--bfc-alert-2`

  Added new class names:
  - `.bfc-base-c-bg`
  - `.bfc-base-c-2-bg`

  New `<Button>` styling:
  - Increased `border-radius` (from xs to s)
  - New outline styling on keyboard focus
  - Removed theme color from `variant="filled"`
  - Added `variant="flat"`, no background or outline
  - Added `state="inverted"`, for contrasting background
  - Deprecated `variant="outline"` since default `variant` has outline
  - `state="alert"` now supported by every `variant`
  - New `<Button.Group>` styling
    - Removed theme color from `active` button
  - Fixed outline overlapping on `:focus-visible` with `z-index: 1`

  Update `<Checkbox button>`, `<CheckboxCard>`, `<Tag>` and `<Drawer>` (close button) styling to match new bifrost Button.

  Update `border` styling for `<Input>`, `<Textarea>` and `<FieldGroup>` to match new bifrost Button.

  New `<Badge>` styling: updated `font-weight` and `padding`. Background changed for `inverted` `state="neutral"` variant.

  Increased `marginRight` and `marginLeft` for `<Icon>` from `4px` to `8px`.

### Patch Changes

- ac738a9: Fix: Remove "." placeholder from `<Skeleton.Text>` and pray browsers support `lh` CSS unit.
- 4df5421: Fix: minor `.bf-nav` css tweaks
- 841993b: Removed custom button styling for bottom positioned drawer

## 4.5.1 - 2024-06-21

### Patch Changes

- a2ec3e53: Fix: remove CSS references to non-existing variable `--bfc-alert-c-2` #755
- 23ff3593: Fix: Corrected border-radius for styled accordion content. #756

## 4.5.0 - 2024-06-13

### Minor Changes

- 833a15e4: Fix: update Select styling to allow `menuPlacement="top"` and more closely match DatePicker #754

## 4.4.0 - 2024-06-06

### Minor Changes

- 0b24673c: Feat: New styling for dropdowns, now always renders with both a shadow and border. Deprecated the `<Dropdown variant>` prop and removed `.bf-dropdown-border` since there's only one variant now.

### Patch Changes

- e6ead541: Fix: `.bf-nav` font-size reduced from large (16px) to medium (14px)

## 4.3.1 - 2024-06-05

### Patch Changes

- c20e24ae: Fix Nav.Search styling when used in top bar
- 5de6a97c: fix: Changed spacing between styled accordions #727

## 4.3.0 - 2024-05-31

### Minor Changes

- 069614ed: Slight tweaks to .bf-input, .bf-datepicker and .bf-textarea on hover and focus #740
- 9b7cead3: Fix: Font-size variables are now defined in `rem` in order to respect user agent font settings. #742
- fd90da94: Feat: add scrollbar styling
  - Default `scrollbar-color` set on root element, `.bf-scrollbar`, and `.bf-scrollbar-small`
  - `.bf-scrollbar-small` now applies `scrollbar-width: thin`

### Patch Changes

- 9749173c: Fixed positioning for nav top bar #746

## 4.2.7 - 2024-05-29

### Patch Changes

- d2bb0be5: Fixed mobile nav transition flash on load by making sure `.bf-nav-mobile` is not visible with `.bf-nav-mobile-gone`

## 4.2.6 - 2024-05-29

### Patch Changes

- 4c0b4e5e: Fix position issue for nav-item

## 4.2.5 - 2024-05-27

### Patch Changes

- af52c2d7: Fix: Prevent clipping of text in `.bf-nav-logo-name` when used in nav topbar.

## 4.2.4 - 2024-05-22

### Patch Changes

- 366de21e: Fix: add styling for non-clickable Nav.Item in topbar
- bf863902: New custom icon for Nav sidebar collapse button
- 917825cb: Fix: Tweak expand arrow positioning for Nav.Group in sidebar

## 4.2.3 - 2024-05-16

### Patch Changes

- 9c1de768: Fix: platform-toolkit notifcation icon placement

## 4.2.2 - 2024-05-16

### Patch Changes

- 08583204: Nav top bar tweaks:
  - `.bf-nav-item` inside `.bf-nav-top` width tweaked to match figma spec
  - `.bf-nav-logo-name` font changed to Satoshi (740 weight, 14px size)
  - `.bf-nav-logo-name` inside `.bf-nav-top` will be clamped at 2 lines and still be centered

## 4.2.1 - 2024-05-15

### Patch Changes

- 33a242ff: Fix text-align in top nav for some scenarios

## 4.2.0 - 2024-05-15

### Minor Changes

- 2207b865: - `.bf-nav-*` has been redesigned.
  - Top-left area previously dedicated to intility logo has been removed. (Put app icon and title there instead)
  - Restyled `:hover`, `.active` (class), and `:focus-visible` for `.bf-nav-item` and `.bf-nav-group`.
  - Nav group buttons are now styled as "active" when a grouped item has `.active` class. (previously required scripting)
  - New `.bf-nav-logo`, `.bf-nav-logo-name`, and `.bf-nav-logo-graphic` classes for logo layout.
  - CSS selectors for `.bf-nav-*` simplified, hopefully mostly works the same. 🤞
  - Margins for `.bf-checkbox` inside `.bf-dropdown` tweaked to match new Nav design
- f3eae438: - Add `.bf-box-arrow` class for use on `fa-arrow-right` icon with a transition on link hover.
  - E.g. `<a href="/path">link with arrow <i class="fa-regular fa-arrow-right bf-box-arrow"></i></a>`
  - Fixed text color classes (`.bfc-*`) so they should correctly take precedence over text color set by background-color classes (`.bfc-*-bg`) when both are present on the same element.
  - Fixed so `.bf-inline-stretch` should no longer overflow when wrapping text.

## 4.1.1 - 2024-04-24

### Patch Changes

- 31205e8d: Fix: More robust selectors for `.bf-checkbox` and `.bf-checkboxcard`, should no longer be influenced by other adjacent `<input>` elements.

## 4.1.0 - 2024-04-23

### Minor Changes

- f39613ed: Changes to `<Drawer>` and `.bf-drawer`
  - Use `margin` instead of `transform` to show/hide drawer. Fixes #736
  - Use `inert` html attribute for closed drawer instead of `display: none;` and `aria-hidden`

### Patch Changes

- 29572cca: Fix: Allow click-through on input icons `.bf-input-icon` and `.bf-state-icon`

## 4.0.1 - 2024-04-05

### Patch Changes

- bb9e438b: Fix: Disable Chromium Auto-Dark color overrides by setting `color-scheme: only dark` for dark mode and `color-scheme: only light` for light mode. #737 https://developer.chrome.com/blog/auto-dark-theme/
- 611f82ca: Removed unnecessary files from npm package output.

## 4.0.0 - 2024-04-03

### Minor Changes

- 6b355639: New `.bf-accordion` styling and DOM structure
- 799c9adf: Add `.bf-drawer-bottom` class to position drawer at bottom of
  viewport.
- 62b02461: Include JSDoc comments in typescript definition output
- 50b76941: Fix: Mobile landscape font size IOS #721
- b9a6353b: Added classnames for single edge border
  - `.bf-border-top`
  - `.bf-border-right`
  - `.bf-border-bottom`
  - `.bf-border-left`
- 8f64aa42: Internal refactor: relocate css files to bifrost-css folder
- 3849abc3: Optional padding and close button for drawer
- 387a1440: Clean up css for dropdown and fieldset after checkbox rewrite.
- bffe432f: Refactor checkbox CSS, wrap the `<input type="checkbox">` in the
  `<label className="bf-checkbox">` means you no longer need a unique `id` and
  `for` to connect them.
- ec250594: Drawer content padding should now match `.bf-page-padding`.
- 710afa88: New `.bf-message` styling #719
- 276f9742: Slight tweaks to `--bfc-base-*` and `--bfc-chill-*` color values
- 6edfa7a4: Add `.bf-hide-until-focus` class for "skip to content" button
- New CSS classes for rendering content for _either_ light or dark mode
  _exclusively_:
  - `.bf-dark-only` will be hidden (`display: none`) when in light mode
  - `.bf-light-only` will be hidden in dark mode
- New `.bf-elements` CSS class to apply typography CSS without margins
  (`.bf-content` does the same, but _with margins_)
- New standard values for `border-radius`
  - CSS Variables
    - `--bf-radius-none` = 0px
    - `--bf-radius-xs` = 4px
    - `--bf-radius-s` = 8px
    - `--bf-radius` or `--bf-radius-m` = 12px
    - `--bf-radius-l` = 16px
    - `--bf-radius-xl` = 24px
    - `--bf-radius-full` = 9999px
  - Corresponding CSS helper classes
    - `.bf-radius-xs` applies 4px `border-radius`
    - `.bf-radius-s` applies 8px `border-radius`
    - `.bf-radius` or `.bf-radius-m` applies 12px `border-radius`
    - `.bf-radius-l` applies 16px `border-radius`
    - `.bf-radius-xl` applies 24px `border-radius`
    - `.bf-radius-full` applies 9999px `border-radius`
  - Deprecated old border radius classes and variable
    - ~~`--bfl-border-radius`~~ use `--bf-radius-xs` instead.
    - ~~`.bfl-border-radius`~~ and ~~`.bf-border-radius`~~, use `.bf-radius-xs`
      instead.
  - All `border-radius` values updated to use new `--bf-radius-*` variables.

### Patch Changes

- Disable main scroll while scrolling inside `.bf-drawer` or `.bf-modal` with
  `overscroll-behavior: contain` #678
- 18feb758: Top nav logo color changed to neutral `base-c` color and given a
  proper keyboard focus state.
- e410a910: New base color values for light mode #711
- 8484a491: Fix: `border-left` on table mediaquery value
- 2fd63480: Minor color value tweak for `--bfc-base-c`. #724
- e07afaff: Fix: font size and weight for Modal header
- 82ab21b5: Update border-radius values to use bifrost css variables
- 5504294e: Fix drawer spacing when no close button
- 60d1310c:
  - Fix: Disable main scroll while scrolling inside `.bf-drawer` or `.bf-modal`
    with `overscroll-behavior: contain` #678
  - Fix: Add `safe-area` (mobile device screen "notch" or "dynamic island")
    padding for `.bf-drawer` #734
  - Fix: use `dvh` instead of `vh` for supporting browsers. #733
- a3b1fd6b: Remove unnecessary CSS, should now have correct outline for
  `.bf-neutral-link` button focus. #726
- 7db473c6: Fixed bug that allowed focus inside a closed `<Drawer>` when using
  `footer` prop

## Older versions

See /packages/bifrost-react/CHANGELOG.md for 3.12 and older versions.