From 9239fb6d5d098def9fce6d54bb7f2531b66332cc Mon Sep 17 00:00:00 2001 From: Dominik Donoch Date: Fri, 12 Jul 2024 11:18:58 +0200 Subject: [PATCH 01/14] feat: enable light mode --- .../article-regular-card.component.html | 4 ++-- .../ui-article-list-title.component.html | 2 +- .../ui-layouts/src/lib/header/header.component.html | 8 +++++--- .../feature-newsletter/newsletter.component.html | 2 +- libs/blog/shared/ui-card/src/lib/card.component.ts | 2 +- .../src/lib/ui-difficulty.component.ts | 7 ++++--- libs/shared/assets/src/lib/styles/main.scss | 13 +++++++++++++ tailwind.preset.js | 3 ++- 8 files changed, 29 insertions(+), 12 deletions(-) diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html b/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html index 9cc62549..d5a06689 100644 --- a/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html +++ b/libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html @@ -23,7 +23,7 @@ [priority]="imagePriority()" size="32" /> - + {{ article().author.name }} @@ -39,7 +39,7 @@

{{ title() }}

diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/header.component.html b/libs/blog/layouts/ui-layouts/src/lib/header/header.component.html index 98c91ecb..67808e8f 100644 --- a/libs/blog/layouts/ui-layouts/src/lib/header/header.component.html +++ b/libs/blog/layouts/ui-layouts/src/lib/header/header.component.html @@ -1,4 +1,6 @@ -
+
@@ -29,7 +31,7 @@

angular.love

type="button" class="border-al-gray-200 mr-1 rounded border bg-transparent px-1 py-2 font-medium leading-4 md:mr-2 md:px-4" [ngClass]="{ - '!text-white': language() === 'en', + '!text-al-foreground': language() === 'en', '!text-al-gray-50 opacity-50': language() !== 'en', }" [attr.aria-label]="t('changeLangToEnglish')" @@ -42,7 +44,7 @@

angular.love

type="button" class="border-al-gray-200 mr-1 rounded border bg-transparent px-1 py-2 font-medium leading-4 md:mr-2 md:px-4" [ngClass]="{ - '!text-white': language() === 'pl', + '!text-al-foreground': language() === 'pl', '!text-al-gray-50 opacity-50': language() !== 'pl', }" [attr.aria-label]="t('changeLangToPolish')" diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html b/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html index ac9f19bd..eafbf0f3 100644 --- a/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html +++ b/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html @@ -5,7 +5,7 @@

{{ t('title') }}

diff --git a/libs/blog/shared/ui-card/src/lib/card.component.ts b/libs/blog/shared/ui-card/src/lib/card.component.ts index a90d840c..5114e55c 100644 --- a/libs/blog/shared/ui-card/src/lib/card.component.ts +++ b/libs/blog/shared/ui-card/src/lib/card.component.ts @@ -69,7 +69,7 @@ export class CardLinkableDirective { export class GradientCardDirective { @HostBinding('class') get hostClasses() { - return 'border !bg-al-radial-gradient bg-al-background'; + return 'border !bg-al-radial-gradient bg-al-card dark:bg-al-background'; } } diff --git a/libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts b/libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts index ba67e799..f0905e2f 100644 --- a/libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts +++ b/libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts @@ -26,7 +26,7 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
@@ -45,7 +45,8 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
@@ -77,7 +78,7 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
diff --git a/libs/shared/assets/src/lib/styles/main.scss b/libs/shared/assets/src/lib/styles/main.scss index d05ccfdb..4c67d3fb 100644 --- a/libs/shared/assets/src/lib/styles/main.scss +++ b/libs/shared/assets/src/lib/styles/main.scss @@ -8,11 +8,24 @@ :root { --primary: 255 0 106; --foreground: 255 255 255; + --primary-foreground: 255 255 255; --muted: 190 196 202; --border: 46 47 59; --card: 25 26 34; --background: 16 15 21; } + + @media (prefers-color-scheme: light) { + :root { + --primary: 213 1 89; + --foreground: 20 21 27; + --primary-foreground: 106 121 139; + --muted: 25 25 25; + --border: 200 200 200; + --card: 255 255 255; + --background: 236 236 236; + } + } } @layer base { diff --git a/tailwind.preset.js b/tailwind.preset.js index 6276ecbb..ba7877bb 100644 --- a/tailwind.preset.js +++ b/tailwind.preset.js @@ -1,10 +1,11 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: ['class'], theme: { extend: { colors: { 'al-foreground': 'rgb(var(--foreground) / )', + 'al-primary-foreground': + 'rgb(var(--primary-foreground) / )', 'al-card': 'rgb(var(--card) / )', 'al-background': 'rgba(var(--background) / )', 'al-border': 'rgb(var(--border) / )', From a64571d251854f7f23f9f99d94fb5437ca17ac70 Mon Sep 17 00:00:00 2001 From: DominikKalinowski Date: Thu, 12 Sep 2024 15:53:30 +0200 Subject: [PATCH 02/14] feat(client): customize some details in light mode Implements KAP-237 KAP-235 --- .../ui-article-card.component.ts | 1 + .../components/footer-logo.component.ts | 2 +- .../footer-social-media-icons.component.ts | 2 +- .../src/lib/footer/footer.component.html | 4 +- .../lib/navigation/navigation.component.html | 10 +- .../partners-list.component.html | 2 +- .../src/lib/social-media-icons.component.html | 5 +- libs/shared/assets/src/lib/styles/main.scss | 2 +- package.json | 1 + pnpm-lock.yaml | 24821 +++++++--------- tailwind.preset.js | 20 +- 11 files changed, 11535 insertions(+), 13335 deletions(-) diff --git a/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts b/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts index 1830a94c..c831ccb4 100644 --- a/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts +++ b/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.ts @@ -22,6 +22,7 @@ export type CardType = 'regular' | 'horizontal' | 'compact' | 'hero'; host: { 'data-testid': 'article-card', '[attr.id]': 'article().slug', + class: 'light:border light:rounded-lg', }, }) export class UiArticleCardComponent { diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts index d3be1d61..b361e7f7 100644 --- a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts +++ b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts @@ -17,7 +17,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core'; /> angular.love
-