@surge-studio/spark
v0.3.3
Published
Surge Studio Design System.
Downloads
7
Readme
Spark
Surge Studio Design System.
Usage
Install the package.
pnpm add @surge-studio/sparkSetup tailwind.config.ts using presets and content.
Use extend to update the colour scheme or any other properties.
import type { Config } from 'tailwindcss';
import colors from 'tailwindcss/colors';
import { tailwindConfig } from '@surge-studio/spark';
const config: Config = {
presets: [tailwindConfig],
content: tailwindConfig.content,
theme: {
extend: {
colors: {
primary: colors.purple,
gray: colors.zinc,
},
},
},
};
export default config;Apply global styles.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
@apply bg-white text-gray-900;
}
.dark {
@apply bg-gray-950 text-white;
}
}Add the ThemeProvider and Inter font.
App directory
// app/layout.jsx
import { ThemeProvider } from '@surge-studio/spark';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function Layout({ children }) {
return (
<html suppressHydrationWarning>
<head />
<body className={inter.className}>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}As per
next-themesif you do not add suppressHydrationWarning to your<html>you will get warnings because next-themes updates that element. This property only applies one level deep, so it won't block hydration warnings on other elements.
Pages directory
// pages/_app.tsx
import type { AppProps } from 'next/app';
import type { FC } from 'react';
import { ThemeProvider } from '@surge-studio/spark';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
const App: FC<AppProps> = ({ Component, pageProps }) => (
<ThemeProvider>
<main className={inter.className}>
<Component {...pageProps} />
</main>
</ThemeProvider>
);
export default App;Ready to go!
import { Button } from '@surge-studio/spark';Development
Install packages with pnpm install
Run Storybook with pnpm dev:storybook and navigate to localhost:6006
Run Next.js landing page with pnpm dev:next and navigate to localhost:3000
Run concurrently with pnpm dev
Release workflow
Releases are created manually at this stage in the project.
Prepare build with
pnpm packageTest locally with
pnpm pack --pack-destination ../Include in a test project with
"@surge-studio/spark": "file:../surge-studio-spark-0.3.0-rc1.tgz"Publish with
npm publish