Enable Carbon CSS custom properties

Enable the Carbon CSS custom properties feature flag so we can more
easily handle themeing, including component-specific overrides as
needed (e.g. log container).

Replace some hard-coded background colours with the appropriate theme
tokens so they're updated correctly to match the selected theme.

Reorganise the SCSS imports so they're no longer loaded from the
individual components' JS files. This is for a number of reasons:
- support for the CSS custom properties
- reduce duplicate styles in output (each JS import of a SCSS file
  results in a new SASS build context rendering the `import-once`
  useless)
- give consumers more control over the styles loaded

A future PR will introduce more easily consumable bundles of styles,
for example the `PipelineRun` component currently requires the
`TaskTree`, `Task`, `Step`, etc. styles to be loaded, so it would
make sense to provide an easily consumable SCSS import to fulfill this.

.storybook/Container.scss

@@ -12,3 +12,6 @@ limitations under the License.
 */
 
 @import '../src/scss/App';
+
+@import '@tektoncd/dashboard-components/dist/components/Graph/Graph.scss';
+@import '@tektoncd/dashboard-components/dist/components/Graph/ZoomablePipelineGraph.scss';

package.json

@@ -29,12 +29,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@carbon/icons-react": "^10.28.0",
+    "@carbon/icons-react": "^10.30.0",
+    "@carbon/themes": "^10.32.0",
     "@tektoncd/dashboard-components": "file:./packages/components",
     "@tektoncd/dashboard-utils": "file:./packages/utils",
     "buffer": "^6.0.3",
-    "carbon-components": "^10.31.0",
-    "carbon-components-react": "^7.31.0",
+    "carbon-components": "^10.33.0",
+    "carbon-components-react": "^7.33.0",
     "carbon-icons": "^7.0.7",
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",

packages/components/package.json

@@ -29,9 +29,10 @@
     "tlds": "^1.208.0"
   },
   "peerDependencies": {
-    "@carbon/icons-react": "^10.28.0",
-    "carbon-components": "^10.31.0",
-    "carbon-components-react": "^7.31.0",
+    "@carbon/icons-react": "^10.30.0",
+    "@carbon/themes": "^10.31.0",
+    "carbon-components": "^10.33.0",
+    "carbon-components-react": "^7.33.0",
     "react": "^16.14.0 || ^17.0.1",
     "react-dom": "^16.14.0 || ^17.0.1",
     "react-intl": "^5.10.2",

packages/components/src/components/DataTableSkeleton/DataTableSkeleton.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,11 +11,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 /* istanbul ignore file */
+
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import './DataTableSkeleton.scss';
-
 const DataTableSkeleton = ({
   className,
   columnCount,

packages/components/src/components/DeleteModal/DeleteModal.js

@@ -17,8 +17,6 @@ import { injectIntl } from 'react-intl';
 import { Modal } from 'carbon-components-react';
 import { Table } from '@tektoncd/dashboard-components';
 
-import './DeleteModal.scss';
-
 const DeleteModal = ({
   onClose,
   onSubmit,

packages/components/src/components/DetailsHeader/DetailsHeader.js

@@ -18,8 +18,6 @@ import { getStatus } from '@tektoncd/dashboard-utils';
 
 import { FormattedDuration, StatusIcon } from '..';
 
-import './DetailsHeader.scss';
-
 class DetailsHeader extends Component {
   getDuration() {
     const { intl, stepStatus, taskRun } = this.props;

packages/components/src/components/DetailsHeader/DetailsHeader.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019-2020 The Tekton Authors
+Copyright 2019-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,8 +11,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import '~carbon-components/scss/globals/scss/vars';
-
 header.tkn--step-details-header {
   padding: 1rem 1rem 0;