diff --git a/examples/next-example/src/pages/index.tsx b/examples/next-example/src/pages/index.tsx
index a3488e3..9b86774 100644
--- a/examples/next-example/src/pages/index.tsx
+++ b/examples/next-example/src/pages/index.tsx
@@ -5,7 +5,7 @@
 
 import Head from "next/head";
 import Image from "next/image";
-import { useYoshiki, Stylable, md } from "yoshiki/web";
+import { useYoshiki, Stylable, md, ysMap } from "yoshiki/web";
 import { ReactNode } from "react";
 
 const Box = ({ children, ...props }: { children?: ReactNode } & Stylable) => {
@@ -69,7 +69,7 @@ export default function Home(props: Stylable) {
 						},
 						hover: {
 							text: {
-								color: { xs: "blue", md: "black" },
+								color: ysMap({ xs: "lue", md: "lack" }, (x) => `b${x}`),
 							},
 						},
 						focus: {
diff --git a/packages/yoshiki/package.json b/packages/yoshiki/package.json
index 973930b..b3491c6 100644
--- a/packages/yoshiki/package.json
+++ b/packages/yoshiki/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "yoshiki",
-	"version": "1.2.7",
+	"version": "1.2.8",
 	"author": "Zoe Roux <zoe.roux@sdg.moe> (https://github.com/zoriya)",
 	"license": "MIT",
 	"keywords": [
diff --git a/packages/yoshiki/src/native/index.tsx b/packages/yoshiki/src/native/index.tsx
index 61970a8..5d48a5b 100644
--- a/packages/yoshiki/src/native/index.tsx
+++ b/packages/yoshiki/src/native/index.tsx
@@ -32,3 +32,5 @@ export { sm, md, lg, xl } from "./type";
 export const ThemeProvider = ({ theme, children }: { theme: Theme; children?: ReactNode }) => {
 	return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 };
+
+export * from "../type";
diff --git a/packages/yoshiki/src/type.ts b/packages/yoshiki/src/type.ts
index 8dca6c5..d8253f3 100644
--- a/packages/yoshiki/src/type.ts
+++ b/packages/yoshiki/src/type.ts
@@ -4,6 +4,7 @@
 //
 
 import { breakpoints, Theme } from "./theme";
+import { isBreakpoints } from "./utils";
 
 export type YoshikiStyle<Property> =
 	| Property
@@ -78,3 +79,19 @@ export const assignChilds = <Style>(
 	}
 	return target;
 };
+
+export const ysMap = <Property>(
+	value: YoshikiStyle<Property>,
+	f: (p: Property) => Property,
+): YoshikiStyle<Property> => {
+	if (typeof value === "function") {
+		// @ts-ignore too hard to type right
+		return (theme) => ysMap(value(theme), f);
+	}
+	if (isBreakpoints(value)) {
+		return Object.fromEntries(
+			Object.entries(value).map(([bp, bpValue]) => [bp, ysMap(bpValue, f)]),
+		);
+	}
+	return f(value);
+};
diff --git a/packages/yoshiki/src/web/index.ts b/packages/yoshiki/src/web/index.ts
index ad3363b..ef81b6d 100644
--- a/packages/yoshiki/src/web/index.ts
+++ b/packages/yoshiki/src/web/index.ts
@@ -25,3 +25,5 @@ export { useAutomaticTheme } from "./automatic-theme";
 
 export const ThemeProvider = ({ theme, children }: { theme: Theme; children?: ReactNode }) =>
 	createElement(ThemeContext.Provider, { value: theme }, [children]);
+
+export * from "../type";
diff --git a/shell.nix b/shell.nix
index 9ecc7b7..0b7b7df 100644
--- a/shell.nix
+++ b/shell.nix
@@ -4,5 +4,6 @@
       nodejs-16_x
       nodePackages.yarn
       nodePackages.expo-cli
+      nodePackages.eslint_d
     ];
   }