@datalayer/core 1.0.1 → 1.0.3
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 -1
- package/lib/api/constants.d.ts +3 -0
- package/lib/api/constants.js +3 -0
- package/lib/api/index.d.ts +1 -0
- package/lib/api/index.js +1 -0
- package/lib/api/otel/index.d.ts +12 -0
- package/lib/api/otel/index.js +16 -0
- package/lib/api/otel/logs.d.ts +19 -0
- package/lib/api/otel/logs.js +43 -0
- package/lib/api/otel/metrics.d.ts +31 -0
- package/lib/api/otel/metrics.js +65 -0
- package/lib/api/otel/query.d.ts +16 -0
- package/lib/api/otel/query.js +37 -0
- package/lib/api/otel/services.d.ts +39 -0
- package/lib/api/otel/services.js +81 -0
- package/lib/api/otel/traces.d.ts +24 -0
- package/lib/api/otel/traces.js +53 -0
- package/lib/api/otel/types.d.ts +112 -0
- package/lib/api/otel/types.js +5 -0
- package/lib/api/spacer/index.d.ts +1 -2
- package/lib/api/spacer/index.js +1 -2
- package/lib/components/avatars/BoringAvatar.d.ts +3 -1
- package/lib/components/avatars/BoringAvatar.js +15 -14
- package/lib/components/avatars/BoringAvatar.stories.d.ts +2 -1
- package/lib/components/storage/ContentsBrowser.d.ts +6 -0
- package/lib/components/storage/ContentsBrowser.js +7 -8
- package/lib/config/Configuration.d.ts +4 -0
- package/lib/hooks/index.d.ts +2 -0
- package/lib/hooks/index.js +2 -0
- package/lib/hooks/useCache.d.ts +16 -40
- package/lib/hooks/useCache.js +28 -233
- package/lib/hooks/useProjectStore.d.ts +58 -0
- package/lib/hooks/useProjectStore.js +64 -0
- package/lib/hooks/useProjects.d.ts +590 -0
- package/lib/hooks/useProjects.js +166 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.js +4 -2
- package/lib/models/Page.d.ts +2 -0
- package/lib/otel/OtelLive.d.ts +12 -0
- package/lib/otel/OtelLive.js +354 -0
- package/lib/otel/OtelLogsList.d.ts +11 -0
- package/lib/otel/OtelLogsList.js +137 -0
- package/lib/otel/OtelMetricsChart.d.ts +22 -0
- package/lib/otel/OtelMetricsChart.js +300 -0
- package/lib/otel/OtelMetricsList.d.ts +15 -0
- package/lib/otel/OtelMetricsList.js +213 -0
- package/lib/otel/OtelSearchBar.d.ts +11 -0
- package/lib/otel/OtelSearchBar.js +22 -0
- package/lib/otel/OtelSpanDetail.d.ts +11 -0
- package/lib/otel/OtelSpanDetail.js +172 -0
- package/lib/otel/OtelSpanTree.d.ts +11 -0
- package/lib/otel/OtelSpanTree.js +176 -0
- package/lib/otel/OtelSqlView.d.ts +16 -0
- package/lib/otel/OtelSqlView.js +239 -0
- package/lib/otel/OtelSystemView.d.ts +15 -0
- package/lib/otel/OtelSystemView.js +75 -0
- package/lib/otel/OtelTimeline.d.ts +11 -0
- package/lib/otel/OtelTimeline.js +101 -0
- package/lib/otel/OtelTimelineRangeSlider.d.ts +16 -0
- package/lib/otel/OtelTimelineRangeSlider.js +338 -0
- package/lib/otel/OtelTracesList.d.ts +13 -0
- package/lib/otel/OtelTracesList.js +199 -0
- package/lib/otel/hooks.d.ts +172 -0
- package/lib/otel/hooks.js +490 -0
- package/lib/otel/index.d.ts +25 -0
- package/lib/otel/index.js +19 -0
- package/lib/otel/types.d.ts +190 -0
- package/lib/otel/types.js +5 -0
- package/lib/otel/utils.d.ts +33 -0
- package/lib/otel/utils.js +181 -0
- package/lib/state/storage/IAMStorage.d.ts +2 -1
- package/lib/state/substates/CoreState.js +1 -0
- package/lib/utils/Jwt.d.ts +42 -0
- package/lib/utils/Jwt.js +44 -0
- package/lib/utils/index.d.ts +1 -0
- package/lib/utils/index.js +1 -0
- package/lib/views/iam/SignInSimple.d.ts +38 -0
- package/lib/views/iam/SignInSimple.js +80 -0
- package/lib/views/iam/index.d.ts +2 -0
- package/lib/views/iam/index.js +5 -0
- package/lib/views/iam-tokens/IAMTokenEdit.js +53 -4
- package/lib/views/iam-tokens/IAMTokens.js +65 -33
- package/lib/views/iam-tokens/Tokens.js +64 -32
- package/lib/views/index.d.ts +2 -1
- package/lib/views/index.js +2 -1
- package/lib/views/profile/UserBadge.d.ts +18 -0
- package/lib/views/profile/UserBadge.js +101 -0
- package/lib/views/profile/index.d.ts +2 -0
- package/lib/views/profile/index.js +5 -0
- package/lib/views/secrets/Secrets.js +1 -1
- package/package.json +27 -3
- package/lib/api/spacer/agentSpaces.d.ts +0 -193
- package/lib/api/spacer/agentSpaces.js +0 -127
- package/lib/theme/DatalayerTheme.d.ts +0 -52
- package/lib/theme/DatalayerTheme.js +0 -228
- package/lib/theme/DatalayerThemeProvider.d.ts +0 -29
- package/lib/theme/DatalayerThemeProvider.js +0 -54
- package/lib/theme/Palette.d.ts +0 -4
- package/lib/theme/Palette.js +0 -10
- package/lib/theme/index.d.ts +0 -4
- package/lib/theme/index.js +0 -8
- package/lib/theme/useSystemColorMode.d.ts +0 -9
- package/lib/theme/useSystemColorMode.js +0 -26
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* MCP Server tool configuration
|
|
3
|
-
*/
|
|
4
|
-
export interface MCPServerTool {
|
|
5
|
-
name: string;
|
|
6
|
-
description: string;
|
|
7
|
-
enabled: boolean;
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* MCP Server configuration
|
|
11
|
-
*/
|
|
12
|
-
export interface MCPServer {
|
|
13
|
-
id: string;
|
|
14
|
-
name: string;
|
|
15
|
-
url?: string;
|
|
16
|
-
enabled: boolean;
|
|
17
|
-
tools: MCPServerTool[];
|
|
18
|
-
command?: string;
|
|
19
|
-
args: string[];
|
|
20
|
-
isAvailable: boolean;
|
|
21
|
-
transport: 'stdio' | 'http';
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Agent skill configuration
|
|
25
|
-
*/
|
|
26
|
-
export interface AgentSkill {
|
|
27
|
-
id: string;
|
|
28
|
-
name: string;
|
|
29
|
-
description: string;
|
|
30
|
-
version: string;
|
|
31
|
-
tags: string[];
|
|
32
|
-
enabled: boolean;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Agent specification model
|
|
36
|
-
*/
|
|
37
|
-
export interface AgentSpec {
|
|
38
|
-
id: string;
|
|
39
|
-
name: string;
|
|
40
|
-
description: string;
|
|
41
|
-
tags: string[];
|
|
42
|
-
enabled: boolean;
|
|
43
|
-
mcpServers: MCPServer[];
|
|
44
|
-
skills: AgentSkill[];
|
|
45
|
-
environmentName: string;
|
|
46
|
-
icon?: string;
|
|
47
|
-
color?: string;
|
|
48
|
-
/** Chat suggestions to show users what this agent can do */
|
|
49
|
-
suggestions?: string[];
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Agent space status
|
|
53
|
-
*/
|
|
54
|
-
export type AgentSpaceStatus = 'starting' | 'running' | 'paused' | 'terminated' | 'archived';
|
|
55
|
-
/**
|
|
56
|
-
* Agent space data
|
|
57
|
-
*/
|
|
58
|
-
export interface AgentSpaceData {
|
|
59
|
-
id: string;
|
|
60
|
-
name: string;
|
|
61
|
-
description: string;
|
|
62
|
-
status: AgentSpaceStatus;
|
|
63
|
-
isPublic: boolean;
|
|
64
|
-
tags: string[];
|
|
65
|
-
messageCount: number;
|
|
66
|
-
createdAt?: string;
|
|
67
|
-
updatedAt?: string;
|
|
68
|
-
thumbnail?: string;
|
|
69
|
-
lastMessage?: string;
|
|
70
|
-
author?: string;
|
|
71
|
-
avatarUrl?: string;
|
|
72
|
-
stars?: number;
|
|
73
|
-
podName?: string;
|
|
74
|
-
runtimeUrl?: string;
|
|
75
|
-
creatorUid?: string;
|
|
76
|
-
creatorHandle?: string;
|
|
77
|
-
agentSpec?: AgentSpec;
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* Request to create an agent space
|
|
81
|
-
*/
|
|
82
|
-
export interface CreateAgentSpaceRequest {
|
|
83
|
-
/** Name of the agent space */
|
|
84
|
-
name: string;
|
|
85
|
-
/** Parent space ID */
|
|
86
|
-
spaceId: string;
|
|
87
|
-
/** Description */
|
|
88
|
-
description?: string;
|
|
89
|
-
/** Tags for categorization */
|
|
90
|
-
tags?: string[];
|
|
91
|
-
/** Initial status */
|
|
92
|
-
status?: AgentSpaceStatus;
|
|
93
|
-
/** Whether publicly visible */
|
|
94
|
-
isPublic?: boolean;
|
|
95
|
-
/** Agent specification */
|
|
96
|
-
agentSpec?: AgentSpec;
|
|
97
|
-
/** Thumbnail URL */
|
|
98
|
-
thumbnail?: string;
|
|
99
|
-
}
|
|
100
|
-
/**
|
|
101
|
-
* Request to update an agent space
|
|
102
|
-
*/
|
|
103
|
-
export interface UpdateAgentSpaceRequest {
|
|
104
|
-
name?: string;
|
|
105
|
-
description?: string;
|
|
106
|
-
tags?: string[];
|
|
107
|
-
status?: AgentSpaceStatus;
|
|
108
|
-
isPublic?: boolean;
|
|
109
|
-
agentSpec?: AgentSpec;
|
|
110
|
-
podName?: string;
|
|
111
|
-
runtimeUrl?: string;
|
|
112
|
-
messageCount?: number;
|
|
113
|
-
lastMessage?: string;
|
|
114
|
-
thumbnail?: string;
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Response for single agent space operations
|
|
118
|
-
*/
|
|
119
|
-
export interface AgentSpaceResponse {
|
|
120
|
-
success: boolean;
|
|
121
|
-
message: string;
|
|
122
|
-
agentSpace?: AgentSpaceData;
|
|
123
|
-
}
|
|
124
|
-
/**
|
|
125
|
-
* Response for listing agent spaces
|
|
126
|
-
*/
|
|
127
|
-
export interface AgentSpacesResponse {
|
|
128
|
-
success: boolean;
|
|
129
|
-
message: string;
|
|
130
|
-
agentSpaces?: AgentSpaceData[];
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* Create a new agent space.
|
|
134
|
-
* @param token - Authentication token
|
|
135
|
-
* @param data - Agent space creation configuration
|
|
136
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
137
|
-
* @returns Promise resolving to the created agent space response
|
|
138
|
-
*/
|
|
139
|
-
export declare const createAgentSpace: (token: string, data: CreateAgentSpaceRequest, baseUrl?: string) => Promise<AgentSpaceResponse>;
|
|
140
|
-
/**
|
|
141
|
-
* List agent spaces for the current user.
|
|
142
|
-
* @param token - Authentication token
|
|
143
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
144
|
-
* @returns Promise resolving to the list of agent spaces
|
|
145
|
-
*/
|
|
146
|
-
export declare const listAgentSpaces: (token: string, baseUrl?: string) => Promise<AgentSpacesResponse>;
|
|
147
|
-
/**
|
|
148
|
-
* List all public agent spaces (Library).
|
|
149
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
150
|
-
* @returns Promise resolving to the list of public agent spaces
|
|
151
|
-
*/
|
|
152
|
-
export declare const listPublicAgentSpaces: (baseUrl?: string) => Promise<AgentSpacesResponse>;
|
|
153
|
-
/**
|
|
154
|
-
* Get an agent space by UID.
|
|
155
|
-
* @param token - Authentication token
|
|
156
|
-
* @param uid - The agent space UID
|
|
157
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
158
|
-
* @returns Promise resolving to the agent space
|
|
159
|
-
*/
|
|
160
|
-
export declare const getAgentSpace: (token: string, uid: string, baseUrl?: string) => Promise<AgentSpaceResponse>;
|
|
161
|
-
/**
|
|
162
|
-
* Update an agent space.
|
|
163
|
-
* @param token - Authentication token
|
|
164
|
-
* @param uid - The agent space UID
|
|
165
|
-
* @param data - Update data
|
|
166
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
167
|
-
* @returns Promise resolving to the updated agent space
|
|
168
|
-
*/
|
|
169
|
-
export declare const updateAgentSpace: (token: string, uid: string, data: UpdateAgentSpaceRequest, baseUrl?: string) => Promise<AgentSpaceResponse>;
|
|
170
|
-
/**
|
|
171
|
-
* Delete an agent space.
|
|
172
|
-
* @param token - Authentication token
|
|
173
|
-
* @param uid - The agent space UID
|
|
174
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
175
|
-
* @returns Promise resolving when deleted
|
|
176
|
-
*/
|
|
177
|
-
export declare const deleteAgentSpace: (token: string, uid: string, baseUrl?: string) => Promise<void>;
|
|
178
|
-
/**
|
|
179
|
-
* Make an agent space public (add to Library).
|
|
180
|
-
* @param token - Authentication token
|
|
181
|
-
* @param uid - The agent space UID
|
|
182
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
183
|
-
* @returns Promise resolving to the updated agent space
|
|
184
|
-
*/
|
|
185
|
-
export declare const makeAgentSpacePublic: (token: string, uid: string, baseUrl?: string) => Promise<AgentSpaceResponse>;
|
|
186
|
-
/**
|
|
187
|
-
* Make an agent space private (remove from Library).
|
|
188
|
-
* @param token - Authentication token
|
|
189
|
-
* @param uid - The agent space UID
|
|
190
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
191
|
-
* @returns Promise resolving to the updated agent space
|
|
192
|
-
*/
|
|
193
|
-
export declare const makeAgentSpacePrivate: (token: string, uid: string, baseUrl?: string) => Promise<AgentSpaceResponse>;
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2023-2025 Datalayer, Inc.
|
|
3
|
-
* Distributed under the terms of the Modified BSD License.
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* Agent Spaces API functions for the Datalayer platform.
|
|
7
|
-
*
|
|
8
|
-
* Provides functions for creating, listing, updating, and deleting agent spaces.
|
|
9
|
-
*
|
|
10
|
-
* @module api/spacer/agent-spaces
|
|
11
|
-
*/
|
|
12
|
-
import { requestDatalayerAPI } from '../DatalayerApi';
|
|
13
|
-
import { API_BASE_PATHS, DEFAULT_SERVICE_URLS } from '../constants';
|
|
14
|
-
// =============================================================================
|
|
15
|
-
// API Functions
|
|
16
|
-
// =============================================================================
|
|
17
|
-
/**
|
|
18
|
-
* Create a new agent space.
|
|
19
|
-
* @param token - Authentication token
|
|
20
|
-
* @param data - Agent space creation configuration
|
|
21
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
22
|
-
* @returns Promise resolving to the created agent space response
|
|
23
|
-
*/
|
|
24
|
-
export const createAgentSpace = async (token, data, baseUrl = DEFAULT_SERVICE_URLS.SPACER) => {
|
|
25
|
-
return requestDatalayerAPI({
|
|
26
|
-
url: `${baseUrl}${API_BASE_PATHS.SPACER}/agent-spaces`,
|
|
27
|
-
method: 'POST',
|
|
28
|
-
token,
|
|
29
|
-
body: data,
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
/**
|
|
33
|
-
* List agent spaces for the current user.
|
|
34
|
-
* @param token - Authentication token
|
|
35
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
36
|
-
* @returns Promise resolving to the list of agent spaces
|
|
37
|
-
*/
|
|
38
|
-
export const listAgentSpaces = async (token, baseUrl = DEFAULT_SERVICE_URLS.SPACER) => {
|
|
39
|
-
return requestDatalayerAPI({
|
|
40
|
-
url: `${baseUrl}${API_BASE_PATHS.SPACER}/agent-spaces`,
|
|
41
|
-
method: 'GET',
|
|
42
|
-
token,
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
/**
|
|
46
|
-
* List all public agent spaces (Library).
|
|
47
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
48
|
-
* @returns Promise resolving to the list of public agent spaces
|
|
49
|
-
*/
|
|
50
|
-
export const listPublicAgentSpaces = async (baseUrl = DEFAULT_SERVICE_URLS.SPACER) => {
|
|
51
|
-
return requestDatalayerAPI({
|
|
52
|
-
url: `${baseUrl}${API_BASE_PATHS.SPACER}/agent-spaces/public`,
|
|
53
|
-
method: 'GET',
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
/**
|
|
57
|
-
* Get an agent space by UID.
|
|
58
|
-
* @param token - Authentication token
|
|
59
|
-
* @param uid - The agent space UID
|
|
60
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
61
|
-
* @returns Promise resolving to the agent space
|
|
62
|
-
*/
|
|
63
|
-
export const getAgentSpace = async (token, uid, baseUrl = DEFAULT_SERVICE_URLS.SPACER) => {
|
|
64
|
-
return requestDatalayerAPI({
|
|
65
|
-
url: `${baseUrl}${API_BASE_PATHS.SPACER}/agent-spaces/${uid}`,
|
|
66
|
-
method: 'GET',
|
|
67
|
-
token,
|
|
68
|
-
});
|
|
69
|
-
};
|
|
70
|
-
/**
|
|
71
|
-
* Update an agent space.
|
|
72
|
-
* @param token - Authentication token
|
|
73
|
-
* @param uid - The agent space UID
|
|
74
|
-
* @param data - Update data
|
|
75
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
76
|
-
* @returns Promise resolving to the updated agent space
|
|
77
|
-
*/
|
|
78
|
-
export const updateAgentSpace = async (token, uid, data, baseUrl = DEFAULT_SERVICE_URLS.SPACER) => {
|
|
79
|
-
return requestDatalayerAPI({
|
|
80
|
-
url: `${baseUrl}${API_BASE_PATHS.SPACER}/agent-spaces/${uid}`,
|
|
81
|
-
method: 'PUT',
|
|
82
|
-
token,
|
|
83
|
-
body: data,
|
|
84
|
-
});
|
|
85
|
-
};
|
|
86
|
-
/**
|
|
87
|
-
* Delete an agent space.
|
|
88
|
-
* @param token - Authentication token
|
|
89
|
-
* @param uid - The agent space UID
|
|
90
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
91
|
-
* @returns Promise resolving when deleted
|
|
92
|
-
*/
|
|
93
|
-
export const deleteAgentSpace = async (token, uid, baseUrl = DEFAULT_SERVICE_URLS.SPACER) => {
|
|
94
|
-
await requestDatalayerAPI({
|
|
95
|
-
url: `${baseUrl}${API_BASE_PATHS.SPACER}/agent-spaces/${uid}`,
|
|
96
|
-
method: 'DELETE',
|
|
97
|
-
token,
|
|
98
|
-
});
|
|
99
|
-
};
|
|
100
|
-
/**
|
|
101
|
-
* Make an agent space public (add to Library).
|
|
102
|
-
* @param token - Authentication token
|
|
103
|
-
* @param uid - The agent space UID
|
|
104
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
105
|
-
* @returns Promise resolving to the updated agent space
|
|
106
|
-
*/
|
|
107
|
-
export const makeAgentSpacePublic = async (token, uid, baseUrl = DEFAULT_SERVICE_URLS.SPACER) => {
|
|
108
|
-
return requestDatalayerAPI({
|
|
109
|
-
url: `${baseUrl}${API_BASE_PATHS.SPACER}/agent-spaces/${uid}/public`,
|
|
110
|
-
method: 'POST',
|
|
111
|
-
token,
|
|
112
|
-
});
|
|
113
|
-
};
|
|
114
|
-
/**
|
|
115
|
-
* Make an agent space private (remove from Library).
|
|
116
|
-
* @param token - Authentication token
|
|
117
|
-
* @param uid - The agent space UID
|
|
118
|
-
* @param baseUrl - Base URL for the API (defaults to production)
|
|
119
|
-
* @returns Promise resolving to the updated agent space
|
|
120
|
-
*/
|
|
121
|
-
export const makeAgentSpacePrivate = async (token, uid, baseUrl = DEFAULT_SERVICE_URLS.SPACER) => {
|
|
122
|
-
return requestDatalayerAPI({
|
|
123
|
-
url: `${baseUrl}${API_BASE_PATHS.SPACER}/agent-spaces/${uid}/private`,
|
|
124
|
-
method: 'POST',
|
|
125
|
-
token,
|
|
126
|
-
});
|
|
127
|
-
};
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Datalayer Accessible Color System
|
|
3
|
-
* Based on Datalayer's brand manual - WCAG AA/AAA compliant
|
|
4
|
-
*/
|
|
5
|
-
export declare const datalayerColors: {
|
|
6
|
-
black: string;
|
|
7
|
-
gray: string;
|
|
8
|
-
white: string;
|
|
9
|
-
greenBrand: string;
|
|
10
|
-
greenAccent: string;
|
|
11
|
-
greenText: string;
|
|
12
|
-
greenTint: string;
|
|
13
|
-
greenBright: string;
|
|
14
|
-
greenHover: string;
|
|
15
|
-
};
|
|
16
|
-
export declare const datalayerTheme: {
|
|
17
|
-
animation: {
|
|
18
|
-
easeOutCubic: string;
|
|
19
|
-
};
|
|
20
|
-
borderWidths: (string | number)[];
|
|
21
|
-
breakpoints: string[];
|
|
22
|
-
fonts: {
|
|
23
|
-
normal: any;
|
|
24
|
-
mono: string;
|
|
25
|
-
};
|
|
26
|
-
fontSizes: string[];
|
|
27
|
-
fontWeights: {
|
|
28
|
-
light: number;
|
|
29
|
-
normal: number;
|
|
30
|
-
semibold: number;
|
|
31
|
-
bold: number;
|
|
32
|
-
};
|
|
33
|
-
lineHeights: {
|
|
34
|
-
condensedUltra: number;
|
|
35
|
-
condensed: number;
|
|
36
|
-
default: number;
|
|
37
|
-
};
|
|
38
|
-
radii: string[];
|
|
39
|
-
sizes: {
|
|
40
|
-
small: string;
|
|
41
|
-
medium: string;
|
|
42
|
-
large: string;
|
|
43
|
-
xlarge: string;
|
|
44
|
-
};
|
|
45
|
-
space: string[];
|
|
46
|
-
} & {
|
|
47
|
-
colorSchemes: {
|
|
48
|
-
light: {};
|
|
49
|
-
dark: {};
|
|
50
|
-
};
|
|
51
|
-
};
|
|
52
|
-
export default datalayerTheme;
|
|
@@ -1,228 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2023-2025 Datalayer, Inc.
|
|
3
|
-
* Distributed under the terms of the Modified BSD License.
|
|
4
|
-
*/
|
|
5
|
-
import { theme as primerTheme } from '@primer/react';
|
|
6
|
-
import cloneDeep from 'lodash/cloneDeep.js';
|
|
7
|
-
import merge from 'lodash/merge.js';
|
|
8
|
-
/**
|
|
9
|
-
* Datalayer Accessible Color System
|
|
10
|
-
* Based on Datalayer's brand manual - WCAG AA/AAA compliant
|
|
11
|
-
*/
|
|
12
|
-
export const datalayerColors = {
|
|
13
|
-
// Core Neutrals
|
|
14
|
-
black: '#000000', // Primary text - AAA on white
|
|
15
|
-
gray: '#59595C', // Secondary text - AA on white
|
|
16
|
-
white: '#FFFFFF', // Background
|
|
17
|
-
// Greens (Brand & Accessibility)
|
|
18
|
-
greenBrand: '#16A085', // Brand accent, icons, dividers, headings
|
|
19
|
-
greenAccent: '#1ABC9C', // Icons, charts, highlights on dark surfaces
|
|
20
|
-
greenText: '#117A65', // Accessible green for text & buttons (AA+ on white)
|
|
21
|
-
greenTint: '#E9F7F1', // Soft background for success / callouts
|
|
22
|
-
greenBright: '#2ECC71', // Highlights and glow on dark backgrounds
|
|
23
|
-
greenHover: '#0E6655', // Primary button hover
|
|
24
|
-
};
|
|
25
|
-
/**
|
|
26
|
-
* Datalayer Theme for Primer React.
|
|
27
|
-
*
|
|
28
|
-
* Uses accessible color palette from Datalayer's brand manual.
|
|
29
|
-
*/
|
|
30
|
-
const datalayerThemeDefs = {
|
|
31
|
-
colorSchemes: {
|
|
32
|
-
light: {
|
|
33
|
-
colors: {
|
|
34
|
-
// Canvas colors
|
|
35
|
-
canvas: {
|
|
36
|
-
default: datalayerColors.white,
|
|
37
|
-
// subtle: datalayerColors.greenTint,
|
|
38
|
-
},
|
|
39
|
-
// Foreground colors
|
|
40
|
-
fg: {
|
|
41
|
-
default: datalayerColors.black,
|
|
42
|
-
muted: datalayerColors.gray,
|
|
43
|
-
onEmphasis: datalayerColors.white,
|
|
44
|
-
},
|
|
45
|
-
// Accent colors (brand green)
|
|
46
|
-
accent: {
|
|
47
|
-
fg: datalayerColors.greenText,
|
|
48
|
-
emphasis: datalayerColors.greenBrand,
|
|
49
|
-
muted: datalayerColors.greenAccent,
|
|
50
|
-
// subtle: datalayerColors.greenTint,
|
|
51
|
-
},
|
|
52
|
-
// Success colors (green)
|
|
53
|
-
success: {
|
|
54
|
-
fg: datalayerColors.greenText,
|
|
55
|
-
emphasis: datalayerColors.greenBrand,
|
|
56
|
-
muted: datalayerColors.greenAccent,
|
|
57
|
-
// subtle: datalayerColors.greenTint,
|
|
58
|
-
},
|
|
59
|
-
// Button colors
|
|
60
|
-
btn: {
|
|
61
|
-
text: datalayerColors.black,
|
|
62
|
-
bg: datalayerColors.white,
|
|
63
|
-
border: datalayerColors.gray,
|
|
64
|
-
hoverBg: datalayerColors.greenTint,
|
|
65
|
-
hoverBorder: datalayerColors.gray,
|
|
66
|
-
activeBg: datalayerColors.greenTint,
|
|
67
|
-
activeBorder: datalayerColors.gray,
|
|
68
|
-
selectedBg: datalayerColors.white,
|
|
69
|
-
counterBg: datalayerColors.gray,
|
|
70
|
-
primary: {
|
|
71
|
-
text: datalayerColors.white,
|
|
72
|
-
bg: datalayerColors.greenText,
|
|
73
|
-
border: datalayerColors.greenText,
|
|
74
|
-
hoverBg: datalayerColors.greenHover,
|
|
75
|
-
hoverBorder: datalayerColors.greenHover,
|
|
76
|
-
selectedBg: datalayerColors.greenHover,
|
|
77
|
-
disabledText: 'rgba(255, 255, 255, 0.8)',
|
|
78
|
-
disabledBg: '#94C9B9',
|
|
79
|
-
disabledBorder: '#94C9B9',
|
|
80
|
-
icon: datalayerColors.white,
|
|
81
|
-
counterBg: 'rgba(0, 0, 0, 0.2)',
|
|
82
|
-
},
|
|
83
|
-
outline: {
|
|
84
|
-
text: datalayerColors.greenText,
|
|
85
|
-
hoverText: datalayerColors.white,
|
|
86
|
-
hoverBg: datalayerColors.greenText,
|
|
87
|
-
hoverBorder: datalayerColors.greenText,
|
|
88
|
-
hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
|
|
89
|
-
selectedText: datalayerColors.white,
|
|
90
|
-
selectedBg: datalayerColors.greenHover,
|
|
91
|
-
selectedBorder: datalayerColors.greenHover,
|
|
92
|
-
disabledText: datalayerColors.gray,
|
|
93
|
-
disabledBg: datalayerColors.greenTint,
|
|
94
|
-
disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
|
|
95
|
-
counterBg: 'rgba(0, 0, 0, 0.05)',
|
|
96
|
-
counterFg: datalayerColors.greenText,
|
|
97
|
-
hoverCounterFg: datalayerColors.white,
|
|
98
|
-
disabledCounterFg: datalayerColors.gray,
|
|
99
|
-
},
|
|
100
|
-
danger: {
|
|
101
|
-
text: '#d32f2f',
|
|
102
|
-
hoverText: datalayerColors.white,
|
|
103
|
-
hoverBg: '#d32f2f',
|
|
104
|
-
hoverBorder: '#d32f2f',
|
|
105
|
-
hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
|
|
106
|
-
selectedText: datalayerColors.white,
|
|
107
|
-
selectedBg: '#b71c1c',
|
|
108
|
-
selectedBorder: '#b71c1c',
|
|
109
|
-
disabledText: 'rgba(211, 47, 47, 0.5)',
|
|
110
|
-
disabledBg: datalayerColors.greenTint,
|
|
111
|
-
disabledCounterBg: 'rgba(211, 47, 47, 0.05)',
|
|
112
|
-
counterBg: 'rgba(211, 47, 47, 0.1)',
|
|
113
|
-
counterFg: '#d32f2f',
|
|
114
|
-
hoverCounterFg: datalayerColors.white,
|
|
115
|
-
disabledCounterFg: 'rgba(211, 47, 47, 0.5)',
|
|
116
|
-
icon: '#d32f2f',
|
|
117
|
-
},
|
|
118
|
-
},
|
|
119
|
-
},
|
|
120
|
-
shadows: {},
|
|
121
|
-
},
|
|
122
|
-
dark: {
|
|
123
|
-
colors: {
|
|
124
|
-
// Canvas colors
|
|
125
|
-
canvas: {
|
|
126
|
-
default: datalayerColors.black,
|
|
127
|
-
subtle: '#0d1117',
|
|
128
|
-
},
|
|
129
|
-
// Foreground colors
|
|
130
|
-
fg: {
|
|
131
|
-
default: datalayerColors.white,
|
|
132
|
-
muted: '#8b949e',
|
|
133
|
-
onEmphasis: datalayerColors.white,
|
|
134
|
-
},
|
|
135
|
-
// Accent colors (bright greens for dark mode)
|
|
136
|
-
accent: {
|
|
137
|
-
fg: datalayerColors.greenAccent,
|
|
138
|
-
emphasis: datalayerColors.greenBright,
|
|
139
|
-
muted: datalayerColors.greenBrand,
|
|
140
|
-
subtle: '#1f352d',
|
|
141
|
-
},
|
|
142
|
-
// Success colors
|
|
143
|
-
success: {
|
|
144
|
-
fg: datalayerColors.greenAccent,
|
|
145
|
-
emphasis: datalayerColors.greenBright,
|
|
146
|
-
muted: datalayerColors.greenBrand,
|
|
147
|
-
subtle: '#1f352d',
|
|
148
|
-
},
|
|
149
|
-
// Button colors for dark mode
|
|
150
|
-
btn: {
|
|
151
|
-
text: '#c9d1d9',
|
|
152
|
-
bg: '#21262d',
|
|
153
|
-
border: 'rgba(240, 246, 252, 0.1)',
|
|
154
|
-
hoverBg: '#30363d',
|
|
155
|
-
hoverBorder: '#8b949e',
|
|
156
|
-
activeBg: 'hsla(212, 12%, 18%, 1)',
|
|
157
|
-
activeBorder: '#6e7681',
|
|
158
|
-
selectedBg: '#161b22',
|
|
159
|
-
counterBg: '#30363d',
|
|
160
|
-
primary: {
|
|
161
|
-
text: datalayerColors.white,
|
|
162
|
-
bg: datalayerColors.greenAccent,
|
|
163
|
-
border: 'rgba(240, 246, 252, 0.1)',
|
|
164
|
-
hoverBg: datalayerColors.greenBright,
|
|
165
|
-
hoverBorder: 'rgba(240, 246, 252, 0.1)',
|
|
166
|
-
selectedBg: datalayerColors.greenBright,
|
|
167
|
-
disabledText: 'rgba(255, 255, 255, 0.5)',
|
|
168
|
-
disabledBg: 'rgba(22, 160, 133, 0.35)',
|
|
169
|
-
disabledBorder: 'rgba(22, 160, 133, 0.2)',
|
|
170
|
-
icon: datalayerColors.white,
|
|
171
|
-
counterBg: 'rgba(0, 0, 0, 0.2)',
|
|
172
|
-
},
|
|
173
|
-
outline: {
|
|
174
|
-
text: datalayerColors.greenAccent,
|
|
175
|
-
hoverText: datalayerColors.white,
|
|
176
|
-
hoverBg: datalayerColors.greenAccent,
|
|
177
|
-
hoverBorder: datalayerColors.greenAccent,
|
|
178
|
-
hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
|
|
179
|
-
selectedText: datalayerColors.white,
|
|
180
|
-
selectedBg: datalayerColors.greenBright,
|
|
181
|
-
selectedBorder: datalayerColors.greenBright,
|
|
182
|
-
disabledText: 'rgba(26, 188, 156, 0.5)',
|
|
183
|
-
disabledBg: 'rgba(26, 188, 156, 0.1)',
|
|
184
|
-
disabledCounterBg: 'rgba(26, 188, 156, 0.05)',
|
|
185
|
-
counterBg: 'rgba(26, 188, 156, 0.1)',
|
|
186
|
-
counterFg: datalayerColors.greenAccent,
|
|
187
|
-
hoverCounterFg: datalayerColors.white,
|
|
188
|
-
disabledCounterFg: 'rgba(26, 188, 156, 0.5)',
|
|
189
|
-
},
|
|
190
|
-
danger: {
|
|
191
|
-
text: '#f85149',
|
|
192
|
-
hoverText: datalayerColors.white,
|
|
193
|
-
hoverBg: '#da3633',
|
|
194
|
-
hoverBorder: '#f85149',
|
|
195
|
-
hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
|
|
196
|
-
selectedText: datalayerColors.white,
|
|
197
|
-
selectedBg: '#b62324',
|
|
198
|
-
selectedBorder: '#ff7b72',
|
|
199
|
-
disabledText: 'rgba(248, 81, 73, 0.5)',
|
|
200
|
-
disabledBg: 'rgba(248, 81, 73, 0.1)',
|
|
201
|
-
disabledCounterBg: 'rgba(248, 81, 73, 0.05)',
|
|
202
|
-
counterBg: 'rgba(248, 81, 73, 0.1)',
|
|
203
|
-
counterFg: '#f85149',
|
|
204
|
-
hoverCounterFg: datalayerColors.white,
|
|
205
|
-
disabledCounterFg: 'rgba(248, 81, 73, 0.5)',
|
|
206
|
-
icon: '#f85149',
|
|
207
|
-
},
|
|
208
|
-
},
|
|
209
|
-
},
|
|
210
|
-
shadows: {},
|
|
211
|
-
},
|
|
212
|
-
},
|
|
213
|
-
};
|
|
214
|
-
const { colorSchemes: primerSchemes, ...primerOthers } = cloneDeep(primerTheme);
|
|
215
|
-
const { colorSchemes: datalayerSchemes, ...datalayerOthers } = datalayerThemeDefs;
|
|
216
|
-
// Merge with the light theme to ensure all variables are defined.
|
|
217
|
-
export const datalayerTheme = merge(primerOthers, datalayerOthers, {
|
|
218
|
-
colorSchemes: { light: {}, dark: {} },
|
|
219
|
-
});
|
|
220
|
-
datalayerTheme.colorSchemes.light = {
|
|
221
|
-
colors: merge(primerSchemes.light.colors, datalayerSchemes.light.colors),
|
|
222
|
-
shadows: merge(primerSchemes.light.shadows, datalayerSchemes.light.shadows),
|
|
223
|
-
};
|
|
224
|
-
datalayerTheme.colorSchemes.dark = {
|
|
225
|
-
colors: merge(primerSchemes.dark.colors, datalayerSchemes.dark.colors),
|
|
226
|
-
shadows: merge(primerSchemes.dark.shadows, datalayerSchemes.dark.shadows),
|
|
227
|
-
};
|
|
228
|
-
export default datalayerTheme;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { type CSSProperties } from 'react';
|
|
2
|
-
import { ThemeProviderProps } from '@primer/react';
|
|
3
|
-
export interface IDatalayerThemeProviderProps extends Omit<ThemeProviderProps, 'theme' | 'colorMode'> {
|
|
4
|
-
/**
|
|
5
|
-
* Color mode to use.
|
|
6
|
-
* - `'light'` / `'dark'` — explicit override
|
|
7
|
-
* - `'auto'` — follow the operating system preference (prefers-color-scheme)
|
|
8
|
-
* - Primer's `'day'` / `'night'` are still accepted.
|
|
9
|
-
*/
|
|
10
|
-
colorMode?: 'light' | 'dark' | 'auto' | 'day' | 'night';
|
|
11
|
-
/**
|
|
12
|
-
* Additional base styles merged on top of theme defaults.
|
|
13
|
-
*/
|
|
14
|
-
baseStyles?: CSSProperties;
|
|
15
|
-
/**
|
|
16
|
-
* Optional Primer theme object. Defaults to the built-in datalayerTheme.
|
|
17
|
-
*/
|
|
18
|
-
theme?: Record<string, any>;
|
|
19
|
-
/**
|
|
20
|
-
* Optional per-mode style overrides (base + button CSS vars).
|
|
21
|
-
* When provided, these replace the built-in datalayer styles entirely.
|
|
22
|
-
* The `baseStyles` prop is still merged on top.
|
|
23
|
-
*/
|
|
24
|
-
themeStyles?: {
|
|
25
|
-
light: CSSProperties;
|
|
26
|
-
dark: CSSProperties;
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
export declare function DatalayerThemeProvider(props: React.PropsWithChildren<IDatalayerThemeProviderProps>): JSX.Element;
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { BaseStyles, ThemeProvider } from '@primer/react';
|
|
3
|
-
import { datalayerTheme, datalayerColors } from './DatalayerTheme';
|
|
4
|
-
import { useSystemColorMode } from './useSystemColorMode';
|
|
5
|
-
const baseStyleLight = {
|
|
6
|
-
backgroundColor: datalayerColors.white,
|
|
7
|
-
color: datalayerColors.black,
|
|
8
|
-
fontSize: 'var(--text-body-size-medium)',
|
|
9
|
-
};
|
|
10
|
-
const baseStyleDark = {
|
|
11
|
-
backgroundColor: datalayerColors.black,
|
|
12
|
-
color: datalayerColors.white,
|
|
13
|
-
fontSize: 'var(--text-body-size-medium)',
|
|
14
|
-
};
|
|
15
|
-
const primaryButtonVarsLight = {
|
|
16
|
-
'--button-primary-bgColor-rest': datalayerColors.greenText,
|
|
17
|
-
'--button-primary-bgColor-hover': datalayerColors.greenHover,
|
|
18
|
-
'--button-primary-bgColor-active': datalayerColors.greenHover,
|
|
19
|
-
'--button-primary-fgColor-rest': datalayerColors.white,
|
|
20
|
-
'--button-primary-borderColor-rest': datalayerColors.greenText,
|
|
21
|
-
'--button-primary-borderColor-hover': datalayerColors.greenHover,
|
|
22
|
-
'--color-btn-primary-bg': datalayerColors.greenText,
|
|
23
|
-
'--color-btn-primary-hover-bg': datalayerColors.greenHover,
|
|
24
|
-
};
|
|
25
|
-
const primaryButtonVarsDark = {
|
|
26
|
-
'--button-primary-bgColor-rest': datalayerColors.greenAccent,
|
|
27
|
-
'--button-primary-bgColor-hover': datalayerColors.greenBright,
|
|
28
|
-
'--button-primary-bgColor-active': datalayerColors.greenBright,
|
|
29
|
-
'--button-primary-fgColor-rest': datalayerColors.white,
|
|
30
|
-
'--button-primary-borderColor-rest': datalayerColors.greenAccent,
|
|
31
|
-
'--button-primary-borderColor-hover': datalayerColors.greenBright,
|
|
32
|
-
'--color-btn-primary-bg': datalayerColors.greenAccent,
|
|
33
|
-
'--color-btn-primary-hover-bg': datalayerColors.greenBright,
|
|
34
|
-
};
|
|
35
|
-
export function DatalayerThemeProvider(props) {
|
|
36
|
-
const { children, colorMode, baseStyles, theme, themeStyles, ...rest } = props;
|
|
37
|
-
// Resolve 'auto' → actual system preference ('light' or 'dark').
|
|
38
|
-
const systemMode = useSystemColorMode();
|
|
39
|
-
const resolvedColorMode = colorMode === 'auto' ? systemMode : (colorMode ?? 'light');
|
|
40
|
-
const isDark = resolvedColorMode === 'dark' || resolvedColorMode === 'night';
|
|
41
|
-
const resolvedTheme = theme ?? datalayerTheme;
|
|
42
|
-
const defaultStyles = isDark
|
|
43
|
-
? { ...baseStyleDark, ...primaryButtonVarsDark }
|
|
44
|
-
: { ...baseStyleLight, ...primaryButtonVarsLight };
|
|
45
|
-
const resolvedStyles = themeStyles
|
|
46
|
-
? isDark
|
|
47
|
-
? themeStyles.dark
|
|
48
|
-
: themeStyles.light
|
|
49
|
-
: defaultStyles;
|
|
50
|
-
return (_jsx(ThemeProvider, { colorMode: resolvedColorMode, theme: resolvedTheme, ...rest, children: _jsx(BaseStyles, { style: {
|
|
51
|
-
...resolvedStyles,
|
|
52
|
-
...baseStyles,
|
|
53
|
-
}, children: children }) }));
|
|
54
|
-
}
|
package/lib/theme/Palette.d.ts
DELETED