From c2208e834356e228397b8f8b346977ea6e5c6b17 Mon Sep 17 00:00:00 2001 From: github-actions Date: Mon, 23 Oct 2023 15:56:13 -0400 Subject: [PATCH] feat(angular): updating Teradata branding colors and fonts --- apps/docs-app/src/_teradata-branding.scss | 227 ++++++++++++++++-- .../app/components/home/home.component.html | 20 +- .../app/content/docs/theme/theme.component.ts | 2 +- .../animations/animations.component.html | 2 +- .../directives/directives.component.html | 2 +- .../functions/functions.component.html | 14 +- .../functions/functions.component.ts | 16 +- .../pipes/pipes.component.html | 2 +- apps/docs-app/src/assets/icons/covalent.svg | 2 +- apps/docs-app/src/assets/icons/teradata.svg | 27 +-- apps/docs-app/src/styles.scss | 31 ++- docs/GETTING_STARTED.md | 7 +- libs/angular/common/styles/_variables.scss | 2 +- libs/angular/typography/_all-typography.scss | 2 +- .../stories/demos/material-web.content.html | 2 +- libs/markdown-navigator/project.json | 2 +- libs/markdown/project.json | 9 +- 17 files changed, 283 insertions(+), 86 deletions(-) diff --git a/apps/docs-app/src/_teradata-branding.scss b/apps/docs-app/src/_teradata-branding.scss index f45320d168..b65abbde82 100644 --- a/apps/docs-app/src/_teradata-branding.scss +++ b/apps/docs-app/src/_teradata-branding.scss @@ -5,16 +5,15 @@ // Customer Teradata brand palette // Custom orange contrast $td-orange: ( - 50: #fce3db, - 100: #fce3db, - 200: #fac7b7, - 300: #fac7b7, - 400: #f7aa93, - 500: #f7aa93, - 600: #f58e6f, - 700: #f58e6f, - 800: #f3753f, - 900: #f3753f, + 100: #ffcfb3, + 200: #ffaf81, + 300: #ff8f4e, + 400: #ff7728, + 500: #ff5f02, + 600: #f05800, + 700: #e54900, + 800: #d83b03, + 900: #c23200, contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, @@ -29,27 +28,49 @@ $td-orange: ( ), ); $td-slate: ( - 50: #d8dbdc, - 100: #d8dbdc, - 200: #b0b6b9, - 300: #b0b6b9, - 400: #899296, - 500: #899296, - 600: #616d73, - 700: #616d73, - 800: #394851, + 50: #e3e7e8, + 100: #c9cfd1, + 200: #afb6b9, + 300: #959ea2, + 400: #7b858a, + 500: #616d73, + 600: #57646b, + 700: #4d5b62, + 800: #43515a, 900: #394851, + 1000: #2e3d42, + 1100: #28353b, + 1200: #222e33, + 1300: #1f282e, + 1400: #1a2126, + 1500: #161c1f, + 1600: #14171a, + 1700: #101314, + 1800: #0c0e0f, + 1900: #060708, + 2000: #020203, contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: $black-87-opacity, 400: $black-87-opacity, - 500: $black-87-opacity, - 600: white, - 700: white, + 500: $white-87-opacity, + 600: $white-87-opacity, + 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, + 1000: $white-87-opacity, + 1100: $white-87-opacity, + 1200: $white-87-opacity, + 1300: $white-87-opacity, + 1400: $white-87-opacity, + 1500: $white-87-opacity, + 1600: $white-87-opacity, + 1700: $white-87-opacity, + 1800: $white-87-opacity, + 1900: $white-87-opacity, + 2000: $white-87-opacity, ), ); $td-yellow: ( @@ -87,6 +108,17 @@ $td-teal: ( 700: #009392, 800: #008383, 900: #007373, + 1000: #016b6b, + 1100: #036464, + 1200: #045c5c, + 1300: #055454, + 1400: #074d4d, + 1500: #084545, + 1600: #0a3e3e, + 1700: #0b3636, + 1800: #0c2e2e, + 1900: #0e2727, + 2000: #0f1f1f, contrast: ( 50: $black-87-opacity, 100: $black-87-opacity, @@ -96,8 +128,19 @@ $td-teal: ( 500: $black-87-opacity, 600: $black-87-opacity, 700: $black-87-opacity, - 800: white, - 900: white, + 800: $black-87-opacity, + 900: $white-87-opacity, + 1000: $white-87-opacity, + 1100: $white-87-opacity, + 1200: $white-87-opacity, + 1300: $white-87-opacity, + 1400: $white-87-opacity, + 1500: $white-87-opacity, + 1600: $white-87-opacity, + 1700: $white-87-opacity, + 1800: $white-87-opacity, + 1900: $white-87-opacity, + 2000: $white-87-opacity, ), ); $td-blue: ( @@ -162,6 +205,142 @@ $td-emphasis2: ( background-dark: mat-color($mat-blue-grey, 200), ); +// Background palette for light themes. +$td-light-theme-background: ( + status-bar: mat-color($mat-grey, 300), + app-bar: mat-color($mat-grey, 50), + background: mat-color($mat-grey, 100), + canvas: mat-color($mat-grey, 200), + card: white /*** card color = surface color ***/, + dialog: white, + hover: rgba(0, 0, 0, 4%), + disabled-button: rgba(mat-color($mat-grey, 400), 0.1), + raised-button: white, + focused-button: rgba(0, 0, 0, 12%), + selected-button: #e0e0e0, + selected-disabled-button: #bdbdbd, + disabled-button-toggle: #eeeeee, + unselected-chip: mat-color($mat-grey, 400), + disabled-list-option: #eeeeee, + tooltip: #616161, + overlay: rgba(#000000, 0.4), + accent: mat-color($td-teal, 200), + accent-highlight: rgba(mat-color($td-teal, 200), 0.1), + accent-highlight-hover: rgba(mat-color($td-teal, 200), 0.2), + emphasis: mat-color($mat-blue-grey, 200), + emphasis-highlight: rgba(mat-color($mat-blue-grey, 200), 0.1), + emphasis-highlight-hover: rgba(mat-color($mat-blue-grey, 200), 0.2), + caution: mat-color($mat-orange, 300), + caution-highlight: rgba(mat-color($mat-orange, 300), 0.1), + caution-highlight-hover: rgba(mat-color($mat-orange, 300), 0.2), + negative: mat-color($mat-red, 300), + negative-highlight: rgba(mat-color($mat-red, 300), 0.1), + negative-highlight-hover: rgba(mat-color($mat-red, 300), 0.2), + neutral: mat-color($mat-grey, 400), + neutral-highlight: rgba(mat-color($mat-grey, 400), 0.04), + neutral-highlight-hover: rgba(mat-color($mat-grey, 400), 0.08), + positive: mat-color($mat-green, 200), + positive-highlight: rgba(mat-color($mat-green, 200), 0.1), + positive-highlight-hover: rgba(mat-color($mat-green, 200), 0.2), + primary: mat-color($td-slate, 200), + primary-highlight: rgba(mat-color($td-slate, 500), 0.04), + primary-highlight-hover: rgba(mat-color($td-slate, 500), 0.08), +); + +// Foreground palette for light themes. +$td-light-theme-foreground: ( + base: black, + divider: $dark-dividers, + dividers: $dark-dividers, + disabled: $dark-disabled-text, + disabled-button: rgba(black, 0.26), + disabled-text: $dark-disabled-text, + elevation: black, + hint-text: $dark-disabled-text, + secondary-text: $dark-secondary-text, + icon: rgba(black, 0.54), + icons: rgba(black, 0.54), + text: rgba(black, 0.87), + slider-min: rgba(black, 0.87), + slider-off: rgba(black, 0.26), + slider-off-active: rgba(black, 0.38), + accent: mat-color($td-teal, 900), + emphasis: mat-color($mat-blue-grey, 600), + caution: mat-color($mat-amber, 800), + negative: mat-color($mat-red, 900), + neutral: mat-color($mat-grey, 400), + positive: mat-color($mat-green, 700), + primary: mat-color($td-slate, 800), +); + +// Background palette for dark themes. +$td-dark-theme-background: ( + status-bar: black, + app-bar: mat-color($td-slate, 1300), + background: mat-color($td-slate, 1500), + canvas: mat-color($td-slate, 1700), + card: mat-color($td-slate, 1100) /*** card color = surface color ***/, + dialog: mat-color($td-slate, 1100), + hover: rgba(255, 255, 255, 4%), + disabled-button: rgba(mat-color($td-slate, 800), 0.4), + raised-button: mat-color($td-slate, 800), + focused-button: rgba(255, 255, 255, 12%), + selected-button: #212121, + selected-disabled-button: mat-color($td-slate, 800), + disabled-button-toggle: black, + unselected-chip: mat-color($td-slate, 800), + disabled-list-option: black, + tooltip: #616161, + overlay: rgba(0, 0, 0, 40%), + accent: mat-color($td-teal, 1200), + accent-highlight: rgba(mat-color($td-teal, 1200), 0.4), + accent-highlight-hover: rgba(mat-color($td-teal, 1200), 0.6), + emphasis: #4f5558, + emphasis-highlight: rgba(mat-color($td-slate, 200), 0.4), + emphasis-highlight-hover: rgba(mat-color($td-slate, 200), 0.6), + caution: #704c16, + caution-highlight: rgba(#704c16, 0.4), + caution-highlight-hover: rgba(#704c16, 0.6), + negative: #883e32, + negative-highlight: rgba(#883e32, 0.4), + negative-highlight-hover: rgba(#883e32, 0.6), + neutral: mat-color($td-slate, 800), + neutral-highlight: rgba(mat-color($td-slate, 800), 0.4), + neutral-highlight-hover: rgba(mat-color($td-slate, 800), 0.6), + positive: #336033, + positive-highlight: rgba(#336033, 0.4), + positive-highlight-hover: rgba(#336033, 0.6), + primary: mat-color($td-slate, 900), + primary-highlight: rgba(mat-color($td-slate, 900), 0.4), + primary-highlight-hover: rgba(mat-color($td-slate, 900), 0.6), +); + +// Foreground palette for dark themes. +$td-dark-theme-foreground: ( + base: white, + divider: $light-dividers, + dividers: $light-dividers, + disabled: $light-disabled-text, + disabled-button: rgba(white, 0.3), + disabled-text: $light-disabled-text, + elevation: black, + hint-text: $light-disabled-text, + secondary-text: $light-secondary-text, + icon: white, + icons: white, + text: white, + slider-min: white, + slider-off: rgba(white, 0.3), + slider-off-active: rgba(white, 0.3), + accent: mat-color($td-teal, 300), + emphasis: mat-color($mat-blue-grey, 200), + caution: mat-color($mat-orange, 300), + negative: mat-color($mat-red, 400), + neutral: rgba(white, 0.87), + positive: mat-color($mat-green, 300), + primary: mat-color($td-slate, 200), +); + body { // Slate .bgc-td-slate, diff --git a/apps/docs-app/src/app/components/home/home.component.html b/apps/docs-app/src/app/components/home/home.component.html index 148921cf80..53e4bc345a 100644 --- a/apps/docs-app/src/app/components/home/home.component.html +++ b/apps/docs-app/src/app/components/home/home.component.html @@ -26,9 +26,7 @@ hide-gt-sm >
-

+

Covalent

{{ item.title }}

{{ item.title }}
-
+
{{ item.description }}
@@ -166,7 +166,7 @@

{{ item.title }}

-
+
@@ -180,7 +180,9 @@

{{ item.title }}

favorite on Angular -

+

Teradata is acvtively commited to Angular. Our entire product suite is built or revamped on Angular.

@@ -212,7 +214,7 @@

-
+
@@ -224,7 +226,9 @@

> Following the Material Design spec

-

+

Covalent follows the Material Design specification as closely as possible through the construction of all components.

diff --git a/apps/docs-app/src/app/content/docs/theme/theme.component.ts b/apps/docs-app/src/app/content/docs/theme/theme.component.ts index 9f8b9a2123..1900b13af0 100644 --- a/apps/docs-app/src/app/content/docs/theme/theme.component.ts +++ b/apps/docs-app/src/app/content/docs/theme/theme.component.ts @@ -21,7 +21,7 @@ export class ThemeComponent { // Define a custom typography config that overrides the font-family // or any typography level. $typography: mat.define-typography-config( - $font-family: 'Roboto, monospace', + $font-family: 'Inter, monospace', $headline: mat.define-typography-level(32px, 48px, 700) ); diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html index 4a9514f3ce..b526db7644 100644 --- a/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html +++ b/apps/docs-app/src/app/content/utilities/utilities-demos/animations/animations.component.html @@ -23,7 +23,7 @@

Setup

Setup copyToClipboard
- `; @@ -66,14 +66,14 @@ export class FunctionsDemoComponent { convertCodeHtml = `

Input CSV:

-

Output JSON:

Input Objects:

-

Output CSV:

@@ -118,22 +118,22 @@ export class FunctionsDemoComponent { downloadCodeHtml = `

CSV:

-

JSON:

-

Objects:

-

Objects:

-
@@ -149,7 +149,7 @@ export class FunctionsDemoComponent {
- `; diff --git a/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html b/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html index 1af3d88913..5a92a951e2 100644 --- a/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html +++ b/apps/docs-app/src/app/content/utilities/utilities-demos/pipes/pipes.component.html @@ -16,7 +16,7 @@

Setup

 - + diff --git a/apps/docs-app/src/assets/icons/teradata.svg b/apps/docs-app/src/assets/icons/teradata.svg index b6e8c4a0ea..5348bad4dc 100644 --- a/apps/docs-app/src/assets/icons/teradata.svg +++ b/apps/docs-app/src/assets/icons/teradata.svg @@ -1,19 +1,14 @@ - - Teradata - Copyright Teradata - - - - - - - - - - - - - + + + + + + + + + + + \ No newline at end of file diff --git a/apps/docs-app/src/styles.scss b/apps/docs-app/src/styles.scss index 97ac91f92f..108257e6bc 100644 --- a/apps/docs-app/src/styles.scss +++ b/apps/docs-app/src/styles.scss @@ -7,8 +7,12 @@ @import '../../../libs/angular-guided-tour/guided-tour-theme'; @import '../../../libs/angular-guided-tour/styles/guided-tour.scss'; -// Import Roboto styles from google apis CDN -@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500'); +// Teradata brand +/* stylelint-disable-next-line no-invalid-position-at-import-rule */ +@import './teradata-branding'; + +// Import Inter styles from google apis CDN +@import url('https://fonts.googleapis.com/css?family=Inter:300,400,500'); // Plus imports for other components in your app. @@ -31,10 +35,6 @@ $my-typography: mat.define-typography-config(); // Setting the toolbar to the proper spec weight @include mat-toolbar-typography($custom-toolbar-typography); -// Teradata brand -/* stylelint-disable-next-line no-invalid-position-at-import-rule */ -@import './teradata-branding'; - // Include the core styles for Covalent @include covalent-core(); @@ -72,13 +72,21 @@ $theme: mat.define-light-theme( typography: $my-typography, ) ); +$theme: map_merge( + $theme, + ( + background: $td-light-theme-background, + foreground: $td-light-theme-foreground, + ) +); + $foreground: map-get($theme, foreground); $background: map-get($theme, background); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. -//@include mat.all-component-themes($theme); +@include mat.all-component-themes($theme); @include covalent-theme($theme); @include covalent-markdown-theme($theme); @include covalent-highlight-theme($theme); @@ -100,9 +108,16 @@ body .mat-card { // Dark theme @media (prefers-color-scheme: dark) { $primary-dark: mat-palette($td-slate, 800, 200, 900); - $accent-dark: mat-palette($td-orange, 800, 200, 900); + $accent-dark: mat-palette($td-orange, 500); $warn-dark: mat-palette($mat-red, 600, 200, 900); $theme-dark: mat-dark-theme($primary-dark, $accent-dark, $warn-dark); + $theme-dark: map_merge( + $theme-dark, + ( + background: $td-dark-theme-background, + foreground: $td-dark-theme-foreground, + ) + ); $background: map-get($theme-dark, background); @include mat.all-component-themes($theme-dark); diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md index 780e9288f9..779656a5c8 100644 --- a/docs/GETTING_STARTED.md +++ b/docs/GETTING_STARTED.md @@ -81,7 +81,7 @@ A theme file is a simple Sass file that defines your palettes and passes them to // Define a custom typography config that overrides the font-family // or any typography level. $typography: mat.define-typography-config( - $font-family: 'Roboto, monospace', + $font-family: 'Inter, monospace', $headline: mat.define-typography-level(32px, 48px, 700) ); @@ -121,10 +121,7 @@ The covalent utility CSS classes can be included via `platform.css` file either **src/index.html** ```html - + ``` or diff --git a/libs/angular/common/styles/_variables.scss b/libs/angular/common/styles/_variables.scss index 872ffb97f1..f3bd883c08 100644 --- a/libs/angular/common/styles/_variables.scss +++ b/libs/angular/common/styles/_variables.scss @@ -9,7 +9,7 @@ $step-circle: 24px; // Typography // ------------------------------ -$font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue', sans-serif !default; +$font-family: 'Inter', sans-serif !default; $font-size: 10px; $display-4-font-size-base: rem(11.2) !default; diff --git a/libs/angular/typography/_all-typography.scss b/libs/angular/typography/_all-typography.scss index 8c2b9b74ac..ca2451ae7a 100644 --- a/libs/angular/typography/_all-typography.scss +++ b/libs/angular/typography/_all-typography.scss @@ -3,7 +3,7 @@ @import '../message/message-theme'; @function td-typography-config( - $font-family: '"Roboto", "Helvetica Neue", sans-serif', + $font-family: '"Inter", sans-serif', $headline: td-typography-level(24px, 32px, 400), $title: td-typography-level(20px, 32px, 500), $subheading-2: td-typography-level(16px, 28px, 400), diff --git a/libs/components/stories/demos/material-web.content.html b/libs/components/stories/demos/material-web.content.html index 285c693a3e..044ef0144c 100644 --- a/libs/components/stories/demos/material-web.content.html +++ b/libs/components/stories/demos/material-web.content.html @@ -160,7 +160,7 @@ .section-header { display: flex; height: 36px; - font-family: Roboto, sans-serif; + font-family: Inter, sans-serif; } .section-header a { display: flex; diff --git a/libs/markdown-navigator/project.json b/libs/markdown-navigator/project.json index 556dfadd9e..56c231bd85 100644 --- a/libs/markdown-navigator/project.json +++ b/libs/markdown-navigator/project.json @@ -22,7 +22,7 @@ "defaultConfiguration": "production", "dependsOn": [ { - "projects": ["markdown-flavored"], + "projects": ["angular", "angular-highlight", "markdown-flavored"], "target": "build", "params": "ignore" } diff --git a/libs/markdown/project.json b/libs/markdown/project.json index bebe1d18c4..c6cddbcb8b 100644 --- a/libs/markdown/project.json +++ b/libs/markdown/project.json @@ -20,7 +20,14 @@ "tsConfig": "libs/markdown/tsconfig.lib.json" } }, - "defaultConfiguration": "production" + "defaultConfiguration": "production", + "dependsOn": [ + { + "projects": ["angular", "angular-highlight"], + "target": "build", + "params": "ignore" + } + ] }, "test": { "executor": "@nrwl/jest:jest",