@covalent/core 8.1.0 → 8.2.0

package/theming/_teradata-theme.scss

@@ -0,0 +1,524 @@
+@use '@angular/material' as mat;
+@import '@covalent/tokens';
+
+// Customer Teradata brand palette
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$td-theme: map-get($tokens, 'theme');
+$td-theme-dark: map-get($td-theme, 'dark');
+$td-dark-palettes: map-get($td-theme-dark, 'palettes');
+$td-dark-colors: map-get($td-theme-dark, 'colors');
+
+$td-theme-light: map-get($td-theme, 'light');
+$td-light-palettes: map-get($td-theme-light, 'palettes');
+$td-light-colors: map-get($td-theme-light, 'colors');
+
+// Digital blue
+// Add contrast for angular palette
+$td-digital-blue-light: map-merge(
+  (
+    '200': map-get($td-light-palettes, 'digital blue 20'),
+    '30': map-get($td-light-palettes, 'digital blue 30'),
+    '300': map-get($td-light-palettes, 'digital blue 30'),
+    '40': map-get($td-light-palettes, 'digital blue 40'),
+    '50': map-get($td-light-palettes, 'digital blue 50'),
+    '500': map-get($td-light-palettes, 'digital blue 50'),
+    '60': map-get($td-light-palettes, 'digital blue 60'),
+    '600': map-get($td-light-palettes, 'digital blue 60'),
+    '70': map-get($td-light-palettes, 'digital blue 70'),
+    '80': map-get($td-light-palettes, 'digital blue 80'),
+    '90': map-get($td-light-palettes, 'digital blue 90'),
+    '900': map-get($td-light-palettes, 'digital blue 90'),
+  ),
+  (
+    contrast: (
+      '20': $light-on-primary,
+      '30': $light-on-primary,
+      '300': $light-on-primary,
+      '40': $light-on-primary,
+      '50': $light-on-primary,
+      '500': $light-on-primary,
+      '60': $light-on-primary,
+      '600': $light-on-primary,
+      '70': $light-on-primary,
+      '80': $light-on-primary,
+      '90': $light-on-primary,
+      '900': $light-on-primary,
+    ),
+  )
+);
+$td-digital-blue-dark: map-merge(
+  (
+    '200': map-get($td-dark-palettes, 'digital blue 20'),
+    '30': map-get($td-dark-palettes, 'digital blue 30'),
+    '300': map-get($td-dark-palettes, 'digital blue 30'),
+    '40': map-get($td-dark-palettes, 'digital blue 40'),
+    '50': map-get($td-dark-palettes, 'digital blue 50'),
+    '500': map-get($td-dark-palettes, 'digital blue 50'),
+    '60': map-get($td-dark-palettes, 'digital blue 60'),
+    '600': map-get($td-dark-palettes, 'digital blue 60'),
+    '70': map-get($td-dark-palettes, 'digital blue 70'),
+    '80': map-get($td-dark-palettes, 'digital blue 80'),
+    '90': map-get($td-dark-palettes, 'digital blue 90'),
+    '900': map-get($td-dark-palettes, 'digital blue 90'),
+  ),
+  (
+    contrast: (
+      '200': $dark-on-primary,
+      '30': $dark-on-primary,
+      '300': $dark-on-primary,
+      '40': $dark-on-primary,
+      '50': $dark-on-primary,
+      '500': $dark-on-primary,
+      '60': $dark-on-primary,
+      '600': $dark-on-primary,
+      '70': $dark-on-primary,
+      '80': $dark-on-primary,
+      '90': $dark-on-primary,
+      '900': $dark-on-primary,
+    ),
+  )
+);
+
+// Secondary
+// Add contrast for angular palette
+$td-secondary-light: map-merge(
+  (
+    '30': map-get($td-light-palettes, 'secondary 30'),
+    '40': map-get($td-light-palettes, 'secondary 40'),
+    '50': map-get($td-light-palettes, 'secondary 50'),
+    '500': map-get($td-light-palettes, 'secondary 50'),
+    '60': map-get($td-light-palettes, 'secondary 60'),
+    '70': map-get($td-light-palettes, 'secondary 70'),
+    '80': map-get($td-light-palettes, 'secondary 80'),
+    '90': map-get($td-light-palettes, 'secondary 90'),
+  ),
+  (
+    contrast: (
+      '30': $light-on-secondary,
+      '40': $light-on-secondary,
+      '50': $light-on-secondary,
+      '500': $light-on-secondary,
+      '60': $light-on-secondary,
+      '70': $light-on-secondary,
+      '80': $light-on-secondary,
+      '90': $light-on-secondary,
+    ),
+  )
+);
+$td-secondary-dark: map-merge(
+  (
+    '30': map-get($td-dark-palettes, 'secondary 30'),
+    '40': map-get($td-dark-palettes, 'secondary 40'),
+    '50': map-get($td-dark-palettes, 'secondary 50'),
+    '500': map-get($td-dark-palettes, 'secondary 50'),
+    '60': map-get($td-dark-palettes, 'secondary 60'),
+    '70': map-get($td-dark-palettes, 'secondary 70'),
+    '80': map-get($td-dark-palettes, 'secondary 80'),
+    '90': map-get($td-dark-palettes, 'secondary 90'),
+  ),
+  (
+    contrast: (
+      '30': $dark-on-secondary,
+      '40': $dark-on-secondary,
+      '50': $dark-on-secondary,
+      '500': $dark-on-secondary,
+      '60': $dark-on-secondary,
+      '70': $dark-on-secondary,
+      '80': $dark-on-secondary,
+      '90': $dark-on-secondary,
+    ),
+  )
+);
+
+// Warn
+// Add contrast for angular palette
+$td-warn-light: map-merge(
+  (
+    '30': map-get($td-light-palettes, 'negative 30'),
+    '40': map-get($td-light-palettes, 'negative 40'),
+    '50': map-get($td-light-palettes, 'negative 50'),
+    '500': map-get($td-light-palettes, 'negative 50'),
+    '60': map-get($td-light-palettes, 'negative 60'),
+    '70': map-get($td-light-palettes, 'negative 70'),
+    '80': map-get($td-light-palettes, 'negative 80'),
+    '90': map-get($td-light-palettes, 'negative 90'),
+  ),
+  (
+    contrast: (
+      '30': $theme-light-colors-on-negative,
+      '40': $theme-light-colors-on-negative,
+      '50': $theme-light-colors-on-negative,
+      '500': $theme-light-colors-on-negative,
+      '60': $theme-light-colors-on-negative,
+      '70': $theme-light-colors-on-negative,
+      '80': $theme-light-colors-on-negative,
+      '90': $theme-light-colors-on-negative,
+    ),
+  )
+);
+$td-warn-dark: map-merge(
+  (
+    '30': map-get($td-dark-palettes, 'negative 30'),
+    '40': map-get($td-dark-palettes, 'negative 40'),
+    '50': map-get($td-dark-palettes, 'negative 50'),
+    '500': map-get($td-dark-palettes, 'negative 50'),
+    '60': map-get($td-dark-palettes, 'negative 60'),
+    '70': map-get($td-dark-palettes, 'negative 70'),
+    '80': map-get($td-dark-palettes, 'negative 80'),
+    '90': map-get($td-dark-palettes, 'negative 90'),
+  ),
+  (
+    contrast: (
+      '30': $theme-dark-colors-on-negative,
+      '40': $theme-dark-colors-on-negative,
+      '50': $theme-dark-colors-on-negative,
+      '500': $theme-dark-colors-on-negative,
+      '60': $theme-dark-colors-on-negative,
+      '70': $theme-dark-colors-on-negative,
+      '80': $theme-dark-colors-on-negative,
+      '90': $theme-dark-colors-on-negative,
+    ),
+  )
+);
+
+$td-primary: $td-digital-blue-light;
+$td-secondary: $td-secondary-light;
+$td-accent: $td-digital-blue-light;
+// The warn palette is optional (defaults to red).
+$td-warn: $td-warn-light;
+
+// Dark theme tokens
+$td-primary-dark: $td-digital-blue-dark;
+$td-secondary-dark: $td-secondary-dark;
+$td-accent-dark: $td-digital-blue-dark;
+// The warn palette is optional (defaults to red).
+$td-warn-dark: $td-warn-dark;
+
+// Background palette for light themes.
+// todo: need to re-catalog used variables
+$td-light-theme-background: (
+  status-bar: $theme-light-colors-surface-container-lowest,
+  app-bar: $theme-light-colors-surface-container-low,
+  background: $theme-light-colors-surface,
+  canvas: $light-surface-canvas,
+  card: $theme-light-colors-surface-container
+    /*** card color = surface color ***/,
+  dialog: $theme-light-colors-surface-container-high,
+  hover: $light-surface-primary-highlight-hover,
+  disabled-button: $theme-light-colors-surface-dim,
+  disabled-button-toggle: $theme-light-colors-surface-dim,
+  disabled-list-option: $theme-light-colors-surface-dim,
+  raised-button: $light-surface-primary,
+  focused-button: $light-surface-primary-highlight,
+  selected-button: $theme-light-colors-surface-dim,
+  selected-disabled-button: $theme-light-colors-surface-dim,
+  unselected-chip: $theme-light-colors-surface-variant,
+  tooltip: $theme-light-colors-inverse-surface,
+  overlay: $theme-light-colors-scrim,
+  accent: $light-accent,
+  accent-highlight: $light-surface-accent-highlight,
+  accent-highlight-hover: $light-surface-accent-highlight-hover,
+  emphasis: $light-emphasis,
+  emphasis-highlight: $light-surface-emphasis-highlight,
+  emphasis-highlight-hover: $light-surface-emphasis-highlight,
+  caution: $light-surface-caution,
+  caution-highlight: $light-surface-caution-highlight,
+  caution-highlight-hover: $light-surface-caution-highlight-hover,
+  negative: $light-surface-negative,
+  negative-highlight: $light-surface-negative-highlight,
+  negative-highlight-hover: $light-surface-negative-highlight-hover,
+  neutral: $light-surface-neutral,
+  neutral-highlight: $light-surface-neutral-highlight,
+  neutral-highlight-hover: $light-surface-neutral-highlight-hover,
+  positive: $light-surface-positive,
+  positive-highlight: $light-surface-positive-highlight,
+  positive-highlight-hover: $light-surface-positive-highlight-hover,
+  primary: $light-surface-primary,
+  primary-highlight: $light-surface-primary-highlight,
+  primary-highlight-hover: $light-surface-primary-highlight-hover,
+);
+
+// Foreground palette for light themes.
+// todo: need to re-catalog used variables
+$td-light-theme-foreground: (
+  base: $light-on-background,
+  divider: $light-divider,
+  dividers: $light-divider,
+  disabled: $theme-light-colors-on-surface-38,
+  disabled-button: $theme-light-colors-on-surface-38,
+  disabled-text: $theme-light-colors-on-surface-38,
+  elevation: black,
+  // todo: need to work out elevation
+  hint-text: $theme-light-colors-on-surface-variant,
+  secondary-text: $theme-light-colors-on-surface-variant,
+  icon: $light-text-icon-on-background,
+  icons: $light-text-icon-on-background,
+  text: $light-on-surface,
+  slider-min: $light-on-surface,
+  slider-off: $theme-light-colors-on-surface-8,
+  slider-off-active: $theme-light-colors-on-surface-16,
+  accent: $theme-light-colors-on-primary,
+  emphasis: $theme-light-colors-on-emphasis,
+  caution: $theme-light-colors-on-caution,
+  negative: $theme-light-colors-on-negative,
+  neutral: $light-on-surface,
+  // todo: need to work out on-neutral tokens
+  positive: $theme-light-colors-on-positive,
+  primary: $theme-light-colors-on-primary,
+);
+
+// Background palette for dark themes.
+// todo: need to re-catalog used variables
+$td-dark-theme-background: (
+  status-bar: $theme-dark-colors-surface-container-lowest,
+  app-bar: $theme-dark-colors-surface-container-low,
+  background: $theme-dark-colors-surface,
+  canvas: $dark-surface-canvas,
+  card: $theme-dark-colors-surface-container
+    /*** card color = surface color ***/,
+  dialog: $theme-dark-colors-surface-container-high,
+  hover: $dark-surface-primary-highlight-hover,
+  disabled-button: $theme-dark-colors-surface-dim,
+  disabled-button-toggle: $theme-dark-colors-surface-dim,
+  disabled-list-option: $theme-dark-colors-surface-dim,
+  raised-button: $dark-surface-primary,
+  focused-button: $dark-surface-primary-highlight,
+  selected-button: $theme-dark-colors-surface-dim,
+  selected-disabled-button: $theme-dark-colors-surface-dim,
+  unselected-chip: $theme-dark-colors-surface-variant,
+  tooltip: $theme-dark-colors-inverse-surface,
+  overlay: $theme-dark-colors-scrim,
+  accent: $dark-accent,
+  accent-highlight: $dark-surface-accent-highlight,
+  accent-highlight-hover: $dark-surface-accent-highlight-hover,
+  emphasis: $dark-emphasis,
+  emphasis-highlight: $dark-surface-emphasis-highlight,
+  emphasis-highlight-hover: $dark-surface-emphasis-highlight,
+  caution: $dark-surface-caution,
+  caution-highlight: $dark-surface-caution-highlight,
+  caution-highlight-hover: $dark-surface-caution-highlight-hover,
+  negative: $dark-surface-negative,
+  negative-highlight: $dark-surface-negative-highlight,
+  negative-highlight-hover: $dark-surface-negative-highlight-hover,
+  neutral: $dark-surface-neutral,
+  neutral-highlight: $dark-surface-neutral-highlight,
+  neutral-highlight-hover: $dark-surface-neutral-highlight-hover,
+  positive: $dark-surface-positive,
+  positive-highlight: $dark-surface-positive-highlight,
+  positive-highlight-hover: $dark-surface-positive-highlight-hover,
+  primary: $dark-surface-primary,
+  primary-highlight: $dark-surface-primary-highlight,
+  primary-highlight-hover: $dark-surface-primary-highlight-hover,
+);
+
+// Foreground palette for dark themes.
+// todo: need to re-catalog used variables
+$td-dark-theme-foreground: (
+  base: $dark-on-background,
+  divider: $dark-divider,
+  dividers: $dark-divider,
+  disabled: $theme-dark-colors-on-surface-38,
+  disabled-button: $theme-dark-colors-on-surface-38,
+  disabled-text: $theme-dark-colors-on-surface-38,
+  elevation: black,
+  // todo: need to work out elevation
+  hint-text: $theme-dark-colors-on-surface-variant,
+  secondary-text: $theme-dark-colors-on-surface-variant,
+  icon: $dark-text-icon-on-background,
+  icons: $dark-text-icon-on-background,
+  text: $dark-on-surface,
+  slider-min: $dark-on-surface,
+  slider-off: $theme-dark-colors-on-surface-8,
+  slider-off-active: $theme-dark-colors-on-surface-16,
+  accent: $theme-dark-colors-on-primary,
+  emphasis: $theme-dark-colors-on-emphasis,
+  caution: $theme-dark-colors-on-caution,
+  negative: $theme-dark-colors-on-negative,
+  neutral: $dark-on-surface,
+  // todo: need to work out on-neutral tokens
+  positive: $theme-dark-colors-on-positive,
+  primary: $theme-dark-colors-on-primary,
+);
+
+// Custom typography
+$td-custom-typography: mat.define-typography-config(
+  $button: mat.define-typography-level(14px, 14px, 400),
+);
+$td-custom-toolbar-typography: mat.define-typography-config(
+  $headline-6: mat.define-typography-level(20px, 32px, 400),
+);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$td-light-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: mat.define-palette($td-primary, '40', '30', '60'),
+      secondary: mat.define-palette($td-secondary, '40', '30', '60'),
+      accent: mat.define-palette($td-accent, '40', '30', '60'),
+      warn: mat.define-palette($td-warn, '40', '30', '60'),
+      on-secondary: $light-on-secondary,
+    ),
+    typography: $td-custom-typography,
+  )
+);
+$td-light-theme: mat.private-deep-merge-all(
+  $td-light-theme,
+  (
+    color: (
+      background: $td-light-theme-background,
+      foreground: $td-light-theme-foreground,
+    ),
+  )
+);
+
+$td-dark-theme: mat.define-dark-theme(
+  (
+    color: (
+      primary: mat.define-palette($td-primary-dark, '80', '70', '90'),
+      secondary: mat.define-palette($td-secondary-dark, '80', '70', '90'),
+      accent: mat.define-palette($td-accent-dark, '80', '70', '90'),
+      warn: mat.define-palette($td-warn-dark, '80', '70', '90'),
+      on-secondary: $dark-on-secondary,
+    ),
+    typography: $td-custom-typography,
+  )
+);
+$td-dark-theme: mat.private-deep-merge-all(
+  $td-dark-theme,
+  (
+    color: (
+      background: $td-dark-theme-background,
+      foreground: $td-dark-theme-foreground,
+    ),
+  )
+);
+
+@mixin teradata-brand($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get(map-get($theme, color), background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+  $accent-highlight: map-get($background, accent-highlight);
+  $accent-highlight-hover: map-get($background, accent-highlight-hover);
+  $on-primary: map-get($foreground, primary);
+  $on-accent: map-get($foreground, accent);
+
+  .mat-toolbar.mat-primary {
+    --mat-toolbar-container-text-color: #{$on-primary};
+  }
+
+  :root {
+    --mdc-list-list-item-leading-avatar-color: #{map-get(
+        $background,
+        disabled-button
+      )};
+  }
+
+  // Logo alignment
+  .mat-icon.mat-icon-logo {
+    fill: $teradata-orange-500;
+    position: relative;
+    top: -2px;
+
+    @if $is-dark-theme {
+      fill: #ffffff;
+    }
+  }
+  // Spacing before logo in main toolbar
+  .mat-toolbar {
+    .mdc-icon-button + .mat-icon-logo,
+    .mdc-icon-button + span > .mat-icon-logo {
+      margin-left: 10px;
+    }
+
+    .mat-icon-logo {
+      margin-right: 16px;
+    }
+  }
+  // Logo in card title alignment
+  .mat-card-title {
+    .mat-icon-logo {
+      margin-right: 8px;
+    }
+  }
+
+  // Apply theme for this app
+  body::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    height: 2px;
+    width: 100%;
+    z-index: 999;
+    background-color: mat-color($accent);
+  }
+
+  // Active icon color in list nav
+  .mat-drawer {
+    mat-nav-list {
+      .mat-list-item {
+        &.active {
+          font-weight: bold;
+          color: $on-accent;
+
+          .mat-icon.mat-list-avatar {
+            background-color: mat-color($accent);
+            color: mat-color($accent);
+            fill: mat-color($accent);
+          }
+
+          .mat-icon.mat-list-icon {
+            color: mat-color($accent);
+            fill: mat-color($accent);
+          }
+        }
+      }
+
+      &[dense] {
+        .mat-icon.mat-list-avatar {
+          min-width: 36px;
+        }
+      }
+    }
+  }
+
+  // Active icon color in list nav
+  mat-nav-list {
+    [mat-list-item].active {
+      mat-icon[matListItemAvatar] {
+        background-color: mat-color($accent);
+        color: mat-color($accent);
+      }
+
+      mat-icon[matListIcon] {
+        color: mat-color($accent);
+      }
+    }
+  }
+
+  // Active side nav
+  .doc-nav a.doc-nav-link {
+    &.active::before {
+      background-color: mat-color($accent);
+    }
+    &:hover {
+      &::before {
+        background-color: mat-color($accent);
+      }
+    }
+  }
+
+  // Links
+  a {
+    text-decoration: none;
+    color: mat-color($accent);
+  }
+
+  .tc-td-secondary {
+    color: map-get($foreground, secondary-text);
+  }
+}