From 7219a9ebe709894990b8d32775eecb89493b6f20 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 --- .storybook/public/favicon.ico | Bin 4286 -> 15086 bytes .storybook/theme/covalent.dark.theme.js | 2 +- .storybook/theme/covalent.light.theme.js | 2 +- .storybook/theme/teradata-dark.svg | 29 +-- .storybook/theme/teradata.svg | 29 +-- apps/docs-app/src/_teradata-branding.scss | 236 ++++++++++++++++-- apps/docs-app/src/app/app.component.html | 2 +- .../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 +- .../src/assets/icons/teradata-dark.svg | 27 +- apps/docs-app/src/assets/icons/teradata.svg | 27 +- apps/docs-app/src/styles.scss | 31 ++- docs/GETTING_STARTED.md | 7 +- .../base/src/themes/california-coast.ts | 12 +- .../base/src/themes/hawaiian-sunrise.ts | 12 +- .../base/src/themes/teradata-default.ts | 6 +- .../base/src/themes/urban-sunrise.ts | 12 +- .../base/src/themes/volcanic-eruption.ts | 12 +- libs/angular/common/styles/_variables.scss | 2 +- libs/angular/typography/_all-typography.scss | 2 +- libs/components/.storybook/preview-head.html | 11 +- libs/components/index.html | 8 +- libs/components/src/app-shell/app-shell.scss | 2 +- libs/components/src/icon/_icon.scss | 4 + libs/components/src/list/nav-list-item.scss | 2 +- .../stories/demos/material-web.content.html | 2 +- .../item-detail-and-editing.stories.mdx | 2 +- libs/markdown-navigator/project.json | 2 +- libs/markdown/project.json | 9 +- .../src/color/{ => palettes}/teradata.json | 15 +- .../src/color/{palettes => }/surface.json | 0 libs/tokens/src/typography/typography.json | 18 +- 38 files changed, 396 insertions(+), 189 deletions(-) rename libs/tokens/src/color/{ => palettes}/teradata.json (80%) rename libs/tokens/src/color/{palettes => }/surface.json (100%) diff --git a/.storybook/public/favicon.ico b/.storybook/public/favicon.ico index 5a4f1af7d4a9126046605e559f68de5fe0ea80c9..1f738e886f7885be8b8fcb6a34e54939c3cb79d4 100644 GIT binary patch literal 15086 zcmdU$Ym64v8OLXLflY48t zd%-qVQUgsBtwAHU5XHn>lw||;(x|j*FA*%eh*UAPET$j|yHEeWnK|#y&d$s`=iT>Z zVUquzdFMRmJpc2Y>vPW8AZQ9&f(tGP6t)K&&JBV&K@haJ$G@ip!ESw4a935(4pebcNp2Jh;Fp)B$5`_gvC8OqxXj^`)Kpn0NM-F;Z;J!Yq06>*$>o!OH+&1g4=-Zk6!Y}7YgKl0!KXSm}>uom~SKV!@N>Z9rB zo~O*FiYskvqS_1K-Q^F@)76*1e2du^e`a>d6<*^{C7+lx-0_8ce2;LfXj>B5G07jB zUi>TBS>vek%mrnj{ec?n?(&86Qel0OuBZNdLdjt$3B3U|B}ZaJI`4q zp5KW2s#{|=Xgw7AFEM{F|FMYwaazBP@E<33hWwt5KQu`;4 z|Mr)M{lLTW1>YDj`yB13vFm?0&W3aP(f2N))Ov{d^wV8t3vV|2e2fckisoF8y_{0@ zEly4jZkhX6ltpozvGgS5UAoLL*+1QT*|asvZB@FdX}c$XD}I4csvXtHA=4Hm@`6+0 z{;eyA`Gbc-8}FSIf0O>vewQ$`RKCZE4)j z?|kj^2OJzLlfAlm3@6*er4rVjuz?R{s!yTEdpzCA0G%=?tGAz zJ0LU2v#kDl%1N)=!^RiFpTj40`(oG@xP1bAZT2kj`R0;#tX$0cTeac}DmW4ZXYzX> z2qqKu20;s9x9$-UqELT^2v-HcF~WsGpkzuI1WKla!(l(aTZ5pNP!>*y-F#OsO^1B0 z=hIDQ8G3s8p24f1@8X>jiQZ<3!QY!m7=j&3KbX?+1U@C7`M{wl z3Ym`IN`LWr<+@n+Ea~1|P5+NKj#SGTGy1^SZ;#6R_kEGfTmLg#^mFMi-f!rWPINO~ z=8kK$DeCoc?Nz&HN59!uWb@BlZ}wT?)bB<0f8mX0*KacW>aA)M)%WGmiSCU;uI;J! zQ?E4p>mH}wtV=qQdvUJ4J72#_xs$rkUD)5r`y(nJ`}gj-=ANo`o77SCj&A0zT$u*z zcXQ}?>38$Dm;Pn3{jrU!`yv|_#G&8Y{@496I_IZd0{TaRj-oiXZpoF&s(;3~zo(2y-MY2QToLHmX$+K|%o#0S!{{x$6uDhMi zbSU|8^S>OIcx=FjWPREv#}Q;X}@8W_8u0poxs*Yzji5lH8g;3Z6P=WRURit*c+$sS6<{v-snIVI?>HO z1=|wsLS>(#3UigMRk%plAiO4EbHF>_h|@01=ttkD32TG{f~&K1NE|ZLk~#2O*eq1! znRghE!Z3bM#3LK#p^*POAOURLiw3O*B_Z^*Il8^DI ze4?GN>rDS4-PhH+j5W#3AB>nENJH9tD`~|6zj5n7Bmd>jZP6O$YipuAyG*35*w5*IMdjZmtd{Lr1Ll++E~Ks0A7!PU zxu<&9pH$znTfuzp>Tg8*VNT}mJbpImm46<>_Cq_C%!u|&IjY#b(tce(i1Q#%@BWj> hqgCm#N9q21M0>#f>e0PgF?F-wD&##b9$C_m_WwOFdaeKf literal 4286 zcmc(jZHQD=7{|}Hy^)Y*Aw^LZedt493L^ZVs~PkL_Q9kzsGvRsLI$lQp{ONV2$oSU znL&ZU7Mk>C(zfJc(wjwTmISpgRF{Lp@EqI(XF-BWW3k!>Tt>PM zjzOAc(pXeJ2%F$4@a;A#j+caONHy+{p$uvEt%LfGu5n`8YwVxFd}xDl!J3@P0~V0} z0I9lj9~-N`V^z);J(aV?>vFbmbeO;Eo~u@@RM7e+N?RX8$dBm({V@j>kh-<;gj!5t)9PsqN$kVJlHt} z`h9550Np`LU<6Wq5S@RCyXd#SJj)P&WQae0{ll}jIHOy*f8_h65Z-?mk=J-8q<`Xc z#g@L1_hX&AiNAzmux56s{}L{TP+#dnNWF)m^Vj~nXZ^70Zr0ul!A{y36rbM*zP5s( zAb&Qg;(YlgwtrNA68BF9+b@CMxti#=I);lW?*X-I7{gBDP3^f6!T`l!iaR@*{{+sR z_p$5yy-qxMpiaI}{hQF>hx<1U+wzz5*0nY7r;iW=w|L%YKD$BjMx1oDO!Y7m^ttKzLtL-1h|QQ!oL035gBY^dpa6dO3RS8{&xEh D?a0jf diff --git a/.storybook/theme/covalent.dark.theme.js b/.storybook/theme/covalent.dark.theme.js index b7e9ed73a0..19def9db59 100644 --- a/.storybook/theme/covalent.dark.theme.js +++ b/.storybook/theme/covalent.dark.theme.js @@ -1,5 +1,5 @@ import { create } from '@storybook/theming'; -import brandImage from './teradata.svg'; +import brandImage from './teradata-dark.svg'; export default create({ base: 'dark', diff --git a/.storybook/theme/covalent.light.theme.js b/.storybook/theme/covalent.light.theme.js index f0efd46b4f..3e38b473dc 100644 --- a/.storybook/theme/covalent.light.theme.js +++ b/.storybook/theme/covalent.light.theme.js @@ -1,5 +1,5 @@ import { create } from '@storybook/theming'; -import brandImage from './teradata-dark.svg'; +import brandImage from './teradata.svg'; export default create({ base: 'light', diff --git a/.storybook/theme/teradata-dark.svg b/.storybook/theme/teradata-dark.svg index 938eace435..d2666b02c4 100644 --- a/.storybook/theme/teradata-dark.svg +++ b/.storybook/theme/teradata-dark.svg @@ -1,20 +1,13 @@ - - - teradata-2-color - Created with Sketch. - - - - - - - - - - - - - - + + Teradata logo + + + + + + + + + \ No newline at end of file diff --git a/.storybook/theme/teradata.svg b/.storybook/theme/teradata.svg index 819fe0f204..937d0306ec 100644 --- a/.storybook/theme/teradata.svg +++ b/.storybook/theme/teradata.svg @@ -1,20 +1,13 @@ - - - teradata-2-color-reverse - Created with Sketch. - - - - - - - - - - - - - - + + Teradata logo + + + + + + + + + \ No newline at end of file diff --git a/apps/docs-app/src/_teradata-branding.scss b/apps/docs-app/src/_teradata-branding.scss index f45320d168..6e3fce0098 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, @@ -562,6 +741,8 @@ body { $background: map-get($theme, background); $foreground: map-get($theme, foreground); $is-dark-theme: map-get($theme, is-dark); + $accent-highlight-hover: map-get($background, accent-highlight-hover); + // Logo alignment .mat-icon.mat-icon-logo { position: relative; @@ -692,6 +873,13 @@ body { } } + // Active side nav + .doc-nav a.doc-nav-link.active { + &::before { + background-color: $accent-highlight-hover; + } + } + // Links a { text-decoration: none; diff --git a/apps/docs-app/src/app/app.component.html b/apps/docs-app/src/app/app.component.html index a87495175a..7c804776aa 100644 --- a/apps/docs-app/src/app/app.component.html +++ b/apps/docs-app/src/app/app.component.html @@ -26,7 +26,7 @@ hide-xs [routerLink]="['/']" class="mat-icon-logo cursor-pointer" - svgIcon="assets:teradata" + svgIcon="teradata-dark" >
-

+

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-dark.svg b/apps/docs-app/src/assets/icons/teradata-dark.svg index 8b3980b191..263f6eaa0e 100644 --- a/apps/docs-app/src/assets/icons/teradata-dark.svg +++ b/apps/docs-app/src/assets/icons/teradata-dark.svg @@ -1,19 +1,14 @@ - - Teradata - Copyright Teradata - - - - - - - - - - - - - + + + + + + + + + + + \ No newline at end of file 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-echarts/base/src/themes/california-coast.ts b/libs/angular-echarts/base/src/themes/california-coast.ts index 7106d56340..46c78568c2 100644 --- a/libs/angular-echarts/base/src/themes/california-coast.ts +++ b/libs/angular-echarts/base/src/themes/california-coast.ts @@ -1,6 +1,6 @@ /* tslint:disable */ export default { - color: ['#0098c9', '#6ab1d7', '#a0cae4', '#ffbb9c', '#fd986d', '#f3753f'], + color: ['#0098c9', '#6ab1d7', '#a0cae4', '#ffbb9c', '#fd986d', '#ff5f02'], backgroundColor: 'transparent', textStyle: {}, title: { @@ -146,9 +146,9 @@ export default { candlestick: { itemStyle: { normal: { - color: '#f3753f', + color: '#ff5f02', color0: 'transparent', - borderColor: '#f3753f', + borderColor: '#ff5f02', borderColor0: '#0098c9', borderWidth: '2', }, @@ -170,7 +170,7 @@ export default { symbolSize: '6', symbol: 'emptyCircle', smooth: true, - color: ['#0098c9', '#6ab1d7', '#a0cae4', '#ffbb9c', '#fd986d', '#f3753f'], + color: ['#0098c9', '#6ab1d7', '#a0cae4', '#ffbb9c', '#fd986d', '#ff5f02'], label: { normal: { textStyle: { @@ -413,7 +413,7 @@ export default { }, }, checkpointStyle: { - color: '#f3753f', + color: '#ff5f02', borderColor: 'rgba(255,178,72,0.41)', }, label: { @@ -430,7 +430,7 @@ export default { }, }, visualMap: { - color: ['#0098c9', '#6ab1d7', '#a0cae4', '#FFBB9C', '#FD986D', '#F3753F'], + color: ['#0098c9', '#6ab1d7', '#a0cae4', '#FFBB9C', '#FD986D', '#ff5f02'], }, dataZoom: { backgroundColor: 'rgba(255,255,255,0)', diff --git a/libs/angular-echarts/base/src/themes/hawaiian-sunrise.ts b/libs/angular-echarts/base/src/themes/hawaiian-sunrise.ts index 935de5e3eb..1f42e930f9 100644 --- a/libs/angular-echarts/base/src/themes/hawaiian-sunrise.ts +++ b/libs/angular-echarts/base/src/themes/hawaiian-sunrise.ts @@ -1,6 +1,6 @@ /* tslint:disable */ export default { - color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#f3753f'], + color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#ff5f02'], backgroundColor: 'transparent', textStyle: {}, title: { @@ -146,9 +146,9 @@ export default { candlestick: { itemStyle: { normal: { - color: '#f3753f', + color: '#ff5f02', color0: 'transparent', - borderColor: '#f3753f', + borderColor: '#ff5f02', borderColor0: '#00b2b1', borderWidth: '2', }, @@ -170,7 +170,7 @@ export default { symbolSize: '6', symbol: 'emptyCircle', smooth: true, - color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#f3753f'], + color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#ff5f02'], label: { normal: { textStyle: { @@ -413,7 +413,7 @@ export default { }, }, checkpointStyle: { - color: '#f3753f', + color: '#ff5f02', borderColor: 'rgba(255,178,72,0.41)', }, label: { @@ -430,7 +430,7 @@ export default { }, }, visualMap: { - color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#f3753f'], + color: ['#00b2b1', '#69c6c4', '#a0d9d7', '#ffbb9c', '#fd986d', '#ff5f02'], }, dataZoom: { backgroundColor: 'rgba(255,255,255,0)', diff --git a/libs/angular-echarts/base/src/themes/teradata-default.ts b/libs/angular-echarts/base/src/themes/teradata-default.ts index d58f57bf49..c8cad250d1 100644 --- a/libs/angular-echarts/base/src/themes/teradata-default.ts +++ b/libs/angular-echarts/base/src/themes/teradata-default.ts @@ -1,6 +1,6 @@ /* tslint:disable */ export default { - color: ['#4d5b62', '#008ab6', '#f3753f', '#2cc0bf', '#fed887'], + color: ['#4d5b62', '#008ab6', '#ff5f02', '#2cc0bf', '#fed887'], backgroundColor: 'transparent', textStyle: {}, title: { @@ -170,7 +170,7 @@ export default { symbolSize: '6', symbol: 'emptyCircle', smooth: true, - color: ['#4d5b62', '#008ab6', '#f3753f', '#2cc0bf', '#fed887'], + color: ['#4d5b62', '#008ab6', '#ff5f02', '#2cc0bf', '#fed887'], label: { normal: { textStyle: { @@ -430,7 +430,7 @@ export default { }, }, visualMap: { - color: ['#4d5b62', '#008ab6', '#f3753f', '#2cc0bf', '#fed887'], + color: ['#4d5b62', '#008ab6', '#ff5f02', '#2cc0bf', '#fed887'], }, dataZoom: { backgroundColor: 'rgba(255,255,255,0)', diff --git a/libs/angular-echarts/base/src/themes/urban-sunrise.ts b/libs/angular-echarts/base/src/themes/urban-sunrise.ts index 470cfcf4e5..763f361b54 100644 --- a/libs/angular-echarts/base/src/themes/urban-sunrise.ts +++ b/libs/angular-echarts/base/src/themes/urban-sunrise.ts @@ -1,6 +1,6 @@ /* tslint:disable */ export default { - color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#F3753F'], + color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#ff5f02'], backgroundColor: 'transparent', textStyle: {}, title: { @@ -146,9 +146,9 @@ export default { candlestick: { itemStyle: { normal: { - color: '#f3753f', + color: '#ff5f02', color0: 'transparent', - borderColor: '#f3753f', + borderColor: '#ff5f02', borderColor0: '#667279', borderWidth: '2', }, @@ -170,7 +170,7 @@ export default { symbolSize: '6', symbol: 'emptyCircle', smooth: true, - color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#F3753F'], + color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#ff5f02'], label: { normal: { textStyle: { @@ -413,7 +413,7 @@ export default { }, }, checkpointStyle: { - color: '#f3753f', + color: '#ff5f02', borderColor: 'rgba(255,178,72,0.41)', }, label: { @@ -430,7 +430,7 @@ export default { }, }, visualMap: { - color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#F3753F'], + color: ['#667279', '#979ea4', '#caced0', '#ffbb9c', '#fd986d', '#ff5f02'], }, dataZoom: { backgroundColor: 'rgba(255,255,255,0)', diff --git a/libs/angular-echarts/base/src/themes/volcanic-eruption.ts b/libs/angular-echarts/base/src/themes/volcanic-eruption.ts index 5ed6eaa882..4f7e0749b0 100644 --- a/libs/angular-echarts/base/src/themes/volcanic-eruption.ts +++ b/libs/angular-echarts/base/src/themes/volcanic-eruption.ts @@ -1,6 +1,6 @@ /* tslint:disable */ export default { - color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#f3753f'], + color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#ff5f02'], backgroundColor: 'transparent', textStyle: {}, title: { @@ -146,9 +146,9 @@ export default { candlestick: { itemStyle: { normal: { - color: '#f3753f', + color: '#ff5f02', color0: 'transparent', - borderColor: '#f3753f', + borderColor: '#ff5f02', borderColor0: '#667279', borderWidth: '2', }, @@ -170,7 +170,7 @@ export default { symbolSize: '6', symbol: 'emptyCircle', smooth: true, - color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#f3753f'], + color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#ff5f02'], label: { normal: { textStyle: { @@ -413,7 +413,7 @@ export default { }, }, checkpointStyle: { - color: '#f3753f', + color: '#ff5f02', borderColor: 'rgba(255,178,72,0.41)', }, label: { @@ -430,7 +430,7 @@ export default { }, }, visualMap: { - color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#f3753f'], + color: ['#565a83', '#7c5c91', '#a85a90', '#cf5880', '#ea5f64', '#ff5f02'], }, dataZoom: { backgroundColor: 'rgba(255,255,255,0)', 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/.storybook/preview-head.html b/libs/components/.storybook/preview-head.html index 737b91076e..bbbe866657 100644 --- a/libs/components/.storybook/preview-head.html +++ b/libs/components/.storybook/preview-head.html @@ -1,11 +1,12 @@ - + + href="https://fonts.googleapis.com/css?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" + rel="stylesheet" /> + @@ -16,4 +17,4 @@ NODE_ENV: 'test', }, }; - + \ No newline at end of file diff --git a/libs/components/index.html b/libs/components/index.html index 9b6df6f4e4..14b4fcf124 100644 --- a/libs/components/index.html +++ b/libs/components/index.html @@ -13,11 +13,15 @@ - + + diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss index 94c4afc0a2..7d4db1c707 100644 --- a/libs/components/src/app-shell/app-shell.scss +++ b/libs/components/src/app-shell/app-shell.scss @@ -25,7 +25,7 @@ height: 2px; width: 100%; z-index: 1000; - background-color: #f3753f; + background-color: #ff5f02; } } diff --git a/libs/components/src/icon/_icon.scss b/libs/components/src/icon/_icon.scss index f61c934add..b1e0a77c28 100644 --- a/libs/components/src/icon/_icon.scss +++ b/libs/components/src/icon/_icon.scss @@ -1,4 +1,8 @@ @mixin core-styles() { + :root { + --mdc-icon-font: 'Material Symbols Outlined'; + } + .covalent-icon { --mdc-icon-font: 'covalent-icons'; } diff --git a/libs/components/src/list/nav-list-item.scss b/libs/components/src/list/nav-list-item.scss index 71aa15b2b5..510927ecea 100644 --- a/libs/components/src/list/nav-list-item.scss +++ b/libs/components/src/list/nav-list-item.scss @@ -56,7 +56,7 @@ } :host(.home-item:not([navopen])) { - background-color: #f3753f; + background-color: #ff5f02; --mdc-ripple-color: #ffffff; --mdc-theme-text-icon-on-background: #ffffff; 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/components/stories/item-detail-and-editing.stories.mdx b/libs/components/stories/item-detail-and-editing.stories.mdx index 47a3ee583f..7e254e93ed 100644 --- a/libs/components/stories/item-detail-and-editing.stories.mdx +++ b/libs/components/stories/item-detail-and-editing.stories.mdx @@ -29,7 +29,7 @@ import { Canvas, Meta, DocsContainer } from '@storybook/addon-docs'; align-items: center; width: 100%; padding-top: 16px; - border-top: solid 2px #f3753f; + border-top: solid 2px #ff5f02; border-top-left-radius: 3px; border-top-right-radius: 3px; } 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", diff --git a/libs/tokens/src/color/teradata.json b/libs/tokens/src/color/palettes/teradata.json similarity index 80% rename from libs/tokens/src/color/teradata.json rename to libs/tokens/src/color/palettes/teradata.json index c55e141c3e..120fe18b5a 100644 --- a/libs/tokens/src/color/teradata.json +++ b/libs/tokens/src/color/palettes/teradata.json @@ -42,6 +42,17 @@ "slate-1700": { "value": "#101314", "type": "color" }, "slate-1800": { "value": "#0c0e0f", "type": "color" }, "slate-1900": { "value": "#060708", "type": "color" }, - "slate-2000": { "value": "#020203", "type": "color" } + "slate-2000": { "value": "#020203", "type": "color" }, + + + "orange-100": { "value": "#FFCFB3", "type": "color" }, + "orange-200": { "value": "#FFAF81", "type": "color" }, + "orange-300": { "value": "#FF8F4E", "type": "color" }, + "orange-400": { "value": "#FF7728", "type": "color" }, + "orange-500": { "value": "#FF5F02", "type": "color" }, + "orange-600": { "value": "#F05800", "type": "color" }, + "orange-700": { "value": "#E54900", "type": "color" }, + "orange-800": { "value": "#D83B03", "type": "color" }, + "orange-900": { "value": "#C23200", "type": "color" } } -} +} \ No newline at end of file diff --git a/libs/tokens/src/color/palettes/surface.json b/libs/tokens/src/color/surface.json similarity index 100% rename from libs/tokens/src/color/palettes/surface.json rename to libs/tokens/src/color/surface.json diff --git a/libs/tokens/src/typography/typography.json b/libs/tokens/src/typography/typography.json index 9fe0028dd9..aa125885d1 100644 --- a/libs/tokens/src/typography/typography.json +++ b/libs/tokens/src/typography/typography.json @@ -3,7 +3,7 @@ "font-family": { "value": "Arial, sans-serif", "type": "fontFamilies" }, "headline1-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "headline1-font-size": { "value": "96px", "type": "fontSizes" }, @@ -11,7 +11,7 @@ "headline1-line-height": { "value": "112px", "type": "lineHeights" }, "headline2-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "headline2-font-size": { "value": "60px", "type": "fontSizes" }, @@ -19,7 +19,7 @@ "headline2-line-height": { "value": "84px", "type": "lineHeights" }, "headline3-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "headline3-font-size": { "value": "48px", "type": "fontSizes" }, @@ -27,7 +27,7 @@ "headline3-line-height": { "value": "64px", "type": "lineHeights" }, "headline4-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "headline4-font-size": { "value": "34px", "type": "fontSizes" }, @@ -35,7 +35,7 @@ "headline4-line-height": { "value": "48px", "type": "lineHeights" }, "headline5-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "headline5-font-size": { "value": "24px", "type": "fontSizes" }, @@ -43,7 +43,7 @@ "headline5-line-height": { "value": "36px", "type": "lineHeights" }, "headline6-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "headline6-font-size": { "value": "20px", "type": "fontSizes" }, @@ -51,7 +51,7 @@ "headline6-line-height": { "value": "28px", "type": "lineHeights" }, "subtitle1-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "subtitle1-font-size": { "value": "14px", "type": "fontSizes" }, @@ -59,7 +59,7 @@ "subtitle1-line-height": { "value": "20px", "type": "lineHeights" }, "subtitle2-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "subtitle2-font-size": { "value": "16px", "type": "fontSizes" }, @@ -83,7 +83,7 @@ "body2-line-height": { "value": "20px", "type": "lineHeights" }, "button-font-family": { - "value": "'Poppins', sans-serif", + "value": "'Inter', sans-serif", "type": "fontFamilies" }, "button-font-size": { "value": "14px", "type": "fontSizes" },