@ownzones/studio-ui 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +158 -0
- package/dist/components/connect-button.js +6 -6
- package/dist/components/connect-button.js.map +1 -1
- package/dist/components/connect-card.d.ts +2 -1
- package/dist/components/connect-card.d.ts.map +1 -1
- package/dist/components/connect-card.js +6 -3
- package/dist/components/connect-card.js.map +1 -1
- package/dist/components/connect-table.d.ts.map +1 -1
- package/dist/components/connect-table.js +1 -0
- package/dist/components/connect-table.js.map +1 -1
- package/dist/tokens/index.d.ts +25 -25
- package/dist/tokens/index.js +25 -25
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens.css +35 -35
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
# @ownzones/studio-ui
|
|
2
|
+
|
|
3
|
+
Design system components and tokens for Connect Studio plugins.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
Built on shadcn/ui and Radix primitives, themed with Carbon design language. Dark mode by default, zero border-radius, IBM Plex fonts, Ateliere red accents (#E03E3E).
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
pnpm add @ownzones/studio-ui
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Setup
|
|
16
|
+
|
|
17
|
+
### Tailwind CSS
|
|
18
|
+
|
|
19
|
+
```javascript
|
|
20
|
+
// tailwind.config.js
|
|
21
|
+
const studioPreset = require('@ownzones/studio-ui/tailwind-preset');
|
|
22
|
+
|
|
23
|
+
module.exports = {
|
|
24
|
+
presets: [studioPreset],
|
|
25
|
+
content: [
|
|
26
|
+
'./src/**/*.{ts,tsx}',
|
|
27
|
+
'./node_modules/@ownzones/studio-ui/dist/**/*.js'
|
|
28
|
+
],
|
|
29
|
+
};
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Import Styles
|
|
33
|
+
|
|
34
|
+
```typescript
|
|
35
|
+
import '@ownzones/studio-ui/styles.css';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Components
|
|
39
|
+
|
|
40
|
+
### Button
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { Button } from '@ownzones/studio-ui';
|
|
44
|
+
|
|
45
|
+
<Button variant="default">Default</Button>
|
|
46
|
+
<Button variant="secondary">Secondary</Button>
|
|
47
|
+
<Button variant="destructive">Delete</Button>
|
|
48
|
+
<Button variant="outline">Outline</Button>
|
|
49
|
+
<Button variant="ghost">Ghost</Button>
|
|
50
|
+
<Button size="sm">Small</Button>
|
|
51
|
+
<Button size="lg">Large</Button>
|
|
52
|
+
<Button size="icon">+</Button>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Card
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@ownzones/studio-ui';
|
|
59
|
+
|
|
60
|
+
<Card>
|
|
61
|
+
<CardHeader>
|
|
62
|
+
<CardTitle>Title</CardTitle>
|
|
63
|
+
<CardDescription>Description</CardDescription>
|
|
64
|
+
</CardHeader>
|
|
65
|
+
<CardContent>Content</CardContent>
|
|
66
|
+
<CardFooter><Button>Action</Button></CardFooter>
|
|
67
|
+
</Card>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Input & Label
|
|
71
|
+
|
|
72
|
+
```typescript
|
|
73
|
+
import { Input, Label } from '@ownzones/studio-ui';
|
|
74
|
+
|
|
75
|
+
<Label htmlFor="name">Name</Label>
|
|
76
|
+
<Input id="name" placeholder="Enter name" />
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Select
|
|
80
|
+
|
|
81
|
+
```typescript
|
|
82
|
+
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@ownzones/studio-ui';
|
|
83
|
+
|
|
84
|
+
<Select>
|
|
85
|
+
<SelectTrigger><SelectValue placeholder="Choose" /></SelectTrigger>
|
|
86
|
+
<SelectContent>
|
|
87
|
+
<SelectItem value="1">Option 1</SelectItem>
|
|
88
|
+
<SelectItem value="2">Option 2</SelectItem>
|
|
89
|
+
</SelectContent>
|
|
90
|
+
</Select>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Dialog
|
|
94
|
+
|
|
95
|
+
```typescript
|
|
96
|
+
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@ownzones/studio-ui';
|
|
97
|
+
|
|
98
|
+
<Dialog>
|
|
99
|
+
<DialogTrigger asChild><Button>Open</Button></DialogTrigger>
|
|
100
|
+
<DialogContent>
|
|
101
|
+
<DialogHeader><DialogTitle>Confirm</DialogTitle></DialogHeader>
|
|
102
|
+
<p>Are you sure?</p>
|
|
103
|
+
<DialogFooter>
|
|
104
|
+
<Button variant="outline">Cancel</Button>
|
|
105
|
+
<Button variant="destructive">Delete</Button>
|
|
106
|
+
</DialogFooter>
|
|
107
|
+
</DialogContent>
|
|
108
|
+
</Dialog>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Other Components
|
|
112
|
+
|
|
113
|
+
- **Tabs**: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`
|
|
114
|
+
- **Table**: `Table`, `TableHeader`, `TableBody`, `TableHead`, `TableRow`, `TableCell`
|
|
115
|
+
- **Badge**: `<Badge variant="default|secondary|destructive|outline">`
|
|
116
|
+
- **Textarea**: `<Textarea placeholder="..." rows={4} />`
|
|
117
|
+
- **Separator**: `<Separator />` (horizontal/vertical)
|
|
118
|
+
|
|
119
|
+
## Utilities
|
|
120
|
+
|
|
121
|
+
### cn()
|
|
122
|
+
|
|
123
|
+
Merge class names with Tailwind conflict resolution:
|
|
124
|
+
|
|
125
|
+
```typescript
|
|
126
|
+
import { cn } from '@ownzones/studio-ui';
|
|
127
|
+
|
|
128
|
+
cn('px-2 py-1', condition && 'bg-red-500', 'hover:bg-gray-900')
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## Design Tokens
|
|
132
|
+
|
|
133
|
+
| Token | Value |
|
|
134
|
+
|-------|-------|
|
|
135
|
+
| Background | `#111118` |
|
|
136
|
+
| Surface | `#16161e` |
|
|
137
|
+
| Border | `#28283a` |
|
|
138
|
+
| Accent | `#E03E3E` (Ateliere red) |
|
|
139
|
+
| Font (body) | IBM Plex Sans |
|
|
140
|
+
| Font (mono) | IBM Plex Mono |
|
|
141
|
+
| Border radius | 0 (sharp corners) |
|
|
142
|
+
|
|
143
|
+
## Building
|
|
144
|
+
|
|
145
|
+
```bash
|
|
146
|
+
pnpm build # Build components + CSS
|
|
147
|
+
pnpm type-check # TypeScript only
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
## Peer Dependencies
|
|
151
|
+
|
|
152
|
+
- `react@^18.0.0 || ^19.0.0`
|
|
153
|
+
- `react-dom@^18.0.0 || ^19.0.0`
|
|
154
|
+
|
|
155
|
+
## Related
|
|
156
|
+
|
|
157
|
+
- [@ownzones/studio-core](../studio-core) — Context and hooks
|
|
158
|
+
- [@ownzones/create-studio-plugin](../create-studio-plugin) — Plugin scaffolder
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
const variantStyles = {
|
|
3
3
|
primary: {
|
|
4
|
-
background: 'var(--studio-color-primary-
|
|
5
|
-
color: '
|
|
4
|
+
background: 'var(--studio-color-primary-500)',
|
|
5
|
+
color: '#ffffff',
|
|
6
6
|
border: 'none',
|
|
7
7
|
},
|
|
8
8
|
secondary: {
|
|
9
|
-
background: 'var(--studio-color-neutral-
|
|
10
|
-
color: 'var(--studio-color-neutral-
|
|
9
|
+
background: 'var(--studio-color-neutral-200)',
|
|
10
|
+
color: 'var(--studio-color-neutral-900)',
|
|
11
11
|
border: '1px solid var(--studio-color-neutral-300)',
|
|
12
12
|
},
|
|
13
13
|
ghost: {
|
|
14
14
|
background: 'transparent',
|
|
15
|
-
color: 'var(--studio-color-neutral-
|
|
15
|
+
color: 'var(--studio-color-neutral-600)',
|
|
16
16
|
border: '1px solid transparent',
|
|
17
17
|
},
|
|
18
18
|
danger: {
|
|
19
19
|
background: 'var(--studio-color-error)',
|
|
20
|
-
color: '
|
|
20
|
+
color: '#ffffff',
|
|
21
21
|
border: 'none',
|
|
22
22
|
},
|
|
23
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"connect-button.js","sourceRoot":"","sources":["../../src/components/connect-button.tsx"],"names":[],"mappings":";AAYA,MAAM,aAAa,GAA+C;IAChE,OAAO,EAAE;QACP,UAAU,EAAE,iCAAiC;QAC7C,KAAK,EAAE
|
|
1
|
+
{"version":3,"file":"connect-button.js","sourceRoot":"","sources":["../../src/components/connect-button.tsx"],"names":[],"mappings":";AAYA,MAAM,aAAa,GAA+C;IAChE,OAAO,EAAE;QACP,UAAU,EAAE,iCAAiC;QAC7C,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;KACf;IACD,SAAS,EAAE;QACT,UAAU,EAAE,iCAAiC;QAC7C,KAAK,EAAE,iCAAiC;QACxC,MAAM,EAAE,2CAA2C;KACpD;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,KAAK,EAAE,iCAAiC;QACxC,MAAM,EAAE,uBAAuB;KAChC;IACD,MAAM,EAAE;QACN,UAAU,EAAE,2BAA2B;QACvC,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF,MAAM,UAAU,GAA4C;IAC1D,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,4BAA4B,EAAE;IACnE,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,8BAA8B,EAAE;IACrE,EAAE,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,4BAA4B,EAAE;CACrE,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,EAC5B,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACW;IACnB,OAAO,CACL,kBACE,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,KAAK,EAAE;YACL,UAAU,EAAE,2BAA2B;YACvC,UAAU,EAAE,kCAAuD;YACnE,YAAY,EAAE,yBAAyB;YACvC,MAAM,EAAE,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;YACvD,OAAO,EAAE,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACtC,UAAU,EAAE,mCAAmC;YAC/C,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,uBAAuB;YAC5B,UAAU,EAAE,iCAAiC;YAC7C,GAAG,aAAa,CAAC,OAAO,CAAC;YACzB,GAAG,UAAU,CAAC,IAAI,CAAC;YACnB,GAAG,KAAK;SACT,KACG,KAAK,aAER,OAAO,IAAI,8BAAkB,MAAM,uBAAe,EAClD,QAAQ,IACF,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -3,7 +3,8 @@ export interface ConnectCardProps {
|
|
|
3
3
|
title?: string;
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
padding?: 'sm' | 'md' | 'lg';
|
|
6
|
+
accent?: boolean;
|
|
6
7
|
style?: CSSProperties;
|
|
7
8
|
}
|
|
8
|
-
export declare function ConnectCard({ title, children, padding, style, }: ConnectCardProps): React.JSX.Element;
|
|
9
|
+
export declare function ConnectCard({ title, children, padding, accent, style, }: ConnectCardProps): React.JSX.Element;
|
|
9
10
|
//# sourceMappingURL=connect-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"connect-card.d.ts","sourceRoot":"","sources":["../../src/components/connect-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAQD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,OAAc,EACd,KAAK,GACN,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"connect-card.d.ts","sourceRoot":"","sources":["../../src/components/connect-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAQD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,OAAc,EACd,MAAa,EACb,KAAK,GACN,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgCtC"}
|
|
@@ -4,14 +4,17 @@ const paddingMap = {
|
|
|
4
4
|
md: 'var(--studio-space-4)',
|
|
5
5
|
lg: 'var(--studio-space-6)',
|
|
6
6
|
};
|
|
7
|
-
export function ConnectCard({ title, children, padding = 'md', style, }) {
|
|
7
|
+
export function ConnectCard({ title, children, padding = 'md', accent = true, style, }) {
|
|
8
8
|
return (_jsxs("div", { style: {
|
|
9
|
-
background: 'var(--studio-color-neutral-
|
|
9
|
+
background: 'var(--studio-color-neutral-100)',
|
|
10
10
|
border: '1px solid var(--studio-color-neutral-200)',
|
|
11
|
+
borderLeft: accent
|
|
12
|
+
? '3px solid var(--studio-color-primary-500)'
|
|
13
|
+
: '1px solid var(--studio-color-neutral-200)',
|
|
11
14
|
borderRadius: 'var(--studio-radius-lg)',
|
|
12
|
-
boxShadow: 'var(--studio-shadow-sm)',
|
|
13
15
|
padding: paddingMap[padding],
|
|
14
16
|
fontFamily: 'var(--studio-font-family)',
|
|
17
|
+
color: 'var(--studio-color-neutral-900)',
|
|
15
18
|
...style,
|
|
16
19
|
}, children: [title && (_jsx("h3", { style: {
|
|
17
20
|
margin: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"connect-card.js","sourceRoot":"","sources":["../../src/components/connect-card.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"connect-card.js","sourceRoot":"","sources":["../../src/components/connect-card.tsx"],"names":[],"mappings":";AAUA,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE,uBAAuB;IAC3B,EAAE,EAAE,uBAAuB;IAC3B,EAAE,EAAE,uBAAuB;CAC5B,CAAC;AAEF,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,MAAM,GAAG,IAAI,EACb,KAAK,GACY;IACjB,OAAO,CACL,eACE,KAAK,EAAE;YACL,UAAU,EAAE,iCAAiC;YAC7C,MAAM,EAAE,2CAA2C;YACnD,UAAU,EAAE,MAAM;gBAChB,CAAC,CAAC,2CAA2C;gBAC7C,CAAC,CAAC,2CAA2C;YAC/C,YAAY,EAAE,yBAAyB;YACvC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;YAC5B,UAAU,EAAE,2BAA2B;YACvC,KAAK,EAAE,iCAAiC;YACxC,GAAG,KAAK;SACT,aAEA,KAAK,IAAI,CACR,aACE,KAAK,EAAE;oBACL,MAAM,EAAE,CAAC;oBACT,YAAY,EAAE,uBAAuB;oBACrC,QAAQ,EAAE,4BAA4B;oBACtC,UAAU,EAAE,oCAAyD;oBACrE,KAAK,EAAE,iCAAiC;iBACzC,YAEA,KAAK,GACH,CACN,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"connect-table.d.ts","sourceRoot":"","sources":["../../src/components/connect-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAkB,CAAC,IAAI;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB,CAAC,IAAI;IACrC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"connect-table.d.ts","sourceRoot":"","sources":["../../src/components/connect-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAkB,CAAC,IAAI;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB,CAAC,IAAI;IACrC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAoBD,wBAAgB,YAAY,CAAC,IAAI,EAAE,EACjC,OAAO,EACP,IAAI,EACJ,MAAM,EACN,YAAwB,EACxB,KAAK,GACN,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqD7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"connect-table.js","sourceRoot":"","sources":["../../src/components/connect-table.tsx"],"names":[],"mappings":";AAiBA,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,6CAA6C;IACtD,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,2CAA2C;IACzD,QAAQ,EAAE,4BAA4B;
|
|
1
|
+
{"version":3,"file":"connect-table.js","sourceRoot":"","sources":["../../src/components/connect-table.tsx"],"names":[],"mappings":";AAiBA,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,6CAA6C;IACtD,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,2CAA2C;IACzD,QAAQ,EAAE,4BAA4B;IACtC,KAAK,EAAE,iCAAiC;CACzC,CAAC;AAEF,MAAM,eAAe,GAAkB;IACrC,GAAG,SAAS;IACZ,UAAU,EAAE,oCAAyD;IACrE,KAAK,EAAE,iCAAiC;IACxC,UAAU,EAAE,gCAAgC;IAC5C,QAAQ,EAAE,4BAA4B;IACtC,aAAa,EAAE,WAAW;IAC1B,aAAa,EAAE,QAAQ;CACxB,CAAC;AAEF,MAAM,UAAU,YAAY,CAAO,EACjC,OAAO,EACP,IAAI,EACJ,MAAM,EACN,YAAY,GAAG,SAAS,EACxB,KAAK,GACmB;IACxB,OAAO,CACL,cACE,KAAK,EAAE;YACL,MAAM,EAAE,2CAA2C;YACnD,YAAY,EAAE,yBAAyB;YACvC,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,2BAA2B;YACvC,GAAG,KAAK;SACT,YAED,iBAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,aACzD,0BACE,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,aAAkB,KAAK,EAAE,EAAE,GAAG,eAAe,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,YAC9D,GAAG,CAAC,MAAM,IADJ,GAAG,CAAC,GAAG,CAEX,CACN,CAAC,GACC,GACC,EACR,0BACG,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,uBACE,aACE,OAAO,EAAE,OAAO,CAAC,MAAM,EACvB,KAAK,EAAE;gCACL,GAAG,SAAS;gCACZ,SAAS,EAAE,QAAQ;gCACnB,KAAK,EAAE,iCAAiC;gCACxC,OAAO,EAAE,uBAAuB;6BACjC,YAEA,YAAY,GACV,GACF,CACN,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChB,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,aAAkB,KAAK,EAAE,SAAS,YAC/B,GAAG,CAAC,MAAM;gCACT,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC;gCACjB,CAAC,CAAC,MAAM,CAAE,GAA+B,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,IAHpD,GAAG,CAAC,GAAG,CAIX,CACN,CAAC,IAPK,MAAM,CAAC,GAAG,CAAC,CAQf,CACN,CAAC,CACH,GACK,IACF,GACJ,CACP,CAAC;AACJ,CAAC"}
|
package/dist/tokens/index.d.ts
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Design token values as TypeScript constants.
|
|
2
|
+
* Design token values as TypeScript constants — Carbon Dark Theme.
|
|
3
3
|
* Use these when you need token values in JS (e.g. inline styles, charting libs).
|
|
4
4
|
* Prefer the CSS custom properties when possible.
|
|
5
5
|
*/
|
|
6
6
|
export declare const colors: {
|
|
7
7
|
readonly primary: {
|
|
8
|
-
readonly 50: "#
|
|
9
|
-
readonly 100: "#
|
|
10
|
-
readonly 200: "#
|
|
11
|
-
readonly 400: "#
|
|
12
|
-
readonly 500: "#
|
|
13
|
-
readonly 600: "#
|
|
14
|
-
readonly 700: "#
|
|
15
|
-
readonly 900: "#
|
|
8
|
+
readonly 50: "#fef2f2";
|
|
9
|
+
readonly 100: "#fee2e2";
|
|
10
|
+
readonly 200: "#fecaca";
|
|
11
|
+
readonly 400: "#f87171";
|
|
12
|
+
readonly 500: "#E03E3E";
|
|
13
|
+
readonly 600: "#DC3545";
|
|
14
|
+
readonly 700: "#b91c1c";
|
|
15
|
+
readonly 900: "#7f1d1d";
|
|
16
16
|
};
|
|
17
17
|
readonly neutral: {
|
|
18
|
-
readonly 0: "#
|
|
19
|
-
readonly 50: "#
|
|
20
|
-
readonly 100: "#
|
|
21
|
-
readonly 200: "#
|
|
22
|
-
readonly 300: "#
|
|
23
|
-
readonly 400: "#
|
|
24
|
-
readonly 500: "#
|
|
25
|
-
readonly 600: "#
|
|
26
|
-
readonly 700: "#
|
|
27
|
-
readonly 800: "#
|
|
28
|
-
readonly 900: "#
|
|
29
|
-
readonly 950: "#
|
|
18
|
+
readonly 0: "#111118";
|
|
19
|
+
readonly 50: "#16161e";
|
|
20
|
+
readonly 100: "#1c1c24";
|
|
21
|
+
readonly 200: "#2a2a36";
|
|
22
|
+
readonly 300: "#3a3a48";
|
|
23
|
+
readonly 400: "#6a6a7a";
|
|
24
|
+
readonly 500: "#8a8a96";
|
|
25
|
+
readonly 600: "#a8a8b3";
|
|
26
|
+
readonly 700: "#c8c8d0";
|
|
27
|
+
readonly 800: "#e0e0e6";
|
|
28
|
+
readonly 900: "#f4f4f4";
|
|
29
|
+
readonly 950: "#fafafa";
|
|
30
30
|
};
|
|
31
31
|
readonly success: "#22c55e";
|
|
32
32
|
readonly warning: "#f59e0b";
|
|
@@ -46,10 +46,10 @@ export declare const spacing: {
|
|
|
46
46
|
readonly 16: "4rem";
|
|
47
47
|
};
|
|
48
48
|
export declare const radius: {
|
|
49
|
-
readonly sm: "0
|
|
50
|
-
readonly md: "0
|
|
51
|
-
readonly lg: "0
|
|
52
|
-
readonly xl: "0
|
|
49
|
+
readonly sm: "0";
|
|
50
|
+
readonly md: "0";
|
|
51
|
+
readonly lg: "0";
|
|
52
|
+
readonly xl: "0";
|
|
53
53
|
readonly full: "9999px";
|
|
54
54
|
};
|
|
55
55
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/tokens/index.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Design token values as TypeScript constants.
|
|
2
|
+
* Design token values as TypeScript constants — Carbon Dark Theme.
|
|
3
3
|
* Use these when you need token values in JS (e.g. inline styles, charting libs).
|
|
4
4
|
* Prefer the CSS custom properties when possible.
|
|
5
5
|
*/
|
|
6
6
|
export const colors = {
|
|
7
7
|
primary: {
|
|
8
|
-
50: '#
|
|
9
|
-
100: '#
|
|
10
|
-
200: '#
|
|
11
|
-
400: '#
|
|
12
|
-
500: '#
|
|
13
|
-
600: '#
|
|
14
|
-
700: '#
|
|
15
|
-
900: '#
|
|
8
|
+
50: '#fef2f2',
|
|
9
|
+
100: '#fee2e2',
|
|
10
|
+
200: '#fecaca',
|
|
11
|
+
400: '#f87171',
|
|
12
|
+
500: '#E03E3E',
|
|
13
|
+
600: '#DC3545',
|
|
14
|
+
700: '#b91c1c',
|
|
15
|
+
900: '#7f1d1d',
|
|
16
16
|
},
|
|
17
17
|
neutral: {
|
|
18
|
-
0: '#
|
|
19
|
-
50: '#
|
|
20
|
-
100: '#
|
|
21
|
-
200: '#
|
|
22
|
-
300: '#
|
|
23
|
-
400: '#
|
|
24
|
-
500: '#
|
|
25
|
-
600: '#
|
|
26
|
-
700: '#
|
|
27
|
-
800: '#
|
|
28
|
-
900: '#
|
|
29
|
-
950: '#
|
|
18
|
+
0: '#111118',
|
|
19
|
+
50: '#16161e',
|
|
20
|
+
100: '#1c1c24',
|
|
21
|
+
200: '#2a2a36',
|
|
22
|
+
300: '#3a3a48',
|
|
23
|
+
400: '#6a6a7a',
|
|
24
|
+
500: '#8a8a96',
|
|
25
|
+
600: '#a8a8b3',
|
|
26
|
+
700: '#c8c8d0',
|
|
27
|
+
800: '#e0e0e6',
|
|
28
|
+
900: '#f4f4f4',
|
|
29
|
+
950: '#fafafa',
|
|
30
30
|
},
|
|
31
31
|
success: '#22c55e',
|
|
32
32
|
warning: '#f59e0b',
|
|
@@ -46,10 +46,10 @@ export const spacing = {
|
|
|
46
46
|
16: '4rem',
|
|
47
47
|
};
|
|
48
48
|
export const radius = {
|
|
49
|
-
sm: '0
|
|
50
|
-
md: '0
|
|
51
|
-
lg: '0
|
|
52
|
-
xl: '0
|
|
49
|
+
sm: '0',
|
|
50
|
+
md: '0',
|
|
51
|
+
lg: '0',
|
|
52
|
+
xl: '0',
|
|
53
53
|
full: '9999px',
|
|
54
54
|
};
|
|
55
55
|
//# sourceMappingURL=index.js.map
|
package/dist/tokens/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE;QACP,EAAE,EAAE,SAAS;QACb,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;KACf;IACD,OAAO,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;KACf;IACD,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;CACP,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,MAAM;IACT,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;CACF,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE;QACP,EAAE,EAAE,SAAS;QACb,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;KACf;IACD,OAAO,EAAE;QACP,CAAC,EAAE,SAAS;QACZ,EAAE,EAAE,SAAS;QACb,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;KACf;IACD,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;CACP,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,MAAM;IACT,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,MAAM;CACF,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,IAAI,EAAE,QAAQ;CACN,CAAC"}
|
package/dist/tokens.css
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Connect Studio Design Tokens
|
|
2
|
+
* Connect Studio Design Tokens — Carbon Dark Theme
|
|
3
3
|
*
|
|
4
4
|
* CSS custom properties for consistent styling across all plugins.
|
|
5
5
|
* Import in any framework: @import '@ownzones/studio-ui/tokens.css';
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
:root {
|
|
9
|
-
/* Colors — Primary */
|
|
10
|
-
--studio-color-primary-50: #
|
|
11
|
-
--studio-color-primary-100: #
|
|
12
|
-
--studio-color-primary-200: #
|
|
13
|
-
--studio-color-primary-400: #
|
|
14
|
-
--studio-color-primary-500: #
|
|
15
|
-
--studio-color-primary-600: #
|
|
16
|
-
--studio-color-primary-700: #
|
|
17
|
-
--studio-color-primary-900: #
|
|
9
|
+
/* Colors — Primary (Ateliere Red) */
|
|
10
|
+
--studio-color-primary-50: #fef2f2;
|
|
11
|
+
--studio-color-primary-100: #fee2e2;
|
|
12
|
+
--studio-color-primary-200: #fecaca;
|
|
13
|
+
--studio-color-primary-400: #f87171;
|
|
14
|
+
--studio-color-primary-500: #E03E3E;
|
|
15
|
+
--studio-color-primary-600: #DC3545;
|
|
16
|
+
--studio-color-primary-700: #b91c1c;
|
|
17
|
+
--studio-color-primary-900: #7f1d1d;
|
|
18
18
|
|
|
19
|
-
/* Colors — Neutral */
|
|
20
|
-
--studio-color-neutral-0: #
|
|
21
|
-
--studio-color-neutral-50: #
|
|
22
|
-
--studio-color-neutral-100: #
|
|
23
|
-
--studio-color-neutral-200: #
|
|
24
|
-
--studio-color-neutral-300: #
|
|
25
|
-
--studio-color-neutral-400: #
|
|
26
|
-
--studio-color-neutral-500: #
|
|
27
|
-
--studio-color-neutral-600: #
|
|
28
|
-
--studio-color-neutral-700: #
|
|
29
|
-
--studio-color-neutral-800: #
|
|
30
|
-
--studio-color-neutral-900: #
|
|
31
|
-
--studio-color-neutral-950: #
|
|
19
|
+
/* Colors — Neutral (Dark theme: low numbers = dark, high numbers = light) */
|
|
20
|
+
--studio-color-neutral-0: #111118;
|
|
21
|
+
--studio-color-neutral-50: #16161e;
|
|
22
|
+
--studio-color-neutral-100: #1c1c24;
|
|
23
|
+
--studio-color-neutral-200: #2a2a36;
|
|
24
|
+
--studio-color-neutral-300: #3a3a48;
|
|
25
|
+
--studio-color-neutral-400: #6a6a7a;
|
|
26
|
+
--studio-color-neutral-500: #8a8a96;
|
|
27
|
+
--studio-color-neutral-600: #a8a8b3;
|
|
28
|
+
--studio-color-neutral-700: #c8c8d0;
|
|
29
|
+
--studio-color-neutral-800: #e0e0e6;
|
|
30
|
+
--studio-color-neutral-900: #f4f4f4;
|
|
31
|
+
--studio-color-neutral-950: #fafafa;
|
|
32
32
|
|
|
33
33
|
/* Colors — Semantic */
|
|
34
34
|
--studio-color-success: #22c55e;
|
|
@@ -36,9 +36,9 @@
|
|
|
36
36
|
--studio-color-error: #ef4444;
|
|
37
37
|
--studio-color-info: #3b82f6;
|
|
38
38
|
|
|
39
|
-
/* Typography */
|
|
40
|
-
--studio-font-family: '
|
|
41
|
-
--studio-font-mono: '
|
|
39
|
+
/* Typography — IBM Plex (Carbon) */
|
|
40
|
+
--studio-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
41
|
+
--studio-font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
|
|
42
42
|
|
|
43
43
|
--studio-font-size-xs: 0.75rem;
|
|
44
44
|
--studio-font-size-sm: 0.875rem;
|
|
@@ -68,17 +68,17 @@
|
|
|
68
68
|
--studio-space-12: 3rem;
|
|
69
69
|
--studio-space-16: 4rem;
|
|
70
70
|
|
|
71
|
-
/* Border Radius */
|
|
72
|
-
--studio-radius-sm: 0
|
|
73
|
-
--studio-radius-md: 0
|
|
74
|
-
--studio-radius-lg: 0
|
|
75
|
-
--studio-radius-xl: 0
|
|
71
|
+
/* Border Radius — Carbon: zero */
|
|
72
|
+
--studio-radius-sm: 0;
|
|
73
|
+
--studio-radius-md: 0;
|
|
74
|
+
--studio-radius-lg: 0;
|
|
75
|
+
--studio-radius-xl: 0;
|
|
76
76
|
--studio-radius-full: 9999px;
|
|
77
77
|
|
|
78
|
-
/* Shadows */
|
|
79
|
-
--studio-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.
|
|
80
|
-
--studio-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.
|
|
81
|
-
--studio-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.
|
|
78
|
+
/* Shadows (subtle for dark theme) */
|
|
79
|
+
--studio-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
|
80
|
+
--studio-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
|
|
81
|
+
--studio-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
|
|
82
82
|
|
|
83
83
|
/* Transitions */
|
|
84
84
|
--studio-transition-fast: 150ms ease;
|