From 44cfd95343006acabc3791c5cc58075e778cc6be Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Tue, 12 Mar 2024 12:58:40 +0100 Subject: [PATCH] feat(admin-ui): Update Clarity UI library to v17 --- packages/admin-ui/package.json | 6 +++--- .../src/lib/core/src/app.component.ts | 1 + .../core/src/common/base-detail.component.ts | 2 +- .../breadcrumb/breadcrumb.component.scss | 5 ++++- .../main-nav/main-nav.component.scss | 4 +++- .../theme-switcher.component.scss | 6 +++--- .../dropdown/dropdown-menu.component.scss | 1 + .../page-header-tabs.component.scss | 4 +++- .../page-title/page-title.component.scss | 2 ++ .../order-summary-widget.component.html | 2 +- .../order-summary-widget.component.scss | 3 ++- .../src/lib/static/styles/_mixins.scss | 3 +++ .../lib/static/styles/global/_buttons.scss | 3 ++- .../src/lib/static/styles/global/_global.scss | 6 ++++++ .../lib/static/styles/global/_overrides.scss | 21 +++++++++++++++++++ .../src/lib/static/styles/styles.scss | 1 + .../src/lib/static/styles/theme/dark.scss | 5 +++-- .../src/lib/static/styles/theme/default.scss | 13 +++++++++++- yarn.lock | 18 ++++++++-------- 19 files changed, 81 insertions(+), 25 deletions(-) diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index d7e18632d9..e73b6241ae 100644 --- a/packages/admin-ui/package.json +++ b/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", diff --git a/packages/admin-ui/src/lib/core/src/app.component.ts b/packages/admin-ui/src/lib/core/src/app.component.ts index d594fd6f73..5a130af421 100644 --- a/packages/admin-ui/src/lib/core/src/app.component.ts +++ b/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 diff --git a/packages/admin-ui/src/lib/core/src/common/base-detail.component.ts b/packages/admin-ui/src/lib/core/src/common/base-detail.component.ts index 15983e8b31..44ae71499a 100644 --- a/packages/admin-ui/src/lib/core/src/common/base-detail.component.ts +++ b/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 ? Omit : never; }): ResolveFn<{ entity: Observable[Field] | null>; diff --git a/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss b/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss index fa64498019..9275c57eb2 100644 --- a/packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss +++ b/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; diff --git a/packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.scss b/packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.scss index a157bf9501..d4ccc345dd 100644 --- a/packages/admin-ui/src/lib/core/src/components/main-nav/main-nav.component.scss +++ b/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); diff --git a/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.scss b/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.scss index f76dba5bfd..65db64abce 100644 --- a/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.scss +++ b/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; } diff --git a/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss index bc7ec00312..ecd7b11234 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/dropdown/dropdown-menu.component.scss +++ b/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; } diff --git a/packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.scss index 10cdf12a0c..d3cf39481e 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/page-header-tabs/page-header-tabs.component.scss +++ b/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); diff --git a/packages/admin-ui/src/lib/core/src/shared/components/page-title/page-title.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/page-title/page-title.component.scss index ef953b969f..0eed138919 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/page-title/page-title.component.scss +++ b/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); } diff --git a/packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.html b/packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.html index e576a513df..61604071d0 100644 --- a/packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.html +++ b/packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.html @@ -26,7 +26,7 @@ -
+
{{ range.start | localeDate }} - {{ range.end | localeDate }}
diff --git a/packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.scss b/packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.scss index ac65ce870f..da7ac01a1f 100644 --- a/packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.scss +++ b/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; diff --git a/packages/admin-ui/src/lib/static/styles/_mixins.scss b/packages/admin-ui/src/lib/static/styles/_mixins.scss index 5607c9efc0..5a17a1692a 100644 --- a/packages/admin-ui/src/lib/static/styles/_mixins.scss +++ b/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, diff --git a/packages/admin-ui/src/lib/static/styles/global/_buttons.scss b/packages/admin-ui/src/lib/static/styles/global/_buttons.scss index 73e06aa09a..9d3b4e7dfb 100644 --- a/packages/admin-ui/src/lib/static/styles/global/_buttons.scss +++ b/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 { diff --git a/packages/admin-ui/src/lib/static/styles/global/_global.scss b/packages/admin-ui/src/lib/static/styles/global/_global.scss index f56264e2dc..ff42b56910 100644 --- a/packages/admin-ui/src/lib/static/styles/global/_global.scss +++ b/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 { diff --git a/packages/admin-ui/src/lib/static/styles/global/_overrides.scss b/packages/admin-ui/src/lib/static/styles/global/_overrides.scss index b15e556af7..ad1d934551 100644 --- a/packages/admin-ui/src/lib/static/styles/global/_overrides.scss +++ b/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; + } +} diff --git a/packages/admin-ui/src/lib/static/styles/styles.scss b/packages/admin-ui/src/lib/static/styles/styles.scss index 303e9c2b8e..1bc2a9b868 100644 --- a/packages/admin-ui/src/lib/static/styles/styles.scss +++ b/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'; diff --git a/packages/admin-ui/src/lib/static/styles/theme/dark.scss b/packages/admin-ui/src/lib/static/styles/theme/dark.scss index 5dbd0ed6a4..e2bd4852a1 100644 --- a/packages/admin-ui/src/lib/static/styles/theme/dark.scss +++ b/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); diff --git a/packages/admin-ui/src/lib/static/styles/theme/default.scss b/packages/admin-ui/src/lib/static/styles/theme/default.scss index f67a98a73e..4651b35ab1 100644 --- a/packages/admin-ui/src/lib/static/styles/theme/default.scss +++ b/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); } diff --git a/yarn.lock b/yarn.lock index b174c84fb5..132014d1c7 100644 --- a/yarn.lock +++ b/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"