feat: enhance theming support with light/dark variants and gradient options

Author: marcin-hoa

libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html

@@ -41,7 +41,12 @@ <h2 class="text-al-primary-foreground mb-8 mt-10 text-[40px] font-bold">
 </ng-container>
 
 @for (author of authorsCards(); track author.slug) {
-  <al-author-card class="mb-6 block" [author]="author" [linkable]="true" />
+  <al-author-card
+    class="mb-6 block"
+    [author]="author"
+    [linkable]="true"
+    [hideGradient]="hideGradientInAuthorCards()"
+  />
 
   @if ($index === noAuthorsInView() - 2) {
     @defer (on viewport) {

libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts

@@ -16,6 +16,7 @@ import {
 } from '@angular-love/blog/shared/ui-card';
 import { InfiniteScrollTriggerDirective } from '@angular-love/blog/shared/ui-pagination';
 import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-media-icons';
+import { AppThemeStore } from '@angular-love/data-access-app-theme';
 
 @Component({
   selector: 'al-about-us',
@@ -41,6 +42,10 @@ export class FeatureAboutUsComponent implements OnInit {
     return this.authorsCards()?.length || 0;
   });
 
+  readonly theme = inject(AppThemeStore).theme;
+
+  readonly hideGradientInAuthorCards = computed(() => this.theme() === 'light');
+
   private readonly _skip = this._authorListStore.skip;
   private readonly _total = this._authorListStore.total;
   private readonly _pageSize = this._authorListStore.pageSize;

libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html

@@ -37,7 +37,7 @@
   </section>
 
   <div class="flex justify-center gap-3">
-    <button al-button role="link" [routerLink]="selected().link" size="small">
+    <button al-button role="link" [routerLink]="selected().link" size="medium">
       {{ t('categories.showAll', { category: t(selected().translationPath) }) }}
     </button>
   </div>

libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts

@@ -1,41 +1,42 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 import {
   CardComponent,
   CardContentDirective,
+  GradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 
 @Component({
   selector: 'al-author-card-template',
-  standalone: true,
-  imports: [CardComponent, CardContentDirective],
+  imports: [CardComponent, CardContentDirective, GradientCardDirective],
   host: {
     class: 'block @container',
   },
   template: `
-    <al-card>
+    <al-card alGradientCard [hideGradient]="hideGradient()">
       <div alCardContent>
         <div
-          class="@3xl:flex-row @3xl:border-none flex w-full flex-col items-center rounded-lg border"
+          class="flex w-full flex-col items-center rounded-lg border md:flex-row md:border-none"
         >
           <div
-            class="@3xl:border dark:@3xl:!bg-al-radial-gradient dark:@3xl:bg-al-background light:@3xl:bg-[#f2f2f2] @3xl:min-w-[260px] min-w-fit rounded-lg pb-4 pt-6"
+            class="dark:!bg-al-radial-gradient dark:bg-al-background md:light:bg-[#f2f2f2] min-w-fit rounded-lg pb-4 pt-6 md:min-w-[260px] md:border"
           >
             <div
-              class="@3xl:max-w-[360px] flex w-full flex-col items-center gap-4"
+              class="flex w-full flex-col items-center gap-4 md:max-w-[360px]"
+              Expand
+              Down
             >
               <ng-content select="[author-info-card]"></ng-content>
             </div>
           </div>
-
-          <div
-            class="@3xl:pt-6 w-full flex-1 hyphens-auto break-words p-6 pt-0"
-          >
+          <div class="w-full flex-1 hyphens-auto break-words p-6 pt-0 md:pt-6">
             <ng-content select="[author-info-description]"></ng-content>
           </div>
         </div>
       </div>
     </al-card>
   `,
 })
-export class AuthorCardTemplateComponent {}
+export class AuthorCardTemplateComponent {
+  hideGradient = input<boolean>(true);
+}

libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html

@@ -1,5 +1,5 @@
 <article [attr.aria-labelledby]="'author-title-' + author().slug">
-  <al-author-card-template>
+  <al-author-card-template [hideGradient]="hideGradient()">
     <ng-container author-info-card>
       @if (linkable()) {
         <a [routerLink]="['/', 'author', author().slug] | alLocalize">

libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts

@@ -45,6 +45,7 @@ export class AuthorCardComponent {
 
   clampText = input<boolean>();
   linkable = input<boolean>(false);
+  hideGradient = input<boolean>(false);
 
   descriptionClass = computed(
     () => 'text-sm' + (this.clampText() ? ' line-clamp-3' : ''),

libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts

@@ -13,7 +13,7 @@ import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-m
       >
         Social media
       </h3>
-      <al-social-media-icons />
+      <al-social-media-icons variant="light" />
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

libs/blog/shared/ui-button/src/lib/button/button.component.ts

@@ -21,7 +21,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: <Record<AlButtonVariant, string>>{
-        Primary: 'bg-al-primary/90 text-white font-bold uppercase',
+        Primary: 'bg-al-primary/90 text-white uppercase',
         Secondary: 'bg-al-background border',
         Outline: 'border border-al-primary/90 bg-white text-al-primary',
         Ghost: 'bg-transparent',

libs/blog/shared/ui-card/src/lib/card.component.ts

@@ -65,12 +65,15 @@ export class CardLinkableDirective {
 @Directive({
   standalone: true,
   selector: 'al-card[alGradientCard]',
+  host: {
+    '[class.bg-al-radial-gradient]': '!hideGradient()',
+  },
 })
 export class GradientCardDirective {
+  hideGradient = input<boolean>(false);
+
   @HostBinding('class')
-  get hostClasses() {
-    return 'bg-al-radial-gradient dark:bg-al-background';
-  }
+  hostClasses = 'dark:bg-al-background';
 }
 
 @Directive({

libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.html

@@ -2,7 +2,7 @@
   @for (social of socials; track $index) {
     <li>
       <al-social-media-icon-item
-        class="text-[#fff]"
+        [class]="iconColorClass()"
         [socialMediaConfig]="social"
       />
     </li>