@privateers/ui 0.3.1 → 0.3.2

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 (7) hide show
  1. package/dist/styles/brands/dis-creadis.css +145 -0
  2. package/dist/styles/brands/index.css +11 -0
  3. package/dist/styles/brands/m-plus.css +134 -0
  4. package/dist/styles/brands/retur.css +149 -0
  5. package/dist/styles/index.css +73 -0
  6. package/dist/styles/tokens.css +122 -0
  7. package/package.json +2 -1
package/dist/styles/brands/dis-creadis.css ADDED
@@ -0,0 +1,145 @@
1
+ /*
2
+ * DIS/CREADIS Brand Theme
3
+ *
4
+ * This theme overrides the default Privateers design tokens
5
+ * with DIS/CREADIS brand colors and styling.
6
+ *
7
+ * Usage:
8
+ * @import '@privateers/ui/styles/brands/dis-creadis.css';
9
+ *
10
+ * Or apply the class to a container:
11
+ * <div class="brand-dis-creadis">...</div>
12
+ *
13
+ * Note: TT Commons font is loaded via preview-head.html
14
+ */
15
+
16
+ /*
17
+ * DIS/CREADIS Brand Colors:
18
+ * - Primary: Deep Blue (#003366) - trustworthy, professional
19
+ * - Accent: Vibrant Teal (#00A5A5) - innovation, creativity
20
+ * - Base: Slate gray tones for neutrals
21
+ */
22
+
23
+ :root .brand-dis-creadis,
24
+ .brand-dis-creadis {
25
+ /* Typography - TT Commons for DIS/CREADIS brand */
26
+ --font-sans: "TT Commons", ui-sans-serif, system-ui, sans-serif;
27
+ --font-mono: "JetBrains Mono", ui-monospace, monospace;
28
+
29
+ /* Base colors - Slate */
30
+ --background: oklch(0.3644 0.029 220.58 / 10%);
31
+ --foreground: oklch(0.15 0.015 250);
32
+
33
+ /* Card */
34
+ --card: oklch(1 0 0 / 75%);
35
+ --card-foreground: oklch(0.15 0.015 250);
36
+
37
+ /* Popover */
38
+ --popover: oklch(1 0 0);
39
+ --popover-foreground: oklch(0.15 0.015 250);
40
+
41
+ /* Primary - Green */
42
+ --primary: oklch(0.3904 0.0472 159.21);
43
+ --primary-foreground: oklch(0.98 0.005 250);
44
+
45
+ /* Secondary - Light Slate */
46
+ --secondary: oklch(0.95 0.008 250);
47
+ --secondary-foreground: oklch(0.25 0.015 250);
48
+
49
+ /* Muted */
50
+ --muted: oklch(0.95 0.008 250);
51
+ --muted-foreground: oklch(0.50 0.015 250);
52
+
53
+ /* Accent */
54
+ --accent: oklch(0.8428 0.0752 217.67);
55
+ --accent-foreground: oklch(0.15 0.015 185);
56
+
57
+ /* Destructive */
58
+ --destructive: oklch(0.6632 0.1875 333.2);
59
+
60
+ /* Border & Input */
61
+ --border: oklch(0.90 0.008 250);
62
+ --input: oklch(0.90 0.008 250);
63
+ --ring: oklch(0.50 0.12 250);
64
+
65
+ /* Chart colors - Blue to Teal gradient */
66
+ --chart-1: oklch(0.70 0.10 250);
67
+ --chart-2: oklch(0.60 0.12 240);
68
+ --chart-3: oklch(0.55 0.14 220);
69
+ --chart-4: oklch(0.50 0.15 200);
70
+ --chart-5: oklch(0.55 0.15 185);
71
+
72
+ /* Border radius - Slightly smaller for professional look */
73
+ --radius: 0.0rem;
74
+
75
+ /* Sidebar */
76
+ --sidebar: oklch(0.98 0.002 250);
77
+ --sidebar-foreground: oklch(0.15 0.015 250);
78
+ --sidebar-primary: oklch(0.35 0.12 250);
79
+ --sidebar-primary-foreground: oklch(0.98 0.005 250);
80
+ --sidebar-accent: oklch(0.95 0.008 250);
81
+ --sidebar-accent-foreground: oklch(0.25 0.015 250);
82
+ --sidebar-border: oklch(0.90 0.008 250);
83
+ --sidebar-ring: oklch(0.50 0.12 250);
84
+ }
85
+
86
+ /* Dark mode for DIS/CREADIS */
87
+ .dark .brand-dis-creadis,
88
+ .brand-dis-creadis.dark,
89
+ .dark.brand-dis-creadis,
90
+ .brand-dis-creadis .dark {
91
+ /* Base colors */
92
+ /* --background: oklch(0.15 0.015 250); */
93
+ /* --background: oklch(0.3103 0.0503 157.05); */
94
+ --background: oklch(0.2368 0.0148 220.58);
95
+ --foreground: oklch(0.95 0.005 250);
96
+
97
+ /* Card */
98
+ --card: oklch(0.20 0.015 250 / 70%);
99
+ --card-foreground: oklch(0.95 0.005 250);
100
+
101
+ /* Popover */
102
+ --popover: oklch(0.20 0.015 250);
103
+ --popover-foreground: oklch(0.95 0.005 250);
104
+
105
+ /* Primary - Lighter blue for dark mode */
106
+ --primary: oklch(0.6746 0.1315 216.71);
107
+ --primary-foreground: oklch(0.98 0.005 250);
108
+
109
+ /* Secondary */
110
+ --secondary: oklch(0.3644 0.029 220.58);
111
+ --secondary-foreground: oklch(0.95 0.005 250);
112
+
113
+ /* Muted */
114
+ --muted: oklch(0.25 0.015 250);
115
+ --muted-foreground: oklch(0.65 0.010 250);
116
+
117
+ /* Accent - Brighter for dark mode */
118
+ --accent: oklch(0.9196 0.0046 78.3);
119
+ --accent-foreground: oklch(0.15 0.015 185);
120
+
121
+ /* Destructive */
122
+ --destructive: oklch(0.6632 0.1875 333.2);
123
+
124
+ /* Border & Input */
125
+ --border: oklch(1 0 0 / 12%);
126
+ --input: oklch(1 0 0 / 15%);
127
+ --ring: oklch(0.55 0.15 250);
128
+
129
+ /* Chart colors */
130
+ --chart-1: oklch(0.70 0.10 250);
131
+ --chart-2: oklch(0.65 0.12 240);
132
+ --chart-3: oklch(0.60 0.14 220);
133
+ --chart-4: oklch(0.58 0.15 200);
134
+ --chart-5: oklch(0.65 0.14 185);
135
+
136
+ /* Sidebar */
137
+ --sidebar: oklch(0.18 0.015 250);
138
+ --sidebar-foreground: oklch(0.95 0.005 250);
139
+ --sidebar-primary: oklch(0.60 0.14 250);
140
+ --sidebar-primary-foreground: oklch(0.98 0.005 250);
141
+ --sidebar-accent: oklch(0.25 0.015 250);
142
+ --sidebar-accent-foreground: oklch(0.95 0.005 250);
143
+ --sidebar-border: oklch(1 0 0 / 12%);
144
+ --sidebar-ring: oklch(0.55 0.15 250);
145
+ }
package/dist/styles/brands/index.css ADDED
@@ -0,0 +1,11 @@
1
+ /*
2
+ * Privateers Design System - Brand Themes
3
+ *
4
+ * Import individual brand themes as needed:
5
+ * @import '@privateers/ui/styles/brands/dis-creadis.css';
6
+ *
7
+ * Or import all brands:
8
+ * @import '@privateers/ui/styles/brands';
9
+ */
10
+
11
+ @import "./dis-creadis.css";
package/dist/styles/brands/m-plus.css ADDED
@@ -0,0 +1,134 @@
1
+ /*
2
+ * M+ Brand Theme
3
+ *
4
+ * This theme is based on the Privateers default design tokens.
5
+ * Customize the colors below to match M+ brand guidelines.
6
+ *
7
+ * Usage:
8
+ * @import '@privateers/ui/styles/brands/m-plus.css';
9
+ *
10
+ * Or apply the class to a container:
11
+ * <div class="brand-m-plus">...</div>
12
+ */
13
+
14
+ :root .brand-m-plus,
15
+ .brand-m-plus {
16
+ /* Typography - Mulish for M+ brand */
17
+ --font-sans: "Mulish", sans-serif;
18
+ --font-mono: "Geist Mono", ui-monospace, monospace;
19
+
20
+ /* Base colors */
21
+ --background: oklch(1 0 0);
22
+ --foreground: oklch(0.141 0.005 285.823);
23
+
24
+ /* Card */
25
+ --card: oklch(1 0 0);
26
+ --card-foreground: oklch(0.141 0.005 285.823);
27
+
28
+ /* Popover */
29
+ --popover: oklch(1 0 0);
30
+ --popover-foreground: oklch(0.141 0.005 285.823);
31
+
32
+ /* Primary) */
33
+ --primary: oklch(0.3541 0.0428 179.14);
34
+ --primary-foreground: oklch(0.96 0.02 272);
35
+
36
+ /* Secondary */
37
+ --secondary: oklch(0.967 0.001 286.375);
38
+ --secondary-foreground: oklch(0.21 0.006 285.885);
39
+
40
+ /* Muted */
41
+ --muted: oklch(0.967 0.001 286.375);
42
+ --muted-foreground: oklch(0.552 0.016 285.938);
43
+
44
+ /* Accent */
45
+ --accent: oklch(0.8721 0.0452 42.4);
46
+ --accent-foreground: oklch(0.21 0.006 285.885);
47
+
48
+ /* Destructive */
49
+ --destructive: oklch(0.7309 0.1505 42.4);
50
+
51
+ /* Border & Input */
52
+ --border: oklch(0.92 0.004 286.32);
53
+ --input: oklch(0.92 0.004 286.32);
54
+ --ring: oklch(0.705 0.015 286.067);
55
+
56
+ /* Chart colors */
57
+ --chart-1: oklch(0.79 0.10 275);
58
+ --chart-2: oklch(0.68 0.16 277);
59
+ --chart-3: oklch(0.59 0.20 277);
60
+ --chart-4: oklch(0.51 0.23 277);
61
+ --chart-5: oklch(0.46 0.21 277);
62
+
63
+ /* Border radius */
64
+ --radius: 0.5rem;
65
+
66
+ /* Sidebar */
67
+ --sidebar: oklch(0.985 0 0);
68
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
69
+ --sidebar-primary: oklch(0.51 0.23 277);
70
+ --sidebar-primary-foreground: oklch(0.96 0.02 272);
71
+ --sidebar-accent: oklch(0.967 0.001 286.375);
72
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
73
+ --sidebar-border: oklch(0.92 0.004 286.32);
74
+ --sidebar-ring: oklch(0.705 0.015 286.067);
75
+ }
76
+
77
+ /* Dark mode for M+ */
78
+ .dark .brand-m-plus,
79
+ .brand-m-plus.dark,
80
+ .dark.brand-m-plus,
81
+ .brand-m-plus .dark {
82
+ /* Base colors */
83
+ --background: oklch(0.3541 0.0428 179.14);
84
+ --foreground: oklch(0.985 0 0);
85
+
86
+ /* Card */
87
+ --card: oklch(0.21 0.006 285.885 / 35%);
88
+ --card-foreground: oklch(0.985 0 0);
89
+
90
+ /* Popover */
91
+ --popover: oklch(0.21 0.006 285.885);
92
+ --popover-foreground: oklch(0.985 0 0);
93
+
94
+ /* Primary */
95
+ --primary: oklch(0.59 0.20 277);
96
+ --primary-foreground: oklch(0.96 0.02 272);
97
+
98
+ /* Secondary */
99
+ --secondary: oklch(0.274 0.006 286.033);
100
+ --secondary-foreground: oklch(0.985 0 0);
101
+
102
+ /* Muted */
103
+ --muted: oklch(0.274 0.006 286.033);
104
+ --muted-foreground: oklch(0.705 0.015 286.067);
105
+
106
+ /* Accent */
107
+ --accent: oklch(0.274 0.006 286.033);
108
+ --accent-foreground: oklch(0.985 0 0);
109
+
110
+ /* Destructive */
111
+ --destructive: oklch(0.704 0.191 22.216);
112
+
113
+ /* Border & Input */
114
+ --border: oklch(1 0 0 / 10%);
115
+ --input: oklch(1 0 0 / 15%);
116
+ --ring: oklch(0.552 0.016 285.938);
117
+
118
+ /* Chart colors */
119
+ --chart-1: oklch(0.79 0.10 275);
120
+ --chart-2: oklch(0.68 0.16 277);
121
+ --chart-3: oklch(0.59 0.20 277);
122
+ --chart-4: oklch(0.51 0.23 277);
123
+ --chart-5: oklch(0.46 0.21 277);
124
+
125
+ /* Sidebar */
126
+ --sidebar: oklch(0.21 0.006 285.885);
127
+ --sidebar-foreground: oklch(0.985 0 0);
128
+ --sidebar-primary: oklch(0.68 0.16 277);
129
+ --sidebar-primary-foreground: oklch(0.96 0.02 272);
130
+ --sidebar-accent: oklch(0.274 0.006 286.033);
131
+ --sidebar-accent-foreground: oklch(0.985 0 0);
132
+ --sidebar-border: oklch(1 0 0 / 10%);
133
+ --sidebar-ring: oklch(0.552 0.016 285.938);
134
+ }
package/dist/styles/brands/retur.css ADDED
@@ -0,0 +1,149 @@
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
+ /* Typography - Open Sans for body, Oswald for headings */
31
+ --font-sans: "Open Sans", sans-serif;
32
+ --font-heading: "Oswald", sans-serif;
33
+ --font-mono: "Geist Mono", ui-monospace, monospace;
34
+
35
+ /* Base colors */
36
+ --background: oklch(0.9608 0 0); /* #F4F4F4 */
37
+ --foreground: oklch(0.3373 0 0); /* #444444 */
38
+
39
+ /* Card */
40
+ --card: oklch(1 0 0); /* white */
41
+ --card-foreground: oklch(0.3373 0 0); /* #444444 */
42
+
43
+ /* Popover */
44
+ --popover: oklch(1 0 0);
45
+ --popover-foreground: oklch(0.3373 0 0);
46
+
47
+ /* Primary - Green #68745D */
48
+ --primary: oklch(0.4941 0.0353 128.86);
49
+ --primary-foreground: oklch(1 0 0);
50
+
51
+ /* Secondary */
52
+ --secondary: oklch(0.9608 0 0);
53
+ --secondary-foreground: oklch(0.3373 0 0);
54
+
55
+ /* Muted */
56
+ --muted: oklch(0.9608 0 0);
57
+ --muted-foreground: oklch(0.4667 0 0);
58
+
59
+ /* Accent - Gold #D9AD44 */
60
+ --accent: oklch(0.7647 0.1176 85.87);
61
+ --accent-foreground: oklch(0.1569 0 0); /* #141414 */
62
+
63
+ /* Destructive */
64
+ --destructive: oklch(0.5772 0.245 27.325);
65
+
66
+ /* Border & Input - #D6D6D6 */
67
+ --border: oklch(0.8549 0 0);
68
+ --input: oklch(0.8549 0 0);
69
+ --ring: oklch(0.4941 0.0353 128.86); /* primary green */
70
+
71
+ /* Chart colors */
72
+ --chart-1: oklch(0.4941 0.0353 128.86); /* green */
73
+ --chart-2: oklch(0.7647 0.1176 85.87); /* gold */
74
+ --chart-3: oklch(0.5569 0.2039 262.88); /* blue #2A4EEF */
75
+ --chart-4: oklch(0.3373 0 0);
76
+ --chart-5: oklch(0.8549 0 0);
77
+
78
+ /* Border radius - rounded corners */
79
+ --radius: 1.2rem;
80
+
81
+ /* Sidebar */
82
+ --sidebar: oklch(1 0 0);
83
+ --sidebar-foreground: oklch(0.3373 0 0);
84
+ --sidebar-primary: oklch(0.4941 0.0353 128.86);
85
+ --sidebar-primary-foreground: oklch(1 0 0);
86
+ --sidebar-accent: oklch(0.7647 0.1176 85.87);
87
+ --sidebar-accent-foreground: oklch(0.1569 0 0);
88
+ --sidebar-border: oklch(0.8549 0 0);
89
+ --sidebar-ring: oklch(0.4941 0.0353 128.86);
90
+ }
91
+
92
+ /* Dark mode for Retur */
93
+ .dark .brand-retur,
94
+ .brand-retur.dark,
95
+ .dark.brand-retur,
96
+ .brand-retur .dark {
97
+ /* Base colors */
98
+ --background: oklch(0.1569 0 0); /* #141414 */
99
+ --foreground: oklch(0.9608 0 0); /* #F4F4F4 */
100
+
101
+ /* Card */
102
+ --card: oklch(0.22 0 0);
103
+ --card-foreground: oklch(0.9608 0 0);
104
+
105
+ /* Popover */
106
+ --popover: oklch(0.22 0 0);
107
+ --popover-foreground: oklch(0.9608 0 0);
108
+
109
+ /* Primary - Green #68745D */
110
+ --primary: oklch(0.5541 0.0453 128.86);
111
+ --primary-foreground: oklch(1 0 0);
112
+
113
+ /* Secondary */
114
+ --secondary: oklch(0.25 0 0);
115
+ --secondary-foreground: oklch(0.9608 0 0);
116
+
117
+ /* Muted */
118
+ --muted: oklch(0.25 0 0);
119
+ --muted-foreground: oklch(0.6667 0 0);
120
+
121
+ /* Accent - Gold #D9AD44 */
122
+ --accent: oklch(0.7647 0.1176 85.87);
123
+ --accent-foreground: oklch(0.1569 0 0);
124
+
125
+ /* Destructive */
126
+ --destructive: oklch(0.704 0.191 22.216);
127
+
128
+ /* Border & Input */
129
+ --border: oklch(0.35 0 0);
130
+ --input: oklch(0.35 0 0);
131
+ --ring: oklch(0.5541 0.0453 128.86);
132
+
133
+ /* Chart colors */
134
+ --chart-1: oklch(0.5541 0.0453 128.86);
135
+ --chart-2: oklch(0.7647 0.1176 85.87);
136
+ --chart-3: oklch(0.6069 0.2039 262.88);
137
+ --chart-4: oklch(0.9608 0 0);
138
+ --chart-5: oklch(0.35 0 0);
139
+
140
+ /* Sidebar */
141
+ --sidebar: oklch(0.18 0 0);
142
+ --sidebar-foreground: oklch(0.9608 0 0);
143
+ --sidebar-primary: oklch(0.5541 0.0453 128.86);
144
+ --sidebar-primary-foreground: oklch(1 0 0);
145
+ --sidebar-accent: oklch(0.7647 0.1176 85.87);
146
+ --sidebar-accent-foreground: oklch(0.1569 0 0);
147
+ --sidebar-border: oklch(0.35 0 0);
148
+ --sidebar-ring: oklch(0.5541 0.0453 128.86);
149
+ }
package/dist/styles/index.css ADDED
@@ -0,0 +1,73 @@
1
+ /*
2
+ * Privateers Design System
3
+ * Main stylesheet entry point
4
+ * Style: Vega | Base: Zinc | Theme: Indigo | Radius: Large | Font: Figtree
5
+ */
6
+
7
+ @import "tailwindcss";
8
+ @import "tw-animate-css";
9
+ @import "./tokens.css";
10
+
11
+ /* Figtree font from Google Fonts */
12
+ @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
13
+
14
+ /* Geist Mono from fontsource (or Google Fonts when available) */
15
+ @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
16
+
17
+ @custom-variant dark (&:is(.dark *));
18
+
19
+ @theme inline {
20
+ --color-background: var(--background);
21
+ --color-foreground: var(--foreground);
22
+ --font-sans: var(--font-sans);
23
+ --font-mono: var(--font-mono);
24
+ --color-sidebar-ring: var(--sidebar-ring);
25
+ --color-sidebar-border: var(--sidebar-border);
26
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
27
+ --color-sidebar-accent: var(--sidebar-accent);
28
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
29
+ --color-sidebar-primary: var(--sidebar-primary);
30
+ --color-sidebar-foreground: var(--sidebar-foreground);
31
+ --color-sidebar: var(--sidebar);
32
+ --color-chart-5: var(--chart-5);
33
+ --color-chart-4: var(--chart-4);
34
+ --color-chart-3: var(--chart-3);
35
+ --color-chart-2: var(--chart-2);
36
+ --color-chart-1: var(--chart-1);
37
+ --color-ring: var(--ring);
38
+ --color-input: var(--input);
39
+ --color-border: var(--border);
40
+ --color-destructive: var(--destructive);
41
+ --color-accent-foreground: var(--accent-foreground);
42
+ --color-accent: var(--accent);
43
+ --color-muted-foreground: var(--muted-foreground);
44
+ --color-muted: var(--muted);
45
+ --color-secondary-foreground: var(--secondary-foreground);
46
+ --color-secondary: var(--secondary);
47
+ --color-primary-foreground: var(--primary-foreground);
48
+ --color-primary: var(--primary);
49
+ --color-popover-foreground: var(--popover-foreground);
50
+ --color-popover: var(--popover);
51
+ --color-card-foreground: var(--card-foreground);
52
+ --color-card: var(--card);
53
+ --radius-sm: calc(var(--radius) - 4px);
54
+ --radius-md: calc(var(--radius) - 2px);
55
+ --radius-lg: var(--radius);
56
+ --radius-xl: calc(var(--radius) + 4px);
57
+ --radius-2xl: calc(var(--radius) + 8px);
58
+ --radius-3xl: calc(var(--radius) + 12px);
59
+ --radius-4xl: calc(var(--radius) + 16px);
60
+ }
61
+
62
+ @layer base {
63
+ * {
64
+ @apply border-border outline-ring/50;
65
+ }
66
+ body {
67
+ @apply bg-background text-foreground antialiased;
68
+ font-family: var(--font-sans);
69
+ }
70
+ code, pre, kbd, samp {
71
+ font-family: var(--font-mono);
72
+ }
73
+ }
package/dist/styles/tokens.css ADDED
@@ -0,0 +1,122 @@
1
+ /*
2
+ * Privateers Design System - Design Tokens
3
+ * Style: Vega | Base: Zinc | Theme: Indigo | Radius: Large
4
+ * OKLch color space for perceptually uniform colors
5
+ */
6
+
7
+ :root {
8
+ /* Typography - Figtree (sans) + Geist Mono */
9
+ --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
10
+ --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
11
+
12
+ /* Base colors */
13
+ --background: oklch(1 0 0);
14
+ --foreground: oklch(0.141 0.005 285.823);
15
+
16
+ /* Card */
17
+ --card: oklch(1 0 0);
18
+ --card-foreground: oklch(0.141 0.005 285.823);
19
+
20
+ /* Popover */
21
+ --popover: oklch(1 0 0);
22
+ --popover-foreground: oklch(0.141 0.005 285.823);
23
+
24
+ /* Primary */
25
+ --primary: oklch(0.51 0.23 277);
26
+ --primary-foreground: oklch(0.96 0.02 272);
27
+
28
+ /* Secondary */
29
+ --secondary: oklch(0.967 0.001 286.375);
30
+ --secondary-foreground: oklch(0.21 0.006 285.885);
31
+
32
+ /* Muted */
33
+ --muted: oklch(0.967 0.001 286.375);
34
+ --muted-foreground: oklch(0.552 0.016 285.938);
35
+
36
+ /* Accent */
37
+ --accent: oklch(0.967 0.001 286.375);
38
+ --accent-foreground: oklch(0.21 0.006 285.885);
39
+
40
+ /* Destructive */
41
+ --destructive: oklch(0.577 0.245 27.325);
42
+
43
+ /* Border & Input */
44
+ --border: oklch(0.92 0.004 286.32);
45
+ --input: oklch(0.92 0.004 286.32);
46
+ --ring: oklch(0.705 0.015 286.067);
47
+
48
+ /* Chart colors */
49
+ --chart-1: oklch(0.79 0.10 275);
50
+ --chart-2: oklch(0.68 0.16 277);
51
+ --chart-3: oklch(0.59 0.20 277);
52
+ --chart-4: oklch(0.51 0.23 277);
53
+ --chart-5: oklch(0.46 0.21 277);
54
+
55
+ /* Border radius */
56
+ --radius: 0.875rem;
57
+
58
+ /* Sidebar */
59
+ --sidebar: oklch(0.985 0 0);
60
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
61
+ --sidebar-primary: oklch(0.51 0.23 277);
62
+ --sidebar-primary-foreground: oklch(0.96 0.02 272);
63
+ --sidebar-accent: oklch(0.967 0.001 286.375);
64
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
65
+ --sidebar-border: oklch(0.92 0.004 286.32);
66
+ --sidebar-ring: oklch(0.705 0.015 286.067);
67
+ }
68
+
69
+ .dark {
70
+ /* Base colors */
71
+ --background: oklch(0.141 0.005 285.823);
72
+ --foreground: oklch(0.985 0 0);
73
+
74
+ /* Card */
75
+ --card: oklch(0.21 0.006 285.885);
76
+ --card-foreground: oklch(0.985 0 0);
77
+
78
+ /* Popover */
79
+ --popover: oklch(0.21 0.006 285.885);
80
+ --popover-foreground: oklch(0.985 0 0);
81
+
82
+ /* Primary */
83
+ --primary: oklch(0.59 0.20 277);
84
+ --primary-foreground: oklch(0.96 0.02 272);
85
+
86
+ /* Secondary */
87
+ --secondary: oklch(0.274 0.006 286.033);
88
+ --secondary-foreground: oklch(0.985 0 0);
89
+
90
+ /* Muted */
91
+ --muted: oklch(0.274 0.006 286.033);
92
+ --muted-foreground: oklch(0.705 0.015 286.067);
93
+
94
+ /* Accent */
95
+ --accent: oklch(0.274 0.006 286.033);
96
+ --accent-foreground: oklch(0.985 0 0);
97
+
98
+ /* Destructive */
99
+ --destructive: oklch(0.704 0.191 22.216);
100
+
101
+ /* Border & Input */
102
+ --border: oklch(1 0 0 / 10%);
103
+ --input: oklch(1 0 0 / 15%);
104
+ --ring: oklch(0.552 0.016 285.938);
105
+
106
+ /* Chart colors */
107
+ --chart-1: oklch(0.79 0.10 275);
108
+ --chart-2: oklch(0.68 0.16 277);
109
+ --chart-3: oklch(0.59 0.20 277);
110
+ --chart-4: oklch(0.51 0.23 277);
111
+ --chart-5: oklch(0.46 0.21 277);
112
+
113
+ /* Sidebar */
114
+ --sidebar: oklch(0.21 0.006 285.885);
115
+ --sidebar-foreground: oklch(0.985 0 0);
116
+ --sidebar-primary: oklch(0.68 0.16 277);
117
+ --sidebar-primary-foreground: oklch(0.96 0.02 272);
118
+ --sidebar-accent: oklch(0.274 0.006 286.033);
119
+ --sidebar-accent-foreground: oklch(0.985 0 0);
120
+ --sidebar-border: oklch(1 0 0 / 10%);
121
+ --sidebar-ring: oklch(0.552 0.016 285.938);
122
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@privateers/ui",
3
- "version": "0.3.1",
3
+ "version": "0.3.2",
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,6 +20,7 @@
20
20
  },
21
21
  "./styles": "./dist/styles/index.css",
22
22
  "./styles/tokens": "./dist/styles/tokens.css",
23
+ "./styles/*": "./dist/styles/*",
23
24
  "./tailwind/preset": {
24
25
  "import": {
25
26
  "types": "./dist/tailwind/preset.d.ts",