@sanity/sanity-id 0.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,32 @@
+
+
+> @sanity/sanity-id@0.0.0 build /Users/mitchell/Repositories/sanity-www/packages/sanity-id
+> vite build
+
+vite v7.1.3 building for production...
+transforming (1) src/colors.tstransforming (44) package.jsontransforming (107) ../../node_modules/.pnpm/next@15.3.3_@babel+core@7.28.3_@opentelemetry+api@1.9.0_@playwright+test@1.50.1_react-dom@19._ki6fcgyjmd4bfmur66busazeo✓ 212 modules transformed.
+rendering chunks (1)...rendering chunks (2)...rendering chunks (3)...rendering chunks (4)...rendering chunks (5)...rendering chunks (6)...rendering chunks (7)...rendering chunks (8)...rendering chunks (9)...rendering chunks (10)...rendering chunks (11)...rendering chunks (12)...rendering chunks (13)...rendering chunks (14)...rendering chunks (15)...rendering chunks (16)...rendering chunks (17)...rendering chunks (18)...rendering chunks (19)...rendering chunks (20)...rendering chunks (21)...rendering chunks (22)...rendering chunks (23)...computing gzip size (0)...computing gzip size (1)...computing gzip size (2)...computing gzip size (3)...computing gzip size (4)...computing gzip size (5)...computing gzip size (6)...computing gzip size (7)...computing gzip size (8)...computing gzip size (9)...computing gzip size (10)...computing gzip size (11)...computing gzip size (12)...computing gzip size (13)...computing gzip size (14)...computing gzip size (15)...computing gzip size (16)...computing gzip size (17)...computing gzip size (18)...computing gzip size (19)...computing gzip size (20)...computing gzip size (21)...computing gzip size (22)...computing gzip size (23)...computing gzip size (24)...dist/styles.css                     89.81 kB │ gzip:  7.83 kB
+dist/Input.module-P--gA8sq.js        0.06 kB │ gzip:  0.07 kB
+dist/_commonjsHelpers-C6fGbg64.js    0.14 kB │ gzip:  0.14 kB
+dist/Input.js                        0.35 kB │ gzip:  0.25 kB
+dist/Card.js                         0.36 kB │ gzip:  0.25 kB
+dist/SanityIcon-Bl5or1b8.js          0.47 kB │ gzip:  0.32 kB
+dist/Label.js                        0.48 kB │ gzip:  0.32 kB
+dist/TextArea.js                     0.50 kB │ gzip:  0.33 kB
+dist/clsx-OuTLNxxd.js                0.51 kB │ gzip:  0.27 kB
+dist/useLinkWithRef-D9NOX6Bd.js      0.64 kB │ gzip:  0.39 kB
+dist/Select.js                       0.69 kB │ gzip:  0.38 kB
+dist/Radio.js                        0.71 kB │ gzip:  0.37 kB
+dist/Switch.js                       0.72 kB │ gzip:  0.37 kB
+dist/Eyebrow.js                      0.72 kB │ gzip:  0.39 kB
+dist/Checkbox.js                     0.92 kB │ gzip:  0.45 kB
+dist/IconButton.js                   0.99 kB │ gzip:  0.51 kB
+dist/utils.js                        1.01 kB │ gzip:  0.64 kB
+dist/Button.js                       1.56 kB │ gzip:  0.71 kB
+dist/Breadcrumbs.js                  1.56 kB │ gzip:  0.69 kB
+dist/LinkCTA.js                      1.70 kB │ gzip:  0.72 kB
+dist/RadioSwitch.js                  2.40 kB │ gzip:  1.03 kB
+dist/tailwind.js                    20.40 kB │ gzip:  4.04 kB
+dist/colors.js                      21.48 kB │ gzip:  3.88 kB
+dist/Link-BWIwmuYV.js              137.58 kB │ gzip: 30.47 kB
+✓ built in 1.05s

package/README.md

@@ -0,0 +1,272 @@
+# @sanity/sanity-id
+
+A Tailwind CSS configuration package that provides Sanity's design system
+tokens, colors, and utilities.
+
+## Installation
+
+```bash
+npm install @sanity/sanity-id
+```
+
+## Usage
+
+### Basic Setup
+
+Create or update your `tailwind.config.ts` file:
+
+```ts
+import { createConfig } from "@sanity/sanity-id"
+
+export default createConfig({
+  content: [
+    // Add your content paths here
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  // Optional: extend or override the base configuration
+  theme: {
+    extend: {
+      // Your custom theme extensions
+    },
+  },
+})
+```
+
+### TypeScript Configuration
+
+For proper TypeScript resolution, add the following to your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@sanity/sanity-id": ["../../packages/sanity-id/src"],
+      "@sanity/sanity-id/*": ["../../packages/sanity-id/src/*"]
+    }
+  }
+}
+```
+
+### Font Setup
+
+The package expects certain font variables to be defined. Here's how to set them
+up using Next.js Font:
+
+```tsx
+import Local from "next/font/local"
+
+const inter = Local({
+  display: "swap",
+  variable: "--font-sans",
+  fallback: ["ui-sans-serif", "system-ui", "sans-serif"],
+  src: [
+    {
+      path: "../assets/fonts/inter-variable.woff2",
+      weight: "100 900",
+    },
+    {
+      path: "../assets/fonts/inter-italic-variable.woff2",
+      style: "italic",
+      weight: "100 900",
+    },
+  ],
+})
+
+const jetBrainsMono = Local({
+  src: "../assets/fonts/jetbrains-mono-variable.woff2",
+  display: "swap",
+  variable: "--font-mono",
+  fallback: ["ui-monospace", "monospace"],
+  weight: "100 900",
+})
+
+export const fontsClassName = [
+  inter.variable,
+  interItalic.variable,
+  jetBrainsMono.variable,
+].join(" ")
+
+// Apply fonts to your app
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html className={fontsClassName}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+Required font variables:
+
+- `--font-sans`: Main sans-serif font
+- `--font-mono`: Monospace font for code blocks
+
+### Import CSS
+
+Import the base styles in your main CSS file:
+
+```css
+@import "@sanity/sanity-id/all.css";
+```
+
+### Using Components
+
+Import components directly from their paths:
+
+```tsx
+import { Button } from "@sanity/sanity-id/components/button"
+import { Card } from "@sanity/sanity-id/components/card"
+import { Dialog } from "@sanity/sanity-id/components/dialog"
+
+function MyComponent() {
+  return (
+    <Card>
+      <Dialog>
+        <Button>Click me</Button>
+      </Dialog>
+    </Card>
+  )
+}
+```
+
+### Theme Support
+
+The package supports light and dark themes through HTML data attributes:
+
+```html
+<!-- Light theme (default) -->
+<html data-theme="light">
+  <!-- Dark theme -->
+  <html data-theme="dark"></html>
+</html>
+```
+
+### Theme Support
+
+Theme-dependent variables require a theme provider to work correctly. You can
+use next-themes:
+
+```tsx
+import { ThemeProvider } from "next-themes"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <ThemeProvider attribute="data-theme">
+        <body>{children}</body>
+      </ThemeProvider>
+    </html>
+  )
+}
+```
+
+Alternatively, you can hardcode the theme in your layout:
+
+```tsx
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html data-theme="light">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+The package supports light and dark themes through HTML data attributes:
+
+```html
+<!-- Light theme (default) -->
+<html data-theme="light">
+  <!-- Dark theme -->
+  <html data-theme="dark"></html>
+</html>
+```
+
+### Color System
+
+The package provides three types of colors:
+
+1. Primitive colors (static)
+2. Dynamic colors (theme-aware)
+3. Semantic colors (context-specific)
+
+Example usage:
+
+```jsx
+// Using primitive colors
+<div className="bg-gray-100">
+
+// Using dynamic colors
+<div className="bg-gray-100-dynamic">
+
+// Using semantic colors
+<div className="bg-bg-base text-fg-base">
+```
+
+### Typography Classes
+
+The package includes predefined typography classes:
+
+```jsx
+// Page headings
+<h1 className="page-heading-lg">
+<h2 className="page-heading-md">
+<h3 className="page-heading-sm">
+
+// Component headings
+<h4 className="component-heading-lg">
+<h5 className="component-heading-md">
+<h6 className="component-heading-sm">
+
+// Text styles
+<p className="text-description">
+<p className="text-prose">
+<p className="text-lede">
+
+// Interactive text
+<span className="text-interactive-lg">
+<span className="text-interactive-md">
+<span className="text-interactive-sm">
+```
+
+### Custom Variants
+
+The package includes custom Tailwind variants:
+
+```jsx
+// Light theme specific styles
+<div className="@light:bg-white">
+
+// Dark theme specific styles
+<div className="@dark:bg-black">
+
+// Touch device specific styles
+<div className="touch:hover:bg-transparent">
+```
+
+## Development
+
+### Building Color Tokens
+
+To rebuild the color tokens:
+
+```bash
+npm run build:colors
+```
+
+## License
+
+Private - Internal use only

package/css/all.css

@@ -0,0 +1,3 @@
+@import url("./colors.css");
+@import url("./tailwind.css");
+@import url("./variables.css");