feat(admin-ui): Update Clarity UI library to v17

packages/admin-ui/package.json

@@ -40,11 +40,11 @@
     "@angular/router": "^17.2.4",
     "@apollo/client": "^3.8.1",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@cds/core": "^6.6.0",
-    "@clr/angular": "^15.11.0",
+    "@cds/core": "^6.9.2",
+    "@clr/angular": "^17.0.1",
     "@clr/core": "^4.0.15",
     "@clr/icons": "^13.0.2",
-    "@clr/ui": "^15.11.0",
+    "@clr/ui": "^17.0.1",
     "@messageformat/core": "^3.2.0",
     "@ng-select/ng-select": "^11.1.1",
     "@ngx-translate/core": "^15.0.0",

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

@@ -35,6 +35,7 @@ export class AppComponent implements OnInit {
             .mapStream(data => data.uiState.theme)
             .subscribe(theme => {
                 this._document?.body.setAttribute('data-theme', theme);
+                this._document?.body.setAttribute('cds-theme', theme === 'dark' ? 'dark' : 'light');
             });
 
         // Once logged in, keep the localStorage "contentLanguageCode" in sync with the

packages/admin-ui/src/lib/core/src/common/base-detail.component.ts

@@ -277,7 +277,7 @@ export function createBaseDetailResolveFn<
     R extends Field,
 >(config: {
     query: T;
-    entityKey: R;
+    entityKey: R | string;
     variables?: T extends TypedDocumentNode<any, infer V> ? Omit<V, 'id'> : never;
 }): ResolveFn<{
     entity: Observable<ResultOf<T>[Field] | null>;

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

@@ -19,14 +19,17 @@
     background-color: var(--color-page-header-item-bg);
     border-radius: var(--border-radius-lg);
     li {
-        display: inline-block;
+        display: inline-flex;
         white-space: nowrap;
+        line-height: 14px;
         a:link,
         a:visited {
             color: var(--color-weight-700);
+            font-size: var(--font-size-sm);
         }
         &:last-child {
             font-weight: 600;
+            color: var(--color-weight-700);
         }
 
         max-width: 300px;

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

@@ -45,13 +45,15 @@ nav.main-nav {
         align-items: center;
         line-height: 100%;
         border-inline-end: 2px solid transparent;
-        font-size: var(--font-size-sm);
+
         padding: var(--space-unit) 0;
         transition: border 0.1s, color 0.1s;
 
         a:link,
         a:visited {
             color: var(--color-weight-700);
+            font-size: var(--font-size-sm);
+            line-height: 14px;
         }
         &:hover {
             color: var(--color-left-nav-text-hover);

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

@@ -9,14 +9,14 @@ button.theme-toggle {
     padding-inline-start: 20px;
     border: none;
     background: transparent;
-    color: var(--clr-dropdown-item-color);
+    color: var(--color-text-200);
     cursor: pointer;
 }
 
 .theme-icon {
     position: absolute;
     top: 0px;
-    left: 6px;
+    left: 4px;
     z-index: 0;
     opacity: 0.2;
     color: var(--color-text-300);
@@ -24,7 +24,7 @@ button.theme-toggle {
 
     &.active {
         z-index: 1;
-        left: 0px;
+        left: -2px;
         opacity: 1;
     }
 

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

@@ -12,6 +12,7 @@
     .dropdown-menu .dropdown-item {
         display: flex;
         align-items: center;
+        padding: 3px 24px;
         clr-icon {
             margin-inline-end: 3px;
         }

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

@@ -12,12 +12,14 @@
     }
 }
 
-.tab {
+a.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;
+    font-size: var(--font-size-sm);
+    line-height: 24px;
 
     &.active {
         color: var(--color-text-active);

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

@@ -11,7 +11,9 @@
     h1 {
         margin-top: 0;
         color: var(--color-weight-900);
+        font-size: var(--cds-global-typography-headline-font-size);
         font-weight: 600;
+        line-height: 48px;
         @media screen and (max-width: $breakpoint-small) {
             font-size: var(--font-size-xl);
         }

packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.html

@@ -26,7 +26,7 @@
         </button>
     </div>
 
-    <div class="date-range p5" *ngIf="dateRange$ | async as range">
+    <div class="date-range" *ngIf="dateRange$ | async as range">
         {{ range.start | localeDate }} - {{ range.end | localeDate }}
     </div>
 </div>

packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.scss

@@ -15,7 +15,8 @@
     text-transform: uppercase;
 }
 .date-range {
-    margin-top: 0;
+    margin-top: calc(var(--space-unit) * 3);
+    font-size: var(--font-size-xs);
 }
 .footer {
     margin-top: 24px;

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

@@ -14,16 +14,19 @@
 @mixin table-base-styles {
     th {
         border-bottom: 1px solid var(--color-table-header-border);
+        color: var(--color-weight-700);
         font-size: var(--font-size-xs);
         font-weight: 600;
         text-transform: uppercase;
         position: relative;
         white-space: nowrap;
+        background-color: transparent;
     }
 
     th,
     td {
         padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);
+        color: var(--color-text-100);
     }
 
     tr td:first-of-type,

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

@@ -6,7 +6,7 @@
     white-space: nowrap;
     align-items: center;
     padding: var(--space-unit) calc(var(--space-unit) * 1.5);
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-sm) !important;
     gap: var(--space-unit);
     border: none;
     border-radius: var(--border-radius-sm);
@@ -15,6 +15,7 @@
     0px 2px 6px rgba(0, 0, 0, 0.03), 0px 2px 11px rgba(0, 0, 0, 0.04);
     background-color: var(--color-button-bg);
     color: var(--color-weight-700);
+    line-height: var(--cds-global-typography-body-line-height) !important;
 
     &:link,
     &:visited {

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

@@ -1,6 +1,12 @@
 html, body:not([cds-text]) {
     font-size: var(--font-size-sm);
     font-family: Inter, sans-serif !important;
+    line-height: var(--cds-global-typography-body-line-height);
+    color: var(--color-text-100);
+}
+
+body p:not([cds-text]) {
+    font-family: Inter, sans-serif !important;
 }
 
 .page-block {

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

@@ -15,6 +15,16 @@ h6:not([cds-text]) {
     font-family: Inter, sans-serif !important;
 }
 
+.p0:not([cds-text]),
+.p1:not([cds-text]),
+.p2:not([cds-text]),
+.p3:not([cds-text]),
+.p4:not([cds-text]),
+.p5:not([cds-text]),
+.p6:not([cds-text]) {
+    font-family: Inter, sans-serif !important;
+}
+
 a:link,
 a:visited {
     text-decoration: none;
@@ -142,3 +152,14 @@ clr-tabs .btn.btn-link {
         color: var(--color-chip-warning-text);
     }
 }
+
+.dropdown {
+    .dropdown-item {
+        color: var(--color-text-200);
+        font-size: var(--font-size-sm);
+        gap: 2px;
+    }
+    .dropdown-divider {
+        margin: 0.3rem 0;
+    }
+}

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

@@ -1,5 +1,6 @@
 @import "global/sass-overrides";
 @import "global/clarity";
+@import "@cds/core/global.min.css";
 @import "@clr/icons/clr-icons.min.css";
 @import "@ng-select/ng-select/themes/default.theme.css";
 @import '@angular/cdk/overlay-prebuilt.css';

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

@@ -1,7 +1,7 @@
 // Vendure dark theme
 // Based on this dark theme example from Scott Mathis:
 // https://github.com/mathisscott/clarity-theming-starter/blob/20f4680b43a9a7fd3d43a6ba36f717fdafc6e570/src/_dark-theme.scss
-[data-theme="dark"] {
+[data-theme="dark"][cds-theme] {
     --color-grey-100: hsl(211, 10%, 90%);
     --color-grey-200: hsl(211, 10%, 67%);
     --color-grey-300: hsl(211, 10%, 47%);
@@ -281,9 +281,10 @@
     */
     --clr-dropdown-active-text-color: hsl(0, 0%, 100%);
     --clr-dropdown-bg-color: hsl(198, 28%, 18%);
+    --clr-dropdown-border-color: rgb(62, 97, 116);
     --clr-dropdown-text-color: hsl(203, 16%, 72%);
     --clr-dropdown-item-color: hsl(203, 16%, 72%);
-    --clr-dropdown-border-color: var(--color-weight-200);
+    --clr-dropdown-item-hover-color: hsl(203, 16%, 72%);
     --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);

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

@@ -2,7 +2,7 @@
 
 // Default Vendure light theme. The Clarity component custom properties
 // are left as their defaults.
-:root {
+:root [cds-theme="light"] {
     // Colors
     --color-grey-100: #fafafa;
     --color-grey-200: #f2f3f5;
@@ -118,6 +118,8 @@
     --color-text-100: var(--clr-global-font-color);
     --color-text-200: var(--clr-global-font-color-secondary);
     --color-text-300: var(--color-grey-400);
+    --clr-global-font-color: hsl(198, 0%, 40%);
+    --clr-list-item-color: var(--clr-global-font-color);
     --color-text-inverse: white;
     --color-text-active: var(--color-primary-800);
 
@@ -186,6 +188,7 @@
 
     --color-dropdown-item-focus-outline: rgba(77, 207, 255, 0.53);
 
+
     // Layout
     --layout-content-max-width: 1400px;
     --left-nav-width: 0px;
@@ -231,6 +234,13 @@
     --font-size-base: 16px;
     --font-size-lg: 18px;
     --font-size-xl: 20px;
+    --cds-global-typography-body-line-height: 24px;
+    --cds-alias-typography-body-line-height: 16px;
+    --cds-alias-typography-body-letter-spacing: normal;
+    --cds-alias-typography-display-letter-spacing: normal;
+    --cds-alias-typography-secondary-font-size: 13px;
+    --cds-alias-typography-font-size-3: var(--font-size-sm);
+    --cds-global-typography-font-size-4: var(--cds-alias-typography-secondary-font-size);
 
     // spacing
     --space-unit: 8px;
@@ -240,4 +250,5 @@
     --clr-link-hover-color: var(--color-weight-700);
     --clr-link-active-color: var(--color-weight-700);
     --clr-link-color: var(--color-weight-700);
+    --clr-list-item-color: var(--color-weight-700);
 }

yarn.lock

@@ -2549,7 +2549,7 @@
   resolved "https://registry.yarnpkg.com/@cds/city/-/city-1.1.0.tgz#5b7323750d3d64671ce2e3a804bcf260fbea1154"
   integrity sha512-S9K+Q39BGOghyLHmR0Wdcmu1i1noSUk8HcvMj+3IaohZw02WFd99aPTQDHJeseXrXZP3CNovaSlePI0R11NcFg==
 
-"@cds/core@^6.6.0":
+"@cds/core@^6.9.2":
   version "6.9.2"
   resolved "https://registry.yarnpkg.com/@cds/core/-/core-6.9.2.tgz#0c5c5e2e9a86f1bddf3f0fba6bc17a73826a00e9"
   integrity sha512-Tx5L8/kLueBoSpu18w9eLonqFk1CVromp9bBXk6FLVVmYghE/lSt/WsYi6c0xyv7rJZpcHoGS/gh5p9Erelk3Q==
@@ -2578,10 +2578,10 @@
     picocolors "^1.0.0"
     sisteransi "^1.0.5"
 
-"@clr/angular@^15.11.0":
-  version "15.14.5"
-  resolved "https://registry.yarnpkg.com/@clr/angular/-/angular-15.14.5.tgz#8bc5cf997e9fb2fe0419f3dd03633f77bcac9483"
-  integrity sha512-fMnkCrr3gyhVFWZiOdT8wdL+Hj/1A3YeQuz/g51DbDQdt8j2piFA5ivt5mHLuqMZWcpPX7zgDIVS7pu12FwjzQ==
+"@clr/angular@^17.0.1":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@clr/angular/-/angular-17.0.1.tgz#6b035762254a36dba3d2619b76c00add20161fb2"
+  integrity sha512-36zROmGf0r5OArVrEunzKKKRtxSgvQGd6TgmPjSg8OMgyDr2l8jexJHooF0Hx3uXvd84rt0QoYuajMb+emOVNg==
   dependencies:
     tslib "^2.3.0"
 
@@ -2613,10 +2613,10 @@
   resolved "https://registry.yarnpkg.com/@clr/icons/-/icons-13.0.2.tgz#600b530fe8e0d654de81f97d2b64db5905266eb6"
   integrity sha512-bdcSuFvQAbIIp8Q2Fm55BjHW5cawP4xEOkZf2IEIin0d9ViRcAJNjACBCOMDhx2up7nPZsXwN2gL8zJhL7TSZQ==
 
-"@clr/ui@^15.11.0":
-  version "15.14.5"
-  resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-15.14.5.tgz#77ea445a1814379955c34e33157596f1c5ba606c"
-  integrity sha512-Of2qpedwLE3dZh2virgk3w/kWMli+ugfXHfBVIg+HSmIlJCcmunPEGvh+u+GpgqtcETOIgitkZ54RmvuOrGL9Q==
+"@clr/ui@^17.0.1":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-17.0.1.tgz#17b49aa925db54b4bbcda6e7b7bb8d53effcfd70"
+  integrity sha512-t7BncCbYUlyGnNiSJqSnNtvbnpmChVT2Km0JboZR03EqxfnYKWI/0AlpEKcQx3JYAWRL4xxYGExbLxOB8B13ZA==
 
 "@colors/colors@1.5.0":
   version "1.5.0"