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
No related branches found
No related tags found
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 @@
"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"
}
alfa-client/.vscode/settings.json
+ 1
− 1
View file @ 8d656cdd
......@@ -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"
}
alfa-client/apps/demo/src/app/app.component.html
+ 12
− 3
View file @ 8d656cdd
<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>
......
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 { 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()));
});
}
}
alfa-client/apps/demo/src/index.html
+ 1
− 1
View file @ 8d656cdd
......@@ -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>
alfa-client/apps/demo/src/styles.scss
+ 1
− 5
View file @ 8d656cdd
@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';
alfa-client/apps/demo/tailwind.config.js
+ 1
− 1
View file @ 8d656cdd
......@@ -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 = {
......
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 { 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))',
},
},
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutz - Barrierefreiheit