gravitas-ui 0.1.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/package.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "name": "gravitas-ui",
3
+ "version": "0.1.0",
4
+ "description": "Angular standalone component library for Bootstrap-based enterprise applications.",
5
+ "license": "MIT",
6
+ "keywords": [
7
+ "angular",
8
+ "design-system",
9
+ "component-library",
10
+ "bootstrap",
11
+ "enterprise",
12
+ "ui"
13
+ ],
14
+ "peerDependencies": {
15
+ "@angular/common": ">=21.2.4 <22.0.0",
16
+ "@angular/core": ">=21.2.4 <22.0.0",
17
+ "@angular/forms": ">=21.2.4 <22.0.0",
18
+ "bootstrap": "^5.3.8"
19
+ },
20
+ "dependencies": {
21
+ "tslib": "^2.3.0"
22
+ },
23
+ "exports": {
24
+ "./styles/gravitas.css": {
25
+ "default": "./styles/gravitas.css"
26
+ },
27
+ "./styles/gravitas-storybook.css": {
28
+ "default": "./styles/gravitas-storybook.css"
29
+ },
30
+ "./styles/theme.css": {
31
+ "default": "./styles/theme.css"
32
+ },
33
+ "./styles/tokens.css": {
34
+ "default": "./styles/tokens.css"
35
+ },
36
+ "./package.json": {
37
+ "default": "./package.json"
38
+ },
39
+ ".": {
40
+ "types": "./types/gravitas-ui.d.ts",
41
+ "default": "./fesm2022/gravitas-ui.mjs"
42
+ }
43
+ },
44
+ "files": [
45
+ "ai",
46
+ "fesm2022",
47
+ "styles",
48
+ "types",
49
+ "CHANGELOG.md",
50
+ "LICENSE",
51
+ "SECURITY.md",
52
+ "README.md",
53
+ "package.json"
54
+ ],
55
+ "publishConfig": {
56
+ "access": "public"
57
+ },
58
+ "sideEffects": [
59
+ "./styles/*.css"
60
+ ],
61
+ "module": "fesm2022/gravitas-ui.mjs",
62
+ "typings": "types/gravitas-ui.d.ts",
63
+ "type": "module"
64
+ }
@@ -0,0 +1,173 @@
1
+ /* =========================================
2
+ Storybook Shell — Dense Enterprise Dashboard
3
+ (optional: you can later move this into a
4
+ separate storybook-only css if desired)
5
+ ========================================= */
6
+
7
+ .gv-shell {
8
+ height: 100vh;
9
+ display: grid;
10
+ grid-template-columns: 260px 1fr;
11
+ background: var(--gv-bg-app);
12
+ }
13
+
14
+ .gv-sidebar {
15
+ background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
16
+ color: #e5e7eb;
17
+ border-right: 1px solid rgba(148, 163, 184, 0.08);
18
+ padding: 14px 12px;
19
+ display: flex;
20
+ flex-direction: column;
21
+ gap: 12px;
22
+ }
23
+
24
+ .gv-brand {
25
+ font-weight: 800;
26
+ letter-spacing: 0.02em;
27
+ font-size: 14px;
28
+ padding: 10px 10px;
29
+ border-radius: var(--gv-radius-md);
30
+ background: rgba(255, 255, 255, 0.06);
31
+ }
32
+
33
+ .gv-nav {
34
+ display: flex;
35
+ flex-direction: column;
36
+ gap: 6px;
37
+ padding: 0 4px;
38
+ }
39
+
40
+ .gv-nav-title {
41
+ margin: 10px 6px 6px;
42
+ font-size: 11px;
43
+ text-transform: uppercase;
44
+ letter-spacing: 0.08em;
45
+ color: rgba(229, 231, 235, 0.7);
46
+ }
47
+
48
+ .gv-nav-item {
49
+ display: block;
50
+ padding: 8px 10px;
51
+ border-radius: var(--gv-radius-md);
52
+ text-decoration: none;
53
+ color: rgba(229, 231, 235, 0.9);
54
+ font-size: 13px;
55
+ line-height: 1.2;
56
+ }
57
+
58
+ .gv-nav-item:hover {
59
+ background: rgba(255, 255, 255, 0.08);
60
+ color: #fff;
61
+ }
62
+
63
+ .gv-nav-item--active {
64
+ background: rgba(59, 130, 246, 0.18);
65
+ border: 1px solid rgba(59, 130, 246, 0.35);
66
+ box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.15);
67
+ font-weight: 600;
68
+ }
69
+
70
+ .gv-sidebar-footer {
71
+ margin-top: auto;
72
+ padding: 10px 6px 6px;
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 6px;
76
+ }
77
+
78
+ .gv-pill {
79
+ display: inline-flex;
80
+ align-items: center;
81
+ width: fit-content;
82
+ padding: 4px 8px;
83
+ border-radius: 999px;
84
+ font-size: 12px;
85
+ background: rgba(255, 255, 255, 0.08);
86
+ }
87
+
88
+ .gv-muted {
89
+ font-size: 12px;
90
+ color: rgba(229, 231, 235, 0.65);
91
+ }
92
+
93
+ .gv-main {
94
+ display: grid;
95
+ grid-template-rows: 54px 1fr;
96
+ min-width: 0;
97
+ }
98
+
99
+ .gv-topbar {
100
+ background: var(--gv-surface);
101
+ border-bottom: 1px solid var(--gv-border);
102
+ padding: var(--gv-space-2) var(--gv-space-4);
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: space-between;
106
+ }
107
+
108
+ .gv-title {
109
+ font-weight: 800;
110
+ font-size: 13px;
111
+ color: var(--gv-text-strong);
112
+ line-height: 1.1;
113
+ }
114
+
115
+ .gv-subtitle {
116
+ font-size: 12px;
117
+ color: var(--gv-text-muted);
118
+ }
119
+
120
+ .gv-content {
121
+ padding: var(--gv-space-4);
122
+ background: var(--gv-bg-subtle);
123
+ }
124
+
125
+ .gv-panel {
126
+ background: var(--gv-surface);
127
+ border: 1px solid var(--gv-border);
128
+ border-radius: var(--gv-radius-lg);
129
+ box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
130
+ overflow: hidden;
131
+ position: relative;
132
+ }
133
+
134
+ .gv-panel::after {
135
+ content: '';
136
+ position: absolute;
137
+ top: 0;
138
+ left: 0;
139
+ right: 0;
140
+ height: 2px;
141
+ background: linear-gradient(
142
+ 90deg,
143
+ rgba(59,130,246,0.4),
144
+ rgba(59,130,246,0.1)
145
+ );
146
+ }
147
+
148
+ .gv-panel-header {
149
+ padding: var(--gv-space-3);
150
+ border-bottom: 1px solid var(--gv-border);
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: space-between;
154
+ }
155
+
156
+ .gv-panel-title {
157
+ font-weight: 700;
158
+ font-size: 12px;
159
+ letter-spacing: 0.06em;
160
+ text-transform: uppercase;
161
+ color: var(--gv-text-muted);
162
+ }
163
+
164
+ .gv-panel-body {
165
+ padding: var(--gv-space-3);
166
+ }
167
+
168
+ .gv-demo-row {
169
+ display: flex;
170
+ align-items: center;
171
+ gap: 12px;
172
+ padding: 8px 0;
173
+ }
@@ -0,0 +1,225 @@
1
+ /* =========================================
2
+ Gravitas Docs Theme (Final)
3
+ ========================================= */
4
+
5
+ .gv-doc-page {
6
+ color: var(--gv-text);
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 40px; /* 🔥 controls ALL vertical spacing */
10
+ }
11
+
12
+ /* ---------- Section Headings ---------- */
13
+
14
+ .gv-doc-page h2 {
15
+ margin: 0 0 14px;
16
+ padding-bottom: 8px;
17
+ color: var(--gv-text-strong);
18
+ border-bottom: 1px solid var(--gv-border);
19
+ }
20
+
21
+ .gv-doc-page > p {
22
+ margin: 0;
23
+ }
24
+
25
+ /* ---------- HERO ---------- */
26
+
27
+ .gv-doc-hero {
28
+ position: relative;
29
+ overflow: hidden;
30
+ padding: 36px;
31
+ border-radius: 24px;
32
+ background:
33
+ radial-gradient(
34
+ circle at 20% 18%,
35
+ color-mix(in srgb, var(--gv-text-inverse) 12%, transparent),
36
+ transparent 38%
37
+ ),
38
+ linear-gradient(
39
+ 135deg,
40
+ color-mix(in srgb, var(--gv-bg-deep) 82%, var(--gv-accent) 18%) 0%,
41
+ color-mix(in srgb, var(--gv-accent) 78%, var(--gv-bg-deep) 22%) 58%,
42
+ color-mix(in srgb, var(--gv-accent) 62%, var(--gv-surface) 38%) 100%
43
+ );
44
+ color: var(--gv-text-inverse);
45
+ box-shadow: var(--gv-shadow-lg);
46
+ border: 1px solid color-mix(in srgb, var(--gv-text-inverse) 10%, transparent);
47
+ }
48
+
49
+ /* 🔥 Force all hero text to be readable */
50
+ .gv-doc-hero * {
51
+ color: var(--gv-text-inverse) !important;
52
+ }
53
+
54
+ /* Glow effect */
55
+ .gv-doc-hero::after {
56
+ content: '';
57
+ position: absolute;
58
+ top: -64px;
59
+ right: -64px;
60
+ width: 240px;
61
+ height: 240px;
62
+ border-radius: 999px;
63
+ background: radial-gradient(
64
+ circle,
65
+ color-mix(in srgb, var(--gv-text-inverse) 16%, transparent),
66
+ transparent 70%
67
+ );
68
+ filter: blur(18px);
69
+ pointer-events: none;
70
+ }
71
+
72
+ /* ---------- HERO CONTENT ---------- */
73
+
74
+ .gv-doc-kicker {
75
+ display: inline-flex;
76
+ align-items: center;
77
+ margin-bottom: 18px;
78
+ padding: 8px 14px;
79
+ border-radius: 999px;
80
+ background: color-mix(in srgb, var(--gv-text-inverse) 14%, transparent);
81
+ font-size: 12px;
82
+ font-weight: 700;
83
+ letter-spacing: 0.08em;
84
+ text-transform: uppercase;
85
+ }
86
+
87
+ .gv-doc-hero-title {
88
+ margin: 0 0 14px;
89
+ max-width: 760px;
90
+ font-size: 42px;
91
+ line-height: 1.08;
92
+ font-weight: 800;
93
+ letter-spacing: -0.03em;
94
+ }
95
+
96
+ .gv-doc-hero-copy {
97
+ margin: 0;
98
+ max-width: 760px;
99
+ color: color-mix(in srgb, var(--gv-text-inverse) 90%, transparent) !important;
100
+ font-size: 17px;
101
+ line-height: 1.75;
102
+ }
103
+
104
+ .gv-doc-hero-rule {
105
+ width: 64px;
106
+ height: 3px;
107
+ margin-top: 22px;
108
+ border-radius: 999px;
109
+ background: color-mix(in srgb, var(--gv-text-inverse) 90%, transparent);
110
+ }
111
+
112
+ /* ---------- GRID (cards) ---------- */
113
+
114
+ .gv-doc-grid {
115
+ display: grid;
116
+ gap: 16px;
117
+ margin: 0; /* 🔥 spacing handled by parent */
118
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
119
+ }
120
+
121
+ .gv-doc-grid--wide {
122
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
123
+ }
124
+
125
+ /* ---------- CARDS ---------- */
126
+
127
+ .gv-doc-card {
128
+ padding: 20px;
129
+ border-radius: 18px;
130
+ background: var(--gv-surface);
131
+ border: 1px solid var(--gv-border);
132
+ box-shadow: var(--gv-shadow-sm);
133
+ }
134
+
135
+ .gv-doc-card--tinted {
136
+ background: color-mix(in srgb, var(--gv-surface) 90%, var(--gv-accent) 10%);
137
+ }
138
+
139
+ .gv-doc-card-title {
140
+ margin: 0 0 8px;
141
+ color: var(--gv-text-strong);
142
+ font-size: 16px;
143
+ font-weight: 700;
144
+ }
145
+
146
+ .gv-doc-card-copy {
147
+ margin: 0;
148
+ color: var(--gv-text-muted);
149
+ font-size: 14px;
150
+ line-height: 1.65;
151
+ }
152
+
153
+ /* ---------- CALLOUTS ---------- */
154
+
155
+ .gv-doc-callout-list {
156
+ display: grid;
157
+ gap: 14px;
158
+ margin: 0;
159
+ }
160
+
161
+ .gv-doc-callout {
162
+ padding: 18px 20px;
163
+ border-left: 4px solid var(--gv-accent);
164
+ border-radius: 14px;
165
+ background: var(--gv-surface);
166
+ border: 1px solid var(--gv-border);
167
+ box-shadow: var(--gv-shadow-sm);
168
+ }
169
+
170
+ .gv-doc-callout-title {
171
+ margin: 0 0 6px;
172
+ color: var(--gv-text-strong);
173
+ font-weight: 700;
174
+ }
175
+
176
+ .gv-doc-callout-copy {
177
+ margin: 0;
178
+ color: var(--gv-text-muted);
179
+ line-height: 1.65;
180
+ }
181
+
182
+ /* ---------- PANEL ---------- */
183
+
184
+ .gv-doc-panel {
185
+ padding: 24px;
186
+ border-radius: 20px;
187
+ background: var(--gv-surface);
188
+ border: 1px solid var(--gv-border);
189
+ box-shadow: var(--gv-shadow-sm);
190
+ }
191
+
192
+ /* ---------- TEXT ---------- */
193
+
194
+ .gv-doc-list {
195
+ margin: 0;
196
+ padding-left: 18px;
197
+ line-height: 1.85;
198
+ }
199
+
200
+ .gv-doc-section-copy {
201
+ margin: 0;
202
+ color: var(--gv-text-muted);
203
+ line-height: 1.75;
204
+ }
205
+
206
+ /* ---------- MOBILE ---------- */
207
+
208
+ @media (max-width: 768px) {
209
+ .gv-doc-page {
210
+ gap: 28px;
211
+ }
212
+
213
+ .gv-doc-hero {
214
+ padding: 28px;
215
+ border-radius: 20px;
216
+ }
217
+
218
+ .gv-doc-hero-title {
219
+ font-size: 32px;
220
+ }
221
+
222
+ .gv-doc-hero-copy {
223
+ font-size: 15px;
224
+ }
225
+ }
@@ -0,0 +1,3 @@
1
+ @import './gravitas.css';
2
+ @import './components.css';
3
+ @import './docs-theme.css';
@@ -0,0 +1,2 @@
1
+ @import './tokens.css';
2
+ @import './theme.css';
@@ -0,0 +1,54 @@
1
+ /* =========================================
2
+ Gravitas Theme — Bootstrap mapping + globals
3
+ ========================================= */
4
+
5
+ :root {
6
+ --bs-primary: var(--gv-accent);
7
+ --bs-primary-rgb: 59, 130, 246;
8
+
9
+ --bs-success: var(--gv-success);
10
+ --bs-success-rgb: 22, 163, 74;
11
+
12
+ --bs-warning: var(--gv-warning);
13
+ --bs-warning-rgb: 245, 158, 11;
14
+
15
+ --bs-danger: var(--gv-danger);
16
+ --bs-danger-rgb: 220, 38, 38;
17
+
18
+ --bs-info: var(--gv-info);
19
+ --bs-info-rgb: 14, 165, 233;
20
+
21
+ --bs-body-bg: var(--gv-bg-app);
22
+ --bs-body-color: var(--gv-text);
23
+
24
+ --bs-border-color: var(--gv-border);
25
+
26
+ --bs-link-color: var(--gv-accent);
27
+ --bs-link-hover-color: var(--gv-accent-hover);
28
+
29
+ --bs-border-radius: var(--gv-radius-md);
30
+ --bs-border-radius-sm: var(--gv-radius-sm);
31
+ --bs-border-radius-lg: var(--gv-radius-lg);
32
+ }
33
+
34
+ /* Let browsers style form controls properly in dark mode when you enable it */
35
+ :root[data-gv-theme="dark"] {
36
+ color-scheme: dark;
37
+ }
38
+
39
+ /* Global app feel */
40
+ html {
41
+ font-size: var(--gv-font-size);
42
+ line-height: var(--gv-line-height);
43
+ }
44
+
45
+ body {
46
+ background: var(--gv-bg-app);
47
+ color: var(--gv-text);
48
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
49
+ }
50
+
51
+ * {
52
+ -webkit-font-smoothing: antialiased;
53
+ -moz-osx-font-smoothing: grayscale;
54
+ }