initial tokenami setup

kentcdodds · Jul 8, 2024 · b027e2e · b027e2e
1 parent 244eb20
commit b027e2e
Show file tree

Hide file tree

Showing 11 changed files with 633 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,4 @@ node_modules
 
 # generated files
 /app/components/ui/icons
+/app/styles/tokenami.css
diff --git a/.tokenami/tokenami.config.ts b/.tokenami/tokenami.config.ts
@@ -0,0 +1,45 @@
+import { createConfig } from '@tokenami/css'
+
+export default createConfig({
+	include: ['./app/**/*.{ts,tsx}'],
+	grid: '0.25rem',
+	responsive: {
+		sm: '(min-width: 640px)',
+		md: '(min-width: 768px)',
+		lg: '(min-width: 1024px)',
+		xl: '(min-width: 1280px)',
+		'2xl': '(min-width: 1536px)',
+	},
+	theme: {
+		modes: {
+			light: {
+				color: {
+					background: 'hsl(0 0% 100%)',
+					foreground: 'hsl(222.2 84% 4.9%)',
+				},
+			},
+			dark: {
+				color: {
+					background: 'hsl(222.2 84% 4.9%)',
+					foreground: 'hsl(210 40% 98%)',
+				},
+			},
+		},
+		alpha: {},
+		anim: {},
+		border: {},
+		color: {},
+		ease: {},
+		'font-size': {},
+		leading: {},
+		'line-style': {},
+		radii: {},
+		size: {},
+		shadow: {},
+		surface: {},
+		tracking: {},
+		transition: {},
+		weight: {},
+		z: {},
+	},
+})
diff --git a/.tokenami/tokenami.env.ci.d.ts b/.tokenami/tokenami.env.ci.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="./tokenami.env.d.ts" />
+import { type Config } from './tokenami.env'
+
+declare module '@tokenami/dev' {
+	interface TokenamiConfig extends Config {
+		CI: true
+	}
+}
diff --git a/.tokenami/tokenami.env.d.ts b/.tokenami/tokenami.env.d.ts
@@ -0,0 +1,7 @@
+import type config from './tokenami.config'
+
+export type Config = typeof config
+
+declare module '@tokenami/dev' {
+	interface TokenamiConfig extends Config {}
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -18,6 +18,7 @@ import {
 	useSubmit,
 } from '@remix-run/react'
 import { withSentry } from '@sentry/remix'
+import { css } from '@tokenami/css'
 import { useRef } from 'react'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
@@ -36,6 +37,7 @@ import { Icon, href as iconsHref } from './components/ui/icon.tsx'
 import { EpicToaster } from './components/ui/sonner.tsx'
 import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
 import tailwindStyleSheetUrl from './styles/tailwind.css?url'
+import tokenamiStylesheetUrl from './styles/tokenami.css?url'
 import { getUserId, logout } from './utils/auth.server.ts'
 import { ClientHintCheck, getHints } from './utils/client-hints.tsx'
 import { prisma } from './utils/db.server.ts'
@@ -66,6 +68,7 @@ export const links: LinksFunction = () => {
 		} as const, // necessary to make typescript happy
 		{ rel: 'icon', type: 'image/svg+xml', href: '/favicons/favicon.svg' },
 		{ rel: 'stylesheet', href: tailwindStyleSheetUrl },
+		{ rel: 'stylesheet', href: tokenamiStylesheetUrl },
 	].filter(Boolean)
 }
 
@@ -161,7 +164,11 @@ function Document({
 	allowIndexing?: boolean
 }) {
 	return (
-		<html lang="en" className={`${theme} h-full overflow-x-hidden`}>
+		<html
+			lang="en"
+			style={css({ '--height': 'var(---, 100%)', '--overflow-x': 'hidden' })}
+			className={`theme-${theme}`}
+		>
 			<head>
 				<ClientHintCheck nonce={nonce} />
 				<Meta />
@@ -172,7 +179,12 @@ function Document({
 				)}
 				<Links />
 			</head>
-			<body className="bg-background text-foreground">
+			<body
+				style={css({
+					'--background': 'var(--color_background)',
+					'--color': 'var(--color_foreground)',
+				})}
+			>
 				{children}
 				<script
 					nonce={nonce}
@@ -205,7 +217,13 @@ function App() {
 			allowIndexing={allowIndexing}
 			env={data.ENV}
 		>
-			<div className="flex h-screen flex-col justify-between">
+			<div
+				style={css({
+					'--display': 'flex',
+					'--flex-direction': 'column',
+					'--justify-content': 'space-between',
+				})}
+			>
 				<header className="container py-6">
 					<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
 						<Logo />

diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
@@ -43,7 +43,7 @@
 		--radius: 0.5rem;
 	}
 
-	.dark {
+	.theme-dark {
 		--background: 222.2 84% 4.9%;
 		--foreground: 210 40% 98%;
 

diff --git a/app/utils/tokenami.ts b/app/utils/tokenami.ts
@@ -0,0 +1,26 @@
+import { type CSS } from '@tokenami/css'
+import { type TokenamiProperties } from '@tokenami/dev'
+
+/*
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 2rem;
+  padding-left: 2rem;
+}
+@media (min-width: 1400px) {
+
+  .container {
+    max-width: 1400px;
+  }
+}
+
+*/
+
+function container() {
+	const containerCSS: TokenamiProperties = {
+		// '--'
+	}
+	return containerCSS
+}