@meshmakers/octo-ui 3.3.620 → 3.3.630
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 +1 -0
- package/fesm2022/meshmakers-octo-ui.mjs +11218 -4089
- package/fesm2022/meshmakers-octo-ui.mjs.map +1 -1
- package/lib/runtime-browser/styles/_index.scss +7 -0
- package/lib/runtime-browser/styles/_kendo-theme.scss +224 -0
- package/lib/runtime-browser/styles/_lcars-button.scss +55 -0
- package/lib/runtime-browser/styles/_lcars-flat-btn.scss +11 -0
- package/lib/runtime-browser/styles/_lcars-input.scss +13 -0
- package/lib/runtime-browser/styles/_styles.scss +4708 -0
- package/lib/runtime-browser/styles/_variables.scss +199 -0
- package/package.json +13 -4
- package/styles/_index.scss +3 -0
- package/styles/_with-kendo.scss +8 -0
- package/types/meshmakers-octo-ui.d.ts +1403 -552
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
// ============================================================================
|
|
2
|
+
// RUNTIME BROWSER - Design Tokens (Kendo-independent)
|
|
3
|
+
// LCARS-inspired theme variables. Use with Kendo when host imports Kendo theme.
|
|
4
|
+
// ============================================================================
|
|
5
|
+
|
|
6
|
+
// ----------------------------------------------------------------------------
|
|
7
|
+
// LCARS DESIGN TOKENS - Brand color palette (from Brand Manual)
|
|
8
|
+
// ----------------------------------------------------------------------------
|
|
9
|
+
$octo-mint: #64ceb9; // Primary highlight
|
|
10
|
+
$neo-cyan: #00a8dc; // Secondary highlight
|
|
11
|
+
$indigogo: #546fbd; // Panel accents
|
|
12
|
+
$toffee: #da9162; // Warm accent
|
|
13
|
+
$bubblegum: #ec658f; // Alert/warning accent
|
|
14
|
+
$lilac-glow: #c861d6; // Hover states, glow effects
|
|
15
|
+
$royal-violet: #6c4da8; // LCARS-typical accent
|
|
16
|
+
$ash-blue: #9292a6; // Inactive elements, secondary text
|
|
17
|
+
$iron-navy: #394555; // Surface, panels
|
|
18
|
+
$deep-sea: #07172b; // Background (NEVER use black!)
|
|
19
|
+
$surface-elevated: #1f2e40; // Elevated surfaces
|
|
20
|
+
$octo-text-color: #ffffff;
|
|
21
|
+
$lcars-border-color: #64ceb9;
|
|
22
|
+
$pink: #ec658f;
|
|
23
|
+
|
|
24
|
+
// Additional theme colors (used when Kendo theme is applied)
|
|
25
|
+
$kendo-inverse: #3d3d3d;
|
|
26
|
+
$kendo-success: #37b400;
|
|
27
|
+
|
|
28
|
+
/// Applies CSS custom properties for the LCARS theme.
|
|
29
|
+
/// Include this on :host or a container (e.g. .kendo-theme-provider).
|
|
30
|
+
/// When Kendo is imported by the host, these variables override Kendo's defaults.
|
|
31
|
+
@mixin variables {
|
|
32
|
+
// Typography
|
|
33
|
+
--lcars-font-primary: "Montserrat", "Roboto", "Helvetica Neue", sans-serif;
|
|
34
|
+
--lcars-font-mono: "Roboto Mono", "Consolas", monospace;
|
|
35
|
+
--lcars-border-color: #{$lcars-border-color};
|
|
36
|
+
|
|
37
|
+
--pink: #{$pink};
|
|
38
|
+
|
|
39
|
+
// Brand Colors as CSS Variables
|
|
40
|
+
--octo-mint: #{$octo-mint};
|
|
41
|
+
--neo-cyan: #{$neo-cyan};
|
|
42
|
+
--indigogo: #{$indigogo};
|
|
43
|
+
--toffee: #{$toffee};
|
|
44
|
+
--bubblegum: #{$bubblegum};
|
|
45
|
+
--lilac-glow: #{$lilac-glow};
|
|
46
|
+
--royal-violet: #{$royal-violet};
|
|
47
|
+
--ash-blue: #{$ash-blue};
|
|
48
|
+
--iron-navy: #{$iron-navy};
|
|
49
|
+
--deep-sea: #{$deep-sea};
|
|
50
|
+
--surface-elevated: #{$surface-elevated};
|
|
51
|
+
--octo-text-color: #{$octo-text-color};
|
|
52
|
+
--kendo-success: #{$kendo-success};
|
|
53
|
+
|
|
54
|
+
// Kendo variable overrides - applied when Kendo is imported by host
|
|
55
|
+
--kendo-color-primary: var(--octo-mint);
|
|
56
|
+
--kendo-color-primary-on-surface: var(--octo-mint);
|
|
57
|
+
--kendo-color-app-surface: var(--deep-sea);
|
|
58
|
+
--kendo-color-on-app-surface: var(--octo-text-color);
|
|
59
|
+
font-family: var(--lcars-font-primary);
|
|
60
|
+
|
|
61
|
+
// Derived colors for gradients/overlays (theme-aware)
|
|
62
|
+
--octo-mint-05: color-mix(in srgb, var(--octo-mint) 5%, transparent);
|
|
63
|
+
--octo-mint-03: color-mix(in srgb, var(--octo-mint) 3%, transparent);
|
|
64
|
+
--octo-mint-08: color-mix(in srgb, var(--octo-mint) 8%, transparent);
|
|
65
|
+
--octo-mint-10: color-mix(in srgb, var(--octo-mint) 10%, transparent);
|
|
66
|
+
--octo-mint-15: color-mix(in srgb, var(--octo-mint) 15%, transparent);
|
|
67
|
+
--octo-mint-20: color-mix(in srgb, var(--octo-mint) 20%, transparent);
|
|
68
|
+
--octo-mint-25: color-mix(in srgb, var(--octo-mint) 25%, transparent);
|
|
69
|
+
--octo-mint-30: color-mix(in srgb, var(--octo-mint) 30%, transparent);
|
|
70
|
+
--octo-mint-35: color-mix(in srgb, var(--octo-mint) 35%, transparent);
|
|
71
|
+
--octo-mint-40: color-mix(in srgb, var(--octo-mint) 40%, transparent);
|
|
72
|
+
--octo-mint-45: color-mix(in srgb, var(--octo-mint) 45%, transparent);
|
|
73
|
+
--octo-mint-50: color-mix(in srgb, var(--octo-mint) 50%, transparent);
|
|
74
|
+
--octo-mint-60: color-mix(in srgb, var(--octo-mint) 60%, transparent);
|
|
75
|
+
--octo-mint-80: color-mix(in srgb, var(--octo-mint) 80%, transparent);
|
|
76
|
+
--octo-mint-dark-10: color-mix(in srgb, var(--octo-mint), black 10%);
|
|
77
|
+
--octo-mint-light-5: color-mix(in srgb, var(--octo-mint), white 5%);
|
|
78
|
+
--octo-mint-light-10: color-mix(in srgb, var(--octo-mint), white 10%);
|
|
79
|
+
|
|
80
|
+
--bubblegum-05: color-mix(in srgb, var(--bubblegum) 5%, transparent);
|
|
81
|
+
--bubblegum-10: color-mix(in srgb, var(--bubblegum) 10%, transparent);
|
|
82
|
+
--bubblegum-15: color-mix(in srgb, var(--bubblegum) 15%, transparent);
|
|
83
|
+
--bubblegum-20: color-mix(in srgb, var(--bubblegum) 20%, transparent);
|
|
84
|
+
--bubblegum-30: color-mix(in srgb, var(--bubblegum) 30%, transparent);
|
|
85
|
+
--bubblegum-40: color-mix(in srgb, var(--bubblegum) 40%, transparent);
|
|
86
|
+
--bubblegum-50: color-mix(in srgb, var(--bubblegum) 50%, transparent);
|
|
87
|
+
--bubblegum-60: color-mix(in srgb, var(--bubblegum) 60%, transparent);
|
|
88
|
+
|
|
89
|
+
--toffee-15: color-mix(in srgb, var(--toffee) 15%, transparent);
|
|
90
|
+
--toffee-30: color-mix(in srgb, var(--toffee) 30%, transparent);
|
|
91
|
+
--toffee-40: color-mix(in srgb, var(--toffee) 40%, transparent);
|
|
92
|
+
--toffee-50: color-mix(in srgb, var(--toffee) 50%, transparent);
|
|
93
|
+
|
|
94
|
+
--royal-violet-15: color-mix(in srgb, var(--royal-violet) 15%, transparent);
|
|
95
|
+
--royal-violet-30: color-mix(in srgb, var(--royal-violet) 30%, transparent);
|
|
96
|
+
--royal-violet-40: color-mix(in srgb, var(--royal-violet) 40%, transparent);
|
|
97
|
+
--royal-violet-50: color-mix(in srgb, var(--royal-violet) 50%, transparent);
|
|
98
|
+
--royal-violet-light-20: color-mix(in srgb, var(--royal-violet), white 20%);
|
|
99
|
+
|
|
100
|
+
--neo-cyan-05: color-mix(in srgb, var(--neo-cyan) 5%, transparent);
|
|
101
|
+
--neo-cyan-10: color-mix(in srgb, var(--neo-cyan) 10%, transparent);
|
|
102
|
+
--neo-cyan-30: color-mix(in srgb, var(--neo-cyan) 30%, transparent);
|
|
103
|
+
--neo-cyan-40: color-mix(in srgb, var(--neo-cyan) 40%, transparent);
|
|
104
|
+
--neo-cyan-dark-10: color-mix(in srgb, var(--neo-cyan), black 10%);
|
|
105
|
+
|
|
106
|
+
--iron-navy-60: color-mix(in srgb, var(--iron-navy) 60%, transparent);
|
|
107
|
+
--iron-navy-80: color-mix(in srgb, var(--iron-navy) 80%, transparent);
|
|
108
|
+
--iron-navy-50: color-mix(in srgb, var(--iron-navy) 50%, transparent);
|
|
109
|
+
--iron-navy-70: color-mix(in srgb, var(--iron-navy) 70%, transparent);
|
|
110
|
+
--iron-navy-dark-5: color-mix(in srgb, var(--iron-navy), black 5%);
|
|
111
|
+
|
|
112
|
+
--deep-sea-40: color-mix(in srgb, var(--deep-sea) 40%, transparent);
|
|
113
|
+
--deep-sea-50: color-mix(in srgb, var(--deep-sea) 50%, transparent);
|
|
114
|
+
--deep-sea-60: color-mix(in srgb, var(--deep-sea) 60%, transparent);
|
|
115
|
+
--deep-sea-80: color-mix(in srgb, var(--deep-sea) 80%, transparent);
|
|
116
|
+
--deep-sea-90: color-mix(in srgb, var(--deep-sea) 90%, transparent);
|
|
117
|
+
--deep-sea-95: color-mix(in srgb, var(--deep-sea) 95%, transparent);
|
|
118
|
+
|
|
119
|
+
--ash-blue-10: color-mix(in srgb, var(--ash-blue) 10%, transparent);
|
|
120
|
+
--ash-blue-15: color-mix(in srgb, var(--ash-blue) 15%, transparent);
|
|
121
|
+
--ash-blue-20: color-mix(in srgb, var(--ash-blue) 20%, transparent);
|
|
122
|
+
--ash-blue-30: color-mix(in srgb, var(--ash-blue) 30%, transparent);
|
|
123
|
+
--ash-blue-50: color-mix(in srgb, var(--ash-blue) 50%, transparent);
|
|
124
|
+
--ash-blue-70: color-mix(in srgb, var(--ash-blue) 70%, transparent);
|
|
125
|
+
--ash-blue-80: color-mix(in srgb, var(--ash-blue) 80%, transparent);
|
|
126
|
+
|
|
127
|
+
--surface-elevated-40: color-mix(
|
|
128
|
+
in srgb,
|
|
129
|
+
var(--surface-elevated) 40%,
|
|
130
|
+
transparent
|
|
131
|
+
);
|
|
132
|
+
--surface-elevated-50: color-mix(
|
|
133
|
+
in srgb,
|
|
134
|
+
var(--surface-elevated) 50%,
|
|
135
|
+
transparent
|
|
136
|
+
);
|
|
137
|
+
--surface-elevated-90: color-mix(
|
|
138
|
+
in srgb,
|
|
139
|
+
var(--surface-elevated) 90%,
|
|
140
|
+
transparent
|
|
141
|
+
);
|
|
142
|
+
--surface-elevated-60: color-mix(
|
|
143
|
+
in srgb,
|
|
144
|
+
var(--surface-elevated) 60%,
|
|
145
|
+
transparent
|
|
146
|
+
);
|
|
147
|
+
--surface-elevated-80: color-mix(
|
|
148
|
+
in srgb,
|
|
149
|
+
var(--surface-elevated) 80%,
|
|
150
|
+
transparent
|
|
151
|
+
);
|
|
152
|
+
|
|
153
|
+
// LCARS-specific design tokens
|
|
154
|
+
--lcars-glow-primary: 0 0 10px var(--octo-mint-40);
|
|
155
|
+
--lcars-btn-base: linear-gradient(180deg, var(--octo-mint-15), var(--octo-mint-05));
|
|
156
|
+
--lcars-btn-base-hover: linear-gradient(180deg, var(--octo-mint-25), var(--octo-mint-15));
|
|
157
|
+
--lcars-input-focus: 0 0 8px var(--octo-mint-30);
|
|
158
|
+
--lcars-glow-cyan: 0 0 10px var(--neo-cyan-40);
|
|
159
|
+
--lcars-glow-violet: 0 0 10px var(--royal-violet-40);
|
|
160
|
+
--lcars-glow-pink: 0 0 10px var(--bubblegum-40);
|
|
161
|
+
|
|
162
|
+
// LCARS Border Radius (asymmetric is characteristic)
|
|
163
|
+
--lcars-radius-sm: 4px;
|
|
164
|
+
--lcars-radius-md: 8px;
|
|
165
|
+
--lcars-radius-lg: 16px;
|
|
166
|
+
--lcars-radius-xl: 24px;
|
|
167
|
+
--lcars-radius-pill: 50px;
|
|
168
|
+
|
|
169
|
+
// Panel styling
|
|
170
|
+
--lcars-panel-border: 1px solid var(--octo-mint-20);
|
|
171
|
+
--lcars-panel-bg: var(--surface-elevated-60);
|
|
172
|
+
|
|
173
|
+
// Transitions
|
|
174
|
+
--lcars-transition-fast: 150ms ease;
|
|
175
|
+
--lcars-transition-normal: 250ms ease;
|
|
176
|
+
|
|
177
|
+
// Designer/Symbol Editor Panel Variables (LCARS theme)
|
|
178
|
+
--designer-panel-bg: var(--surface-elevated);
|
|
179
|
+
--designer-panel-bg-elevated: var(--iron-navy);
|
|
180
|
+
--designer-panel-border: var(--octo-mint-20);
|
|
181
|
+
--designer-panel-text: var(--octo-text-color);
|
|
182
|
+
--designer-panel-text-secondary: var(--ash-blue);
|
|
183
|
+
--designer-panel-text-muted: color-mix(
|
|
184
|
+
in srgb,
|
|
185
|
+
var(--ash-blue) 70%,
|
|
186
|
+
transparent
|
|
187
|
+
);
|
|
188
|
+
--designer-panel-accent: var(--octo-mint);
|
|
189
|
+
--designer-panel-accent-hover-bg: var(--octo-mint-15);
|
|
190
|
+
--designer-panel-input-bg: var(--deep-sea);
|
|
191
|
+
--designer-panel-delete-hover-bg: var(--bubblegum-20);
|
|
192
|
+
--designer-panel-delete-color: var(--bubblegum);
|
|
193
|
+
|
|
194
|
+
// Cron Expression Cell Variables (LCARS theme for list view)
|
|
195
|
+
--mm-cron-code-bg: var(--deep-sea-80);
|
|
196
|
+
--mm-cron-code-text: var(--octo-mint);
|
|
197
|
+
--mm-cron-text-secondary: var(--ash-blue);
|
|
198
|
+
--mm-cron-success: var(--kendo-success);
|
|
199
|
+
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meshmakers/octo-ui",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.630",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@
|
|
6
|
-
"@angular/
|
|
7
|
-
"@angular/
|
|
5
|
+
"@ngx-translate/core": "^17.0.0",
|
|
6
|
+
"@angular/animations": "^21.0.6",
|
|
7
|
+
"@angular/common": "^21.0.6",
|
|
8
|
+
"@angular/core": "^21.0.6",
|
|
9
|
+
"@angular/forms": "^21.0.6",
|
|
8
10
|
"@meshmakers/octo-services": "*",
|
|
11
|
+
"@meshmakers/shared-services": "*",
|
|
9
12
|
"@meshmakers/shared-auth": "*",
|
|
10
13
|
"@meshmakers/shared-ui": "*",
|
|
11
14
|
"@progress/kendo-angular-buttons": "^23.2.0",
|
|
@@ -20,10 +23,16 @@
|
|
|
20
23
|
"@progress/kendo-svg-icons": "^4.8.0",
|
|
21
24
|
"apollo-angular": "^13.0.0"
|
|
22
25
|
},
|
|
26
|
+
"peerDependenciesMeta": {
|
|
27
|
+
"@ngx-translate/core": {
|
|
28
|
+
"optional": true
|
|
29
|
+
}
|
|
30
|
+
},
|
|
23
31
|
"dependencies": {
|
|
24
32
|
"tslib": "^2.8.1"
|
|
25
33
|
},
|
|
26
34
|
"sideEffects": false,
|
|
35
|
+
"style": "styles/_index.scss",
|
|
27
36
|
"module": "fesm2022/meshmakers-octo-ui.mjs",
|
|
28
37
|
"typings": "types/meshmakers-octo-ui.d.ts",
|
|
29
38
|
"exports": {
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
// ============================================================================
|
|
2
|
+
// RUNTIME BROWSER - Styles WITH Kendo Theme (for apps that don't import Kendo)
|
|
3
|
+
// Use this entry point when your app does NOT already import a Kendo theme.
|
|
4
|
+
// When Kendo is already imported, use _index.scss instead.
|
|
5
|
+
// ============================================================================
|
|
6
|
+
|
|
7
|
+
@use "../lib/runtime-browser/styles/kendo-theme";
|
|
8
|
+
@forward "../lib/runtime-browser/styles/index";
|