@sanity/sanity-id 0.1.1 → 0.2.0
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 +73 -73
- package/css/colors.css +495 -495
- package/css/variables.css +280 -280
- package/dist/Breadcrumbs.js +1 -1
- package/dist/Button.js +1 -1
- package/dist/Card.js +1 -1
- package/dist/Checkbox.js +1 -1
- package/dist/Eyebrow.js +1 -1
- package/dist/IconButton.js +1 -1
- package/dist/Input.js +1 -1
- package/dist/Input.module-wn347b2Q.js +1 -0
- package/dist/Label.js +1 -1
- package/dist/LinkCTA.js +1 -1
- package/dist/Radio.js +1 -1
- package/dist/RadioSwitch.js +1 -1
- package/dist/Select.js +1 -1
- package/dist/Switch.js +1 -1
- package/dist/TextArea.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.js +1 -1
- package/package.json +6 -2
- package/dist/Input.module-CJkUSxF9.js +0 -1
package/README.md
CHANGED
|
@@ -19,16 +19,16 @@ Create or update your `tailwind.config.ts` file:
|
|
|
19
19
|
import { createConfig } from "@sanity/sanity-id"
|
|
20
20
|
|
|
21
21
|
export default createConfig({
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
22
|
+
content: [
|
|
23
|
+
// Add your content paths here
|
|
24
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
25
|
+
],
|
|
26
|
+
// Optional: extend or override the base configuration
|
|
27
|
+
theme: {
|
|
28
|
+
extend: {
|
|
29
|
+
// Your custom theme extensions
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
32
|
})
|
|
33
33
|
```
|
|
34
34
|
|
|
@@ -38,13 +38,13 @@ For proper TypeScript resolution, add the following to your `tsconfig.json`:
|
|
|
38
38
|
|
|
39
39
|
```json
|
|
40
40
|
{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
41
|
+
"compilerOptions": {
|
|
42
|
+
"baseUrl": ".",
|
|
43
|
+
"paths": {
|
|
44
|
+
"@sanity/sanity-id": ["../../packages/sanity-id/src"],
|
|
45
|
+
"@sanity/sanity-id/*": ["../../packages/sanity-id/src/*"]
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
48
|
}
|
|
49
49
|
```
|
|
50
50
|
|
|
@@ -57,47 +57,47 @@ up using Next.js Font:
|
|
|
57
57
|
import Local from "next/font/local"
|
|
58
58
|
|
|
59
59
|
const inter = Local({
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
60
|
+
display: "swap",
|
|
61
|
+
variable: "--font-sans",
|
|
62
|
+
fallback: ["ui-sans-serif", "system-ui", "sans-serif"],
|
|
63
|
+
src: [
|
|
64
|
+
{
|
|
65
|
+
path: "../assets/fonts/inter-variable.woff2",
|
|
66
|
+
weight: "100 900",
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
path: "../assets/fonts/inter-italic-variable.woff2",
|
|
70
|
+
style: "italic",
|
|
71
|
+
weight: "100 900",
|
|
72
|
+
},
|
|
73
|
+
],
|
|
74
74
|
})
|
|
75
75
|
|
|
76
76
|
const jetBrainsMono = Local({
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
77
|
+
src: "../assets/fonts/jetbrains-mono-variable.woff2",
|
|
78
|
+
display: "swap",
|
|
79
|
+
variable: "--font-mono",
|
|
80
|
+
fallback: ["ui-monospace", "monospace"],
|
|
81
|
+
weight: "100 900",
|
|
82
82
|
})
|
|
83
83
|
|
|
84
84
|
export const fontsClassName = [
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
inter.variable,
|
|
86
|
+
interItalic.variable,
|
|
87
|
+
jetBrainsMono.variable,
|
|
88
88
|
].join(" ")
|
|
89
89
|
|
|
90
90
|
// Apply fonts to your app
|
|
91
91
|
export default function RootLayout({
|
|
92
|
-
|
|
92
|
+
children,
|
|
93
93
|
}: {
|
|
94
|
-
|
|
94
|
+
children: React.ReactNode
|
|
95
95
|
}) {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
96
|
+
return (
|
|
97
|
+
<html className={fontsClassName}>
|
|
98
|
+
<body>{children}</body>
|
|
99
|
+
</html>
|
|
100
|
+
)
|
|
101
101
|
}
|
|
102
102
|
```
|
|
103
103
|
|
|
@@ -124,13 +124,13 @@ import { Card } from "@sanity/sanity-id/components/card"
|
|
|
124
124
|
import { Dialog } from "@sanity/sanity-id/components/dialog"
|
|
125
125
|
|
|
126
126
|
function MyComponent() {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
127
|
+
return (
|
|
128
|
+
<Card>
|
|
129
|
+
<Dialog>
|
|
130
|
+
<Button>Click me</Button>
|
|
131
|
+
</Dialog>
|
|
132
|
+
</Card>
|
|
133
|
+
)
|
|
134
134
|
}
|
|
135
135
|
```
|
|
136
136
|
|
|
@@ -141,8 +141,8 @@ The package supports light and dark themes through HTML data attributes:
|
|
|
141
141
|
```html
|
|
142
142
|
<!-- Light theme (default) -->
|
|
143
143
|
<html data-theme="light">
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
<!-- Dark theme -->
|
|
145
|
+
<html data-theme="dark"></html>
|
|
146
146
|
</html>
|
|
147
147
|
```
|
|
148
148
|
|
|
@@ -155,17 +155,17 @@ use next-themes:
|
|
|
155
155
|
import { ThemeProvider } from "next-themes"
|
|
156
156
|
|
|
157
157
|
export default function RootLayout({
|
|
158
|
-
|
|
158
|
+
children,
|
|
159
159
|
}: {
|
|
160
|
-
|
|
160
|
+
children: React.ReactNode
|
|
161
161
|
}) {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
162
|
+
return (
|
|
163
|
+
<html>
|
|
164
|
+
<ThemeProvider attribute="data-theme">
|
|
165
|
+
<body>{children}</body>
|
|
166
|
+
</ThemeProvider>
|
|
167
|
+
</html>
|
|
168
|
+
)
|
|
169
169
|
}
|
|
170
170
|
```
|
|
171
171
|
|
|
@@ -173,15 +173,15 @@ Alternatively, you can hardcode the theme in your layout:
|
|
|
173
173
|
|
|
174
174
|
```tsx
|
|
175
175
|
export default function RootLayout({
|
|
176
|
-
|
|
176
|
+
children,
|
|
177
177
|
}: {
|
|
178
|
-
|
|
178
|
+
children: React.ReactNode
|
|
179
179
|
}) {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
180
|
+
return (
|
|
181
|
+
<html data-theme="light">
|
|
182
|
+
<body>{children}</body>
|
|
183
|
+
</html>
|
|
184
|
+
)
|
|
185
185
|
}
|
|
186
186
|
```
|
|
187
187
|
|
|
@@ -190,8 +190,8 @@ The package supports light and dark themes through HTML data attributes:
|
|
|
190
190
|
```html
|
|
191
191
|
<!-- Light theme (default) -->
|
|
192
192
|
<html data-theme="light">
|
|
193
|
-
|
|
194
|
-
|
|
193
|
+
<!-- Dark theme -->
|
|
194
|
+
<html data-theme="dark"></html>
|
|
195
195
|
</html>
|
|
196
196
|
```
|
|
197
197
|
|