pxengine 0.1.117 → 0.1.119
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 +132 -132
- package/config/tailwind-preset.js +159 -159
- package/dist/index.cjs +322 -188
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +322 -188
- package/dist/index.mjs.map +1 -1
- package/dist/registry.json +141 -141
- package/package.json +124 -124
package/README.md
CHANGED
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
# @pxengine-ui
|
|
2
|
-
|
|
3
|
-
> **Shadcn-based UI component library for agent-driven interfaces**
|
|
4
|
-
|
|
5
|
-
A premium UI component library built on top of shadcn/ui, designed specifically for agent-driven user interfaces and creator discovery platforms. Components follow Atomic Design principles and are optimized for schema-driven rendering.
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
## Overview
|
|
10
|
-
|
|
11
|
-
`@pxengine-ui` provides a robust foundation for building modern dashboard and AI-integrated applications:
|
|
12
|
-
|
|
13
|
-
- **Built on shadcn/ui** - Industry-standard base layer using Radix UI primitives.
|
|
14
|
-
- **Vibrant & Premium** - Custom design system with glassmorphism, smooth gradients, and rich micro-interactions.
|
|
15
|
-
- **Agent-First** - Fully schema-driven atoms ready for AI generation.
|
|
16
|
-
- **Atomic Design** - 40+ Atoms and 18+ Composed Molecules.
|
|
17
|
-
- **Zero Configuration** - Inherits Tailwind config and CSS variables from the host application.
|
|
18
|
-
|
|
19
|
-
---
|
|
20
|
-
|
|
21
|
-
## Structure
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
@pxengine-ui/
|
|
25
|
-
├── src/
|
|
26
|
-
│ ├── atoms/ # Foundation UI (Button, Input, Slider, etc.)
|
|
27
|
-
│ ├── molecules/ # Composed Patterns
|
|
28
|
-
│ │ ├── generic/ # Cross-domain dashboard widgets
|
|
29
|
-
│ │ └── creator-discovery/ # Niche-specific for creator search
|
|
30
|
-
│ ├── types/ # Schema & Component definitions
|
|
31
|
-
│ └── lib/ # Shared utilities
|
|
32
|
-
└── dist/ # Compiled assets & Registry
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
## Component Catalog
|
|
38
|
-
|
|
39
|
-
### Atoms (Foundation Primitives)
|
|
40
|
-
|
|
41
|
-
40+ accessible atoms wrapping Radix-based shadcn components:
|
|
42
|
-
|
|
43
|
-
- **Forms**: Input, Checkbox, RadioGroup, Select, Switch, Slider, Textarea, Toggle.
|
|
44
|
-
- **Navigation**: DropdownMenu, ContextMenu, Pagination, Breadcrumb, Tabs, Command.
|
|
45
|
-
- **Overlay**: Dialog, AlertDialog, Drawer, Sheet, Popover, Tooltip.
|
|
46
|
-
- **Display**: Card, Badge, Avatar, Accordion, AspectRatio, Skeleton, Separator, Progress.
|
|
47
|
-
- **Specialized**: Resizable Panels, InputOTP, Kbd (Keyboard shortcuts).
|
|
48
|
-
|
|
49
|
-
### Molecules (High-Level Patterns)
|
|
50
|
-
|
|
51
|
-
#### Generic Dashboard
|
|
52
|
-
|
|
53
|
-
- **StatsGrid**: Data visualization with trends & icons.
|
|
54
|
-
- **EmptyState**: Premium placeholder for empty results.
|
|
55
|
-
- **LoadingOverlay**: Glassmorphism backdrop with progress.
|
|
56
|
-
- **FilterBar**: Search + Multi-chip filtering.
|
|
57
|
-
- **FileUpload**: Drag-and-drop zone.
|
|
58
|
-
- **TagCloud**: Interactive interest clusters.
|
|
59
|
-
- **FormCard**: Schema-driven editable forms.
|
|
60
|
-
|
|
61
|
-
#### Creator Discovery
|
|
62
|
-
|
|
63
|
-
- **CreatorGridCard**: Detailed discovery card with banner and metrics.
|
|
64
|
-
- **AudienceMetricCard**: Specialized progress-based demographics.
|
|
65
|
-
- **BrandAffinityGroup**: Visual recently associated brand logos.
|
|
66
|
-
- **ContentPreviewGallery**: Video/Image thumbnail grids.
|
|
67
|
-
- **CreatorProfileSummary**: Compact info row for list views.
|
|
68
|
-
- **PlatformIconGroup**: Social platform reach summary.
|
|
69
|
-
- **SearchSpecCard**: Advanced filter criteria summary.
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
## Usage
|
|
74
|
-
|
|
75
|
-
### Registry-Driven Rendering
|
|
76
|
-
|
|
77
|
-
The library generates a `registry.json` that includes component metadata and schemas, allowing agents to understand what they can render.
|
|
78
|
-
|
|
79
|
-
```tsx
|
|
80
|
-
import { PXEngineRenderer } from "@/components/PXEngineRenderer";
|
|
81
|
-
|
|
82
|
-
const schema = {
|
|
83
|
-
type: "stats-grid",
|
|
84
|
-
items: [
|
|
85
|
-
{
|
|
86
|
-
label: "Total Reach",
|
|
87
|
-
value: "1.2M",
|
|
88
|
-
trend: "+12%",
|
|
89
|
-
trendDirection: "up",
|
|
90
|
-
},
|
|
91
|
-
],
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
return <PXEngineRenderer schema={schema} />;
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### Direct Component Import
|
|
98
|
-
|
|
99
|
-
All components are exported for standard React usage:
|
|
100
|
-
|
|
101
|
-
```tsx
|
|
102
|
-
import { CreatorGridCard } from "pxengine";
|
|
103
|
-
|
|
104
|
-
<CreatorGridCard
|
|
105
|
-
name="Jane Doe"
|
|
106
|
-
handle="janedoe"
|
|
107
|
-
metrics={[{ label: "Followers", value: "500K" }]}
|
|
108
|
-
platforms={["Instagram", "TikTok"]}
|
|
109
|
-
/>;
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
---
|
|
113
|
-
|
|
114
|
-
## Design System
|
|
115
|
-
|
|
116
|
-
The library uses a specific high-end aesthetic:
|
|
117
|
-
|
|
118
|
-
- **Colors**: Indigo, Purple, and Slate primary hues.
|
|
119
|
-
- **Border Radius**: Generous `rounded-3xl` and `rounded-[32px]` for major components.
|
|
120
|
-
- **Backdrop**: Heavy use of `backdrop-blur-md` and `bg-white/60`.
|
|
121
|
-
- **Shadows**: Subtle, layered soft shadows for depth.
|
|
122
|
-
|
|
123
|
-
---
|
|
124
|
-
|
|
125
|
-
## Tech Stack
|
|
126
|
-
|
|
127
|
-
- **Framework**: React 18+ (Vite/tsup build)
|
|
128
|
-
- **Styling**: Tailwind CSS + `class-variance-authority`
|
|
129
|
-
- **Primitives**: Radix UI
|
|
130
|
-
- **Animations**: Framer Motion
|
|
131
|
-
- **Icons**: Lucide React
|
|
132
|
-
- **Data**: Recharts / Zod
|
|
1
|
+
# @pxengine-ui
|
|
2
|
+
|
|
3
|
+
> **Shadcn-based UI component library for agent-driven interfaces**
|
|
4
|
+
|
|
5
|
+
A premium UI component library built on top of shadcn/ui, designed specifically for agent-driven user interfaces and creator discovery platforms. Components follow Atomic Design principles and are optimized for schema-driven rendering.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
`@pxengine-ui` provides a robust foundation for building modern dashboard and AI-integrated applications:
|
|
12
|
+
|
|
13
|
+
- **Built on shadcn/ui** - Industry-standard base layer using Radix UI primitives.
|
|
14
|
+
- **Vibrant & Premium** - Custom design system with glassmorphism, smooth gradients, and rich micro-interactions.
|
|
15
|
+
- **Agent-First** - Fully schema-driven atoms ready for AI generation.
|
|
16
|
+
- **Atomic Design** - 40+ Atoms and 18+ Composed Molecules.
|
|
17
|
+
- **Zero Configuration** - Inherits Tailwind config and CSS variables from the host application.
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Structure
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
@pxengine-ui/
|
|
25
|
+
├── src/
|
|
26
|
+
│ ├── atoms/ # Foundation UI (Button, Input, Slider, etc.)
|
|
27
|
+
│ ├── molecules/ # Composed Patterns
|
|
28
|
+
│ │ ├── generic/ # Cross-domain dashboard widgets
|
|
29
|
+
│ │ └── creator-discovery/ # Niche-specific for creator search
|
|
30
|
+
│ ├── types/ # Schema & Component definitions
|
|
31
|
+
│ └── lib/ # Shared utilities
|
|
32
|
+
└── dist/ # Compiled assets & Registry
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Component Catalog
|
|
38
|
+
|
|
39
|
+
### Atoms (Foundation Primitives)
|
|
40
|
+
|
|
41
|
+
40+ accessible atoms wrapping Radix-based shadcn components:
|
|
42
|
+
|
|
43
|
+
- **Forms**: Input, Checkbox, RadioGroup, Select, Switch, Slider, Textarea, Toggle.
|
|
44
|
+
- **Navigation**: DropdownMenu, ContextMenu, Pagination, Breadcrumb, Tabs, Command.
|
|
45
|
+
- **Overlay**: Dialog, AlertDialog, Drawer, Sheet, Popover, Tooltip.
|
|
46
|
+
- **Display**: Card, Badge, Avatar, Accordion, AspectRatio, Skeleton, Separator, Progress.
|
|
47
|
+
- **Specialized**: Resizable Panels, InputOTP, Kbd (Keyboard shortcuts).
|
|
48
|
+
|
|
49
|
+
### Molecules (High-Level Patterns)
|
|
50
|
+
|
|
51
|
+
#### Generic Dashboard
|
|
52
|
+
|
|
53
|
+
- **StatsGrid**: Data visualization with trends & icons.
|
|
54
|
+
- **EmptyState**: Premium placeholder for empty results.
|
|
55
|
+
- **LoadingOverlay**: Glassmorphism backdrop with progress.
|
|
56
|
+
- **FilterBar**: Search + Multi-chip filtering.
|
|
57
|
+
- **FileUpload**: Drag-and-drop zone.
|
|
58
|
+
- **TagCloud**: Interactive interest clusters.
|
|
59
|
+
- **FormCard**: Schema-driven editable forms.
|
|
60
|
+
|
|
61
|
+
#### Creator Discovery
|
|
62
|
+
|
|
63
|
+
- **CreatorGridCard**: Detailed discovery card with banner and metrics.
|
|
64
|
+
- **AudienceMetricCard**: Specialized progress-based demographics.
|
|
65
|
+
- **BrandAffinityGroup**: Visual recently associated brand logos.
|
|
66
|
+
- **ContentPreviewGallery**: Video/Image thumbnail grids.
|
|
67
|
+
- **CreatorProfileSummary**: Compact info row for list views.
|
|
68
|
+
- **PlatformIconGroup**: Social platform reach summary.
|
|
69
|
+
- **SearchSpecCard**: Advanced filter criteria summary.
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## Usage
|
|
74
|
+
|
|
75
|
+
### Registry-Driven Rendering
|
|
76
|
+
|
|
77
|
+
The library generates a `registry.json` that includes component metadata and schemas, allowing agents to understand what they can render.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { PXEngineRenderer } from "@/components/PXEngineRenderer";
|
|
81
|
+
|
|
82
|
+
const schema = {
|
|
83
|
+
type: "stats-grid",
|
|
84
|
+
items: [
|
|
85
|
+
{
|
|
86
|
+
label: "Total Reach",
|
|
87
|
+
value: "1.2M",
|
|
88
|
+
trend: "+12%",
|
|
89
|
+
trendDirection: "up",
|
|
90
|
+
},
|
|
91
|
+
],
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
return <PXEngineRenderer schema={schema} />;
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Direct Component Import
|
|
98
|
+
|
|
99
|
+
All components are exported for standard React usage:
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import { CreatorGridCard } from "pxengine";
|
|
103
|
+
|
|
104
|
+
<CreatorGridCard
|
|
105
|
+
name="Jane Doe"
|
|
106
|
+
handle="janedoe"
|
|
107
|
+
metrics={[{ label: "Followers", value: "500K" }]}
|
|
108
|
+
platforms={["Instagram", "TikTok"]}
|
|
109
|
+
/>;
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## Design System
|
|
115
|
+
|
|
116
|
+
The library uses a specific high-end aesthetic:
|
|
117
|
+
|
|
118
|
+
- **Colors**: Indigo, Purple, and Slate primary hues.
|
|
119
|
+
- **Border Radius**: Generous `rounded-3xl` and `rounded-[32px]` for major components.
|
|
120
|
+
- **Backdrop**: Heavy use of `backdrop-blur-md` and `bg-white/60`.
|
|
121
|
+
- **Shadows**: Subtle, layered soft shadows for depth.
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Tech Stack
|
|
126
|
+
|
|
127
|
+
- **Framework**: React 18+ (Vite/tsup build)
|
|
128
|
+
- **Styling**: Tailwind CSS + `class-variance-authority`
|
|
129
|
+
- **Primitives**: Radix UI
|
|
130
|
+
- **Animations**: Framer Motion
|
|
131
|
+
- **Icons**: Lucide React
|
|
132
|
+
- **Data**: Recharts / Zod
|
|
@@ -1,159 +1,159 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @pxengine/ui Tailwind Preset
|
|
3
|
-
*
|
|
4
|
-
* This file allows consumers of the @pxengine/ui library to easily inherit
|
|
5
|
-
* the custom theme, colors, and animations required for the components.
|
|
6
|
-
*
|
|
7
|
-
* Usage in tailwind.config.js:
|
|
8
|
-
* presets: [require("@pxengine/ui/config/tailwind-preset")]
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
module.exports = {
|
|
12
|
-
theme: {
|
|
13
|
-
container: {
|
|
14
|
-
center: true,
|
|
15
|
-
padding: "2rem",
|
|
16
|
-
screens: {
|
|
17
|
-
"2xl": "1400px",
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
extend: {
|
|
21
|
-
fontFamily: {
|
|
22
|
-
sans: ["Inter", "system-ui", "sans-serif"],
|
|
23
|
-
noto: ["Noto Sans", "system-ui", "sans-serif"],
|
|
24
|
-
grotesk: ["Space Grotesk", "system-ui", "sans-serif"],
|
|
25
|
-
roboto: ["Roboto", "system-ui", "sans-serif"],
|
|
26
|
-
},
|
|
27
|
-
colors: {
|
|
28
|
-
border: "hsl(var(--border))",
|
|
29
|
-
input: "hsl(var(--input))",
|
|
30
|
-
ring: "hsl(var(--ring))",
|
|
31
|
-
background: "hsl(var(--background))",
|
|
32
|
-
foreground: "hsl(var(--foreground))",
|
|
33
|
-
primary: {
|
|
34
|
-
DEFAULT: "hsl(var(--primary))",
|
|
35
|
-
foreground: "hsl(var(--primary-foreground))",
|
|
36
|
-
},
|
|
37
|
-
secondary: {
|
|
38
|
-
DEFAULT: "hsl(var(--secondary))",
|
|
39
|
-
foreground: "hsl(var(--secondary-foreground))",
|
|
40
|
-
},
|
|
41
|
-
interactive: {
|
|
42
|
-
DEFAULT: "var(--interactive)",
|
|
43
|
-
foreground: "var(--interactive-foreground)",
|
|
44
|
-
},
|
|
45
|
-
destructive: {
|
|
46
|
-
DEFAULT: "hsl(var(--destructive))",
|
|
47
|
-
foreground: "hsl(var(--destructive-foreground))",
|
|
48
|
-
},
|
|
49
|
-
muted: {
|
|
50
|
-
DEFAULT: "hsl(var(--muted))",
|
|
51
|
-
foreground: "hsl(var(--muted-foreground))",
|
|
52
|
-
},
|
|
53
|
-
accent: {
|
|
54
|
-
DEFAULT: "hsl(var(--accent))",
|
|
55
|
-
foreground: "hsl(var(--accent-foreground))",
|
|
56
|
-
},
|
|
57
|
-
popover: {
|
|
58
|
-
DEFAULT: "hsl(var(--popover))",
|
|
59
|
-
foreground: "hsl(var(--popover-foreground))",
|
|
60
|
-
},
|
|
61
|
-
card: {
|
|
62
|
-
DEFAULT: "hsl(var(--card))",
|
|
63
|
-
foreground: "hsl(var(--card-foreground))",
|
|
64
|
-
},
|
|
65
|
-
// Custom PXEngine colors
|
|
66
|
-
gray25: "var(--gray25)",
|
|
67
|
-
gray50: "var(--gray50)",
|
|
68
|
-
gray100: "var(--gray100)",
|
|
69
|
-
gray200: "var(--gray200)",
|
|
70
|
-
gray300: "var(--gray300)",
|
|
71
|
-
gray400: "var(--gray400)",
|
|
72
|
-
gray500: "var(--gray500)",
|
|
73
|
-
gray600: "var(--gray600)",
|
|
74
|
-
gray700: "var(--gray700)",
|
|
75
|
-
gray800: "var(--gray800)",
|
|
76
|
-
gray900: "var(--gray900)",
|
|
77
|
-
txtColor: "var(--txtColor)",
|
|
78
|
-
samepurple200: "#988cff",
|
|
79
|
-
purple100: "var(--purple100)",
|
|
80
|
-
purple200: "var(--purple200)",
|
|
81
|
-
purple500: "var(--purple500)",
|
|
82
|
-
purpleText: "var(--purple-text)",
|
|
83
|
-
purple50: "var(--purple50)",
|
|
84
|
-
purple20: "var(--purple20)",
|
|
85
|
-
purpleBorder2: "var(--purpleBorder2)",
|
|
86
|
-
purpleTextHover: "var(--purple-text-hover)",
|
|
87
|
-
purpleBorder: "var(--purple-border)",
|
|
88
|
-
green500: "var(--green500)",
|
|
89
|
-
grayPill: "var(--grayPill)",
|
|
90
|
-
sliderFill: "var(--slider-fill)",
|
|
91
|
-
sliderUnfill: "var(--slider-unfill)",
|
|
92
|
-
sliderButton: "var(--slider-button)",
|
|
93
|
-
lightSuccess: "#17C653",
|
|
94
|
-
lightWarning: "#DFA000",
|
|
95
|
-
success: "#5cb85c",
|
|
96
|
-
warningcolor: "var(--warning-color)",
|
|
97
|
-
label: "#071437",
|
|
98
|
-
paperBackground: "var(--paperBackground)",
|
|
99
|
-
darkModeCoal: "#0D0E12",
|
|
100
|
-
tutorialBorder: "var(--tutorialBorder)",
|
|
101
|
-
tutorialBg: "var(--tutorialBg)",
|
|
102
|
-
tutorialText: "var(--tutorialText)",
|
|
103
|
-
greenBackground: "var(--greenBackground)",
|
|
104
|
-
greenText: "var(--greenText)",
|
|
105
|
-
orangeBackground: "var(--orangeBackground)",
|
|
106
|
-
orangeText: "var(--orangeText)",
|
|
107
|
-
redBackground: "var(--redBackground)",
|
|
108
|
-
redText: "var(--redText)",
|
|
109
|
-
chart1: "var(--chart-1)",
|
|
110
|
-
chart2: "var(--chart-2)",
|
|
111
|
-
chart3: "var(--chart-3)",
|
|
112
|
-
chart4: "var(--chart-4)",
|
|
113
|
-
chart5: "var(--chart-5)",
|
|
114
|
-
primaryText: "var(--primaryText)",
|
|
115
|
-
primaryDark2: "var(--primaryDark2)",
|
|
116
|
-
purple200Dark: "var(--purple200Dark)",
|
|
117
|
-
purple20Dark: "var(--purple20Dark)",
|
|
118
|
-
purpleText1: "var(--purple-text-1)",
|
|
119
|
-
textPlaceholder: "var(--textPlaceholder)",
|
|
120
|
-
textSecondary: "var(--textSecondary)",
|
|
121
|
-
interactionBg: "var(--interaction-bg)",
|
|
122
|
-
purpleLight: "var(--purpleLight)",
|
|
123
|
-
purpleText2: "var(--purple-text-2)",
|
|
124
|
-
gold: "var(--gold)",
|
|
125
|
-
cardSurface: "var(--cardSurface)",
|
|
126
|
-
cardText: "var(--cardText)",
|
|
127
|
-
cardBorder: "var(--cardBorder)",
|
|
128
|
-
green100: "#dcfce7",
|
|
129
|
-
// Landing page colors
|
|
130
|
-
landingDarkestBlue: "var(--landing-darkest-blue)",
|
|
131
|
-
landingBlue: "var(--landing-blue)",
|
|
132
|
-
landingPurple: "var(--landing-purple)",
|
|
133
|
-
landingTextParagraph: "var(--landing-text-paragraph)",
|
|
134
|
-
landingTextHeading: "var(--landing-text-heading)",
|
|
135
|
-
landingBorderMain: "var(--landing-border-main)",
|
|
136
|
-
},
|
|
137
|
-
borderRadius: {
|
|
138
|
-
lg: "var(--radius)",
|
|
139
|
-
md: "calc(var(--radius) - 2px)",
|
|
140
|
-
sm: "calc(var(--radius) - 4px)",
|
|
141
|
-
},
|
|
142
|
-
keyframes: {
|
|
143
|
-
"accordion-down": {
|
|
144
|
-
from: { height: "0" },
|
|
145
|
-
to: { height: "var(--radix-accordion-content-height)" },
|
|
146
|
-
},
|
|
147
|
-
"accordion-up": {
|
|
148
|
-
from: { height: "var(--radix-accordion-content-height)" },
|
|
149
|
-
to: { height: "0" },
|
|
150
|
-
},
|
|
151
|
-
},
|
|
152
|
-
animation: {
|
|
153
|
-
"accordion-down": "accordion-down 0.2s ease-out",
|
|
154
|
-
"accordion-up": "accordion-up 0.2s ease-out",
|
|
155
|
-
},
|
|
156
|
-
},
|
|
157
|
-
},
|
|
158
|
-
plugins: [require("tailwindcss-animate")],
|
|
159
|
-
};
|
|
1
|
+
/**
|
|
2
|
+
* @pxengine/ui Tailwind Preset
|
|
3
|
+
*
|
|
4
|
+
* This file allows consumers of the @pxengine/ui library to easily inherit
|
|
5
|
+
* the custom theme, colors, and animations required for the components.
|
|
6
|
+
*
|
|
7
|
+
* Usage in tailwind.config.js:
|
|
8
|
+
* presets: [require("@pxengine/ui/config/tailwind-preset")]
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
module.exports = {
|
|
12
|
+
theme: {
|
|
13
|
+
container: {
|
|
14
|
+
center: true,
|
|
15
|
+
padding: "2rem",
|
|
16
|
+
screens: {
|
|
17
|
+
"2xl": "1400px",
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
extend: {
|
|
21
|
+
fontFamily: {
|
|
22
|
+
sans: ["Inter", "system-ui", "sans-serif"],
|
|
23
|
+
noto: ["Noto Sans", "system-ui", "sans-serif"],
|
|
24
|
+
grotesk: ["Space Grotesk", "system-ui", "sans-serif"],
|
|
25
|
+
roboto: ["Roboto", "system-ui", "sans-serif"],
|
|
26
|
+
},
|
|
27
|
+
colors: {
|
|
28
|
+
border: "hsl(var(--border))",
|
|
29
|
+
input: "hsl(var(--input))",
|
|
30
|
+
ring: "hsl(var(--ring))",
|
|
31
|
+
background: "hsl(var(--background))",
|
|
32
|
+
foreground: "hsl(var(--foreground))",
|
|
33
|
+
primary: {
|
|
34
|
+
DEFAULT: "hsl(var(--primary))",
|
|
35
|
+
foreground: "hsl(var(--primary-foreground))",
|
|
36
|
+
},
|
|
37
|
+
secondary: {
|
|
38
|
+
DEFAULT: "hsl(var(--secondary))",
|
|
39
|
+
foreground: "hsl(var(--secondary-foreground))",
|
|
40
|
+
},
|
|
41
|
+
interactive: {
|
|
42
|
+
DEFAULT: "var(--interactive)",
|
|
43
|
+
foreground: "var(--interactive-foreground)",
|
|
44
|
+
},
|
|
45
|
+
destructive: {
|
|
46
|
+
DEFAULT: "hsl(var(--destructive))",
|
|
47
|
+
foreground: "hsl(var(--destructive-foreground))",
|
|
48
|
+
},
|
|
49
|
+
muted: {
|
|
50
|
+
DEFAULT: "hsl(var(--muted))",
|
|
51
|
+
foreground: "hsl(var(--muted-foreground))",
|
|
52
|
+
},
|
|
53
|
+
accent: {
|
|
54
|
+
DEFAULT: "hsl(var(--accent))",
|
|
55
|
+
foreground: "hsl(var(--accent-foreground))",
|
|
56
|
+
},
|
|
57
|
+
popover: {
|
|
58
|
+
DEFAULT: "hsl(var(--popover))",
|
|
59
|
+
foreground: "hsl(var(--popover-foreground))",
|
|
60
|
+
},
|
|
61
|
+
card: {
|
|
62
|
+
DEFAULT: "hsl(var(--card))",
|
|
63
|
+
foreground: "hsl(var(--card-foreground))",
|
|
64
|
+
},
|
|
65
|
+
// Custom PXEngine colors
|
|
66
|
+
gray25: "var(--gray25)",
|
|
67
|
+
gray50: "var(--gray50)",
|
|
68
|
+
gray100: "var(--gray100)",
|
|
69
|
+
gray200: "var(--gray200)",
|
|
70
|
+
gray300: "var(--gray300)",
|
|
71
|
+
gray400: "var(--gray400)",
|
|
72
|
+
gray500: "var(--gray500)",
|
|
73
|
+
gray600: "var(--gray600)",
|
|
74
|
+
gray700: "var(--gray700)",
|
|
75
|
+
gray800: "var(--gray800)",
|
|
76
|
+
gray900: "var(--gray900)",
|
|
77
|
+
txtColor: "var(--txtColor)",
|
|
78
|
+
samepurple200: "#988cff",
|
|
79
|
+
purple100: "var(--purple100)",
|
|
80
|
+
purple200: "var(--purple200)",
|
|
81
|
+
purple500: "var(--purple500)",
|
|
82
|
+
purpleText: "var(--purple-text)",
|
|
83
|
+
purple50: "var(--purple50)",
|
|
84
|
+
purple20: "var(--purple20)",
|
|
85
|
+
purpleBorder2: "var(--purpleBorder2)",
|
|
86
|
+
purpleTextHover: "var(--purple-text-hover)",
|
|
87
|
+
purpleBorder: "var(--purple-border)",
|
|
88
|
+
green500: "var(--green500)",
|
|
89
|
+
grayPill: "var(--grayPill)",
|
|
90
|
+
sliderFill: "var(--slider-fill)",
|
|
91
|
+
sliderUnfill: "var(--slider-unfill)",
|
|
92
|
+
sliderButton: "var(--slider-button)",
|
|
93
|
+
lightSuccess: "#17C653",
|
|
94
|
+
lightWarning: "#DFA000",
|
|
95
|
+
success: "#5cb85c",
|
|
96
|
+
warningcolor: "var(--warning-color)",
|
|
97
|
+
label: "#071437",
|
|
98
|
+
paperBackground: "var(--paperBackground)",
|
|
99
|
+
darkModeCoal: "#0D0E12",
|
|
100
|
+
tutorialBorder: "var(--tutorialBorder)",
|
|
101
|
+
tutorialBg: "var(--tutorialBg)",
|
|
102
|
+
tutorialText: "var(--tutorialText)",
|
|
103
|
+
greenBackground: "var(--greenBackground)",
|
|
104
|
+
greenText: "var(--greenText)",
|
|
105
|
+
orangeBackground: "var(--orangeBackground)",
|
|
106
|
+
orangeText: "var(--orangeText)",
|
|
107
|
+
redBackground: "var(--redBackground)",
|
|
108
|
+
redText: "var(--redText)",
|
|
109
|
+
chart1: "var(--chart-1)",
|
|
110
|
+
chart2: "var(--chart-2)",
|
|
111
|
+
chart3: "var(--chart-3)",
|
|
112
|
+
chart4: "var(--chart-4)",
|
|
113
|
+
chart5: "var(--chart-5)",
|
|
114
|
+
primaryText: "var(--primaryText)",
|
|
115
|
+
primaryDark2: "var(--primaryDark2)",
|
|
116
|
+
purple200Dark: "var(--purple200Dark)",
|
|
117
|
+
purple20Dark: "var(--purple20Dark)",
|
|
118
|
+
purpleText1: "var(--purple-text-1)",
|
|
119
|
+
textPlaceholder: "var(--textPlaceholder)",
|
|
120
|
+
textSecondary: "var(--textSecondary)",
|
|
121
|
+
interactionBg: "var(--interaction-bg)",
|
|
122
|
+
purpleLight: "var(--purpleLight)",
|
|
123
|
+
purpleText2: "var(--purple-text-2)",
|
|
124
|
+
gold: "var(--gold)",
|
|
125
|
+
cardSurface: "var(--cardSurface)",
|
|
126
|
+
cardText: "var(--cardText)",
|
|
127
|
+
cardBorder: "var(--cardBorder)",
|
|
128
|
+
green100: "#dcfce7",
|
|
129
|
+
// Landing page colors
|
|
130
|
+
landingDarkestBlue: "var(--landing-darkest-blue)",
|
|
131
|
+
landingBlue: "var(--landing-blue)",
|
|
132
|
+
landingPurple: "var(--landing-purple)",
|
|
133
|
+
landingTextParagraph: "var(--landing-text-paragraph)",
|
|
134
|
+
landingTextHeading: "var(--landing-text-heading)",
|
|
135
|
+
landingBorderMain: "var(--landing-border-main)",
|
|
136
|
+
},
|
|
137
|
+
borderRadius: {
|
|
138
|
+
lg: "var(--radius)",
|
|
139
|
+
md: "calc(var(--radius) - 2px)",
|
|
140
|
+
sm: "calc(var(--radius) - 4px)",
|
|
141
|
+
},
|
|
142
|
+
keyframes: {
|
|
143
|
+
"accordion-down": {
|
|
144
|
+
from: { height: "0" },
|
|
145
|
+
to: { height: "var(--radix-accordion-content-height)" },
|
|
146
|
+
},
|
|
147
|
+
"accordion-up": {
|
|
148
|
+
from: { height: "var(--radix-accordion-content-height)" },
|
|
149
|
+
to: { height: "0" },
|
|
150
|
+
},
|
|
151
|
+
},
|
|
152
|
+
animation: {
|
|
153
|
+
"accordion-down": "accordion-down 0.2s ease-out",
|
|
154
|
+
"accordion-up": "accordion-up 0.2s ease-out",
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
plugins: [require("tailwindcss-animate")],
|
|
159
|
+
};
|