Change create vis page styles to use design system

hubmapconsortium · Oct 1, 2024 · 9406c56 · 9406c56
1 parent 03d1f50
commit 9406c56
Show file tree

Hide file tree

Showing 26 changed files with 258 additions and 728 deletions.
diff --git a/apps/cde-ui/src/app/app.config.ts b/apps/cde-ui/src/app/app.config.ts
@@ -5,6 +5,7 @@ import { provideRouter, withComponentInputBinding, withInMemoryScrolling, withVi
 import { provideIcons } from '@hra-ui/cdk/icons';
 import { provideNothrowPlatformLocation } from '@hra-ui/cdk/platform-location';
 import { ROUTES } from './app.routes';
+import { provideDesignSystem } from '@hra-ui/design-system';
 
 /**
  * Set of config options available during the application bootstrap operation.
@@ -28,5 +29,6 @@ export const appConfig: ApplicationConfig = {
         defaultClasses: ['material-symbols-rounded'],
       },
     }),
+    provideDesignSystem(),
   ],
 };
diff --git a/apps/cde-ui/src/app/components/file-upload/file-upload.component.html b/apps/cde-ui/src/app/components/file-upload/file-upload.component.html
@@ -23,7 +23,9 @@ <h3 class="action-required">
     <mat-icon class="material-symbols-rounded remove-file" (click)="cancelLoad()">delete</mat-icon>
   </div>
 } @else {
-  <button mat-flat-button class="upload" type="button" color="primary" (click)="fileInput.click()">Upload CSV</button>
+  <button mat-flat-button class="upload" (click)="fileInput.click()" hraPrimaryButton hraButtonSize="large">
+    Upload CSV
+  </button>
   <input
     type="file"
     style="display: none"

diff --git a/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss b/apps/cde-ui/src/app/components/file-upload/file-upload.component.scss
@@ -1,73 +1,63 @@
 @use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../styles/constants/palettes' as palettes;
-
-$blue: mat.m2-define-palette(map.get(palettes.$palettes, 'blue'), 500, 600, 800, 900);
-$blue-theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $blue,
-      accent: $blue,
-    ),
-  )
-);
-
-$gray: mat.m2-define-palette(map.get(palettes.$palettes, 'gray'), 500, 600, 700);
-$gray-theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $gray,
-      accent: $gray,
-    ),
-  )
-);
-$red: mat.m2-define-palette(map.get(palettes.$palettes, 'red'), 500, 600, 700);
-$red-theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $red,
-      accent: $red,
-    ),
-  )
-);
+// @use '@angular/material' as mat;
+// @use '../../../styles/constants/palettes' as palettes;
+
+// $blue: mat.m2-define-palette(map.get(palettes.$palettes, 'blue'), 500, 600, 800, 900);
+// $blue-theme: mat.m2-define-light-theme(
+//   (
+//     color: (
+//       primary: $blue,
+//       accent: $blue,
+//     ),
+//   )
+// );
+
+// $gray: mat.m2-define-palette(map.get(palettes.$palettes, 'gray'), 500, 600, 700);
+// $gray-theme: mat.m2-define-light-theme(
+//   (
+//     color: (
+//       primary: $gray,
+//       accent: $gray,
+//     ),
+//   )
+// );
+// $red: mat.m2-define-palette(map.get(palettes.$palettes, 'red'), 500, 600, 700);
+// $red-theme: mat.m2-define-light-theme(
+//   (
+//     color: (
+//       primary: $red,
+//       accent: $red,
+//     ),
+//   )
+// );
 
 :host {
-  --mdc-filled-button-label-text-size: 1rem;
-  --mat-filled-button-horizontal-padding: 0.5rem;
-  --mdc-filled-button-label-text-tracking: 0.02em;
-  --mat-filled-button-icon-spacing: 0.25rem;
-  @include mat.button-color($blue-theme);
-
-  .upload {
-    --mat-filled-button-horizontal-padding: 1rem;
-    --mdc-filled-button-label-text-size: 14px;
-    background: mat.get-theme-color($red-theme, primary, 600);
-    color: white;
-  }
+  // --mdc-filled-button-label-text-size: 1rem;
+  // --mat-filled-button-horizontal-padding: 0.5rem;
+  // --mdc-filled-button-label-text-tracking: 0.02em;
+  // --mat-filled-button-icon-spacing: 0.25rem;
+  // @include mat.button-color($blue-theme);
 
-  .upload,
   .upload-success {
     height: 2.5rem;
-  }
-
-  .upload-success {
     display: flex;
     align-items: center;
     padding: 0 1rem;
-    background: mat.get-theme-color($blue-theme, primary, 500);
+    background: var(--sys-surface-container);
     gap: 0.5rem;
     border-radius: 1rem;
+    font: var(--sys-label-large);
 
     .filename {
       display: flex;
     }
 
     .file-name {
-      color: mat.get-theme-color($gray-theme, primary, 600);
+      color: var(--sys-primary);
     }
 
     .remove-file {
-      color: mat.get-theme-color($blue-theme, primary, 900);
+      color: var(--sys-secondary);
       cursor: pointer;
     }
   }
@@ -108,10 +98,10 @@ $red-theme: mat.m2-define-light-theme(
   }
 
   .use-template {
-    --mdc-text-button-label-text-size: 1rem;
-    --mat-text-button-with-icon-horizontal-padding: 0rem;
-    --mdc-text-button-label-text-tracking: 0.02em;
-    --mat-text-button-icon-spacing: 0.25rem;
+    // --mdc-text-button-label-text-size: 1rem;
+    // --mat-text-button-with-icon-horizontal-padding: 0rem;
+    // --mdc-text-button-label-text-tracking: 0.02em;
+    // --mat-text-button-icon-spacing: 0.25rem;
 
     &.loaded {
       margin-top: 1.5rem;

diff --git a/apps/cde-ui/src/app/components/file-upload/file-upload.component.ts b/apps/cde-ui/src/app/components/file-upload/file-upload.component.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, Injector, input, output, Type } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { FileLoader, FileLoaderEvent } from '@hra-ui/cde-visualization';
+import { ButtonModule } from '@hra-ui/design-system/button';
 import { reduce, Subscription } from 'rxjs';
 
 /**
@@ -34,7 +34,7 @@ export type FileLoadError = FileTypeError | FileParseError;
 @Component({
   selector: 'cde-file-upload',
   standalone: true,
-  imports: [CommonModule, MatIconModule, MatButtonModule],
+  imports: [CommonModule, MatIconModule, ButtonModule],
   templateUrl: './file-upload.component.html',
   styleUrl: './file-upload.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss b/apps/cde-ui/src/app/components/visual-card/visual-card.component.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/cta' as cta;
+// @use '../../../styles/cta' as cta;
 
 :host {
   display: flex;
@@ -24,9 +24,9 @@
       box-shadow: 0px 5px 1rem 5px rgba(32, 30, 61, 0.24);
     }
 
-    &:focus-visible .label {
-      @include cta.flatFocus();
-    }
+    // &:focus-visible .label {
+    //   @include cta.flatFocus();
+    // }
 
     img {
       width: 100%;