@oppulence/design-system 1.0.2 → 1.0.4

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/atoms/button.tsx +2 -0
  3. package/src/styles/globals.css +169 -212
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oppulence/design-system",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Design system for Oppulence - shadcn-style components with Tailwind CSS v4",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/components/atoms/button.tsx CHANGED
@@ -76,6 +76,8 @@ type ButtonProps = Omit<ButtonPrimitive.Props, "className"> &
76
76
  iconLeft?: React.ReactNode;
77
77
  /** Icon to show on the right side of the button */
78
78
  iconRight?: React.ReactNode;
79
+ /** HTML button type attribute */
80
+ type?: "button" | "submit" | "reset";
79
81
  };
80
82
 
81
83
  const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
package/src/styles/globals.css CHANGED
@@ -7,117 +7,126 @@
7
7
 
8
8
  @custom-variant dark (&:is(.dark *));
9
9
 
10
- @layer base {
11
- :root {
12
- /* Modern monochrome light theme - clean whites and refined grays */
13
- --background: oklch(0.995 0 0);
14
- --foreground: oklch(0.09 0 0);
15
- --card: oklch(1 0 0);
16
- --card-foreground: oklch(0.09 0 0);
17
- --popover: oklch(1 0 0);
18
- --popover-foreground: oklch(0.09 0 0);
19
-
20
- /* Pure black primary for bold, modern look */
21
- --primary: oklch(0.09 0 0);
22
- --primary-foreground: oklch(0.99 0 0);
23
-
24
- /* Subtle gray secondary */
25
- --secondary: oklch(0.96 0 0);
26
- --secondary-foreground: oklch(0.15 0 0);
27
-
28
- /* Refined muted tones */
29
- --muted: oklch(0.965 0 0);
30
- --muted-foreground: oklch(0.45 0 0);
31
-
32
- /* Subtle accent */
33
- --accent: oklch(0.955 0 0);
34
- --accent-foreground: oklch(0.12 0 0);
35
-
36
- /* Semantic colors - muted for elegance */
37
- --destructive: oklch(0.55 0.2 25);
38
- --success: oklch(0.55 0.15 145);
39
- --warning: oklch(0.7 0.14 80);
40
- --info: oklch(0.55 0.14 250);
41
-
42
- /* Refined borders and inputs */
43
- --border: oklch(0.91 0 0);
44
- --input: oklch(0.91 0 0);
45
- --ring: oklch(0.09 0 0);
46
-
47
- /* Monochrome chart palette - grayscale gradient */
48
- --chart-1: oklch(0.15 0 0);
49
- --chart-2: oklch(0.35 0 0);
50
- --chart-3: oklch(0.5 0 0);
51
- --chart-4: oklch(0.65 0 0);
52
- --chart-5: oklch(0.8 0 0);
53
-
54
- /* Modern radius - slightly larger for softer feel */
55
- --radius: 0.5rem;
56
-
57
- /* Sidebar - clean separation */
58
- --sidebar: oklch(0.985 0 0);
59
- --sidebar-foreground: oklch(0.09 0 0);
60
- --sidebar-primary: oklch(0.09 0 0);
61
- --sidebar-primary-foreground: oklch(0.99 0 0);
62
- --sidebar-accent: oklch(0.955 0 0);
63
- --sidebar-accent-foreground: oklch(0.12 0 0);
64
- --sidebar-border: oklch(0.92 0 0);
65
- --sidebar-ring: oklch(0.09 0 0);
10
+ :root {
11
+ --radius: 0.625rem;
12
+ --background: oklch(1 0 0);
13
+ --foreground: oklch(0.141 0.005 285.823);
14
+ --card: oklch(1 0 0);
15
+ --card-foreground: oklch(0.141 0.005 285.823);
16
+ --popover: oklch(1 0 0);
17
+ --popover-foreground: oklch(0.141 0.005 285.823);
18
+ --primary: var(--color-lime-500);
19
+ --primary-foreground: oklch(0.985 0 0);
20
+ --secondary: oklch(0.967 0.001 286.375);
21
+ --secondary-foreground: oklch(0.21 0.006 285.885);
22
+ --muted: oklch(0.967 0.001 286.375);
23
+ --muted-foreground: oklch(0.552 0.016 285.938);
24
+ --accent: oklch(0.967 0.001 286.375);
25
+ --accent-foreground: oklch(0.21 0.006 285.885);
26
+ --destructive: oklch(0.54 0.1864 11.25);
27
+ --destructive-foreground: oklch(0.9082 0.048775 8.6356);
28
+ --border: oklch(0.96 0.0053 286.3);
29
+ --input: oklch(0.92 0.004 286.32);
30
+ --ring: oklch(0.705 0.015 286.067);
31
+
32
+ --chart-1: oklch(0.93 0.1421 124.85);
33
+ --chart-2: oklch(0.79 0.1287 184.79);
34
+ --chart-3: oklch(0.69 0.1763 246.45);
35
+ --chart-4: oklch(0.49 0.2229 281.04);
36
+ --chart-5: oklch(0.78 0.193 322.07);
37
+ --chart-6: oklch(0.71 0.2007 357.57);
38
+ --chart-7: oklch(0.83 0.1475 83);
39
+ --chart-8: oklch(0.41 0.1227 263.12);
40
+ --chart-9: oklch(0.03 0.001 286.32);
41
+
42
+ --sidebar: oklch(1 0 0);
43
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
44
+ --sidebar-primary: oklch(0.21 0.006 285.885);
45
+ --sidebar-primary-foreground: oklch(0.985 0 0);
46
+ --sidebar-accent: oklch(0.967 0.001 286.375);
47
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
48
+ --sidebar-border: oklch(0.92 0.004 286.32);
49
+ --sidebar-ring: oklch(0.705 0.015 286.067);
50
+
51
+ --gray-900: oklch(0.1 0 0);
52
+ --gray-800: oklch(0.159 0 0);
53
+ --gray-700: oklch(0.261 0 0);
54
+ --gray-600: oklch(0.339 0 0);
55
+ --gray-500: oklch(0.461 0 0);
56
+ --gray-400: oklch(0.649 0 0);
57
+ --gray-300: oklch(0.839 0 0);
58
+ --gray-200: oklch(0.9 0 0);
59
+ --gray-100: oklch(0.959 0 0);
60
+
61
+ --region: var(--gray-100);
62
+ --region-hover: var(--gray-200);
63
+
64
+ --chart-negative: var(--gray-200);
65
+ --chart-cartesian: var(--gray-200);
66
+
67
+ --header-height: 68px;
68
+
69
+ .logo-dark {
70
+ mix-blend-mode: plus-lighter;
71
+ border: 1px solid red;
66
72
  }
73
+ }
67
74
 
68
- .dark {
69
- /* Modern monochrome dark theme - deep blacks and refined grays */
70
- --background: oklch(0.09 0 0);
71
- --foreground: oklch(0.95 0 0);
72
- --card: oklch(0.12 0 0);
73
- --card-foreground: oklch(0.95 0 0);
74
- --popover: oklch(0.12 0 0);
75
- --popover-foreground: oklch(0.95 0 0);
76
-
77
- /* Pure white primary for bold contrast */
78
- --primary: oklch(0.99 0 0);
79
- --primary-foreground: oklch(0.09 0 0);
80
-
81
- /* Subtle gray secondary */
82
- --secondary: oklch(0.18 0 0);
83
- --secondary-foreground: oklch(0.92 0 0);
84
-
85
- /* Refined muted tones */
86
- --muted: oklch(0.18 0 0);
87
- --muted-foreground: oklch(0.6 0 0);
88
-
89
- /* Subtle accent */
90
- --accent: oklch(0.2 0 0);
91
- --accent-foreground: oklch(0.95 0 0);
92
-
93
- /* Semantic colors - slightly brighter for dark mode */
94
- --destructive: oklch(0.65 0.2 25);
95
- --success: oklch(0.65 0.15 145);
96
- --warning: oklch(0.75 0.14 80);
97
- --info: oklch(0.65 0.14 250);
98
-
99
- /* Refined borders and inputs - subtle white tint */
100
- --border: oklch(1 0 0 / 12%);
101
- --input: oklch(1 0 0 / 12%);
102
- --ring: oklch(0.99 0 0);
103
-
104
- /* Monochrome chart palette - inverted grayscale */
105
- --chart-1: oklch(0.95 0 0);
106
- --chart-2: oklch(0.75 0 0);
107
- --chart-3: oklch(0.55 0 0);
108
- --chart-4: oklch(0.4 0 0);
109
- --chart-5: oklch(0.25 0 0);
110
-
111
- /* Sidebar - subtle separation */
112
- --sidebar: oklch(0.11 0 0);
113
- --sidebar-foreground: oklch(0.95 0 0);
114
- --sidebar-primary: oklch(0.99 0 0);
115
- --sidebar-primary-foreground: oklch(0.09 0 0);
116
- --sidebar-accent: oklch(0.18 0 0);
117
- --sidebar-accent-foreground: oklch(0.95 0 0);
118
- --sidebar-border: oklch(1 0 0 / 10%);
119
- --sidebar-ring: oklch(0.99 0 0);
120
- }
75
+ .dark {
76
+ --background: var(--gray-900);
77
+ --foreground: oklch(0.985 0 0);
78
+ --card: var(--gray-700);
79
+ --card-foreground: var(--color-gray-300);
80
+ --popover: var(--gray-900);
81
+ --popover-foreground: oklch(0.985 0 0);
82
+ --primary: oklch(0.93 0.1421 124.85);
83
+ --primary-foreground: oklch(0.32 0.0617 115.83);
84
+ --secondary: var(--gray-600);
85
+ --secondary-foreground: var(--color-white);
86
+ --muted: var(--gray-700);
87
+ --muted-foreground: var(--gray-200);
88
+ --accent: var(--gray-600);
89
+ --accent-foreground: var(--color-white);
90
+ --destructive: oklch(45.9% 0.187 3.815);
91
+ --destructive-foreground: oklch(0.9082 0.048775 8.6356);
92
+ --border: var(--gray-600);
93
+ --input: var(--gray-600);
94
+ --ring: var(--gray-200);
95
+
96
+ --chart-1: oklch(0.93 0.1421 124.85);
97
+ --chart-2: oklch(0.79 0.1287 184.79);
98
+ --chart-3: oklch(0.69 0.1763 246.45);
99
+ --chart-4: oklch(0.49 0.2229 281.04);
100
+ --chart-5: oklch(0.78 0.193 322.07);
101
+ --chart-6: oklch(0.71 0.2007 357.57);
102
+ --chart-7: oklch(0.83 0.1475 83);
103
+ --chart-8: oklch(0.41 0.1227 263.12);
104
+ --chart-9: oklch(0.03 0.001 286.32);
105
+
106
+ --sidebar: var(--gray-900);
107
+ --sidebar-foreground: var(--gray-200);
108
+ --sidebar-primary: oklch(0.488 0.243 264.376);
109
+ --sidebar-primary-foreground: oklch(0.985 0 0);
110
+ --sidebar-accent: var(--gray-700);
111
+ --sidebar-accent-foreground: oklch(0.985 0 0);
112
+ --sidebar-border: oklch(0.269 0 0);
113
+ --sidebar-ring: var(--gray-200);
114
+
115
+ --gray-900: oklch(0.1445 0.0047 263.79);
116
+ --gray-800: oklch(0.1829 0.0083 274.43);
117
+ --gray-700: oklch(0.2068 0.014 278.71);
118
+ --gray-600: oklch(0.2386 0.0192 280.36);
119
+ --gray-500: oklch(0.2856 0.0238 281.33);
120
+ --gray-400: oklch(0.3741 0.0307 282.31);
121
+ --gray-300: oklch(0.4671 0.0323 282.82);
122
+ --gray-200: oklch(0.5638 0.0358 277.43);
123
+ --gray-100: oklch(0.6589 0.0178 278.35);
124
+
125
+ --region: var(--gray-500);
126
+ --region-hover: var(--gray-600);
127
+
128
+ --chart-negative: var(--gray-500);
129
+ --chart-cartesian: var(--gray-500);
121
130
  }
122
131
 
123
132
  @theme inline {
@@ -125,11 +134,6 @@
125
134
  "Plus Jakarta Sans Variable", ui-sans-serif, system-ui, sans-serif,
126
135
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
127
136
 
128
- /* Letter spacing tokens */
129
- --tracking-tighter: -0.05em;
130
- --tracking-tight: -0.025em;
131
- --tracking-normal: 0;
132
- --tracking-wide: 0.025em;
133
137
  --color-background: var(--background);
134
138
  --color-foreground: var(--foreground);
135
139
  --color-card: var(--card);
@@ -146,9 +150,6 @@
146
150
  --color-accent-foreground: var(--accent-foreground);
147
151
  --color-destructive: var(--destructive);
148
152
  --color-destructive-foreground: var(--destructive-foreground);
149
- --color-success: var(--success);
150
- --color-warning: var(--warning);
151
- --color-info: var(--info);
152
153
  --color-border: var(--border);
153
154
  --color-input: var(--input);
154
155
  --color-ring: var(--ring);
@@ -157,10 +158,16 @@
157
158
  --color-chart-3: var(--chart-3);
158
159
  --color-chart-4: var(--chart-4);
159
160
  --color-chart-5: var(--chart-5);
161
+ --color-chart-6: var(--chart-6);
162
+ --color-chart-7: var(--chart-7);
163
+ --color-chart-8: var(--chart-8);
164
+ --color-chart-9: var(--chart-9);
165
+
160
166
  --radius-sm: calc(var(--radius) - 4px);
161
167
  --radius-md: calc(var(--radius) - 2px);
162
168
  --radius-lg: var(--radius);
163
169
  --radius-xl: calc(var(--radius) + 4px);
170
+
164
171
  --color-sidebar: var(--sidebar);
165
172
  --color-sidebar-foreground: var(--sidebar-foreground);
166
173
  --color-sidebar-primary: var(--sidebar-primary);
@@ -169,129 +176,79 @@
169
176
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
170
177
  --color-sidebar-border: var(--sidebar-border);
171
178
  --color-sidebar-ring: var(--sidebar-ring);
179
+
180
+ --color-gray-900: var(--gray-900);
181
+ --color-gray-800: var(--gray-800);
182
+ --color-gray-700: var(--gray-700);
183
+ --color-gray-600: var(--gray-600);
184
+ --color-gray-500: var(--gray-500);
185
+ --color-gray-400: var(--gray-400);
186
+ --color-gray-300: var(--gray-300);
187
+ --color-gray-200: var(--gray-200);
188
+ --color-gray-100: var(--gray-100);
189
+
190
+ --color-region: var(--region);
191
+ --color-region-hover: var(--region-hover);
172
192
  }
173
193
 
174
194
  @layer base {
175
195
  * {
176
196
  @apply border-border outline-ring/50;
177
197
  }
178
-
179
- html {
180
- -webkit-font-smoothing: antialiased;
181
- -moz-osx-font-smoothing: grayscale;
182
- text-rendering: optimizeLegibility;
183
- }
184
-
185
198
  body {
186
199
  @apply bg-background text-foreground;
187
- font-feature-settings: "cv02", "cv03", "cv04", "cv11";
188
- line-height: 1.6;
189
- }
190
-
191
- /* Refined focus states for accessibility */
192
- :focus-visible {
193
- @apply outline-2 outline-offset-2 outline-ring;
194
- }
195
-
196
- /* Smooth scrolling */
197
- @media (prefers-reduced-motion: no-preference) {
198
- html {
199
- scroll-behavior: smooth;
200
- }
201
- }
202
-
203
- /* Selection styling */
204
- ::selection {
205
- @apply bg-foreground/10;
206
200
  }
207
201
 
208
- /* Typography - refined headings */
209
- h1,
210
- h2,
211
- h3,
212
- h4,
213
- h5,
214
- h6 {
215
- @apply font-semibold;
216
- text-wrap: balance;
217
- }
218
-
219
- h1 {
220
- @apply text-4xl;
221
- letter-spacing: -0.05em;
222
- }
223
- h2 {
224
- @apply text-3xl;
225
- letter-spacing: -0.025em;
226
- }
227
- h3 {
228
- @apply text-2xl;
229
- letter-spacing: -0.025em;
230
- }
231
- h4 {
232
- @apply text-xl;
233
- }
234
- h5 {
235
- @apply text-lg;
236
- }
237
- h6 {
238
- @apply text-base font-medium;
202
+ code.inline {
203
+ @apply bg-muted py-1 px-1.5 text-xs rounded font-mono;
239
204
  }
205
+ }
240
206
 
241
- /* Paragraphs */
242
- p {
243
- text-wrap: pretty;
244
- }
207
+ @utility progressive-blur {
208
+ @apply backdrop-blur-md mask-b-from-65%;
245
209
  }
246
210
 
247
- /* View Transitions API for smooth page transitions */
248
- @view-transition {
249
- navigation: auto;
211
+ .mapboxgl-ctrl-logo {
212
+ @apply hidden!;
250
213
  }
251
214
 
252
- ::view-transition-old(page-content) {
253
- animation: fade-out 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
215
+ .bklit-conic {
216
+ background: linear-gradient(to bottom, #000000, #ffffff);
254
217
  }
255
218
 
256
- ::view-transition-new(page-content) {
257
- animation: fade-in 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
219
+ .squircle {
220
+ /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is experimental */
221
+ corner-shape: squircle;
258
222
  }
259
223
 
260
- @keyframes fade-out {
261
- from {
262
- opacity: 1;
263
- transform: translateY(0);
224
+ .page-content {
225
+ @apply text-muted-foreground space-y-4;
226
+
227
+ & h2 {
228
+ @apply text-2xl font-bold text-card-foreground;
264
229
  }
265
- to {
266
- opacity: 0;
267
- transform: translateY(-4px);
230
+
231
+ & h3 {
232
+ @apply text-lg font-semibold mb-2 text-card-foreground;
268
233
  }
269
- }
270
234
 
271
- @keyframes fade-in {
272
- from {
273
- opacity: 0;
274
- transform: translateY(4px);
235
+ & p {
236
+ @apply text-lg mb-4;
275
237
  }
276
- to {
277
- opacity: 1;
278
- transform: translateY(0);
238
+
239
+ & ul {
240
+ @apply list-disc pl-4 space-y-2;
279
241
  }
280
242
  }
281
243
 
282
- /* Page content animation fallback for non-View Transitions browsers */
283
- [data-slot="page-layout"] {
284
- view-transition-name: page-content;
285
- animation: page-enter 200ms cubic-bezier(0.4, 0, 0.2, 1);
286
- }
244
+ .article {
245
+ @apply text-muted-foreground;
287
246
 
288
- @keyframes page-enter {
289
- from {
290
- opacity: 0;
291
- transform: translateY(4px);
247
+ & h2 {
248
+ @apply text-card-foreground;
292
249
  }
293
- to {
294
- opacity: 1;
295
- transform: translateY(0);
250
+
251
+ & h3 {
252
+ @apply text-card-foreground;
296
253
  }
297
254
  }