feat(tokens): new Teradata branding (#2092)

* feat(components): theme and packaging adjustments
* fix(components): fixes from feature testing
* fix(markdown-navigator): fixing misaligned icons
* feat(markdown): updating navigator docked mode
* feat(tokens): updating tokens for covalent m3
* fix(storybook): update to storybook theme
* feat(branding): updated angular material theme
* feat(branding): updated tokens path
* fix(components): update td logo in storybook
* fix(angular): adjustment to td branding scss file name
* fix(angular): update tokens import for theme
* fix(angular): update tokens reference
* fix(components): theme tokens reference change
* fix(tokens): updating nuetral color
* feat(components): theme update
* fix(tokens): rearrange file structure
* style(components): storybook updates
* docs(storybook): update theme
* fix(angular): adjust dynamic forms input theme
* feat(markdown-navigator): adjustment to breadcrumb title
* build(nx): fixing nx packages issues
* build(angular): ng packagr update
* style(angular): adjustment to home page icon bg
* feat(components): adding a menu click event to appshell
* feat(components): adding forced open property
* fix(components): app shell open property
* feat(tokens): updates to covalent token values
* docs(angular): updating docs app based on review comments

---------

BREAKING CHANGE: deprecating tokens material colors, teradata colors (slate, teal, orange), and some material 2 formattted tokens in favor of our new token structure. tokens formatted using the pattern `${theme}-${tokenName}` are now being phased out in favor of the new pattern `theme-${theme}-colors-${tokenName}`.

These deprecated tokens will be removed in later major versions

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
           node-version: 18
           cache: npm
       - name: Install dependencies
-        run: npx ci
+        run: npm ci
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GH }}

.storybook/theme/covalent.dark.theme.js

@@ -1,24 +1,35 @@
 import { create } from '@storybook/theming';
 import brandImage from './teradata-dark.svg';
+import {
+  CvDarkPrimary,
+  CvDarkAccent,
+  CvDarkSurface,
+  CvDarkBackground,
+  CvDarkOnBackground,
+  CvLightOnBackground,
+  CvDarkTextIconOnBackground,
+} from '@covalent/tokens';
 
 export default create({
   base: 'dark',
 
-  colorPrimary: '#afb6b9',
-  colorSecondary: '#59cecd',
+  colorPrimary: CvDarkPrimary,
+  colorSecondary: CvDarkAccent,
 
   // UI
-  appBg: '#000',
-  appContentBg: '#161c1f',
+  appBg: CvDarkBackground,
+  appContentBg: CvDarkSurface,
   appBorderRadius: '8px',
 
   // Text colors
-  textColor: 'rgba(255,255,255,0.87)',
-  textInverseColor: 'rgba(0,0,0,0.87)',
+  textColor: CvDarkOnBackground,
+  textInverseColor: CvLightOnBackground,
 
   // Toolbar default and active colors
-  barSelectedColor: '#59cecd',
-  barBg: '#161c1f',
+  barTextColor: CvDarkTextIconOnBackground,
+  barSelectedColor: CvDarkPrimary,
+  barHoverColor: CvDarkAccent,
+  barBg: CvDarkSurface,
 
   // Form colors
   inputBg: 'transparent',
@@ -27,11 +38,4 @@ export default create({
   brandTitle: 'Teradata Design System',
   //brandUrl: 'https://teradata.lol',
   brandImage,
-
-  // Addon themes
-  addonActionsTheme: {
-    // ...chromeLight,
-    // BASE_FONT_FAMILY: typography.fonts.mono,
-    BASE_BACKGROUND_COLOR: '#161c1f',
-  },
 });

.storybook/theme/covalent.light.theme.js

@@ -1,24 +1,35 @@
 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: '#43515a',
-  colorSecondary: '#007373',
+  colorPrimary: CvLightPrimary,
+  colorSecondary: CvLightAccent,
 
   // UI
-  appBg: '#ffffff',
-  appContentBg: '#f5f5f5',
+  appBg: CvLightBackground,
+  appContentBg: CvLightSurface,
   appBorderRadius: '8px',
 
   // Text colors
-  textColor: 'rgba(0,0,0,0.87)',
-  textInverseColor: 'rgba(255,255,255,0.87)',
+  textColor: CvLightOnBackground,
+  textInverseColor: CvDarkOnBackground,
 
   // Toolbar default and active colors
-  barSelectedColor: '#007373',
-  barBg: '#f5f5f5',
+  barTextColor: CvLightTextIconOnBackground,
+  barSelectedColor: CvLightPrimary,
+  barHoverColor: CvLightAccent,
+  barBg: CvLightSurface,
 
   // Form colors
   inputBg: 'transparent',
@@ -27,13 +38,4 @@ export default create({
   brandTitle: 'Teradata Design System',
   // brandUrl: 'https://teradata.lol',
   brandImage,
-
-  layoutMargin: '48px',
-
-  // Addon themes
-  addonActionsTheme: {
-    // ...chromeLight,
-    // BASE_FONT_FAMILY: typography.fonts.mono,
-    BASE_BACKGROUND_COLOR: '#f5f5f5',
-  },
 });

.storybook/theme/markdown-elements.scss

@@ -1,18 +1,21 @@
 .sb-show-main {
-  background-color: var(--mdc-theme-background);
-}
-.sb-show-main .sbdocs-wrapper {
-  background-color: var(--mdc-theme-background);
-  background-image: url(./globe.svg);
-  background-position: center top;
-  background-repeat: no-repeat;
-  background-size: auto 24rem;
-  color: var(--mdc-theme-text-secondary-on-background);
-  padding: 4rem 1.5rem 1.5rem;
+  background-color: var(--mdc-theme-surface);
+
+  .sbdocs-wrapper {
+    padding-top: 0;
+    background-color: var(--mdc-theme-surface);
+    background-image: url(./globe.svg);
+    background-position: center top;
+    background-repeat: no-repeat;
+    background-size: auto 24rem;
+    color: var(--mdc-theme-text-secondary-on-background);
+    padding: 4rem 1.5rem 1.5rem;
+  }
 }
-.sbdocs-wrapper {
-  padding-top: 0;
+.dark .sbdocs-wrapper {
+  background-image: url(./globe-dark.svg);
 }
+
 .sbdocs-content {
   display: grid; /* Prevent margin-collapse of child elements */
   align-content: start;
@@ -292,6 +295,8 @@
   table {
     font-family: var(--mdc-typography-subtitle2-font-family);
 
+
+
     thead th {
       height: 3.5rem;
     }
@@ -306,6 +311,7 @@
       }
     }
     tr td {
+      background-color: var(--mdc-theme-surface) !important;
       border: none;
       border-bottom: 1px solid var(--mdc-theme-border);
       color: var(--mdc-theme-text-secondary-on-background);
@@ -394,6 +400,10 @@
         }
       }
     }
+
+    &.sbdocs.sb-unstyled > div:first-child {
+      background-color: var(--mdc-theme-surface);
+    }
   }
 }