chore(admin-ui): Fix css imports for external stylesheet

packages/admin-ui/package.json

@@ -19,6 +19,15 @@
         "access": "public",
         "directory": "package"
     },
+    "//": "These exports are just here so that we can do local testing of ui-devkit compilation by allowing the ui-devkit package to find its way to the compiled package",
+    "exports": {
+        ".": {
+            "types": "./package/index.d.ts",
+            "esm2022": "./package/esm2022/vendure-admin-ui.mjs",
+            "esm": "./package/esm2022/vendure-admin-ui.mjs",
+            "default": "./package/fesm2022/vendure-admin-ui.mjs"
+        }
+    },
     "dependencies": {
         "@angular/animations": "^16.0.3",
         "@angular/cdk": "^16.0.2",

packages/admin-ui/scripts/compile-styles.js

@@ -10,6 +10,7 @@ const result = sass.renderSync({
     importer,
     includePaths: [
         path.join(__dirname, '../src/lib/static/styles'),
+        path.join(__dirname, '../src/lib/static/fonts'),
         path.join(__dirname, '../../../node_modules'),
     ],
     outputStyle: 'compressed',

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

@@ -1,7 +1 @@
-<div class="page-block-container">
-    <div *ngIf="title || description" class="page-block-meta">
-        <div class="page-block-title">{{ title }}</div>
-        <div class="page-block-description">{{ description }}</div>
-    </div>
-    <div class="page-block"><ng-content></ng-content></div>
-</div>
+<div class="page-block"><ng-content></ng-content></div>

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

@@ -2,42 +2,11 @@
 
 :host {
     display: block;
+}
+
+.page-block {
     margin-left: var(--surface-margin-left);
     margin-right: var(--space-unit);
     margin-top: var(--space-unit);
     max-width: var(--layout-content-max-width);
 }
-
-.page-block-container {
-    display: flex;
-}
-
-.page-block-meta {
-    width: 300px;
-}
-
-.page-block-title {
-    font-size: var(--font-size-base);
-    color: var(--color-weight-700);
-    margin-bottom: calc(var(--space-unit) * 2);
-}
-.page-block-description {
-    font-size: var(--font-size-lg);
-    color: var(--color-weight-600);
-}
-
-.page-block,
-.page-block-row {
-    flex: 1;
-}
-.page-block-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: calc(var(--space-unit) * 2);
-}
-
-@media screen and (max-width: $breakpoint-small) {
-    .page-block-row {
-        grid-template-columns: 1fr;
-    }
-}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'vdr-page-block',
@@ -6,7 +6,4 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
     styleUrls: ['./page-block.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PageBlockComponent {
-    @Input() title: string | undefined;
-    @Input() description: string | undefined;
-}
+export class PageBlockComponent {}

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

@@ -3,6 +3,13 @@ html, body:not([cds-text]) {
     font-family: Inter, sans-serif !important;
 }
 
+.page-block {
+    margin-left: var(--surface-margin-left);
+    margin-right: var(--space-unit);
+    margin-top: var(--space-unit);
+    max-width: var(--layout-content-max-width);
+}
+
 ::-webkit-scrollbar {
     width: 10px;
     height: 10px;

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

@@ -474,29 +474,6 @@
     --clr-spinner-opacity: 1;
     // END Spinners
 
-    /*********
-    * Stack View
-    */
-    --clr-stack-view-border-color: hsl(208, 14%, 39%);
-    --clr-stack-view-bg-color: var(--clr-global-app-background);
-    --clr-stack-view-stack-block-border-bottom: var(--clr-stack-view-border-color); //border-bottom for stack-view rows) (not last)
-    --clr-stack-view-border-box-color: var(--clr-stack-view-border-color);
-    --clr-stack-block-changed-border-top-color: hsl(205, 100%, 34%); // TODO: Figure out where this shows in the UI.
-    --clr-stack-view-stack-block-label-and-content-bg-color: var(--clr-global-app-background); // stkvw row bg color) when not expanded
-    --clr-stack-view-stack-children-stack-block-border-bottom-color: var(--clr-stack-view-border-color); // children of) an expanded row
-    --clr-stack-view-stack-children-stack-block-label-and-content-bg-color: hsl(
-    198,
-    28%,
-    18%
-    ); // children of an expanded row
-    --clr-stack-view-stack-block-label-text-color: hsl(212, 10%, 61%);
-    --clr-stack-view-stack-block-expanded-bg-color: hsl(203, 32%, 29%);
-    --clr-stack-view-stack-block-expandable-hover: hsl(203, 32%, 29%);
-    --clr-stack-view-stack-block-content-text-color: hsl(203, 16%, 72%);
-    --clr-stack-view-stack-block-expanded-text-color: hsl(0, 0%, 100%);
-    --clr-stack-view-stack-block-caret-color: hsl(0, 0%, 60%);
-    // END: Stack View overrides
-
     /**********
     * Table
     */
@@ -582,34 +559,6 @@
     --clr-p7-color: var(--clr-global-font-color);
     --clr-p8-color: var(--clr-global-font-color);
 
-    /**********
-    * Vertical Nav
-    */
-    --clr-vertical-nav-item-color: hsl(203, 16%, 72%);
-    --clr-vertical-nav-item-active-color: hsl(0, 0%, 100%);
-    --clr-vertical-nav-bg-color: hsl(201, 30%, 13%);
-    --clr-vertical-nav-active-bg-color: var(--clr-global-selection-color);
-    --clr-vertical-nav-hover-bg-color: var(--clr-global-hover-bg-color);
-    --clr-vertical-nav-icon-active-color: hsl(0, 0%, 100%);
-    --clr-vertical-nav-toggle-icon-color: hsl(203, 16%, 72%);
-    --clr-vertical-nav-trigger-divider-border-color: hsl(199, 19%, 17%);
-    // END Vertical Nav
-
-    /**********
-    * Wizard
-    */
-    --clr-wizard-sidenav-bg-color: hsl(201, 30%, 15%);
-    --clr-wizard-sidenav-text--active: hsl(0, 0%, 100%);
-    --clr-wizard-stepnav-active-bg-color: hsl(203, 32%, 29%);
-    --clr-wizard-stepnav-border-color: hsl(201, 14%, 27%);
-    --clr-wizard-stepnav-border-color--active: hsl(92, 79%, 40%);
-    --clr-wizard-step-nav-border-color: hsl(200, 30%, 12%);
-    --clr-wizard-sidenav-text: hsl(203, 16%, 72%);
-    --clr-wizard-title-text: hsl(210, 16%, 93%);
-    --clr-wizard-main-textColor: hsl(203, 16%, 72%);
-    --clr-wizard-stepnav-error-color: hsl(3, 90%, 62%);
-    // END: Wizard
-
     // ACCORDION
     --clr-accordion-text-color: var(--clr-color-neutral-0);
     --clr-accordion-active-background-color: var(--clr-global-selection-color);

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

@@ -2,10 +2,12 @@
 // by ui extensions to get the same styles as the main app.
 
 @import "global/sass-overrides";
-// Clarity Component SCSS
-@import "@clr/ui/src/main";
+@import "global/clarity";
+@import "global/buttons";
+@import "global/forms";
 @import "global/overrides";
 @import "global/utilities";
-
+@import "fonts";
+@import "global/global";
 @import 'theme/default';
 @import 'theme/dark';