fix: move default background to body element (#2754)

- Moves default background to `<body>` element instead of `:root` to align with best practice and avoid conflicts when setting both background on body and :root - Fixes minor sizing issue on stories with custom css
digdir · Nov 8, 2024 · d75ffad · d75ffad
1 parent 5601aad
commit d75ffad
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/.changeset/fifty-hornets-hang.md b/.changeset/fifty-hornets-hang.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+CSS: Move default background-color to `<body>` element
diff --git a/apps/storybook/story-utils/customStylesDecorator.tsx b/apps/storybook/story-utils/customStylesDecorator.tsx
@@ -41,6 +41,7 @@ export const customStylesDecorator: Decorator = (Story, ctx) => {
     <div
       className='storybook-decorator'
       style={{
+        boxSizing: 'border-box',
         overflow: 'hidden',
         padding: '1rem',
         ...style,

diff --git a/packages/css/base/base.css b/packages/css/base/base.css
@@ -25,7 +25,11 @@
     --ds-font-size-minus-1: round(down, max(.9em, .875rem), 0.0625rem); /* Default to 90% of font-size, but minimum 14px */
     --ds-font-size-plus-1: round(down, 1.1em, 0.0625rem); /* Default to 110% */
   }
+}
 
+/* Set default background and color on <body> (not :root) to align with best practice */
+body,
+[data-ds-color-mode] {
   color: var(--ds-color-neutral-text-default);
   background-color: var(--ds-color-neutral-background-default);
 }