diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 41da397..d2b96b6 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -35,11 +35,11 @@ const preview: Preview = { decorators: [ withThemeByClassName({ themes: { - light: "ink-light-theme", - dark: "ink-dark-theme", - contrast: "ink-contrast-theme", - neo: "ink-neo-theme", - morpheus: "ink-morpheus-theme", + light: "ink:light-theme", + dark: "ink:dark-theme", + contrast: "ink:contrast-theme", + neo: "ink:neo-theme", + morpheus: "ink:morpheus-theme", }, defaultTheme: "light", }), diff --git a/README.md b/README.md index 8f55301..1745364 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,8 @@ -Inkkit Banner +Ink Kit Banner -# Inkkit +# Welcome to Ink Kit -Inkkit is an onchain-focused SDK that delivers a delightful developer experience with ready-to-use app layout templates, themes, and magical animated components. - -## Features - -- 🎨 Customizable app layout templates -- ✨ Magical animated components -- 🎭 Vibrant themes -- ⛓️ Onchain-focused development -- 🚀 Efficient developer experience -- 📱 Polished, engaging interfaces +Ink Kit is an onchain-focused SDK that delivers a delightful developer experience with ready-to-use app layout templates, themes, and magical animated components. ## Install @@ -43,12 +34,58 @@ function App() { } ``` -Note: Inkkit classes are prefixed with `ink-` and can be customized using CSS variables instead of Tailwind classes. They should be imported first so that your own custom classes are taking precedence. +Note: Ink Kit classes are prefixed with `ink:` and can be customized using CSS variables instead of Tailwind classes. They should be imported first so that your own custom classes are taking precedence. + +## Key Features + +- 🎨 **Customizable app layout templates** +- ✨ **Magical animated components** +- 🎭 **Vibrant themes** +- ⛓️ **Onchain-focused development** +- 🚀 **Efficient developer experience** +- 📱 **Polished, engaging interfaces** + +## Theming + +By default, Ink Kit provides a couple of themes already in the stylesheet: + +- Light (`light-theme`) +- Dark (`dark-theme`) +- Contrast (`contrast-theme`) +- Neo (`neo-theme`) +- Morpheus (`morpheus-theme`) + +To specify which theme to use, add the `ink:THEME_ID` to your document root: + +```tsx + + ... +``` + +If you want to programatically set this value, you can use the `useInkThemeClass`: + +```tsx +const theme = getMyCurrentTheme(); +useInkThemeClass(theme === "light" ? "ink:neo-theme" : "ink:dark-theme"); +``` + +### Custom Theme + +To create a custom theme, you can override CSS variables: + +```css +:root { + --ink-button-primary: rgb(10, 55, 10); + ... +} +``` + +To see examples on specific colors that you can override, check the following [theme](https://github.com/inkonchain/ink-kit/tree/main/src/styles/theme) section of the Ink Kit repository. ## Resources -- **Documentation**: Browse components and examples on our [Storybook page](https://inkkit.inkonchain.com/) -- **Contributing**: Open a PR right here on our [GitHub repository](https://github.com/inkonchain/ink-kit) +- **Documentation**: Browse components and examples in the sidebar +- **Contributing**: Visit our [GitHub repository](https://github.com/inkonchain/ink-kit) ## WIP Notice diff --git a/src/hooks/useInkThemeClass.ts b/src/hooks/useInkThemeClass.ts index 7fa7841..100bed1 100644 --- a/src/hooks/useInkThemeClass.ts +++ b/src/hooks/useInkThemeClass.ts @@ -1,22 +1,17 @@ import { useEffect } from "react"; -const themeClasses = [ - "ink-dark-theme", - "ink-light-theme", - "ink:contrast-theme", - "ink-neo-theme", - "ink-morpheus-theme", -] as const; +const themeClasses = ["dark", "light", "contrast", "neo", "morpheus"] as const; export function useInkThemeClass( theme: "default" | (typeof themeClasses)[number] ) { useEffect(() => { themeClasses.forEach((t) => { + const className = `ink:${t}-theme`; if (theme === t) { - document.documentElement.classList.add(t); + document.documentElement.classList.add(className); } else { - document.documentElement.classList.remove(t); + document.documentElement.classList.remove(className); } }); }, [theme]); diff --git a/src/stories/Welcome.mdx b/src/stories/Welcome.mdx index 74af9d5..731c02b 100644 --- a/src/stories/Welcome.mdx +++ b/src/stories/Welcome.mdx @@ -5,13 +5,13 @@ import Banner from "../images/banner.webp?base64"; Inkkit Banner -# Welcome to Inkkit +# Welcome to Ink Kit -Inkkit is an onchain-focused SDK that delivers a delightful developer experience with ready-to-use app layout templates, themes, and magical animated components. +Ink Kit is an onchain-focused SDK that delivers a delightful developer experience with ready-to-use app layout templates, themes, and magical animated components. ## Install @@ -43,7 +43,7 @@ function App() { } ``` -Note: Inkkit classes are prefixed with `ink-` and can be customized using CSS variables instead of Tailwind classes. They should be imported first so that your own custom classes are taking precedence. +Note: Ink Kit classes are prefixed with `ink:` and can be customized using CSS variables instead of Tailwind classes. They should be imported first so that your own custom classes are taking precedence. ## Key Features @@ -56,7 +56,40 @@ Note: Inkkit classes are prefixed with `ink-` and can be customized using CSS va ## Theming -Complete theming guide coming soon. +By default, Ink Kit provides a couple of themes already in the stylesheet: + +- Light (`light-theme`) +- Dark (`dark-theme`) +- Contrast (`contrast-theme`) +- Neo (`neo-theme`) +- Morpheus (`morpheus-theme`) + +To specify which theme to use, add the `ink:THEME_ID` to your document root: + +```tsx + + ... +``` + +If you want to programatically set this value, you can use the `useInkThemeClass`: + +```tsx +const theme = getMyCurrentTheme(); +useInkThemeClass(theme === "light" ? "ink:neo-theme" : "ink:dark-theme"); +``` + +### Custom Theme + +To create a custom theme, you can override CSS variables: + +```css +:root { + --ink-button-primary: rgb(10, 55, 10); + ... +} +``` + +To see examples on specific colors that you can override, check the following [theme](https://github.com/inkonchain/ink-kit/tree/main/src/styles/theme) section of the Ink Kit repository. ## Resources diff --git a/src/styles/theme/colors.base.css b/src/styles/theme/colors.base.css index e555b9e..6395899 100644 --- a/src/styles/theme/colors.base.css +++ b/src/styles/theme/colors.base.css @@ -1,3 +1,8 @@ +/* + Colors in this file are automatically computed using the other variables. + You can override them in a theme if you need specific colors, but these should look good without it. +*/ + :root { /* Background */ --ink-background-dark-transparent: color-mix( diff --git a/src/styles/theme/colors.contrast.css b/src/styles/theme/colors.contrast.css index 9b2c0e6..3000a1a 100644 --- a/src/styles/theme/colors.contrast.css +++ b/src/styles/theme/colors.contrast.css @@ -1,5 +1,5 @@ :root, -:root.ink-contrast-theme { +:root.ink\:contrast-theme { /* Background */ --ink-background-dark: rgba(221, 221, 221, 1); --ink-background-light: rgba(255, 255, 255, 1); diff --git a/src/styles/theme/colors.dark.css b/src/styles/theme/colors.dark.css index 3b0f30b..11414a8 100644 --- a/src/styles/theme/colors.dark.css +++ b/src/styles/theme/colors.dark.css @@ -1,5 +1,5 @@ :root, -:root.ink-dark-theme { +:root.ink\:dark-theme { /* Background */ --ink-background-dark: rgb(22, 15, 31); --ink-background-light: rgb(33, 26, 41); @@ -19,6 +19,10 @@ --ink-status-error: rgb(236, 109, 109); } +/* + This allow us to use the dark theme over the light theme by default, depending on user preference. + The overrides should _exactly_ match the variables above. +*/ @media (prefers-color-scheme: dark) { :root { /* Background */ diff --git a/src/styles/theme/colors.light.css b/src/styles/theme/colors.light.css index f662452..acde7f1 100644 --- a/src/styles/theme/colors.light.css +++ b/src/styles/theme/colors.light.css @@ -1,5 +1,5 @@ :root, -:root.ink-light-theme { +:root.ink\:light-theme { /* Background */ --ink-background-dark: rgb(240, 239, 255); --ink-background-light: rgb(255, 255, 255); diff --git a/src/styles/theme/colors.morpheus.css b/src/styles/theme/colors.morpheus.css index 6d790cb..322ed7c 100644 --- a/src/styles/theme/colors.morpheus.css +++ b/src/styles/theme/colors.morpheus.css @@ -1,5 +1,5 @@ :root, -:root.ink-morpheus-theme { +:root.ink\:morpheus-theme { /* Background */ --ink-background-dark: rgba(15, 13, 35, 1); --ink-background-light: rgba(27, 23, 73, 1); diff --git a/src/styles/theme/colors.neo.css b/src/styles/theme/colors.neo.css index e65740d..fe95930 100644 --- a/src/styles/theme/colors.neo.css +++ b/src/styles/theme/colors.neo.css @@ -1,5 +1,5 @@ :root, -:root.ink-neo-theme { +:root.ink\:neo-theme { /* Background */ --ink-background-dark: rgb(7, 9, 8); --ink-background-light: rgb(19, 28, 23);