Skip to content
Snippets Groups Projects
Commit 8d656cdd authored by OZGCloud's avatar OZGCloud
Browse files

OZG-4897 move tailwindconfig, add colors, up intellisense, darkmode demoapp

parent 974dfee3
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 76 additions and 14 deletions
alfa-client/.prettierrc
+ 1
− 1
View file @ 8d656cdd
...@@ -19,5 +19,5 @@ ...@@ -19,5 +19,5 @@
"useTabs": false, "useTabs": false,
"embeddedLanguageFormatting": "auto", "embeddedLanguageFormatting": "auto",
"plugins": ["prettier-plugin-tailwindcss"], "plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "./libs/design-system/tailwind.config.js" "tailwindConfig": "./libs/design-system/src/lib/tailwind-preset/tailwind.config.js"
} }
alfa-client/.vscode/settings.json
+ 1
− 1
View file @ 8d656cdd
...@@ -11,5 +11,5 @@ ...@@ -11,5 +11,5 @@
"files.eol": "\n", "files.eol": "\n",
"files.trimTrailingWhitespace": true, "files.trimTrailingWhitespace": true,
"prettier.useTabs": false, "prettier.useTabs": false,
"tailwindCSS.experimental.configFile": "../libs/design-system/tailwind.config.js" "tailwindCSS.experimental.configFile": "../libs/design-system/tailwind-preset/tailwind.config.js"
} }
alfa-client/apps/demo/src/app/app.component.html
+ 12
− 3
View file @ 8d656cdd
<ng-container> <ng-container>
<header class="flex items-center justify-between bg-white p-6"> <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> </header>
<div class="relative flex w-full flex-auto justify-center"> <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> <nav>NAV</nav>
</div> </div>
<main class="flex-auto bg-slate-200 p-6"> <main class="flex-auto bg-background-50 p-6">
<ozg-testbtn /> <ozg-testbtn />
<div class="text-warning">Achtung</div>
<div class="text-primary">Achtung</div>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
</div> </div>
......
alfa-client/apps/demo/src/app/app.component.ts
+ 15
− 2
View file @ 8d656cdd
import { Component } from '@angular/core'; import { Component, HostBinding, effect, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TestbtnComponent } from 'design-system'; import { TestbtnComponent } from 'design-system';
@Component({ @Component({
standalone: true, standalone: true,
imports: [TestbtnComponent, RouterModule], imports: [CommonModule, TestbtnComponent, RouterModule],
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
}) })
export class AppComponent { export class AppComponent {
title = 'demo'; 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()));
});
}
} }
alfa-client/apps/demo/src/index.html
+ 1
− 1
View file @ 8d656cdd
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head> </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> <app-root class="flex w-full flex-col"></app-root>
</body> </body>
</html> </html>
alfa-client/apps/demo/src/styles.scss
+ 1
− 5
View file @ 8d656cdd
@tailwind base; @import 'libs/design-system/src/lib/tailwind-preset/root.css';
@tailwind components;
@tailwind utilities;
/* You can add global styles to this file, and also import other style files */
alfa-client/apps/demo/tailwind.config.js
+ 1
− 1
View file @ 8d656cdd
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind'); const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path'); 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} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
......
alfa-client/libs/design-system/src/lib/tailwind-preset/root.css 0 → 100644
+ 27
− 0
View file @ 8d656cdd
@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%;
}
alfa-client/libs/design-system/tailwind.config.js → alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+ 17
− 0
View file @ 8d656cdd
/* eslint-env node */
/* eslint @typescript-eslint/no-var-requires: "off" */
const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind'); const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path'); const { join } = require('path');
...@@ -7,6 +10,7 @@ module.exports = { ...@@ -7,6 +10,7 @@ module.exports = {
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname), ...createGlobPatternsForDependencies(__dirname),
], ],
darkMode: 'class',
theme: { theme: {
extend: { extend: {
colors: { colors: {
...@@ -23,6 +27,19 @@ module.exports = { ...@@ -23,6 +27,19 @@ module.exports = {
900: 'hsl(213, 85%, 33%)', 900: 'hsl(213, 85%, 33%)',
DEFAULT: 'hsl(215, 75%, 22%)', 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))',
}, },
}, },
}, },
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutz - Barrierefreiheit