From ee41952b7a566e547d67be3729dd9ace7f519fb4 Mon Sep 17 00:00:00 2001 From: fran-ink <171171801+fran-ink@users.noreply.github.com> Date: Wed, 13 Nov 2024 09:48:56 -0500 Subject: [PATCH 1/2] chore: release 0.0.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 04a844e..6a0e999 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@inkonchain/ink-kit", - "version": "0.0.3", + "version": "0.0.4", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", From d31c1b627a89c79f92c950b3c93ae30ae6d0fdd7 Mon Sep 17 00:00:00 2001 From: fran-ink <171171801+fran-ink@users.noreply.github.com> Date: Wed, 13 Nov 2024 11:29:25 -0500 Subject: [PATCH 2/2] feat: add theme hook, add bg color in Storybook, update colors --- .storybook/preview.ts | 4 ++++ .storybook/theme.css | 4 ++++ package.json | 2 +- src/components/index.ts | 1 + src/hooks/index.ts | 1 + src/hooks/useInkThemeClass.ts | 15 +++++++++++++++ src/index.ts | 1 + src/styles/Colors.stories.tsx | 8 +++++--- src/styles/colors.css | 19 ++++++++++++++----- tailwind.config.mjs | 33 +++++++++++++++++++-------------- 10 files changed, 65 insertions(+), 23 deletions(-) create mode 100644 .storybook/theme.css create mode 100644 src/hooks/index.ts create mode 100644 src/hooks/useInkThemeClass.ts diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 7e042e6..dd99680 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -2,9 +2,13 @@ import type { Preview, ReactRenderer } from "@storybook/react"; import { withThemeByClassName } from "@storybook/addon-themes"; import "../src/tailwind.css"; +import "./theme.css"; const preview: Preview = { parameters: { + backgrounds: { + disable: true, + }, controls: { matchers: { color: /(background|color)$/i, diff --git a/.storybook/theme.css b/.storybook/theme.css new file mode 100644 index 0000000..e55b8dd --- /dev/null +++ b/.storybook/theme.css @@ -0,0 +1,4 @@ +.ink-dark body, +.ink-dark .docs-story { + background-color: #160f1f; +} diff --git a/package.json b/package.json index 6a0e999..95ff9f4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@inkonchain/ink-kit", - "version": "0.0.4", + "version": "0.0.6", "description": "", "main": "dist/index.cjs.js", "module": "dist/index.es.js", diff --git a/src/components/index.ts b/src/components/index.ts index e22c29a..7c8d4df 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,2 @@ export * from "./Button"; +export * from "./SegmentedControl"; diff --git a/src/hooks/index.ts b/src/hooks/index.ts new file mode 100644 index 0000000..fc4282f --- /dev/null +++ b/src/hooks/index.ts @@ -0,0 +1 @@ +export * from "./useInkThemeClass"; diff --git a/src/hooks/useInkThemeClass.ts b/src/hooks/useInkThemeClass.ts new file mode 100644 index 0000000..a64f5b2 --- /dev/null +++ b/src/hooks/useInkThemeClass.ts @@ -0,0 +1,15 @@ +import { useEffect } from "react"; + +const themeClasses = ["ink-dark", "ink-light"]; + +export function useInkThemeClass(theme: "ink-dark" | "ink-light") { + useEffect(() => { + themeClasses.forEach((t) => { + if (theme === t) { + document.documentElement.classList.add(t); + } else { + document.documentElement.classList.remove(t); + } + }); + }, [theme]); +} diff --git a/src/index.ts b/src/index.ts index 28094c5..e402df4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,4 @@ import "./tailwind.css"; export * from "./components"; +export * from "./hooks"; export * as InkIcon from "./icons"; diff --git a/src/styles/Colors.stories.tsx b/src/styles/Colors.stories.tsx index 6ec2d9b..1f0919a 100644 --- a/src/styles/Colors.stories.tsx +++ b/src/styles/Colors.stories.tsx @@ -5,10 +5,12 @@ function Colors() { const colors = [ "ink-bg-primary ink-text-text-on-primary", "ink-bg-secondary ink-text-text-on-secondary", - "ink-bg-background-container", - "ink-bg-background-light-0", - "ink-bg-background-light-50", + "ink-bg-background-dark", + "ink-bg-background-dark-transparent", "ink-bg-background-light", + "ink-bg-background-light-transparent", + "ink-bg-background-light-invisible", + "ink-bg-background-container", "ink-bg-status-success-bg ink-text-status-success", "ink-bg-status-error-bg ink-text-status-error", "ink-bg-status-alert-bg ink-text-status-alert", diff --git a/src/styles/colors.css b/src/styles/colors.css index 85f30d1..94ce840 100644 --- a/src/styles/colors.css +++ b/src/styles/colors.css @@ -1,20 +1,27 @@ :root { + /* Background */ --ink-background-dark: rgb(240, 239, 255); + --ink-background-dark-transparent: color-mix( + in srgb, + var(--ink-background-dark), + transparent 20% + ); + --ink-background-light: rgb(255, 255, 255); + --ink-background-light-transparent: rgb(255, 255, 255, 0.5); + --ink-background-light-invisible: rgb(255, 255, 255, 0); --ink-background-container: color-mix( in srgb, var(--ink-background-dark), transparent 6% ); - --ink-background-light: rgb(255, 255, 255); - --ink-background-light-50: rgb(255, 255, 255); - --ink-background-light-0: rgb(255, 255, 255); + /* Button */ --ink-primary: rgb(113, 50, 245); --ink-primary-hover: color-mix(in srgb, var(--ink-primary), transparent 10%); --ink-primary-pressed: color-mix( in srgb, - var(--ink-primary-hover), - transparent 10% + var(--ink-primary), + transparent 20% ); --ink-secondary: color-mix(in srgb, var(--ink-primary), transparent 94%); --ink-secondary-hover: color-mix( @@ -28,6 +35,7 @@ transparent 90% ); + /* Text */ --ink-text-default: rgb(22, 15, 31); --ink-text-muted: color-mix( in srgb, @@ -47,6 +55,7 @@ transparent 50% ); + /* Status */ --ink-status-success: rgb(61, 166, 103); --ink-status-success-bg: color-mix( in srgb, diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 59eecff..6654a6c 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -30,10 +30,11 @@ const config = { colors: { background: { dark: "var(--ink-background-dark)", + "dark-transparent": "var(--ink-background-dark-transparent)", container: "var(--ink-background-container)", light: "var(--ink-background-light)", - "light-50": "var(--ink-background-light-50)", - "light-0": "var(--ink-background-light-0)", + "light-transparent": "var(--ink-background-light-transparent)", + "light-invisible": "var(--ink-background-light-invisible)", }, primary: "var(--ink-primary)", "primary-hover": "var(--ink-primary-hover)", @@ -41,18 +42,22 @@ const config = { secondary: "var(--ink-secondary)", "secondary-hover": "var(--ink-secondary-hover)", "secondary-pressed": "var(--ink-secondary-pressed)", - "text-default": "var(--ink-text-default)", - "text-muted": "var(--ink-text-muted)", - "text-on-primary": "var(--ink-text-on-primary)", - "text-on-primary-disabled": "var(--ink-text-on-primary-disabled)", - "text-on-secondary": "var(--ink-text-on-secondary)", - "text-on-secondary-disabled": "var(--ink-text-on-secondary-disabled)", - "status-success": "var(--ink-status-success)", - "status-success-bg": "var(--ink-status-success-bg)", - "status-alert": "var(--ink-status-alert)", - "status-alert-bg": "var(--ink-status-alert-bg)", - "status-error": "var(--ink-status-error)", - "status-error-bg": "var(--ink-status-error-bg)", + text: { + default: "var(--ink-text-default)", + muted: "var(--ink-text-muted)", + "on-primary": "var(--ink-text-on-primary)", + "on-primary-disabled": "var(--ink-text-on-primary-disabled)", + "on-secondary": "var(--ink-text-on-secondary)", + "on-secondary-disabled": "var(--ink-text-on-secondary-disabled)", + }, + status: { + success: "var(--ink-status-success)", + "success-bg": "var(--ink-status-success-bg)", + alert: "var(--ink-status-alert)", + "alert-bg": "var(--ink-status-alert-bg)", + error: "var(--ink-status-error)", + "error-bg": "var(--ink-status-error-bg)", + }, }, fontSize: { h1: ["var(--ink-font-size-h1)", "var(--ink-font-line-height-h1)"],