Changed the theming to LWC rather than commerce cloud

Better handling of the CSS var editor
moved to rc.14 (fixed mobile layout)

.vscode/launch.json

@@ -0,0 +1,6 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+
+}

packages/lwc-app/.storybook/main.js

@@ -1,17 +1,3 @@
-module.exports = {
-    stories: ['../stories/**/*.stories.@(js|mdx|md)'],
-  logLevel: 'debug',
-  addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-controls',
-    '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-links',
-    '@storybook/addon-storysource',
-    '@storybook/addon-viewport',
-  ],
-};
 // main.js
 // https://storybook.js.org/docs/configurations/overview/#mainjs-is-a--preset
 

packages/lwc-app/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme
+});

packages/lwc-app/.storybook/theme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming/create';
+import logo from "./assets/lwc.webp";
+
+export default create({
+  base: 'light',
+  brandTitle: "LWC Storybook",
+  brandImage: logo,
+});

packages/lwc-app/package.json

@@ -20,36 +20,32 @@
         "@rollup/plugin-commonjs": "^13.0.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-replace": "2.3.3",
-        "rollup-plugin-node-builtins": "^2.1.2",
-        "rollup-plugin-node-globals": "^1.4.0",
-        "rollup-plugin-compat": "0.22.1",
-        "rollup-plugin-copy": "^3.3.0",
-        "rollup-plugin-terser": "^6.1.0",
+        "@rollup/plugin-virtual": "2.0.3",
         "concurrently": "~4.0.1",
         "cross-env": "^6.0.3",
         "lint-staged": "^9.4",
 
         "lwc-library": "^0.0.1",
 
-        "@storybook/addon-a11y": "6.0.0-rc.9",
-        "@storybook/addon-actions": "6.0.0-rc.9",
-        "@storybook/addon-backgrounds": "6.0.0-rc.9",
-        "@storybook/addon-controls": "6.0.0-rc.9",
-        "@storybook/addon-docs": "6.0.0-rc.9",
-        "@storybook/addon-events": "6.0.0-rc.9",
-        "@storybook/addon-jest": "6.0.0-rc.9",
-        "@storybook/addon-links": "6.0.0-rc.9",
-        "@storybook/addon-storyshots": "6.0.0-rc.9",
-        "@storybook/addon-storysource": "6.0.0-rc.9",
-        "@storybook/addon-viewport": "6.0.0-rc.9",
-        "@storybook/addons": "6.0.0-rc.9",
-        "@storybook/client-api": "6.0.0-rc.9",
-        "@storybook/core": "6.0.0-rc.9",
-        "@storybook/core-events": "6.0.0-rc.9",
-        "@storybook/source-loader": "6.0.0-rc.9",
-        "@storybook/web-components": "6.0.0-rc.9",
+        "@storybook/addon-a11y": "6.0.0-rc.14",
+        "@storybook/addon-actions": "6.0.0-rc.14",
+        "@storybook/addon-backgrounds": "6.0.0-rc.14",
+        "@storybook/addon-controls": "6.0.0-rc.14",
+        "@storybook/addon-docs": "6.0.0-rc.14",
+        "@storybook/addon-events": "6.0.0-rc.14",
+        "@storybook/addon-jest": "6.0.0-rc.14",
+        "@storybook/addon-links": "6.0.0-rc.14",
+        "@storybook/addon-storyshots": "6.0.0-rc.14",
+        "@storybook/addon-storysource": "6.0.0-rc.14",
+        "@storybook/addon-viewport": "6.0.0-rc.14",
+        "@storybook/addons": "6.0.0-rc.14",
+        "@storybook/client-api": "6.0.0-rc.14",
+        "@storybook/core": "6.0.0-rc.14",
+        "@storybook/core-events": "6.0.0-rc.14",
+        "@storybook/source-loader": "6.0.0-rc.14",
+        "@storybook/web-components": "6.0.0-rc.14",
 
-        "@storybook/cli": "6.0.0-rc.9",
+        "@storybook/cli": "6.0.0-rc.14",
         "lit-html": "^1.2.1",
         "npm-run-all": "4.1.5",
         "web-component-analyzer": "^1.0.3"

packages/lwc-library/.storybook/theme.js

@@ -1,8 +1,8 @@
 import { create } from '@storybook/theming/create';
-import logo from "./assets/commerce-cloud.png";
+import logo from "./assets/lwc.webp";
 
 export default create({
   base: 'light',
-  brandTitle: "Salesforce Commerce Cloud",
+  brandTitle: "LWC Storybook",
   brandImage: logo,
 });

packages/lwc-library/package.json

@@ -28,25 +28,25 @@
         "cross-env": "^6.0.3",
         "lint-staged": "^9.4",
 
-        "@storybook/addon-a11y": "6.0.0-rc.9",
-        "@storybook/addon-actions": "6.0.0-rc.9",
-        "@storybook/addon-backgrounds": "6.0.0-rc.9",
-        "@storybook/addon-controls": "6.0.0-rc.9",
-        "@storybook/addon-docs": "6.0.0-rc.9",
-        "@storybook/addon-events": "6.0.0-rc.9",
-        "@storybook/addon-jest": "6.0.0-rc.9",
-        "@storybook/addon-links": "6.0.0-rc.9",
-        "@storybook/addon-storyshots": "6.0.0-rc.9",
-        "@storybook/addon-storysource": "6.0.0-rc.9",
-        "@storybook/addon-viewport": "6.0.0-rc.9",
-        "@storybook/addons": "6.0.0-rc.9",
-        "@storybook/client-api": "6.0.0-rc.9",
-        "@storybook/core": "6.0.0-rc.9",
-        "@storybook/core-events": "6.0.0-rc.9",
-        "@storybook/source-loader": "6.0.0-rc.9",
-        "@storybook/web-components": "6.0.0-rc.9",
+        "@storybook/addon-a11y": "6.0.0-rc.14",
+        "@storybook/addon-actions": "6.0.0-rc.14",
+        "@storybook/addon-backgrounds": "6.0.0-rc.14",
+        "@storybook/addon-controls": "6.0.0-rc.14",
+        "@storybook/addon-docs": "6.0.0-rc.14",
+        "@storybook/addon-events": "6.0.0-rc.14",
+        "@storybook/addon-jest": "6.0.0-rc.14",
+        "@storybook/addon-links": "6.0.0-rc.14",
+        "@storybook/addon-storyshots": "6.0.0-rc.14",
+        "@storybook/addon-storysource": "6.0.0-rc.14",
+        "@storybook/addon-viewport": "6.0.0-rc.14",
+        "@storybook/addons": "6.0.0-rc.14",
+        "@storybook/client-api": "6.0.0-rc.14",
+        "@storybook/core": "6.0.0-rc.14",
+        "@storybook/core-events": "6.0.0-rc.14",
+        "@storybook/source-loader": "6.0.0-rc.14",
+        "@storybook/web-components": "6.0.0-rc.14",
 
-        "@storybook/cli": "6.0.0-rc.9",
+        "@storybook/cli": "6.0.0-rc.14",
         "lit-html": "^1.2.1",
         "npm-run-all": "4.1.5",
         "@open-wc/lit-helpers": "0.3.10",

packages/lwc-library/stories/unit-cssvars.stories.js

@@ -19,14 +19,14 @@ DefaultWithArgs.args = {
     message: 'Hello, CSS Variables!',
 }
 
-export const SetVariables = ({message,unitBorderWidth,unitBorderColor,unitTextColor,unitTextSize}) => {
+export const SetVariables = ({message,...args}) => {
     return html`
         <style>
             .vars {
-                --unit-border-width: ${unitBorderWidth};
-                --unit-border-color: ${unitBorderColor};
-                --unit-text-color: ${unitTextColor};
-                --unit-text-size: ${unitTextSize};
+                --unit-border-width: ${args['--unit-border-width']};
+                --unit-border-color: ${args['--unit-border-color']};
+                --unit-text-color: ${args['--unit-text-color']};
+                --unit-text-size: ${args['--unit-text-size']};
             }
         </style>
         <div class='vars'>
@@ -39,8 +39,8 @@ export const SetVariables = ({message,unitBorderWidth,unitBorderColor,unitTextCo
 };
 SetVariables.args = {
     message: 'Hello, CSS Variables!',
-    unitBorderWidth: '1px',
-    unitBorderColor: 'red',
-    unitTextColor: 'green',
-    unitTextSize: '20px'
+    "--unit-border-width": '1px',
+    "--unit-border-color": 'red',
+    "--unit-text-color": 'green',
+    "--unit-text-size": '20px'
 }