@datum-cloud/datum-ui 0.2.0-alpha.7 → 0.2.0-alpha.8
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 +21 -10
- package/dist/grid/style.css +1080 -0
- package/dist/nprogress/nprogress.css +24 -0
- package/dist/styles/fonts.css +51 -0
- package/dist/styles/root.css +29 -0
- package/dist/styles/shadcn/animations.css +101 -0
- package/dist/styles/shadcn/shadcn.css +236 -0
- package/dist/styles/themes/alpha.css +568 -0
- package/dist/styles/tokens/figma-tokens.css +624 -0
- package/package.json +7 -7
- package/dist/styles.css +0 -6990
- package/dist/styles.mjs +0 -1
- /package/dist/{fonts → styles/fonts}/AllianceNo1-Medium.ttf +0 -0
- /package/dist/{fonts → styles/fonts}/AllianceNo1-Regular.ttf +0 -0
- /package/dist/{fonts → styles/fonts}/AllianceNo1-SemiBold.ttf +0 -0
- /package/dist/{fonts → styles/fonts}/FTRegolaNeue-Medium.woff2 +0 -0
- /package/dist/{fonts → styles/fonts}/FTRegolaNeue-Regular.woff2 +0 -0
- /package/dist/{fonts → styles/fonts}/FTRegolaNeue-Semibold.woff2 +0 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* NProgress styles
|
|
3
|
+
* Includes the base library styles and custom theme overrides
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* Import NProgress library styles */
|
|
7
|
+
@import 'nprogress/nprogress.css';
|
|
8
|
+
|
|
9
|
+
/* Custom theme overrides */
|
|
10
|
+
#nprogress .bar {
|
|
11
|
+
background: var(--color-primary);
|
|
12
|
+
height: 4px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
#nprogress .spinner-icon {
|
|
16
|
+
border-top-color: var(--color-primary);
|
|
17
|
+
border-left-color: var(--color-primary);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
#nprogress .peg {
|
|
21
|
+
box-shadow:
|
|
22
|
+
0 0 10px var(--color-primary),
|
|
23
|
+
0 0 5px var(--color-primary);
|
|
24
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/* FT Regola Neue Font Family */
|
|
2
|
+
|
|
3
|
+
@font-face {
|
|
4
|
+
font-family: 'FTRegolaNeue';
|
|
5
|
+
src: url('./fonts/FTRegolaNeue-Regular.woff2') format('woff2');
|
|
6
|
+
font-weight: 400;
|
|
7
|
+
font-style: normal;
|
|
8
|
+
font-display: swap;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@font-face {
|
|
12
|
+
font-family: 'FTRegolaNeue';
|
|
13
|
+
src: url('./fonts/FTRegolaNeue-Medium.woff2') format('woff2');
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-display: swap;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@font-face {
|
|
20
|
+
font-family: 'FTRegolaNeue';
|
|
21
|
+
src: url('./fonts/FTRegolaNeue-Semibold.woff2') format('woff2');
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
font-style: normal;
|
|
24
|
+
font-display: swap;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Alliance No1 Font Family */
|
|
28
|
+
|
|
29
|
+
@font-face {
|
|
30
|
+
font-family: 'Alliance No1';
|
|
31
|
+
src: url('./fonts/AllianceNo1-Regular.ttf') format('truetype');
|
|
32
|
+
font-weight: 400;
|
|
33
|
+
font-style: normal;
|
|
34
|
+
font-display: swap;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@font-face {
|
|
38
|
+
font-family: 'Alliance No1';
|
|
39
|
+
src: url('./fonts/AllianceNo1-Medium.ttf') format('truetype');
|
|
40
|
+
font-weight: 500;
|
|
41
|
+
font-style: normal;
|
|
42
|
+
font-display: swap;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@font-face {
|
|
46
|
+
font-family: 'Alliance No1';
|
|
47
|
+
src: url('./fonts/AllianceNo1-SemiBold.ttf') format('truetype');
|
|
48
|
+
font-weight: 600;
|
|
49
|
+
font-style: normal;
|
|
50
|
+
font-display: swap;
|
|
51
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* datum-ui core stylesheet.
|
|
3
|
+
*
|
|
4
|
+
* This file is shipped UNCOMPILED. The consumer's Tailwind CSS build
|
|
5
|
+
* processes @theme, @apply, @custom-variant, and @source directives.
|
|
6
|
+
*
|
|
7
|
+
* Requires Tailwind CSS v4.0.7+ (v4.2.1+ recommended).
|
|
8
|
+
*
|
|
9
|
+
* Usage in consumer's CSS:
|
|
10
|
+
* @import 'tailwindcss';
|
|
11
|
+
* @import '@datum-cloud/datum-ui/styles';
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/* Scan datum-ui's compiled JS for Tailwind class usage.
|
|
15
|
+
* Resolves relative to this file (dist/styles/root.css → dist/*.mjs) */
|
|
16
|
+
@source "../*.mjs";
|
|
17
|
+
|
|
18
|
+
@custom-variant dark (&:is(.dark *));
|
|
19
|
+
|
|
20
|
+
@import './fonts.css';
|
|
21
|
+
|
|
22
|
+
/* Figma design tokens — source of truth */
|
|
23
|
+
@import './tokens/figma-tokens.css';
|
|
24
|
+
|
|
25
|
+
/* Shadcn/ui base variables and component styles */
|
|
26
|
+
@import './shadcn/shadcn.css';
|
|
27
|
+
|
|
28
|
+
/* Theme overrides — always loaded after shadcn */
|
|
29
|
+
@import './themes/alpha.css';
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom animations for shadcn/ui components
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/* Popover animations */
|
|
6
|
+
.popover-content-width-full {
|
|
7
|
+
width: var(--radix-popover-trigger-width) !important;
|
|
8
|
+
max-height: var(--radix-popover-content-available-height) !important;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Tooltip animations */
|
|
12
|
+
.tooltip-content {
|
|
13
|
+
animation-duration: 0.6s;
|
|
14
|
+
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
15
|
+
}
|
|
16
|
+
.tooltip-content[data-side='top'] {
|
|
17
|
+
animation-name: slideUp;
|
|
18
|
+
}
|
|
19
|
+
.tooltip-content[data-side='bottom'] {
|
|
20
|
+
animation-name: slideDown;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes slideDown {
|
|
24
|
+
from {
|
|
25
|
+
opacity: 0;
|
|
26
|
+
transform: translateY(-10px);
|
|
27
|
+
}
|
|
28
|
+
to {
|
|
29
|
+
opacity: 1;
|
|
30
|
+
transform: translateY(0);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes slideUp {
|
|
35
|
+
from {
|
|
36
|
+
opacity: 0;
|
|
37
|
+
transform: translateY(10px);
|
|
38
|
+
}
|
|
39
|
+
to {
|
|
40
|
+
opacity: 1;
|
|
41
|
+
transform: translateY(0);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@keyframes spin-pause {
|
|
46
|
+
0% {
|
|
47
|
+
transform: rotate(0deg);
|
|
48
|
+
}
|
|
49
|
+
80% {
|
|
50
|
+
transform: rotate(360deg);
|
|
51
|
+
}
|
|
52
|
+
100% {
|
|
53
|
+
transform: rotate(360deg);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
.animate-spin-pause {
|
|
57
|
+
animation: spin-pause 1.2s linear infinite;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@keyframes collapsibleDown {
|
|
61
|
+
from {
|
|
62
|
+
height: 0;
|
|
63
|
+
}
|
|
64
|
+
to {
|
|
65
|
+
height: var(--radix-collapsible-content-height);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@keyframes collapsibleUp {
|
|
70
|
+
from {
|
|
71
|
+
height: var(--radix-collapsible-content-height);
|
|
72
|
+
}
|
|
73
|
+
to {
|
|
74
|
+
height: 0;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@layer utilities {
|
|
79
|
+
@keyframes ellipsis {
|
|
80
|
+
0% {
|
|
81
|
+
content: '.';
|
|
82
|
+
}
|
|
83
|
+
33% {
|
|
84
|
+
content: '..';
|
|
85
|
+
}
|
|
86
|
+
66% {
|
|
87
|
+
content: '...';
|
|
88
|
+
}
|
|
89
|
+
100% {
|
|
90
|
+
content: '.';
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.animate-collapsible-down {
|
|
95
|
+
animation: collapsibleDown 0.2s ease-out;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.animate-collapsible-up {
|
|
99
|
+
animation: collapsibleUp 0.2s ease-out;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shadcn Base Variables and Component Styles
|
|
3
|
+
* Minimal fallback CSS variables for shadcn/ui components
|
|
4
|
+
* These act as defaults if no theme is loaded
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@layer shadcn-base {
|
|
8
|
+
:root {
|
|
9
|
+
/* Sidebar sizing */
|
|
10
|
+
--sidebar-width: 14rem;
|
|
11
|
+
--sidebar-width-icon: 3rem;
|
|
12
|
+
--sidebar-width-mobile: 18rem;
|
|
13
|
+
|
|
14
|
+
/* Default radius */
|
|
15
|
+
--radius: 0.625rem;
|
|
16
|
+
|
|
17
|
+
/* Minimal color fallbacks using OKLCH */
|
|
18
|
+
--background: oklch(1 0 0);
|
|
19
|
+
--foreground: oklch(0.145 0 0);
|
|
20
|
+
--card: oklch(1 0 0);
|
|
21
|
+
--card-foreground: oklch(0.145 0 0);
|
|
22
|
+
--popover: oklch(1 0 0);
|
|
23
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
24
|
+
--primary: oklch(0.205 0 0);
|
|
25
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
26
|
+
--secondary: oklch(0.97 0 0);
|
|
27
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
28
|
+
--muted: oklch(0.97 0 0);
|
|
29
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
30
|
+
--accent: oklch(0.97 0 0);
|
|
31
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
32
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
33
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
34
|
+
--border: oklch(0.922 0 0);
|
|
35
|
+
--input: oklch(0.922 0 0);
|
|
36
|
+
--ring: oklch(0.708 0 0);
|
|
37
|
+
|
|
38
|
+
/* Chart colors */
|
|
39
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
40
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
41
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
42
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
43
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
44
|
+
|
|
45
|
+
/* Sidebar colors */
|
|
46
|
+
--sidebar: oklch(0.985 0 0);
|
|
47
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
48
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
49
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
50
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
51
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
52
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
53
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.dark {
|
|
57
|
+
--background: oklch(0.145 0 0);
|
|
58
|
+
--foreground: oklch(0.985 0 0);
|
|
59
|
+
--card: oklch(0.205 0 0);
|
|
60
|
+
--card-foreground: oklch(0.985 0 0);
|
|
61
|
+
--popover: oklch(0.205 0 0);
|
|
62
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
63
|
+
--primary: oklch(0.922 0 0);
|
|
64
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
65
|
+
--secondary: oklch(0.269 0 0);
|
|
66
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
67
|
+
--muted: oklch(0.269 0 0);
|
|
68
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
69
|
+
--accent: oklch(0.269 0 0);
|
|
70
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
71
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
72
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
73
|
+
--border: oklch(1 0 0 / 10%);
|
|
74
|
+
--input: oklch(1 0 0 / 15%);
|
|
75
|
+
--ring: oklch(0.556 0 0);
|
|
76
|
+
|
|
77
|
+
/* Chart colors - dark mode */
|
|
78
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
79
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
80
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
81
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
82
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
83
|
+
|
|
84
|
+
/* Sidebar colors - dark mode */
|
|
85
|
+
--sidebar: oklch(0.205 0 0);
|
|
86
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
87
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
88
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
89
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
90
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
91
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
92
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Tailwind theme integration */
|
|
96
|
+
@theme inline {
|
|
97
|
+
--color-sidebar: var(--sidebar);
|
|
98
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
99
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
100
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
101
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
102
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
103
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
104
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
105
|
+
--color-chart-5: var(--chart-5);
|
|
106
|
+
--color-chart-4: var(--chart-4);
|
|
107
|
+
--color-chart-3: var(--chart-3);
|
|
108
|
+
--color-chart-2: var(--chart-2);
|
|
109
|
+
--color-chart-1: var(--chart-1);
|
|
110
|
+
--color-ring: var(--ring);
|
|
111
|
+
--color-input: var(--input);
|
|
112
|
+
--color-border: var(--border);
|
|
113
|
+
--color-destructive: var(--destructive);
|
|
114
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
115
|
+
--color-accent: var(--accent);
|
|
116
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
117
|
+
--color-muted: var(--muted);
|
|
118
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
119
|
+
--color-secondary: var(--secondary);
|
|
120
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
121
|
+
--color-primary: var(--primary);
|
|
122
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
123
|
+
--color-popover: var(--popover);
|
|
124
|
+
--color-card-foreground: var(--card-foreground);
|
|
125
|
+
--color-card: var(--card);
|
|
126
|
+
--color-foreground: var(--foreground);
|
|
127
|
+
--color-background: var(--background);
|
|
128
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
129
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
130
|
+
--radius-lg: var(--radius);
|
|
131
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Component Styles
|
|
137
|
+
* Base styles for shadcn/ui components using CSS variables
|
|
138
|
+
*/
|
|
139
|
+
|
|
140
|
+
@theme {
|
|
141
|
+
--font-sans:
|
|
142
|
+
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
143
|
+
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
html,
|
|
147
|
+
body {
|
|
148
|
+
@apply dark:bg-gray-950;
|
|
149
|
+
|
|
150
|
+
@media (prefers-color-scheme: dark) {
|
|
151
|
+
color-scheme: dark;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@layer base {
|
|
156
|
+
* {
|
|
157
|
+
@apply border-border outline-ring/50;
|
|
158
|
+
scrollbar-width: thin;
|
|
159
|
+
scrollbar-color: var(--border) transparent;
|
|
160
|
+
}
|
|
161
|
+
html {
|
|
162
|
+
@apply overflow-x-hidden;
|
|
163
|
+
}
|
|
164
|
+
body {
|
|
165
|
+
@apply bg-background text-foreground min-h-svh w-full;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
button:not(:disabled),
|
|
169
|
+
[role='button']:not(:disabled) {
|
|
170
|
+
cursor: pointer;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Prevent focus zoom on mobile devices */
|
|
174
|
+
@media screen and (max-width: 767px) {
|
|
175
|
+
input,
|
|
176
|
+
select,
|
|
177
|
+
textarea {
|
|
178
|
+
font-size: 16px !important;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
.leaflet-container {
|
|
182
|
+
@apply !bg-card !font-[inherit];
|
|
183
|
+
}
|
|
184
|
+
.leaflet-container a {
|
|
185
|
+
@apply !text-inherit;
|
|
186
|
+
}
|
|
187
|
+
.leaflet-div-icon {
|
|
188
|
+
@apply !border-none !bg-transparent;
|
|
189
|
+
}
|
|
190
|
+
.leaflet-popup-content-wrapper,
|
|
191
|
+
.leaflet-popup-content,
|
|
192
|
+
.leaflet-popup-content p {
|
|
193
|
+
@apply ![all:unset];
|
|
194
|
+
}
|
|
195
|
+
.leaflet-popup {
|
|
196
|
+
@apply !animate-none;
|
|
197
|
+
}
|
|
198
|
+
.leaflet-popup-close-button {
|
|
199
|
+
@apply ring-offset-background focus:ring-ring bg-secondary rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-hidden;
|
|
200
|
+
}
|
|
201
|
+
.leaflet-tooltip,
|
|
202
|
+
.leaflet-draw-tooltip {
|
|
203
|
+
@apply !bg-foreground !text-background !animate-none !rounded-md !border-none !p-0 !px-3 !py-1.5 !shadow-none;
|
|
204
|
+
}
|
|
205
|
+
.leaflet-draw-tooltip:before {
|
|
206
|
+
@apply bg-foreground !top-1/2 !right-0.5 size-2.5 translate-x-1/2 -translate-y-1/2 rotate-45 rounded-[2px] !border-none;
|
|
207
|
+
}
|
|
208
|
+
.leaflet-error-draw-tooltip {
|
|
209
|
+
@apply !bg-destructive !text-white;
|
|
210
|
+
}
|
|
211
|
+
.leaflet-error-draw-tooltip:before {
|
|
212
|
+
@apply bg-destructive;
|
|
213
|
+
}
|
|
214
|
+
.leaflet-draw-tooltip-subtext {
|
|
215
|
+
@apply !text-background;
|
|
216
|
+
}
|
|
217
|
+
.leaflet-popup-tip-container,
|
|
218
|
+
.leaflet-tooltip-top:before,
|
|
219
|
+
.leaflet-tooltip-bottom:before,
|
|
220
|
+
.leaflet-tooltip-left:before,
|
|
221
|
+
.leaflet-tooltip-right:before {
|
|
222
|
+
@apply hidden;
|
|
223
|
+
}
|
|
224
|
+
.leaflet-control-attribution {
|
|
225
|
+
@apply !bg-muted rounded-md !px-[4px] !py-[2px] text-[10px] !leading-none !text-inherit;
|
|
226
|
+
}
|
|
227
|
+
.leaflet-draw-guide-dash {
|
|
228
|
+
@apply rounded-full;
|
|
229
|
+
}
|
|
230
|
+
.leaflet-edit-marker-selected {
|
|
231
|
+
@apply !border-transparent !bg-transparent;
|
|
232
|
+
}
|
|
233
|
+
.marker-cluster div {
|
|
234
|
+
@apply font-[inherit];
|
|
235
|
+
}
|
|
236
|
+
}
|