@directus/themes 0.2.0 → 0.3.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.
@@ -0,0 +1,233 @@
1
+ export declare const defineTheme: <T extends {
2
+ name: string;
3
+ appearance: "light" | "dark";
4
+ rules: {
5
+ foreground?: string;
6
+ background?: string;
7
+ backgroundSubdued?: string;
8
+ foregroundSubdued?: string;
9
+ borderColor?: string;
10
+ borderRadius?: string;
11
+ borderWidth?: string;
12
+ foregroundAccent?: string;
13
+ backgroundNormal?: string;
14
+ backgroundAccent?: string;
15
+ borderColorAccent?: string;
16
+ borderColorSubdued?: string;
17
+ primary?: string;
18
+ primaryBackground?: string;
19
+ primarySubdued?: string;
20
+ primaryAccent?: string;
21
+ secondary?: string;
22
+ secondaryBackground?: string;
23
+ secondarySubdued?: string;
24
+ secondaryAccent?: string;
25
+ success?: string;
26
+ successBackground?: string;
27
+ successSubdued?: string;
28
+ successAccent?: string;
29
+ warning?: string;
30
+ warningBackground?: string;
31
+ warningSubdued?: string;
32
+ warningAccent?: string;
33
+ danger?: string;
34
+ dangerBackground?: string;
35
+ dangerSubdued?: string;
36
+ dangerAccent?: string;
37
+ fonts?: {
38
+ display?: {
39
+ fontFamily?: string;
40
+ fontWeight?: string;
41
+ };
42
+ sans?: {
43
+ fontFamily?: string;
44
+ fontWeight?: string;
45
+ };
46
+ serif?: {
47
+ fontFamily?: string;
48
+ fontWeight?: string;
49
+ };
50
+ monospace?: {
51
+ fontFamily?: string;
52
+ fontWeight?: string;
53
+ };
54
+ };
55
+ navigation?: {
56
+ background?: string;
57
+ borderColor?: string;
58
+ borderWidth?: string;
59
+ backgroundAccent?: string;
60
+ project?: {
61
+ foreground?: string;
62
+ fontFamily?: string;
63
+ background?: string;
64
+ borderColor?: string;
65
+ borderWidth?: string;
66
+ };
67
+ modules?: {
68
+ background?: string;
69
+ borderColor?: string;
70
+ borderWidth?: string;
71
+ button?: {
72
+ foreground?: string;
73
+ background?: string;
74
+ foregroundHover?: string;
75
+ foregroundActive?: string;
76
+ backgroundHover?: string;
77
+ backgroundActive?: string;
78
+ };
79
+ };
80
+ list?: {
81
+ foreground?: string;
82
+ fontFamily?: string;
83
+ background?: string;
84
+ foregroundHover?: string;
85
+ foregroundActive?: string;
86
+ backgroundHover?: string;
87
+ backgroundActive?: string;
88
+ icon?: {
89
+ foreground?: string;
90
+ foregroundHover?: string;
91
+ foregroundActive?: string;
92
+ };
93
+ divider: {
94
+ borderColor?: string;
95
+ borderWidth?: string;
96
+ };
97
+ };
98
+ };
99
+ header?: {
100
+ background?: string;
101
+ borderColor?: string;
102
+ boxShadow?: string;
103
+ borderWidth?: string;
104
+ headline?: {
105
+ foreground?: string;
106
+ fontFamily?: string;
107
+ };
108
+ title?: {
109
+ foreground?: string;
110
+ fontFamily?: string;
111
+ fontWeight?: string;
112
+ };
113
+ };
114
+ form?: {
115
+ columnGap?: string;
116
+ rowGap?: string;
117
+ field?: {
118
+ label?: {
119
+ foreground?: string;
120
+ fontFamily?: string;
121
+ fontWeight?: string;
122
+ };
123
+ input?: {
124
+ foreground?: string;
125
+ background?: string;
126
+ backgroundSubdued?: string;
127
+ foregroundSubdued?: string;
128
+ borderColor?: string;
129
+ borderColorHover?: string;
130
+ borderColorFocus?: string;
131
+ boxShadow?: string;
132
+ boxShadowHover?: string;
133
+ boxShadowFocus?: string;
134
+ height?: string;
135
+ padding?: string;
136
+ };
137
+ };
138
+ };
139
+ sidebar?: {
140
+ foreground?: string;
141
+ fontFamily?: string;
142
+ background?: string;
143
+ borderColor?: string;
144
+ borderWidth?: string;
145
+ section?: {
146
+ form?: {
147
+ columnGap?: string;
148
+ rowGap?: string;
149
+ field?: {
150
+ label?: {
151
+ foreground?: string;
152
+ fontFamily?: string;
153
+ fontWeight?: string;
154
+ };
155
+ input?: {
156
+ foreground?: string;
157
+ background?: string;
158
+ backgroundSubdued?: string;
159
+ foregroundSubdued?: string;
160
+ borderColor?: string;
161
+ borderColorHover?: string;
162
+ borderColorFocus?: string;
163
+ boxShadow?: string;
164
+ boxShadowHover?: string;
165
+ boxShadowFocus?: string;
166
+ height?: string;
167
+ padding?: string;
168
+ };
169
+ };
170
+ };
171
+ toggle?: {
172
+ foreground?: string;
173
+ fontFamily?: string;
174
+ background?: string;
175
+ borderColor?: string;
176
+ borderWidth?: string;
177
+ foregroundHover?: string;
178
+ foregroundActive?: string;
179
+ backgroundHover?: string;
180
+ backgroundActive?: string;
181
+ icon?: {
182
+ foreground?: string;
183
+ foregroundHover?: string;
184
+ foregroundActive?: string;
185
+ };
186
+ };
187
+ };
188
+ };
189
+ public?: {
190
+ foreground?: string;
191
+ background?: string;
192
+ foregroundAccent?: string;
193
+ form?: {
194
+ columnGap?: string;
195
+ rowGap?: string;
196
+ field?: {
197
+ label?: {
198
+ foreground?: string;
199
+ fontFamily?: string;
200
+ fontWeight?: string;
201
+ };
202
+ input?: {
203
+ foreground?: string;
204
+ background?: string;
205
+ backgroundSubdued?: string;
206
+ foregroundSubdued?: string;
207
+ borderColor?: string;
208
+ borderColorHover?: string;
209
+ borderColorFocus?: string;
210
+ boxShadow?: string;
211
+ boxShadowHover?: string;
212
+ boxShadowFocus?: string;
213
+ height?: string;
214
+ padding?: string;
215
+ };
216
+ };
217
+ };
218
+ art?: {
219
+ background?: string;
220
+ primary?: string;
221
+ secondary?: string;
222
+ speed?: string;
223
+ };
224
+ };
225
+ popover?: {
226
+ menu?: {
227
+ background?: string;
228
+ boxShadow?: string;
229
+ borderRadius?: string;
230
+ };
231
+ };
232
+ };
233
+ }>(theme: T) => T;
@@ -0,0 +1,2 @@
1
+ export * from './define-theme.js';
2
+ export * from './rules-to-css-vars.js';
@@ -0,0 +1,3 @@
1
+ import type { DeepPartial } from '@directus/types';
2
+ import type { Theme } from '../schemas/index.js';
3
+ export declare const rulesToCssVars: (rules: DeepPartial<Theme['rules']>) => Record<string, string | number>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@directus/themes",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Themes for Directus",
5
5
  "homepage": "https://directus.io",
6
6
  "repository": {
@@ -26,7 +26,8 @@
26
26
  "@unhead/vue": "1.1.30",
27
27
  "decamelize": "6.0.0",
28
28
  "flat": "6.0.1",
29
- "lodash-es": "4.17.21"
29
+ "lodash-es": "4.17.21",
30
+ "@directus/utils": "11.0.2"
30
31
  },
31
32
  "devDependencies": {
32
33
  "@types/lodash-es": "4.17.9",
@@ -35,16 +36,15 @@
35
36
  "typescript": "5.2.2",
36
37
  "vite": "4.4.11",
37
38
  "vite-plugin-dts": "3.6.0",
38
- "@directus/tsconfig": "1.0.1",
39
- "@directus/types": "11.0.1"
39
+ "@directus/types": "11.0.2",
40
+ "@directus/tsconfig": "1.0.1"
40
41
  },
41
42
  "peerDependencies": {
42
43
  "pinia": "2.1.7",
43
44
  "vue": "3.3.4"
44
45
  },
45
46
  "scripts": {
46
- "build": "vite build && npm run generate-json-schema",
47
- "dev": "vite build --watch",
48
- "generate-json-schema": "node generate-json-schema.js"
47
+ "build": "vite build",
48
+ "dev": "vite build --watch"
49
49
  }
50
50
  }
package/dist/schema.d.ts DELETED
@@ -1,149 +0,0 @@
1
- import type { Static } from '@sinclair/typebox';
2
- export declare const ThemeSchema: import("@sinclair/typebox").TObject<{
3
- name: import("@sinclair/typebox").TString;
4
- appearance: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TLiteral<"light">, import("@sinclair/typebox").TLiteral<"dark">]>;
5
- rules: import("@sinclair/typebox").TObject<{
6
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
7
- foregroundSubdued: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
8
- foregroundAccent: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
9
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
10
- primary: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
11
- primaryBackground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
12
- primarySubdued: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
13
- primaryAccent: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
14
- secondary: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
15
- secondaryBackground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
16
- secondarySubdued: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
17
- secondaryAccent: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
18
- success: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
19
- successBackground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
20
- successSubdued: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
21
- successAccent: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
22
- warning: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
23
- warningBackground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
24
- warningSubdued: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
25
- warningAccent: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
26
- danger: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
27
- dangerBackground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
28
- dangerSubdued: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
29
- dangerAccent: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
30
- fontFamilyDisplay: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
31
- fontFamilySansSerif: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
32
- fontFamilySerif: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
33
- fontFamilyMonospace: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
34
- borderRadius: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>, import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>]>;
35
- borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
36
- navigation: import("@sinclair/typebox").TObject<{
37
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
38
- borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
39
- borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
40
- project: import("@sinclair/typebox").TObject<{
41
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
42
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
43
- fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
44
- borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
45
- borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
46
- }>;
47
- modules: import("@sinclair/typebox").TObject<{
48
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
49
- borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
50
- borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
51
- button: import("@sinclair/typebox").TObject<{
52
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
53
- foregroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
54
- foregroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
55
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
56
- backgroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
57
- backgroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
58
- }>;
59
- }>;
60
- list: import("@sinclair/typebox").TObject<{
61
- icon: import("@sinclair/typebox").TObject<{
62
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
63
- foregroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
64
- foregroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
65
- }>;
66
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
67
- foregroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
68
- foregroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
69
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
70
- backgroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
71
- backgroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
72
- fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
73
- divider: import("@sinclair/typebox").TObject<{
74
- borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
75
- borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
76
- }>;
77
- }>;
78
- }>;
79
- header: import("@sinclair/typebox").TObject<{
80
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
81
- borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
82
- borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
83
- boxShadow: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
84
- headline: import("@sinclair/typebox").TObject<{
85
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
86
- fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
87
- }>;
88
- title: import("@sinclair/typebox").TObject<{
89
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
90
- fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
91
- }>;
92
- }>;
93
- form: import("@sinclair/typebox").TObject<{
94
- field: import("@sinclair/typebox").TObject<{
95
- label: import("@sinclair/typebox").TObject<{
96
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
97
- fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
98
- }>;
99
- input: import("@sinclair/typebox").TObject<{
100
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
101
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
102
- foregroundSubdued: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
103
- borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
104
- borderColorHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
105
- borderColorFocus: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
106
- boxShadow: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
107
- boxShadowHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
108
- boxShadowFocus: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
109
- }>;
110
- }>;
111
- }>;
112
- sidebar: import("@sinclair/typebox").TObject<{
113
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
114
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
115
- fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
116
- borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
117
- borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
118
- section: import("@sinclair/typebox").TObject<{
119
- toggle: import("@sinclair/typebox").TObject<{
120
- icon: import("@sinclair/typebox").TObject<{
121
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
122
- foregroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
123
- foregroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
124
- }>;
125
- foreground: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
126
- foregroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
127
- foregroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
128
- background: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
129
- backgroundHover: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
130
- backgroundActive: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
131
- fontFamily: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
132
- borderWidth: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>>;
133
- borderColor: import("@sinclair/typebox").TRef<import("@sinclair/typebox").TString>;
134
- }>;
135
- }>;
136
- }>;
137
- }>;
138
- }>;
139
- export declare const Definitions: {
140
- $defs: {
141
- Color: import("@sinclair/typebox").TString;
142
- FamilyName: import("@sinclair/typebox").TString;
143
- Length: import("@sinclair/typebox").TString;
144
- Percentage: import("@sinclair/typebox").TString;
145
- LineWidth: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TLiteral<"thin">, import("@sinclair/typebox").TLiteral<"medium">, import("@sinclair/typebox").TLiteral<"thick">]>;
146
- BoxShadow: import("@sinclair/typebox").TString;
147
- };
148
- };
149
- export type Theme = Static<typeof ThemeSchema>;