From bf83182dc08df4a58e011119d53918ebc3bb3857 Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Tue, 10 Feb 2026 13:38:48 +0100 Subject: [PATCH 1/4] fix: icons now scale when zooming in Safari --- .changeset/chatty-shrimps-battle.md | 6 ++++++ packages/css/src/badge.css | 3 ++- packages/css/src/button.css | 8 +++++--- packages/css/src/spinner.css | 19 +++++++++---------- packages/css/src/tabs.css | 3 ++- packages/css/src/tag.css | 3 ++- .../Combobox/internal/ComboboxClearButton.tsx | 2 +- .../Combobox/internal/ComboboxInput.tsx | 4 ++-- 8 files changed, 29 insertions(+), 19 deletions(-) create mode 100644 .changeset/chatty-shrimps-battle.md diff --git a/.changeset/chatty-shrimps-battle.md b/.changeset/chatty-shrimps-battle.md new file mode 100644 index 0000000000..76f6aa7a82 --- /dev/null +++ b/.changeset/chatty-shrimps-battle.md @@ -0,0 +1,6 @@ +--- +"@digdir/designsystemet-react": patch +"@digdir/designsystemet-css": patch +--- + +**Badge, Button, Spinner, Tabs, Tag**: Icons now scale in Safari when zooming diff --git a/packages/css/src/badge.css b/packages/css/src/badge.css index 62c10d3b61..185f86130d 100644 --- a/packages/css/src/badge.css +++ b/packages/css/src/badge.css @@ -66,7 +66,8 @@ & :where(img, svg) { flex-shrink: 0; /* Never shrink icon */ - font-size: 1.25em; /* Auto scale icon based on font-size */ + height: 1.25em; /* Auto scale icon based on font-size */ + width: auto; } &[data-placement='top-right'] .ds-badge::before { diff --git a/packages/css/src/button.css b/packages/css/src/button.css index a0966da051..b07d3c78b3 100644 --- a/packages/css/src/button.css +++ b/packages/css/src/button.css @@ -54,7 +54,8 @@ & :where(img, svg) { flex-shrink: 0; - font-size: 1.3em; + height: 1.3em; + width: auto; } &:focus-visible { @@ -71,7 +72,8 @@ padding: 0; & :where(img, svg) { - font-size: 1.5em; + height: 1.5em; + width: auto; } } @@ -82,7 +84,7 @@ /* Style spinner when in button */ & .ds-spinner { - font-size: 1.4em; + height: 1.4em; } /** diff --git a/packages/css/src/spinner.css b/packages/css/src/spinner.css index f4b551e2c1..00e360a89b 100644 --- a/packages/css/src/spinner.css +++ b/packages/css/src/spinner.css @@ -6,33 +6,32 @@ animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration); box-sizing: border-box; - font-size: var(--ds-size-11); - height: 1em; - width: 1em; + height: var(--ds-size-11); + width: auto; - /* Using font-size to ensure consistent size when explicitly setting data-size */ + /* Ensure consistent size when explicitly setting data-size */ &[data-size='2xs'] { - font-size: 0.75rem; + height: 0.75rem; } &[data-size='xs'] { - font-size: 1.25rem; + height: 1.25rem; } &[data-size='sm'] { - font-size: 2rem; + height: 2rem; } &[data-size='md'] { - font-size: 2.75rem; + height: 2.75rem; } &[data-size='lg'] { - font-size: 3.75rem; + height: 3.75rem; } &[data-size='xl'] { - font-size: 5.5rem; + height: 5.5rem; } } diff --git a/packages/css/src/tabs.css b/packages/css/src/tabs.css index f4a79a23f6..2319857f1f 100644 --- a/packages/css/src/tabs.css +++ b/packages/css/src/tabs.css @@ -60,7 +60,8 @@ & :where(img, svg) { flex-shrink: 0; /* Never shrink icon */ - font-size: 1.25em; /* Auto scale icon based on font-size */ + height: 1.25em; /* Auto scale icon based on font-size */ + width: auto; } &::after { diff --git a/packages/css/src/tag.css b/packages/css/src/tag.css index 9c1ea0842c..e4ed88f100 100644 --- a/packages/css/src/tag.css +++ b/packages/css/src/tag.css @@ -26,7 +26,8 @@ & :where(img, svg) { flex-shrink: 0; - font-size: 1.25em; + height: 1.25em; + width: auto; } &:not([hidden]) { diff --git a/packages/react/src/components/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/Combobox/internal/ComboboxClearButton.tsx index 317733aff4..29055db1e2 100644 --- a/packages/react/src/components/Combobox/internal/ComboboxClearButton.tsx +++ b/packages/react/src/components/Combobox/internal/ComboboxClearButton.tsx @@ -39,7 +39,7 @@ const ComboboxClearButton = forwardRef< type='button' aria-label={clearButtonLabel} > - + ); }); diff --git a/packages/react/src/components/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/Combobox/internal/ComboboxInput.tsx index 27d52ab58a..0f15d8b462 100644 --- a/packages/react/src/components/Combobox/internal/ComboboxInput.tsx +++ b/packages/react/src/components/Combobox/internal/ComboboxInput.tsx @@ -155,9 +155,9 @@ const ComboboxInput = ({ {/* Arrow for combobox. Click is handled by the wrapper */}
{open ? ( - + ) : ( - + )}
From d7c53d36e4a707f1091caa99f53daf5f16db7fcf Mon Sep 17 00:00:00 2001 From: Une Sofie Kinn Ekroll Date: Tue, 10 Feb 2026 13:38:48 +0100 Subject: [PATCH 2/4] refactor(www,themebuilder): remove fontSize from svg where it had no effect, replace with height/width where it had to fix scaling in Safari --- .../appearance-toggle/appearance-toggle.tsx | 8 ++----- .../_components/color-input/color-input.tsx | 2 +- .../_components/previews/landing/landing.tsx | 4 ++-- .../sidebar/color-page/color-page.tsx | 6 ++--- .../sidebar/color-pane/color-pane.tsx | 4 ++-- .../sidebar/finish-page/finish-page.tsx | 2 +- .../app/_components/sidebar/sidebar.tsx | 2 +- .../app/_components/size-input/size-input.tsx | 7 +++++- .../_components/theme-header/theme-header.tsx | 2 +- .../_components/token-modal/token-modal.tsx | 8 +++++-- apps/themebuilder/app/layouts/root/layout.tsx | 4 +++- apps/themebuilder/app/routes/home/home.tsx | 4 ++-- .../_components/do-dont/do-dont.module.css | 3 ++- apps/www/app/_components/image/image.tsx | 2 +- .../search-dialog/search-dialog.module.css | 3 ++- apps/www/app/_components/sidebar/sidebar.tsx | 4 ++-- .../video-card/video-card.module.css | 3 ++- .../en/accessibility/disabled-states.mdx | 2 +- .../no/accessibility/disabled-states.mdx | 2 +- apps/www/app/content/blog/en/cba.mdx | 2 +- apps/www/app/content/blog/no/cba.mdx | 2 +- .../components/badge/badge.stories.tsx | 5 ++++- .../content/components/link/link.dodont.tsx | 4 ++-- .../content/components/link/link.stories.tsx | 4 ++-- .../intro/en/about-the-design-system.mdx | 2 +- .../content/intro/en/join-the-community.mdx | 2 +- .../intro/no/about-the-design-system.mdx | 2 +- .../content/intro/no/join-the-community.mdx | 2 +- apps/www/app/layouts/root/layout.tsx | 4 +++- apps/www/app/routes/home/home.tsx | 22 ++++++++++++++----- .../src/clipboard-button/clipboard-button.tsx | 2 +- .../components/src/header/header.module.css | 2 +- internal/components/src/header/header.tsx | 6 ++--- .../src/components/link/link.stories.tsx | 12 +++++----- 34 files changed, 84 insertions(+), 61 deletions(-) diff --git a/apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx b/apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx index b98fc94372..4b38ca09a5 100644 --- a/apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx +++ b/apps/themebuilder/app/_components/appearance-toggle/appearance-toggle.tsx @@ -53,12 +53,8 @@ export const AppearanceToggle = ({ role='radio' > {' '} - {scheme.value === 'light' && ( - - )} - {scheme.value === 'dark' && ( - - )} + {scheme.value === 'light' && } + {scheme.value === 'dark' && } {scheme.name} {showLabel && <>{scheme.name}} diff --git a/apps/themebuilder/app/_components/color-input/color-input.tsx b/apps/themebuilder/app/_components/color-input/color-input.tsx index 616dc39566..a8a47fd55a 100644 --- a/apps/themebuilder/app/_components/color-input/color-input.tsx +++ b/apps/themebuilder/app/_components/color-input/color-input.tsx @@ -27,7 +27,7 @@ export const ColorInput = ({ name, color, onClick }: ColorInputProps) => { > {color} - + ); diff --git a/apps/themebuilder/app/_components/previews/landing/landing.tsx b/apps/themebuilder/app/_components/previews/landing/landing.tsx index 0621f7b88e..ead6c25f9f 100644 --- a/apps/themebuilder/app/_components/previews/landing/landing.tsx +++ b/apps/themebuilder/app/_components/previews/landing/landing.tsx @@ -40,11 +40,11 @@ export const Landing = () => {
diff --git a/apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx b/apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx index 87202ffe03..2fc2b9c185 100644 --- a/apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx +++ b/apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx @@ -216,7 +216,7 @@ export const ColorPage = () => { aria-label={`${t('colorPane.add')} ${t('colorPane.main-color')}`} > {t('colorPane.add')} {t('themeModal.color')} - + )}{' '} {colors.main.length >= 40 && ( @@ -262,7 +262,7 @@ export const ColorPage = () => { aria-label={`${t('colorPane.add')} ${t('colorPane.support-color')}`} > {t('colorPane.add')} {t('themeModal.color')} - + )}{' '} {colors.support.length >= 40 && ( @@ -334,7 +334,7 @@ export const ColorPage = () => { data-size='sm' className={classes.overridesBtn} > - + Token Overrides } diff --git a/apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx b/apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx index 49007cbed6..6cb073cf8f 100644 --- a/apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx +++ b/apps/themebuilder/app/_components/sidebar/color-pane/color-pane.tsx @@ -90,7 +90,7 @@ export const ColorPane = ({ }} className={classes.back} > - + {t('colorPane.save')} diff --git a/apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx b/apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx index 0655813078..0d1d4ab09d 100644 --- a/apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx +++ b/apps/themebuilder/app/_components/sidebar/finish-page/finish-page.tsx @@ -37,7 +37,7 @@ export const FinishPage = ({ onPrevClick }: FinishPageProps) => { onClick={() => onPrevClick()} variant='secondary' > - + Border radius diff --git a/apps/themebuilder/app/_components/sidebar/sidebar.tsx b/apps/themebuilder/app/_components/sidebar/sidebar.tsx index 259333b061..af05948ef9 100644 --- a/apps/themebuilder/app/_components/sidebar/sidebar.tsx +++ b/apps/themebuilder/app/_components/sidebar/sidebar.tsx @@ -54,7 +54,7 @@ export const Sidebar = () => { aria-label='Toggle sidebar' aria-expanded={showSidebar} > - +
{
{name}
); diff --git a/apps/themebuilder/app/_components/theme-header/theme-header.tsx b/apps/themebuilder/app/_components/theme-header/theme-header.tsx index 8e40ad9400..f2d123a899 100644 --- a/apps/themebuilder/app/_components/theme-header/theme-header.tsx +++ b/apps/themebuilder/app/_components/theme-header/theme-header.tsx @@ -26,7 +26,7 @@ export const ThemeHeader = () => {
- + {t('header.back-to-home')} diff --git a/apps/themebuilder/app/_components/token-modal/token-modal.tsx b/apps/themebuilder/app/_components/token-modal/token-modal.tsx index 7011d625a2..cbc245b57c 100644 --- a/apps/themebuilder/app/_components/token-modal/token-modal.tsx +++ b/apps/themebuilder/app/_components/token-modal/token-modal.tsx @@ -31,7 +31,7 @@ export const TokenModal = () => { return modalRef.current?.showModal(); }} > - + {t('themeModal.use-theme')} {
-
diff --git a/apps/themebuilder/app/layouts/root/layout.tsx b/apps/themebuilder/app/layouts/root/layout.tsx index ff2870a744..b272b8ddf3 100644 --- a/apps/themebuilder/app/layouts/root/layout.tsx +++ b/apps/themebuilder/app/layouts/root/layout.tsx @@ -18,7 +18,9 @@ const rightLinks: FooterLinkListItemProps[] = [ { text: 'designsystem@digdir.no' as unknown as FooterLinkListItemProps['text'], url: 'mailto:designsystem@digdir.no', - prefix: