Add sections module (#17)

2024-11-06 02:25:23 +00:00 · 2019-05-08 14:32:38 +03:00 · 2019-05-08 14:32:38 +03:00 · a4293a7646
commit a4293a7646
parent 18b96140f6
76 changed files with 1561 additions and 1526 deletions
--- a/.gitignore
+++ b/.gitignore
@ -45,7 +45,7 @@ Thumbs.db

 # Swagger Codegen
 swagger-codegen-cli.jar
-src/app/api/**/swagger-codegen
+src/app/**/swagger-codegen

-# Kontur.Focus Model
-src/app/kontur-focus/**/gen-model
+# Generated models
+src/app/**/gen-model
--- a/.prettierignore
+++ b/.prettierignore
@ -4,7 +4,6 @@ node_modules
 dist
 build_utils
 coverage
-src/app/api/**/swagger-codegen
 schemes
+src/app/**/swagger-codegen
 src/app/**/gen-model
-
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,26 +6,28 @@
    "start": "ng serve --port 8000",
    "build": "ng build --prod --extraWebpackConfig webpack.extra.js",
    "test": "ng test",
+    "test-silent": "ng test --watch=false --browsers ChromeHeadless",
    "lint": "ng lint",
    "e2e": "ng e2e",
-    "prettier": "prettier \"**/*.{html,js,ts,css,md,json,prettierrc,svg}\" --write",
-    "check": "prettier \"**/*.{html,js,ts,css,md,json,prettierrc,svg}\" --list-different",
+    "prettier": "prettier \"**/*.{html,js,ts,css,scss,md,json,prettierrc,svg}\"",
+    "prettify": "npm run prettier -- --write",
+    "check": "npm run prettier -- --list-different",
    "quicktype": "quicktype -s schema --just-types"
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "~7.1.0",
-    "@angular/cdk": "~7.1.0",
-    "@angular/common": "~7.1.0",
-    "@angular/compiler": "~7.1.0",
-    "@angular/core": "~7.1.0",
-    "@angular/flex-layout": "^7.0.0-beta.19",
-    "@angular/forms": "~7.1.0",
-    "@angular/material": "~7.1.0",
-    "@angular/material-moment-adapter": "~7.1.0",
-    "@angular/platform-browser": "~7.1.0",
-    "@angular/platform-browser-dynamic": "~7.1.0",
-    "@angular/router": "~7.1.0",
+    "@angular/animations": "~7.2.14",
+    "@angular/cdk": "~7.3.7",
+    "@angular/common": "~7.2.14",
+    "@angular/compiler": "~7.2.14",
+    "@angular/core": "~7.2.14",
+    "@angular/flex-layout": "^7.0.0-beta.24",
+    "@angular/forms": "~7.2.14",
+    "@angular/material": "~7.3.7",
+    "@angular/material-moment-adapter": "~7.3.7",
+    "@angular/platform-browser": "~7.2.14",
+    "@angular/platform-browser-dynamic": "~7.2.14",
+    "@angular/router": "~7.2.14",
    "core-js": "^2.5.4",
    "d3-axis": "^1.0.12",
    "d3-scale": "^2.1.2",
@ -34,39 +36,39 @@
    "hammerjs": "^2.0.8",
    "keycloak-angular": "^6.1.0",
    "lodash.get": "^4.4.2",
-    "moment": "^2.22.2",
-    "pdfmake": "^0.1.54",
-    "rxjs": "~6.3.3",
+    "moment": "^2.24.0",
+    "pdfmake": "^0.1.56",
+    "rxjs": "~6.5.1",
    "ts-keycode-enum": "^1.0.6",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
-    "@angular/cli": "~7.1.0",
-    "@angular/compiler-cli": "~7.1.0",
-    "@angular/language-service": "~7.1.0",
+    "@angular-devkit/build-angular": "~0.13.8",
+    "@angular/cli": "~7.3.8",
+    "@angular/compiler-cli": "~7.2.14",
+    "@angular/language-service": "~7.2.14",
    "@types/d3": "^5.7.0",
-    "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasmine": "~3.3.12",
+    "@types/jasminewd2": "~2.0.6",
    "@types/lodash.get": "^4.4.6",
    "@types/moment": "^2.13.0",
-    "@types/node": "~8.9.4",
-    "@types/pdfmake": "^0.1.3",
+    "@types/node": "^11.13.10",
+    "@types/pdfmake": "^0.1.5",
    "codelyzer": "~4.5.0",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.1.1",
+    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-coverage-istanbul-reporter": "~2.0.5",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
    "ngx-build-plus": "^7.2.3",
-    "prettier": "~1.15.2",
-    "protractor": "~5.4.0",
-    "quicktype": "^15.0.184",
+    "prettier": "~1.17.0",
+    "protractor": "~5.4.2",
+    "quicktype": "^15.0.187",
    "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.1.6"
+    "tslint": "~5.16.0",
+    "typescript": "~3.2.4"
  }
 }
--- a/src/app/actionbar/actionbar.component.ts
+++ b/src/app/actionbar/actionbar.component.ts
@ -1,4 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
+
 import { DropdownTriggerDirective } from '../dropdown/dropdown-trigger.directive';

@Component({
--- a/src/app/analytics/analytics.component.scss
+++ b/src/app/analytics/analytics.component.scss
@ -1,11 +0,0 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
-
-.container {
-  @include fullscreen();
-  background-color: $background-color;
-}
-
-.content {
-  @include content($content-padding, $content-max-width);
-}
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -3,36 +3,18 @@ import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { KeycloakService } from './auth/keycloak-stub';

-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { MainModule } from './main';
-import { PartyMngModule } from './party-mgt';
-import { DetailsModule } from './details';
-import { PageNotFoundModule } from './page-not-found';
 import { IconRegistryService } from './icon-registry.service';
-import { AnalyticsModule } from './analytics/analytics.module';
 import { AuthModule } from './auth';
 import { initializer } from './initializer';
-import { TableModule } from './table';
 import { APIModule } from './api/api.module';
 import { ConfigService } from './config/config.service';
+import { SectionsModule } from './sections/sections.module';
+import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [AppComponent],
-    imports: [
-        BrowserModule,
-        BrowserAnimationsModule,
-        AppRoutingModule,
-        MainModule,
-        PartyMngModule,
-        AnalyticsModule,
-        DetailsModule,
-        PageNotFoundModule,
-        TableModule,
-        PageNotFoundModule,
-        APIModule,
-        AuthModule
-    ],
+    imports: [BrowserModule, BrowserAnimationsModule, RouterModule, SectionsModule, APIModule, AuthModule],
    providers: [
        IconRegistryService,
        ConfigService,
--- a/src/app/charts/bar-chart/_bar-chart-theme.scss
+++ b/src/app/charts/bar-chart/_bar-chart-theme.scss
@ -4,7 +4,9 @@
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

-    .x.axis > .tick:first-of-type > text, .x.axis > .tick:last-of-type > text, .tick > line {
+    .x.axis > .tick:first-of-type > text,
+    .x.axis > .tick:last-of-type > text,
+    .tick > line {
        color: mat-color($foreground, divider);
    }

--- a/src/app/charts/bar-chart/bar-chart.component.scss
+++ b/src/app/charts/bar-chart/bar-chart.component.scss
@ -1,5 +1,6 @@
@import '../../../styles/variables';

-.y.axis > path, .x.axis > path {
+.y.axis > path,
+.x.axis > path {
    color: transparent;
 }
--- a/src/app/components/table/_table-theme.scss
+++ b/src/app/components/table/_table-theme.scss
@ -1,52 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin dsh-table-theme($theme) {
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  .dsh {
-    &-table {
-      background: mat-color($background, card);
-
-      & thead, & tbody, & tfoot,
-      mat-header-row, mat-row, mat-footer-row,
-      [dsh-header-row], [dsh-row], [dsh-footer-row],
-      .dsh-table-sticky {
-        background: inherit;
-      }
-
-      & thead {
-        background: mat-color($background, background);
-      }
-    }
-
-    &-header-cell {
-      color: mat-color($foreground, secondary-text);
-    }
-
-    &-cell, &-footer-cell {
-      color: mat-color($foreground, text);
-    }
-
-    &-row, &-header-row, &-footer-row {
-      border-bottom-color: mat-color($foreground, divider);
-    }
-  }
-}
-
-@mixin dsh-table-typography($config) {
-  .dsh {
-    &-table {
-      font-family: mat-font-family($config);
-    }
-
-    &-header-cell {
-      font-size: mat-font-size($config, caption);
-      font-weight: mat-font-weight($config, body-2);
-    }
-
-    &-cell, &-footer-cell {
-      font-size: mat-font-size($config, body-1);
-    }
-  }
-}
--- a/src/app/components/table/index.ts
+++ b/src/app/components/table/index.ts
@ -1 +0,0 @@
-export * from './public-api';
--- a/src/app/components/table/table.module.ts
+++ b/src/app/components/table/table.module.ts
@ -1,46 +0,0 @@
-import { NgModule } from '@angular/core';
-import { DshTableComponent } from './table';
-import { CdkTableModule } from '@angular/cdk/table';
-import {
-    DshCellDefDirective,
-    DshCellDirective,
-    DshColumnDefDirective,
-    DshFooterCellDefDirective,
-    DshFooterCellDirective,
-    DshHeaderCellDefDirective,
-    DshHeaderCellDirective
-} from './cell';
-import {
-    DshFooterRowComponent,
-    DshFooterRowDefDirective,
-    DshHeaderRowComponent,
-    DshHeaderRowDefDirective,
-    DshRowComponent,
-    DshRowDefDirective
-} from './row';
-import { CommonModule } from '@angular/common';
-import { MatTableModule } from '@angular/material';
-
-const EXPORTED_DECLARATIONS = [
-    DshTableComponent,
-    DshHeaderCellDefDirective,
-    DshHeaderRowDefDirective,
-    DshColumnDefDirective,
-    DshCellDefDirective,
-    DshRowDefDirective,
-    DshFooterCellDefDirective,
-    DshFooterRowDefDirective,
-    DshHeaderCellDirective,
-    DshCellDirective,
-    DshFooterCellDirective,
-    DshHeaderRowComponent,
-    DshRowComponent,
-    DshFooterRowComponent
-];
-
-@NgModule({
-    imports: [CdkTableModule, CommonModule, MatTableModule],
-    exports: EXPORTED_DECLARATIONS,
-    declarations: EXPORTED_DECLARATIONS
-})
-export class DshTableModule {}
--- a/src/app/components/table/table.scss
+++ b/src/app/components/table/table.scss
@ -1,94 +0,0 @@
-@import '../../../styles/variables';
-
-$dsh-header-row-height: 56px;
-$dsh-row-height: 48px;
-$dsh-row-horizontal-padding: 24px;
-
-.dsh {
-  &-table {
-    display: block;
-    border-radius: 5px;
-    padding: 0;
-    border-spacing: 0;
-
-    thead,
-    tbody,
-    tfoot {
-      display: block;
-    }
-
-    thead {
-      border-radius: 5px;
-    }
-  }
-
-  &-header-row {
-    min-height: $dsh-header-row-height;
-  }
-
-  &-row, &-footer-row {
-    min-height: $dsh-row-height;
-  }
-
-  &-row, &-header-row, &-footer-row {
-    display: flex;
-    border-width: 0;
-    align-items: center;
-    box-sizing: border-box;
-
-    &::after {
-      display: inline-block;
-      min-height: inherit;
-      content: '';
-    }
-  }
-
-  &-row, &-footer-row {
-    border-bottom-width: 1px;
-    border-style: solid;
-  }
-
-  &-cell:first-of-type, &-header-cell:first-of-type, &-footer-cell:first-of-type {
-    padding-left: $dsh-row-horizontal-padding;
-
-    [dir='rtl'] & {
-      padding-left: 0;
-      padding-right: $dsh-row-horizontal-padding;
-    }
-  }
-
-  &-cell:last-of-type, &-header-cell:last-of-type, &-footer-cell:last-of-type {
-    padding-right: $dsh-row-horizontal-padding;
-
-    [dir='rtl'] & {
-      padding-right: 0;
-      padding-left: $dsh-row-horizontal-padding;
-    }
-  }
-
-  &-cell, &-header-cell, &-footer-cell {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    word-wrap: break-word;
-    min-height: inherit;
-    padding: 0;
-  }
-
-  &-header-row {
-    height: $dsh-header-row-height;
-  }
-
-  &-row, &-footer-row {
-    height: $dsh-row-height;
-  }
-
-  &-header-cell {
-    text-align: left;
-
-    [dir='rtl'] & {
-      text-align: right;
-    }
-  }
-}
--- a/src/app/config/config-stub.service.ts
+++ b/src/app/config/config-stub.service.ts
@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+import { config as appConfig } from './config-stub';
+import { Config } from './config';
+
+@Injectable()
+export class ConfigStubService implements Config {
+    api: Config['api'];
+    daData: Config['daData'];
+    konturFocus: Config['konturFocus'];
+
+    constructor() {
+        for (const [name, config] of Object.entries(appConfig)) {
+            this[name] = config;
+        }
+    }
+
+    async init() {}
+}
--- a/src/app/config/config-stub.ts
+++ b/src/app/config/config-stub.ts
@ -0,0 +1,22 @@
+import { HttpTestingController } from '@angular/common/http/testing';
+
+import { Config } from './config';
+
+export const config: Config = {
+    api: {
+        capiEndpoint: 'http://localhost:8000'
+    },
+    daData: {
+        token: 'Token XXX',
+        suggestionsApiUrl: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest'
+    },
+    konturFocus: {
+        apiV3Url: 'https://focus-api.kontur.ru/api3'
+    }
+};
+
+export function mockConfig(httpMock: HttpTestingController) {
+    const req = httpMock.expectOne('/assets/appConfig.json');
+    req.flush(config);
+    return req;
+}
--- a/src/app/config/config.service.ts
+++ b/src/app/config/config.service.ts
@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';

-type AppConfig = typeof import('../../assets/appConfig.json');
-// tslint:disable-next-line:no-empty-interface
-interface Config extends AppConfig {}
+import { Config } from './config';

@Injectable()
 export class ConfigService implements Config {
--- a/src/app/config/config.spec.ts
+++ b/src/app/config/config.spec.ts
@ -0,0 +1,29 @@
+import { TestBed, getTestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+import { ConfigService } from './config.service.js';
+import { mockConfig, config } from './config-stub.js';
+
+describe('ConfigService', () => {
+    function createService() {
+        TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule],
+            providers: [ConfigService]
+        });
+        const injector = getTestBed();
+        const service: ConfigService = injector.get(ConfigService);
+        const httpMock: HttpTestingController = injector.get(HttpTestingController);
+        return { injector, service, httpMock };
+    }
+
+    it('should load config', () => {
+        const { service, httpMock } = createService();
+        service.init().then(() => {
+            for (const [k, v] of Object.entries(config)) {
+                expect(service[k]).toEqual(v);
+            }
+        });
+        const req = mockConfig(httpMock);
+        expect(req.request.method).toBe('GET');
+    });
+});
--- a/src/app/config/config.ts
+++ b/src/app/config/config.ts
@ -0,0 +1,5 @@
+type AppConfig = typeof import('../../assets/appConfig.json');
+
+// Interface is needed so that you can implement in the class
+// tslint:disable-next-line:no-empty-interface
+export interface Config extends AppConfig {}
--- a/src/app/dadata/dadata.spec.ts
+++ b/src/app/dadata/dadata.spec.ts
@ -8,6 +8,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DaDataModule } from './dadata.module';
 import { DaDataService } from './dadata.service';
 import { SuggestionType } from './model/type';
+import { ConfigService } from '../config/config.service';
+import { ConfigStubService } from '../config/config-stub.service';

@Component({
    template: `
@ -30,11 +32,6 @@ class SimpleDaDataAutocompleteComponent {
 }

 describe('DshDadata', () => {
-    const config = {
-        token: 'Token AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-        suggestionsApiUrl: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest'
-    };
-
    const suggestions = {
        suggestions: [
            {
@ -93,7 +90,7 @@ describe('DshDadata', () => {
    function createDaDataService() {
        TestBed.configureTestingModule({
            imports: [HttpClientTestingModule],
-            providers: [DaDataService]
+            providers: [DaDataService, { provide: ConfigService, useClass: ConfigStubService }]
        });
        const injector = getTestBed();
        const service: DaDataService = injector.get(DaDataService);
@ -109,17 +106,15 @@ describe('DshDadata', () => {
        TestBed.configureTestingModule({
            imports: [DaDataModule, MatFormFieldModule, ReactiveFormsModule, NoopAnimationsModule],
            declarations: [component, ...declarations],
-            providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }, ...providers]
+            providers: [
+                { provide: ComponentFixtureAutoDetect, useValue: true },
+                { provide: ConfigService, useClass: ConfigStubService },
+                ...providers
+            ]
        }).compileComponents();
        return TestBed.createComponent<T>(component);
    }

-    function mockConfig(httpMock: HttpTestingController) {
-        const req = httpMock.expectOne('/assets/dadata-config.json');
-        req.flush(config);
-        return req;
-    }
-
    describe('Component', () => {
        it('should init value', () => {
            const fixture = createComponent(SimpleDaDataAutocompleteComponent);
@ -128,26 +123,14 @@ describe('DshDadata', () => {
    });

    describe('Service', () => {
-        it('should load config', () => {
-            const { service, httpMock } = createDaDataService();
-            service.config$.subscribe(c => {
-                expect(c).toEqual(config);
-            });
-            const req = mockConfig(httpMock);
-            expect(req.request.method).toBe('GET');
-        });
-
        it('should load suggestions', () => {
            const { service, httpMock } = createDaDataService();
-            service.config$.subscribe(() => {
-                service.getSuggestions(SuggestionType.party, 'тест').subscribe(s => {
-                    expect(s).toEqual(suggestions.suggestions as any);
-                });
-                const req = httpMock.expectOne('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/party');
-                req.flush(suggestions);
-                expect(req.request.method).toBe('POST');
+            service.getSuggestions(SuggestionType.party, 'тест').subscribe(s => {
+                expect(s).toEqual(suggestions.suggestions as any);
            });
-            mockConfig(httpMock);
+            const req = httpMock.expectOne('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/party');
+            req.flush(suggestions);
+            expect(req.request.method).toBe('POST');
        });
    });
 });
--- a/src/app/dropdown/dropdown-trigger.directive.ts
+++ b/src/app/dropdown/dropdown-trigger.directive.ts
@ -112,12 +112,12 @@ export class DropdownTriggerDirective implements OnDestroy {
                    }
                ]),
            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            width: this.dropdown.correctedWidth
+            width: this.dropdown.getCorrectedWidth()
        });
    }

    private updatePosition = () => {
-        this.overlayRef.updateSize({ width: this.dropdown.correctedWidth });
+        this.overlayRef.updateSize({ width: this.dropdown.getCorrectedWidth() });
        this.dropdown.triangleLeftOffset = this.getTriangleLeftOffset();
    };

--- a/src/app/dropdown/dropdown.component.ts
+++ b/src/app/dropdown/dropdown.component.ts
@ -25,11 +25,11 @@ export class DropdownComponent {
    triangleLeftOffset: string;
    animationDone$ = new Subject();

-    get correctedWidth() {
+    getCorrectedWidth() {
        if (this.width === '100%') {
            return FULL_WIDTH;
        }
-        if (!this.width || (typeof this.width === 'string' && this.width.slice(-1) === '%')) {
+        if (this.isAutoSize(this.width)) {
            return this.width;
        }
        const widthPx: number = typeof this.width === 'string' ? parseFloat(this.width) : this.width;
@ -38,4 +38,8 @@ export class DropdownComponent {
        }
        return widthPx;
    }
+
+    private isAutoSize(size: string | number) {
+        return !size || (typeof size === 'string' && size.slice(-1) === '%');
+    }
 }
--- a/src/app/layout/card/card-header/card-header.component.scss
+++ b/src/app/layout/card/card-header/card-header.component.scss
@ -3,4 +3,4 @@
 :host {
    display: block;
    margin-bottom: $card-header-margin;
-}
+}
--- a/src/app/layout/card/card.component.scss
+++ b/src/app/layout/card/card.component.scss
@ -5,5 +5,5 @@
    background-color: $card-background-color;
    padding: $card-padding;
    border-radius: $card-border-radius;
-    box-shadow: $card-shadow
+    box-shadow: $card-shadow;
 }
--- a/src/app/main/main.component.scss
+++ b/src/app/main/main.component.scss
@ -1,6 +0,0 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
-
-.content {
-    @include content($content-padding, $content-max-width);
-}
--- a/src/app/sections/analytics/analytics.component.html
+++ b/src/app/sections/analytics/analytics.component.html
--- a/src/app/sections/analytics/analytics.component.scss
+++ b/src/app/sections/analytics/analytics.component.scss
@ -0,0 +1,11 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+.container {
+    @include fullscreen();
+    background-color: $background-color;
+}
+
+.content {
+    @include content($content-padding, $content-max-width);
+}
--- a/src/app/sections/analytics/analytics.component.ts
+++ b/src/app/sections/analytics/analytics.component.ts
@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { PeriodData, SegmentData } from '../charts/models/chart-data-models';
-import { ChartsService } from '../charts/charts.service';
+
+import { PeriodData, SegmentData } from '../../charts/models/chart-data-models';
+import { ChartsService } from '../../charts/charts.service';

@Component({
    selector: 'dsh-app-analytics',
--- a/src/app/sections/analytics/analytics.module.ts
+++ b/src/app/sections/analytics/analytics.module.ts
@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';

 import { AnalyticsComponent } from './analytics.component';
-import { ToolbarModule } from '../toolbar';
-import { BrandModule } from '../brand';
-import { ActionbarModule } from '../actionbar';
-import { LayoutModule } from '../layout';
-import { ChartsModule } from '../charts';
+import { ToolbarModule } from '../../toolbar';
+import { BrandModule } from '../../brand';
+import { ActionbarModule } from '../../actionbar';
+import { LayoutModule } from '../../layout';
+import { ChartsModule } from '../../charts';
 import { AnalyticsService } from './analytics.service';

@NgModule({
--- a/src/app/sections/analytics/analytics.service.ts
+++ b/src/app/sections/analytics/analytics.service.ts
--- a/src/app/sections/analytics/index.ts
+++ b/src/app/sections/analytics/index.ts
@ -0,0 +1,2 @@
+export * from './analytics.module';
+export * from './analytics.component';
--- a/src/app/sections/details/details.component.html
+++ b/src/app/sections/details/details.component.html
--- a/src/app/sections/details/details.component.scss
+++ b/src/app/sections/details/details.component.scss
@ -1,5 +1,5 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';

 mat-sidenav-container {
    @include fullscreen();
--- a/src/app/sections/details/details.component.ts
+++ b/src/app/sections/details/details.component.ts
@ -1,6 +1,6 @@
 import { Component } from '@angular/core';

-import { toolbarOffset } from '../layout-settings';
+import { toolbarOffset } from '../../layout-settings';

@Component({
    selector: 'dsh-details',
--- a/src/app/sections/details/details.module.ts
+++ b/src/app/sections/details/details.module.ts
@ -3,9 +3,9 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { FlexLayoutModule } from '@angular/flex-layout';

 import { DetailsComponent } from './details.component';
-import { BrandModule } from '../brand';
-import { ToolbarModule } from '../toolbar';
-import { ActionbarModule } from '../actionbar';
+import { BrandModule } from '../../brand';
+import { ToolbarModule } from '../../toolbar';
+import { ActionbarModule } from '../../actionbar';

@NgModule({
    declarations: [DetailsComponent],
--- a/src/app/sections/details/index.ts
+++ b/src/app/sections/details/index.ts
--- a/src/app/sections/main/index.ts
+++ b/src/app/sections/main/index.ts
--- a/src/app/sections/main/main.component.html
+++ b/src/app/sections/main/main.component.html
--- a/src/app/sections/main/main.component.scss
+++ b/src/app/sections/main/main.component.scss
@ -0,0 +1,6 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+.content {
+    @include content($content-padding, $content-max-width);
+}
--- a/src/app/sections/main/main.component.ts
+++ b/src/app/sections/main/main.component.ts
@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';

-import { DocumentService } from '../document/document.service';
-import { Family } from '../document/document-fonts-config';
+import { DocumentService } from '../../document/document.service';
+import { Family } from '../../document/document-fonts-config';

@Component({
    selector: 'dsh-main',
--- a/src/app/sections/main/main.module.ts
+++ b/src/app/sections/main/main.module.ts
@ -2,10 +2,10 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';

 import { MainComponent } from './main.component';
-import { BrandModule } from '../brand';
-import { ToolbarModule } from '../toolbar';
-import { ActionbarModule } from '../actionbar';
-import { DocumentModule } from '../document/document.module';
+import { BrandModule } from '../../brand';
+import { ToolbarModule } from '../../toolbar';
+import { ActionbarModule } from '../../actionbar';
+import { DocumentModule } from '../../document/document.module';

@NgModule({
    declarations: [MainComponent],
--- a/src/app/sections/page-not-found/index.ts
+++ b/src/app/sections/page-not-found/index.ts
--- a/src/app/sections/page-not-found/page-not-found.component.html
+++ b/src/app/sections/page-not-found/page-not-found.component.html
--- a/src/app/sections/page-not-found/page-not-found.component.ts
+++ b/src/app/sections/page-not-found/page-not-found.component.ts
--- a/src/app/sections/page-not-found/page-not-found.module.ts
+++ b/src/app/sections/page-not-found/page-not-found.module.ts
--- a/src/app/sections/party-mgt/index.ts
+++ b/src/app/sections/party-mgt/index.ts
--- a/src/app/sections/party-mgt/party-mgt.component.html
+++ b/src/app/sections/party-mgt/party-mgt.component.html
--- a/src/app/sections/party-mgt/party-mgt.component.scss
+++ b/src/app/sections/party-mgt/party-mgt.component.scss
@ -1,5 +1,5 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';

 .display-2 {
    font-size: 24px;
--- a/src/app/sections/party-mgt/party-mgt.component.ts
+++ b/src/app/sections/party-mgt/party-mgt.component.ts
--- a/src/app/sections/party-mgt/party-mgt.module.ts
+++ b/src/app/sections/party-mgt/party-mgt.module.ts
@ -5,12 +5,12 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule } from '@angular/material';

 import { PartyMngComponent } from './party-mgt.component';
-import { BrandModule } from '../brand';
-import { ToolbarModule } from '../toolbar';
-import { ActionbarModule } from '../actionbar';
-import { FormControlsModule } from '../form-controls';
-import { LayoutModule } from '../layout';
-import { DaDataModule } from '../dadata/dadata.module';
+import { BrandModule } from '../../brand';
+import { ToolbarModule } from '../../toolbar';
+import { ActionbarModule } from '../../actionbar';
+import { FormControlsModule } from '../../form-controls';
+import { LayoutModule } from '../../layout';
+import { DaDataModule } from '../../dadata/dadata.module';

@NgModule({
    declarations: [PartyMngComponent],
--- a/src/app/sections/sections-routing.module.ts
+++ b/src/app/sections/sections-routing.module.ts
@ -5,7 +5,7 @@ import { MainComponent } from './main';
 import { PageNotFoundComponent } from './page-not-found';
 import { PartyMngComponent } from './party-mgt';
 import { DetailsComponent } from './details';
-import { AnalyticsComponent } from './analytics/analytics.component';
+import { AnalyticsComponent } from './analytics';
 import { TableComponent } from './table';

 const routes: Routes = [
@ -39,4 +39,4 @@ const routes: Routes = [
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class SectionsRoutingModule {}
--- a/src/app/sections/sections.module.ts
+++ b/src/app/sections/sections.module.ts
@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+
+import { SectionsRoutingModule } from './sections-routing.module';
+import { MainModule } from './main';
+import { PartyMngModule } from './party-mgt';
+import { AnalyticsModule } from './analytics';
+import { DetailsModule } from './details';
+import { PageNotFoundModule } from './page-not-found';
+import { TableModule } from './table';
+
+@NgModule({
+    imports: [
+        SectionsRoutingModule,
+        MainModule,
+        PartyMngModule,
+        AnalyticsModule,
+        DetailsModule,
+        PageNotFoundModule,
+        TableModule
+    ],
+    declarations: [],
+    entryComponents: [],
+    providers: []
+})
+export class SectionsModule {}
--- a/src/app/sections/table/index.ts
+++ b/src/app/sections/table/index.ts
@ -0,0 +1,2 @@
+export * from './table.module';
+export * from './table.component';
--- a/src/app/sections/table/table.component.html
+++ b/src/app/sections/table/table.component.html
--- a/src/app/sections/table/table.component.scss
+++ b/src/app/sections/table/table.component.scss
@ -1,5 +1,5 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';

 mat-sidenav-container {
    @include fullscreen();
@ -27,4 +27,3 @@ mat-sidenav-container {
    height: 400px;
    overflow: auto;
 }
-
--- a/src/app/sections/table/table.component.ts
+++ b/src/app/sections/table/table.component.ts
@ -1,8 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-
-import { toolbarOffset } from '../layout-settings';
 import { MatPaginator, MatTableDataSource } from '@angular/material';

+import { toolbarOffset } from '../../layout-settings';
+
 export interface PeriodicElement {
    name: string;
    position: number;
--- a/src/app/sections/table/table.module.ts
+++ b/src/app/sections/table/table.module.ts
@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatPaginatorModule, MatTableModule } from '@angular/material';
+
+import { TableComponent } from './table.component';
+import { BrandModule } from '../../brand';
+import { ToolbarModule } from '../../toolbar';
+import { ActionbarModule } from '../../actionbar';
+import { DshTableModule } from '../../table';
+
+@NgModule({
+    declarations: [TableComponent],
+    imports: [
+        FlexLayoutModule,
+        MatSidenavModule,
+        BrandModule,
+        ToolbarModule,
+        ActionbarModule,
+        DshTableModule,
+        MatTableModule,
+        MatPaginatorModule
+    ]
+})
+export class TableModule {}
--- a/src/app/table/_table-theme.scss
+++ b/src/app/table/_table-theme.scss
@ -0,0 +1,62 @@
+@import '~@angular/material/theming';
+
+@mixin dsh-table-theme($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .dsh {
+        &-table {
+            background: mat-color($background, card);
+
+            & thead,
+            & tbody,
+            & tfoot,
+            mat-header-row,
+            mat-row,
+            mat-footer-row,
+            [dsh-header-row],
+            [dsh-row],
+            [dsh-footer-row],
+            .dsh-table-sticky {
+                background: inherit;
+            }
+
+            & thead {
+                background: mat-color($background, background);
+            }
+        }
+
+        &-header-cell {
+            color: mat-color($foreground, secondary-text);
+        }
+
+        &-cell,
+        &-footer-cell {
+            color: mat-color($foreground, text);
+        }
+
+        &-row,
+        &-header-row,
+        &-footer-row {
+            border-bottom-color: mat-color($foreground, divider);
+        }
+    }
+}
+
+@mixin dsh-table-typography($config) {
+    .dsh {
+        &-table {
+            font-family: mat-font-family($config);
+        }
+
+        &-header-cell {
+            font-size: mat-font-size($config, caption);
+            font-weight: mat-font-weight($config, body-2);
+        }
+
+        &-cell,
+        &-footer-cell {
+            font-size: mat-font-size($config, body-1);
+        }
+    }
+}
--- a/src/app/components/table/cell.ts
+++ b/src/app/components/table/cell.ts
--- a/src/app/components/table/components.spec.ts
+++ b/src/app/components/table/components.spec.ts
--- a/src/app/table/index.ts
+++ b/src/app/table/index.ts
@ -1,2 +1 @@
-export * from './table.module';
-export * from './table.component';
+export * from './public-api';
--- a/src/app/components/table/public-api.ts
+++ b/src/app/components/table/public-api.ts
--- a/src/app/components/table/row.ts
+++ b/src/app/components/table/row.ts
--- a/src/app/components/table/table-utils.spec.ts
+++ b/src/app/components/table/table-utils.spec.ts
--- a/src/app/components/table/table.html
+++ b/src/app/components/table/table.html
--- a/src/app/table/table.module.ts
+++ b/src/app/table/table.module.ts
@ -1,25 +1,46 @@
 import { NgModule } from '@angular/core';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatPaginatorModule, MatTableModule } from '@angular/material';
+import { DshTableComponent } from './table';
+import { CdkTableModule } from '@angular/cdk/table';
+import {
+    DshCellDefDirective,
+    DshCellDirective,
+    DshColumnDefDirective,
+    DshFooterCellDefDirective,
+    DshFooterCellDirective,
+    DshHeaderCellDefDirective,
+    DshHeaderCellDirective
+} from './cell';
+import {
+    DshFooterRowComponent,
+    DshFooterRowDefDirective,
+    DshHeaderRowComponent,
+    DshHeaderRowDefDirective,
+    DshRowComponent,
+    DshRowDefDirective
+} from './row';
+import { CommonModule } from '@angular/common';
+import { MatTableModule } from '@angular/material';

-import { TableComponent } from './table.component';
-import { BrandModule } from '../brand';
-import { ToolbarModule } from '../toolbar';
-import { ActionbarModule } from '../actionbar';
-import { DshTableModule } from '../components/table';
+const EXPORTED_DECLARATIONS = [
+    DshTableComponent,
+    DshHeaderCellDefDirective,
+    DshHeaderRowDefDirective,
+    DshColumnDefDirective,
+    DshCellDefDirective,
+    DshRowDefDirective,
+    DshFooterCellDefDirective,
+    DshFooterRowDefDirective,
+    DshHeaderCellDirective,
+    DshCellDirective,
+    DshFooterCellDirective,
+    DshHeaderRowComponent,
+    DshRowComponent,
+    DshFooterRowComponent
+];

@NgModule({
-    declarations: [TableComponent],
-    imports: [
-        FlexLayoutModule,
-        MatSidenavModule,
-        BrandModule,
-        ToolbarModule,
-        ActionbarModule,
-        DshTableModule,
-        MatTableModule,
-        MatPaginatorModule
-    ]
+    imports: [CdkTableModule, CommonModule, MatTableModule],
+    exports: EXPORTED_DECLARATIONS,
+    declarations: EXPORTED_DECLARATIONS
 })
-export class TableModule {}
+export class DshTableModule {}
--- a/src/app/table/table.scss
+++ b/src/app/table/table.scss
@ -0,0 +1,105 @@
+@import '../../styles/variables';
+
+$dsh-header-row-height: 56px;
+$dsh-row-height: 48px;
+$dsh-row-horizontal-padding: 24px;
+
+.dsh {
+    &-table {
+        display: block;
+        border-radius: 5px;
+        padding: 0;
+        border-spacing: 0;
+
+        thead,
+        tbody,
+        tfoot {
+            display: block;
+        }
+
+        thead {
+            border-radius: 5px;
+        }
+    }
+
+    &-header-row {
+        min-height: $dsh-header-row-height;
+    }
+
+    &-row,
+    &-footer-row {
+        min-height: $dsh-row-height;
+    }
+
+    &-row,
+    &-header-row,
+    &-footer-row {
+        display: flex;
+        border-width: 0;
+        align-items: center;
+        box-sizing: border-box;
+
+        &::after {
+            display: inline-block;
+            min-height: inherit;
+            content: '';
+        }
+    }
+
+    &-row,
+    &-footer-row {
+        border-bottom-width: 1px;
+        border-style: solid;
+    }
+
+    &-cell:first-of-type,
+    &-header-cell:first-of-type,
+    &-footer-cell:first-of-type {
+        padding-left: $dsh-row-horizontal-padding;
+
+        [dir='rtl'] & {
+            padding-left: 0;
+            padding-right: $dsh-row-horizontal-padding;
+        }
+    }
+
+    &-cell:last-of-type,
+    &-header-cell:last-of-type,
+    &-footer-cell:last-of-type {
+        padding-right: $dsh-row-horizontal-padding;
+
+        [dir='rtl'] & {
+            padding-right: 0;
+            padding-left: $dsh-row-horizontal-padding;
+        }
+    }
+
+    &-cell,
+    &-header-cell,
+    &-footer-cell {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        word-wrap: break-word;
+        min-height: inherit;
+        padding: 0;
+    }
+
+    &-header-row {
+        height: $dsh-header-row-height;
+    }
+
+    &-row,
+    &-footer-row {
+        height: $dsh-row-height;
+    }
+
+    &-header-cell {
+        text-align: left;
+
+        [dir='rtl'] & {
+            text-align: right;
+        }
+    }
+}
--- a/src/app/components/table/table.spec.ts
+++ b/src/app/components/table/table.spec.ts
--- a/src/app/components/table/table.ts
+++ b/src/app/components/table/table.ts
--- a/src/styles.scss
+++ b/src/styles.scss
@ -1,14 +1,18 @@
-// Dependencies
@import '~@angular/material/theming';
+
 // Utils
@import './styles/functions';
+
 // Variables
@import './styles/variables';
-@import "./styles/palletes";
+@import './styles/palletes';
+
+// Theme
+@import './styles/main-theme';
+
 // Components
-@import "./styles/main-theme";
@import './app/dropdown/dropdown-theme';
-@import './app/components/table/table-theme';
+@import './app/table/table-theme';
@import './app/charts/bar-chart/bar-chart-theme';

@include mat-core();
@ -23,5 +27,5 @@ $mat-theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($mat-theme);
@include dsh-main-theme($theme);
@include dsh-dropdown-theme($theme);
-@include dsh-table-theme($theme)
-@include dsh-bar-chart-theme($theme)
+@include dsh-table-theme($theme);
+@include dsh-bar-chart-theme($theme);
--- a/src/styles/_functions.scss
+++ b/src/styles/_functions.scss
@ -0,0 +1,20 @@
+@import '~@angular/material/theming';
+@import 'variables';
+@import 'palletes';
+
+@function dsh-light-theme(
+    $primary,
+    $accent,
+    $warn: mat-palette($mat-red),
+    $foreground: $dsh-light-theme-foreground,
+    $background: $dsh-light-theme-background
+) {
+    @return (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn,
+        is-dark: false,
+        foreground: $foreground,
+        background: $background
+    );
+}
--- a/src/styles/_main-theme.scss
+++ b/src/styles/_main-theme.scss
@ -1,13 +1,12 @@
@import '~@angular/material/theming';

@mixin dsh-main-theme($theme) {
-  $background: map-get($theme, background);
+    $background: map-get($theme, background);

-  body {
-    font-size: 14px;
-    font-family: 'Roboto', sans-serif;
-    margin: 0;
-    background-color: mat-color($background, background);;
-  }
+    body {
+        font-size: 14px;
+        font-family: 'Roboto', sans-serif;
+        margin: 0;
+        background-color: mat-color($background, background);
+    }
 }
-
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
--- a/src/styles/_palletes.scss
+++ b/src/styles/_palletes.scss
@ -0,0 +1,108 @@
+@import 'variables';
+
+// Background palette for light themes.
+$dsh-light-theme-background: (
+    background: $background-color,
+    card: $white
+);
+
+// Background palette for dark themes.
+$dsh-dark-theme-background: (
+    background: #303030,
+    card: $black
+);
+
+// Foreground palette for light themes.
+$dsh-light-theme-foreground: (
+    base: black,
+    disabled-button: rgba($black, 0.26),
+    elevation: black,
+    divider: rgba($black, 0.27),
+    icon: rgba($black, 0.54),
+    icons: rgba($black, 0.54),
+    text: rgba($black, 0.87),
+    secondary-text: rgba($black, 0.67),
+    slider-min: rgba($black, 0.87),
+    slider-off: rgba($black, 0.26),
+    slider-off-active: rgba($black, 0.38)
+);
+
+// Foreground palette for dark themes.
+$dsh-dark-theme-foreground: (
+    base: white,
+    disabled-button: rgba($white, 0.3),
+    elevation: black,
+    divider: rgba($white, 0.27),
+    icon: white,
+    icons: white,
+    text: white,
+    secondary-text: rgba($white, 0.67),
+    slider-min: white,
+    slider-off: rgba($white, 0.3),
+    slider-off-active: rgba($white, 0.3)
+);
+
+$dsh-slateblue: (
+    50: #f4f0ff,
+    100: #f3f0ff,
+    200: #ded6ff,
+    300: #baadff,
+    400: #9385ff,
+    500: #685bff,
+    600: #4b43d9,
+    700: #312eb3,
+    800: #1d1f8c,
+    900: #141866,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #dcdaff,
+    A700: #c4c1ff,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+$dsh-palegreen: (
+    50: #f0fff6,
+    100: #e8fff2,
+    200: #b6f2d3,
+    300: #87e6b8,
+    400: #5dd9a1,
+    500: #38cd8f,
+    600: #24a674,
+    700: #16805a,
+    800: #0b5940,
+    900: #063326,
+    A100: #e2ffef,
+    A200: #afffd3,
+    A400: #7cffb7,
+    A700: #63ffa9,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
--- a/src/styles/functions.scss
+++ b/src/styles/functions.scss
@ -1,14 +0,0 @@
-@import '~@angular/material/theming';
-@import 'variables';
-@import 'palletes';
-
-@function dsh-light-theme($primary, $accent, $warn: mat-palette($mat-red), $foreground: $dsh-light-theme-foreground, $background: $dsh-light-theme-background) {
-  @return (
-          primary: $primary,
-          accent: $accent,
-          warn: $warn,
-          is-dark: false,
-          foreground: $foreground,
-          background: $background
-  );
-}
--- a/src/styles/palletes.scss
+++ b/src/styles/palletes.scss
@ -1,108 +0,0 @@
-@import 'variables';
-
-// Background palette for light themes.
-$dsh-light-theme-background: (
-        background: $background-color,
-        card: $white
-);
-
-// Background palette for dark themes.
-$dsh-dark-theme-background: (
-        background: #303030,
-        card: $black
-);
-
-// Foreground palette for light themes.
-$dsh-light-theme-foreground: (
-        base:              black,
-        disabled-button:   rgba($black, 0.26),
-        elevation:         black,
-        divider:           rgba($black, 0.27),
-        icon:              rgba($black, 0.54),
-        icons:             rgba($black, 0.54),
-        text:              rgba($black, 0.87),
-        secondary-text:    rgba($black, 0.67),
-        slider-min:        rgba($black, 0.87),
-        slider-off:        rgba($black, 0.26),
-        slider-off-active: rgba($black, 0.38)
-);
-
-// Foreground palette for dark themes.
-$dsh-dark-theme-foreground: (
-        base:              white,
-        disabled-button:   rgba($white, 0.3),
-        elevation:         black,
-        divider:           rgba($white, 0.27),
-        icon:              white,
-        icons:             white,
-        text:              white,
-        secondary-text:    rgba($white, 0.67),
-        slider-min:        white,
-        slider-off:        rgba($white, 0.3),
-        slider-off-active: rgba($white, 0.3)
-);
-
-$dsh-slateblue: (
-        50: #f4f0ff,
-        100: #f3f0ff,
-        200: #ded6ff,
-        300: #baadff,
-        400: #9385ff,
-        500: #685bff,
-        600: #4b43d9,
-        700: #312eb3,
-        800: #1d1f8c,
-        900: #141866,
-        A100: #ffffff,
-        A200: #ffffff,
-        A400: #dcdaff,
-        A700: #c4c1ff,
-        contrast: (
-                50: $dark-primary-text,
-                100: $dark-primary-text,
-                200: $dark-primary-text,
-                300: $light-primary-text,
-                400: $light-primary-text,
-                500: $light-primary-text,
-                600: $light-primary-text,
-                700: $light-primary-text,
-                800: $light-primary-text,
-                900: $light-primary-text,
-                A100: $dark-primary-text,
-                A200: $light-primary-text,
-                A400: $light-primary-text,
-                A700: $light-primary-text
-        )
-);
-$dsh-palegreen: (
-        50: #f0fff6,
-        100: #e8fff2,
-        200: #b6f2d3,
-        300: #87e6b8,
-        400: #5dd9a1,
-        500: #38cd8f,
-        600: #24a674,
-        700: #16805a,
-        800: #0b5940,
-        900: #063326,
-        A100: #e2ffef,
-        A200: #afffd3,
-        A400: #7cffb7,
-        A700: #63ffa9,
-        contrast: (
-                50: $dark-primary-text,
-                100: $dark-primary-text,
-                200: $dark-primary-text,
-                300: $light-primary-text,
-                400: $light-primary-text,
-                500: $light-primary-text,
-                600: $light-primary-text,
-                700: $light-primary-text,
-                800: $light-primary-text,
-                900: $light-primary-text,
-                A100: $dark-primary-text,
-                A200: $light-primary-text,
-                A400: $light-primary-text,
-                A700: $light-primary-text
-        )
-);