feat(admin-ui): Improved dark mode & style tweaks

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

@@ -53,20 +53,17 @@
                     </clr-toggle-wrapper>
                 </vdr-form-field>
             </vdr-card>
-            <vdr-card>
-                <vdr-page-entity-info
-                    *ngIf="entity$ | async as entity"
-                    [entity]="entity"
-                ></vdr-page-entity-info>
+            <vdr-card *ngIf="entity$ | async as entity">
+                <vdr-page-entity-info [entity]="entity"></vdr-page-entity-info>
             </vdr-card>
         </vdr-page-detail-sidebar>
 
-        <vdr-page-block
+        <vdr-page-block *ngIf="entity$ | async as entity"
             ><nav role="navigation">
                 <ul class="collection-breadcrumbs">
                     <li
                         *ngFor="
-                            let breadcrumb of (entity$ | async)?.breadcrumbs;
+                            let breadcrumb of entity.breadcrumbs;
                             let isFirst = first;
                             let isLast = last
                         "

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

@@ -80,6 +80,8 @@
                         [removable]="updatePermissions | hasPermission"
                         (remove)="removeProductFacetValue(facetValue.id)"
                     ></vdr-facet-value-chip>
+                </div>
+                <div>
                     <button
                         class="btn btn-sm btn-secondary"
                         *vdrIfPermissions="updatePermissions"

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

@@ -56,7 +56,9 @@
                         <span class="mr-1">{{ optionGroupName(option.groupId) }}:</span>
                         {{ optionName(option) }}
                     </vdr-chip>
-                    <a [routerLink]="['./', 'options']" class="btn btn-link btn-sm"
+                </div>
+                <div>
+                    <a [routerLink]="['./', 'options']" class="btn"
                         >{{ 'catalog.edit-options' | translate }}...</a
                     >
                 </div>
@@ -69,6 +71,8 @@
                         [removable]="updatePermissions | hasPermission"
                         (remove)="removeFacetValue(facetValue.id)"
                     ></vdr-facet-value-chip>
+                </div>
+                <div>
                     <button
                         class="btn btn-sm btn-secondary"
                         *vdrIfPermissions="updatePermissions"

packages/admin-ui/src/lib/core/src/app.component.ts

@@ -68,6 +68,12 @@ export class AppComponent implements OnInit {
             .mapStream(({ userStatus }) => userStatus.administratorId)
             .subscribe(administratorId => {
                 this.localStorageService.setAdminId(administratorId);
+                const theme = this.localStorageService.get('activeTheme');
+                if (theme) {
+                    this.dataService.client.setUiTheme(theme).subscribe(() => {
+                        this.localStorageService.set('activeTheme', theme);
+                    });
+                }
             });
 
         if (isDevMode()) {

packages/admin-ui/src/lib/core/src/common/component-registry-types.ts

@@ -69,6 +69,7 @@ export type PageLocationId =
     | 'product-detail'
     | 'product-list'
     | 'product-variant-detail'
+    | 'profile'
     | 'promotion-detail'
     | 'promotion-list'
     | 'role-detail'

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

@@ -4,7 +4,7 @@
             <a [routerLink]="['/']"><img src="assets/logo.svg" class="logo" style="max-width: 100px" /></a>
             <div class="collapse-menu">
                 <button class="" (click)="collapseNav()">
-                    <clr-icon shape="window-close" size="16"></clr-icon>
+                    <clr-icon shape="window-close" size="24"></clr-icon>
                 </button>
             </div>
         </div>
@@ -26,7 +26,9 @@
             <div class="top-bar">
                 <div class="expand-menu mr-1">
                     <button class="" (click)="expandNav()">
-                        <clr-icon shape="menu" size="16"></clr-icon>
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="bars">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                        </svg>
                     </button>
                 </div>
                 <div>

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

@@ -10,11 +10,11 @@
     background-color: var(--color-left-nav-bg);
     color: var(--color-left-nav-text);
     display: flex;
+    display: flex;
     flex-direction: column;
     overflow: hidden;
     height: 100%;
     border-right: 1px solid var(--color-weight-150);
-    //box-shadow: -3px 1px 10px 0px rgb(0 0 0 / 18%);
     z-index: 1;
     width: var(--left-nav-width);
     max-width: var(--left-nav-width);
@@ -47,8 +47,22 @@
     button {
         border: none;
         padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
-        background-color: var(--color-weight-125);
+        background-color: var(--color-page-header-item-bg);
         border-radius: var(--border-radius-lg);
+        color: var(--color-text-100);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .bars {
+        width: 24px;
+        height: 24px;
+    }
+}
+.collapse-menu {
+    button {
+        height: 40px;
+        background-color: var(--color-weight-200);
     }
 }
 
@@ -58,7 +72,7 @@
     align-items: center;
     justify-content: space-between;
     padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);
-    background-color: var(--page-header-color);
+    background-color: var(--color-page-header);
     @media screen and (min-width: $breakpoint-medium) {
         padding: calc(var(--space-unit) * 4);
         padding-left: var(--surface-margin-left);
@@ -75,8 +89,8 @@
     hr {
         margin: 0 calc(var(--space-unit) * 4);
         margin-bottom: calc(var(--space-unit) * 4);
-        border: 1px solid #d9d9d9;
-        box-shadow: 0px 1px 0px #ffffff;
+        border: 1px solid var(--color-weight-150);
+        box-shadow: 0px 1px 0px var(--color-weight-100);
     }
 }
 
@@ -84,7 +98,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    background-color: var(--color-white);
+    background-color: var(--color-surface-bg);
 }
 
 .content-container {
@@ -97,6 +111,7 @@
     justify-content: space-between;
     min-width: 0;
     padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
+    padding-right: calc(var(--space-unit) * 1.5);
     @media screen and (min-width: $breakpoint-medium) {
         padding: calc(var(--space-unit) * 4);
     }

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

@@ -1,9 +1,17 @@
 <nav role="navigation">
     <ul class="breadcrumbs">
-        <li *ngFor="let breadcrumb of (breadcrumbs$ | async); let isLast = last">
+        <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"
+                ><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>
+    <ul class="breadcrumbs mobile" *ngIf="parentBreadcrumb$ | async as parentBreadcrumb">
+        <li>
+            <clr-icon shape="caret left" class="color-weight-400 mr-1"></clr-icon>
+            <a [routerLink]="parentBreadcrumb.link">{{ parentBreadcrumb.label | translate }}</a>
+        </li>
+    </ul>
 </nav>

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

@@ -14,12 +14,9 @@
     line-height: 100%;
     height: 40px;
     padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2.5);
-    font-size: var(--font-size-xs);
-    background-color: var(--color-weight-125);
+    font-size: var(--font-size-sm);
+    background-color: var(--color-page-header-item-bg);
     border-radius: var(--border-radius-lg);
-    @media screen and (min-width: $breakpoint-small) {
-        font-size: var(--font-size-sm);
-    }
     li {
         display: inline-block;
         white-space: nowrap;
@@ -32,3 +29,13 @@
         }
     }
 }
+.breadcrumbs:not(.mobile) {
+    @media screen and (max-width: $breakpoint-medium) {
+        display: none;
+    }
+}
+.breadcrumbs.mobile {
+    @media screen and (min-width: $breakpoint-medium) {
+        display: none;
+    }
+}

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

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { BreadcrumbService } from '../../providers/breadcrumb/breadcrumb.service';
 
 /**
@@ -18,9 +19,13 @@ import { BreadcrumbService } from '../../providers/breadcrumb/breadcrumb.service
 })
 export class BreadcrumbComponent {
     breadcrumbs$: Observable<Array<{ link: string | any[]; label: string }>>;
+    parentBreadcrumb$: Observable<{ link: string | any[]; label: string } | undefined>;
     private destroy$ = new Subject<void>();
 
     constructor(private breadcrumbService: BreadcrumbService) {
         this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
+        this.parentBreadcrumb$ = this.breadcrumbService.breadcrumbs$.pipe(
+            map(breadcrumbs => (1 < breadcrumbs.length ? breadcrumbs[breadcrumbs.length - 2] : undefined)),
+        );
     }
 }

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

@@ -12,15 +12,16 @@
     align-items: center;
     font-size: var(--font-size-xs);
     color: var(--color-left-nav-text);
-    background-color: var(--color-weight-150);
+    background-color: var(--color-channel-switcher-bg);
     border: none;
     cursor: pointer;
     width: 100%;
     border-radius: var(--border-radius-lg);
     padding: var(--space-unit) calc(var(--space-unit) * 2);
+    transition: background-color 0.1s, color 0.1s;
 
     &:hover {
-        background-color: var(--color-component-bg-100);
+        background-color: var(--color-channel-switcher-hover-bg);
         color: var(--color-left-nav-text-hover);
     }
 

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

@@ -61,7 +61,7 @@ nav.main-nav {
         &.active,
         &.active a:link,
         &.active a:visited {
-            color: var(--color-primary-800);
+            color: var(--color-text-active);
             border-right-color: var(--color-primary-500);
             clr-icon {
                 color: var(--color-primary-500);

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

@@ -24,16 +24,16 @@
         opacity: 0;
 
         &.success {
-            background-color: var(--color-success-500);
+            background-color: var(--color-success-800);
         }
         &.error {
-            background-color: var(--color-error-500);
+            background-color: var(--color-error-800);
         }
         &.warning {
-            background-color: var(--color-warning-500);
+            background-color: var(--color-warning-800);
         }
         &.info {
-            background-color: var(--color-secondary-500);
+            background-color: var(--color-weight-500);
         }
 
         &.visible {

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

@@ -21,17 +21,17 @@
     align-items: center;
     justify-content: space-between;
     border: none;
-    text-transform: uppercase;
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-sm);
     width: 100%;
     line-height: 100%;
     height: 40px;
-    background-color: var(--color-weight-125);
+    color: var(--color-text-100);
+    background-color: var(--color-page-header-item-bg);
     border-radius: var(--border-radius-lg);
 
     cursor: pointer;
     &:hover {
-        color: var(--color-text-300);
+        color: var(--color-text-200);
     }
     @media screen and (min-width: $breakpoint-medium) {
         padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.5)
@@ -45,6 +45,8 @@
     justify-content: center;
     border-radius: 100%;
     background-color: var(--color-primary-600);
+    // gradient bg from white to transparent
+    background-image: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
     width: 24px;
     height: 24px;
     margin-right: 6px;

packages/admin-ui/src/lib/core/src/shared/components/address-form/address-form.component.html

@@ -1,75 +1,52 @@
 <form [formGroup]="formGroup">
-    <div class="clr-row">
-        <div class="clr-col-md-4">
-            <clr-input-container>
-                <label>{{ 'customer.full-name' | translate }}</label>
-                <input formControlName="fullName" type="text" clrInput />
-            </clr-input-container>
-        </div>
-        <div class="clr-col-md-4">
-            <clr-input-container>
-                <label>{{ 'customer.company' | translate }}</label>
-                <input formControlName="company" type="text" clrInput />
-            </clr-input-container>
-        </div>
-    </div>
+    <vdr-card>
+        <vdr-form-field [label]="'customer.full-name' | translate">
+            <input formControlName="fullName" type="text" />
+        </vdr-form-field>
+        <vdr-form-field [label]="'customer.company' | translate">
+            <input formControlName="company" type="text" />
+        </vdr-form-field>
 
-    <div class="clr-row">
-        <div class="clr-col-md-4">
-            <clr-input-container>
-                <label>{{ 'customer.street-line-1' | translate }}</label>
-                <input formControlName="streetLine1" type="text" clrInput />
-            </clr-input-container>
-        </div>
-        <div class="clr-col-md-4">
-            <clr-input-container>
-                <label>{{ 'customer.street-line-2' | translate }}</label>
-                <input formControlName="streetLine2" type="text" clrInput />
-            </clr-input-container>
-        </div>
-    </div>
-    <div class="clr-row">
-        <div class="clr-col-md-4">
-            <clr-input-container>
-                <label>{{ 'customer.city' | translate }}</label>
-                <input formControlName="city" type="text" clrInput />
-            </clr-input-container>
-        </div>
-        <div class="clr-col-md-4">
-            <clr-input-container>
-                <label>{{ 'customer.province' | translate }}</label>
-                <input formControlName="province" type="text" clrInput />
-            </clr-input-container>
-        </div>
-    </div>
-    <div class="clr-row">
-        <div class="clr-col-md-4">
-            <clr-input-container>
-                <label>{{ 'customer.postal-code' | translate }}</label>
-                <input formControlName="postalCode" type="text" clrInput />
-            </clr-input-container>
-        </div>
-        <div class="clr-col-md-4">
-            <clr-input-container>
-                <label>{{ 'customer.country' | translate }}</label>
-                <select name="countryCode" formControlName="countryCode" clrInput clrSelect>
-                    <option *ngFor="let country of availableCountries" [value]="country.code">
-                        {{ country.name }}
-                    </option>
-                </select>
-            </clr-input-container>
-        </div>
-    </div>
-    <clr-input-container>
-        <label>{{ 'customer.phone-number' | translate }}</label>
-        <input formControlName="phoneNumber" type="text" clrInput />
-    </clr-input-container>
-    <section formGroupName="customFields" *ngIf="formGroup.get('customFields') as customFieldsGroup">
-        <label>{{ 'common.custom-fields' | translate }}</label>
-        <vdr-tabbed-custom-fields
-            entityName="Address"
-            [customFields]="customFields"
-            [customFieldsFormGroup]="customFieldsGroup"
-        ></vdr-tabbed-custom-fields>
-    </section>
+        <vdr-form-field [label]="'customer.street-line-1' | translate">
+            <input formControlName="streetLine1" type="text" />
+        </vdr-form-field>
+
+        <vdr-form-field [label]="'customer.street-line-2' | translate">
+            <input formControlName="streetLine2" type="text" />
+        </vdr-form-field>
+
+        <vdr-form-field [label]="'customer.city' | translate">
+            <input formControlName="city" type="text" />
+        </vdr-form-field>
+
+        <vdr-form-field [label]="'customer.province' | translate">
+            <input formControlName="province" type="text" />
+        </vdr-form-field>
+
+        <vdr-form-field [label]="'customer.postal-code' | translate">
+            <input formControlName="postalCode" type="text" />
+        </vdr-form-field>
+
+        <vdr-form-field [label]="'customer.country' | translate">
+            <select name="countryCode" formControlName="countryCode">
+                <option *ngFor="let country of availableCountries" [value]="country.code">
+                    {{ country.name }}
+                </option>
+            </select>
+        </vdr-form-field>
+        <vdr-form-field [label]="'customer.phone-number' | translate">
+            <input formControlName="phoneNumber" type="text" />
+        </vdr-form-field>
+        <section
+            formGroupName="customFields"
+            *ngIf="formGroup.get('customFields') as customFieldsGroup"
+            class="card-span"
+        >
+            <vdr-tabbed-custom-fields
+                entityName="Address"
+                [customFields]="customFields"
+                [customFieldsFormGroup]="customFieldsGroup"
+            ></vdr-tabbed-custom-fields>
+        </section>
+    </vdr-card>
 </form>

packages/admin-ui/src/lib/core/src/shared/components/affixed-input/affixed-input.component.scss

@@ -11,7 +11,8 @@
     color: var(--color-grey-800);
     display: flex;
     align-items: center;
-    background-color: var(--color-grey-200);
+    background-color: var(--color-component-bg-200);
+    color: var(--color-text-200);
     border: 1px solid var(--color-component-border-300);
     top: 1px;
     padding: 3px;

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

@@ -9,6 +9,7 @@
         --card-padding: calc(var(--space-unit) * 2);
     }
     border: 1px solid var(--color-card-border);
+    background-color: var(--color-card-bg);
     border-radius: var(--border-radius);
     padding: var(--card-padding) 0;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.scss

@@ -16,11 +16,11 @@
     @media screen and (min-width: $breakpoint-large) {
         margin-left: calc(var(--space-unit) * 10.5);
     }
-    // gradient bg from white to transparent
-    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    background-color: var(--color-surface-bg);
     z-index: 10;
     display: flex;
     position: absolute;
+    top: 5px;
     height: 40px;
 }
 .table-wrapper {
@@ -90,7 +90,7 @@ th.filter-row {
     font-size: var(--font-size-base);
     font-weight: 400;
     background-color: var(--color-weight-100);
-    box-shadow: inset -1px 6px 5px 0px rgb(165 165 165 / 8%);
+    box-shadow: var(--data-table-filter-box-shadow);
 
     border-left-width: 0;
     border-right-width: 0;
@@ -153,13 +153,8 @@ tr:last-of-type td:last-of-type {
     border-image: linear-gradient(180deg, var(--color-weight-200), transparent) 1;
 }
 
-// odd rows
-tbody tr:nth-child(even) {
-    //background-color: var(--color-table-alternate-row-bg);
-}
-
 tbody td {
-    border-bottom: 1px solid var(--color-weight-100);
+    border-bottom: 1px solid var(--color-table-row-separator);
 }
 
 tbody tr:hover {

packages/admin-ui/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.scss

@@ -11,7 +11,8 @@
     height: calc(var(--space-unit) * 3);
     font-size: var(--font-size-xs);
     border-radius: var(--border-radius-lg);
-    background-color: var(--color-weight-150);
+    background-color: var(--color-button-small-bg);
+    color: var(--color-button-small-text);
     > button {
         border: none;
         gap: 12px;
@@ -21,6 +22,7 @@
         align-items: center;
         height: calc(var(--space-unit) * 2);
         border-radius: var(--border-radius-lg);
+        color: var(--color-button-small-text);
     }
     &.active {
         background-color: var(--color-primary-700);
@@ -35,6 +37,7 @@
 
 label {
     display: flex;
+    align-items: center;
     gap: var(--space-unit);
     margin-bottom: calc(var(--space-unit) * 0.5);
 }

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

@@ -1,13 +1,17 @@
 <div class="input-wrapper">
     <input
         readonly
-        [ngModel]="selected$ | async | localeDate: 'medium'"
+        [ngModel]="selected$ | async | localeDate : 'medium'"
         class="selected-datetime"
         (keydown.enter)="dropdownComponent.toggleOpen()"
         (keydown.space)="dropdownComponent.toggleOpen()"
         #datetimeInput
     />
-    <button class="clear-value-button" [class.visible]="!disabled && !readonly && (selected$ | async)" (click)="clearValue()">
+    <button
+        class="clear-value-button"
+        [class.visible]="!disabled && !readonly && (selected$ | async)"
+        (click)="clearValue()"
+    >
         <clr-icon shape="times"></clr-icon>
     </button>
 </div>
@@ -16,16 +20,15 @@
         <clr-icon shape="calendar"></clr-icon>
     </button>
     <vdr-dropdown-menu>
-        <div class="datetime-picker" *ngIf="current$ | async as currentView" (keydown.escape)="closeDatepicker()">
+        <div
+            class="datetime-picker"
+            *ngIf="current$ | async as currentView"
+            (keydown.escape)="closeDatepicker()"
+        >
             <div class="controls">
                 <div class="selects">
                     <div class="month-select">
-                        <select
-                            clrSelect
-                            name="month"
-                            [ngModel]="currentView.month"
-                            (change)="setMonth($event)"
-                        >
+                        <select name="month" [ngModel]="currentView.month" (change)="setMonth($event)">
                             <option [value]="1">{{ 'datetime.month-jan' | translate }}</option>
                             <option [value]="2">{{ 'datetime.month-feb' | translate }}</option>
                             <option [value]="3">{{ 'datetime.month-mar' | translate }}</option>
@@ -41,12 +44,7 @@
                         </select>
                     </div>
                     <div class="year-select">
-                        <select
-                            clrSelect
-                            name="month"
-                            [ngModel]="currentView.year"
-                            (change)="setYear($event)"
-                        >
+                        <select name="month" [ngModel]="currentView.year" (change)="setYear($event)">
                             <option *ngFor="let year of years" [value]="year">{{ year }}</option>
                         </select>
                     </div>
@@ -59,7 +57,11 @@
                     >
                         <clr-icon shape="caret" dir="left"></clr-icon>
                     </button>
-                    <button class="btn btn-link btn-sm" (click)="selectToday()" [title]="'common.select-today' | translate">
+                    <button
+                        class="btn btn-link btn-sm"
+                        (click)="selectToday()"
+                        [title]="'common.select-today' | translate"
+                    >
                         <clr-icon shape="event"></clr-icon>
                     </button>
                     <button
@@ -71,47 +73,47 @@
                     </button>
                 </div>
             </div>
-            <table class="calendar-table" #calendarTable tabindex="0" (keydown)="handleCalendarKeydown($event)">
+            <table
+                class="calendar-table"
+                #calendarTable
+                tabindex="0"
+                (keydown)="handleCalendarKeydown($event)"
+            >
                 <thead>
-                <tr>
-                    <td *ngFor="let weekdayName of weekdays">
-                        {{ weekdayName | translate }}
-                    </td>
-                </tr>
+                    <tr>
+                        <td *ngFor="let weekdayName of weekdays">
+                            {{ weekdayName | translate }}
+                        </td>
+                    </tr>
                 </thead>
                 <tbody>
-                <tr *ngFor="let week of calendarView$ | async">
-                    <td
-                        *ngFor="let day of week"
-                        class="day-cell"
-                        [class.selected]="day.selected"
-                        [class.today]="day.isToday"
-                        [class.viewing]="day.isViewing"
-                        [class.current-month]="day.inCurrentMonth"
-                        [class.disabled]="day.disabled"
-                        (keydown.enter)="selectDay(day)"
-                        (click)="selectDay(day)"
-                    >
-                        {{ day.dayOfMonth }}
-                    </td>
-                </tr>
+                    <tr *ngFor="let week of calendarView$ | async">
+                        <td
+                            *ngFor="let day of week"
+                            class="day-cell"
+                            [class.selected]="day.selected"
+                            [class.today]="day.isToday"
+                            [class.viewing]="day.isViewing"
+                            [class.current-month]="day.inCurrentMonth"
+                            [class.disabled]="day.disabled"
+                            (keydown.enter)="selectDay(day)"
+                            (click)="selectDay(day)"
+                        >
+                            {{ day.dayOfMonth }}
+                        </td>
+                    </tr>
                 </tbody>
             </table>
             <div class="time-picker">
                 <span class="flex-spacer"> {{ 'datetime.time' | translate }}: </span>
-                <select clrSelect name="hour" [ngModel]="selectedHours$ | async" (change)="setHour($event)">
-                    <option *ngFor="let hour of hours" [value]="hour">{{ hour | number: '2.0-0' }}</option>
+                <select name="hour" [ngModel]="selectedHours$ | async" (change)="setHour($event)">
+                    <option *ngFor="let hour of hours" [value]="hour">{{ hour | number : '2.0-0' }}</option>
                 </select>
                 <span>:</span>
-                <select
-                    clrSelect
-                    name="hour"
-                    [ngModel]="selectedMinutes$ | async"
-                    (change)="setMinute($event)"
-                >
-                    <option *ngFor="let minute of minutes" [value]="minute">{{
-                        minute | number: '2.0-0'
-                        }}</option>
+                <select name="hour" [ngModel]="selectedMinutes$ | async" (change)="setMinute($event)">
+                    <option *ngFor="let minute of minutes" [value]="minute">
+                        {{ minute | number : '2.0-0' }}
+                    </option>
                 </select>
             </div>
         </div>

packages/admin-ui/src/lib/core/src/shared/components/datetime-picker/datetime-picker.component.scss

@@ -1,4 +1,3 @@
-
 :host {
     display: flex;
     width: 100%;
@@ -16,22 +15,23 @@ input.selected-datetime {
     border-right: none !important;
 }
 
-.clear-value-button {
+button.clear-value-button {
     margin: 0;
     border-radius: 0;
     border-left: none;
+    border: none;
     border-top: 1px solid var(--color-weight-200);
     border-bottom: 1px solid var(--color-weight-200);
-    border-color: var(--color-component-border-200);
-    background-color: white;
-    color: var(--color-grey-500);
+    border-right: 1px solid var(--color-weight-200);
+    background-color: var(--color-button-bg);
+    color: var(--color-text-100);
     display: none;
     &.visible {
         display: block;
     }
 }
 
-.calendar-button {
+button.calendar-button {
     margin: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -39,6 +39,8 @@ input.selected-datetime {
     border-radius: var(--border-radius-sm);
     border-left: none;
     height: 100%;
+    background-color: var(--color-button-bg);
+    color: var(--color-text-100);
 }
 
 .datetime-picker {
@@ -58,13 +60,13 @@ table.calendar-table {
     }
     .day-cell {
         background-color: var(--color-component-bg-200);
-        color: var(--color-grey-500);
+        color: var(--color-text-100);
 
         cursor: pointer;
         transition: background-color 0.1s;
         &.current-month {
-            background-color: white;
-            color: var(--color-grey-800);
+            background-color: var(--color-weight-100);
+            color: var(--color-text-100);
         }
         &.selected {
             background-color: var(--color-primary-500);
@@ -81,7 +83,7 @@ table.calendar-table {
         }
         &.disabled {
             cursor: default;
-            color: var(--color-grey-300);
+            color: var(--color-text-200);
         }
     }
 }

packages/admin-ui/src/lib/core/src/shared/components/language-selector/language-selector.component.html

@@ -2,17 +2,18 @@
     <vdr-dropdown>
         <button type="button" class="btn btn-sm" vdrDropdownTrigger [disabled]="disabled">
             <clr-icon shape="world"></clr-icon>
-            {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}
-            <clr-icon shape="caret down"></clr-icon>
+            {{ currentLanguageCode | localeLanguageName }}
+            <clr-icon shape="ellipsis-vertical"></clr-icon>
         </button>
         <vdr-dropdown-menu vdrPosition="bottom-right">
             <button
                 type="button"
+                class="language-option"
                 *ngFor="let code of availableLanguageCodes"
                 (click)="languageCodeChange.emit(code)"
                 vdrDropdownItem
             >
-                <span>{{ code | localeLanguageName }}</span> <span class="code ml2">{{ code }}</span>
+                <span>{{ code | localeLanguageName }}</span><span class="code">{{ code | uppercase }}</span>
             </button>
         </vdr-dropdown-menu>
     </vdr-dropdown>

packages/admin-ui/src/lib/core/src/shared/components/language-selector/language-selector.component.scss

@@ -1,7 +1,12 @@
 :host {
     display: block;
 }
-
+.language-option {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: space-between;
+}
 .code {
     color: var(--color-grey-400);
 }

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

@@ -16,7 +16,7 @@
 
     &.active {
         font-weight: 600;
-        color: var(--color-primary-800);
-        border-bottom-color: var(--color-primary-800);
+        color: var(--color-text-active);
+        border-bottom-color: var(--color-text-active);
     }
 }

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

@@ -1,7 +1,7 @@
 :host {
     display: block;
     border-bottom: 1px solid var(--color-weight-150);
-    background-color: var(--page-header-color);
+    background-color: var(--color-page-header);
 }
 
 .page-header {

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/prosemirror/prosemirror.scss

@@ -337,7 +337,7 @@
 
     .ProseMirror p {
         margin-bottom: 0.5rem;
-        color: var(--color-grey-800) !important;
+        color: var(--color-text-100) !important;
     }
 
     .ProseMirror .tableWrapper {

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/rich-text-editor.component.scss

@@ -31,6 +31,7 @@ label.rich-text-label {
 
 ::ng-deep .vdr-prosemirror {
     background: var(--color-form-input-bg);
+    color: var(--color-text-100);
     min-height: 128px;
     min-width: 200px;
     border: 1px solid var(--color-component-border-200);

packages/admin-ui/src/lib/core/src/shared/components/split-view/split-view.component.ts

@@ -69,7 +69,6 @@ export class SplitViewComponent implements AfterContentInit, AfterViewInit {
             switchMap(() => mouseMove$.pipe(takeUntil(mouseUp$))),
             map(event => {
                 const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-                console.log(`clientX: ${clientX}`);
                 const width = hostElement.getBoundingClientRect().right - clientX;
                 return Math.max(100, Math.min(width, hostElementWidth - 100));
             }),

packages/admin-ui/src/lib/core/src/shared/components/zone-selector/zone-selector.component.ts

@@ -52,7 +52,7 @@ type Zone = ItemOf<GetZoneSelectorListQuery, 'zones'>;
 export class ZoneSelectorComponent implements ControlValueAccessor {
     @Output() selectedValuesChange = new EventEmitter<Zone>();
     @Input() readonly = false;
-    @Input() transformControlValueAccessorValue: (value: Zone) => any = value => value.id;
+    @Input() transformControlValueAccessorValue: (value: Zone | undefined) => any = value => value?.id;
     selectedId$ = new Subject<string>();
 
     @ViewChild(NgSelectComponent) private ngSelect: NgSelectComponent;

packages/admin-ui/src/lib/settings/src/components/profile/profile.component.html

@@ -1,46 +1,68 @@
-<vdr-action-bar>
-    <vdr-ab-left>
-        <vdr-entity-info [entity]="entity$ | async"></vdr-entity-info>
-    </vdr-ab-left>
-    <vdr-ab-right>
-        <vdr-action-bar-items locationId="administrator-detail"></vdr-action-bar-items>
-        <button
-            class="btn btn-primary"
-            (click)="save()"
-            [disabled]="detailForm.invalid || detailForm.pristine"
-        >
-            {{ 'common.update' | translate }}
-        </button>
-    </vdr-ab-right>
-</vdr-action-bar>
+<vdr-page-block>
+    <vdr-action-bar>
+        <vdr-ab-left></vdr-ab-left>
+        <vdr-ab-right>
+            <vdr-action-bar-items locationId="profile"></vdr-action-bar-items>
+            <button
+                class="btn btn-primary"
+                (click)="save()"
+                [disabled]="detailForm.invalid || detailForm.pristine"
+            >
+                {{ 'common.update' | translate }}
+            </button>
+        </vdr-ab-right>
+    </vdr-action-bar>
+</vdr-page-block>
 
 <form class="form" [formGroup]="detailForm">
-    <vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
-        <input id="emailAddress" type="text" formControlName="emailAddress"/>
-    </vdr-form-field>
-    <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
-        <input id="firstName" type="text" formControlName="firstName"/>
-    </vdr-form-field>
-    <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
-        <input id="lastName" type="text" formControlName="lastName"/>
-    </vdr-form-field>
-    <vdr-form-field *ngIf="isNew$ | async" [label]="'settings.password' | translate" for="password">
-        <input id="password" type="password" formControlName="password"/>
-    </vdr-form-field>
-    <vdr-form-field [label]="'settings.password' | translate" for="password" [readOnlyToggle]="true">
-        <input id="password" type="password" formControlName="password"/>
-    </vdr-form-field>
-    <section formGroupName="customFields" *ngIf="customFields.length">
-        <label>{{ 'common.custom-fields' | translate }}</label>
-        <vdr-tabbed-custom-fields
-            entityName="Administrator"
-            [customFields]="customFields"
-            [customFieldsFormGroup]="detailForm.get('customFields')"
-        ></vdr-tabbed-custom-fields>
-    </section>
-    <vdr-custom-detail-component-host
-        locationId="administrator-profile"
-        [entity$]="entity$"
-        [detailForm]="detailForm"
-    ></vdr-custom-detail-component-host>
+    <vdr-page-detail-layout>
+        <vdr-page-detail-sidebar>
+            <vdr-card *ngIf="entity$ | async as entity">
+                <vdr-page-entity-info [entity]="entity" />
+            </vdr-card>
+        </vdr-page-detail-sidebar>
+        <vdr-page-block>
+            <vdr-card>
+                <vdr-form-field [label]="'settings.email-address' | translate" for="emailAddress">
+                    <input id="emailAddress" type="text" formControlName="emailAddress" />
+                </vdr-form-field>
+                <vdr-form-field [label]="'settings.first-name' | translate" for="firstName">
+                    <input id="firstName" type="text" formControlName="firstName" />
+                </vdr-form-field>
+                <vdr-form-field [label]="'settings.last-name' | translate" for="lastName">
+                    <input id="lastName" type="text" formControlName="lastName" />
+                </vdr-form-field>
+                <vdr-form-field
+                    *ngIf="isNew$ | async"
+                    [label]="'settings.password' | translate"
+                    for="password"
+                >
+                    <input id="password" type="password" formControlName="password" />
+                </vdr-form-field>
+                <vdr-form-field
+                    [label]="'settings.password' | translate"
+                    for="password"
+                    [readOnlyToggle]="true"
+                >
+                    <input id="password" type="password" formControlName="password" />
+                </vdr-form-field>
+            </vdr-card>
+            <vdr-card
+                formGroupName="customFields"
+                *ngIf="customFields.length"
+                [title]="'common.custom-fields' | translate"
+            >
+                <vdr-tabbed-custom-fields
+                    entityName="Customer"
+                    [customFields]="customFields"
+                    [customFieldsFormGroup]="detailForm.get('customFields')"
+                ></vdr-tabbed-custom-fields>
+            </vdr-card>
+            <vdr-custom-detail-component-host
+                locationId="administrator-profile"
+                [entity$]="entity$"
+                [detailForm]="detailForm"
+            ></vdr-custom-detail-component-host>
+        </vdr-page-block>
+    </vdr-page-detail-layout>
 </form>

packages/admin-ui/src/lib/settings/src/components/profile/profile.component.ts

@@ -1,20 +1,39 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { FormBuilder, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     Administrator,
-    BaseDetailComponent,
-    CustomFieldConfig,
     DataService,
-    GetActiveAdministratorQuery,
+    GetProfileDetailDocument,
     LanguageCode,
     NotificationService,
-    ServerConfigService,
+    TypedBaseDetailComponent,
     UpdateActiveAdministratorInput,
 } from '@vendure/admin-ui/core';
+import { gql } from 'apollo-angular';
 import { mergeMap, take } from 'rxjs/operators';
 
+export const GET_PROFILE_DETAIL = gql`
+    query GetProfileDetail {
+        activeAdministrator {
+            ...ProfileDetail
+        }
+    }
+    fragment ProfileDetail on Administrator {
+        id
+        createdAt
+        updatedAt
+        firstName
+        lastName
+        emailAddress
+        user {
+            id
+            lastLogin
+            verified
+        }
+    }
+`;
+
 @Component({
     selector: 'vdr-profile',
     templateUrl: './profile.component.html',
@@ -22,32 +41,27 @@ import { mergeMap, take } from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileComponent
-    extends BaseDetailComponent<NonNullable<GetActiveAdministratorQuery['activeAdministrator']>>
+    extends TypedBaseDetailComponent<typeof GetProfileDetailDocument, 'activeAdministrator'>
     implements OnInit, OnDestroy
 {
-    customFields: CustomFieldConfig[];
-    detailForm: UntypedFormGroup;
+    customFields = this.getCustomFieldConfig('Administrator');
+    detailForm = this.formBuilder.group({
+        emailAddress: ['', Validators.required],
+        firstName: ['', Validators.required],
+        lastName: ['', Validators.required],
+        password: [''],
+        customFields: this.formBuilder.group(
+            this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
+        ),
+    });
 
     constructor(
-        router: Router,
-        route: ActivatedRoute,
-        serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
         protected dataService: DataService,
-        private formBuilder: UntypedFormBuilder,
+        private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService, dataService);
-        this.customFields = this.getCustomFieldConfig('Administrator');
-        this.detailForm = this.formBuilder.group({
-            emailAddress: ['', Validators.required],
-            firstName: ['', Validators.required],
-            lastName: ['', Validators.required],
-            password: [''],
-            customFields: this.formBuilder.group(
-                this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
-            ),
-        });
+        super();
     }
 
     ngOnInit() {

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

@@ -355,5 +355,11 @@ export class SettingsModule {
             route: '',
             component: GlobalSettingsComponent,
         });
+        pageService.registerPageTab({
+            location: 'profile',
+            tab: _('breadcrumb.profile'),
+            route: '',
+            component: ProfileComponent,
+        });
     }
 }

packages/admin-ui/src/lib/settings/src/settings.routes.ts

@@ -6,6 +6,7 @@ import {
     createResolveData,
     DataService,
     GetGlobalSettingsDetailDocument,
+    GetProfileDetailDocument,
     PageComponent,
     PageService,
 } from '@vendure/admin-ui/core';
@@ -16,12 +17,17 @@ import { ProfileResolver } from './providers/routing/profile-resolver';
 export const createRoutes = (pageService: PageService): Route[] => [
     {
         path: 'profile',
-        component: ProfileComponent,
-        resolve: createResolveData(ProfileResolver),
-        canDeactivate: [CanDeactivateDetailGuard],
+        component: PageComponent,
         data: {
             breadcrumb: _('breadcrumb.profile'),
         },
+        resolve: {
+            detail: () =>
+                inject(DataService)
+                    .query(GetProfileDetailDocument)
+                    .mapSingle(data => ({ entity: of(data.activeAdministrator) })),
+        },
+        children: pageService.getPageTabRoutes('profile'),
     },
     {
         path: 'administrators',

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

@@ -1,6 +1,6 @@
 .button,
 .btn {
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     justify-content: flex-end;
     white-space: nowrap;
@@ -13,7 +13,7 @@
     cursor: pointer;
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 4px rgba(0, 0, 0, 0.03),
         0px 2px 6px rgba(0, 0, 0, 0.03), 0px 2px 11px rgba(0, 0, 0, 0.04);
-    background-color: white;
+    background-color: var(--color-button-bg);
     color: var(--color-weight-700);
     &:disabled {
         background-color: var(--color-weight-100);
@@ -21,7 +21,7 @@
         cursor: not-allowed;
     }
     &:not(:disabled):hover {
-        background-color: var(--color-weight-100);
+        background-color: var(--color-button-hover-bg);
         color: var(--color-weight-800);
     }
 
@@ -52,17 +52,19 @@
     border-radius: var(--border-radius-lg);
     cursor: pointer;
     white-space: nowrap;
+    color: var(--color-button-ghost-text);
+    background-color: var(--color-button-ghost-bg);
     &:hover {
-        background-color: var(--color-primary-100);
-        color: var(--color-primary-700);
+        background-color: var(--color-button-ghost-hover-bg);
+        color: var(--color-button-ghost-hover-text);
     }
 }
 a.button-ghost:link,
 a.button-ghost:visited {
-    color: var(--color-weight-700);
+    color: var(--color-button-ghost-text);
 }
 a.button-ghost:hover {
-    color: var(--color-primary-700);
+    color: var(--color-button-ghost-hover-text);
 }
 
 .button-small {
@@ -74,10 +76,15 @@ a.button-ghost:hover {
     padding: 0 var(--space-unit);
     height: 22px;
     font-size: var(--font-size-xs);
-    background-color: var(--color-weight-150);
-    color: var(--color-weight-700);
+    background-color: var(--color-button-small-bg);
+    color: var(--color-button-small-text);
     gap: 4px;
     border: none;
     border-radius: var(--border-radius-lg);
     cursor: pointer;
 }
+a.button-small:link,
+a.button-small:visited {
+    color: var(--color-button-small-text);
+}
+

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

@@ -12,10 +12,11 @@ form .form-block {
     margin: 0.5rem 0 1.5rem;
 }
 
-input,
+input:not([type="checkbox"]):not([type="radio"]),
 select,
 textarea,
 .clr-input {
+    color: var(--color-text-100);
     background-color: var(--color-form-input-bg);
     &:not([readonly]) {
         background-color: var(--color-form-input-bg);
@@ -37,7 +38,7 @@ textarea,
     }
 }
 
-input,
+input:not([type="checkbox"]):not([type="radio"]),
 textarea,
 select {
     border-radius: var(--border-radius-input) !important;
@@ -47,7 +48,7 @@ select {
     transition: background-color 0.2s, box-shadow 0.2s !important;
     &:focus {
         border-color: var(--color-primary-500);
-        box-shadow: 0 0 1px 1px var(--color-primary-100);
+        box-shadow: 0 0 1px 1px var(--color-form-input-focus);
         outline: none;
     }
     &[readonly]:focus {
@@ -127,6 +128,7 @@ select {
     min-width: 60px;
     .ng-value {
         margin: 0 6px 0 0;
+        background-color: var(--color-form-input-bg) !important;
     }
     .ng-input {
         margin: 0;

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

@@ -0,0 +1,28 @@
+html, body:not([cds-text]) {
+    font-size: var(--font-size-sm);
+    font-family: Inter, sans-serif !important;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+::-webkit-scrollbar-corner {
+    background-color: var(--color-scrollbar-bg);
+}
+::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar-thumb);
+    border: 2px solid var(--color-scrollbar-bg);
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-scrollbar-thumb-hover);
+}
+::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-bg);
+}

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

@@ -25,6 +25,12 @@ a:link, a:visited {
     height: 100%;
 }
 
+.modal-header .close, .modal-header--accessible .close {
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+
 a:link, a:visited {
     color: var(--clr-btn-link-color);
 }

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

@@ -1,4 +0,0 @@
-html, body:not([cds-text]) {
-    font-size: var(--font-size-sm);
-    font-family: Inter, sans-serif !important;
-}

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

@@ -8,7 +8,7 @@
 @import "global/overrides";
 @import "global/utilities";
 @import "../fonts/fonts.css";
-@import "global/typography";
+@import "global/global";
 
 @import 'theme/default';
 @import 'theme/dark';

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

@@ -22,6 +22,7 @@
     --color-text-200: hsl(203, 16%, 72%);
     --color-text-300: var(--color-grey-300);
     --color-text-inverse: var(--clr-global-font-color);
+    --color-text-active: var(--color-primary-600);
 
     --color-weight-100: hsl(0 0% 95%);
     --color-weight-125: hsl(0 0% 93%);
@@ -39,36 +40,60 @@
     --color-weight-1000: hsl(0 0% 5%);
 
 
-    --color-weight-100: hsl(0 0% 5%);
-    --color-weight-125: hsl(0 0% 7%);
-    --color-weight-150: hsl(0 0% 10%);
-    --color-weight-200: hsl(0 0% 15%);
-    --color-weight-300: hsl(0 0% 25%);
-    --color-weight-400: hsl(0 0% 35%);
-    --color-weight-500: hsl(0 0% 45%);
-    --color-weight-600: hsl(0 0% 55%);
-    --color-weight-700: hsl(0 0% 65%);
-    --color-weight-800: hsl(0 0% 75%);
-    --color-weight-900: hsl(0 0% 85%);
-    --color-weight-950: hsl(0 0% 90%);
-    --color-weight-975: hsl(0 0% 93%);
-    --color-weight-1000: hsl(0 0% 95%);
-
-    --color-chip-warning-border: var(--color-warning-700);
+    --color-weight-100: hsl(201 30% 15%);
+    --color-weight-125: hsl(201 30% 17%);
+    --color-weight-150: hsl(201 30% 20%);
+    --color-weight-200: hsl(201 30% 35%);
+    --color-weight-300: hsl(201 30% 45%);
+    --color-weight-400: hsl(201 30% 55%);
+    --color-weight-500: hsl(201 30% 65%);
+    --color-weight-600: hsl(201 30% 75%);
+    --color-weight-700: hsl(201 30% 85%);
+    --color-weight-800: hsl(201 30% 90%);
+    --color-weight-900: hsl(201 30% 92%);
+    --color-weight-950: hsl(201 30% 94%);
+    --color-weight-975: hsl(201 30% 96%);
+    --color-weight-1000: hsl(201 30% 98%);
+
+
+    --color-scrollbar-bg: var(--color-weight-125);
+    --color-scrollbar-thumb: var(--color-weight-200);
+    --color-scrollbar-thumb-hover: var(--color-weight-300);
+    --color-surface-bg: hsl(201, 30%, 13%);
+    --color-page-header:hsl(201, 30%, 15%);
+    --color-page-header-item-bg: var(--color-weight-150);
+    --color-top-bar-bg: hsl(201, 30%, 15%);
+    --color-left-nav-bg: hsl(201, 30%, 20%);
+    --color-left-nav-text-hover: var(--color-primary-200);
+
+    --color-card-border: var(--color-weight-150);
+    --color-card-bg: var(--color-weight-100);
+
+    --color-button-bg: var(--color-weight-150);
+    --color-button-hover-bg: var(--color-weight-200);
+    --color-button-ghost-bg: var(--color-weight-125);
+    --color-button-ghost-text: var(--color-text-100);
+    --color-button-ghost-hover-text: var(--color-primary-100);
+    --color-button-ghost-hover-bg: var(--color-weight-200);
+    --color-button-small-bg: var(--color-weight-150);
+    --color-button-small-text: var(--color-weight-700);
+
+    --color-channel-switcher-bg: var(--color-weight-125);
+    --color-channel-switcher-hover-bg: var(--color-weight-100);
+
+    --color-chip-warning-border: var(--color-warning-800);
     --color-chip-warning-text: #fff;
-    --color-chip-warning-bg: var(--color-warning-600);
-    --color-chip-success-border: var(--color-success-700);
+    --color-chip-warning-bg: var(--color-warning-700);
+    --color-chip-success-border: var(--color-success-800);
     --color-chip-success-text: #fff;
-    --color-chip-success-bg: var(--color-success-600);
-    --color-chip-error-border: var(--color-error-700);
+    --color-chip-success-bg: var(--color-success-700);
+    --color-chip-error-border: var(--color-error-800);
     --color-chip-error-text: #fff;
-    --color-chip-error-bg: var(--color-error-600);
+    --color-chip-error-bg: var(--color-error-700);
 
-    --color-top-bar-bg: var(--color-component-bg-200);
-    --color-left-nav-bg: var(--color-component-bg-200);
-    --color-left-nav-text-hover: var(--color-primary-200);
     --color-icon-button: var(--color-grey-200);
-    --color-form-input-bg: hsl(212, 35%, 95%);
+    --color-form-input-bg: var(--color-weight-150);
+    --color-form-input-focus: var(--color-primary-500);
     --color-timeline-thread: var(--color-primary-700);
 
     --color-json-editor-background-color: var(--color-grey-600);
@@ -80,6 +105,10 @@
     --color-json-editor-key: var(--color-success-300);
     --color-json-editor-error: var(--color-error-200);
 
+    --color-split-view-separator-border: var(--color-weight-150);
+    --color-split-view-separator-resize-border: var(--color-primary-700);
+
+
     // clarity styles
     --clr-global-app-background: hsl(201, 30%, 15%);
     --clr-global-selection-color: hsl(203, 32%, 29%);
@@ -325,7 +354,7 @@
     --clr-dropdown-bg-color: hsl(198, 28%, 18%);
     --clr-dropdown-text-color: hsl(203, 16%, 72%);
     --clr-dropdown-item-color: hsl(203, 16%, 72%);
-    --clr-dropdown-border-color: hsl(0, 0%, 0%);
+    --clr-dropdown-border-color: var(--color-weight-200);
     --clr-dropdown-child-border-color: hsl(0, 0%, 0%);
     --clr-dropdown-bg-active-color: var(--clr-global-selection-color);
     --clr-dropdown-bg-hover-color: var(--clr-global-hover-bg-color);
@@ -539,6 +568,10 @@
     --clr-table-border-color: var(--clr-datagrid-default-border-color);
     --clr-table-bordercolor: var(--clr-datagrid-default-border-color);
     --clr-table-borderstyle: 0.05rem solid var(--clr-datagrid-default-border-color);
+    --color-table-row-hover-bg: var(--color-weight-125);
+    --color-table-row-active-bg: var(--color-primary-900);
+    --color-table-row-separator: var(--color-weight-150);
+    --data-table-filter-box-shadow: inset -1px 6px 5px 0px hsla(201, 30%, 5%, 0.2);
     // END: Table
 
     /**********

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

@@ -106,9 +106,81 @@
     --color-error-975: hsl(4 100% 7%);
     --color-error-1000: hsl(4 100% 5%);
 
+
+
+    // Universal semantic colors
+    --color-component-bg-100: var(--color-grey-100);
+    --color-component-bg-200: var(--color-grey-200);
+    --color-component-bg-300: var(--color-grey-300);
+    --color-component-border-100: var(--color-grey-200);
+    --color-component-border-200: var(--color-grey-300);
+    --color-component-border-300: var(--color-grey-400);
+    --color-text-100: var(--clr-global-font-color);
+    --color-text-200: var(--clr-global-font-color-secondary);
+    --color-text-300: var(--color-grey-400);
+    --color-text-inverse: white;
+    --color-text-active: var(--color-primary-800);
+
+    // Component-specific colors
+    --color-scrollbar-bg: var(--color-weight-150);
+    --color-scrollbar-thumb: var(--color-weight-300);
+    --color-scrollbar-thumb-hover: var(--color-weight-400);
+
+    --color-top-bar-bg: white;
+    --color-card-border: var(--color-weight-200);
+    --color-card-bg: hsl(0 0% 99%);
+
     --color-left-nav-bg: var(--color-weight-100);
     --color-left-nav-text: var(--color-text);
     --color-left-nav-text-hover: var(--color-primary-700);
+    --color-surface-bg: white;
+    --color-page-header: hsl(0 0% 98%);
+    --color-page-header-item-bg: var(--color-weight-125);
+
+    --color-button-bg: hsl(0 0% 98%);
+    --color-button-hover-bg: var(--color-weight-100);
+    --color-button-ghost-bg: white;
+    --color-button-ghost-text: var(--color-text-100);
+    --color-button-ghost-hover-text: var(--color-primary-700);
+    --color-button-ghost-hover-bg: var(--color-primary-100);
+    --color-button-small-bg: var(--color-weight-150);
+    --color-button-small-text: var(--color-weight-700);
+
+    --color-channel-switcher-bg: var(--color-weight-150);
+    --color-channel-switcher-hover-bg: var(--color-weight-125);
+
+
+    --color-icon-button: var(--color-grey-600);
+    --color-form-input-bg: white;
+    --color-form-input-focus: var(--color-primary-100);
+    --color-timeline-thread: var(--color-primary-100);
+
+    --color-chip-warning-border: var(--color-warning-300);
+    --color-chip-warning-text: var(--color-warning-800);
+    --color-chip-warning-bg: var(--color-warning-150);
+    --color-chip-success-border: var(--color-success-200);
+    --color-chip-success-text: var(--color-success-800);
+    --color-chip-success-bg: var(--color-success-150);
+    --color-chip-error-border: var(--color-error-200);
+    --color-chip-error-text: var(--color-error-800);
+    --color-chip-error-bg: var(--color-error-150);
+
+    --color-json-editor-background-color: var(--color-grey-200);
+    --color-json-editor-text: var(--color-grey-600);
+    --color-json-editor-string: var(--color-secondary-600);
+    --color-json-editor-number: var(--color-primary-600);
+    --color-json-editor-boolean: var(--color-primary-600);
+    --color-json-editor-null: var(--color-grey-500);
+    --color-json-editor-key: var(--color-success-500);
+    --color-json-editor-error: var(--color-error-500);
+
+    --color-table-row-hover-bg: var(--color-weight-100);
+    --color-table-row-active-bg: var(--color-primary-100);
+    --color-table-row-separator: var(--color-weight-100);
+    --data-table-filter-box-shadow: inset -1px 6px 5px 0px rgb(165 165 165 / 8%);
+
+    --color-split-view-separator-border: var(--color-weight-150);
+    --color-split-view-separator-resize-border: var(--color-primary-400);
 
     // Layout
     --layout-content-max-width: 1400px;
@@ -139,8 +211,6 @@
     --color-login-gradient-top: var(--color-primary-800);
     --color-login-gradient-bottom: black;
 
-    // header
-    --page-header-color: hsl(0 0% 98%);
 
     // Border radius
     --clr-global-borderradius: 4px;
@@ -159,50 +229,4 @@
 
     // spacing
     --space-unit: 8px;
-
-    // Universal semantic colors
-    --color-component-bg-100: var(--color-grey-100);
-    --color-component-bg-200: var(--color-grey-200);
-    --color-component-bg-300: var(--color-grey-300);
-    --color-component-border-100: var(--color-grey-200);
-    --color-component-border-200: var(--color-grey-300);
-    --color-component-border-300: var(--color-grey-400);
-    --color-text-100: var(--clr-global-font-color);
-    --color-text-200: var(--clr-global-font-color-secondary);
-    --color-text-300: var(--color-grey-400);
-    --color-text-inverse: white;
-
-    // Component-specific colors
-    --color-top-bar-bg: white;
-    --color-card-border: var(--color-weight-200);
-
-    --color-icon-button: var(--color-grey-600);
-    --color-form-input-bg: white;
-    --color-timeline-thread: var(--color-primary-100);
-
-    --color-chip-warning-border: var(--color-warning-300);
-    --color-chip-warning-text: var(--color-warning-800);
-    --color-chip-warning-bg: var(--color-warning-150);
-    --color-chip-success-border: var(--color-success-200);
-    --color-chip-success-text: var(--color-success-800);
-    --color-chip-success-bg: var(--color-success-150);
-    --color-chip-error-border: var(--color-error-200);
-    --color-chip-error-text: var(--color-error-800);
-    --color-chip-error-bg: var(--color-error-150);
-
-    --color-json-editor-background-color: var(--color-grey-200);
-    --color-json-editor-text: var(--color-grey-600);
-    --color-json-editor-string: var(--color-secondary-600);
-    --color-json-editor-number: var(--color-primary-600);
-    --color-json-editor-boolean: var(--color-primary-600);
-    --color-json-editor-null: var(--color-grey-500);
-    --color-json-editor-key: var(--color-success-500);
-    --color-json-editor-error: var(--color-error-500);
-
-    --color-table-alternate-row-bg: hsl(0 0% 98% / 1);
-    --color-table-row-hover-bg: var(--color-weight-100);
-    --color-table-row-active-bg: var(--color-primary-100);
-
-    --color-split-view-separator-border: var(--color-weight-150);
-    --color-split-view-separator-resize-border: var(--color-primary-400);
 }