**Related issue:** Resolves#49276
**New features**
- Added new "Secondary" (bordered, off-white fill) and "Subdued"
(borderless, low-emphasis) button variants to match the Figma spec,
alongside the existing Primary style.
- Allowed rows to be selected in Controls > OS updates.
**Cleanup**
- Once nothing referenced the old styles anymore, fully removed the old
`text-icon`, `brand-inverse-icon`, `inverse-alert`, `inverse`, and
`icon` button variants (type, styles, and Storybook entries) from the
shared `Button` component.
- Removed the `iconStroke` prop, which had become a no-op once the old
variants it supported were gone.
- Renamed `ActionsDropdown`'s variants
(`button`/`brand-button`/`small-button`) to
`subdued`/`primary`/`secondary` to match the same naming used everywhere
else.
- Replaced a one-off dropdown implementation on the Software title page
with the shared `ActionsDropdown` component, instead of maintaining
duplicate styling logic.
- Changed the button name on Host details > Reports > Report details
from "View data for all hosts" to "View report for all hosts" (to match
the previous page's Actions drop-down options).
# Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
## Testing
- [x] Added/updated automated tests
- [x] QA'd all new/changed functionality manually
<img width="1475" height="241" alt="Screenshot 2026-07-21 at 06 35 49"
src="https://github.com/user-attachments/assets/7cfbd444-7837-40e8-854e-bc5989d57d85"
/>
<img width="661" height="306" alt="Screenshot 2026-07-21 at 06 37 18"
src="https://github.com/user-attachments/assets/5d0c4873-8179-4089-b115-7e8cd3a53b4d"
/>
<img width="1427" height="423" alt="Screenshot 2026-07-21 at 06 37 30"
src="https://github.com/user-attachments/assets/a4850a60-f44a-4902-b45e-0094f23a52f8"
/>
<img width="1427" height="640" alt="Screenshot 2026-07-21 at 06 37 46"
src="https://github.com/user-attachments/assets/738a4a7f-cd7d-4162-b659-6f649c32204d"
/>
<img width="1445" height="479" alt="Screenshot 2026-07-22 at 07 03 22"
src="https://github.com/user-attachments/assets/4f672dc0-5c6d-4eb8-8465-ed5233fcd1b2"
/>
<img width="811" height="871" alt="Screenshot 2026-07-21 at 06 41 20"
src="https://github.com/user-attachments/assets/5421c96e-2dab-492a-af26-be0e5a7791ca"
/>
This PR brings the style changes made in the "Align Fleet UI colors with Figma components"
#615 and "Align Fleet UI with Figma (spacing and fonts)" #628 PRs into the master branch.
* add prettier and have it format all js code except website:
:
* trying running prettier check in CI
* fix runs on in CI
* change CI job name
* fix prettier erros and fix CI
This if the 2nd PR as part of the of the Align components in Fleet UI with design system in Figma #539
These changes **refactor the spacing and font sizes** used by the frontend.
- Change the scss variables in `padding.scss` and `fonts.scss`.
- Replace custom styles with the new variables throughout all stylesheets.
- This if the 1st PR as part of the of the Align components in Fleet UI with design system in Figma #539
- These changes replace all the color variables in /styles/var/colors.scss with new colors and naming convention used in Figma.
* updated typescript version and tsconfig in project
* updated eslint version
* change from experimental export to supported export
* removed accidentally added script
* turn off buggy jsx-a11y eslint rules
* remove unused tslint.json
* fix wrong jsx-a11y depedency
* use correct eslint-plugin-jsx-a11y version
* fix rest of linting errors
* move back js-yaml version to 3 major
The final PR for the UI Refresh #38.
- Complete UI issues caught during the Dec. 09 QA pass.
- Update button and color styles, including hover and active states, to align with the mockups.
- Update status labels in the hosts list and users list. The status label now includes a colored circle along with a text description.
- Fixes#138.
- Add new PNG files for the new icons in the left side navigation and the right side labels on the Hosts page.
- Rename the old `<Icon />` component to `<KolideIcon />` and create a new `<Icon />` component. The ultimate goal is to get rid of the `<KolideIcon />` and `<PlatformIcon />` components and use the encompassing `<Icon />` component for all icons. The full transition will be made when we have icon assets to replace all the kolide icons and platform icons. Currently, we don't.
- Rename the `icon_name_for_label.js` utility to `icon_name.js` because the utility now includes `iconNameForLabel()` and `iconNameForPlatform()` functions.
- Fixes issue #127.
The goal of this PR is to update the style across the query and packs pages so they are consistent with the latest global styles (colors, buttons, and fonts).
- Move from Mocha to Jest for JS testing (Jest seems to have better support for
'watching' tests and a more active community these days).
- Codemod existing tests to Jest syntax (using https://github.com/skovhus/jest-codemods)
- Fix some errors in tests that were previously hidden.
- Update Babel.
The goal of this PR was to insert new colors, remove legacy colors, and update only the styles accordingly. The Nunito Sans Italic font was also added.
Later PRs will include layout, copy, and style change to individual components. These later changes will more exactly resemble the current mockups.
This is the first PR as a part of the Fleet UI Refresh #38.
Changes include:
- Add Nunito Sans font files and modify global styles to reflect the font change.
- Modify global font variables to reflect new sizing and weight naming conventions.
-- New sizing and naming conventions:
--- SIZE: xx-small: 12px, x-small: 14px, small: 16px, medium: 20px, large: 24px, x-large: 28px
--- WEIGHT: regular: 400, bold: 700
- Remove the old Oxygen font files.
Changes to other style sheets reflect the changes to the new font sizing and weight naming conventions for global variables. The changes don't necessarily use the correct size (as illustrated by mockups). Those "up to spec" sizing changes are to come.
Fleet used significant resources storing the full network interface
information for each host. This data was unused, except to get the
IP and MAC of the primary interface. With these changes, only those
pieces of data are stored.
- Calculate and store primary IP and MAC
- Remove transaction for storing full interfaces
- Update targets search to use new IP and MAC columns
- Update frontend to use new new columns
- Replace uses of deprecated Bourbon helpers with raw CSS
- Add autoprefixer into the build chain to prefix the now removed helpers
This process was achieved by running through each of the deprecation warnings and using the following bash function to replace it in all files:
```
function bourbon-deprecate() {
grep -rl "@include $1" ./frontend --exclude-dir=.git | xargs sed -i '' -E "s/@include $1[(](.*)[)]/$1: \1/g"
}
```
For some helpers, this did not result in valid CSS, so manual modifications were made.
Closes#1189#1274
Steven Palmesano