feat(theme): add teradata theming

libs/react-components/.storybook/main.ts

@@ -1,10 +1,12 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-import { resolve } from 'path';
+import { join, resolve } from 'path';
 import { terser } from 'rollup-plugin-terser';
 
 const config: StorybookConfig = {
   stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
 
+  staticDirs: [join(__dirname, './public')],
+
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',

libs/react-components/.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/manager-api';
+import '@covalent/tokens/index.css';
+import tdTheme from './theme.js';
+import './theme.css';
+
+addons.setConfig({
+  theme: tdTheme,
+});

libs/react-components/.storybook/theme.css

@@ -0,0 +1,25 @@
+/* Storybook theme overrides */
+.sidebar-header {
+    max-width: 213px;
+  }
+  #root > div > div[role='main'] > div {
+    box-shadow: none;
+  }
+
+  #root > div > div[role='main'] > div {
+    border: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
+  #storybook-explorer-tree .sidebar-item[data-selected='true'],
+  #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+    color: var(--cv-light-on-primary);
+  }
+
+  #storybook-explorer-tree .sidebar-item[data-selected='true'],
+  #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+    color: var(--cv-light-on-primary);
+  }
+
+  #storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
+    color: var(--cv-light-secondary);
+  }

libs/react-components/.storybook/theme.js

@@ -0,0 +1,41 @@
+import { create } from '@storybook/theming';
+import brandImage from './teradata.svg';
+import {
+  CvLightPrimary,
+  CvLightAccent,
+  CvLightSurface,
+  CvLightBackground,
+  CvDarkOnBackground,
+  CvLightOnBackground,
+  CvLightTextIconOnBackground,
+} from '@covalent/tokens';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: CvLightPrimary,
+  colorSecondary: CvLightAccent,
+
+  // UI
+  appBg: CvLightBackground,
+  appContentBg: CvLightSurface,
+  appBorderRadius: '8px',
+
+  // Text colors
+  textColor: CvLightOnBackground,
+  textInverseColor: CvDarkOnBackground,
+
+  // Toolbar default and active colors
+  barTextColor: CvLightTextIconOnBackground,
+  barSelectedColor: CvLightPrimary,
+  barHoverColor: CvLightAccent,
+  barBg: CvLightSurface,
+
+  // Form colors
+  inputBg: 'transparent',
+
+  // Branding
+  brandTitle: 'Teradata Design System',
+  // brandUrl: 'https://teradata.lol',
+  brandImage,
+});

package.json

@@ -18,8 +18,8 @@
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/preset-react": "^7.14.5",
     "@chromatic-com/storybook": "^1.5.0",
-    "@covalent/components": "^8.13.0",
-    "@covalent/tokens": "^8.13.0",
+    "@covalent/components": "^8.18.0",
+    "@covalent/tokens": "^8.18.0",
     "@lit/react": "^1.0.5",
     "@nx/cypress": "19.0.0",
     "@nx/eslint": "19.0.0",