Skip to content

Commit

Permalink
Merge pull request #5 from owilliams320/feat/theme-updates
Browse files Browse the repository at this point in the history 
style(): update home page and covalent version
  • Loading branch information
@owilliams320
owilliams320 authored Mar 13, 2024
2 parents f021f74 + 0fc5e16 commit b0b4d61
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 81 deletions.
74 changes: 40 additions & 34 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 7 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@
"@angular/router": "17.1.0",
"@angular/material": "17.1.0",
"@angular/cdk": "17.1.0",
"@covalent/core": "8.6.0-beta.1",
"@covalent/markdown": "8.6.0-beta.1",
"@covalent/flavored-markdown": "8.6.0-beta.1",
"@covalent/markdown-navigator": "8.6.0-beta.1",
"@covalent/components": "8.6.0-beta.1",
"@covalent/tokens": "8.6.0-beta.1",
"@covalent/components": "8.7.0-beta.9",
"@covalent/core": "8.7.0-beta.9",
"@covalent/flavored-markdown": "8.7.0-beta.9",
"@covalent/icons": "8.7.0-beta.9",
"@covalent/markdown": "8.7.0-beta.9",
"@covalent/markdown-navigator": "8.7.0-beta.9",
"@covalent/tokens": "8.7.0-beta.9",
"@material/data-table": "15.0.0-canary.7f224ddd4.0",
"minimatch": "^9.0.3",
"rxjs": "^7.4.0",
Expand Down
34 changes: 17 additions & 17 deletions src/app/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</cv-menu>
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
<cv-card cardTitle="Recently viewed" outlined actionBar>
<cv-card cardTitle="Recently viewed" outlined actionBar fullHeight>
<cv-list>
<cv-list-item>
<a routerLink="/learn">Docs & Support - Learn</a>
Expand All @@ -45,8 +45,8 @@
</cv-card>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-5">
<cv-card cardTitle="Common tasks" outlined actionBar>
<cv-list subNav>
<cv-card cardTitle="Common tasks" outlined actionBar fullHeight>
<cv-list >
<cv-list-item
[routerLink]="['environments', 'create']"
graphic="avatar"
Expand All @@ -55,9 +55,9 @@
twoLine
>
Create environment
<div slot="secondary">
<span slot="secondary">
Step-by-step guide for creating environments
</div>
</span>
<div slot="graphic"><cv-icon covalent-icon> server </cv-icon></div>
</cv-list-item>
<cv-list-item
Expand All @@ -68,9 +68,9 @@
twoLine
>
Enable network access
<div slot="secondary">
<span slot="secondary">
Allow other systems and tools to connect.
</div>
</span>
<div slot="graphic"><cv-icon> network_locked </cv-icon></div>
</cv-list-item>
<cv-list-item
Expand All @@ -81,7 +81,7 @@
twoLine
>
Add users
<div slot="secondary">Add users to a environment’s database.</div>
<span slot="secondary">Add users to a environment’s database.</span>
<div slot="graphic"><cv-icon> people </cv-icon></div>
</cv-list-item>
<cv-list-item
Expand All @@ -92,9 +92,9 @@
twoLine
>
Setup your identity provider
<div slot="secondary">
<span slot="secondary">
Enable SSO for your organization and users.
</div>
</span>
<div slot="graphic">
<cv-icon covalent-icon> connected_identity </cv-icon>
</div>
Expand All @@ -107,34 +107,34 @@
<cv-list>
<cv-list-item hasMeta twoLine>
ACME
<div slot="secondary">Lake ID</div>
<span slot="secondary">Lake ID</span>
</cv-list-item>
<cv-list-item hasMeta twoLine>
acme
<div slot="secondary">domain name</div>
<span slot="secondary">domain name</span>
</cv-list-item>
<cv-list-item hasMeta twoLine>
ACME Lake for the Marketing org
<div slot="secondary">Description</div>
<span slot="secondary">Description</span>
</cv-list-item>
<cv-list-item hasMeta twoLine>
aws
<div slot="secondary">Platform</div>
<span slot="secondary">Platform</span>
</cv-list-item>
<cv-list-item hasMeta twoLine>
VLAMFAKEBK0009K
<div slot="secondary">Site ID</div>
<span slot="secondary">Site ID</span>
</cv-list-item>
<cv-list-item hasMeta twoLine>
United States
<div slot="secondary">Regions</div>
<span slot="secondary">Regions</span>
</cv-list-item>
</cv-list>
</cv-card>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
<cv-card cardTitle="Environments" outlined actionBar>
<cv-list subNav>
<cv-list >
<cv-list-item
[routerLink]="['environments', 'production']"
hasMeta
Expand Down
64 changes: 40 additions & 24 deletions src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,27 @@
@use '@angular/material' as mat;
@use '@material/layout-grid/mdc-layout-grid';
@use '@material/data-table/data-table' as data-table;

@import '../node_modules/@covalent/components/style.css';

@import '../node_modules/@covalent/core/theming/all-theme';
@import '../node_modules/@covalent/core/theming/teradata-theme';
@import '../node_modules/@covalent/markdown/markdown-theme';
@import '../node_modules/@covalent/highlight/highlight-theme';
@import '../node_modules/@covalent/flavored-markdown/flavored-markdown-theme';
@import '../node_modules/@covalent/markdown-navigator/markdown-navigator-theme';

@use '@material/data-table/data-table-theme' as data-table-theme;
@use '@covalent/tokens' as covalent-tokens;
@use '@covalent/components' as covalent-theme;
@use '@covalent/icons';
@import '@covalent/core/theming/all-theme';
@import '@covalent/core/theming/teradata-theme';
@import '@covalent/markdown/markdown-theme';
@import '@covalent/highlight/highlight-theme';
@import '@covalent/flavored-markdown/flavored-markdown-theme';
@import '@covalent/markdown-navigator/markdown-navigator-theme';
@import './reset';

$theme-tokens: map-get(covalent-tokens.$tokens, 'theme');
$light-tokens: map-get($theme-tokens, 'light');
$dark-tokens: map-get($theme-tokens, 'dark');
$light-colors: map-get($light-tokens, 'colors');
$dark-colors: map-get($dark-tokens, 'colors');
// Merge new tokens with deprecated tokens
$light-colors: map-merge($light-colors, map-get(covalent-tokens.$tokens, light));
$dark-colors: map-merge($dark-colors, map-get(covalent-tokens.$tokens, dark));

// Include the core styles for Covalent
@include covalent-core();

Expand Down Expand Up @@ -54,6 +63,24 @@ $theme-light: $td-light-theme;
@include covalent-markdown-navigator-theme($theme-light);
@include covalent-markdown-navigator-typography($td-custom-typography);

:root {
// Covalent web components theme
@include covalent-theme.components-theme(
$light-colors,
map-get(covalent-tokens.$tokens, typography)
);

--mat-table-background-color: transparent;
@include data-table-theme.stroke-size(0);
@include data-table-theme.divider-color(var(--cv-theme-divider));
@include data-table-theme.header-row-text-color(var(--cv-theme-on-surface));
@include data-table-theme.row-text-color(var(--cv-theme-on-surface));
}

body {
color: var(--cv-theme-on-surface);
font-family: 'Inter', Arial, Helvetica, sans-serif;
}

// Dark theme
// @media (prefers-color-scheme: dark) {
Expand Down Expand Up @@ -128,17 +155,6 @@ $theme-light: $td-light-theme;
[ng-reflect-router-link] {
cursor: pointer;
}

.covalent-icon, .covalent-icons, [covalent-icon], [covalent-icons] {
--mdc-icon-font: "covalent-icons";
}


cv-button {
--mdc-theme-text-primary-on-background: #3053f4ff;
// --mdc-theme-on-primary: #324369ff;
}

cv-toolbar {
margin-bottom: 24px;
}
cv-toolbar {
margin-bottom: 24px;
}

0 comments on commit b0b4d61

Please sign in to comment.