feat(admin-ui): Create page header components

packages/admin-ui/angular.json

@@ -1,7 +1,8 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
+  "defaultProject": "vendure-admin",
   "projects": {
     "vendure-admin": {
       "root": "",

packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html

@@ -1,7 +1,7 @@
 <vdr-action-bar>
     <vdr-ab-left [grow]="true">
         <vdr-asset-search-input
-            class="pr4 mt1"
+            class="pr4 mt-1"
             [tags]="allTags$ | async"
             (searchTermChange)="searchTerm$.next($event)"
             (tagsChange)="filterByTags$.next($event)"

packages/admin-ui/src/lib/catalog/src/components/assign-to-channel-dialog/assign-to-channel-dialog.component.html

@@ -1,7 +1,7 @@
 <ng-template vdrDialogTitle>
     {{ 'catalog.assign-to-channel' | translate }}
 </ng-template>
-<clr-input-container class="mb4">
+<clr-input-container class="mb-4">
     <label>{{ 'common.channel' | translate }}</label>
     <vdr-channel-assignment-control
         clrInput

packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html

@@ -10,7 +10,7 @@
             />
             <div class="flex center">
                 <clr-toggle-wrapper
-                    class="expand-all-toggle mt2"
+                    class="expand-all-toggle mt-2"
                 >
                     <input type="checkbox" clrToggle [(ngModel)]="expandAll" (change)="toggleExpandAll()" />
                     <label>
@@ -18,7 +18,7 @@
                     </label>
                 </clr-toggle-wrapper>
                 <vdr-language-selector
-                    class="mt2"
+                    class="mt-2"
                     [availableLanguageCodes]="availableLanguages$ | async"
                     [currentLanguageCode]="contentLanguage$ | async"
                     (languageCodeChange)="setLanguage($event)"

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html

@@ -223,7 +223,7 @@
                         </a>
                     </div>
 
-                    <div class="pagination-row mt4" *ngIf="10 < (paginationConfig$ | async)?.totalItems">
+                    <div class="pagination-row mt-4" *ngIf="10 < (paginationConfig$ | async)?.totalItems">
                         <vdr-items-per-page-controls
                             [itemsPerPage]="itemsPerPage$ | async"
                             (itemsPerPageChange)="setItemsPerPage($event)"
@@ -266,7 +266,7 @@
                         (selectionChange)="selectedVariantIds = $event"
                     ></vdr-product-variants-list>
                 </section>
-                <div class="pagination-row mt4" *ngIf="10 < (paginationConfig$ | async)?.totalItems">
+                <div class="pagination-row mt-4" *ngIf="10 < (paginationConfig$ | async)?.totalItems">
                     <vdr-items-per-page-controls
                         [itemsPerPage]="itemsPerPage$ | async"
                         (itemsPerPageChange)="setItemsPerPage($event)"

packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html

@@ -52,7 +52,7 @@
             </vdr-dropdown>
         </div>
         <div class="flex wrap">
-            <clr-toggle-wrapper class="mt2">
+            <clr-toggle-wrapper class="mt-2">
                 <input type="checkbox" clrToggle [(ngModel)]="groupByProduct" (ngModelChange)="refresh()" />
                 <label>
                     {{ 'catalog.group-by-product' | translate }}

packages/admin-ui/src/lib/catalog/src/components/product-options-editor/product-options-editor.component.html

@@ -67,7 +67,7 @@
                     </section>
                 </div>
                 <section class="card-block">
-                    <table class="facet-values-list table mt2 mb4" formGroupName="options">
+                    <table class="facet-values-list table mt-2 mb-4" formGroupName="options">
                         <thead>
                             <tr>
                                 <th></th>

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.html

@@ -35,7 +35,7 @@
                     ></vdr-user-menu>
                 </div>
             </div>
-            <vdr-page-title [value]="(pageTitle$ | async) || '' | translate"></vdr-page-title>
+            <!--<vdr-page-title [value]="(pageTitle$ | async) || '' | translate"></vdr-page-title>-->
             <div class="content-area"><router-outlet></router-outlet></div>
         </div>
     </div>

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss

@@ -21,16 +21,12 @@
 }
 
 .top-bar {
-    position: sticky;
-    top: 0;
-    height: 48px;
     width: 100%;
     display: flex;
-    z-index: 20;
+    align-items: center;
     justify-content: space-between;
-    background-color: var(--color-left-nav-bg);
-    //background-color: var(--color-top-bar-bg);
-    //border-bottom: 1px solid var(--color-component-border-200);
+    padding: calc(var(--space-unit) * 4);
+    background-color: var(--color-weight-70);
 }
 
 .main-nav-container {
@@ -52,7 +48,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    background-color: var(--color-component-bg-100);
+    background-color: var(--color-white);
 }
 
 .content-container {
@@ -79,34 +75,13 @@
     }
 }
 
-vdr-breadcrumb {
-    width: 100%;
-    max-width: var(--layout-content-max-width);
-    background-color: var(--color-component-bg-100);
-    padding: var(--space-unit) 0;
-    z-index: 5;
-    position: sticky;
-    top: 0;
-    margin-right: auto;
-    margin-left: calc(var(--space-unit) * 3);
-    @media screen and (max-width: $breakpoint-medium) {
-        margin-left: calc(var(--space-unit));
-    }
-}
-
 .header-actions {
     align-items: center;
 }
 
 .content-area {
     position: relative;
-    max-width: var(--layout-content-max-width);
     margin-right: auto;
-    margin-left: calc(var(--space-unit) * 3);
-    padding: 0 var(--space-unit);
-    @media screen and (max-width: $breakpoint-medium) {
-        margin-left: calc(var(--space-unit));
-    }
 }
 
 ::ng-deep {

packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.html

@@ -2,6 +2,7 @@
     <ul class="breadcrumbs">
         <li *ngFor="let breadcrumb of (breadcrumbs$ | async); let isLast = last">
             <a [routerLink]="breadcrumb.link" *ngIf="!isLast">{{ breadcrumb.label | translate }}</a>
+            <ng-container *ngIf="!isLast"><clr-icon shape="caret right" class="color-weight-400 mx-1"></clr-icon></ng-container>
             <ng-container *ngIf="isLast">{{ breadcrumb.label | translate }}</ng-container>
         </li>
     </ul>

packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss

@@ -3,27 +3,28 @@
 :host {
     display: block;
     padding: 0;
+    position: relative;
 }
 .breadcrumbs {
     list-style-type: none;
     display: flex;
     overflow-x: auto;
     max-width: 100vw;
-    padding: 0 3px;
-    margin: 0 var(--space-unit);
+    line-height: 100%;
+    height: 40px;
+    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);
     font-size: var(--font-size-sm);
-    @media screen and (min-width: $breakpoint-small) {
-        padding: 0;
-    }
+    background-color: var(--color-weight-125);
+    border-radius: var(--border-radius-lg);
     li {
         display: inline-block;
-        margin-right: 10px;
         white-space: nowrap;
+        a:link, a:visited {
+            color: var(--color-weight-700);
+        }
+        &:last-child {
+            font-weight: 600;
+        }
     }
-    li:not(:last-child)::after {
-        content: '›';
-        top: 0;
-        color: var(--color-grey-400);
-        margin-left: 10px;
-    }
+
 }

packages/admin-ui/src/lib/core/src/components/page-title/page-title.component.scss

@@ -1,29 +0,0 @@
-@import "variables";
-
-:host {
-    display: block;
-    width: 100%;
-    max-width: var(--layout-content-max-width);
-    padding: 0 var(--space-unit);
-    margin-right: auto;
-    margin-left: calc(var(--space-unit) * 3);
-    @media screen and (max-width: $breakpoint-medium) {
-        margin-left: calc(var(--space-unit));
-    }
-}
-
-.page-title {
-    h1 {
-        margin-top: 0;
-        color: var(--color-text-100);
-        // max-height: 48px;
-        //transition: all 0.5s;
-        opacity: 1;
-        overflow: hidden;
-
-        &.folded {
-            // max-height: 0;
-            opacity: 1;
-        }
-    }
-}

packages/admin-ui/src/lib/core/src/components/page-title/page-title.component.ts

@@ -1,47 +0,0 @@
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    HostListener,
-    Input,
-} from '@angular/core';
-import { fromEvent } from 'rxjs';
-import { debounceTime, throttleTime } from 'rxjs/operators';
-
-@Component({
-    selector: 'vdr-page-title',
-    template: `
-        <div class="page-title">
-            <h1 [class.folded]="isFolded">{{ value | translate }}</h1>
-        </div>
-    `,
-    styleUrls: [`./page-title.component.scss`],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PageTitleComponent implements AfterViewInit {
-    @Input() value = '';
-    isFolded = false;
-    private lastScrollTop = 0;
-
-    constructor(private changeDetector: ChangeDetectorRef) {}
-
-    ngAfterViewInit() {
-        const contentContainer = document.querySelector('.content-container');
-        if (contentContainer) {
-            // fromEvent(contentContainer, 'scroll', { passive: true }).subscribe(() => {
-            //     const scrollTop = contentContainer.scrollTop;
-            //     const delta = this.lastScrollTop - scrollTop;
-            //     this.lastScrollTop = scrollTop;
-            //     if (100 < scrollTop && this.isFolded === false) {
-            //         this.isFolded = true;
-            //         this.changeDetector.markForCheck();
-            //     }
-            //     if ((scrollTop === 0 || (scrollTop < 50 && 0 < delta)) && this.isFolded === true) {
-            //         this.isFolded = false;
-            //         this.changeDetector.markForCheck();
-            //     }
-            // });
-        }
-    }
-}

packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.html

@@ -36,7 +36,7 @@
 </div>
 <div class="card">
     <div class="card-header">
-        <span class="p2">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>
+        <span class="p-2">{{ 'common.sample-formatting' | translate }}:</span><strong>{{ previewLocale | localeLanguageName:previewLocale }}</strong>
     </div>
     <div class="card-block">
         <div class="clr-row">

packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.scss

@@ -21,12 +21,14 @@
     align-items: center;
     justify-content: space-between;
     border: none;
-    border-radius: var(--border-radius);
     text-transform: uppercase;
     font-size: var(--font-size-xs);
     width: 100%;
-    background-color: transparent;
-    color: var(--color-text-200);
+    line-height: 100%;
+    height: 40px;
+    background-color: var(--color-weight-125);
+    border-radius: var(--border-radius-lg);
+    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) ;
     cursor: pointer;
     &:hover {
         color: var(--color-text-300);

packages/admin-ui/src/lib/core/src/core.module.ts

@@ -14,7 +14,6 @@ import { ChannelSwitcherComponent } from './components/channel-switcher/channel-
 import { MainNavComponent } from './components/main-nav/main-nav.component';
 import { NotificationComponent } from './components/notification/notification.component';
 import { OverlayHostComponent } from './components/overlay-host/overlay-host.component';
-import { PageTitleComponent } from './components/page-title/page-title.component';
 import { SettingsNavComponent } from './components/settings-nav/settings-nav.component';
 import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switcher.component';
 import { UiLanguageSwitcherDialogComponent } from './components/ui-language-switcher-dialog/ui-language-switcher-dialog.component';
@@ -57,7 +56,6 @@ import { SharedModule } from './shared/shared.module';
         UiLanguageSwitcherDialogComponent,
         ChannelSwitcherComponent,
         ThemeSwitcherComponent,
-        PageTitleComponent,
     ],
 })
 export class CoreModule {

packages/admin-ui/src/lib/core/src/providers/auth/auth.service.ts

@@ -40,9 +40,21 @@ export class AuthService {
             switchMap(login => {
                 if (login.__typename === 'CurrentUser') {
                     const { id } = this.getActiveChannel(login.channels);
-                    return this.dataService.client
-                        .loginSuccess(username, id, login.channels)
-                        .pipe(map(() => login));
+                    return this.dataService.administrator.getActiveAdministrator().single$.pipe(
+                        switchMap(({ activeAdministrator }) => {
+                            if (activeAdministrator) {
+                                return this.dataService.client
+                                    .loginSuccess(
+                                        `${activeAdministrator.firstName} ${activeAdministrator.lastName}`,
+                                        id,
+                                        login.channels,
+                                    )
+                                    .pipe(map(() => login));
+                            } else {
+                                return of(login);
+                            }
+                        }),
+                    );
                 }
                 return of(login);
             }),
@@ -89,13 +101,28 @@ export class AuthService {
      */
     validateAuthToken(): Observable<boolean> {
         return this.dataService.auth.currentUser().single$.pipe(
-            mergeMap(result => {
-                if (!result.me) {
+            mergeMap(({ me }) => {
+                if (!me) {
                     return of(false) as any;
                 }
-                this.setChannelToken(result.me.channels);
-                const { id } = this.getActiveChannel(result.me.channels);
-                return this.dataService.client.loginSuccess(result.me.identifier, id, result.me.channels);
+                this.setChannelToken(me.channels);
+
+                const { id } = this.getActiveChannel(me.channels);
+                return this.dataService.administrator.getActiveAdministrator().single$.pipe(
+                    switchMap(({ activeAdministrator }) => {
+                        if (activeAdministrator) {
+                            return this.dataService.client
+                                .loginSuccess(
+                                    `${activeAdministrator.firstName} ${activeAdministrator.lastName}`,
+                                    id,
+                                    me.channels,
+                                )
+                                .pipe(map(() => true));
+                        } else {
+                            return of(false);
+                        }
+                    }),
+                );
             }),
             mapTo(true),
             catchError(err => of(false)),

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -28,7 +28,7 @@ export * from './components/channel-switcher/channel-switcher.component';
 export * from './components/main-nav/main-nav.component';
 export * from './components/notification/notification.component';
 export * from './components/overlay-host/overlay-host.component';
-export * from './components/page-title/page-title.component';
+export * from './shared/components/page-title/page-title.component';
 export * from './components/settings-nav/settings-nav.component';
 export * from './components/theme-switcher/theme-switcher.component';
 export * from './components/ui-language-switcher-dialog/ui-language-switcher-dialog.component';

packages/admin-ui/src/lib/core/src/shared/components/action-bar/action-bar.component.scss

@@ -5,8 +5,6 @@
     justify-content: space-between;
     align-items: baseline;
     background-color: var(--color-component-bg-100);
-    position: sticky;
-    top: 40px;
     z-index: 25;
     border-bottom: 1px solid var(--color-component-border-200);
 

packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.html

@@ -11,7 +11,7 @@
     </div>
 </ng-template>
 <vdr-asset-search-input
-    class="mb2"
+    class="mb-2"
     [tags]="allTags$ | async"
     (searchTermChange)="searchTerm$.next($event)"
     (tagsChange)="filterByTags$.next($event)"

packages/admin-ui/src/lib/core/src/shared/components/asset-preview/asset-preview.component.html

@@ -125,7 +125,7 @@
         </clr-select-container>
         <div class="asset-detail">{{ width }} x {{ height }}</div>
     </div>
-    <vdr-asset-preview-links class="mb4" [asset]="asset"></vdr-asset-preview-links>
+    <vdr-asset-preview-links class="mb-4" [asset]="asset"></vdr-asset-preview-links>
     <div *ngIf="!editable" class="edit-button-wrapper">
         <a
             class="btn btn-link btn-sm"

packages/admin-ui/src/lib/core/src/shared/components/manage-tags-dialog/manage-tags-dialog.component.html

@@ -1,9 +1,9 @@
 <ng-template vdrDialogTitle>
     <span>{{ 'common.manage-tags' | translate }}</span>
 </ng-template>
-<p class="mt0 mb4">{{ 'common.manage-tags-description' | translate }}</p>
+<p class="mt0 mb-4">{{ 'common.manage-tags-description' | translate }}</p>
 <ul class="tag-list" *ngFor="let tag of allTags$ | async">
-    <li class="mb2 p1" [class.to-delete]="markedAsDeleted(tag.id)">
+    <li class="mb-2 p-1" [class.to-delete]="markedAsDeleted(tag.id)">
         <clr-icon shape="tag" class="is-solid mr2" [style.color]="tag.value | stringToColor"></clr-icon>
         <input type="text" (input)="updateTagValue(tag.id, $event.target.value)" [value]="tag.value" />
         <button class="icon-button" (click)="toggleDelete(tag.id)">

packages/admin-ui/src/lib/core/src/shared/components/page-body/page-body.component.html

@@ -0,0 +1,3 @@
+<div class="max-w-layout px-4">
+    <ng-content />
+</div>

packages/admin-ui/src/lib/core/src/shared/components/page-body/page-body.component.scss

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

packages/admin-ui/src/lib/core/src/shared/components/page-body/page-body.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'vdr-page-body',
+    templateUrl: './page-body.component.html',
+    styleUrls: ['./page-body.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageBodyComponent {}

packages/admin-ui/src/lib/core/src/shared/components/page-header-description/page-header-description.component.html

@@ -0,0 +1 @@
+<ng-content />

packages/admin-ui/src/lib/core/src/shared/components/page-header-description/page-header-description.component.scss

@@ -0,0 +1,3 @@
+:host {
+    max-width: 544px;
+}

packages/admin-ui/src/lib/core/src/shared/components/page-header-description/page-header-description.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'vdr-page-header-description',
+    templateUrl: './page-header-description.component.html',
+    styleUrls: ['./page-header-description.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageHeaderDescriptionComponent {}

packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.html

@@ -0,0 +1,5 @@
+<div class="tab-bar" *ngIf="tabs.length">
+    <div class="tab" *ngFor="let tab of tabs" [class.active]="selectedTabId === tab.id">
+        {{ tab.label | translate }}
+    </div>
+</div>

packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.scss

@@ -0,0 +1,22 @@
+:host {
+    display: block;
+    margin-top: calc(var(--space-unit) * 2);
+}
+
+.tab-bar {
+    display: flex;
+}
+
+.tab {
+    padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
+    border-bottom: 1px solid var(--color-weight-300);
+    margin-bottom: -1px;
+    color: var(--color-weight-700);
+    cursor: pointer;
+
+    &.active {
+        font-weight: 600;
+        color: var(--color-primary-800);
+        border-bottom-color: var(--color-primary-800);
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+export interface HeaderTab {
+    id: string;
+    label: string;
+    icon?: string;
+    route?: string[];
+}
+
+@Component({
+    selector: 'vdr-page-header-tabs',
+    templateUrl: './page-header-tabs.component.html',
+    styleUrls: ['./page-header-tabs.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageHeaderTabsComponent implements OnChanges {
+    @Input() tabs: HeaderTab[] = [];
+    @Input() selectedTabId: string | undefined;
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (this.tabs.length && !this.selectedTabId) {
+            this.selectedTabId = this.tabs[0]?.id;
+        }
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/page-header/page-header.component.html

@@ -0,0 +1,3 @@
+<div class="max-w-layout px-4">
+<ng-content />
+</div>

packages/admin-ui/src/lib/core/src/shared/components/page-header/page-header.component.scss

@@ -0,0 +1,5 @@
+:host {
+    display: block;
+    border-bottom: 1px solid var(--color-weight-150);
+    background-color: var(--color-weight-70);
+}

packages/admin-ui/src/lib/core/src/shared/components/page-header/page-header.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'vdr-page-header',
+    templateUrl: './page-header.component.html',
+    styleUrls: ['./page-header.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageHeaderComponent {}

packages/admin-ui/src/lib/core/src/shared/components/page-title/page-title.component.html

@@ -0,0 +1,3 @@
+<div class="page-title">
+    <h1>{{ (title$ | async) ?? '' | translate }}</h1>
+</div>

packages/admin-ui/src/lib/core/src/shared/components/page-title/page-title.component.scss

@@ -0,0 +1,13 @@
+@import "../../../../../static/styles/variables";
+
+:host {
+    display: block;
+}
+
+.page-title {
+    h1 {
+        margin-top: 0;
+        color: var(--color-weight-900);
+        font-weight: 600;
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/page-title/page-title.component.ts

@@ -0,0 +1,46 @@
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    HostListener,
+    Input,
+    OnChanges,
+    OnInit,
+    SimpleChanges,
+} from '@angular/core';
+import { fromEvent, Observable, Subject, combineLatest, BehaviorSubject } from 'rxjs';
+import { debounceTime, map, throttleTime } from 'rxjs/operators';
+import { BreadcrumbService } from '../../../providers/breadcrumb/breadcrumb.service';
+
+@Component({
+    selector: 'vdr-page-title',
+    templateUrl: './page-title.component.html',
+    styleUrls: [`./page-title.component.scss`],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageTitleComponent implements OnInit, OnChanges {
+    @Input() title = '';
+    private titleChange$ = new BehaviorSubject<string | undefined>(undefined);
+    protected title$: Observable<string>;
+
+    constructor(private changeDetector: ChangeDetectorRef, private breadcrumbService: BreadcrumbService) {}
+
+    ngOnInit() {
+        this.title$ = combineLatest(this.titleChange$, this.breadcrumbService.breadcrumbs$).pipe(
+            map(([title, breadcrumbs]) => {
+                if (title) {
+                    return title;
+                } else {
+                    return breadcrumbs[breadcrumbs.length - 1].label;
+                }
+            }),
+        );
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.value) {
+            this.titleChange$.next(changes.value.currentValue);
+        }
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/product-multi-selector-dialog/product-multi-selector-dialog.component.html

@@ -42,7 +42,7 @@
         </div>
     </div>
     <div class="selection">
-        <div class="m2 flex center">
+        <div class="m-2 flex center">
             <div>
                 {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}
             </div>

packages/admin-ui/src/lib/core/src/shared/components/tabbed-custom-fields/tabbed-custom-fields.component.html

@@ -9,7 +9,7 @@
                 }}
             </button>
             <clr-tab-content *clrIfActive>
-                <div class="mt4">
+                <div class="mt-4">
                     <ng-container *ngFor="let customField of group.customFields">
                         <vdr-custom-field-control
                             *ngIf="customFieldIsSet(customField.name)"

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -69,6 +69,7 @@ import { DialogTitleDirective } from './components/modal-dialog/dialog-title.dir
 import { ModalDialogComponent } from './components/modal-dialog/modal-dialog.component';
 import { ObjectTreeComponent } from './components/object-tree/object-tree.component';
 import { OrderStateLabelComponent } from './components/order-state-label/order-state-label.component';
+import { PageTitleComponent } from './components/page-title/page-title.component';
 import { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
 import { ProductMultiSelectorDialogComponent } from './components/product-multi-selector-dialog/product-multi-selector-dialog.component';
 import { ProductSearchInputComponent } from './components/product-search-input/product-search-input.component';
@@ -140,6 +141,10 @@ import { StateI18nTokenPipe } from './pipes/state-i18n-token.pipe';
 import { StringToColorPipe } from './pipes/string-to-color.pipe';
 import { TimeAgoPipe } from './pipes/time-ago.pipe';
 import { CanDeactivateDetailGuard } from './providers/routing/can-deactivate-detail-guard';
+import { PageHeaderComponent } from './components/page-header/page-header.component';
+import { PageHeaderDescriptionComponent } from './components/page-header-description/page-header-description.component';
+import { PageHeaderTabsComponent } from './components/page-header-tabs/page-header-tabs.component';
+import { PageBodyComponent } from './components/page-body/page-body.component';
 
 const IMPORTS = [
     ClarityModule,
@@ -280,6 +285,11 @@ const DYNAMIC_FORM_INPUTS = [
     HtmlEditorFormInputComponent,
     ProductMultiSelectorFormInputComponent,
     CombinationModeFormInputComponent,
+    PageHeaderComponent,
+    PageTitleComponent,
+    PageHeaderDescriptionComponent,
+    PageHeaderTabsComponent,
+    PageBodyComponent,
 ];
 
 @NgModule({

packages/admin-ui/src/lib/order/src/components/draft-order-detail/draft-order-detail.component.html

@@ -93,7 +93,7 @@
                 <div class="card-block">
                     <div class="card-text">
                         <vdr-customer-label
-                            class="block mb2"
+                            class="block mb-2"
                             *ngIf="order.customer"
                             [customer]="order.customer"
                         ></vdr-customer-label>
@@ -118,7 +118,7 @@
                     </h4>
                     <div class="card-text">
                         <vdr-formatted-address
-                            class="block mb2"
+                            class="block mb-2"
                             *ngIf="order.billingAddress"
                             [address]="order.billingAddress"
                         ></vdr-formatted-address>
@@ -145,7 +145,7 @@
                 <div class="card-block">
                     <div class="card-text">
                         <vdr-formatted-address
-                            class="block mb2"
+                            class="block mb-2"
                             *ngIf="order.shippingAddress"
                             [address]="order.shippingAddress"
                         ></vdr-formatted-address>

packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.html

@@ -181,14 +181,14 @@
                 </tbody>
             </table>
 
-            <h4 class="mb2">{{ 'order.modifications' | translate }}</h4>
+            <h4 class="mb-2">{{ 'order.modifications' | translate }}</h4>
             <clr-accordion>
                 <clr-accordion-panel>
                     <clr-accordion-title>{{ 'order.add-item-to-order' | translate }}</clr-accordion-title>
                     <clr-accordion-content *clrIfExpanded>
-                        <vdr-product-variant-selector class="mb4" (productSelected)="addItemSelectedVariant = $event">
+                        <vdr-product-variant-selector class="mb-4" (productSelected)="addItemSelectedVariant = $event">
                         </vdr-product-variant-selector>
-                        <div *ngIf="addItemSelectedVariant" class="flex mb4">
+                        <div *ngIf="addItemSelectedVariant" class="flex mb-4">
                             <img
                                 *ngIf="addItemSelectedVariant.productAsset as asset"
                                 [src]="asset | assetPreview: 'tiny'"

packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html

@@ -1,4 +1,4 @@
-<vdr-action-bar>
+<!--<vdr-action-bar>
     <vdr-ab-left>
         <div class="search-form">
             <div class="filter-presets btn-group btn-outline-primary" *ngIf="activePreset$ | async as activePreset">
@@ -75,58 +75,70 @@
     <vdr-ab-right>
         <vdr-action-bar-items locationId="order-list"></vdr-action-bar-items>
         <ng-container *ngIf="canCreateDraftOrder">
-            <a class="btn btn-primary mt1" *vdrIfPermissions="['CreateOrder']" [routerLink]="['./draft/create']">
+            <a class="btn btn-primary mt-1" *vdrIfPermissions="['CreateOrder']" [routerLink]="['./draft/create']">
                 <clr-icon shape="plus"></clr-icon>
                 {{ 'catalog.create-draft-order' | translate }}
             </a>
         </ng-container>
     </vdr-ab-right>
-</vdr-action-bar>
-
-<vdr-data-table
-    [items]="items$ | async"
-    [itemsPerPage]="itemsPerPage$ | async"
-    [totalItems]="totalItems$ | async"
-    [currentPage]="currentPage$ | async"
-    (pageChange)="setPageNumber($event)"
-    (itemsPerPageChange)="setItemsPerPage($event)"
->
-    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'order.order-type' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>
-    <vdr-dt-column></vdr-dt-column>
-    <ng-template let-order="item">
-        <td class="left align-middle">{{ order.code }}</td>
-        <td class="left align-middle">
-            <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
-        </td>
-        <td class="left align-middle">
-            <vdr-chip>{{ order.type }}</vdr-chip>
-        </td>
-        <td class="left align-middle">
-            <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
-        </td>
-        <td class="left align-middle">{{ order.totalWithTax | localeCurrency: order.currencyCode }}</td>
-        <td class="left align-middle">{{ order.updatedAt | timeAgo }}</td>
-        <td class="left align-middle">{{ order.orderPlacedAt | localeDate: 'medium' }}</td>
-        <td class="left align-middle">{{ getShippingNames(order) }}</td>
-        <td class="right align-middle">
-            <vdr-table-row-action
-                iconShape="shopping-cart"
-                [label]="'common.open' | translate"
-                [linkTo]="
-                    order.state === 'Modifying'
-                        ? ['./', order.id, 'modify']
-                        : order.state === 'Draft'
-                        ? ['./draft', order.id]
-                        : ['./', order.id]
-                "
-            ></vdr-table-row-action>
-        </td>
-    </ng-template>
-</vdr-data-table>
+</vdr-action-bar>-->
+<vdr-page-header>
+    <vdr-page-title />
+    <vdr-page-header-description>Description of the current page (if applicable)</vdr-page-header-description>
+    <vdr-page-header-tabs
+        [tabs]="[
+            { id: 'tab1', label: 'Tab 1' },
+            { id: 'tab2', label: 'Tab 2' },
+            { id: 'tab3', label: 'Tab 3' }
+        ]"
+    ></vdr-page-header-tabs>
+</vdr-page-header>
+<vdr-page-body>
+    <vdr-data-table
+        [items]="items$ | async"
+        [itemsPerPage]="itemsPerPage$ | async"
+        [totalItems]="totalItems$ | async"
+        [currentPage]="currentPage$ | async"
+        (pageChange)="setPageNumber($event)"
+        (itemsPerPageChange)="setItemsPerPage($event)"
+    >
+        <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
+        <vdr-dt-column>{{ 'order.customer' | translate }}</vdr-dt-column>
+        <vdr-dt-column>{{ 'order.order-type' | translate }}</vdr-dt-column>
+        <vdr-dt-column>{{ 'order.state' | translate }}</vdr-dt-column>
+        <vdr-dt-column>{{ 'order.total' | translate }}</vdr-dt-column>
+        <vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>
+        <vdr-dt-column>{{ 'order.placed-at' | translate }}</vdr-dt-column>
+        <vdr-dt-column>{{ 'order.shipping' | translate }}</vdr-dt-column>
+        <vdr-dt-column></vdr-dt-column>
+        <ng-template let-order="item">
+            <td class="left align-middle">{{ order.code }}</td>
+            <td class="left align-middle">
+                <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
+            </td>
+            <td class="left align-middle">
+                <vdr-chip>{{ order.type }}</vdr-chip>
+            </td>
+            <td class="left align-middle">
+                <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
+            </td>
+            <td class="left align-middle">{{ order.totalWithTax | localeCurrency : order.currencyCode }}</td>
+            <td class="left align-middle">{{ order.updatedAt | timeAgo }}</td>
+            <td class="left align-middle">{{ order.orderPlacedAt | localeDate : 'medium' }}</td>
+            <td class="left align-middle">{{ getShippingNames(order) }}</td>
+            <td class="right align-middle">
+                <vdr-table-row-action
+                    iconShape="shopping-cart"
+                    [label]="'common.open' | translate"
+                    [linkTo]="
+                        order.state === 'Modifying'
+                            ? ['./', order.id, 'modify']
+                            : order.state === 'Draft'
+                            ? ['./draft', order.id]
+                            : ['./', order.id]
+                    "
+                ></vdr-table-row-action>
+            </td>
+        </ng-template>
+    </vdr-data-table>
+</vdr-page-body>

packages/admin-ui/src/lib/order/src/components/refund-order-dialog/refund-order-dialog.component.html

@@ -88,7 +88,7 @@
             </tr>
         </table>
     </div>
-    <div class="refund-details mt4" [class.faded]="!isRefunding() && !isCancelling()">
+    <div class="refund-details mt-4" [class.faded]="!isRefunding() && !isCancelling()">
         <div>
             <label class="clr-control-label">{{ 'order.refund-cancellation-reason' | translate }}</label>
             <ng-select

packages/admin-ui/src/lib/order/src/components/select-address-dialog/select-address-dialog.component.html

@@ -6,7 +6,7 @@
         <ng-template [(clrIfActive)]="useExisting">
             <clr-tab-content>
                 <vdr-radio-card-fieldset
-                    class="block mt4"
+                    class="block mt-4"
                     [idFn]="addressIdFn"
                     [selectedItemId]="selectedAddress && addressIdFn(selectedAddress)"
                     (selectItem)="selectedAddress = $event"

packages/admin-ui/src/lib/order/src/components/select-customer-dialog/select-customer-dialog.component.html

@@ -18,7 +18,7 @@
                     [loading]="isLoading"
                     [typeahead]="input$"
                     [(ngModel)]="selectedCustomer"
-                    class="mt4"
+                    class="mt-4"
                 >
                     <ng-template ng-label-tmp let-item="item" let-clear="clear">
                         <clr-icon shape="user" class="is-solid"></clr-icon

packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.html

@@ -86,7 +86,7 @@
         [detailForm]="detailForm"
     ></vdr-custom-detail-component-host>
 
-    <div class="clr-row mt4">
+    <div class="clr-row mt-4">
         <div class="clr-col">
             <label class="clr-control-label">{{ 'settings.payment-eligibility-checker' | translate }}</label>
             <vdr-configurable-input

packages/admin-ui/src/lib/settings/src/components/shipping-method-detail/shipping-method-detail.component.html

@@ -61,7 +61,7 @@
         [readonly]="!(updatePermission | hasPermission)"
         [label]="'common.description' | translate"
     ></vdr-rich-text-editor>
-    <vdr-form-field [label]="'settings.fulfillment-handler' | translate" for="fulfillmentHandler" class="mb2">
+    <vdr-form-field [label]="'settings.fulfillment-handler' | translate" for="fulfillmentHandler" class="mb-2">
         <select
             name="fulfillmentHandler"
             formControlName="fulfillmentHandler"
@@ -89,7 +89,7 @@
         [detailForm]="detailForm"
     ></vdr-custom-detail-component-host>
 
-    <div class="clr-row mt4">
+    <div class="clr-row mt-4">
         <div class="clr-col">
             <label class="clr-control-label">{{ 'settings.shipping-eligibility-checker' | translate }}</label>
             <vdr-configurable-input

packages/admin-ui/src/lib/static/fonts/fonts.css

@@ -125,6 +125,69 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./inter-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./inter-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./inter-greek-ext.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./inter-greek.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./inter-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./inter-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./inter-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
 @font-face {
   font-family: 'Inter';
   font-style: normal;

packages/admin-ui/src/lib/static/styles/global/_utilities.scss

@@ -1,15 +1,3 @@
-@use 'sass:math';
-
-// spacing
-$space-unit: 8px;
-
-$space-1: math.div($space-unit, 2);
-$space-2: $space-unit;
-$space-3: $space-unit * 2;
-$space-4: $space-unit * 3;
-$space-5: $space-unit * 4;
-
-
 /////////////// layout ///////////////
 .block {
     display: block !important;
@@ -32,6 +20,10 @@ $space-5: $space-unit * 4;
     flex: 1;
 }
 
+.max-w-layout {
+    max-width: var(--layout-content-max-width);
+}
+
 .sm\:hidden {
     @media screen and (max-width: $breakpoint-small) {
         display: none !important;
@@ -44,168 +36,6 @@ $space-5: $space-unit * 4;
     }
 }
 
-/////////////// margins ///////////////
-.m0 {
-    margin: 0;
-}
-.mt0 {
-    margin-top: 0;
-}
-.mr0 {
-    margin-right: 0;
-}
-.mb0 {
-    margin-bottom: 0;
-}
-.ml0 {
-    margin-left: 0;
-}
-.mx0 {
-    margin-left: 0;
-    margin-right: 0;
-}
-.my0 {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.m1 {
-    margin: $space-1;
-}
-.mt1 {
-    margin-top: $space-1;
-}
-.mr1 {
-    margin-right: $space-1;
-}
-.mb1 {
-    margin-bottom: $space-1;
-}
-.ml1 {
-    margin-left: $space-1;
-}
-.mx1 {
-    margin-left: $space-1;
-    margin-right: $space-1;
-}
-.my1 {
-    margin-top: $space-1;
-    margin-bottom: $space-1;
-}
-
-.m2 {
-    margin: $space-2;
-}
-.mt2 {
-    margin-top: $space-2;
-}
-.mr2 {
-    margin-right: $space-2;
-}
-.mb2 {
-    margin-bottom: $space-2;
-}
-.ml2 {
-    margin-left: $space-2;
-}
-.mx2 {
-    margin-left: $space-2;
-    margin-right: $space-2;
-}
-.my2 {
-    margin-top: $space-2;
-    margin-bottom: $space-2;
-}
-
-.m3 {
-    margin: $space-3;
-}
-.mt3 {
-    margin-top: $space-3;
-}
-.mr3 {
-    margin-right: $space-3;
-}
-.mb3 {
-    margin-bottom: $space-3;
-}
-.ml3 {
-    margin-left: $space-3;
-}
-.mx3 {
-    margin-left: $space-3;
-    margin-right: $space-3;
-}
-.my3 {
-    margin-top: $space-3;
-    margin-bottom: $space-3;
-}
-
-.m4 {
-    margin: $space-4;
-}
-.mt4 {
-    margin-top: $space-4;
-}
-.mr4 {
-    margin-right: $space-4;
-}
-.mb4 {
-    margin-bottom: $space-4;
-}
-.ml4 {
-    margin-left: $space-4;
-}
-.mx4 {
-    margin-left: $space-4;
-    margin-right: $space-4;
-}
-.my4 {
-    margin-top: $space-4;
-    margin-bottom: $space-4;
-}
-
-.m5 {
-    margin: $space-5;
-}
-.mt5 {
-    margin-top: $space-5;
-}
-.mr5 {
-    margin-right: $space-5;
-}
-.mb5 {
-    margin-bottom: $space-5;
-}
-.ml5 {
-    margin-left: $space-5;
-}
-.mx5 {
-    margin-left: $space-5;
-    margin-right: $space-5;
-}
-.my5 {
-    margin-top: $space-5;
-    margin-bottom: $space-5;
-}
-
-.mxn1 {
-    margin-left: -$space-1;
-    margin-right: -$space-1;
-}
-.mxn2 {
-    margin-left: -$space-2;
-    margin-right: -$space-2;
-}
-.mxn3 {
-    margin-left: -$space-3;
-    margin-right: -$space-3;
-}
-.mxn4 {
-    margin-left: -$space-4;
-    margin-right: -$space-4;
-}
-
 .ml-auto {
     margin-left: auto;
 }
@@ -217,126 +47,6 @@ $space-5: $space-unit * 4;
     margin-right: auto;
 }
 
-/////////////// padding ///////////////
-.p0 {
-    padding: 0;
-}
-.pt0 {
-    padding-top: 0;
-}
-.pr0 {
-    padding-right: 0;
-}
-.pb0 {
-    padding-bottom: 0;
-}
-.pl0 {
-    padding-left: 0;
-}
-.px0 {
-    padding-left: 0;
-    padding-right: 0;
-}
-.py0 {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-.p1 {
-    padding: $space-1;
-}
-.pt1 {
-    padding-top: $space-1;
-}
-.pr1 {
-    padding-right: $space-1;
-}
-.pb1 {
-    padding-bottom: $space-1;
-}
-.pl1 {
-    padding-left: $space-1;
-}
-.py1 {
-    padding-top: $space-1;
-    padding-bottom: $space-1;
-}
-.px1 {
-    padding-left: $space-1;
-    padding-right: $space-1;
-}
-
-.p2 {
-    padding: $space-2;
-}
-.pt2 {
-    padding-top: $space-2;
-}
-.pr2 {
-    padding-right: $space-2;
-}
-.pb2 {
-    padding-bottom: $space-2;
-}
-.pl2 {
-    padding-left: $space-2;
-}
-.py2 {
-    padding-top: $space-2;
-    padding-bottom: $space-2;
-}
-.px2 {
-    padding-left: $space-2;
-    padding-right: $space-2;
-}
-
-.p3 {
-    padding: $space-3;
-}
-.pt3 {
-    padding-top: $space-3;
-}
-.pr3 {
-    padding-right: $space-3;
-}
-.pb3 {
-    padding-bottom: $space-3;
-}
-.pl3 {
-    padding-left: $space-3;
-}
-.py3 {
-    padding-top: $space-3;
-    padding-bottom: $space-3;
-}
-.px3 {
-    padding-left: $space-3;
-    padding-right: $space-3;
-}
-
-.p4 {
-    padding: $space-4;
-}
-.pt4 {
-    padding-top: $space-4;
-}
-.pr4 {
-    padding-right: $space-4;
-}
-.pb4 {
-    padding-bottom: $space-4;
-}
-.pl4 {
-    padding-left: $space-4;
-}
-.py4 {
-    padding-top: $space-4;
-    padding-bottom: $space-4;
-}
-.px4 {
-    padding-left: $space-4;
-    padding-right: $space-4;
-}
 
 $spacings: (1, 2, 3, 4, 5, auto);
 

packages/admin-ui/src/lib/static/styles/theme/default.scss

@@ -4,51 +4,6 @@
 // are left as their defaults.
 :root {
     // Colors
-    --color-primary-100: #e3f6fc;
-    --color-primary-200: #afdaf3;
-    --color-primary-300: #9adbf3;
-    --color-primary-400: #5dcff3;
-    --color-primary-500: #13b7f3;
-    --color-primary-600: #137fac;
-    --color-primary-700: #0b425d;
-    --color-primary-800: #072f3c;
-    --color-primary-900: #0a1b27;
-    --color-secondary-100: #d9f9e1;
-    --color-secondary-200: #b6efd3;
-    --color-secondary-300: #91ceb8;
-    --color-secondary-400: #69a88e;
-    --color-secondary-500: #438571;
-    --color-secondary-600: #376e5d;
-    --color-secondary-700: #254b40;
-    --color-secondary-800: #182f28;
-    --color-secondary-900: #08221c;
-    --color-success-100: #ddfbdd;
-    --color-success-200: #afed88;
-    --color-success-300: #78c656;
-    --color-success-400: #54af32;
-    --color-success-500: #308300;
-    --color-success-600: #255900;
-    --color-success-700: #1d4900;
-    --color-success-800: #122400;
-    --color-success-900: #060d00;
-    --color-error-100: #fce2de;
-    --color-error-200: #e77f77;
-    --color-error-300: #f3553d;
-    --color-error-400: #e13f28;
-    --color-error-500: #C92100;
-    --color-error-600: #891d00;
-    --color-error-700: #5b1200;
-    --color-error-800: #3c0c00;
-    --color-error-900: #2a0900;
-    --color-warning-100: #fff6dc;
-    --color-warning-200: #ffe1a3;
-    --color-warning-300: #ffd2a3;
-    --color-warning-400: #ffb74d;
-    --color-warning-500: #FF9F07;
-    --color-warning-600: #a16704;
-    --color-warning-700: #674002;
-    --color-warning-800: #492c02;
-    --color-warning-900: #231401;
     --color-grey-100: #fafafa;
     --color-grey-200: #f2f3f5;
     --color-grey-300: #bfc3cc;
@@ -102,6 +57,7 @@
 
     --color-white: #fff;
     --color-black: #000;
+    --color-weight-70: hsl(0 0% 98%);
     --color-weight-100: hsl(0 0% 95%);
     --color-weight-125: hsl(0 0% 93%);
     --color-weight-150: hsl(0 0% 90%);