From 8d656cdd32e82a552a3a6e043dc6c228769ab184 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Mon, 4 Mar 2024 10:51:57 +0100
Subject: [PATCH] OZG-4897 move tailwindconfig, add colors, up intellisense,
darkmode demoapp
---
alfa-client/.prettierrc | 2 +-
alfa-client/.vscode/settings.json | 2 +-
.../apps/demo/src/app/app.component.html | 15 ++++++++---
.../apps/demo/src/app/app.component.ts | 17 ++++++++++--
alfa-client/apps/demo/src/index.html | 2 +-
alfa-client/apps/demo/src/styles.scss | 6 +----
alfa-client/apps/demo/tailwind.config.js | 2 +-
.../src/lib/tailwind-preset/root.css | 27 +++++++++++++++++++
.../lib/tailwind-preset}/tailwind.config.js | 17 ++++++++++++
9 files changed, 76 insertions(+), 14 deletions(-)
create mode 100644 alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
rename alfa-client/libs/design-system/{ => src/lib/tailwind-preset}/tailwind.config.js (53%)
diff --git a/alfa-client/.prettierrc b/alfa-client/.prettierrc
index 937355eb8c..d16a34fe4b 100644
--- a/alfa-client/.prettierrc
+++ b/alfa-client/.prettierrc
@@ -19,5 +19,5 @@
"useTabs": false,
"embeddedLanguageFormatting": "auto",
"plugins": ["prettier-plugin-tailwindcss"],
- "tailwindConfig": "./libs/design-system/tailwind.config.js"
+ "tailwindConfig": "./libs/design-system/src/lib/tailwind-preset/tailwind.config.js"
}
diff --git a/alfa-client/.vscode/settings.json b/alfa-client/.vscode/settings.json
index cd2cd4c41d..49dca7d133 100644
--- a/alfa-client/.vscode/settings.json
+++ b/alfa-client/.vscode/settings.json
@@ -11,5 +11,5 @@
"files.eol": "\n",
"files.trimTrailingWhitespace": true,
"prettier.useTabs": false,
- "tailwindCSS.experimental.configFile": "../libs/design-system/tailwind.config.js"
+ "tailwindCSS.experimental.configFile": "../libs/design-system/tailwind-preset/tailwind.config.js"
}
diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 43e6847ef9..a4bda7a4d7 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -1,13 +1,22 @@
<ng-container>
<header class="flex items-center justify-between bg-white p-6">
- <div class="font-extrabold text-ozgblue">OZG-Cloud Demoapp</div>
+ <div class="font-extrabold text-primary">OZG-Cloud Demoapp</div>
+ <button
+ class="flex align-middle text-orange-500 transition-transform hover:scale-125"
+ (click)="darkMode.set(!darkMode())"
+ >
+ <span *ngIf="!darkMode()" class="material-icons">dark_mode</span>
+ <span *ngIf="darkMode()" class="material-icons">light_mode</span>
+ </button>
</header>
<div class="relative flex w-full flex-auto justify-center">
- <div class="w-96 bg-slate-300 p-6">
+ <div class="w-96 bg-background-100 p-6">
<nav>NAV</nav>
</div>
- <main class="flex-auto bg-slate-200 p-6">
+ <main class="flex-auto bg-background-50 p-6">
<ozg-testbtn />
+ <div class="text-warning">Achtung</div>
+ <div class="text-primary">Achtung</div>
<router-outlet></router-outlet>
</main>
</div>
diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts
index 4b0931b7db..5171e21410 100644
--- a/alfa-client/apps/demo/src/app/app.component.ts
+++ b/alfa-client/apps/demo/src/app/app.component.ts
@@ -1,13 +1,26 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding, effect, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { TestbtnComponent } from 'design-system';
@Component({
standalone: true,
- imports: [TestbtnComponent, RouterModule],
+ imports: [CommonModule, TestbtnComponent, RouterModule],
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
title = 'demo';
+
+ darkMode = signal<boolean>(JSON.parse(window.localStorage.getItem('darkMode') ?? 'false'));
+
+ @HostBinding('class.dark') get mode() {
+ return this.darkMode();
+ }
+
+ constructor() {
+ effect(() => {
+ window.localStorage.setItem('darkMode', JSON.stringify(this.darkMode()));
+ });
+ }
}
diff --git a/alfa-client/apps/demo/src/index.html b/alfa-client/apps/demo/src/index.html
index 77a3fcf4f2..9dbdba81d2 100644
--- a/alfa-client/apps/demo/src/index.html
+++ b/alfa-client/apps/demo/src/index.html
@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
- <body class="flex min-h-full bg-white text-black dark:bg-slate-100 dark:bg-slate-900">
+ <body class="flex min-h-full bg-white text-black">
<app-root class="flex w-full flex-col"></app-root>
</body>
</html>
diff --git a/alfa-client/apps/demo/src/styles.scss b/alfa-client/apps/demo/src/styles.scss
index 77e408aa8b..55cbe584a3 100644
--- a/alfa-client/apps/demo/src/styles.scss
+++ b/alfa-client/apps/demo/src/styles.scss
@@ -1,5 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* You can add global styles to this file, and also import other style files */
+@import 'libs/design-system/src/lib/tailwind-preset/root.css';
diff --git a/alfa-client/apps/demo/tailwind.config.js b/alfa-client/apps/demo/tailwind.config.js
index 45bd1202e6..ad1344c979 100644
--- a/alfa-client/apps/demo/tailwind.config.js
+++ b/alfa-client/apps/demo/tailwind.config.js
@@ -3,7 +3,7 @@
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
-const sharedTailwindConfig = require('../../libs/design-system/tailwind.config.js');
+const sharedTailwindConfig = require('../../libs/design-system/src/lib/tailwind-preset/tailwind.config.js');
/** @type {import('tailwindcss').Config} */
module.exports = {
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
new file mode 100644
index 0000000000..71e4720cff
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/root.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --warning: 38 92% 50%;
+
+ --color-background-secondary: 0 0% 98%;
+ --color-mainbg: 0 0% 100%;
+ --text: 0 0% 0%;
+
+ --color-primary-600: 212 80% 42%;
+ --color-background-50: 0 0% 100%;
+ --color-background-100: 0 0% 98%;
+ --color-background-200: 0 0% 90%;
+}
+
+.dark {
+ --color-background-secondary: 0 0% 16%;
+ --color-mainbg: 0 0% 14%;
+ --text: 0 0% 100%;
+
+ --color-primary-600: 43 96% 58%;
+ --color-background-50: 0 0% 0%;
+ --color-background-100: 0 0% 14%;
+ --color-background-200: 0 0% 16%;
+}
diff --git a/alfa-client/libs/design-system/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
similarity index 53%
rename from alfa-client/libs/design-system/tailwind.config.js
rename to alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index 45271b462c..e0b5124312 100644
--- a/alfa-client/libs/design-system/tailwind.config.js
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
@@ -1,3 +1,6 @@
+/* eslint-env node */
+/* eslint @typescript-eslint/no-var-requires: "off" */
+
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
@@ -7,6 +10,7 @@ module.exports = {
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
+ darkMode: 'class',
theme: {
extend: {
colors: {
@@ -23,6 +27,19 @@ module.exports = {
900: 'hsl(213, 85%, 33%)',
DEFAULT: 'hsl(215, 75%, 22%)',
},
+ background: {
+ 50: 'hsl(var(--color-background-50) / <alpha-value>)',
+ 100: 'hsl(var(--color-background-100) / <alpha-value>)',
+ 200: 'hsl(var(--color-background-200) / <alpha-value>)',
+ DEFAULT: 'hsl(var(--color-background-100) / <alpha-value>)',
+ },
+ mainbg: 'hsl(var(--color-mainbg) / <alpha-value>)',
+ primary: {
+ 600: 'hsl(var(--color-primary-600) / <alpha-value>)',
+ DEFAULT: 'hsl(var(--color-primary-600) / <alpha-value>)',
+ },
+ text: 'hsl(var(--text) / <alpha-value>)',
+ warning: 'hsl(var(--warning))',
},
},
},
--
GitLab