docs(Storybook): update storybook to use carbon styles

packages/react/.storybook/manager-head.html

@@ -1,19 +1,36 @@
-<meta name="keywords" content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js">
-<meta name="description" content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
+<meta
+  name="keywords"
+  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js"
+/>
+<meta
+  name="description"
+  content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs."
+/>
 
 <!-- Open Graph -->
-<meta property="og:title" content="Carbon Components React">
-<meta property="og:site_name" content="Carbon Components React">
-<meta property="og:description" content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
-<meta property="og:image" content="https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719">
-<meta property="og:url" content="http://react.carbondesignsystem.com">
+<meta property="og:title" content="Carbon Components React" />
+<meta property="og:site_name" content="Carbon Components React" />
+<meta
+  property="og:description"
+  content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs."
+/>
+<meta
+  property="og:image"
+  content="https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719"
+/>
+<meta property="og:url" content="http://react.carbondesignsystem.com" />
+
+<!-- Favicon -->
+<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" />
 
 <!-- Social -->
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:image:alt" content="Carbon Design System">
-<meta name="twitter:site" content="@_carbondesign">
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image:alt" content="Carbon Design System" />
+<meta name="twitter:site" content="@_carbondesign" />
 
 <!-- Storybook override -->
 <script>
-  document.title = 'Carbon Components React';
+  setTimeout(function () {
+    document.title = 'Carbon Components React';
+  }, 1000);
 </script>

packages/react/.storybook/manager.js

@@ -4,6 +4,12 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});
 
 // These options used by storybook often conflict with developer tools,
 // conditional panels, or other things that get in the way of our workflow

packages/react/.storybook/preview-head.html

@@ -0,0 +1,18 @@
+<!-- <link
+  href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600&display=swap"
+  rel="stylesheet"
+/> -->
+<style>
+  .sbdocs-wrapper .sbdocs-a {
+    color: #0f62fe;
+  }
+
+  .sbdocs-wrapper .sbdocs-a:hover {
+    color: #0353e9;
+  }
+
+  .sbdocs-wrapper .sbdocs-h2 {
+    margin-bottom: 0;
+    padding-bottom: 12px;
+  }
+</style>

packages/react/.storybook/preview.js

@@ -12,12 +12,13 @@ import { themes } from '@storybook/theming';
 import { configureActions } from '@storybook/addon-actions';
 import { CARBON_CURRENT_THEME, CARBON_TYPE_TOKEN } from './shared';
 import Container from './Container';
-import PackageInfo from './../package.json';
+import carbonTheme from './theme';
 
 const customPropertyPrefix = 'cds';
 
 addParameters({
   options: {
+    theme: carbonTheme,
     /**
      * We sort our stories by default alphabetically, however there are specific
      * keywords that will be sorted further down the sidebar, including
@@ -85,12 +86,6 @@ addParameters({
       // two ids
       return idA.localeCompare(idB);
     },
-    theme: {
-      ...themes.light,
-      brandTitle: `Carbon Components React v${PackageInfo.version}`,
-      brandUrl:
-        'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
-    },
   },
 });
 

packages/react/.storybook/theme.js

@@ -0,0 +1,51 @@
+import { create } from '@storybook/theming';
+import { g10 } from '@carbon/themes';
+import PackageInfo from './../package.json';
+
+const {
+  field01,
+  interactive01,
+  interactive02,
+  text01,
+  inverse01,
+  ui01,
+  ui03,
+  ui04,
+  uiBackground,
+} = g10;
+
+export default create({
+  base: 'light',
+
+  colorPrimary: interactive01,
+  colorSecondary: interactive02,
+
+  // UI
+  appBg: uiBackground,
+  appContentBg: ui01,
+  appBorderColor: ui04,
+  appBorderRadius: 0,
+
+  // Typography
+  fontBase: '"IBM Plex Sans", sans-serif',
+  fontCode: '"IBM Plex Mono", monospace',
+
+  // Text colors
+  textColor: text01,
+  textInverseColor: inverse01,
+
+  // Toolbar default and active colors
+  barTextColor: text01,
+  barSelectedColor: interactive01,
+  barBg: uiBackground,
+
+  // Form colors
+  inputBg: field01,
+  inputBorder: ui03,
+  inputTextColor: text01,
+  inputBorderRadius: 0,
+
+  brandTitle: `Carbon Components React v${PackageInfo.version}`,
+  brandUrl:
+    'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
+});

packages/react/package.json

@@ -29,12 +29,12 @@
   },
   "scripts": {
     "build": "yarn clean && node scripts/build.js && rollup -c",
-    "build-storybook": "cross-env NODE_ENV=production build-storybook",
+    "build-storybook": "cross-env NODE_ENV=production build-storybook -s ./.storybook/assets",
     "clean": "rimraf es lib umd storybook-static build react-docgen.json",
     "postinstall": "carbon-telemetry collect --install",
     "prepublish": "yarn build",
     "start": "yarn storybook",
-    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000",
+    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000 -s ./.storybook/assets",
     "snapshot": "build-storybook && percy-storybook --widths=320,1280"
   },
   "peerDependencies": {
@@ -82,7 +82,7 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/react": "^5.3.19",
     "@storybook/source-loader": "^5.3.19",
-    "@storybook/theming": "^5.3.19",
+    "@storybook/theming": "^6.1.18",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",

yarn.lock

@@ -2198,9 +2198,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/core@npm:^10.0.20, @emotion/core@npm:^10.0.9":
-  version: 10.0.27
-  resolution: "@emotion/core@npm:10.0.27"
+"@emotion/core@npm:^10.0.20, @emotion/core@npm:^10.0.9, @emotion/core@npm:^10.1.1":
+  version: 10.1.1
+  resolution: "@emotion/core@npm:10.1.1"
   dependencies:
     "@babel/runtime": ^7.5.5
     "@emotion/cache": ^10.0.27
@@ -2210,7 +2210,7 @@ __metadata:
     "@emotion/utils": 0.11.3
   peerDependencies:
     react: ">=16.3.0"
-  checksum: e64cde15423ae7ee11a9c14a8f576b583b7b27521cb634ad9409ddb8a127a1a1480aa65e30cc3d442140a07dbe4c3f2c8becdec43a131ad443dae157c4763ee5
+  checksum: 78fec4a70569be2291180eafe3a882303a05285d68fec4d6b6974710f47fa1cc3b105468607e544e4a92bf7a9f94d9e5d2bfd735523a38b90f2d5dd4ce27e308
   languageName: node
   linkType: hard
 
@@ -2241,6 +2241,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:^0.8.6":
+  version: 0.8.8
+  resolution: "@emotion/is-prop-valid@npm:0.8.8"
+  dependencies:
+    "@emotion/memoize": 0.7.4
+  checksum: 4a6993c4e6a49bcdc772aa5931fa2f00ce6367f7f6fc9cfe46dd50014c9510f9c6b1e355f297655875a8bfd1481e42546900bbbc84f3c0b629a001b4d82e436e
+  languageName: node
+  linkType: hard
+
 "@emotion/memoize@npm:0.7.4":
   version: 0.7.4
   resolution: "@emotion/memoize@npm:0.7.4"
@@ -2283,7 +2292,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/styled@npm:^10.0.17":
+"@emotion/styled@npm:^10.0.17, @emotion/styled@npm:^10.0.23":
   version: 10.0.27
   resolution: "@emotion/styled@npm:10.0.27"
   dependencies:
@@ -4648,6 +4657,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:6.1.18":
+  version: 6.1.18
+  resolution: "@storybook/client-logger@npm:6.1.18"
+  dependencies:
+    core-js: ^3.0.1
+    global: ^4.3.2
+  checksum: acf8cf6b58aaea02fff15a33d715268eabed69ffc7fe55cec609bbde5e05b3d47a9635e919a7ecda431c7beed0eb7d11b8c49bac733356dc28e3403dc0fce431
+  languageName: node
+  linkType: hard
+
 "@storybook/components@npm:5.3.19, @storybook/components@npm:^5.0.6":
   version: 5.3.19
   resolution: "@storybook/components@npm:5.3.19"
@@ -4883,7 +4902,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:5.3.19, @storybook/theming@npm:^5.3.19":
+"@storybook/theming@npm:5.3.19":
   version: 5.3.19
   resolution: "@storybook/theming@npm:5.3.19"
   dependencies:
@@ -4906,6 +4925,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:^6.1.18":
+  version: 6.1.18
+  resolution: "@storybook/theming@npm:6.1.18"
+  dependencies:
+    "@emotion/core": ^10.1.1
+    "@emotion/is-prop-valid": ^0.8.6
+    "@emotion/styled": ^10.0.23
+    "@storybook/client-logger": 6.1.18
+    core-js: ^3.0.1
+    deep-object-diff: ^1.1.0
+    emotion-theming: ^10.0.19
+    global: ^4.3.2
+    memoizerific: ^1.11.3
+    polished: ^3.4.4
+    resolve-from: ^5.0.0
+    ts-dedent: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: 395a079c4e262ba6380b448cd53783577ba303baf96d12be0f78afc59aab0a7c3f0db8a7eae715e8a740240adb0849bbd3c7a37ba5d38d4e7dcb9b8eaed784b0
+  languageName: node
+  linkType: hard
+
 "@storybook/ui@npm:5.3.19":
   version: 5.3.19
   resolution: "@storybook/ui@npm:5.3.19"
@@ -9185,7 +9227,7 @@ __metadata:
     "@storybook/addons": ^5.3.19
     "@storybook/react": ^5.3.19
     "@storybook/source-loader": ^5.3.19
-    "@storybook/theming": ^5.3.19
+    "@storybook/theming": ^6.1.18
     babel-core: ^7.0.0-bridge.0
     babel-loader: ^8.1.0
     babel-plugin-dev-expression: ^0.2.2
@@ -24861,12 +24903,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"polished@npm:^3.3.1":
-  version: 3.4.2
-  resolution: "polished@npm:3.4.2"
+"polished@npm:^3.3.1, polished@npm:^3.4.4":
+  version: 3.7.1
+  resolution: "polished@npm:3.7.1"
   dependencies:
-    "@babel/runtime": ^7.6.3
-  checksum: a8c3f0961ee6928ad2c8a37b8807ceba80f0371c32ecf555400b8cae7ee103bdb89160f20300e0b51f1331c0505718f4f1c4924dcc20a6baaada23e4db970f5f
+    "@babel/runtime": ^7.12.5
+  checksum: 2483fc6957697620fc5ce2e93bd0fa70f6080d04b112b719426f248afb7cd21d78b5def38939a1b8ac2bc266b9bcdd8acac74639e5ad2aae64a9ac570a82b798
   languageName: node
   linkType: hard
 
@@ -31619,6 +31661,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-dedent@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "ts-dedent@npm:2.0.0"
+  checksum: 386cff404ab3e07eb35431fbb67cedf2a00f3dbd268218fb962ad21ae09383cb787d6cf8937a543bbac6902e54011309fed28b2caa1c48c35b61e8a8c798acb0
+  languageName: node
+  linkType: hard
+
 "ts-map@npm:^1.0.3":
   version: 1.0.3
   resolution: "ts-map@npm:1.0.3"