feat: update doc follow themes, update ink:theme classes

inkonchain · Nov 22, 2024 · b1dc8f8 · b1dc8f8
1 parent a7446d7
commit b1dc8f8
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 39 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -35,11 +35,11 @@ const preview: Preview = {
   decorators: [
     withThemeByClassName<ReactRenderer>({
       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
@@ -1,17 +1,8 @@
-<img src="src/images/banner.png" alt="Inkkit Banner" style="width: 100%; border-radius: 8px; margin-bottom: 2rem;" />
+<img src="src/images/banner.png" alt="Ink Kit Banner" style="width: 100%; border-radius: 8px; margin-bottom: 2rem;" />
 
-# 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
+<html class="ink:dark-theme">
+  ...
+```
+
+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
@@ -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
@@ -5,13 +5,13 @@ import Banner from "../images/banner.webp?base64";
 
 <img
   src={Banner}
-  alt="Inkkit Banner"
+  alt="Ink Kit Banner"
   style={{ width: "100%", marginBottom: "2rem", borderRadius: "8px" }}
 />
 
-# 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
+<html class="ink:dark-theme">
+  ...
+```
+
+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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);