Enable Carbon CSS custom properties

Enable the Carbon CSS custom properties feature flag so we can more
easily handle theming, 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

Update unit tests to account for Carbon changes in icon-only buttons
and dropdowns (they only add title attribute when text is truncated)
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;