Merge pull request #56 from IATI/ml/white-background

Add light grey background colour to body

Author: codemacabre

.storybook/preview.ts

@@ -24,6 +24,7 @@ const preview: Preview = {
     backgrounds: {
       values: [
         { name: "light", value: "#fff" },
+        { name: "grey", value: "#f6f6f6" },
         { name: "dark", value: "#155366" },
       ],
     },

src/scss/base/_defaults.scss

@@ -0,0 +1,5 @@
+@use "../tokens/color" as *;
+
+body {
+  background-color: $color-grey-10;
+}

src/scss/base/_index.scss

@@ -2,3 +2,4 @@
 @forward "reset";
 @forward "mixins";
 @forward "focus";
+@forward "defaults";

src/scss/components/brand-background/brand-background.stories.ts

@@ -4,6 +4,11 @@ import { html } from "lit";
 
 const meta: Meta = {
   title: "Components/Brand Background",
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
 };
 
 export default meta;

src/scss/components/breadcrumb/breadcrumb.stories.ts

@@ -4,6 +4,11 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 
 const meta: Meta = {
   title: "Components/Breadcrumb",
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
 };
 
 export default meta;

src/scss/components/button/button.stories.ts

@@ -4,6 +4,11 @@ import { html } from "lit";
 
 const meta: Meta = {
   title: "Components/Button",
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
 };
 
 export default meta;

src/scss/components/callout/callout.stories.ts

@@ -3,6 +3,11 @@ import { html } from "lit";
 
 const meta: Meta = {
   title: "Components/Callout",
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
 };
 
 export default meta;

src/scss/components/card/card.stories.ts

@@ -4,6 +4,11 @@ import { html } from "lit";
 
 const meta: Meta = {
   title: "Components/Card",
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
 };
 
 export default meta;

src/scss/components/figures/figures.stories.ts

@@ -3,7 +3,11 @@ import { html } from "lit";
 
 const meta: Meta = {
   title: "Components/Figures",
-  parameters: {},
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
 };
 
 const items = [

src/scss/components/footer/footer.stories.ts

@@ -13,6 +13,9 @@ const meta: Meta = {
   title: "Components/Footer",
   parameters: {
     layout: "fullscreen",
+    backgrounds: {
+      default: "light",
+    },
   },
 };