stoop 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 +97 -3
- package/dist/context/ThemeContext.d.ts +12 -0
- package/dist/global-h4nepkxv.scss +68 -0
- package/dist/index.d.ts +1 -2
- package/dist/index.js +38 -4439
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +9 -11
- package/LICENSE.md +0 -21
- package/dist/context/Theme.d.ts +0 -13
- package/dist/styles/global.css.d.ts +0 -1
- package/dist/styles/theme.css.d.ts +0 -58
package/README.md
CHANGED
|
@@ -1,14 +1,108 @@
|
|
|
1
1
|
# [stoop](https://github.com/dolmios/stoop)
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
> A small component library for quickly spinning up a pretty Next.js project.
|
|
3
4
|
|
|
4
5
|
|
|
5
6
|
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- 🎨 Theme system with dark mode support
|
|
10
|
+
- 🎯 Zero-config theme switching
|
|
11
|
+
- 🎭 System preference detection
|
|
12
|
+
- 🎪 SSR-friendly
|
|
13
|
+
- 🎭 No flash of unstyled content
|
|
14
|
+
- 🎨 Type-safe CSS variables
|
|
15
|
+
- 🎭 Stitches-like variants API
|
|
16
|
+
|
|
6
17
|
## Install
|
|
7
18
|
|
|
8
19
|
```sh
|
|
9
20
|
bun add stoop
|
|
10
21
|
```
|
|
11
22
|
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
### Theme Provider
|
|
26
|
+
|
|
27
|
+
Wrap your app with the ThemeProvider:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { ThemeProvider } from "stoop";
|
|
31
|
+
|
|
32
|
+
export default function RootLayout({ children }) {
|
|
33
|
+
return (
|
|
34
|
+
<html lang="en">
|
|
35
|
+
<body>
|
|
36
|
+
<ThemeProvider>{children}</ThemeProvider>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Using the Theme
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import { useTheme } from "stoop";
|
|
47
|
+
|
|
48
|
+
function MyComponent() {
|
|
49
|
+
const { mode, toggleTheme } = useTheme();
|
|
50
|
+
|
|
51
|
+
return <button onClick={toggleTheme}>Current theme: {mode}</button>;
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Global Styles
|
|
56
|
+
|
|
57
|
+
Import the global styles in your app:
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import "stoop/styles/global.css";
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Using CSS Variables
|
|
64
|
+
|
|
65
|
+
The theme system provides CSS variables that you can use in your components:
|
|
66
|
+
|
|
67
|
+
```css
|
|
68
|
+
.my-component {
|
|
69
|
+
color: var(--color-text);
|
|
70
|
+
background-color: var(--color-background);
|
|
71
|
+
padding: var(--space-medium);
|
|
72
|
+
border-radius: var(--radius-small);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Using Variants
|
|
77
|
+
|
|
78
|
+
Create type-safe component variants using the `createVariants` utility:
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { createVariants } from "stoop";
|
|
82
|
+
|
|
83
|
+
const buttonVariants = createVariants({
|
|
84
|
+
size: {
|
|
85
|
+
small: "text-sm px-2 py-1",
|
|
86
|
+
medium: "text-base px-4 py-2",
|
|
87
|
+
large: "text-lg px-6 py-3",
|
|
88
|
+
},
|
|
89
|
+
variant: {
|
|
90
|
+
primary: "bg-primary text-white",
|
|
91
|
+
secondary: "bg-muted text-text",
|
|
92
|
+
outline: "border border-border",
|
|
93
|
+
},
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
function Button({ size, variant, ...props }) {
|
|
97
|
+
return <button className={buttonVariants({ size, variant })} {...props} />;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Usage:
|
|
101
|
+
<Button size="medium" variant="primary">
|
|
102
|
+
Click me
|
|
103
|
+
</Button>;
|
|
104
|
+
```
|
|
105
|
+
|
|
12
106
|
## Development
|
|
13
107
|
|
|
14
108
|
For local development:
|
|
@@ -30,8 +124,8 @@ bun run prettier
|
|
|
30
124
|
|
|
31
125
|
## Contributing
|
|
32
126
|
|
|
33
|
-
Feel free to get in touch with feedback, advice or suggestions.
|
|
127
|
+
Feel free to get in touch with feedback, advice or suggestions. See [Conventional Commits](https://gist.github.com/dolmios/0e33c579a500d87fc6f44df6cde97259) for new contributors.
|
|
34
128
|
|
|
35
129
|
## License
|
|
36
130
|
|
|
37
|
-
MIT ©
|
|
131
|
+
MIT © [Jackson Dolman](https://github.com/dolmios)
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React, { JSX } from "react";
|
|
2
|
+
import "../styles/global.scss";
|
|
3
|
+
type ThemeMode = "light" | "dark";
|
|
4
|
+
type ThemeContextType = {
|
|
5
|
+
mode: ThemeMode;
|
|
6
|
+
toggleTheme: () => void;
|
|
7
|
+
};
|
|
8
|
+
export declare function ThemeProvider({ children }: {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
}): JSX.Element;
|
|
11
|
+
export declare function useTheme(): ThemeContextType;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Colors */
|
|
3
|
+
--color-text: #000000;
|
|
4
|
+
--color-background: #ffffff;
|
|
5
|
+
--color-border: rgba(0, 0, 0, 0.5);
|
|
6
|
+
--color-primary: #000000;
|
|
7
|
+
--color-muted: #666666;
|
|
8
|
+
|
|
9
|
+
/* Spacing */
|
|
10
|
+
--space-smallest: 0.25rem;
|
|
11
|
+
--space-smaller: 0.5rem;
|
|
12
|
+
--space-small: 0.75rem;
|
|
13
|
+
--space-medium: 1rem;
|
|
14
|
+
--space-large: 1.5rem;
|
|
15
|
+
--space-larger: 2rem;
|
|
16
|
+
--space-largest: 10rem;
|
|
17
|
+
|
|
18
|
+
/* Radii */
|
|
19
|
+
--radius-small: 0.25rem;
|
|
20
|
+
--radius-large: 0.5rem;
|
|
21
|
+
--radius-round: 9999px;
|
|
22
|
+
|
|
23
|
+
/* Shadows */
|
|
24
|
+
--shadow-default: 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
25
|
+
|
|
26
|
+
/* Breakpoints */
|
|
27
|
+
--breakpoint-phone: 800px;
|
|
28
|
+
--breakpoint-tablet: 1024px;
|
|
29
|
+
--breakpoint-desktop: 1440px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme="dark"] {
|
|
33
|
+
--color-text: #ffffff;
|
|
34
|
+
--color-background: #212121;
|
|
35
|
+
--color-border: rgba(255, 255, 255, 0.5);
|
|
36
|
+
--color-primary: #ffffff;
|
|
37
|
+
--color-muted: #424242;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Reset */
|
|
41
|
+
* {
|
|
42
|
+
margin: 0;
|
|
43
|
+
padding: 0;
|
|
44
|
+
box-sizing: border-box;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
html {
|
|
48
|
+
font-size: 62.5%;
|
|
49
|
+
-webkit-text-size-adjust: 100%;
|
|
50
|
+
text-size-adjust: 100%;
|
|
51
|
+
scroll-behavior: smooth;
|
|
52
|
+
background-color: var(--color-background);
|
|
53
|
+
color: var(--color-text);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
body {
|
|
57
|
+
font-family:
|
|
58
|
+
system-ui,
|
|
59
|
+
-apple-system,
|
|
60
|
+
BlinkMacSystemFont,
|
|
61
|
+
"Segoe UI",
|
|
62
|
+
Roboto,
|
|
63
|
+
sans-serif;
|
|
64
|
+
font-size: 1.6rem;
|
|
65
|
+
line-height: 1.5;
|
|
66
|
+
background-color: inherit;
|
|
67
|
+
color: inherit;
|
|
68
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export { ThemeProvider, useTheme } from './context/Theme';
|
|
1
|
+
export { ThemeProvider, useTheme } from "./context/ThemeContext";
|