Merge pull request #107 from CenterForOpenScience/fix/update-palettes

Fix/update palettes

Author: nsemets

src/app/app.config.ts

@@ -3,7 +3,6 @@ import { provideStore } from '@ngxs/store';
 
 import { TranslateModule } from '@ngx-translate/core';
 
-import Aura from '@primeng/themes/aura';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
 
@@ -17,6 +16,7 @@ import { provideTranslation } from '@core/helpers';
 
 import { GlobalErrorHandler } from './core/handlers';
 import { authInterceptor, errorInterceptor } from './core/interceptors';
+import CustomPreset from './core/theme/custom-preset';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
@@ -26,7 +26,7 @@ export const appConfig: ApplicationConfig = {
     provideStore(STATES, withNgxsReduxDevtoolsPlugin({ disabled: false })),
     providePrimeNG({
       theme: {
-        preset: Aura,
+        preset: CustomPreset,
         options: {
           darkModeSelector: false,
           cssLayer: {

src/app/core/components/header/header.component.html

@@ -6,6 +6,8 @@
       class="custom-dark-hover"
       icon="fas fa-chevron-down"
       iconPos="right"
+      variant="text"
+      severity="contrast"
       [label]="currentUser()?.fullName"
       (click)="menu.toggle($event)"
     />

src/app/core/components/header/header.component.scss

@@ -8,4 +8,15 @@
   width: 100%;
   background-color: var(--header-background-color);
   background-image: var(--header-background-image-url);
+
+  .header-dropdown-button {
+    --p-button-text-contrast-color: var(--header-color, var(--dark-blue-1));
+    --p-button-text-contrast-hover-background: transparent;
+    --p-button-text-contrast-active-background: transparent;
+
+    &:hover,
+    &:active {
+      --p-button-text-contrast-color: var(--dark-blue-2);
+    }
+  }
 }

src/app/core/components/topnav/topnav.component.html

@@ -15,6 +15,5 @@
     [icon]="isDrawerVisible() ? 'fas fa-close fa-2xl' : 'fas fa-bars fa-2xl'"
     severity="contrast"
     (onClick)="toggleMenuVisibility()"
-  >
-  </p-button>
+  ></p-button>
 </section>

src/app/core/components/topnav/topnav.component.scss

@@ -12,6 +12,9 @@
     .topnav-btn {
       height: mix.rem(36px);
       width: mix.rem(36px);
+
+      --p-button-contrast-background: transparent;
+      --p-button-contrast-border-color: transparent;
     }
   }
 }

src/app/core/theme/components.ts

@@ -0,0 +1,47 @@
+import { primitives } from './primitives';
+
+export const components = {
+  button: {
+    colorScheme: {
+      success: {
+        hoverBackground: primitives.colors.greenThree,
+        hoverBorderColor: primitives.colors.greenThree,
+      },
+      danger: {
+        hoverBackground: primitives.colors.redThree,
+        hoverBorderColor: primitives.colors.redThree,
+      },
+      info: {
+        background: primitives.colors.transparent,
+        hoverBackground: primitives.colors.transparent,
+        activeBackground: primitives.colors.transparent,
+        borderColor: primitives.colors.transparent,
+        hoverBorderColor: primitives.colors.greyTwo,
+        activeBorderColor: primitives.colors.greyTwo,
+        color: primitives.colors.darkBlueOne,
+        hoverColor: primitives.colors.darkBlueOne,
+        activeColor: primitives.colors.darkBlueOne,
+        fontWeight: primitives.fontWeights.regular,
+      },
+      secondary: {
+        background: primitives.colors.bgBlueThree,
+        hoverBackground: primitives.colors.bgBlueTwo,
+        activeBackground: primitives.colors.bgBlueThree,
+        borderColor: primitives.colors.bgBlueThree,
+        hoverBorderColor: primitives.colors.bgBlueTwo,
+        color: primitives.colors.prBlueOne,
+        hoverColor: primitives.colors.prBlueThree,
+      },
+      outlined: {
+        primary: {
+          hoverBackground: primitives.colors.bgBlueTwo,
+          activeBackground: primitives.colors.bgBlueTwo,
+        },
+        success: {
+          hoverBackground: primitives.colors.greenTwo,
+          activeBackground: primitives.colors.greenTwo,
+        },
+      },
+    },
+  },
+};

src/app/core/theme/custom-preset.ts

@@ -0,0 +1,12 @@
+import { definePreset } from '@primeng/themes';
+import Aura from '@primeng/themes/aura';
+
+import { components } from './components';
+import { semantic } from './semantic';
+
+const CustomPreset = definePreset(Aura, {
+  semantic: semantic,
+  components: components,
+});
+
+export default CustomPreset;

src/app/core/theme/index.ts

@@ -0,0 +1 @@
+export * from './custom-preset';

src/app/core/theme/primitives.ts

@@ -0,0 +1,47 @@
+export const primitives = {
+  colors: {
+    prBlueOne: 'var(--pr-blue-1)',
+    prBlueTwo: 'var(--pr-blue-2)',
+    prBlueThree: 'var(--pr-blue-3)',
+
+    darkBlueOne: 'var(--dark-blue-1)',
+    darkBlueTwo: 'var(--dark-blue-2)',
+
+    bgBlueTwo: 'var(--bg-blue-2)',
+    bgBlueThree: 'var(--bg-blue-3)',
+
+    greyOne: 'var(--grey-1)',
+    greyTwo: 'var(--grey-2)',
+    greyThree: 'var(--grey-3)',
+    greyOutline: 'var(--grey-outline)',
+    white: 'var(--white)',
+
+    greenOne: 'var(--green-1)',
+    greenTwo: 'var(--green-2)',
+    greenThree: 'var(--green-3)',
+
+    redOne: 'var(--red-1)',
+    redTwo: 'var(--red-2)',
+    redThree: 'var(--red-3)',
+
+    yellowOne: 'var(--yellow-1)',
+    yellowTwo: 'var(--yellow-2)',
+
+    greenOneAlt: 'var(--green-1-alt)',
+    greenTwoAlt: 'var(--green-2-alt)',
+    blueOne: 'var(--blue-1)',
+    blueTwo: 'var(--blue-2)',
+
+    greenOneBg: 'var(--green-1-bg)',
+    greenTwoBg: 'var(--green-2-bg)',
+    blueOneBg: 'var(--blue-1-bg)',
+    blueTwoBg: 'var(--blue-2-bg)',
+    transparent: 'transparent',
+  },
+  fontWeights: {
+    regular: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+};

src/app/core/theme/semantic.ts

@@ -0,0 +1,28 @@
+import { palette } from '@primeng/themes';
+
+import { primitives } from './primitives';
+
+const primaryPalette = palette(getCssVariableValue('--pr-blue-1'));
+const secondaryPalette = palette(getCssVariableValue('--bg-blue-3'));
+const successPalette = palette(getCssVariableValue('--green-1'));
+const dangerPalette = palette(getCssVariableValue('--red-1'));
+const infoPalette = palette(getCssVariableValue('--blue-1'));
+
+export const semantic = {
+  primary: primaryPalette,
+  surface: secondaryPalette,
+  red: dangerPalette,
+  green: successPalette,
+  sky: infoPalette,
+  colorScheme: {
+    light: {
+      primary: {
+        hoverColor: primitives.colors.prBlueThree,
+      },
+    },
+  },
+};
+
+function getCssVariableValue(variableName: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+}