From de19d9e7c4282ca5253a37c3b40fc4c633dd6156 Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Mon, 20 Apr 2026 11:57:44 +0000 Subject: [PATCH 1/3] chore(site): demui `` and `` --- site/src/components/Avatar/Avatar.tsx | 2 +- site/src/components/Avatar/AvatarCard.tsx | 26 +++++-------------- .../ExternalImage/ExternalImage.tsx | 2 +- site/src/pages/IconsPage/IconsPage.tsx | 18 ++++--------- site/src/theme/externalImages.ts | 18 ++++++------- 5 files changed, 23 insertions(+), 43 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 0a3e1467f6d..50d70054140 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -78,7 +78,7 @@ export const Avatar: React.FC = ({ {fallback && ( diff --git a/site/src/components/Avatar/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx index e9b86e94c06..bb4e5145438 100644 --- a/site/src/components/Avatar/AvatarCard.tsx +++ b/site/src/components/Avatar/AvatarCard.tsx @@ -1,6 +1,7 @@ import { type CSSObject, useTheme } from "@emotion/react"; import type { FC, ReactNode } from "react"; import { Avatar } from "#/components/Avatar/Avatar"; +import { cn } from "#/utils/cn"; type AvatarCardProps = { header: string; @@ -19,16 +20,12 @@ export const AvatarCard: FC = ({ return (
{/** @@ -41,16 +38,7 @@ export const AvatarCard: FC = ({

{header}

diff --git a/site/src/components/ExternalImage/ExternalImage.tsx b/site/src/components/ExternalImage/ExternalImage.tsx index e2005c68076..42ad282e998 100644 --- a/site/src/components/ExternalImage/ExternalImage.tsx +++ b/site/src/components/ExternalImage/ExternalImage.tsx @@ -9,7 +9,7 @@ export const ExternalImage: React.FC> = ({ return ( // biome-ignore lint/a11y/useAltText: alt should be passed in as a prop ); diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx index c0326632e31..e3902953308 100644 --- a/site/src/pages/IconsPage/IconsPage.tsx +++ b/site/src/pages/IconsPage/IconsPage.tsx @@ -159,19 +159,11 @@ const IconsPage: FC = () => { {icon.url}
{icon.description} diff --git a/site/src/theme/externalImages.ts b/site/src/theme/externalImages.ts index dfdd3280367..80129958771 100644 --- a/site/src/theme/externalImages.ts +++ b/site/src/theme/externalImages.ts @@ -1,17 +1,17 @@ -import type { CSSObject } from "@emotion/react"; +import type { CSSProperties } from "react"; export interface ExternalImageModeStyles { /** * monochrome icons will be flattened to a neutral, theme-appropriate color. * eg. white, light gray, dark gray, black */ - monochrome?: CSSObject; + monochrome?: CSSProperties; /** * @default * fullcolor icons should look their best of any background, with distinct colors * and good contrast. This is the default, and won't alter the image. */ - fullcolor?: CSSObject; + fullcolor?: CSSProperties; /** * whiteWithColor is useful for icons that are primarily white, or contain white text, * which are hard to see or look incorrect on light backgrounds. This setting will apply @@ -20,7 +20,7 @@ export interface ExternalImageModeStyles { * You can also specify a `brightness` level if your icon still doesn't look quite right. * eg. /icon/aws.svg?blackWithColor&brightness=1.5 */ - whiteWithColor?: CSSObject; + whiteWithColor?: CSSProperties; /** * blackWithColor is useful for icons that are primarily black, or contain black text, * which are hard to see or look incorrect on dark backgrounds. This setting will apply @@ -29,7 +29,7 @@ export interface ExternalImageModeStyles { * You can also specify a `brightness` level if your icon still doesn't look quite right. * eg. /icon/aws.svg?blackWithColor&brightness=1.5 */ - blackWithColor?: CSSObject; + blackWithColor?: CSSProperties; } export const forDarkThemes: ExternalImageModeStyles = { @@ -64,14 +64,14 @@ const multiplier = /^\d+(\.\d+)?%?$/; */ const parseInvertFilterParameters = ( params: URLSearchParams, - baseStyles?: CSSObject, + baseStyles?: CSSProperties, ) => { // Only apply additional styles if the current theme supports this mode if (!baseStyles) { return; } - let extraStyles: CSSObject | undefined; + let extraStyles: CSSProperties | undefined; const brightness = params.get("brightness") ?? ""; if (multiplier.test(brightness)) { @@ -93,10 +93,10 @@ const parseInvertFilterParameters = ( export function parseImageParameters( modes: ExternalImageModeStyles, searchString: string, -): CSSObject | undefined { +): CSSProperties | undefined { const params = new URLSearchParams(searchString); - let styles: CSSObject | undefined = modes.fullcolor; + let styles: CSSProperties | undefined = modes.fullcolor; if (params.has("monochrome")) { styles = modes.monochrome; From ef59155ff17dfd9c79d20aee13b0df5df2a03210 Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Mon, 20 Apr 2026 12:10:52 +0000 Subject: [PATCH 2/3] fix: move to using `size-16` --- site/src/pages/IconsPage/IconsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx index e3902953308..c4807065cde 100644 --- a/site/src/pages/IconsPage/IconsPage.tsx +++ b/site/src/pages/IconsPage/IconsPage.tsx @@ -159,7 +159,7 @@ const IconsPage: FC = () => { {icon.url} Date: Mon, 20 Apr 2026 12:53:06 +0000 Subject: [PATCH 3/3] chore: prefer `...style` spread --- site/src/components/ExternalImage/ExternalImage.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/site/src/components/ExternalImage/ExternalImage.tsx b/site/src/components/ExternalImage/ExternalImage.tsx index 42ad282e998..46b3c4749d8 100644 --- a/site/src/components/ExternalImage/ExternalImage.tsx +++ b/site/src/components/ExternalImage/ExternalImage.tsx @@ -2,6 +2,7 @@ import { useTheme } from "@emotion/react"; import { getExternalImageStylesFromUrl } from "#/theme/externalImages"; export const ExternalImage: React.FC> = ({ + style, ...props }) => { const theme = useTheme(); @@ -9,7 +10,10 @@ export const ExternalImage: React.FC> = ({ return ( // biome-ignore lint/a11y/useAltText: alt should be passed in as a prop );