@privateers/ui 0.3.17 → 0.3.18

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.
Files changed (13) hide show
  1. package/dist/index.cjs +8 -10
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +1 -2
  4. package/dist/index.d.ts +1 -2
  5. package/dist/index.js +8 -10
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles/brands/dis-creadis.css +7 -17
  8. package/dist/styles/brands/index.css +1 -0
  9. package/dist/styles/brands/m-plus.css +2 -5
  10. package/dist/styles/brands/mission-control.css +140 -0
  11. package/package.json +3 -3
  12. package/dist/styles/brands/retur.css +0 -152
  13. package/dist/styles/library.css +0 -69
package/dist/styles/brands/dis-creadis.css CHANGED
@@ -21,14 +21,13 @@
21
21
  */
22
22
 
23
23
  :root .brand-dis-creadis,
24
- .brand-dis-creadis,
25
- html.brand-dis-creadis {
24
+ .brand-dis-creadis {
26
25
  /* Typography - TT Commons for DIS/CREADIS brand */
27
26
  --font-sans: "TT Commons", ui-sans-serif, system-ui, sans-serif;
28
27
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
29
28
 
30
29
  /* Base colors - Slate */
31
- --background: oklch(0.8443 0.003 220.58);
30
+ --background: oklch(0.3644 0.029 220.58 / 10%);
32
31
  --foreground: oklch(0.15 0.015 250);
33
32
 
34
33
  /* Card */
@@ -59,8 +58,8 @@ html.brand-dis-creadis {
59
58
  --destructive: oklch(0.6632 0.1875 333.2);
60
59
 
61
60
  /* Border & Input */
62
- --border: oklch(0.75 0.008 250);
63
- --input: oklch(0.75 0.008 250);
61
+ --border: oklch(0.90 0.008 250);
62
+ --input: oklch(0.90 0.008 250);
64
63
  --ring: oklch(0.50 0.12 250);
65
64
 
66
65
  /* Chart colors - Blue to Teal gradient */
@@ -70,8 +69,8 @@ html.brand-dis-creadis {
70
69
  --chart-4: oklch(0.50 0.15 200);
71
70
  --chart-5: oklch(0.55 0.15 185);
72
71
 
73
- /* Border radius - Subtle rounding for professional look */
74
- --radius: 0.5rem;
72
+ /* Border radius - Slightly smaller for professional look */
73
+ --radius: 0.0rem;
75
74
 
76
75
  /* Sidebar */
77
76
  --sidebar: oklch(0.98 0.002 250);
@@ -84,20 +83,11 @@ html.brand-dis-creadis {
84
83
  --sidebar-ring: oklch(0.50 0.12 250);
85
84
  }
86
85
 
87
- /* Light mode: semi-transparent white background on input elements and outline buttons */
88
- :root .brand-dis-creadis :is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="combobox-chips"], [data-slot="button"][data-variant="outline"], [data-slot="pagination-link"][data-variant="outline"]),
89
- .brand-dis-creadis :is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="combobox-chips"], [data-slot="button"][data-variant="outline"], [data-slot="pagination-link"][data-variant="outline"]),
90
- html.brand-dis-creadis :is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="combobox-chips"], [data-slot="button"][data-variant="outline"], [data-slot="pagination-link"][data-variant="outline"]) {
91
- background-color: oklch(1 0 0 / 70%);
92
- }
93
-
94
86
  /* Dark mode for DIS/CREADIS */
95
87
  .dark .brand-dis-creadis,
96
88
  .brand-dis-creadis.dark,
97
89
  .dark.brand-dis-creadis,
98
- .brand-dis-creadis .dark,
99
- html.brand-dis-creadis.dark,
100
- html.dark.brand-dis-creadis {
90
+ .brand-dis-creadis .dark {
101
91
  /* Base colors */
102
92
  /* --background: oklch(0.15 0.015 250); */
103
93
  /* --background: oklch(0.3103 0.0503 157.05); */
package/dist/styles/brands/index.css CHANGED
@@ -9,3 +9,4 @@
9
9
  */
10
10
 
11
11
  @import "./dis-creadis.css";
12
+ @import "./mission-control.css";
package/dist/styles/brands/m-plus.css CHANGED
@@ -12,8 +12,7 @@
12
12
  */
13
13
 
14
14
  :root .brand-m-plus,
15
- .brand-m-plus,
16
- html.brand-m-plus {
15
+ .brand-m-plus {
17
16
  /* Typography - Mulish for M+ brand */
18
17
  --font-sans: "Mulish", sans-serif;
19
18
  --font-mono: "Geist Mono", ui-monospace, monospace;
@@ -79,9 +78,7 @@ html.brand-m-plus {
79
78
  .dark .brand-m-plus,
80
79
  .brand-m-plus.dark,
81
80
  .dark.brand-m-plus,
82
- .brand-m-plus .dark,
83
- html.brand-m-plus.dark,
84
- html.dark.brand-m-plus {
81
+ .brand-m-plus .dark {
85
82
  /* Base colors */
86
83
  --background: oklch(0.3541 0.0428 179.14);
87
84
  --foreground: oklch(0.985 0 0);
package/dist/styles/brands/mission-control.css ADDED
@@ -0,0 +1,140 @@
1
+ /*
2
+ * Mission Control Brand Theme – "Bloomberg Noir"
3
+ *
4
+ * Dark-first theme for Henry's AI Agent Command Center.
5
+ * Designed for information-dense dashboards with semantic color coding.
6
+ *
7
+ * Usage:
8
+ * @import '@privateers/ui/styles/brands/mission-control.css';
9
+ *
10
+ * Or apply the class to a container:
11
+ * <div class="brand-mission-control">...</div>
12
+ *
13
+ * Color palette (hex reference):
14
+ * Background base: #0D0F12
15
+ * Background panel: #14171C
16
+ * Background card: #1A1F28
17
+ * Border: #2A2F3A
18
+ * Text primary: #E8EAED
19
+ * Text muted: #8B9099
20
+ * Accent (indigo): #6366F1
21
+ * Success: #22C55E
22
+ * Warning: #F59E0B
23
+ * Error: #EF4444
24
+ * Info: #06B6D4
25
+ */
26
+
27
+ :root .brand-mission-control,
28
+ .brand-mission-control {
29
+ /* Typography – Monospace numbers, clean sans-serif body */
30
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
31
+ --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
32
+
33
+ /* Base colors – Near-black */
34
+ --background: oklch(0.16 0.005 260);
35
+ --foreground: oklch(0.93 0.003 260);
36
+
37
+ /* Card – Elevated surface */
38
+ --card: oklch(0.22 0.008 260 / 80%);
39
+ --card-foreground: oklch(0.93 0.003 260);
40
+
41
+ /* Popover */
42
+ --popover: oklch(0.20 0.007 260);
43
+ --popover-foreground: oklch(0.93 0.003 260);
44
+
45
+ /* Primary – Indigo accent */
46
+ --primary: oklch(0.55 0.22 275);
47
+ --primary-foreground: oklch(0.97 0.003 260);
48
+
49
+ /* Secondary – Panel surface */
50
+ --secondary: oklch(0.20 0.007 260);
51
+ --secondary-foreground: oklch(0.93 0.003 260);
52
+
53
+ /* Muted */
54
+ --muted: oklch(0.22 0.008 260);
55
+ --muted-foreground: oklch(0.60 0.010 260);
56
+
57
+ /* Accent – Indigo */
58
+ --accent: oklch(0.55 0.22 275);
59
+ --accent-foreground: oklch(0.97 0.003 260);
60
+
61
+ /* Destructive – Red */
62
+ --destructive: oklch(0.58 0.20 25);
63
+
64
+ /* Border & Input */
65
+ --border: oklch(0.30 0.008 260);
66
+ --input: oklch(0.25 0.008 260);
67
+ --ring: oklch(0.55 0.22 275);
68
+
69
+ /* Chart colors – Semantic */
70
+ --chart-1: oklch(0.65 0.18 150); /* Success green */
71
+ --chart-2: oklch(0.55 0.22 275); /* Indigo accent */
72
+ --chart-3: oklch(0.72 0.16 85); /* Warning amber */
73
+ --chart-4: oklch(0.65 0.15 200); /* Info cyan */
74
+ --chart-5: oklch(0.58 0.20 25); /* Error red */
75
+
76
+ /* Border radius – Subtle, modern */
77
+ --radius: 0.5rem;
78
+
79
+ /* Sidebar – Agent panel dark */
80
+ --sidebar: oklch(0.18 0.006 260);
81
+ --sidebar-foreground: oklch(0.93 0.003 260);
82
+ --sidebar-primary: oklch(0.55 0.22 275);
83
+ --sidebar-primary-foreground: oklch(0.97 0.003 260);
84
+ --sidebar-accent: oklch(0.22 0.008 260);
85
+ --sidebar-accent-foreground: oklch(0.93 0.003 260);
86
+ --sidebar-border: oklch(0.30 0.008 260);
87
+ --sidebar-ring: oklch(0.55 0.22 275);
88
+
89
+ /* === Mission Control custom tokens === */
90
+ --mc-base: oklch(0.16 0.005 260);
91
+ --mc-panel: oklch(0.20 0.007 260);
92
+ --mc-card: oklch(0.22 0.008 260);
93
+ --mc-border: oklch(0.30 0.008 260);
94
+ --mc-text: oklch(0.93 0.003 260);
95
+ --mc-muted: oklch(0.60 0.010 260);
96
+ --mc-accent: oklch(0.55 0.22 275);
97
+ --mc-success: oklch(0.65 0.18 150);
98
+ --mc-warning: oklch(0.72 0.16 85);
99
+ --mc-error: oklch(0.58 0.20 25);
100
+ --mc-info: oklch(0.65 0.15 200);
101
+ }
102
+
103
+ /* Mission Control is dark-only – light mode maps to same values */
104
+ .dark .brand-mission-control,
105
+ .brand-mission-control.dark,
106
+ .dark.brand-mission-control,
107
+ .brand-mission-control .dark {
108
+ /* Identical to base – this theme is dark by design */
109
+ --background: oklch(0.16 0.005 260);
110
+ --foreground: oklch(0.93 0.003 260);
111
+ --card: oklch(0.22 0.008 260 / 80%);
112
+ --card-foreground: oklch(0.93 0.003 260);
113
+ --popover: oklch(0.20 0.007 260);
114
+ --popover-foreground: oklch(0.93 0.003 260);
115
+ --primary: oklch(0.55 0.22 275);
116
+ --primary-foreground: oklch(0.97 0.003 260);
117
+ --secondary: oklch(0.20 0.007 260);
118
+ --secondary-foreground: oklch(0.93 0.003 260);
119
+ --muted: oklch(0.22 0.008 260);
120
+ --muted-foreground: oklch(0.60 0.010 260);
121
+ --accent: oklch(0.55 0.22 275);
122
+ --accent-foreground: oklch(0.97 0.003 260);
123
+ --destructive: oklch(0.58 0.20 25);
124
+ --border: oklch(0.30 0.008 260);
125
+ --input: oklch(0.25 0.008 260);
126
+ --ring: oklch(0.55 0.22 275);
127
+ --chart-1: oklch(0.65 0.18 150);
128
+ --chart-2: oklch(0.55 0.22 275);
129
+ --chart-3: oklch(0.72 0.16 85);
130
+ --chart-4: oklch(0.65 0.15 200);
131
+ --chart-5: oklch(0.58 0.20 25);
132
+ --sidebar: oklch(0.18 0.006 260);
133
+ --sidebar-foreground: oklch(0.93 0.003 260);
134
+ --sidebar-primary: oklch(0.55 0.22 275);
135
+ --sidebar-primary-foreground: oklch(0.97 0.003 260);
136
+ --sidebar-accent: oklch(0.22 0.008 260);
137
+ --sidebar-accent-foreground: oklch(0.93 0.003 260);
138
+ --sidebar-border: oklch(0.30 0.008 260);
139
+ --sidebar-ring: oklch(0.55 0.22 275);
140
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@privateers/ui",
3
- "version": "0.3.17",
3
+ "version": "0.3.18",
4
4
  "description": "Privateers Design System - A modern React component library built with Radix UI, CVA, and Tailwind CSS",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -20,8 +20,8 @@
20
20
  },
21
21
  "./styles": "./dist/styles/index.css",
22
22
  "./styles/tokens": "./dist/styles/tokens.css",
23
- "./styles/library": "./dist/styles/library.css",
24
- "./styles/*": "./dist/styles/*",
23
+ "./styles/brands/mission-control": "./dist/styles/brands/mission-control.css",
24
+ "./styles/brands/*": "./dist/styles/brands/*",
25
25
  "./tailwind/preset": {
26
26
  "import": {
27
27
  "types": "./dist/tailwind/preset.d.ts",
package/dist/styles/brands/retur.css DELETED
@@ -1,152 +0,0 @@
1
- /*
2
- * Retur Brand Theme
3
- *
4
- * Typography:
5
- * - Headlines: Oswald, bold (700), sans-serif
6
- * - Body: Open Sans, regular (400), sans-serif
7
- *
8
- * Colors:
9
- * - Primary green: #68745D
10
- * - Accent gold: #D9AD44
11
- * - Text primary: #444444
12
- * - Text dark: #141414
13
- * - Background light: #F4F4F4
14
- * - Border/divider: #D6D6D6
15
- * - Link blue: #2A4EEF
16
- *
17
- * Buttons:
18
- * - Border-radius: 0px (sharp corners)
19
- * - CTA buttons use gold color (#D9AD44)
20
- *
21
- * Usage:
22
- * @import '@privateers/ui/styles/brands/retur.css';
23
- *
24
- * Or apply the class to a container:
25
- * <div class="brand-retur">...</div>
26
- */
27
-
28
- :root .brand-retur,
29
- .brand-retur,
30
- html.brand-retur {
31
- /* Typography - Open Sans for body, Oswald for headings */
32
- --font-sans: "Open Sans", sans-serif;
33
- --font-heading: "Oswald", sans-serif;
34
- --font-mono: "Geist Mono", ui-monospace, monospace;
35
-
36
- /* Base colors */
37
- --background: oklch(0.9608 0 0); /* #F4F4F4 */
38
- --foreground: oklch(0.3373 0 0); /* #444444 */
39
-
40
- /* Card */
41
- --card: oklch(1 0 0); /* white */
42
- --card-foreground: oklch(0.3373 0 0); /* #444444 */
43
-
44
- /* Popover */
45
- --popover: oklch(1 0 0);
46
- --popover-foreground: oklch(0.3373 0 0);
47
-
48
- /* Primary - Green #68745D */
49
- --primary: oklch(0.4941 0.0353 128.86);
50
- --primary-foreground: oklch(1 0 0);
51
-
52
- /* Secondary */
53
- --secondary: oklch(0.9608 0 0);
54
- --secondary-foreground: oklch(0.3373 0 0);
55
-
56
- /* Muted */
57
- --muted: oklch(0.9608 0 0);
58
- --muted-foreground: oklch(0.4667 0 0);
59
-
60
- /* Accent - Gold #D9AD44 */
61
- --accent: oklch(0.7647 0.1176 85.87);
62
- --accent-foreground: oklch(0.1569 0 0); /* #141414 */
63
-
64
- /* Destructive */
65
- --destructive: oklch(0.5772 0.245 27.325);
66
-
67
- /* Border & Input - #D6D6D6 */
68
- --border: oklch(0.8549 0 0);
69
- --input: oklch(0.8549 0 0);
70
- --ring: oklch(0.4941 0.0353 128.86); /* primary green */
71
-
72
- /* Chart colors */
73
- --chart-1: oklch(0.4941 0.0353 128.86); /* green */
74
- --chart-2: oklch(0.7647 0.1176 85.87); /* gold */
75
- --chart-3: oklch(0.5569 0.2039 262.88); /* blue #2A4EEF */
76
- --chart-4: oklch(0.3373 0 0);
77
- --chart-5: oklch(0.8549 0 0);
78
-
79
- /* Border radius - rounded corners */
80
- --radius: 1.2rem;
81
-
82
- /* Sidebar */
83
- --sidebar: oklch(1 0 0);
84
- --sidebar-foreground: oklch(0.3373 0 0);
85
- --sidebar-primary: oklch(0.4941 0.0353 128.86);
86
- --sidebar-primary-foreground: oklch(1 0 0);
87
- --sidebar-accent: oklch(0.7647 0.1176 85.87);
88
- --sidebar-accent-foreground: oklch(0.1569 0 0);
89
- --sidebar-border: oklch(0.8549 0 0);
90
- --sidebar-ring: oklch(0.4941 0.0353 128.86);
91
- }
92
-
93
- /* Dark mode for Retur */
94
- .dark .brand-retur,
95
- .brand-retur.dark,
96
- .dark.brand-retur,
97
- .brand-retur .dark,
98
- html.brand-retur.dark,
99
- html.dark.brand-retur {
100
- /* Base colors */
101
- --background: oklch(0.1569 0 0); /* #141414 */
102
- --foreground: oklch(0.9608 0 0); /* #F4F4F4 */
103
-
104
- /* Card */
105
- --card: oklch(0.22 0 0);
106
- --card-foreground: oklch(0.9608 0 0);
107
-
108
- /* Popover */
109
- --popover: oklch(0.22 0 0);
110
- --popover-foreground: oklch(0.9608 0 0);
111
-
112
- /* Primary - Green #68745D */
113
- --primary: oklch(0.5541 0.0453 128.86);
114
- --primary-foreground: oklch(1 0 0);
115
-
116
- /* Secondary */
117
- --secondary: oklch(0.25 0 0);
118
- --secondary-foreground: oklch(0.9608 0 0);
119
-
120
- /* Muted */
121
- --muted: oklch(0.25 0 0);
122
- --muted-foreground: oklch(0.6667 0 0);
123
-
124
- /* Accent - Gold #D9AD44 */
125
- --accent: oklch(0.7647 0.1176 85.87);
126
- --accent-foreground: oklch(0.1569 0 0);
127
-
128
- /* Destructive */
129
- --destructive: oklch(0.704 0.191 22.216);
130
-
131
- /* Border & Input */
132
- --border: oklch(0.35 0 0);
133
- --input: oklch(0.35 0 0);
134
- --ring: oklch(0.5541 0.0453 128.86);
135
-
136
- /* Chart colors */
137
- --chart-1: oklch(0.5541 0.0453 128.86);
138
- --chart-2: oklch(0.7647 0.1176 85.87);
139
- --chart-3: oklch(0.6069 0.2039 262.88);
140
- --chart-4: oklch(0.9608 0 0);
141
- --chart-5: oklch(0.35 0 0);
142
-
143
- /* Sidebar */
144
- --sidebar: oklch(0.18 0 0);
145
- --sidebar-foreground: oklch(0.9608 0 0);
146
- --sidebar-primary: oklch(0.5541 0.0453 128.86);
147
- --sidebar-primary-foreground: oklch(1 0 0);
148
- --sidebar-accent: oklch(0.7647 0.1176 85.87);
149
- --sidebar-accent-foreground: oklch(0.1569 0 0);
150
- --sidebar-border: oklch(0.35 0 0);
151
- --sidebar-ring: oklch(0.5541 0.0453 128.86);
152
- }
package/dist/styles/library.css DELETED
@@ -1,69 +0,0 @@
1
- /*
2
- * Privateers Design System — Library entry point
3
- * Import this in consuming apps (not index.css).
4
- * index.css is for use inside the monorepo's Storybook only.
5
- *
6
- * Consuming app is responsible for:
7
- * - @import "tailwindcss" (or equivalent Tailwind setup)
8
- * - Font imports (Figtree, Geist Mono)
9
- */
10
-
11
- @import "./tokens.css";
12
-
13
- @custom-variant dark (&:is(.dark *));
14
-
15
- @theme inline {
16
- --color-background: var(--background);
17
- --color-foreground: var(--foreground);
18
- --font-sans: var(--font-sans);
19
- --font-mono: var(--font-mono);
20
- --color-sidebar-ring: var(--sidebar-ring);
21
- --color-sidebar-border: var(--sidebar-border);
22
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
23
- --color-sidebar-accent: var(--sidebar-accent);
24
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
25
- --color-sidebar-primary: var(--sidebar-primary);
26
- --color-sidebar-foreground: var(--sidebar-foreground);
27
- --color-sidebar: var(--sidebar);
28
- --color-chart-5: var(--chart-5);
29
- --color-chart-4: var(--chart-4);
30
- --color-chart-3: var(--chart-3);
31
- --color-chart-2: var(--chart-2);
32
- --color-chart-1: var(--chart-1);
33
- --color-ring: var(--ring);
34
- --color-input: var(--input);
35
- --color-border: var(--border);
36
- --color-destructive: var(--destructive);
37
- --color-accent-foreground: var(--accent-foreground);
38
- --color-accent: var(--accent);
39
- --color-muted-foreground: var(--muted-foreground);
40
- --color-muted: var(--muted);
41
- --color-secondary-foreground: var(--secondary-foreground);
42
- --color-secondary: var(--secondary);
43
- --color-primary-foreground: var(--primary-foreground);
44
- --color-primary: var(--primary);
45
- --color-popover-foreground: var(--popover-foreground);
46
- --color-popover: var(--popover);
47
- --color-card-foreground: var(--card-foreground);
48
- --color-card: var(--card);
49
- --radius-sm: calc(var(--radius) - 4px);
50
- --radius-md: calc(var(--radius) - 2px);
51
- --radius-lg: var(--radius);
52
- --radius-xl: calc(var(--radius) + 4px);
53
- --radius-2xl: calc(var(--radius) + 8px);
54
- --radius-3xl: calc(var(--radius) + 12px);
55
- --radius-4xl: calc(var(--radius) + 16px);
56
- }
57
-
58
- @layer base {
59
- * {
60
- @apply border-border outline-ring/50;
61
- }
62
- body {
63
- @apply bg-background text-foreground antialiased;
64
- font-family: var(--font-sans);
65
- }
66
- code, pre, kbd, samp {
67
- font-family: var(--font-mono);
68
- }
69
- }