tecnualng 21.0.16 → 21.0.17
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 +112 -1
- package/_index.scss +17 -0
- package/package.json +40 -5
- package/src/lib/styles/_theming.scss +99 -0
- package/src/lib/styles/definitions/_aurora-dark.scss +19 -0
- package/src/lib/styles/definitions/_aurora.scss +19 -0
- package/src/lib/styles/definitions/_dark.scss +19 -0
- package/src/lib/styles/definitions/_forest.scss +19 -0
- package/src/lib/styles/definitions/_futuristic.scss +36 -0
- package/src/lib/styles/definitions/_light.scss +31 -0
- package/src/lib/styles/definitions/_monochrome.scss +19 -0
- package/src/lib/styles/definitions/_ocean.scss +19 -0
- package/src/lib/styles/definitions/_royal.scss +19 -0
- package/src/lib/styles/definitions/_sunset.scss +19 -0
package/README.md
CHANGED
|
@@ -70,7 +70,118 @@ import { TnButtonComponent } from 'tecnualng';
|
|
|
70
70
|
<tn-button label="Accept" (click)="onClick()"></tn-button>
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
### 4.
|
|
73
|
+
### 4. Configure Theming
|
|
74
|
+
|
|
75
|
+
TecnualNG includes a powerful theming system with 10 pre-built themes. To use themes in your application:
|
|
76
|
+
|
|
77
|
+
#### Step 1: Configure angular.json
|
|
78
|
+
|
|
79
|
+
Add theme bundles to your `angular.json`:
|
|
80
|
+
|
|
81
|
+
```json
|
|
82
|
+
"styles": [
|
|
83
|
+
"src/styles.scss",
|
|
84
|
+
{
|
|
85
|
+
"input": "src/styles/themes/light.scss",
|
|
86
|
+
"bundleName": "theme-light",
|
|
87
|
+
"inject": false
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"input": "src/styles/themes/dark.scss",
|
|
91
|
+
"bundleName": "theme-dark",
|
|
92
|
+
"inject": false
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"input": "src/styles/themes/futuristic.scss",
|
|
96
|
+
"bundleName": "theme-futuristic",
|
|
97
|
+
"inject": false
|
|
98
|
+
}
|
|
99
|
+
// Add more themes as needed
|
|
100
|
+
]
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
#### Step 2: Create Theme Files
|
|
104
|
+
|
|
105
|
+
Create SCSS files for each theme in `src/styles/themes/`:
|
|
106
|
+
|
|
107
|
+
**light.scss:**
|
|
108
|
+
|
|
109
|
+
```scss
|
|
110
|
+
@use 'tecnualng/styles/themes/light' as light;
|
|
111
|
+
|
|
112
|
+
body {
|
|
113
|
+
@include light.tng-theme-default;
|
|
114
|
+
background-color: var(--tng-background);
|
|
115
|
+
color: var(--tng-text);
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
**dark.scss:**
|
|
120
|
+
|
|
121
|
+
```scss
|
|
122
|
+
@use 'tecnualng/styles/themes/dark' as dark;
|
|
123
|
+
|
|
124
|
+
body {
|
|
125
|
+
@include dark.tng-theme-dark;
|
|
126
|
+
background-color: var(--tng-background);
|
|
127
|
+
color: var(--tng-text);
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
**futuristic.scss:**
|
|
132
|
+
|
|
133
|
+
```scss
|
|
134
|
+
@use 'tecnualng/styles/themes/futuristic' as futuristic;
|
|
135
|
+
|
|
136
|
+
body {
|
|
137
|
+
@include futuristic.tng-theme-futuristic;
|
|
138
|
+
background-color: var(--tng-background);
|
|
139
|
+
color: var(--tng-text);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
#### Step 3: Use ThemeService
|
|
144
|
+
|
|
145
|
+
Import and use the `ThemeService` to switch themes dynamically:
|
|
146
|
+
|
|
147
|
+
```typescript
|
|
148
|
+
import { Component, OnInit } from '@angular/core';
|
|
149
|
+
import { ThemeService } from 'tecnualng';
|
|
150
|
+
|
|
151
|
+
@Component({
|
|
152
|
+
selector: 'app-root',
|
|
153
|
+
templateUrl: './app.component.html',
|
|
154
|
+
})
|
|
155
|
+
export class AppComponent implements OnInit {
|
|
156
|
+
constructor(private themeService: ThemeService) {}
|
|
157
|
+
|
|
158
|
+
ngOnInit() {
|
|
159
|
+
// Set default theme
|
|
160
|
+
this.themeService.setTheme('light');
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
switchTheme(theme: string) {
|
|
164
|
+
this.themeService.setTheme(theme);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
#### Available Themes
|
|
170
|
+
|
|
171
|
+
TecnualNG includes 10 beautiful themes:
|
|
172
|
+
|
|
173
|
+
- **light** - Clean, bright theme with vibrant accents
|
|
174
|
+
- **dark** - Modern dark mode theme
|
|
175
|
+
- **ocean** - Ocean-inspired blues and teals
|
|
176
|
+
- **forest** - Nature-inspired greens
|
|
177
|
+
- **sunset** - Warm sunset colors
|
|
178
|
+
- **royal** - Elegant purple tones
|
|
179
|
+
- **monochrome** - Minimalist black and white
|
|
180
|
+
- **aurora** - Northern lights inspired colors
|
|
181
|
+
- **aurora-dark** - Dark aurora theme
|
|
182
|
+
- **futuristic** - Neon cyberpunk with glassmorphism effects
|
|
183
|
+
|
|
184
|
+
Each theme provides CSS variables for consistent styling across all components.
|
|
74
185
|
|
|
75
186
|
TecnualNG supports flexible styling with theme‑ready architecture.
|
|
76
187
|
|
package/_index.scss
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// TecnualNG Theme System
|
|
2
|
+
// Import this file to access all theme definitions
|
|
3
|
+
|
|
4
|
+
// Forward all theme mixins for external use
|
|
5
|
+
@forward 'src/lib/styles/definitions/light';
|
|
6
|
+
@forward 'src/lib/styles/definitions/dark';
|
|
7
|
+
@forward 'src/lib/styles/definitions/ocean';
|
|
8
|
+
@forward 'src/lib/styles/definitions/forest';
|
|
9
|
+
@forward 'src/lib/styles/definitions/sunset';
|
|
10
|
+
@forward 'src/lib/styles/definitions/royal';
|
|
11
|
+
@forward 'src/lib/styles/definitions/monochrome';
|
|
12
|
+
@forward 'src/lib/styles/definitions/aurora';
|
|
13
|
+
@forward 'src/lib/styles/definitions/aurora-dark';
|
|
14
|
+
@forward 'src/lib/styles/definitions/futuristic';
|
|
15
|
+
|
|
16
|
+
// Also forward the main theming file with all theme classes
|
|
17
|
+
@forward 'src/lib/styles/theming';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tecnualng",
|
|
3
|
-
"version": "21.0.
|
|
3
|
+
"version": "21.0.17",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^21.0.0",
|
|
6
6
|
"@angular/core": "^21.0.0"
|
|
@@ -10,13 +10,48 @@
|
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|
|
12
12
|
"exports": {
|
|
13
|
-
"
|
|
14
|
-
"sass": "./_index.scss"
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
"./styles": {
|
|
14
|
+
"sass": "./_index.scss"
|
|
15
|
+
},
|
|
16
|
+
"./styles/theming": {
|
|
17
|
+
"sass": "./src/lib/styles/_theming.scss"
|
|
18
|
+
},
|
|
19
|
+
"./styles/themes/light": {
|
|
20
|
+
"sass": "./src/lib/styles/definitions/_light.scss"
|
|
21
|
+
},
|
|
22
|
+
"./styles/themes/dark": {
|
|
23
|
+
"sass": "./src/lib/styles/definitions/_dark.scss"
|
|
24
|
+
},
|
|
25
|
+
"./styles/themes/ocean": {
|
|
26
|
+
"sass": "./src/lib/styles/definitions/_ocean.scss"
|
|
27
|
+
},
|
|
28
|
+
"./styles/themes/forest": {
|
|
29
|
+
"sass": "./src/lib/styles/definitions/_forest.scss"
|
|
30
|
+
},
|
|
31
|
+
"./styles/themes/sunset": {
|
|
32
|
+
"sass": "./src/lib/styles/definitions/_sunset.scss"
|
|
33
|
+
},
|
|
34
|
+
"./styles/themes/royal": {
|
|
35
|
+
"sass": "./src/lib/styles/definitions/_royal.scss"
|
|
36
|
+
},
|
|
37
|
+
"./styles/themes/monochrome": {
|
|
38
|
+
"sass": "./src/lib/styles/definitions/_monochrome.scss"
|
|
39
|
+
},
|
|
40
|
+
"./styles/themes/aurora": {
|
|
41
|
+
"sass": "./src/lib/styles/definitions/_aurora.scss"
|
|
42
|
+
},
|
|
43
|
+
"./styles/themes/aurora-dark": {
|
|
44
|
+
"sass": "./src/lib/styles/definitions/_aurora-dark.scss"
|
|
45
|
+
},
|
|
46
|
+
"./styles/themes/futuristic": {
|
|
47
|
+
"sass": "./src/lib/styles/definitions/_futuristic.scss"
|
|
17
48
|
},
|
|
18
49
|
"./package.json": {
|
|
19
50
|
"default": "./package.json"
|
|
51
|
+
},
|
|
52
|
+
".": {
|
|
53
|
+
"types": "./types/tecnualng.d.ts",
|
|
54
|
+
"default": "./fesm2022/tecnualng.mjs"
|
|
20
55
|
}
|
|
21
56
|
},
|
|
22
57
|
"module": "fesm2022/tecnualng.mjs",
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
// Global Theming System
|
|
2
|
+
@use 'definitions/light' as light;
|
|
3
|
+
@use 'definitions/dark' as dark;
|
|
4
|
+
@use 'definitions/ocean' as ocean;
|
|
5
|
+
@use 'definitions/forest' as forest;
|
|
6
|
+
@use 'definitions/sunset' as sunset;
|
|
7
|
+
@use 'definitions/royal' as royal;
|
|
8
|
+
@use 'definitions/monochrome' as monochrome;
|
|
9
|
+
@use 'definitions/aurora' as aurora;
|
|
10
|
+
@use 'definitions/aurora-dark' as aurora-dark;
|
|
11
|
+
@use 'definitions/futuristic' as futuristic;
|
|
12
|
+
|
|
13
|
+
// Forward mixins for external use
|
|
14
|
+
@forward 'definitions/light';
|
|
15
|
+
@forward 'definitions/dark';
|
|
16
|
+
@forward 'definitions/ocean';
|
|
17
|
+
@forward 'definitions/forest';
|
|
18
|
+
@forward 'definitions/sunset';
|
|
19
|
+
@forward 'definitions/royal';
|
|
20
|
+
@forward 'definitions/monochrome';
|
|
21
|
+
@forward 'definitions/aurora';
|
|
22
|
+
@forward 'definitions/aurora-dark';
|
|
23
|
+
@forward 'definitions/futuristic';
|
|
24
|
+
|
|
25
|
+
// Apply to root if desired, or use a class
|
|
26
|
+
:root {
|
|
27
|
+
@include light.tng-theme-default;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Theme classes
|
|
31
|
+
body.light-theme,
|
|
32
|
+
body[data-theme='light'] {
|
|
33
|
+
@include light.tng-theme-default;
|
|
34
|
+
background-color: var(--tng-background);
|
|
35
|
+
color: var(--tng-text);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
body.dark-theme,
|
|
39
|
+
body[data-theme='dark'] {
|
|
40
|
+
@include dark.tng-theme-dark;
|
|
41
|
+
background-color: var(--tng-background);
|
|
42
|
+
color: var(--tng-text);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
body.ocean-theme,
|
|
46
|
+
body[data-theme='ocean'] {
|
|
47
|
+
@include ocean.tng-theme-ocean;
|
|
48
|
+
background-color: var(--tng-background);
|
|
49
|
+
color: var(--tng-text);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
body.forest-theme,
|
|
53
|
+
body[data-theme='forest'] {
|
|
54
|
+
@include forest.tng-theme-forest;
|
|
55
|
+
background-color: var(--tng-background);
|
|
56
|
+
color: var(--tng-text);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
body.sunset-theme,
|
|
60
|
+
body[data-theme='sunset'] {
|
|
61
|
+
@include sunset.tng-theme-sunset;
|
|
62
|
+
background-color: var(--tng-background);
|
|
63
|
+
color: var(--tng-text);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
body.royal-theme,
|
|
67
|
+
body[data-theme='royal'] {
|
|
68
|
+
@include royal.tng-theme-royal;
|
|
69
|
+
background-color: var(--tng-background);
|
|
70
|
+
color: var(--tng-text);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
body.monochrome-theme,
|
|
74
|
+
body[data-theme='monochrome'] {
|
|
75
|
+
@include monochrome.tng-theme-monochrome;
|
|
76
|
+
background-color: var(--tng-background);
|
|
77
|
+
color: var(--tng-text);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
body.aurora-theme,
|
|
81
|
+
body[data-theme='aurora'] {
|
|
82
|
+
@include aurora.tng-theme-aurora;
|
|
83
|
+
background-color: var(--tng-background);
|
|
84
|
+
color: var(--tng-text);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
body.aurora-dark-theme,
|
|
88
|
+
body[data-theme='aurora-dark'] {
|
|
89
|
+
@include aurora-dark.tng-theme-aurora-dark;
|
|
90
|
+
background-color: var(--tng-background);
|
|
91
|
+
color: var(--tng-text);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
body.futuristic-theme,
|
|
95
|
+
body[data-theme='futuristic'] {
|
|
96
|
+
@include futuristic.tng-theme-futuristic;
|
|
97
|
+
background-color: var(--tng-background);
|
|
98
|
+
color: var(--tng-text);
|
|
99
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@mixin tng-theme-aurora-dark {
|
|
2
|
+
--tng-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
3
|
+
--tng-primary-hover: #2c3664;
|
|
4
|
+
--tng-primary-contrast: #2e0101;
|
|
5
|
+
--tng-secondary: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
|
|
6
|
+
--tng-secondary-hover: #653c3d;
|
|
7
|
+
--tng-secondary-contrast: #360202;
|
|
8
|
+
--tng-surface: #14171d;
|
|
9
|
+
--tng-background: #1a1a1a;
|
|
10
|
+
--tng-text: #ffffff;
|
|
11
|
+
--tng-text-secondary: #c8c8c8;
|
|
12
|
+
--tng-border: #404040;
|
|
13
|
+
--tng-error: #ff6b6b;
|
|
14
|
+
--tng-warning: #feca57;
|
|
15
|
+
--tng-success: #1dd1a1;
|
|
16
|
+
|
|
17
|
+
--tng-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
18
|
+
--tng-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
|
|
19
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@mixin tng-theme-aurora {
|
|
2
|
+
--tng-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
3
|
+
--tng-primary-hover: #2c3664;
|
|
4
|
+
--tng-primary-contrast: #ffffff;
|
|
5
|
+
--tng-secondary: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
|
|
6
|
+
--tng-secondary-hover: #653c3d;
|
|
7
|
+
--tng-secondary-contrast: #ffffff;
|
|
8
|
+
--tng-surface: #fdfbfd;
|
|
9
|
+
--tng-background: #fdfbfd;
|
|
10
|
+
--tng-text: #4a4a4a;
|
|
11
|
+
--tng-text-secondary: #808080;
|
|
12
|
+
--tng-border: #e6e6e6;
|
|
13
|
+
--tng-error: #ff6b6b;
|
|
14
|
+
--tng-warning: #feca57;
|
|
15
|
+
--tng-success: #1dd1a1;
|
|
16
|
+
|
|
17
|
+
--tng-shadow-sm: 0 2px 4px rgba(118, 75, 162, 0.15);
|
|
18
|
+
--tng-shadow-md: 0 4px 8px rgba(118, 75, 162, 0.2);
|
|
19
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@mixin tng-theme-dark {
|
|
2
|
+
// Colors
|
|
3
|
+
--tng-primary: #00f2ff;
|
|
4
|
+
--tng-primary-contrast: #000000;
|
|
5
|
+
--tng-secondary: #bc13fe;
|
|
6
|
+
--tng-secondary-contrast: #ffffff;
|
|
7
|
+
--tng-surface: rgba(255, 255, 255, 0.03);
|
|
8
|
+
--tng-background: #0a0a12;
|
|
9
|
+
--tng-text: #ffffff;
|
|
10
|
+
--tng-text-secondary: #a0a0b0;
|
|
11
|
+
--tng-border: rgba(255, 255, 255, 0.1);
|
|
12
|
+
--tng-error: #ef5350;
|
|
13
|
+
--tng-warning: #ffb74d;
|
|
14
|
+
--tng-success: #00ff9d;
|
|
15
|
+
|
|
16
|
+
// Shadows
|
|
17
|
+
--tng-shadow-sm: 0 4px 15px rgba(0, 242, 255, 0.1);
|
|
18
|
+
--tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
19
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@mixin tng-theme-forest {
|
|
2
|
+
// Colors
|
|
3
|
+
--tng-primary: #00ff9d;
|
|
4
|
+
--tng-primary-contrast: #000000;
|
|
5
|
+
--tng-secondary: #ccff00;
|
|
6
|
+
--tng-secondary-contrast: #000000;
|
|
7
|
+
--tng-surface: rgba(255, 255, 255, 0.03);
|
|
8
|
+
--tng-background: #0a0a12;
|
|
9
|
+
--tng-text: #ffffff;
|
|
10
|
+
--tng-text-secondary: #a0a0b0;
|
|
11
|
+
--tng-border: rgba(255, 255, 255, 0.1);
|
|
12
|
+
--tng-error: #ef5350;
|
|
13
|
+
--tng-warning: #ffb74d;
|
|
14
|
+
--tng-success: #00ff9d;
|
|
15
|
+
|
|
16
|
+
// Shadows
|
|
17
|
+
--tng-shadow-sm: 0 4px 15px rgba(0, 255, 157, 0.1);
|
|
18
|
+
--tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
19
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@mixin tng-theme-futuristic {
|
|
2
|
+
// Colors - Neon accents on dark background
|
|
3
|
+
--tng-primary: #00f2ff;
|
|
4
|
+
--tng-primary-contrast: #000000;
|
|
5
|
+
--tng-secondary: #bc13fe;
|
|
6
|
+
--tng-secondary-contrast: #ffffff;
|
|
7
|
+
|
|
8
|
+
// Glassmorphism surface
|
|
9
|
+
--tng-surface: rgba(255, 255, 255, 0.03);
|
|
10
|
+
|
|
11
|
+
// Dark background
|
|
12
|
+
--tng-background: #0a0a12;
|
|
13
|
+
|
|
14
|
+
// Text colors
|
|
15
|
+
--tng-text: #ffffff;
|
|
16
|
+
--tng-text-secondary: #a0a0b0;
|
|
17
|
+
|
|
18
|
+
// Border with glassmorphism
|
|
19
|
+
--tng-border: rgba(255, 255, 255, 0.1);
|
|
20
|
+
|
|
21
|
+
// Status colors with neon effect
|
|
22
|
+
--tng-error: #ff3366;
|
|
23
|
+
--tng-warning: #ffaa00;
|
|
24
|
+
--tng-success: #00ff9d;
|
|
25
|
+
|
|
26
|
+
// Shadows with neon glow
|
|
27
|
+
--tng-shadow-sm: 0 4px 15px rgba(0, 242, 255, 0.15);
|
|
28
|
+
--tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
29
|
+
|
|
30
|
+
// Additional neon colors for variety
|
|
31
|
+
--tng-neon-cyan: #00f2ff;
|
|
32
|
+
--tng-neon-purple: #bc13fe;
|
|
33
|
+
--tng-neon-green: #00ff9d;
|
|
34
|
+
--tng-neon-pink: #ff00ff;
|
|
35
|
+
--tng-neon-orange: #ff9900;
|
|
36
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@mixin tng-theme-default {
|
|
2
|
+
// Colors
|
|
3
|
+
--tng-primary: #00f2ff;
|
|
4
|
+
--tng-primary-contrast: #000000;
|
|
5
|
+
--tng-secondary: #bc13fe;
|
|
6
|
+
--tng-secondary-contrast: #ffffff;
|
|
7
|
+
--tng-surface: #ffffff;
|
|
8
|
+
--tng-background: #fafafa;
|
|
9
|
+
--tng-text: #333333;
|
|
10
|
+
--tng-text-secondary: #757575;
|
|
11
|
+
--tng-border: #e0e0e0;
|
|
12
|
+
--tng-error: #f44336;
|
|
13
|
+
--tng-warning: #ff9800;
|
|
14
|
+
--tng-success: #4caf50;
|
|
15
|
+
|
|
16
|
+
// Typography
|
|
17
|
+
--tng-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
|
|
18
|
+
--tng-font-size-base: 14px;
|
|
19
|
+
--tng-font-weight-regular: 400;
|
|
20
|
+
--tng-font-weight-medium: 500;
|
|
21
|
+
--tng-font-weight-bold: 700;
|
|
22
|
+
|
|
23
|
+
// Spacing & Layout
|
|
24
|
+
--tng-spacing-unit: 8px;
|
|
25
|
+
--tng-border-radius: 4px;
|
|
26
|
+
--tng-input-height: 40px;
|
|
27
|
+
|
|
28
|
+
// Shadows
|
|
29
|
+
--tng-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
30
|
+
--tng-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
|
|
31
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@mixin tng-theme-monochrome {
|
|
2
|
+
// Colors
|
|
3
|
+
--tng-primary: #ffffff;
|
|
4
|
+
--tng-primary-contrast: #000000;
|
|
5
|
+
--tng-secondary: #888888;
|
|
6
|
+
--tng-secondary-contrast: #ffffff;
|
|
7
|
+
--tng-surface: rgba(255, 255, 255, 0.03);
|
|
8
|
+
--tng-background: #0a0a12;
|
|
9
|
+
--tng-text: #ffffff;
|
|
10
|
+
--tng-text-secondary: #a0a0b0;
|
|
11
|
+
--tng-border: rgba(255, 255, 255, 0.1);
|
|
12
|
+
--tng-error: #ef5350;
|
|
13
|
+
--tng-warning: #ffb74d;
|
|
14
|
+
--tng-success: #00ff9d;
|
|
15
|
+
|
|
16
|
+
// Shadows
|
|
17
|
+
--tng-shadow-sm: 0 4px 15px rgba(255, 255, 255, 0.1);
|
|
18
|
+
--tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
19
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@mixin tng-theme-ocean {
|
|
2
|
+
// Colors
|
|
3
|
+
--tng-primary: #00bfff;
|
|
4
|
+
--tng-primary-contrast: #000000;
|
|
5
|
+
--tng-secondary: #00ffff;
|
|
6
|
+
--tng-secondary-contrast: #000000;
|
|
7
|
+
--tng-surface: rgba(255, 255, 255, 0.03);
|
|
8
|
+
--tng-background: #0a0a12;
|
|
9
|
+
--tng-text: #ffffff;
|
|
10
|
+
--tng-text-secondary: #a0a0b0;
|
|
11
|
+
--tng-border: rgba(255, 255, 255, 0.1);
|
|
12
|
+
--tng-error: #ef5350;
|
|
13
|
+
--tng-warning: #ffb74d;
|
|
14
|
+
--tng-success: #00ff9d;
|
|
15
|
+
|
|
16
|
+
// Shadows
|
|
17
|
+
--tng-shadow-sm: 0 4px 15px rgba(0, 191, 255, 0.1);
|
|
18
|
+
--tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
19
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@mixin tng-theme-royal {
|
|
2
|
+
// Colors
|
|
3
|
+
--tng-primary: #bc13fe;
|
|
4
|
+
--tng-primary-contrast: #ffffff;
|
|
5
|
+
--tng-secondary: #ff00ff;
|
|
6
|
+
--tng-secondary-contrast: #ffffff;
|
|
7
|
+
--tng-surface: rgba(255, 255, 255, 0.03);
|
|
8
|
+
--tng-background: #0a0a12;
|
|
9
|
+
--tng-text: #ffffff;
|
|
10
|
+
--tng-text-secondary: #a0a0b0;
|
|
11
|
+
--tng-border: rgba(255, 255, 255, 0.1);
|
|
12
|
+
--tng-error: #ef5350;
|
|
13
|
+
--tng-warning: #ffb74d;
|
|
14
|
+
--tng-success: #00ff9d;
|
|
15
|
+
|
|
16
|
+
// Shadows
|
|
17
|
+
--tng-shadow-sm: 0 4px 15px rgba(188, 19, 254, 0.1);
|
|
18
|
+
--tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
19
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@mixin tng-theme-sunset {
|
|
2
|
+
// Colors
|
|
3
|
+
--tng-primary: #ff9900;
|
|
4
|
+
--tng-primary-contrast: #000000;
|
|
5
|
+
--tng-secondary: #ffff00;
|
|
6
|
+
--tng-secondary-contrast: #000000;
|
|
7
|
+
--tng-surface: rgba(255, 255, 255, 0.03);
|
|
8
|
+
--tng-background: #0a0a12;
|
|
9
|
+
--tng-text: #ffffff;
|
|
10
|
+
--tng-text-secondary: #a0a0b0;
|
|
11
|
+
--tng-border: rgba(255, 255, 255, 0.1);
|
|
12
|
+
--tng-error: #ef5350;
|
|
13
|
+
--tng-warning: #ffb74d;
|
|
14
|
+
--tng-success: #00ff9d;
|
|
15
|
+
|
|
16
|
+
// Shadows
|
|
17
|
+
--tng-shadow-sm: 0 4px 15px rgba(255, 153, 0, 0.1);
|
|
18
|
+
--tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
|
|
19
|
+
}
|