Develop fjern colored bg

.storybook/main.ts

@@ -29,7 +29,7 @@ const config: StorybookConfig = {
         name: getAbsolutePath('@storybook/react-vite'),
         options: {},
     },
-    staticDirs: ['../public'],
+    staticDirs: ['./public'],
     managerHead: head =>
         `${head}<link rel="icon" type="image/x-icon" href="/favicon.ico">`,
 };

.storybook/preview.less

@@ -1,7 +1,7 @@
 @import '@sb1/ffe-core/css/spacing.css';
 @import '@sb1/ffe-core/css/colors.css';
 
-.ffe-docs-content-container--colored {
+.ffe-docs-content-container {
     padding: var(--ffe-spacing-sm);
 }
 
@@ -10,7 +10,4 @@
     &--dark-mode {
         background: var(--ffe-farge-svart);
     }
-    &--colored {
-        background: var(--ffe-farge-fjell);
-    }
 }

.storybook/preview.tsx

@@ -16,27 +16,19 @@ const preview: Preview = {
     decorators: [
         (Story, context) => {
             const { scheme } = context.globals;
-            if (scheme === 'all') {
+            if (scheme === 'both') {
                 return (
                     <>
                         <div className="ffe-docs-content-container">
                             <Story />
                         </div>
-                        <div className="ffe-docs-content-container ffe-docs-content-container--colored">
-                            <Story onColoredBg={true} />
-                        </div>
                         <div className="ffe-docs-content-container ffe-docs-content-container--dark-mode regard-color-scheme-preference">
                             <Story />
                         </div>
                     </>
                 );
-            } else if (scheme === 'colored') {
-                return (
-                    <div className="ffe-docs-content-container ffe-docs-content-container--colored">
-                        <Story onColoredBg={true} />
-                    </div>
-                );
-            } else if (scheme === 'dark') {
+            }
+            if (scheme === 'dark') {
                 return (
                     <div className="ffe-docs-content-container ffe-docs-content-container--dark-mode regard-color-scheme-preference">
                         <Story />
@@ -62,7 +54,7 @@ const preview: Preview = {
             },
             toolbar: {
                 icon: 'mirror',
-                items: ['light', 'dark', 'colored', 'all'],
+                items: ['light', 'dark', 'both'],
                 dynamicTitle: true,
             },
         },

commitlint.config.js

@@ -6,6 +6,7 @@ module.exports = {
             2,
             'always',
             [
+                '.storybook',
                 'release',
                 'component-overview',
                 'eslint-config-ffe',

package.json

@@ -32,11 +32,12 @@
     "build-storybook": "storybook build"
   },
   "lint-staged": {
-    "{packages,buildtool,component-overview,linting,test}/**/*.{js,jsx,ts,tsx,json,css,less,md}": [
+    "{packages,buildtool,component-overview,linting,test,.storybook}/**/*.{js,jsx,ts,tsx,json,css,less,md}": [
       "prettier --write"
     ]
   },
   "workspaces": [
+    ".storybook/*",
     "packages/*",
     "linting/*",
     "buildtool",