fix: adjustments after relative scaling (#2695)

- Fixes #2665
digdir · Oct 30, 2024 · 42fc24c · 42fc24c
1 parent 157bb86
commit 42fc24c
Show file tree

Hide file tree

Showing 27 changed files with 103 additions and 119 deletions.
diff --git a/packages/css/avatar.css b/packages/css/avatar.css
@@ -1,5 +1,6 @@
 .ds-avatar {
   --dsc-avatar-background: var(--ds-color-accent-base-default);
+  --dsc-avatar-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
   --dsc-avatar-color: var(--ds-color-accent-contrast-default);
   --dsc-avatar-size: var(--ds-sizing-12);
   --dsc-avatar-padding: var(--ds-spacing-2);
@@ -21,29 +22,28 @@
   user-select: none;
   width: var(--dsc-avatar-size);
 
-  &:not(:has(> img)) {
+  &:not(:has(img)) {
     padding: var(--dsc-avatar-padding);
   }
 
-  & img {
+  & img,
+  & svg {
     object-fit: cover;
     width: 100%;
     height: 100%;
   }
 
-  & svg {
-    max-width: 100%;
-    max-height: 100%;
+  &[data-initials]:empty::before {
+    content: attr(data-initials);
+    font-size: round(down, 1.3em, 0.0625rem); /* Default to 130% */
   }
 
-  &:empty::before {
+  &:not([data-initials]):empty::before {
     content: '';
     width: 100%;
     height: 100%;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    background-color: currentcolor;
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+    background: currentcolor;
+    mask: var(--dsc-avatar-icon-url) center / contain no-repeat;
   }
 
   &[data-variant='circle'] {
@@ -79,20 +79,11 @@
     --dsc-avatar-color: var(--ds-color-brand3-contrast-default);
   }
 
-  /* TODO: Sizes */
   &[data-size='xs'] {
-    font-size: var(--ds-body-xs-font-size);
+    font-size: var(--ds-font-size-1);
   }
 
   &[data-size='sm'] {
-    font-size: var(--ds-heading-2xs-font-size);
-  }
-
-  &[data-size='md'] {
-    font-size: var(--ds-heading-sm-font-size);
-  }
-
-  &[data-size='lg'] {
-    font-size: var(--ds-heading-md-font-size);
+    font-size: var(--ds-font-size-3);
   }
 }
diff --git a/packages/css/badge.css b/packages/css/badge.css
@@ -16,14 +16,16 @@
     box-sizing: border-box;
     color: var(--dsc-badge-color);
     display: grid;
+    font-size: var(--ds-font-size-minus-1); /* Default to small when size is not defined */
     min-height: var(--dsc-badge-size);
     min-width: var(--dsc-badge-size);
     padding: var(--dsc-badge-padding);
     place-items: center;
   }
 
-  &:not([data-size]) {
-    font-size: var(--ds-font-size-minus-1); /* Default to small when size is not defined */
+  & :where(img, svg) {
+    flex-shrink: 0; /* Never shrink icon */
+    font-size: 1.25em; /* Auto scale icon based on font-size */
   }
 
   &[data-color='info'] {

diff --git a/packages/css/button.css b/packages/css/button.css
@@ -36,7 +36,6 @@
   & :where(img, svg) {
     flex-shrink: 0;
     font-size: 1.25em;
-    margin-block: -99em; /* Prevent large icon from crashing with padding */
   }
 
   &:focus-visible {

diff --git a/packages/css/chip.css b/packages/css/chip.css
@@ -13,7 +13,7 @@
   --dsc-chip-input-color--checked: var(--ds-color-accent-base-default);
 
   --dsc-chip-border-radius: var(--ds-border-radius-full);
-  --dsc-chip-height: var(--ds-sizing-9);
+  --dsc-chip-height: var(--ds-sizing-8);
   --dsc-chip-icon-size: var(--ds-spacing-7);
   --dsc-chip-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
   --dsc-chip-input-size: var(--ds-spacing-6);

diff --git a/packages/css/fieldset.css b/packages/css/fieldset.css
@@ -21,7 +21,7 @@
 
   & > legend + p {
     color: var(--ds-color-neutral-text-subtle);
-    margin-block: 0;
+    margin-block: var(--ds-spacing-1) 0;
   }
 
   &:disabled > legend,

diff --git a/packages/css/helptext.css b/packages/css/helptext.css
@@ -4,7 +4,7 @@
   --dsc-helptext-size: var(--ds-sizing-7);
 
   border-radius: var(--ds-border-radius-full);
-  border: 2px solid;
+  border: max(1px, calc(var(--ds-spacing-1) / 2)) solid; /* Allow border-width to grow with font-size */
   box-sizing: border-box;
   height: var(--dsc-helptext-size);
   min-height: 0;

diff --git a/packages/css/input.css b/packages/css/input.css
@@ -8,7 +8,8 @@
   --dsc-input-border-color--invalid: var(--ds-color-danger-border-default);
   --dsc-input-border-color--readonly: var(--ds-color-neutral-border-subtle);
   --dsc-input-border-color: var(--ds-color-neutral-border-default);
-  --dsc-input-border-width--toggle: 2px;
+  --dsc-input-border-width--toggle: max(1px, calc(var(--ds-spacing-1) / 2)); /* Allow border-width to grow with font-size */
+  --dsc-input-border-width--toggle: round(up, max(1px, calc(var(--ds-spacing-1) / 2)), 0.0625rem); /* Round up to nearest 1px */
   --dsc-input-border-width: 1px;
   --dsc-input-color--checked: var(--ds-color-accent-contrast-default);
   --dsc-input-color--invalid: var(--ds-color-danger-contrast-default);

diff --git a/packages/css/link.css b/packages/css/link.css
@@ -6,14 +6,14 @@
   --dsc-link-color--hover: var(--ds-color-accent-text-default);
   --dsc-link-color--visited: var(--ds-global-purple-12);
   --dsc-link-color: var(--ds-color-accent-text-subtle);
-  --dsc-link-text-decoration-thickness--hover: max(2px, 0.125rem, 0.12em);
-  --dsc-link-text-decoration-thickness: max(1px, 0.0625rem);
+  --dsc-link-text-decoration-thickness--hover: 0.125em; /* 2px ish */
+  --dsc-link-text-decoration-thickness: 0.0625em; /* 1px ish */
 
   color: var(--dsc-link-color);
   outline: none;
   text-decoration-style: solid;
   text-decoration-thickness: var(--dsc-link-text-decoration-thickness);
-  text-underline-offset: max(5px, 0.25rem);
+  text-underline-offset: 0.27em; /* 5px ish */
 
   & :is(img, svg) {
     vertical-align: middle; /* Align img or svg icon with text */

diff --git a/packages/css/tabs.css b/packages/css/tabs.css
@@ -42,6 +42,11 @@
     font-size: inherit; /* Ensure inheriting font-size when <button> */
   }
 
+  & :where(img, svg) {
+    flex-shrink: 0; /* Never shrink icon */
+    font-size: 1.25em; /* Auto scale icon based on font-size */
+  }
+
   &[aria-selected='true'] {
     --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
     --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
@@ -57,7 +62,7 @@
   &::after {
     content: '';
     display: block;
-    height: 3px;
+    height: .15em; /* Scale with font */
     width: 100%;
     background-color: var(--dsc-tabs__tab-bottom-border-color);
     position: absolute;

diff --git a/packages/react/src/components/Avatar/Avatar.stories.tsx b/packages/react/src/components/Avatar/Avatar.stories.tsx
@@ -37,21 +37,14 @@ export const NoName: Story = () => <Avatar aria-label='Ola' />;
 
 export const Sizes: Story = () => (
   <>
-    <Avatar data-size='xs' aria-label='extra small'>
-      xs
-    </Avatar>
+    <Avatar data-size='xs' aria-label='extra small' initials='xs' />
     <Avatar data-size='xs' aria-label='extra small' />
-    <Avatar data-size='sm' aria-label='small'>
-      sm
-    </Avatar>
+    <Avatar data-size='sm' aria-label='small' initials='sm' />
     <Avatar data-size='sm' aria-label='small' />
-    <Avatar data-size='md' aria-label='medium'>
-      md
-    </Avatar>
+    <Avatar aria-label='default' initials='md' />
+    <Avatar data-size='md' aria-label='medium' initials='md' />
     <Avatar data-size='md' aria-label='medium' />
-    <Avatar data-size='lg' aria-label='large'>
-      lg
-    </Avatar>
+    <Avatar data-size='lg' aria-label='large' initials='lg' />
     <Avatar data-size='lg' aria-label='large' />
   </>
 );
@@ -108,7 +101,7 @@ export const InDropdown: Story = () => (
         <Dropdown.Item>
           <Dropdown.Button>
             <Avatar data-size='xs' color='brand1' aria-label='Sogndal Kommune'>
-              <BriefcaseIcon fontSize='5em' />
+              <BriefcaseIcon aria-hidden />
             </Avatar>
             Sogndal kommune
           </Dropdown.Button>

diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
@@ -24,6 +24,10 @@ export type AvatarProps = {
    * @default 'circle'
    */
   variant?: 'circle' | 'square';
+  /**
+   * Initials to display inside the avatar.
+   */
+  initials?: string;
   /**
    * Image, icon or initials to display inside the avatar.
    *
@@ -36,7 +40,7 @@ export type AvatarProps = {
  * Avatars are used to represent people or entities.
  *
  * @example
- * <Avatar aria-label="John Doe">JD</Avatar>
+ * <Avatar aria-label="John Doe" initials="JD" />
  *
  * @example
  * <Avatar aria-label="John Doe">
@@ -55,6 +59,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
     variant = 'circle',
     className,
     children,
+    initials,
     ...rest
   },
   ref,
@@ -68,6 +73,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
       className={cl('ds-avatar', className)}
       data-variant={variant}
       data-color={color}
+      data-initials={initials}
       role='img'
       aria-label={ariaLabel}
       {...rest}

diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/Badge/Badge.stories.tsx
@@ -39,16 +39,16 @@ export const Floating: Story = (args) => (
     }}
   >
     <Badge color='accent' placement='top-right'>
-      <EnvelopeClosedFillIcon fontSize='2rem' title='Meldinger' />
+      <EnvelopeClosedFillIcon title='Meldinger' />
     </Badge>
     <Badge color='accent' placement='top-left'>
-      <EnvelopeClosedFillIcon fontSize='2rem' title='Meldinger' />
+      <EnvelopeClosedFillIcon title='Meldinger' />
     </Badge>
     <Badge color='accent' placement='bottom-right'>
-      <EnvelopeClosedFillIcon fontSize='2rem' title='Meldinger' />
+      <EnvelopeClosedFillIcon title='Meldinger' />
     </Badge>
     <Badge color='accent' placement='bottom-left'>
-      <EnvelopeClosedFillIcon fontSize='2rem' title='Meldinger' />
+      <EnvelopeClosedFillIcon title='Meldinger' />
     </Badge>
     <Badge color='accent' placement='top-right' overlap='circle'>
       <div
@@ -108,7 +108,7 @@ export const CustomPlacement: Story = (args) => (
         right: '10%',
       }}
     >
-      <EnvelopeClosedFillIcon fontSize='2rem' title='Meldinger' />
+      <EnvelopeClosedFillIcon title='Meldinger' />
     </Badge>
   </div>
 );
@@ -121,13 +121,13 @@ export const Status: Story = (args) => (
     }}
   >
     <Badge color='danger' data-size='sm'>
-      <VideoFillIcon fontSize='2rem' title='Videokamera' />
+      <VideoFillIcon title='Videokamera' />
     </Badge>
-    <Badge color='danger'>
-      <VideoFillIcon fontSize='2rem' title='Videokamera' />
+    <Badge color='danger' data-size='md'>
+      <VideoFillIcon title='Videokamera' />
     </Badge>
     <Badge color='danger' data-size='lg'>
-      <VideoFillIcon fontSize='2rem' title='Videokamera' />
+      <VideoFillIcon title='Videokamera' />
     </Badge>
   </div>
 );
@@ -136,13 +136,13 @@ export const InTabs: Story = (args) => (
   <Tabs defaultValue='value1'>
     <Tabs.List>
       <Tabs.Tab value='value1'>
-        <HeartFillIcon fontSize='1.75rem' aria-hidden />
+        <HeartFillIcon aria-hidden />
         Favoritter
         <Badge count={64} maxCount={10} color='neutral' />
       </Tabs.Tab>
       <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
       <Tabs.Tab value='value3'>
-        <PencilIcon fontSize='1.75rem' aria-hidden />
+        <PencilIcon aria-hidden />
         Nylige
         <Badge count={2} color='neutral' />
       </Tabs.Tab>
@@ -162,17 +162,17 @@ export const InButton: Story = (args) => (
   >
     <Button icon variant='tertiary'>
       <Badge color='danger' count={1000} maxCount={99} data-size='sm'>
-        <InboxIcon fontSize='1.75rem' title='Innboks' />
+        <InboxIcon title='Innboks' />
       </Badge>
     </Button>
     <Button icon variant='tertiary'>
       <Badge color='danger' count={10} data-size='sm'>
-        <ChatIcon fontSize='1.75rem' title='Meldinger' />
+        <ChatIcon title='Meldinger' />
       </Badge>
     </Button>
     <Button icon variant='tertiary'>
       <Badge color='danger' data-size='sm'>
-        <VideoIcon fontSize='1.75rem' title='Skru på video' />
+        <VideoIcon title='Skru på video' />
       </Badge>
     </Button>
   </div>

diff --git a/packages/react/src/components/Card/Card.stories.tsx b/packages/react/src/components/Card/Card.stories.tsx
@@ -208,7 +208,7 @@ export const Composed: Story = () => (
         >
           <Heading>Rolle 1</Heading>
           <Button variant='secondary' color='danger' data-size='sm'>
-            <TrashFillIcon aria-hidden fontSize='1.5rem' />
+            <TrashFillIcon aria-hidden />
             Fjern
           </Button>
         </div>
@@ -230,7 +230,7 @@ export const Composed: Story = () => (
       <Card.Block>
         <Button variant='secondary' data-size='sm'>
           Legg til rolle
-          <PlusIcon aria-hidden fontSize='1.5rem' />
+          <PlusIcon aria-hidden />
         </Button>
       </Card.Block>
     </Card>

diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.tsx b/packages/react/src/components/Dropdown/Dropdown.stories.tsx
@@ -79,7 +79,7 @@ export const Icons: StoryFn<typeof Dropdown> = (args) => {
                 target='_blank'
                 rel='noreferrer'
               >
-                <LinkIcon aria-hidden fontSize='1.5rem' />
+                <LinkIcon aria-hidden />
                 Github
               </a>
             </Dropdown.Button>
@@ -91,7 +91,7 @@ export const Icons: StoryFn<typeof Dropdown> = (args) => {
                 target='_blank'
                 rel='noreferrer'
               >
-                <LinkIcon aria-hidden fontSize='1.5rem' />
+                <LinkIcon aria-hidden />
                 Designsystemet.no
               </a>
             </Dropdown.Button>
@@ -119,7 +119,7 @@ export const Controlled: StoryFn<typeof Dropdown> = () => {
                 target='_blank'
                 rel='noreferrer'
               >
-                <LinkIcon aria-hidden fontSize='1.5rem' />
+                <LinkIcon aria-hidden />
                 Github
               </a>
             </Dropdown.Button>
@@ -131,7 +131,7 @@ export const Controlled: StoryFn<typeof Dropdown> = () => {
                 target='_blank'
                 rel='noreferrer'
               >
-                <LinkIcon aria-hidden fontSize='1.5rem' />
+                <LinkIcon aria-hidden />
                 Designsystemet.no
               </a>
             </Dropdown.Button>