@privateers/ui 0.3.20 → 0.4.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/dist/index.cjs +5 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +5 -3
- package/dist/index.js.map +1 -1
- package/dist/styles/brands/index.css +1 -0
- package/dist/styles/brands/privateers-2026.css +198 -0
- package/dist/styles/index.css +6 -0
- package/dist/styles/library.css +6 -0
- package/dist/styles/tokens.css +10 -0
- package/dist/tailwind/preset.cjs +11 -1
- package/dist/tailwind/preset.cjs.map +1 -1
- package/dist/tailwind/preset.js +11 -1
- package/dist/tailwind/preset.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Privateers 2026 Brand Theme — "Petroleum"
|
|
3
|
+
*
|
|
4
|
+
* The new Privateers mini brand book, layered onto the @privateers/ui token
|
|
5
|
+
* system as an opt-in brand. The dark petroleum universe is the brand
|
|
6
|
+
* standard; light mode is fully defined. Nothing here affects the default
|
|
7
|
+
* Privateers theme — these tokens only apply under the `.brand-privateers-2026`
|
|
8
|
+
* class (or `html.brand-privateers-2026`). Toggle off → default theme, untouched.
|
|
9
|
+
*
|
|
10
|
+
* Usage:
|
|
11
|
+
* @import '@privateers/ui/styles/brands/privateers-2026.css';
|
|
12
|
+
*
|
|
13
|
+
* <html class="dark brand-privateers-2026"> ← dark petroleum (recommended)
|
|
14
|
+
* <html class="brand-privateers-2026"> ← light universe
|
|
15
|
+
*
|
|
16
|
+
* Fonts (self-host in the consuming app; never reference an external CDN):
|
|
17
|
+
* Display — H1 / H2 : "IBM Plex Serif" weights 400 / 500 / 600
|
|
18
|
+
* Body / UI / H3+ : "Mona Sans" weights 400 / 500 / 600 / 700
|
|
19
|
+
* Storybook self-hosts both via .storybook/preview-head.html + public/fonts/.
|
|
20
|
+
*
|
|
21
|
+
* Brand book values (hex — do NOT change without a brand decision):
|
|
22
|
+
* background #142024 · surface #16272B · raised #1C3338 · border #2A4248
|
|
23
|
+
* primary #517C83 (hover #5E8E96) · text #FFFFFF · text-secondary #ABD0D3
|
|
24
|
+
* text-muted #8E909E · accent / CTA red #FF5449
|
|
25
|
+
*
|
|
26
|
+
* RULE: reference these tokens in product code — never hardcode hex.
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
/* ============================================================
|
|
30
|
+
1. Light universe (base — the brand's "day" mode)
|
|
31
|
+
============================================================ */
|
|
32
|
+
:root .brand-privateers-2026,
|
|
33
|
+
.brand-privateers-2026,
|
|
34
|
+
html.brand-privateers-2026 {
|
|
35
|
+
/* Typography */
|
|
36
|
+
--font-sans: "Mona Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* body, buttons, H3+ */
|
|
37
|
+
--font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif; /* H1 / H2 only */
|
|
38
|
+
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
39
|
+
|
|
40
|
+
/* Surfaces */
|
|
41
|
+
--background: #ffffff;
|
|
42
|
+
--foreground: #142024;
|
|
43
|
+
--card: #ffffff;
|
|
44
|
+
--card-foreground: #142024;
|
|
45
|
+
--popover: #ffffff;
|
|
46
|
+
--popover-foreground: #142024;
|
|
47
|
+
|
|
48
|
+
/* Primary — petroleum */
|
|
49
|
+
--primary: #517c83;
|
|
50
|
+
--primary-foreground: #ffffff;
|
|
51
|
+
--primary-hover: #456a70;
|
|
52
|
+
|
|
53
|
+
/* Secondary / muted / accent — subtle grey surfaces (shadcn semantics, NOT the red) */
|
|
54
|
+
--secondary: #ececec;
|
|
55
|
+
--secondary-foreground: #142024;
|
|
56
|
+
--muted: #ececec;
|
|
57
|
+
--muted-foreground: #5f6470; /* darkened slate so secondary text clears AA on white */
|
|
58
|
+
--accent: #ececec;
|
|
59
|
+
--accent-foreground: #142024;
|
|
60
|
+
|
|
61
|
+
/* CTA — brand splash red, used sparingly.
|
|
62
|
+
Deepened in light mode so white text clears WCAG AA (#d23b30 ≈ 4.8:1).
|
|
63
|
+
Dark mode keeps the pure brand red #FF5449 (≈ 5.2:1 on petroleum). */
|
|
64
|
+
--cta: #d23b30;
|
|
65
|
+
--cta-foreground: #ffffff;
|
|
66
|
+
--destructive: #d23b30; /* brand red, deepened for legibility on light */
|
|
67
|
+
|
|
68
|
+
/* Lines & focus */
|
|
69
|
+
--border: #d8dadf;
|
|
70
|
+
--input: #d8dadf;
|
|
71
|
+
--ring: #517c83;
|
|
72
|
+
|
|
73
|
+
/* Charts — petroleum scale + tier accents */
|
|
74
|
+
--chart-1: #517c83;
|
|
75
|
+
--chart-2: #7badb1;
|
|
76
|
+
--chart-3: #abd0d3;
|
|
77
|
+
--chart-4: #2f9e7c;
|
|
78
|
+
--chart-5: #ff5449;
|
|
79
|
+
|
|
80
|
+
/* Confidence tiers (not in the brand book — tuned to the petroleum palette).
|
|
81
|
+
Light-mode values are deepened so `text-tier-*` clears WCAG AA (≥4.5:1) on
|
|
82
|
+
white, including when rendered as text on the 15%-tinted badge background. */
|
|
83
|
+
--tier-1: #1a7a5c; /* high confidence / auto-reply (green, ≈ 5.3:1 on white) */
|
|
84
|
+
--tier-2: #956211; /* medium / AI suggests (amber, ≈ 5.1:1 on white) */
|
|
85
|
+
--tier-3: #d23b30; /* escalation (brand red, ≈ 4.8:1 on white) */
|
|
86
|
+
|
|
87
|
+
/* Radius — inputs(md) 10px · cards(xl) 16px · buttons & badges pill */
|
|
88
|
+
--radius: 0.75rem;
|
|
89
|
+
--radius-pill: 999px;
|
|
90
|
+
|
|
91
|
+
/* Brand extras (consumed by product apps) */
|
|
92
|
+
--surface: #ececec;
|
|
93
|
+
--surface-raised: #ffffff;
|
|
94
|
+
--text: #142024;
|
|
95
|
+
--text-secondary: #16272b;
|
|
96
|
+
--text-muted: #8e909e;
|
|
97
|
+
--overlay: #0f1a1d;
|
|
98
|
+
|
|
99
|
+
/* Sidebar */
|
|
100
|
+
--sidebar: #ffffff;
|
|
101
|
+
--sidebar-foreground: #142024;
|
|
102
|
+
--sidebar-primary: #517c83;
|
|
103
|
+
--sidebar-primary-foreground: #ffffff;
|
|
104
|
+
--sidebar-accent: #ececec;
|
|
105
|
+
--sidebar-accent-foreground: #142024;
|
|
106
|
+
--sidebar-border: #d8dadf;
|
|
107
|
+
--sidebar-ring: #517c83;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* ============================================================
|
|
111
|
+
2. Dark petroleum universe (brand standard)
|
|
112
|
+
============================================================ */
|
|
113
|
+
.dark .brand-privateers-2026,
|
|
114
|
+
.brand-privateers-2026.dark,
|
|
115
|
+
.dark.brand-privateers-2026,
|
|
116
|
+
.brand-privateers-2026 .dark,
|
|
117
|
+
html.brand-privateers-2026.dark,
|
|
118
|
+
html.dark.brand-privateers-2026 {
|
|
119
|
+
/* Surfaces */
|
|
120
|
+
--background: #142024;
|
|
121
|
+
--foreground: #ffffff;
|
|
122
|
+
--card: #16272b;
|
|
123
|
+
--card-foreground: #ffffff;
|
|
124
|
+
--popover: #1c3338;
|
|
125
|
+
--popover-foreground: #ffffff;
|
|
126
|
+
|
|
127
|
+
/* Primary — petroleum */
|
|
128
|
+
--primary: #517c83;
|
|
129
|
+
--primary-foreground: #ffffff;
|
|
130
|
+
--primary-hover: #5e8e96;
|
|
131
|
+
|
|
132
|
+
/* Secondary / muted / accent — raised petroleum surfaces */
|
|
133
|
+
--secondary: #1c3338;
|
|
134
|
+
--secondary-foreground: #ffffff;
|
|
135
|
+
--muted: #1c3338;
|
|
136
|
+
--muted-foreground: #8e909e;
|
|
137
|
+
--accent: #1c3338;
|
|
138
|
+
--accent-foreground: #ffffff;
|
|
139
|
+
|
|
140
|
+
/* CTA — brand splash red */
|
|
141
|
+
--cta: #ff5449;
|
|
142
|
+
--cta-foreground: #ffffff;
|
|
143
|
+
--destructive: #ff5449;
|
|
144
|
+
|
|
145
|
+
/* Lines & focus */
|
|
146
|
+
--border: #2a4248;
|
|
147
|
+
--input: #2a4248;
|
|
148
|
+
--ring: #517c83;
|
|
149
|
+
|
|
150
|
+
/* Charts */
|
|
151
|
+
--chart-1: #517c83;
|
|
152
|
+
--chart-2: #7badb1;
|
|
153
|
+
--chart-3: #abd0d3;
|
|
154
|
+
--chart-4: #2f9e7c;
|
|
155
|
+
--chart-5: #ff5449;
|
|
156
|
+
|
|
157
|
+
/* Confidence tiers */
|
|
158
|
+
--tier-1: #2f9e7c; /* high confidence / auto-reply */
|
|
159
|
+
--tier-2: #e0a23b; /* medium / AI suggests */
|
|
160
|
+
--tier-3: #ff5449; /* escalation (brand red) */
|
|
161
|
+
|
|
162
|
+
/* Brand extras */
|
|
163
|
+
--surface: #16272b;
|
|
164
|
+
--surface-raised: #1c3338;
|
|
165
|
+
--text: #ffffff;
|
|
166
|
+
--text-secondary: #abd0d3;
|
|
167
|
+
--text-muted: #8e909e;
|
|
168
|
+
--overlay: #0f1a1d;
|
|
169
|
+
|
|
170
|
+
/* Sidebar */
|
|
171
|
+
--sidebar: #16272b;
|
|
172
|
+
--sidebar-foreground: #ffffff;
|
|
173
|
+
--sidebar-primary: #517c83;
|
|
174
|
+
--sidebar-primary-foreground: #ffffff;
|
|
175
|
+
--sidebar-accent: #1c3338;
|
|
176
|
+
--sidebar-accent-foreground: #ffffff;
|
|
177
|
+
--sidebar-border: #2a4248;
|
|
178
|
+
--sidebar-ring: #517c83;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* ============================================================
|
|
182
|
+
3. Signature shapes & type (brand-scoped — no leakage to other themes)
|
|
183
|
+
============================================================ */
|
|
184
|
+
|
|
185
|
+
/* Pill buttons, badges & pagination — the brand's defining geometry.
|
|
186
|
+
Unlayered, so it overrides Tailwind's rounded-* utilities under this brand. */
|
|
187
|
+
.brand-privateers-2026 [data-slot="button"],
|
|
188
|
+
.brand-privateers-2026 [data-slot="badge"],
|
|
189
|
+
.brand-privateers-2026 [data-slot="pagination-link"] {
|
|
190
|
+
border-radius: var(--radius-pill);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* IBM Plex Serif is reserved for H1 / H2 (Medium). Everything else stays Mona Sans. */
|
|
194
|
+
.brand-privateers-2026 :is(h1, h2, .display) {
|
|
195
|
+
font-family: var(--font-display);
|
|
196
|
+
font-weight: 500;
|
|
197
|
+
letter-spacing: -0.01em;
|
|
198
|
+
}
|
package/dist/styles/index.css
CHANGED
|
@@ -38,6 +38,12 @@
|
|
|
38
38
|
--color-input: var(--input);
|
|
39
39
|
--color-border: var(--border);
|
|
40
40
|
--color-destructive: var(--destructive);
|
|
41
|
+
--color-tier-1: var(--tier-1);
|
|
42
|
+
--color-tier-2: var(--tier-2);
|
|
43
|
+
--color-tier-3: var(--tier-3);
|
|
44
|
+
--color-cta: var(--cta);
|
|
45
|
+
--color-cta-foreground: var(--cta-foreground);
|
|
46
|
+
--font-display: var(--font-display);
|
|
41
47
|
--color-accent-foreground: var(--accent-foreground);
|
|
42
48
|
--color-accent: var(--accent);
|
|
43
49
|
--color-muted-foreground: var(--muted-foreground);
|
package/dist/styles/library.css
CHANGED
|
@@ -35,6 +35,12 @@
|
|
|
35
35
|
--color-border: var(--border);
|
|
36
36
|
--color-overlay: var(--overlay);
|
|
37
37
|
--color-destructive: var(--destructive);
|
|
38
|
+
--color-tier-1: var(--tier-1);
|
|
39
|
+
--color-tier-2: var(--tier-2);
|
|
40
|
+
--color-tier-3: var(--tier-3);
|
|
41
|
+
--color-cta: var(--cta);
|
|
42
|
+
--color-cta-foreground: var(--cta-foreground);
|
|
43
|
+
--font-display: var(--font-display);
|
|
38
44
|
--color-accent-foreground: var(--accent-foreground);
|
|
39
45
|
--color-accent: var(--accent);
|
|
40
46
|
--color-muted-foreground: var(--muted-foreground);
|
package/dist/styles/tokens.css
CHANGED
|
@@ -68,6 +68,16 @@
|
|
|
68
68
|
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
69
69
|
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
70
70
|
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
71
|
+
|
|
72
|
+
/* Additive tokens — consumed by brand themes (e.g. privateers-2026) and any
|
|
73
|
+
product that wants confidence tiers, a dedicated CTA colour, or a display
|
|
74
|
+
font. Harmless defaults under the default theme; brands override as needed. */
|
|
75
|
+
--tier-1: #2f9e7c; /* high confidence */
|
|
76
|
+
--tier-2: #e0a23b; /* medium confidence */
|
|
77
|
+
--tier-3: var(--destructive); /* escalation */
|
|
78
|
+
--cta: var(--primary); /* call-to-action fill (brands may set to an accent) */
|
|
79
|
+
--cta-foreground: var(--primary-foreground);
|
|
80
|
+
--font-display: var(--font-sans); /* display/heading family (brands may set a serif) */
|
|
71
81
|
}
|
|
72
82
|
|
|
73
83
|
.dark {
|
package/dist/tailwind/preset.cjs
CHANGED
|
@@ -8,7 +8,8 @@ var privateersPreset = {
|
|
|
8
8
|
extend: {
|
|
9
9
|
fontFamily: {
|
|
10
10
|
sans: ["var(--font-sans)"],
|
|
11
|
-
mono: ["var(--font-mono)"]
|
|
11
|
+
mono: ["var(--font-mono)"],
|
|
12
|
+
display: ["var(--font-display)"]
|
|
12
13
|
},
|
|
13
14
|
colors: {
|
|
14
15
|
background: "var(--background)",
|
|
@@ -40,6 +41,15 @@ var privateersPreset = {
|
|
|
40
41
|
destructive: {
|
|
41
42
|
DEFAULT: "var(--destructive)"
|
|
42
43
|
},
|
|
44
|
+
cta: {
|
|
45
|
+
DEFAULT: "var(--cta)",
|
|
46
|
+
foreground: "var(--cta-foreground)"
|
|
47
|
+
},
|
|
48
|
+
tier: {
|
|
49
|
+
1: "var(--tier-1)",
|
|
50
|
+
2: "var(--tier-2)",
|
|
51
|
+
3: "var(--tier-3)"
|
|
52
|
+
},
|
|
43
53
|
border: "var(--border)",
|
|
44
54
|
input: "var(--input)",
|
|
45
55
|
ring: "var(--ring)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":";;;;;AAgBO,IAAM,gBAAA,GAAoC;AAAA,EAC/C,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,CAAC,kBAAkB,CAAA;AAAA,QACzB,IAAA,EAAM,CAAC,kBAAkB;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"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","file":"preset.cjs","sourcesContent":["import type { Config } from \"tailwindcss\"\n\n/**\n * Privateers Design System Tailwind Preset\n *\n * Use this preset in your tailwind.config.ts:\n *\n * ```ts\n * import { privateersPreset } from '@privateers/ui/tailwind/preset'\n *\n * export default {\n * presets: [privateersPreset],\n * // ... your config\n * }\n * ```\n */\nexport const privateersPreset: Partial<Config> = {\n theme: {\n extend: {\n fontFamily: {\n sans: [\"var(--font-sans)\"],\n mono: [\"var(--font-mono)\"],\n display: [\"var(--font-display)\"],\n },\n colors: {\n background: \"var(--background)\",\n foreground: \"var(--foreground)\",\n card: {\n DEFAULT: \"var(--card)\",\n foreground: \"var(--card-foreground)\",\n },\n popover: {\n DEFAULT: \"var(--popover)\",\n foreground: \"var(--popover-foreground)\",\n },\n primary: {\n DEFAULT: \"var(--primary)\",\n foreground: \"var(--primary-foreground)\",\n },\n secondary: {\n DEFAULT: \"var(--secondary)\",\n foreground: \"var(--secondary-foreground)\",\n },\n muted: {\n DEFAULT: \"var(--muted)\",\n foreground: \"var(--muted-foreground)\",\n },\n accent: {\n DEFAULT: \"var(--accent)\",\n foreground: \"var(--accent-foreground)\",\n },\n destructive: {\n DEFAULT: \"var(--destructive)\",\n },\n cta: {\n DEFAULT: \"var(--cta)\",\n foreground: \"var(--cta-foreground)\",\n },\n tier: {\n 1: \"var(--tier-1)\",\n 2: \"var(--tier-2)\",\n 3: \"var(--tier-3)\",\n },\n border: \"var(--border)\",\n input: \"var(--input)\",\n ring: \"var(--ring)\",\n overlay: \"var(--overlay)\",\n chart: {\n 1: \"var(--chart-1)\",\n 2: \"var(--chart-2)\",\n 3: \"var(--chart-3)\",\n 4: \"var(--chart-4)\",\n 5: \"var(--chart-5)\",\n },\n sidebar: {\n DEFAULT: \"var(--sidebar)\",\n foreground: \"var(--sidebar-foreground)\",\n primary: \"var(--sidebar-primary)\",\n \"primary-foreground\": \"var(--sidebar-primary-foreground)\",\n accent: \"var(--sidebar-accent)\",\n \"accent-foreground\": \"var(--sidebar-accent-foreground)\",\n border: \"var(--sidebar-border)\",\n ring: \"var(--sidebar-ring)\",\n },\n },\n borderRadius: {\n sm: \"calc(var(--radius) - 4px)\",\n md: \"calc(var(--radius) - 2px)\",\n lg: \"var(--radius)\",\n xl: \"calc(var(--radius) + 4px)\",\n \"2xl\": \"calc(var(--radius) + 8px)\",\n \"3xl\": \"calc(var(--radius) + 12px)\",\n \"4xl\": \"calc(var(--radius) + 16px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: \"0\" },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: \"0\" },\n },\n \"fade-in\": {\n from: { opacity: \"0\" },\n to: { opacity: \"1\" },\n },\n \"fade-out\": {\n from: { opacity: \"1\" },\n to: { opacity: \"0\" },\n },\n \"slide-in-from-top\": {\n from: { transform: \"translateY(-100%)\" },\n to: { transform: \"translateY(0)\" },\n },\n \"slide-in-from-bottom\": {\n from: { transform: \"translateY(100%)\" },\n to: { transform: \"translateY(0)\" },\n },\n \"slide-in-from-left\": {\n from: { transform: \"translateX(-100%)\" },\n to: { transform: \"translateX(0)\" },\n },\n \"slide-in-from-right\": {\n from: { transform: \"translateX(100%)\" },\n to: { transform: \"translateX(0)\" },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n \"fade-in\": \"fade-in 0.2s ease-out\",\n \"fade-out\": \"fade-out 0.2s ease-out\",\n \"slide-in-from-top\": \"slide-in-from-top 0.3s ease-out\",\n \"slide-in-from-bottom\": \"slide-in-from-bottom 0.3s ease-out\",\n \"slide-in-from-left\": \"slide-in-from-left 0.3s ease-out\",\n \"slide-in-from-right\": \"slide-in-from-right 0.3s ease-out\",\n },\n },\n },\n}\n\nexport default privateersPreset\n"]}
|
package/dist/tailwind/preset.js
CHANGED
|
@@ -4,7 +4,8 @@ var privateersPreset = {
|
|
|
4
4
|
extend: {
|
|
5
5
|
fontFamily: {
|
|
6
6
|
sans: ["var(--font-sans)"],
|
|
7
|
-
mono: ["var(--font-mono)"]
|
|
7
|
+
mono: ["var(--font-mono)"],
|
|
8
|
+
display: ["var(--font-display)"]
|
|
8
9
|
},
|
|
9
10
|
colors: {
|
|
10
11
|
background: "var(--background)",
|
|
@@ -36,6 +37,15 @@ var privateersPreset = {
|
|
|
36
37
|
destructive: {
|
|
37
38
|
DEFAULT: "var(--destructive)"
|
|
38
39
|
},
|
|
40
|
+
cta: {
|
|
41
|
+
DEFAULT: "var(--cta)",
|
|
42
|
+
foreground: "var(--cta-foreground)"
|
|
43
|
+
},
|
|
44
|
+
tier: {
|
|
45
|
+
1: "var(--tier-1)",
|
|
46
|
+
2: "var(--tier-2)",
|
|
47
|
+
3: "var(--tier-3)"
|
|
48
|
+
},
|
|
39
49
|
border: "var(--border)",
|
|
40
50
|
input: "var(--input)",
|
|
41
51
|
ring: "var(--ring)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":";AAgBO,IAAM,gBAAA,GAAoC;AAAA,EAC/C,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,CAAC,kBAAkB,CAAA;AAAA,QACzB,IAAA,EAAM,CAAC,kBAAkB;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"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","file":"preset.js","sourcesContent":["import type { Config } from \"tailwindcss\"\n\n/**\n * Privateers Design System Tailwind Preset\n *\n * Use this preset in your tailwind.config.ts:\n *\n * ```ts\n * import { privateersPreset } from '@privateers/ui/tailwind/preset'\n *\n * export default {\n * presets: [privateersPreset],\n * // ... your config\n * }\n * ```\n */\nexport const privateersPreset: Partial<Config> = {\n theme: {\n extend: {\n fontFamily: {\n sans: [\"var(--font-sans)\"],\n mono: [\"var(--font-mono)\"],\n display: [\"var(--font-display)\"],\n },\n colors: {\n background: \"var(--background)\",\n foreground: \"var(--foreground)\",\n card: {\n DEFAULT: \"var(--card)\",\n foreground: \"var(--card-foreground)\",\n },\n popover: {\n DEFAULT: \"var(--popover)\",\n foreground: \"var(--popover-foreground)\",\n },\n primary: {\n DEFAULT: \"var(--primary)\",\n foreground: \"var(--primary-foreground)\",\n },\n secondary: {\n DEFAULT: \"var(--secondary)\",\n foreground: \"var(--secondary-foreground)\",\n },\n muted: {\n DEFAULT: \"var(--muted)\",\n foreground: \"var(--muted-foreground)\",\n },\n accent: {\n DEFAULT: \"var(--accent)\",\n foreground: \"var(--accent-foreground)\",\n },\n destructive: {\n DEFAULT: \"var(--destructive)\",\n },\n cta: {\n DEFAULT: \"var(--cta)\",\n foreground: \"var(--cta-foreground)\",\n },\n tier: {\n 1: \"var(--tier-1)\",\n 2: \"var(--tier-2)\",\n 3: \"var(--tier-3)\",\n },\n border: \"var(--border)\",\n input: \"var(--input)\",\n ring: \"var(--ring)\",\n overlay: \"var(--overlay)\",\n chart: {\n 1: \"var(--chart-1)\",\n 2: \"var(--chart-2)\",\n 3: \"var(--chart-3)\",\n 4: \"var(--chart-4)\",\n 5: \"var(--chart-5)\",\n },\n sidebar: {\n DEFAULT: \"var(--sidebar)\",\n foreground: \"var(--sidebar-foreground)\",\n primary: \"var(--sidebar-primary)\",\n \"primary-foreground\": \"var(--sidebar-primary-foreground)\",\n accent: \"var(--sidebar-accent)\",\n \"accent-foreground\": \"var(--sidebar-accent-foreground)\",\n border: \"var(--sidebar-border)\",\n ring: \"var(--sidebar-ring)\",\n },\n },\n borderRadius: {\n sm: \"calc(var(--radius) - 4px)\",\n md: \"calc(var(--radius) - 2px)\",\n lg: \"var(--radius)\",\n xl: \"calc(var(--radius) + 4px)\",\n \"2xl\": \"calc(var(--radius) + 8px)\",\n \"3xl\": \"calc(var(--radius) + 12px)\",\n \"4xl\": \"calc(var(--radius) + 16px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: \"0\" },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: \"0\" },\n },\n \"fade-in\": {\n from: { opacity: \"0\" },\n to: { opacity: \"1\" },\n },\n \"fade-out\": {\n from: { opacity: \"1\" },\n to: { opacity: \"0\" },\n },\n \"slide-in-from-top\": {\n from: { transform: \"translateY(-100%)\" },\n to: { transform: \"translateY(0)\" },\n },\n \"slide-in-from-bottom\": {\n from: { transform: \"translateY(100%)\" },\n to: { transform: \"translateY(0)\" },\n },\n \"slide-in-from-left\": {\n from: { transform: \"translateX(-100%)\" },\n to: { transform: \"translateX(0)\" },\n },\n \"slide-in-from-right\": {\n from: { transform: \"translateX(100%)\" },\n to: { transform: \"translateX(0)\" },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n \"fade-in\": \"fade-in 0.2s ease-out\",\n \"fade-out\": \"fade-out 0.2s ease-out\",\n \"slide-in-from-top\": \"slide-in-from-top 0.3s ease-out\",\n \"slide-in-from-bottom\": \"slide-in-from-bottom 0.3s ease-out\",\n \"slide-in-from-left\": \"slide-in-from-left 0.3s ease-out\",\n \"slide-in-from-right\": \"slide-in-from-right 0.3s ease-out\",\n },\n },\n },\n}\n\nexport default privateersPreset\n"]}
|