@clanwolf/ui-kit 1.0.3 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +131 -1
- package/fesm2022/clanwolf-ui-kit.mjs +59 -4
- package/fesm2022/clanwolf-ui-kit.mjs.map +1 -1
- package/package.json +4 -2
- package/styles/_animations.scss +36 -0
- package/styles/_colors.scss +38 -0
- package/styles/_fonts.scss +18 -0
- package/styles/_loading.scss +69 -0
- package/styles/_scrollbar.scss +39 -0
- package/styles/_theme.scss +331 -0
- package/styles/_typography.scss +26 -0
- package/styles/aux-theme/_aux-theme.scss +1492 -0
- package/styles/fonts/Anta-Regular.ttf +0 -0
- package/styles/fonts/Quantico-Regular.ttf +0 -0
- package/styles/index.scss +12 -0
- package/types/clanwolf-ui-kit.d.ts +37 -1
package/README.md
CHANGED
|
@@ -1,6 +1,136 @@
|
|
|
1
1
|
# UiKit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Angular UI Kit library for ASCard (`@clanwolf/ui-kit`).
|
|
4
|
+
|
|
5
|
+
## Contents
|
|
6
|
+
|
|
7
|
+
### Theme / Shared Styles
|
|
8
|
+
|
|
9
|
+
A shared SCSS theme (colors, mixins, utility classes, scrollbar, loading screen,
|
|
10
|
+
fly-in/out animations and custom fonts) is shipped under `styles/`. Import it once
|
|
11
|
+
in your app's global stylesheet:
|
|
12
|
+
|
|
13
|
+
```scss
|
|
14
|
+
// styles.scss
|
|
15
|
+
@use "@clanwolf/ui-kit/styles" as theme;
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
This provides, among others:
|
|
19
|
+
|
|
20
|
+
- Color variables/mixins: `theme.$accent`, `theme.$bg-primary`, `theme.$text-primary`, `theme.theme-bg`, ...
|
|
21
|
+
- Typography variables: `theme.$font-family-base` (default `"Quantico", sans-serif`),
|
|
22
|
+
`theme.$font-family-heading` (default `"Anta", sans-serif`)
|
|
23
|
+
- Utility classes: `.theme-panel`, `.text-glow`, `.btn-theme-primary`, `.btn-theme-secondary`,
|
|
24
|
+
`.theme-grid`, `.border-highlight`, `.overlay`, `.overlay-focus`, `.overlay-highlight`,
|
|
25
|
+
`.scanner-effect`, `.distortion-enter`, `.crt-distortion-enter`, `.list-btn-primary`,
|
|
26
|
+
`.theme-font-base`, `.theme-font-heading`
|
|
27
|
+
- Scrollbar styling: `.theme-scrollbar`
|
|
28
|
+
- Dialog animations: `.fly-in-dialog-right`, `.fly-out-dialog-right`, `.fly-in-dialog-left`, `.fly-out-dialog-left`
|
|
29
|
+
- Custom fonts `Anta` and `Quantico` (registered via `@font-face`)
|
|
30
|
+
|
|
31
|
+
### Using the shipped typography (Anta / Quantico)
|
|
32
|
+
|
|
33
|
+
`@use`-ing the theme automatically registers the `@font-face` rules for the shipped
|
|
34
|
+
fonts `Quantico` (body text) and `Anta` (headings). The library itself does **not**
|
|
35
|
+
apply any font to `body`/`html` — you decide where to apply it in your app:
|
|
36
|
+
|
|
37
|
+
```scss
|
|
38
|
+
// styles.scss
|
|
39
|
+
@use "@clanwolf/ui-kit/styles" as theme;
|
|
40
|
+
|
|
41
|
+
html,
|
|
42
|
+
body {
|
|
43
|
+
font-family: theme.$font-family-base; // "Quantico", sans-serif
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
h1, h2, h3, h4 {
|
|
47
|
+
font-family: theme.$font-family-heading; // "Anta", sans-serif
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Or, without touching Sass variables at all, just use the utility classes on any element:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<body class="theme-font-base">
|
|
55
|
+
<h1 class="theme-font-heading">Title</h1>
|
|
56
|
+
</body>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Overriding the font with your own
|
|
60
|
+
|
|
61
|
+
Only needed if you want to **replace** `Anta`/`Quantico` with a different font. Override
|
|
62
|
+
`$font-family-base` / `$font-family-heading` via Sass module configuration when you `@use`
|
|
63
|
+
the theme (this also affects ui-kit-internal usages like `uikit-loading-bar`):
|
|
64
|
+
|
|
65
|
+
```scss
|
|
66
|
+
// styles.scss
|
|
67
|
+
@use "@clanwolf/ui-kit/styles" as theme with (
|
|
68
|
+
$font-family-base: "'Roboto', sans-serif",
|
|
69
|
+
$font-family-heading: "'Roboto', sans-serif"
|
|
70
|
+
);
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
`with (...)` is plain Sass module configuration syntax (not Angular-specific): every
|
|
74
|
+
variable declared with `!default` in the used module can be overridden this way from the
|
|
75
|
+
outside, without forking the partial. Make sure `Roboto` (or whichever font you use) is
|
|
76
|
+
actually loaded in your app (e.g. via your own `@font-face`/Google Fonts), since the
|
|
77
|
+
library won't provide it.
|
|
78
|
+
|
|
79
|
+
Alternatively, just set your own rule after the `@use` — no module configuration needed:
|
|
80
|
+
|
|
81
|
+
```scss
|
|
82
|
+
@use "@clanwolf/ui-kit/styles" as theme;
|
|
83
|
+
|
|
84
|
+
html,
|
|
85
|
+
body {
|
|
86
|
+
font-family: "Roboto", sans-serif;
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Components
|
|
91
|
+
|
|
92
|
+
- `uikit-button` – basic button component
|
|
93
|
+
- `uikit-asset-image` – unified image component with predefined `AssetSize`s (`XXS`…`XL`)
|
|
94
|
+
- `uikit-loading-bar` – fullscreen loading indicator (customizable via `[text]` input)
|
|
95
|
+
|
|
96
|
+
#### `uikit-asset-image`
|
|
97
|
+
|
|
98
|
+
The library does **not** ship any images — provide your own asset path (or a full URL)
|
|
99
|
+
via `[src]`. Sizing is controlled via the `AssetSize` enum (`min-height`/`max-height`);
|
|
100
|
+
you can also pass a plain CSS length string instead.
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
import { Component } from '@angular/core';
|
|
104
|
+
import { AssetImageComponent, AssetSize } from '@clanwolf/ui-kit';
|
|
105
|
+
|
|
106
|
+
@Component({
|
|
107
|
+
selector: 'app-pilot-card',
|
|
108
|
+
standalone: true,
|
|
109
|
+
imports: [AssetImageComponent],
|
|
110
|
+
templateUrl: './pilot-card.component.html',
|
|
111
|
+
})
|
|
112
|
+
export class PilotCardComponent {
|
|
113
|
+
protected readonly AssetSize = AssetSize;
|
|
114
|
+
pilotImage = 'assets/images/pilots/pilot-01.png';
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<uikit-asset-image
|
|
120
|
+
[src]="pilotImage"
|
|
121
|
+
[size]="AssetSize.MD"
|
|
122
|
+
[alt]="'Pilot Portrait'"
|
|
123
|
+
></uikit-asset-image>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
| `AssetSize` | Value |
|
|
127
|
+
|---|---|
|
|
128
|
+
| `XXS` | `2rem` |
|
|
129
|
+
| `XS` | `3rem` |
|
|
130
|
+
| `SM` | `5rem` |
|
|
131
|
+
| `MD` | `8rem` |
|
|
132
|
+
| `LG` | `10rem` |
|
|
133
|
+
| `XL` | `12rem` |
|
|
4
134
|
|
|
5
135
|
## Code scaffolding
|
|
6
136
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { Injectable, ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class UiKitService {
|
|
5
5
|
constructor() { }
|
|
@@ -32,13 +32,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
32
32
|
|
|
33
33
|
class ButtonComponent {
|
|
34
34
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: ButtonComponent, isStandalone: true, selector: "uikit-button", ngImport: i0, template: "<p>button works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.
|
|
35
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: ButtonComponent, isStandalone: true, selector: "uikit-button", ngImport: i0, template: "<p>button works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
|
-
args: [{ selector: 'uikit-button', imports: [], changeDetection: ChangeDetectionStrategy.
|
|
39
|
+
args: [{ selector: 'uikit-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>button works!</p>\n" }]
|
|
40
40
|
}] });
|
|
41
41
|
|
|
42
|
+
/**
|
|
43
|
+
* Simple, unified image component with fixed sizing.
|
|
44
|
+
* Provide an asset path/URL via `src` and a size from `AssetSize`
|
|
45
|
+
* (or a custom CSS length string).
|
|
46
|
+
*/
|
|
47
|
+
class AssetImageComponent {
|
|
48
|
+
src;
|
|
49
|
+
alt;
|
|
50
|
+
size;
|
|
51
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AssetImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: AssetImageComponent, isStandalone: true, selector: "uikit-asset-image", inputs: { src: "src", alt: "alt", size: "size" }, ngImport: i0, template: "<img\n [src]=\"src\"\n [alt]=\"alt ?? ''\"\n [style.max-height]=\"size\"\n [style.min-height]=\"size\"\n/>\n\n", styles: [":host{display:block}img{object-fit:fill}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53
|
+
}
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AssetImageComponent, decorators: [{
|
|
55
|
+
type: Component,
|
|
56
|
+
args: [{ selector: 'uikit-asset-image', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n [src]=\"src\"\n [alt]=\"alt ?? ''\"\n [style.max-height]=\"size\"\n [style.min-height]=\"size\"\n/>\n\n", styles: [":host{display:block}img{object-fit:fill}\n"] }]
|
|
57
|
+
}], propDecorators: { src: [{
|
|
58
|
+
type: Input,
|
|
59
|
+
args: [{ required: true }]
|
|
60
|
+
}], alt: [{
|
|
61
|
+
type: Input
|
|
62
|
+
}], size: [{
|
|
63
|
+
type: Input,
|
|
64
|
+
args: [{ required: true }]
|
|
65
|
+
}] } });
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Fullscreen loading indicator using the ui-kit theme.
|
|
69
|
+
* Customize the displayed text via the `text` input.
|
|
70
|
+
*/
|
|
71
|
+
class LoadingBarComponent {
|
|
72
|
+
text = 'Loading...';
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: LoadingBarComponent, isStandalone: true, selector: "uikit-loading-bar", inputs: { text: "text" }, ngImport: i0, template: "<div class=\"theme-loading-screen\">\n <div class=\"theme-loading-text\">{{ text }}</div>\n <div class=\"theme-loading-bar\"></div>\n</div>\n\n", styles: [".theme-loading-screen{background-color:#111c1d;color:#b8f3e1;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:9999}.theme-loading-screen .theme-loading-text{font-family:Quantico,sans-serif;color:#b8f3e1;font-size:1.4rem;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 8px #b8f3e1;animation:theme-loading-pulse 1.5s infinite ease-in-out}.theme-loading-screen .theme-loading-bar{position:relative;width:200px;height:4px;margin-top:1.5rem;background:#b8f3e11a;overflow:hidden;border-radius:2px}.theme-loading-screen .theme-loading-bar:before{content:\"\";position:absolute;inset:0;background:#b8f3e1;width:40%;animation:theme-loading-slide 1.2s infinite ease-in-out}@keyframes theme-loading-pulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes theme-loading-slide{0%{left:-40%}50%{left:60%}to{left:-40%}}:host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: LoadingBarComponent, decorators: [{
|
|
77
|
+
type: Component,
|
|
78
|
+
args: [{ selector: 'uikit-loading-bar', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"theme-loading-screen\">\n <div class=\"theme-loading-text\">{{ text }}</div>\n <div class=\"theme-loading-bar\"></div>\n</div>\n\n", styles: [".theme-loading-screen{background-color:#111c1d;color:#b8f3e1;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:9999}.theme-loading-screen .theme-loading-text{font-family:Quantico,sans-serif;color:#b8f3e1;font-size:1.4rem;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 8px #b8f3e1;animation:theme-loading-pulse 1.5s infinite ease-in-out}.theme-loading-screen .theme-loading-bar{position:relative;width:200px;height:4px;margin-top:1.5rem;background:#b8f3e11a;overflow:hidden;border-radius:2px}.theme-loading-screen .theme-loading-bar:before{content:\"\";position:absolute;inset:0;background:#b8f3e1;width:40%;animation:theme-loading-slide 1.2s infinite ease-in-out}@keyframes theme-loading-pulse{0%,to{opacity:.4}50%{opacity:1}}@keyframes theme-loading-slide{0%{left:-40%}50%{left:60%}to{left:-40%}}:host{display:block}\n"] }]
|
|
79
|
+
}], propDecorators: { text: [{
|
|
80
|
+
type: Input
|
|
81
|
+
}] } });
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Predefined sizes for the ui-kit asset/image components,
|
|
85
|
+
* used to unify image heights across the app.
|
|
86
|
+
*/
|
|
87
|
+
var AssetSize;
|
|
88
|
+
(function (AssetSize) {
|
|
89
|
+
AssetSize["XXS"] = "2rem";
|
|
90
|
+
AssetSize["XS"] = "3rem";
|
|
91
|
+
AssetSize["SM"] = "5rem";
|
|
92
|
+
AssetSize["MD"] = "8rem";
|
|
93
|
+
AssetSize["LG"] = "10rem";
|
|
94
|
+
AssetSize["XL"] = "12rem";
|
|
95
|
+
})(AssetSize || (AssetSize = {}));
|
|
96
|
+
|
|
42
97
|
/*
|
|
43
98
|
* Public API Surface of ui-kit
|
|
44
99
|
*/
|
|
@@ -47,5 +102,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
47
102
|
* Generated bundle index. Do not edit.
|
|
48
103
|
*/
|
|
49
104
|
|
|
50
|
-
export { ButtonComponent, UiKitComponent, UiKitService };
|
|
105
|
+
export { AssetImageComponent, AssetSize, ButtonComponent, LoadingBarComponent, UiKitComponent, UiKitService };
|
|
51
106
|
//# sourceMappingURL=clanwolf-ui-kit.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clanwolf-ui-kit.mjs","sources":["../../../projects/ui-kit/src/lib/ui-kit.service.ts","../../../projects/ui-kit/src/lib/ui-kit.component.ts","../../../projects/ui-kit/src/lib/components/button/button.component.ts","../../../projects/ui-kit/src/lib/components/button/button.component.html","../../../projects/ui-kit/src/public-api.ts","../../../projects/ui-kit/src/clanwolf-ui-kit.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class UiKitService {\n\n constructor() { }\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n selector: 'lib-ui-kit',\n imports: [],\n template: `\n <p>\n ui-kit works!\n </p>\n `,\n changeDetection: ChangeDetectionStrategy.Eager,\n styles: ``\n})\nexport class UiKitComponent {\n\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n selector: 'uikit-button',\n imports: [],\n templateUrl: './button.component.html',\n changeDetection: ChangeDetectionStrategy.
|
|
1
|
+
{"version":3,"file":"clanwolf-ui-kit.mjs","sources":["../../../projects/ui-kit/src/lib/ui-kit.service.ts","../../../projects/ui-kit/src/lib/ui-kit.component.ts","../../../projects/ui-kit/src/lib/components/button/button.component.ts","../../../projects/ui-kit/src/lib/components/button/button.component.html","../../../projects/ui-kit/src/lib/components/asset-image/asset-image.component.ts","../../../projects/ui-kit/src/lib/components/asset-image/asset-image.component.html","../../../projects/ui-kit/src/lib/components/loading-bar/loading-bar.component.ts","../../../projects/ui-kit/src/lib/components/loading-bar/loading-bar.component.html","../../../projects/ui-kit/src/lib/models/asset-size.enum.ts","../../../projects/ui-kit/src/public-api.ts","../../../projects/ui-kit/src/clanwolf-ui-kit.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class UiKitService {\n\n constructor() { }\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n selector: 'lib-ui-kit',\n imports: [],\n template: `\n <p>\n ui-kit works!\n </p>\n `,\n changeDetection: ChangeDetectionStrategy.Eager,\n styles: ``\n})\nexport class UiKitComponent {\n\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n selector: 'uikit-button',\n imports: [],\n templateUrl: './button.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styleUrl: './button.component.scss'\n})\nexport class ButtonComponent {\n\n}\n","<p>button works!</p>\n","import { Component, Input, ChangeDetectionStrategy } from '@angular/core';\nimport { AssetSize } from '../../models/asset-size.enum';\n\n/**\n * Simple, unified image component with fixed sizing.\n * Provide an asset path/URL via `src` and a size from `AssetSize`\n * (or a custom CSS length string).\n */\n@Component({\n selector: 'uikit-asset-image',\n imports: [],\n templateUrl: './asset-image.component.html',\n styleUrl: './asset-image.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AssetImageComponent {\n @Input({ required: true }) src!: string;\n @Input() alt: string | undefined;\n @Input({ required: true }) size!: AssetSize | string;\n}\n\n","<img\n [src]=\"src\"\n [alt]=\"alt ?? ''\"\n [style.max-height]=\"size\"\n [style.min-height]=\"size\"\n/>\n\n","import { Component, Input, ChangeDetectionStrategy } from '@angular/core';\n\n/**\n * Fullscreen loading indicator using the ui-kit theme.\n * Customize the displayed text via the `text` input.\n */\n@Component({\n selector: 'uikit-loading-bar',\n imports: [],\n templateUrl: './loading-bar.component.html',\n styleUrl: './loading-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LoadingBarComponent {\n @Input() text = 'Loading...';\n}\n\n","<div class=\"theme-loading-screen\">\n <div class=\"theme-loading-text\">{{ text }}</div>\n <div class=\"theme-loading-bar\"></div>\n</div>\n\n","/**\n * Predefined sizes for the ui-kit asset/image components,\n * used to unify image heights across the app.\n */\nexport enum AssetSize {\n XXS = '2rem',\n XS = '3rem',\n SM = '5rem',\n MD = '8rem',\n LG = '10rem',\n XL = '12rem',\n}\n\n","/*\n * Public API Surface of ui-kit\n */\n\nexport * from './lib/ui-kit.service';\nexport * from './lib/ui-kit.component';\n\nexport * from './lib/components/button/button.component';\nexport * from './lib/components/asset-image/asset-image.component';\nexport * from './lib/components/loading-bar/loading-bar.component';\n\nexport * from './lib/models/asset-size.enum';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clanwolf/ui-kit",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Angular UI Kit library for ASCard",
|
|
5
5
|
"author": "ClanWolf",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
"ui",
|
|
19
19
|
"kit",
|
|
20
20
|
"components",
|
|
21
|
-
"library"
|
|
21
|
+
"library",
|
|
22
|
+
"theme",
|
|
23
|
+
"design-system"
|
|
22
24
|
],
|
|
23
25
|
"peerDependencies": {
|
|
24
26
|
"@angular/common": "^22.0.1",
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// Mixin für Fly-in/Fly-out Animationen
|
|
2
|
+
@mixin fly-animation($name, $from-x, $to-x) {
|
|
3
|
+
@keyframes #{$name} {
|
|
4
|
+
from {
|
|
5
|
+
transform: translateX($from-x);
|
|
6
|
+
opacity: 1;
|
|
7
|
+
}
|
|
8
|
+
to {
|
|
9
|
+
transform: translateX($to-x);
|
|
10
|
+
opacity: 1;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Keyframes generieren:
|
|
16
|
+
@include fly-animation(flyInRight, 200%, 0); // rechts nach links
|
|
17
|
+
@include fly-animation(flyOutRight, 0, 200%); // rechts raus
|
|
18
|
+
@include fly-animation(flyInLeft, -200%, 0); // links nach rechts
|
|
19
|
+
@include fly-animation(flyOutLeft, 0, -200%); // links raus
|
|
20
|
+
|
|
21
|
+
// Animation-Klassen
|
|
22
|
+
.fly-in-dialog-right {
|
|
23
|
+
margin-left: auto;
|
|
24
|
+
animation: flyInRight 1s ease-out forwards;
|
|
25
|
+
}
|
|
26
|
+
.fly-out-dialog-right {
|
|
27
|
+
animation: flyOutRight 1s ease-in forwards;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.fly-in-dialog-left {
|
|
31
|
+
animation: flyInLeft 1s ease-out forwards;
|
|
32
|
+
}
|
|
33
|
+
.fly-out-dialog-left {
|
|
34
|
+
animation: flyOutLeft 1s ease-in forwards;
|
|
35
|
+
}
|
|
36
|
+
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// --------------------------------------
|
|
2
|
+
// ⚙️ ui-kit Theme Colors
|
|
3
|
+
// --------------------------------------
|
|
4
|
+
|
|
5
|
+
// Backgrounds
|
|
6
|
+
$bg-primary: #060909;
|
|
7
|
+
$bg-secondary: #0b1414;
|
|
8
|
+
$bg-tertiary: #111c1d;
|
|
9
|
+
|
|
10
|
+
// Text
|
|
11
|
+
$text-primary: #b8f3e1;
|
|
12
|
+
$text-secondary: #5fd0b3;
|
|
13
|
+
$text-dim: #3e7d70;
|
|
14
|
+
$text-inactive: #284b45;
|
|
15
|
+
|
|
16
|
+
// Accents / Highlights
|
|
17
|
+
$accent: #00f6c1;
|
|
18
|
+
$accent-strong: #17fff0;
|
|
19
|
+
$accent-soft: rgba(0, 255, 200, 0.3);
|
|
20
|
+
|
|
21
|
+
// States
|
|
22
|
+
$warning: #f2c94c;
|
|
23
|
+
$danger: #ff5c5c;
|
|
24
|
+
$info: #40c9ff;
|
|
25
|
+
|
|
26
|
+
// Lines / Borders
|
|
27
|
+
$border: rgba(0, 255, 200, 0.2);
|
|
28
|
+
$divider: rgba(0, 255, 200, 0.1);
|
|
29
|
+
|
|
30
|
+
// Overlay
|
|
31
|
+
$overlay: rgba(6, 12, 12, 0.85);
|
|
32
|
+
$shadow: 0 0 12px rgba(0, 255, 200, 0.1);
|
|
33
|
+
|
|
34
|
+
@mixin theme-bg {
|
|
35
|
+
background-color: $bg-tertiary;
|
|
36
|
+
color: $text-primary;
|
|
37
|
+
}
|
|
38
|
+
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* --------------------------------------
|
|
2
|
+
ui-kit Theme Fonts
|
|
3
|
+
-------------------------------------- */
|
|
4
|
+
|
|
5
|
+
@font-face {
|
|
6
|
+
font-family: "Anta";
|
|
7
|
+
src: url("./fonts/Anta-Regular.ttf") format("truetype");
|
|
8
|
+
font-weight: normal;
|
|
9
|
+
font-style: normal;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@font-face {
|
|
13
|
+
font-family: "Quantico";
|
|
14
|
+
src: url("./fonts/Quantico-Regular.ttf") format("truetype");
|
|
15
|
+
font-weight: normal;
|
|
16
|
+
font-style: normal;
|
|
17
|
+
}
|
|
18
|
+
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@use "./colors" as colors;
|
|
2
|
+
@use "./typography" as typography;
|
|
3
|
+
|
|
4
|
+
/* --------------------------------------
|
|
5
|
+
Theme Loading Screen Styling
|
|
6
|
+
-------------------------------------- */
|
|
7
|
+
|
|
8
|
+
.theme-loading-screen {
|
|
9
|
+
@include colors.theme-bg;
|
|
10
|
+
position: fixed;
|
|
11
|
+
inset: 0;
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
z-index: 9999;
|
|
17
|
+
|
|
18
|
+
.theme-loading-text {
|
|
19
|
+
@include typography.base-font;
|
|
20
|
+
color: colors.$text-primary;
|
|
21
|
+
font-size: 1.4rem;
|
|
22
|
+
letter-spacing: 2px;
|
|
23
|
+
text-transform: uppercase;
|
|
24
|
+
text-shadow: 0 0 8px colors.$text-primary;
|
|
25
|
+
animation: theme-loading-pulse 1.5s infinite ease-in-out;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.theme-loading-bar {
|
|
29
|
+
position: relative;
|
|
30
|
+
width: 200px;
|
|
31
|
+
height: 4px;
|
|
32
|
+
margin-top: 1.5rem;
|
|
33
|
+
background: rgba(colors.$text-primary, 0.1);
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
border-radius: 2px;
|
|
36
|
+
|
|
37
|
+
&::before {
|
|
38
|
+
content: "";
|
|
39
|
+
position: absolute;
|
|
40
|
+
inset: 0;
|
|
41
|
+
background: colors.$text-primary;
|
|
42
|
+
width: 40%;
|
|
43
|
+
animation: theme-loading-slide 1.2s infinite ease-in-out;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@keyframes theme-loading-pulse {
|
|
49
|
+
0%,
|
|
50
|
+
100% {
|
|
51
|
+
opacity: 0.4;
|
|
52
|
+
}
|
|
53
|
+
50% {
|
|
54
|
+
opacity: 1;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@keyframes theme-loading-slide {
|
|
59
|
+
0% {
|
|
60
|
+
left: -40%;
|
|
61
|
+
}
|
|
62
|
+
50% {
|
|
63
|
+
left: 60%;
|
|
64
|
+
}
|
|
65
|
+
100% {
|
|
66
|
+
left: -40%;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@use "./colors" as colors;
|
|
2
|
+
|
|
3
|
+
/* --------------------------------------
|
|
4
|
+
Theme Scrollbar Styling
|
|
5
|
+
-------------------------------------- */
|
|
6
|
+
|
|
7
|
+
.theme-scrollbar {
|
|
8
|
+
overflow-y: auto;
|
|
9
|
+
scrollbar-width: thin; /* Firefox */
|
|
10
|
+
scrollbar-color: colors.$accent colors.$bg-secondary; /* Firefox Griff / Track */
|
|
11
|
+
|
|
12
|
+
/* Webkit-Browser */
|
|
13
|
+
&::-webkit-scrollbar {
|
|
14
|
+
width: 12px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&::-webkit-scrollbar-track {
|
|
18
|
+
background: colors.$bg-secondary;
|
|
19
|
+
border-left: 1px solid rgba(colors.$accent, 0.2);
|
|
20
|
+
border-radius: 6px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&::-webkit-scrollbar-thumb {
|
|
24
|
+
background-color: colors.$accent;
|
|
25
|
+
border-radius: 6px;
|
|
26
|
+
border: 2px solid colors.$bg-secondary;
|
|
27
|
+
box-shadow: 0 0 6px rgba(colors.$accent, 0.5);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
31
|
+
background-color: colors.$accent-strong;
|
|
32
|
+
box-shadow: 0 0 12px rgba(colors.$accent, 0.7);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&::-webkit-scrollbar-corner {
|
|
36
|
+
background: transparent;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|