@canceyd/react-npm-starter 0.0.1 → 0.0.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.
- package/README.md +7 -2
- package/dist/styles/globals.css +90 -0
- package/dist/styles/theme.css +113 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,12 +43,17 @@ function App() {
|
|
|
43
43
|
}
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
### Import styles
|
|
46
|
+
### Import global styles
|
|
47
|
+
|
|
48
|
+
To use the global styles (including Tailwind CSS, theme variables, and base styles), import them in your application's entry point:
|
|
47
49
|
|
|
48
50
|
```tsx
|
|
49
|
-
|
|
51
|
+
// In your main.tsx, App.tsx, or root component
|
|
52
|
+
import "@canceyd/react-npm-starter/styles/globals.css";
|
|
50
53
|
```
|
|
51
54
|
|
|
55
|
+
**Note:** Make sure you have Tailwind CSS configured in your consuming project, as the global styles depend on Tailwind CSS v4.
|
|
56
|
+
|
|
52
57
|
## Components
|
|
53
58
|
|
|
54
59
|
### Button
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
@import "shadcn/tailwind.css";
|
|
4
|
+
/* Font import removed - consumers should import their own fonts */
|
|
5
|
+
/* @import "@fontsource-variable/inter"; */
|
|
6
|
+
@import "./theme.css";
|
|
7
|
+
|
|
8
|
+
@custom-variant dark (&:is(.dark *));
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
interpolate-size: allow-keywords;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@layer base {
|
|
15
|
+
* {
|
|
16
|
+
@apply border-border outline-ring/50;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
html {
|
|
20
|
+
@apply font-sans;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
body {
|
|
24
|
+
@apply bg-background text-foreground overflow-x-hidden font-sans antialiased selection:bg-red-500/20 selection:text-red-200;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a {
|
|
28
|
+
@apply inline-block hover:underline;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
button {
|
|
32
|
+
@apply cursor-pointer;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@utility transition-smooth {
|
|
37
|
+
@apply transition-all duration-300 ease-in-out;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@utility scrollbar-hide {
|
|
41
|
+
/* For Webkit-based browsers (Chrome, Safari and Opera) */
|
|
42
|
+
&::-webkit-scrollbar {
|
|
43
|
+
display: none;
|
|
44
|
+
-webkit-appearance: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* For IE, Edge and Firefox */
|
|
48
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
49
|
+
scrollbar-width: none; /* Firefox */
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@utility scrollbar-custom {
|
|
53
|
+
@apply max-h-100 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[#dcdcdc] dark:[&::-webkit-scrollbar-thumb]:bg-[yellow] [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-white dark:[&::-webkit-scrollbar-track]:bg-[blue];
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@layer components {
|
|
57
|
+
details {
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
&::details-content {
|
|
60
|
+
block-size: 0;
|
|
61
|
+
transition:
|
|
62
|
+
block-size 0.3s ease-in-out,
|
|
63
|
+
content-visibility 0.3s ease-in-out;
|
|
64
|
+
transition-behavior: allow-discrete;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&[open] {
|
|
68
|
+
&::details-content {
|
|
69
|
+
block-size: auto;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Hide default arrows from number inputs. */
|
|
76
|
+
/* Chrome, Safari, Edge, Opera */
|
|
77
|
+
input::-webkit-outer-spin-button,
|
|
78
|
+
input::-webkit-inner-spin-button {
|
|
79
|
+
-webkit-appearance: none;
|
|
80
|
+
margin: 0;
|
|
81
|
+
}
|
|
82
|
+
/* Firefox */
|
|
83
|
+
input[type="number"] {
|
|
84
|
+
-moz-appearance: textfield;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Hide the default clear button (X) from search inputs. */
|
|
88
|
+
input[type="search"]::-webkit-search-cancel-button {
|
|
89
|
+
-webkit-appearance: none;
|
|
90
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--background: oklch(1 0 0);
|
|
3
|
+
--foreground: oklch(0.145 0 0);
|
|
4
|
+
--card: oklch(1 0 0);
|
|
5
|
+
--card-foreground: oklch(0.145 0 0);
|
|
6
|
+
--popover: oklch(1 0 0);
|
|
7
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
8
|
+
--primary: oklch(0.205 0 0);
|
|
9
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
10
|
+
--secondary: oklch(0.97 0 0);
|
|
11
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
12
|
+
--muted: oklch(0.97 0 0);
|
|
13
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
14
|
+
--accent: oklch(0.97 0 0);
|
|
15
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
16
|
+
--destructive: oklch(0.58 0.22 27);
|
|
17
|
+
--border: oklch(0.922 0 0);
|
|
18
|
+
--input: oklch(0.922 0 0);
|
|
19
|
+
--ring: oklch(0.708 0 0);
|
|
20
|
+
--chart-1: oklch(0.809 0.105 251.813);
|
|
21
|
+
--chart-2: oklch(0.623 0.214 259.815);
|
|
22
|
+
--chart-3: oklch(0.546 0.245 262.881);
|
|
23
|
+
--chart-4: oklch(0.488 0.243 264.376);
|
|
24
|
+
--chart-5: oklch(0.424 0.199 265.638);
|
|
25
|
+
--radius: 0.625rem;
|
|
26
|
+
--sidebar: oklch(0.985 0 0);
|
|
27
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
28
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
29
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
30
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
31
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
32
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
33
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.dark {
|
|
37
|
+
--background: oklch(0.145 0 0);
|
|
38
|
+
--foreground: oklch(0.985 0 0);
|
|
39
|
+
--card: oklch(0.205 0 0);
|
|
40
|
+
--card-foreground: oklch(0.985 0 0);
|
|
41
|
+
--popover: oklch(0.205 0 0);
|
|
42
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
43
|
+
--primary: oklch(0.87 0 0);
|
|
44
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
45
|
+
--secondary: oklch(0.269 0 0);
|
|
46
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
47
|
+
--muted: oklch(0.269 0 0);
|
|
48
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
49
|
+
--accent: oklch(0.371 0 0);
|
|
50
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
51
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
52
|
+
--border: oklch(1 0 0 / 10%);
|
|
53
|
+
--input: oklch(1 0 0 / 15%);
|
|
54
|
+
--ring: oklch(0.556 0 0);
|
|
55
|
+
--chart-1: oklch(0.809 0.105 251.813);
|
|
56
|
+
--chart-2: oklch(0.623 0.214 259.815);
|
|
57
|
+
--chart-3: oklch(0.546 0.245 262.881);
|
|
58
|
+
--chart-4: oklch(0.488 0.243 264.376);
|
|
59
|
+
--chart-5: oklch(0.424 0.199 265.638);
|
|
60
|
+
--sidebar: oklch(0.205 0 0);
|
|
61
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
62
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
63
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
64
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
65
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
66
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
67
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@theme inline {
|
|
71
|
+
/* Font can be overridden by consumers via CSS variables */
|
|
72
|
+
--font-sans:
|
|
73
|
+
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
|
74
|
+
"Segoe UI Symbol", "Noto Color Emoji";
|
|
75
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
76
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
77
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
78
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
79
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
80
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
81
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
82
|
+
--color-sidebar: var(--sidebar);
|
|
83
|
+
--color-chart-5: var(--chart-5);
|
|
84
|
+
--color-chart-4: var(--chart-4);
|
|
85
|
+
--color-chart-3: var(--chart-3);
|
|
86
|
+
--color-chart-2: var(--chart-2);
|
|
87
|
+
--color-chart-1: var(--chart-1);
|
|
88
|
+
--color-ring: var(--ring);
|
|
89
|
+
--color-input: var(--input);
|
|
90
|
+
--color-border: var(--border);
|
|
91
|
+
--color-destructive: var(--destructive);
|
|
92
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
93
|
+
--color-accent: var(--accent);
|
|
94
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
95
|
+
--color-muted: var(--muted);
|
|
96
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
97
|
+
--color-secondary: var(--secondary);
|
|
98
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
99
|
+
--color-primary: var(--primary);
|
|
100
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
101
|
+
--color-popover: var(--popover);
|
|
102
|
+
--color-card-foreground: var(--card-foreground);
|
|
103
|
+
--color-card: var(--card);
|
|
104
|
+
--color-foreground: var(--foreground);
|
|
105
|
+
--color-background: var(--background);
|
|
106
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
107
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
108
|
+
--radius-lg: var(--radius);
|
|
109
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
110
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
111
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
112
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
113
|
+
}
|