@liner-fe/design-token-rn 1.0.4 → 1.0.6

package/lib/color/index.d.ts

@@ -1,7 +1,11 @@
 import { vars } from '../generated/vars';
-export declare const themeAtoms: import("recoil").RecoilState<"sys" | "dark" | "light">;
+export type Theme = 'dark' | 'light' | 'sys';
+export declare const useSetTheme: () => {
+    setTheme: (theme: Theme) => void;
+};
 export type ColorType = typeof vars.color.light;
 export declare const useColor: <T>(StyleSheetFunction: (color: ColorType) => T) => {
     styles: T;
     color: ColorType;
 };
+export declare const MMKV_KEY = "MMKV_KEY_THEME";

package/lib/hooks/useDarkTheme.d.ts

@@ -0,0 +1,3 @@
+export declare const useDarkTheme: () => {
+    isDarkTheme: boolean;
+};

package/lib/index.cjs

@@ -21,8 +21,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  themeAtoms: () => themeAtoms,
+  MMKV_KEY: () => MMKV_KEY,
   useColor: () => useColor,
+  useDarkTheme: () => useDarkTheme,
+  useSetTheme: () => useSetTheme,
   vars: () => vars
 });
 module.exports = __toCommonJS(index_exports);
@@ -31,15 +33,32 @@ module.exports = __toCommonJS(index_exports);
 var vars = { "color": { "light": { "neutral-container-lowest": "#ffffff", "neutral-container-lowest-hover": "#F6F6F7", "neutral-container-low": "#F9F9FA", "neutral-container-low-hover": "#F6F6F7", "neutral-container-mid": "#F6F6F7", "neutral-container-mid-hover": "#EDEEF0", "neutral-container-high": "#EDEEF0", "neutral-container-high-hover": "#E3E3E6", "neutral-container-highest": "#E9E9EB", "neutral-container-static-lowest": "#ffffff", "neutral-container-static-lowest-hover": "#F6F6F7", "neutral-container-variation-lowest": "#ffffff", "neutral-fill-lowest": "rgba(109,109,112,0)", "neutral-fill-lowest-hover": "rgba(109,109,112,0.06)", "neutral-fill-low": "rgba(109,109,112,0.08)", "neutral-fill-low-hover": "rgba(109,109,112,0.04)", "neutral-fill-mid": "rgba(109,109,112,0.08)", "neutral-fill-mid-hover": "rgba(109,109,112,0.16)", "neutral-fill-high": "rgba(109,109,112,0.2)", "neutral-fill-high-hover": "rgba(109,109,112,0.28)", "neutral-fill-highest": "rgba(109,109,112,0.72)", "neutral-label-primary": "#1E1E1F", "neutral-label-secondary": "rgba(109,109,112,0.8)", "neutral-label-tertiary": "rgba(109,109,112,0.48)", "neutral-label-quaternary": "rgba(109,109,112,0.24)", "neutral-label-static-primary": "#1E1E1F", "neutral-label-static-secondary": "rgba(109,109,112,0.8)", "neutral-border-overlay-strong": "rgba(109,109,112,0.64)", "neutral-border-overlay-normal": "rgba(109,109,112,0.24)", "neutral-border-overlay-subtle": "rgba(109,109,112,0.16)", "neutral-border-opaque-strong": "#1E1E1F", "neutral-border-opaque-normal": "#D7D7D9", "neutral-border-opaque-subtle": "#E9E9EB", "inverse-container-lowest": "#1E1E1F", "inverse-container-lowest-hover": "#313133", "inverse-container-low": "#313133", "inverse-container-low-hover": "#3B3B3D", "inverse-container-mid": "#313133", "inverse-container-mid-hover": "#4A4A4D", "inverse-container-high": "#3B3B3D", "inverse-container-high-hover": "#4A4A4D", "inverse-container-static-high": "#3B3B3D", "inverse-container-static-high-hover": "#58595C", "inverse-container-highest": "#4A4A4D", "inverse-fill-mid": "#ffffff", "inverse-fill-mid-hover": "#F6F6F7", "inverse-label-primary": "#ffffff", "inverse-label-secondary": "rgba(233,233,235,0.64)", "inverse-label-tertiary": "rgba(233,233,235,0.32)", "inverse-label-quaternary": "rgba(233,233,235,0.2)", "inverse-label-static-primary": "#ffffff", "inverse-label-static-secondary": "rgba(233,233,235,0.64)", "inverse-border-overlay-strong": "rgba(233,233,235,0.64)", "inverse-border-overlay-normal": "rgba(233,233,235,0.28)", "inverse-border-overlay-subtle": "rgba(233,233,235,0.2)", "inverse-border-opaque-strong": "#ffffff", "inverse-border-opaque-normal": "#58595C", "inverse-border-opaque-subtle": "#3B3B3D", "brand-container-mid": "#4058FF", "brand-container-mid-hover": "#273FD9", "brand-container-high": "#273FD9", "brand-label-primary": "#4058FF", "brand-label-secondary": "rgba(4,17,102,0.8)", "brand-border-opaque-normal": "#4058FF", "brand-border-overlay-normal": "rgba(4,17,102,0.2)", "brandinverse-label-primary": "#5487FF", "accent-yellow": "#FFCC00", "accent-mint": "#02B0B0", "accent-cyan": "#40B3FF", "accent-purple": "#B450E6", "accent-pink": "#FF3377", "function-container-positive": "#30BF48", "function-container-negative": "#FF3333", "function-container-negative-hover": "#DB2323", "function-container-caution": "#FF9900", "function-container-highlight": "#FFF9E3", "function-container-selection": "#FAFBFF", "function-container-drag": "#D9DEFF", "function-label-positive": "#30BF48", "function-label-negative": "#FF3333", "function-label-caution": "#FF9900", "cover-dim-page": "rgba(0,0,0,0.56)" }, "dark": { "neutral-container-lowest": "#1E1E1F", "neutral-container-lowest-hover": "#313133", "neutral-container-low": "#313133", "neutral-container-low-hover": "#3B3B3D", "neutral-container-mid": "#3B3B3D", "neutral-container-mid-hover": "#4A4A4D", "neutral-container-high": "#3B3B3D", "neutral-container-high-hover": "#4A4A4D", "neutral-container-highest": "#4A4A4D", "neutral-container-static-lowest": "#ffffff", "neutral-container-static-lowest-hover": "#E3E3E6", "neutral-container-variation-lowest": "#313133", "neutral-fill-lowest": "rgba(109,109,112,0)", "neutral-fill-lowest-hover": "rgba(109,109,112,0.12)", "neutral-fill-low": "rgba(109,109,112,0.2)", "neutral-fill-low-hover": "rgba(109,109,112,0.08)", "neutral-fill-mid": "rgba(109,109,112,0.16)", "neutral-fill-mid-hover": "rgba(109,109,112,0.32)", "neutral-fill-high": "rgba(109,109,112,0.32)", "neutral-fill-high-hover": "rgba(109,109,112,0.44)", "neutral-fill-highest": "rgba(109,109,112,0.72)", "neutral-label-primary": "#ffffff", "neutral-label-secondary": "rgba(233,233,235,0.64)", "neutral-label-tertiary": "rgba(233,233,235,0.32)", "neutral-label-quaternary": "rgba(233,233,235,0.2)", "neutral-label-static-primary": "#1E1E1F", "neutral-label-static-secondary": "rgba(109,109,112,0.8)", "neutral-border-overlay-strong": "rgba(233,233,235,0.64)", "neutral-border-overlay-normal": "rgba(233,233,235,0.28)", "neutral-border-overlay-subtle": "rgba(233,233,235,0.2)", "neutral-border-opaque-strong": "#ffffff", "neutral-border-opaque-normal": "#58595C", "neutral-border-opaque-subtle": "#3B3B3D", "inverse-container-lowest": "#ffffff", "inverse-container-lowest-hover": "#F6F6F7", "inverse-container-low": "#F9F9FA", "inverse-container-low-hover": "#F6F6F7", "inverse-container-mid": "#F6F6F7", "inverse-container-mid-hover": "#EDEEF0", "inverse-container-high": "#EDEEF0", "inverse-container-high-hover": "#E3E3E6", "inverse-container-static-high": "#3B3B3D", "inverse-container-static-high-hover": "#58595C", "inverse-container-highest": "#E9E9EB", "inverse-fill-mid": "rgba(233,233,235,0.24)", "inverse-fill-mid-hover": "rgba(233,233,235,0)", "inverse-label-primary": "#1E1E1F", "inverse-label-secondary": "rgba(109,109,112,0.8)", "inverse-label-tertiary": "rgba(109,109,112,0.48)", "inverse-label-quaternary": "rgba(109,109,112,0.24)", "inverse-label-static-primary": "#ffffff", "inverse-label-static-secondary": "rgba(233,233,235,0.64)", "inverse-border-overlay-strong": "rgba(109,109,112,0.64)", "inverse-border-overlay-normal": "rgba(109,109,112,0.24)", "inverse-border-overlay-subtle": "rgba(109,109,112,0.16)", "inverse-border-opaque-strong": "#1E1E1F", "inverse-border-opaque-normal": "#D7D7D9", "inverse-border-opaque-subtle": "#E9E9EB", "brand-container-mid": "#4058FF", "brand-container-mid-hover": "#6B7FFF", "brand-container-high": "#273FD9", "brand-label-primary": "#5487FF", "brand-label-secondary": "rgba(4,17,102,0.8)", "brand-border-opaque-normal": "#4058FF", "brand-border-overlay-normal": "rgba(4,17,102,0.2)", "brandinverse-label-primary": "#4058FF", "accent-yellow": "#FFD739", "accent-mint": "#00CCCC", "accent-cyan": "#6AC4FF", "accent-purple": "#C978F2", "accent-pink": "#FF6095", "function-container-positive": "#5DDF73", "function-container-negative": "#FF3333", "function-container-negative-hover": "#FF6060", "function-container-caution": "#FF9900", "function-container-highlight": "#413503", "function-container-selection": "#384666", "function-container-drag": "#384666", "function-label-positive": "#5DDF73", "function-label-negative": "#FF3333", "function-label-caution": "#FF9900", "cover-dim-page": "rgba(0,0,0,0.56)" } }, "radius": { "xxs": "2px", "xs": "4px", "s": "6px", "m": "8px", "l": "10px", "xl": "12px", "xxl": "200px" }, "opacity": { "0": "0%", "1": "1%", "4": "4%", "8": "8%", "12": "12%", "16": "16%", "20": "20%", "24": "24%", "28": "28%", "32": "32%", "36": "36%", "40": "40%", "44": "44%", "48": "48%", "50": "50%", "56": "56%", "64": "64%", "72": "72%", "80": "80%" }, "padding": { "component-50": "2px", "component-100": "4px", "component-150": "6px", "component-200": "8px", "component-300": "12px", "component-400": "16px", "component-500": "20px", "component-600": "24px", "component-700": "32px", "component-800": "40px", "component-900": "48px", "section-50": "20px", "section-100": "24px", "section-200": "32px", "section-300": "40px", "section-400": "48px", "section-500": "56px", "section-600": "64px", "section-700": "80px", "section-800": "100px", "section-900": "120px" }, "size": { "0": "0px", "1": "1px", "2": "2px", "3": "3px", "4": "4px", "6": "6px", "8": "8px", "10": "10px", "12": "12px", "14": "14px", "16": "16px", "18": "18px", "20": "20px", "24": "24px", "32": "32px", "40": "40px", "48": "48px", "56": "56px", "64": "64px", "80": "80px", "100": "100px", "120": "120px", "140": "140px", "160": "160px", "180": "180px", "200": "200px", "minus6": "-6px", "minus4": "-4px", "minus2": "-2px" }, "gap": { "positive-50": "2px", "positive-100": "4px", "positive-150": "6px", "positive-200": "8px", "positive-300": "12px", "positive-400": "16px", "positive-500": "20px", "positive-600": "24px", "positive-700": "32px", "positive-800": "40px", "positive-900": "48px" }, "shadow": { "normal": ["0px 2px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)", "0px 2px 12px 0px rgba(0, 0, 0, 0.24), 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2)"], "strong": ["0px 6px 16px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)", "0px 6px 16px 0px rgba(0, 0, 0, 0.36), 0px 4px 12px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)"], "heavy": ["0px 16px 20px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)", "0px 16px 20px 0px rgba(0, 0, 0, 0.36), 0px 8px 16px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)"] }, "iconSize": { "xs": "16px", "s": "20px", "m": "24px", "l": "32px", "xl": "40px" } };
 
 // src/color/index.ts
+var import_recoil2 = require("recoil");
+var import_react_native = require("react-native");
+
+// src/store/theme.ts
 var import_recoil = require("recoil");
 var themeAtoms = (0, import_recoil.atom)({
   key: "themeAtoms",
   default: "sys"
 });
+
+// src/color/index.ts
+var useSetTheme = /* @__PURE__ */ __name(() => {
+  const setThemeRecoilState = (0, import_recoil2.useSetRecoilState)(themeAtoms);
+  const setTheme = /* @__PURE__ */ __name((theme) => {
+    setThemeRecoilState(theme);
+  }, "setTheme");
+  return { setTheme };
+}, "useSetTheme");
 var useColor = /* @__PURE__ */ __name((StyleSheetFunction) => {
-  const theme = (0, import_recoil.useRecoilValue)(themeAtoms);
+  const theme = (0, import_recoil2.useRecoilValue)(themeAtoms);
   const colorToken = (() => {
     if (theme === "sys") {
+      const colorScheme = import_react_native.Appearance.getColorScheme();
+      if (colorScheme) {
+        return vars.color[colorScheme];
+      }
       return vars.color.light;
     } else {
       return vars.color[theme];
@@ -47,4 +66,15 @@ var useColor = /* @__PURE__ */ __name((StyleSheetFunction) => {
   })();
   return { styles: StyleSheetFunction(colorToken), color: colorToken };
 }, "useColor");
+var MMKV_KEY = "MMKV_KEY_THEME";
+
+// src/hooks/useDarkTheme.ts
+var import_recoil3 = require("recoil");
+var import_react_native2 = require("react-native");
+var useDarkTheme = /* @__PURE__ */ __name(() => {
+  const theme = (0, import_recoil3.useRecoilValue)(themeAtoms);
+  return {
+    isDarkTheme: theme === "dark" || theme === "sys" && import_react_native2.Appearance.getColorScheme() === "dark"
+  };
+}, "useDarkTheme");
 //# sourceMappingURL=index.cjs.map

package/lib/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/index.ts", "../src/generated/vars.ts", "../src/color/index.ts"],
-  "sourcesContent": ["export * from './generated/vars';\nexport * from './color';\n", "export const vars = {\"color\":{\"light\":{\"neutral-container-lowest\":\"#ffffff\",\"neutral-container-lowest-hover\":\"#F6F6F7\",\"neutral-container-low\":\"#F9F9FA\",\"neutral-container-low-hover\":\"#F6F6F7\",\"neutral-container-mid\":\"#F6F6F7\",\"neutral-container-mid-hover\":\"#EDEEF0\",\"neutral-container-high\":\"#EDEEF0\",\"neutral-container-high-hover\":\"#E3E3E6\",\"neutral-container-highest\":\"#E9E9EB\",\"neutral-container-static-lowest\":\"#ffffff\",\"neutral-container-static-lowest-hover\":\"#F6F6F7\",\"neutral-container-variation-lowest\":\"#ffffff\",\"neutral-fill-lowest\":\"rgba(109,109,112,0)\",\"neutral-fill-lowest-hover\":\"rgba(109,109,112,0.06)\",\"neutral-fill-low\":\"rgba(109,109,112,0.08)\",\"neutral-fill-low-hover\":\"rgba(109,109,112,0.04)\",\"neutral-fill-mid\":\"rgba(109,109,112,0.08)\",\"neutral-fill-mid-hover\":\"rgba(109,109,112,0.16)\",\"neutral-fill-high\":\"rgba(109,109,112,0.2)\",\"neutral-fill-high-hover\":\"rgba(109,109,112,0.28)\",\"neutral-fill-highest\":\"rgba(109,109,112,0.72)\",\"neutral-label-primary\":\"#1E1E1F\",\"neutral-label-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-label-tertiary\":\"rgba(109,109,112,0.48)\",\"neutral-label-quaternary\":\"rgba(109,109,112,0.24)\",\"neutral-label-static-primary\":\"#1E1E1F\",\"neutral-label-static-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-border-overlay-strong\":\"rgba(109,109,112,0.64)\",\"neutral-border-overlay-normal\":\"rgba(109,109,112,0.24)\",\"neutral-border-overlay-subtle\":\"rgba(109,109,112,0.16)\",\"neutral-border-opaque-strong\":\"#1E1E1F\",\"neutral-border-opaque-normal\":\"#D7D7D9\",\"neutral-border-opaque-subtle\":\"#E9E9EB\",\"inverse-container-lowest\":\"#1E1E1F\",\"inverse-container-lowest-hover\":\"#313133\",\"inverse-container-low\":\"#313133\",\"inverse-container-low-hover\":\"#3B3B3D\",\"inverse-container-mid\":\"#313133\",\"inverse-container-mid-hover\":\"#4A4A4D\",\"inverse-container-high\":\"#3B3B3D\",\"inverse-container-high-hover\":\"#4A4A4D\",\"inverse-container-static-high\":\"#3B3B3D\",\"inverse-container-static-high-hover\":\"#58595C\",\"inverse-container-highest\":\"#4A4A4D\",\"inverse-fill-mid\":\"#ffffff\",\"inverse-fill-mid-hover\":\"#F6F6F7\",\"inverse-label-primary\":\"#ffffff\",\"inverse-label-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-label-tertiary\":\"rgba(233,233,235,0.32)\",\"inverse-label-quaternary\":\"rgba(233,233,235,0.2)\",\"inverse-label-static-primary\":\"#ffffff\",\"inverse-label-static-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-strong\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-normal\":\"rgba(233,233,235,0.28)\",\"inverse-border-overlay-subtle\":\"rgba(233,233,235,0.2)\",\"inverse-border-opaque-strong\":\"#ffffff\",\"inverse-border-opaque-normal\":\"#58595C\",\"inverse-border-opaque-subtle\":\"#3B3B3D\",\"brand-container-mid\":\"#4058FF\",\"brand-container-mid-hover\":\"#273FD9\",\"brand-container-high\":\"#273FD9\",\"brand-label-primary\":\"#4058FF\",\"brand-label-secondary\":\"rgba(4,17,102,0.8)\",\"brand-border-opaque-normal\":\"#4058FF\",\"brand-border-overlay-normal\":\"rgba(4,17,102,0.2)\",\"brandinverse-label-primary\":\"#5487FF\",\"accent-yellow\":\"#FFCC00\",\"accent-mint\":\"#02B0B0\",\"accent-cyan\":\"#40B3FF\",\"accent-purple\":\"#B450E6\",\"accent-pink\":\"#FF3377\",\"function-container-positive\":\"#30BF48\",\"function-container-negative\":\"#FF3333\",\"function-container-negative-hover\":\"#DB2323\",\"function-container-caution\":\"#FF9900\",\"function-container-highlight\":\"#FFF9E3\",\"function-container-selection\":\"#FAFBFF\",\"function-container-drag\":\"#D9DEFF\",\"function-label-positive\":\"#30BF48\",\"function-label-negative\":\"#FF3333\",\"function-label-caution\":\"#FF9900\",\"cover-dim-page\":\"rgba(0,0,0,0.56)\"},\"dark\":{\"neutral-container-lowest\":\"#1E1E1F\",\"neutral-container-lowest-hover\":\"#313133\",\"neutral-container-low\":\"#313133\",\"neutral-container-low-hover\":\"#3B3B3D\",\"neutral-container-mid\":\"#3B3B3D\",\"neutral-container-mid-hover\":\"#4A4A4D\",\"neutral-container-high\":\"#3B3B3D\",\"neutral-container-high-hover\":\"#4A4A4D\",\"neutral-container-highest\":\"#4A4A4D\",\"neutral-container-static-lowest\":\"#ffffff\",\"neutral-container-static-lowest-hover\":\"#E3E3E6\",\"neutral-container-variation-lowest\":\"#313133\",\"neutral-fill-lowest\":\"rgba(109,109,112,0)\",\"neutral-fill-lowest-hover\":\"rgba(109,109,112,0.12)\",\"neutral-fill-low\":\"rgba(109,109,112,0.2)\",\"neutral-fill-low-hover\":\"rgba(109,109,112,0.08)\",\"neutral-fill-mid\":\"rgba(109,109,112,0.16)\",\"neutral-fill-mid-hover\":\"rgba(109,109,112,0.32)\",\"neutral-fill-high\":\"rgba(109,109,112,0.32)\",\"neutral-fill-high-hover\":\"rgba(109,109,112,0.44)\",\"neutral-fill-highest\":\"rgba(109,109,112,0.72)\",\"neutral-label-primary\":\"#ffffff\",\"neutral-label-secondary\":\"rgba(233,233,235,0.64)\",\"neutral-label-tertiary\":\"rgba(233,233,235,0.32)\",\"neutral-label-quaternary\":\"rgba(233,233,235,0.2)\",\"neutral-label-static-primary\":\"#1E1E1F\",\"neutral-label-static-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-border-overlay-strong\":\"rgba(233,233,235,0.64)\",\"neutral-border-overlay-normal\":\"rgba(233,233,235,0.28)\",\"neutral-border-overlay-subtle\":\"rgba(233,233,235,0.2)\",\"neutral-border-opaque-strong\":\"#ffffff\",\"neutral-border-opaque-normal\":\"#58595C\",\"neutral-border-opaque-subtle\":\"#3B3B3D\",\"inverse-container-lowest\":\"#ffffff\",\"inverse-container-lowest-hover\":\"#F6F6F7\",\"inverse-container-low\":\"#F9F9FA\",\"inverse-container-low-hover\":\"#F6F6F7\",\"inverse-container-mid\":\"#F6F6F7\",\"inverse-container-mid-hover\":\"#EDEEF0\",\"inverse-container-high\":\"#EDEEF0\",\"inverse-container-high-hover\":\"#E3E3E6\",\"inverse-container-static-high\":\"#3B3B3D\",\"inverse-container-static-high-hover\":\"#58595C\",\"inverse-container-highest\":\"#E9E9EB\",\"inverse-fill-mid\":\"rgba(233,233,235,0.24)\",\"inverse-fill-mid-hover\":\"rgba(233,233,235,0)\",\"inverse-label-primary\":\"#1E1E1F\",\"inverse-label-secondary\":\"rgba(109,109,112,0.8)\",\"inverse-label-tertiary\":\"rgba(109,109,112,0.48)\",\"inverse-label-quaternary\":\"rgba(109,109,112,0.24)\",\"inverse-label-static-primary\":\"#ffffff\",\"inverse-label-static-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-strong\":\"rgba(109,109,112,0.64)\",\"inverse-border-overlay-normal\":\"rgba(109,109,112,0.24)\",\"inverse-border-overlay-subtle\":\"rgba(109,109,112,0.16)\",\"inverse-border-opaque-strong\":\"#1E1E1F\",\"inverse-border-opaque-normal\":\"#D7D7D9\",\"inverse-border-opaque-subtle\":\"#E9E9EB\",\"brand-container-mid\":\"#4058FF\",\"brand-container-mid-hover\":\"#6B7FFF\",\"brand-container-high\":\"#273FD9\",\"brand-label-primary\":\"#5487FF\",\"brand-label-secondary\":\"rgba(4,17,102,0.8)\",\"brand-border-opaque-normal\":\"#4058FF\",\"brand-border-overlay-normal\":\"rgba(4,17,102,0.2)\",\"brandinverse-label-primary\":\"#4058FF\",\"accent-yellow\":\"#FFD739\",\"accent-mint\":\"#00CCCC\",\"accent-cyan\":\"#6AC4FF\",\"accent-purple\":\"#C978F2\",\"accent-pink\":\"#FF6095\",\"function-container-positive\":\"#5DDF73\",\"function-container-negative\":\"#FF3333\",\"function-container-negative-hover\":\"#FF6060\",\"function-container-caution\":\"#FF9900\",\"function-container-highlight\":\"#413503\",\"function-container-selection\":\"#384666\",\"function-container-drag\":\"#384666\",\"function-label-positive\":\"#5DDF73\",\"function-label-negative\":\"#FF3333\",\"function-label-caution\":\"#FF9900\",\"cover-dim-page\":\"rgba(0,0,0,0.56)\"}},\"radius\":{\"xxs\":\"2px\",\"xs\":\"4px\",\"s\":\"6px\",\"m\":\"8px\",\"l\":\"10px\",\"xl\":\"12px\",\"xxl\":\"200px\"},\"opacity\":{\"0\":\"0%\",\"1\":\"1%\",\"4\":\"4%\",\"8\":\"8%\",\"12\":\"12%\",\"16\":\"16%\",\"20\":\"20%\",\"24\":\"24%\",\"28\":\"28%\",\"32\":\"32%\",\"36\":\"36%\",\"40\":\"40%\",\"44\":\"44%\",\"48\":\"48%\",\"50\":\"50%\",\"56\":\"56%\",\"64\":\"64%\",\"72\":\"72%\",\"80\":\"80%\"},\"padding\":{\"component-50\":\"2px\",\"component-100\":\"4px\",\"component-150\":\"6px\",\"component-200\":\"8px\",\"component-300\":\"12px\",\"component-400\":\"16px\",\"component-500\":\"20px\",\"component-600\":\"24px\",\"component-700\":\"32px\",\"component-800\":\"40px\",\"component-900\":\"48px\",\"section-50\":\"20px\",\"section-100\":\"24px\",\"section-200\":\"32px\",\"section-300\":\"40px\",\"section-400\":\"48px\",\"section-500\":\"56px\",\"section-600\":\"64px\",\"section-700\":\"80px\",\"section-800\":\"100px\",\"section-900\":\"120px\"},\"size\":{\"0\":\"0px\",\"1\":\"1px\",\"2\":\"2px\",\"3\":\"3px\",\"4\":\"4px\",\"6\":\"6px\",\"8\":\"8px\",\"10\":\"10px\",\"12\":\"12px\",\"14\":\"14px\",\"16\":\"16px\",\"18\":\"18px\",\"20\":\"20px\",\"24\":\"24px\",\"32\":\"32px\",\"40\":\"40px\",\"48\":\"48px\",\"56\":\"56px\",\"64\":\"64px\",\"80\":\"80px\",\"100\":\"100px\",\"120\":\"120px\",\"140\":\"140px\",\"160\":\"160px\",\"180\":\"180px\",\"200\":\"200px\",\"minus6\":\"-6px\",\"minus4\":\"-4px\",\"minus2\":\"-2px\"},\"gap\":{\"positive-50\":\"2px\",\"positive-100\":\"4px\",\"positive-150\":\"6px\",\"positive-200\":\"8px\",\"positive-300\":\"12px\",\"positive-400\":\"16px\",\"positive-500\":\"20px\",\"positive-600\":\"24px\",\"positive-700\":\"32px\",\"positive-800\":\"40px\",\"positive-900\":\"48px\"},\"shadow\":{\"normal\":[\"0px 2px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)\",\"0px 2px 12px 0px rgba(0, 0, 0, 0.24), 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2)\"],\"strong\":[\"0px 6px 16px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)\",\"0px 6px 16px 0px rgba(0, 0, 0, 0.36), 0px 4px 12px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)\"],\"heavy\":[\"0px 16px 20px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)\",\"0px 16px 20px 0px rgba(0, 0, 0, 0.36), 0px 8px 16px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)\"]},\"iconSize\":{\"xs\":\"16px\",\"s\":\"20px\",\"m\":\"24px\",\"l\":\"32px\",\"xl\":\"40px\"}}", "import { atom, useRecoilValue } from 'recoil';\nimport { vars } from '../generated/vars';\n// import { color, ColorType } from 'prism/color';\n\nexport const themeAtoms = atom<'sys' | 'dark' | 'light'>({\n  key: 'themeAtoms',\n  default: 'sys',\n});\n\nexport type ColorType = typeof vars.color.light;\n\nexport const useColor = <T>(\n  StyleSheetFunction: (color: ColorType) => T,\n): { styles: T; color: ColorType } => {\n  const theme = useRecoilValue(themeAtoms);\n\n  const colorToken = (() => {\n    if (theme === 'sys') {\n      // const colorScheme = Appearance.getColorScheme();\n\n      // if (colorScheme) {\n      //   return color[colorScheme];\n      // }\n\n      return vars.color.light;\n    } else {\n      return vars.color[theme];\n    }\n  })();\n\n  return { styles: StyleSheetFunction(colorToken), color: colorToken };\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,IAAM,OAAO,EAAC,SAAQ,EAAC,SAAQ,EAAC,4BAA2B,WAAU,kCAAiC,WAAU,yBAAwB,WAAU,+BAA8B,WAAU,yBAAwB,WAAU,+BAA8B,WAAU,0BAAyB,WAAU,gCAA+B,WAAU,6BAA4B,WAAU,mCAAkC,WAAU,yCAAwC,WAAU,sCAAqC,WAAU,uBAAsB,uBAAsB,6BAA4B,0BAAyB,oBAAmB,0BAAyB,0BAAyB,0BAAyB,oBAAmB,0BAAyB,0BAAyB,0BAAyB,qBAAoB,yBAAwB,2BAA0B,0BAAyB,wBAAuB,0BAAyB,yBAAwB,WAAU,2BAA0B,yBAAwB,0BAAyB,0BAAyB,4BAA2B,0BAAyB,gCAA+B,WAAU,kCAAiC,yBAAwB,iCAAgC,0BAAyB,iCAAgC,0BAAyB,iCAAgC,0BAAyB,gCAA+B,WAAU,gCAA+B,WAAU,gCAA+B,WAAU,4BAA2B,WAAU,kCAAiC,WAAU,yBAAwB,WAAU,+BAA8B,WAAU,yBAAwB,WAAU,+BAA8B,WAAU,0BAAyB,WAAU,gCAA+B,WAAU,iCAAgC,WAAU,uCAAsC,WAAU,6BAA4B,WAAU,oBAAmB,WAAU,0BAAyB,WAAU,yBAAwB,WAAU,2BAA0B,0BAAyB,0BAAyB,0BAAyB,4BAA2B,yBAAwB,gCAA+B,WAAU,kCAAiC,0BAAyB,iCAAgC,0BAAyB,iCAAgC,0BAAyB,iCAAgC,yBAAwB,gCAA+B,WAAU,gCAA+B,WAAU,gCAA+B,WAAU,uBAAsB,WAAU,6BAA4B,WAAU,wBAAuB,WAAU,uBAAsB,WAAU,yBAAwB,sBAAqB,8BAA6B,WAAU,+BAA8B,sBAAqB,8BAA6B,WAAU,iBAAgB,WAAU,eAAc,WAAU,eAAc,WAAU,iBAAgB,WAAU,eAAc,WAAU,+BAA8B,WAAU,+BAA8B,WAAU,qCAAoC,WAAU,8BAA6B,WAAU,gCAA+B,WAAU,gCAA+B,WAAU,2BAA0B,WAAU,2BAA0B,WAAU,2BAA0B,WAAU,0BAAyB,WAAU,kBAAiB,mBAAkB,GAAE,QAAO,EAAC,4BAA2B,WAAU,kCAAiC,WAAU,yBAAwB,WAAU,+BAA8B,WAAU,yBAAwB,WAAU,+BAA8B,WAAU,0BAAyB,WAAU,gCAA+B,WAAU,6BAA4B,WAAU,mCAAkC,WAAU,yCAAwC,WAAU,sCAAqC,WAAU,uBAAsB,uBAAsB,6BAA4B,0BAAyB,oBAAmB,yBAAwB,0BAAyB,0BAAyB,oBAAmB,0BAAyB,0BAAyB,0BAAyB,qBAAoB,0BAAyB,2BAA0B,0BAAyB,wBAAuB,0BAAyB,yBAAwB,WAAU,2BAA0B,0BAAyB,0BAAyB,0BAAyB,4BAA2B,yBAAwB,gCAA+B,WAAU,kCAAiC,yBAAwB,iCAAgC,0BAAyB,iCAAgC,0BAAyB,iCAAgC,yBAAwB,gCAA+B,WAAU,gCAA+B,WAAU,gCAA+B,WAAU,4BAA2B,WAAU,kCAAiC,WAAU,yBAAwB,WAAU,+BAA8B,WAAU,yBAAwB,WAAU,+BAA8B,WAAU,0BAAyB,WAAU,gCAA+B,WAAU,iCAAgC,WAAU,uCAAsC,WAAU,6BAA4B,WAAU,oBAAmB,0BAAyB,0BAAyB,uBAAsB,yBAAwB,WAAU,2BAA0B,yBAAwB,0BAAyB,0BAAyB,4BAA2B,0BAAyB,gCAA+B,WAAU,kCAAiC,0BAAyB,iCAAgC,0BAAyB,iCAAgC,0BAAyB,iCAAgC,0BAAyB,gCAA+B,WAAU,gCAA+B,WAAU,gCAA+B,WAAU,uBAAsB,WAAU,6BAA4B,WAAU,wBAAuB,WAAU,uBAAsB,WAAU,yBAAwB,sBAAqB,8BAA6B,WAAU,+BAA8B,sBAAqB,8BAA6B,WAAU,iBAAgB,WAAU,eAAc,WAAU,eAAc,WAAU,iBAAgB,WAAU,eAAc,WAAU,+BAA8B,WAAU,+BAA8B,WAAU,qCAAoC,WAAU,8BAA6B,WAAU,gCAA+B,WAAU,gCAA+B,WAAU,2BAA0B,WAAU,2BAA0B,WAAU,2BAA0B,WAAU,0BAAyB,WAAU,kBAAiB,mBAAkB,EAAC,GAAE,UAAS,EAAC,OAAM,OAAM,MAAK,OAAM,KAAI,OAAM,KAAI,OAAM,KAAI,QAAO,MAAK,QAAO,OAAM,QAAO,GAAE,WAAU,EAAC,KAAI,MAAK,KAAI,MAAK,KAAI,MAAK,KAAI,MAAK,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,OAAM,MAAK,MAAK,GAAE,WAAU,EAAC,gBAAe,OAAM,iBAAgB,OAAM,iBAAgB,OAAM,iBAAgB,OAAM,iBAAgB,QAAO,iBAAgB,QAAO,iBAAgB,QAAO,iBAAgB,QAAO,iBAAgB,QAAO,iBAAgB,QAAO,iBAAgB,QAAO,cAAa,QAAO,eAAc,QAAO,eAAc,QAAO,eAAc,QAAO,eAAc,QAAO,eAAc,QAAO,eAAc,QAAO,eAAc,QAAO,eAAc,SAAQ,eAAc,QAAO,GAAE,QAAO,EAAC,KAAI,OAAM,KAAI,OAAM,KAAI,OAAM,KAAI,OAAM,KAAI,OAAM,KAAI,OAAM,KAAI,OAAM,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,MAAK,QAAO,OAAM,SAAQ,OAAM,SAAQ,OAAM,SAAQ,OAAM,SAAQ,OAAM,SAAQ,OAAM,SAAQ,UAAS,QAAO,UAAS,QAAO,UAAS,OAAM,GAAE,OAAM,EAAC,eAAc,OAAM,gBAAe,OAAM,gBAAe,OAAM,gBAAe,OAAM,gBAAe,QAAO,gBAAe,QAAO,gBAAe,QAAO,gBAAe,QAAO,gBAAe,QAAO,gBAAe,QAAO,gBAAe,OAAM,GAAE,UAAS,EAAC,UAAS,CAAC,kHAAiH,8GAA8G,GAAE,UAAS,CAAC,mHAAkH,iHAAiH,GAAE,SAAQ,CAAC,oHAAmH,kHAAkH,EAAC,GAAE,YAAW,EAAC,MAAK,QAAO,KAAI,QAAO,KAAI,QAAO,KAAI,QAAO,MAAK,OAAM,EAAC;;;ACA94R,oBAAqC;AAI9B,IAAM,iBAAa,oBAA+B;AAAA,EACvD,KAAK;AAAA,EACL,SAAS;AACX,CAAC;AAIM,IAAM,WAAW,wBACtB,uBACoC;AACpC,QAAM,YAAQ,8BAAe,UAAU;AAEvC,QAAM,cAAc,MAAM;AACxB,QAAI,UAAU,OAAO;AAOnB,aAAO,KAAK,MAAM;AAAA,IACpB,OAAO;AACL,aAAO,KAAK,MAAM,KAAK;AAAA,IACzB;AAAA,EACF,GAAG;AAEH,SAAO,EAAE,QAAQ,mBAAmB,UAAU,GAAG,OAAO,WAAW;AACrE,GApBwB;",
-  "names": []
+  "sources": ["../src/index.ts", "../src/generated/vars.ts", "../src/color/index.ts", "../src/store/theme.ts", "../src/hooks/useDarkTheme.ts"],
+  "sourcesContent": ["export * from './generated/vars';\nexport * from './color';\nexport * from './hooks/useDarkTheme';\n", "export const vars = {\"color\":{\"light\":{\"neutral-container-lowest\":\"#ffffff\",\"neutral-container-lowest-hover\":\"#F6F6F7\",\"neutral-container-low\":\"#F9F9FA\",\"neutral-container-low-hover\":\"#F6F6F7\",\"neutral-container-mid\":\"#F6F6F7\",\"neutral-container-mid-hover\":\"#EDEEF0\",\"neutral-container-high\":\"#EDEEF0\",\"neutral-container-high-hover\":\"#E3E3E6\",\"neutral-container-highest\":\"#E9E9EB\",\"neutral-container-static-lowest\":\"#ffffff\",\"neutral-container-static-lowest-hover\":\"#F6F6F7\",\"neutral-container-variation-lowest\":\"#ffffff\",\"neutral-fill-lowest\":\"rgba(109,109,112,0)\",\"neutral-fill-lowest-hover\":\"rgba(109,109,112,0.06)\",\"neutral-fill-low\":\"rgba(109,109,112,0.08)\",\"neutral-fill-low-hover\":\"rgba(109,109,112,0.04)\",\"neutral-fill-mid\":\"rgba(109,109,112,0.08)\",\"neutral-fill-mid-hover\":\"rgba(109,109,112,0.16)\",\"neutral-fill-high\":\"rgba(109,109,112,0.2)\",\"neutral-fill-high-hover\":\"rgba(109,109,112,0.28)\",\"neutral-fill-highest\":\"rgba(109,109,112,0.72)\",\"neutral-label-primary\":\"#1E1E1F\",\"neutral-label-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-label-tertiary\":\"rgba(109,109,112,0.48)\",\"neutral-label-quaternary\":\"rgba(109,109,112,0.24)\",\"neutral-label-static-primary\":\"#1E1E1F\",\"neutral-label-static-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-border-overlay-strong\":\"rgba(109,109,112,0.64)\",\"neutral-border-overlay-normal\":\"rgba(109,109,112,0.24)\",\"neutral-border-overlay-subtle\":\"rgba(109,109,112,0.16)\",\"neutral-border-opaque-strong\":\"#1E1E1F\",\"neutral-border-opaque-normal\":\"#D7D7D9\",\"neutral-border-opaque-subtle\":\"#E9E9EB\",\"inverse-container-lowest\":\"#1E1E1F\",\"inverse-container-lowest-hover\":\"#313133\",\"inverse-container-low\":\"#313133\",\"inverse-container-low-hover\":\"#3B3B3D\",\"inverse-container-mid\":\"#313133\",\"inverse-container-mid-hover\":\"#4A4A4D\",\"inverse-container-high\":\"#3B3B3D\",\"inverse-container-high-hover\":\"#4A4A4D\",\"inverse-container-static-high\":\"#3B3B3D\",\"inverse-container-static-high-hover\":\"#58595C\",\"inverse-container-highest\":\"#4A4A4D\",\"inverse-fill-mid\":\"#ffffff\",\"inverse-fill-mid-hover\":\"#F6F6F7\",\"inverse-label-primary\":\"#ffffff\",\"inverse-label-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-label-tertiary\":\"rgba(233,233,235,0.32)\",\"inverse-label-quaternary\":\"rgba(233,233,235,0.2)\",\"inverse-label-static-primary\":\"#ffffff\",\"inverse-label-static-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-strong\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-normal\":\"rgba(233,233,235,0.28)\",\"inverse-border-overlay-subtle\":\"rgba(233,233,235,0.2)\",\"inverse-border-opaque-strong\":\"#ffffff\",\"inverse-border-opaque-normal\":\"#58595C\",\"inverse-border-opaque-subtle\":\"#3B3B3D\",\"brand-container-mid\":\"#4058FF\",\"brand-container-mid-hover\":\"#273FD9\",\"brand-container-high\":\"#273FD9\",\"brand-label-primary\":\"#4058FF\",\"brand-label-secondary\":\"rgba(4,17,102,0.8)\",\"brand-border-opaque-normal\":\"#4058FF\",\"brand-border-overlay-normal\":\"rgba(4,17,102,0.2)\",\"brandinverse-label-primary\":\"#5487FF\",\"accent-yellow\":\"#FFCC00\",\"accent-mint\":\"#02B0B0\",\"accent-cyan\":\"#40B3FF\",\"accent-purple\":\"#B450E6\",\"accent-pink\":\"#FF3377\",\"function-container-positive\":\"#30BF48\",\"function-container-negative\":\"#FF3333\",\"function-container-negative-hover\":\"#DB2323\",\"function-container-caution\":\"#FF9900\",\"function-container-highlight\":\"#FFF9E3\",\"function-container-selection\":\"#FAFBFF\",\"function-container-drag\":\"#D9DEFF\",\"function-label-positive\":\"#30BF48\",\"function-label-negative\":\"#FF3333\",\"function-label-caution\":\"#FF9900\",\"cover-dim-page\":\"rgba(0,0,0,0.56)\"},\"dark\":{\"neutral-container-lowest\":\"#1E1E1F\",\"neutral-container-lowest-hover\":\"#313133\",\"neutral-container-low\":\"#313133\",\"neutral-container-low-hover\":\"#3B3B3D\",\"neutral-container-mid\":\"#3B3B3D\",\"neutral-container-mid-hover\":\"#4A4A4D\",\"neutral-container-high\":\"#3B3B3D\",\"neutral-container-high-hover\":\"#4A4A4D\",\"neutral-container-highest\":\"#4A4A4D\",\"neutral-container-static-lowest\":\"#ffffff\",\"neutral-container-static-lowest-hover\":\"#E3E3E6\",\"neutral-container-variation-lowest\":\"#313133\",\"neutral-fill-lowest\":\"rgba(109,109,112,0)\",\"neutral-fill-lowest-hover\":\"rgba(109,109,112,0.12)\",\"neutral-fill-low\":\"rgba(109,109,112,0.2)\",\"neutral-fill-low-hover\":\"rgba(109,109,112,0.08)\",\"neutral-fill-mid\":\"rgba(109,109,112,0.16)\",\"neutral-fill-mid-hover\":\"rgba(109,109,112,0.32)\",\"neutral-fill-high\":\"rgba(109,109,112,0.32)\",\"neutral-fill-high-hover\":\"rgba(109,109,112,0.44)\",\"neutral-fill-highest\":\"rgba(109,109,112,0.72)\",\"neutral-label-primary\":\"#ffffff\",\"neutral-label-secondary\":\"rgba(233,233,235,0.64)\",\"neutral-label-tertiary\":\"rgba(233,233,235,0.32)\",\"neutral-label-quaternary\":\"rgba(233,233,235,0.2)\",\"neutral-label-static-primary\":\"#1E1E1F\",\"neutral-label-static-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-border-overlay-strong\":\"rgba(233,233,235,0.64)\",\"neutral-border-overlay-normal\":\"rgba(233,233,235,0.28)\",\"neutral-border-overlay-subtle\":\"rgba(233,233,235,0.2)\",\"neutral-border-opaque-strong\":\"#ffffff\",\"neutral-border-opaque-normal\":\"#58595C\",\"neutral-border-opaque-subtle\":\"#3B3B3D\",\"inverse-container-lowest\":\"#ffffff\",\"inverse-container-lowest-hover\":\"#F6F6F7\",\"inverse-container-low\":\"#F9F9FA\",\"inverse-container-low-hover\":\"#F6F6F7\",\"inverse-container-mid\":\"#F6F6F7\",\"inverse-container-mid-hover\":\"#EDEEF0\",\"inverse-container-high\":\"#EDEEF0\",\"inverse-container-high-hover\":\"#E3E3E6\",\"inverse-container-static-high\":\"#3B3B3D\",\"inverse-container-static-high-hover\":\"#58595C\",\"inverse-container-highest\":\"#E9E9EB\",\"inverse-fill-mid\":\"rgba(233,233,235,0.24)\",\"inverse-fill-mid-hover\":\"rgba(233,233,235,0)\",\"inverse-label-primary\":\"#1E1E1F\",\"inverse-label-secondary\":\"rgba(109,109,112,0.8)\",\"inverse-label-tertiary\":\"rgba(109,109,112,0.48)\",\"inverse-label-quaternary\":\"rgba(109,109,112,0.24)\",\"inverse-label-static-primary\":\"#ffffff\",\"inverse-label-static-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-strong\":\"rgba(109,109,112,0.64)\",\"inverse-border-overlay-normal\":\"rgba(109,109,112,0.24)\",\"inverse-border-overlay-subtle\":\"rgba(109,109,112,0.16)\",\"inverse-border-opaque-strong\":\"#1E1E1F\",\"inverse-border-opaque-normal\":\"#D7D7D9\",\"inverse-border-opaque-subtle\":\"#E9E9EB\",\"brand-container-mid\":\"#4058FF\",\"brand-container-mid-hover\":\"#6B7FFF\",\"brand-container-high\":\"#273FD9\",\"brand-label-primary\":\"#5487FF\",\"brand-label-secondary\":\"rgba(4,17,102,0.8)\",\"brand-border-opaque-normal\":\"#4058FF\",\"brand-border-overlay-normal\":\"rgba(4,17,102,0.2)\",\"brandinverse-label-primary\":\"#4058FF\",\"accent-yellow\":\"#FFD739\",\"accent-mint\":\"#00CCCC\",\"accent-cyan\":\"#6AC4FF\",\"accent-purple\":\"#C978F2\",\"accent-pink\":\"#FF6095\",\"function-container-positive\":\"#5DDF73\",\"function-container-negative\":\"#FF3333\",\"function-container-negative-hover\":\"#FF6060\",\"function-container-caution\":\"#FF9900\",\"function-container-highlight\":\"#413503\",\"function-container-selection\":\"#384666\",\"function-container-drag\":\"#384666\",\"function-label-positive\":\"#5DDF73\",\"function-label-negative\":\"#FF3333\",\"function-label-caution\":\"#FF9900\",\"cover-dim-page\":\"rgba(0,0,0,0.56)\"}},\"radius\":{\"xxs\":\"2px\",\"xs\":\"4px\",\"s\":\"6px\",\"m\":\"8px\",\"l\":\"10px\",\"xl\":\"12px\",\"xxl\":\"200px\"},\"opacity\":{\"0\":\"0%\",\"1\":\"1%\",\"4\":\"4%\",\"8\":\"8%\",\"12\":\"12%\",\"16\":\"16%\",\"20\":\"20%\",\"24\":\"24%\",\"28\":\"28%\",\"32\":\"32%\",\"36\":\"36%\",\"40\":\"40%\",\"44\":\"44%\",\"48\":\"48%\",\"50\":\"50%\",\"56\":\"56%\",\"64\":\"64%\",\"72\":\"72%\",\"80\":\"80%\"},\"padding\":{\"component-50\":\"2px\",\"component-100\":\"4px\",\"component-150\":\"6px\",\"component-200\":\"8px\",\"component-300\":\"12px\",\"component-400\":\"16px\",\"component-500\":\"20px\",\"component-600\":\"24px\",\"component-700\":\"32px\",\"component-800\":\"40px\",\"component-900\":\"48px\",\"section-50\":\"20px\",\"section-100\":\"24px\",\"section-200\":\"32px\",\"section-300\":\"40px\",\"section-400\":\"48px\",\"section-500\":\"56px\",\"section-600\":\"64px\",\"section-700\":\"80px\",\"section-800\":\"100px\",\"section-900\":\"120px\"},\"size\":{\"0\":\"0px\",\"1\":\"1px\",\"2\":\"2px\",\"3\":\"3px\",\"4\":\"4px\",\"6\":\"6px\",\"8\":\"8px\",\"10\":\"10px\",\"12\":\"12px\",\"14\":\"14px\",\"16\":\"16px\",\"18\":\"18px\",\"20\":\"20px\",\"24\":\"24px\",\"32\":\"32px\",\"40\":\"40px\",\"48\":\"48px\",\"56\":\"56px\",\"64\":\"64px\",\"80\":\"80px\",\"100\":\"100px\",\"120\":\"120px\",\"140\":\"140px\",\"160\":\"160px\",\"180\":\"180px\",\"200\":\"200px\",\"minus6\":\"-6px\",\"minus4\":\"-4px\",\"minus2\":\"-2px\"},\"gap\":{\"positive-50\":\"2px\",\"positive-100\":\"4px\",\"positive-150\":\"6px\",\"positive-200\":\"8px\",\"positive-300\":\"12px\",\"positive-400\":\"16px\",\"positive-500\":\"20px\",\"positive-600\":\"24px\",\"positive-700\":\"32px\",\"positive-800\":\"40px\",\"positive-900\":\"48px\"},\"shadow\":{\"normal\":[\"0px 2px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)\",\"0px 2px 12px 0px rgba(0, 0, 0, 0.24), 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2)\"],\"strong\":[\"0px 6px 16px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)\",\"0px 6px 16px 0px rgba(0, 0, 0, 0.36), 0px 4px 12px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)\"],\"heavy\":[\"0px 16px 20px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)\",\"0px 16px 20px 0px rgba(0, 0, 0, 0.36), 0px 8px 16px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)\"]},\"iconSize\":{\"xs\":\"16px\",\"s\":\"20px\",\"m\":\"24px\",\"l\":\"32px\",\"xl\":\"40px\"}}", "import { useRecoilValue, useSetRecoilState } from 'recoil';\nimport { vars } from '../generated/vars';\nimport { Appearance } from 'react-native';\nimport { themeAtoms } from '../store/theme';\n\nexport type Theme = 'dark' | 'light' | 'sys';\n\nexport const useSetTheme = () => {\n  const setThemeRecoilState = useSetRecoilState(themeAtoms);\n\n  const setTheme = (theme: Theme) => {\n    setThemeRecoilState(theme);\n  };\n\n  return { setTheme };\n};\n\nexport type ColorType = typeof vars.color.light;\n\nexport const useColor = <T>(\n  StyleSheetFunction: (color: ColorType) => T,\n): { styles: T; color: ColorType } => {\n  const theme = useRecoilValue(themeAtoms);\n\n  const colorToken = (() => {\n    if (theme === 'sys') {\n      const colorScheme = Appearance.getColorScheme();\n\n      if (colorScheme) {\n        return vars.color[colorScheme];\n      }\n\n      // colorScheme\uC774 \uC5C6\uB294 \uACBD\uC6B0 light \uD14C\uB9C8\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.\n      return vars.color.light;\n    } else {\n      return vars.color[theme];\n    }\n  })();\n\n  return { styles: StyleSheetFunction(colorToken), color: colorToken };\n};\n\nexport const MMKV_KEY = 'MMKV_KEY_THEME';\n", "import { atom } from 'recoil';\nimport { Theme } from '../color';\n\nexport const themeAtoms = atom<Theme>({\n  key: 'themeAtoms',\n  default: 'sys',\n});\n", "import { useRecoilValue } from 'recoil';\nimport { themeAtoms } from '../store/theme';\nimport { Appearance } from 'react-native';\n\nexport const useDarkTheme = () => {\n  const theme = useRecoilValue(themeAtoms);\n\n  return {\n    isDarkTheme: theme === 'dark' || (theme === 'sys' && Appearance.getColorScheme() === 'dark'),\n  };\n};\n"],
+  "mappings": "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",
+  "names": ["import_recoil", "import_recoil", "import_react_native"]
 }

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from './generated/vars';
 export * from './color';
+export * from './hooks/useDarkTheme';

package/lib/index.mjs

@@ -5,15 +5,32 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 var vars = { "color": { "light": { "neutral-container-lowest": "#ffffff", "neutral-container-lowest-hover": "#F6F6F7", "neutral-container-low": "#F9F9FA", "neutral-container-low-hover": "#F6F6F7", "neutral-container-mid": "#F6F6F7", "neutral-container-mid-hover": "#EDEEF0", "neutral-container-high": "#EDEEF0", "neutral-container-high-hover": "#E3E3E6", "neutral-container-highest": "#E9E9EB", "neutral-container-static-lowest": "#ffffff", "neutral-container-static-lowest-hover": "#F6F6F7", "neutral-container-variation-lowest": "#ffffff", "neutral-fill-lowest": "rgba(109,109,112,0)", "neutral-fill-lowest-hover": "rgba(109,109,112,0.06)", "neutral-fill-low": "rgba(109,109,112,0.08)", "neutral-fill-low-hover": "rgba(109,109,112,0.04)", "neutral-fill-mid": "rgba(109,109,112,0.08)", "neutral-fill-mid-hover": "rgba(109,109,112,0.16)", "neutral-fill-high": "rgba(109,109,112,0.2)", "neutral-fill-high-hover": "rgba(109,109,112,0.28)", "neutral-fill-highest": "rgba(109,109,112,0.72)", "neutral-label-primary": "#1E1E1F", "neutral-label-secondary": "rgba(109,109,112,0.8)", "neutral-label-tertiary": "rgba(109,109,112,0.48)", "neutral-label-quaternary": "rgba(109,109,112,0.24)", "neutral-label-static-primary": "#1E1E1F", "neutral-label-static-secondary": "rgba(109,109,112,0.8)", "neutral-border-overlay-strong": "rgba(109,109,112,0.64)", "neutral-border-overlay-normal": "rgba(109,109,112,0.24)", "neutral-border-overlay-subtle": "rgba(109,109,112,0.16)", "neutral-border-opaque-strong": "#1E1E1F", "neutral-border-opaque-normal": "#D7D7D9", "neutral-border-opaque-subtle": "#E9E9EB", "inverse-container-lowest": "#1E1E1F", "inverse-container-lowest-hover": "#313133", "inverse-container-low": "#313133", "inverse-container-low-hover": "#3B3B3D", "inverse-container-mid": "#313133", "inverse-container-mid-hover": "#4A4A4D", "inverse-container-high": "#3B3B3D", "inverse-container-high-hover": "#4A4A4D", "inverse-container-static-high": "#3B3B3D", "inverse-container-static-high-hover": "#58595C", "inverse-container-highest": "#4A4A4D", "inverse-fill-mid": "#ffffff", "inverse-fill-mid-hover": "#F6F6F7", "inverse-label-primary": "#ffffff", "inverse-label-secondary": "rgba(233,233,235,0.64)", "inverse-label-tertiary": "rgba(233,233,235,0.32)", "inverse-label-quaternary": "rgba(233,233,235,0.2)", "inverse-label-static-primary": "#ffffff", "inverse-label-static-secondary": "rgba(233,233,235,0.64)", "inverse-border-overlay-strong": "rgba(233,233,235,0.64)", "inverse-border-overlay-normal": "rgba(233,233,235,0.28)", "inverse-border-overlay-subtle": "rgba(233,233,235,0.2)", "inverse-border-opaque-strong": "#ffffff", "inverse-border-opaque-normal": "#58595C", "inverse-border-opaque-subtle": "#3B3B3D", "brand-container-mid": "#4058FF", "brand-container-mid-hover": "#273FD9", "brand-container-high": "#273FD9", "brand-label-primary": "#4058FF", "brand-label-secondary": "rgba(4,17,102,0.8)", "brand-border-opaque-normal": "#4058FF", "brand-border-overlay-normal": "rgba(4,17,102,0.2)", "brandinverse-label-primary": "#5487FF", "accent-yellow": "#FFCC00", "accent-mint": "#02B0B0", "accent-cyan": "#40B3FF", "accent-purple": "#B450E6", "accent-pink": "#FF3377", "function-container-positive": "#30BF48", "function-container-negative": "#FF3333", "function-container-negative-hover": "#DB2323", "function-container-caution": "#FF9900", "function-container-highlight": "#FFF9E3", "function-container-selection": "#FAFBFF", "function-container-drag": "#D9DEFF", "function-label-positive": "#30BF48", "function-label-negative": "#FF3333", "function-label-caution": "#FF9900", "cover-dim-page": "rgba(0,0,0,0.56)" }, "dark": { "neutral-container-lowest": "#1E1E1F", "neutral-container-lowest-hover": "#313133", "neutral-container-low": "#313133", "neutral-container-low-hover": "#3B3B3D", "neutral-container-mid": "#3B3B3D", "neutral-container-mid-hover": "#4A4A4D", "neutral-container-high": "#3B3B3D", "neutral-container-high-hover": "#4A4A4D", "neutral-container-highest": "#4A4A4D", "neutral-container-static-lowest": "#ffffff", "neutral-container-static-lowest-hover": "#E3E3E6", "neutral-container-variation-lowest": "#313133", "neutral-fill-lowest": "rgba(109,109,112,0)", "neutral-fill-lowest-hover": "rgba(109,109,112,0.12)", "neutral-fill-low": "rgba(109,109,112,0.2)", "neutral-fill-low-hover": "rgba(109,109,112,0.08)", "neutral-fill-mid": "rgba(109,109,112,0.16)", "neutral-fill-mid-hover": "rgba(109,109,112,0.32)", "neutral-fill-high": "rgba(109,109,112,0.32)", "neutral-fill-high-hover": "rgba(109,109,112,0.44)", "neutral-fill-highest": "rgba(109,109,112,0.72)", "neutral-label-primary": "#ffffff", "neutral-label-secondary": "rgba(233,233,235,0.64)", "neutral-label-tertiary": "rgba(233,233,235,0.32)", "neutral-label-quaternary": "rgba(233,233,235,0.2)", "neutral-label-static-primary": "#1E1E1F", "neutral-label-static-secondary": "rgba(109,109,112,0.8)", "neutral-border-overlay-strong": "rgba(233,233,235,0.64)", "neutral-border-overlay-normal": "rgba(233,233,235,0.28)", "neutral-border-overlay-subtle": "rgba(233,233,235,0.2)", "neutral-border-opaque-strong": "#ffffff", "neutral-border-opaque-normal": "#58595C", "neutral-border-opaque-subtle": "#3B3B3D", "inverse-container-lowest": "#ffffff", "inverse-container-lowest-hover": "#F6F6F7", "inverse-container-low": "#F9F9FA", "inverse-container-low-hover": "#F6F6F7", "inverse-container-mid": "#F6F6F7", "inverse-container-mid-hover": "#EDEEF0", "inverse-container-high": "#EDEEF0", "inverse-container-high-hover": "#E3E3E6", "inverse-container-static-high": "#3B3B3D", "inverse-container-static-high-hover": "#58595C", "inverse-container-highest": "#E9E9EB", "inverse-fill-mid": "rgba(233,233,235,0.24)", "inverse-fill-mid-hover": "rgba(233,233,235,0)", "inverse-label-primary": "#1E1E1F", "inverse-label-secondary": "rgba(109,109,112,0.8)", "inverse-label-tertiary": "rgba(109,109,112,0.48)", "inverse-label-quaternary": "rgba(109,109,112,0.24)", "inverse-label-static-primary": "#ffffff", "inverse-label-static-secondary": "rgba(233,233,235,0.64)", "inverse-border-overlay-strong": "rgba(109,109,112,0.64)", "inverse-border-overlay-normal": "rgba(109,109,112,0.24)", "inverse-border-overlay-subtle": "rgba(109,109,112,0.16)", "inverse-border-opaque-strong": "#1E1E1F", "inverse-border-opaque-normal": "#D7D7D9", "inverse-border-opaque-subtle": "#E9E9EB", "brand-container-mid": "#4058FF", "brand-container-mid-hover": "#6B7FFF", "brand-container-high": "#273FD9", "brand-label-primary": "#5487FF", "brand-label-secondary": "rgba(4,17,102,0.8)", "brand-border-opaque-normal": "#4058FF", "brand-border-overlay-normal": "rgba(4,17,102,0.2)", "brandinverse-label-primary": "#4058FF", "accent-yellow": "#FFD739", "accent-mint": "#00CCCC", "accent-cyan": "#6AC4FF", "accent-purple": "#C978F2", "accent-pink": "#FF6095", "function-container-positive": "#5DDF73", "function-container-negative": "#FF3333", "function-container-negative-hover": "#FF6060", "function-container-caution": "#FF9900", "function-container-highlight": "#413503", "function-container-selection": "#384666", "function-container-drag": "#384666", "function-label-positive": "#5DDF73", "function-label-negative": "#FF3333", "function-label-caution": "#FF9900", "cover-dim-page": "rgba(0,0,0,0.56)" } }, "radius": { "xxs": "2px", "xs": "4px", "s": "6px", "m": "8px", "l": "10px", "xl": "12px", "xxl": "200px" }, "opacity": { "0": "0%", "1": "1%", "4": "4%", "8": "8%", "12": "12%", "16": "16%", "20": "20%", "24": "24%", "28": "28%", "32": "32%", "36": "36%", "40": "40%", "44": "44%", "48": "48%", "50": "50%", "56": "56%", "64": "64%", "72": "72%", "80": "80%" }, "padding": { "component-50": "2px", "component-100": "4px", "component-150": "6px", "component-200": "8px", "component-300": "12px", "component-400": "16px", "component-500": "20px", "component-600": "24px", "component-700": "32px", "component-800": "40px", "component-900": "48px", "section-50": "20px", "section-100": "24px", "section-200": "32px", "section-300": "40px", "section-400": "48px", "section-500": "56px", "section-600": "64px", "section-700": "80px", "section-800": "100px", "section-900": "120px" }, "size": { "0": "0px", "1": "1px", "2": "2px", "3": "3px", "4": "4px", "6": "6px", "8": "8px", "10": "10px", "12": "12px", "14": "14px", "16": "16px", "18": "18px", "20": "20px", "24": "24px", "32": "32px", "40": "40px", "48": "48px", "56": "56px", "64": "64px", "80": "80px", "100": "100px", "120": "120px", "140": "140px", "160": "160px", "180": "180px", "200": "200px", "minus6": "-6px", "minus4": "-4px", "minus2": "-2px" }, "gap": { "positive-50": "2px", "positive-100": "4px", "positive-150": "6px", "positive-200": "8px", "positive-300": "12px", "positive-400": "16px", "positive-500": "20px", "positive-600": "24px", "positive-700": "32px", "positive-800": "40px", "positive-900": "48px" }, "shadow": { "normal": ["0px 2px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)", "0px 2px 12px 0px rgba(0, 0, 0, 0.24), 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2)"], "strong": ["0px 6px 16px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)", "0px 6px 16px 0px rgba(0, 0, 0, 0.36), 0px 4px 12px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)"], "heavy": ["0px 16px 20px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)", "0px 16px 20px 0px rgba(0, 0, 0, 0.36), 0px 8px 16px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)"] }, "iconSize": { "xs": "16px", "s": "20px", "m": "24px", "l": "32px", "xl": "40px" } };
 
 // src/color/index.ts
-import { atom, useRecoilValue } from "recoil";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { Appearance } from "react-native";
+
+// src/store/theme.ts
+import { atom } from "recoil";
 var themeAtoms = atom({
   key: "themeAtoms",
   default: "sys"
 });
+
+// src/color/index.ts
+var useSetTheme = /* @__PURE__ */ __name(() => {
+  const setThemeRecoilState = useSetRecoilState(themeAtoms);
+  const setTheme = /* @__PURE__ */ __name((theme) => {
+    setThemeRecoilState(theme);
+  }, "setTheme");
+  return { setTheme };
+}, "useSetTheme");
 var useColor = /* @__PURE__ */ __name((StyleSheetFunction) => {
   const theme = useRecoilValue(themeAtoms);
   const colorToken = (() => {
     if (theme === "sys") {
+      const colorScheme = Appearance.getColorScheme();
+      if (colorScheme) {
+        return vars.color[colorScheme];
+      }
       return vars.color.light;
     } else {
       return vars.color[theme];
@@ -21,9 +38,22 @@ var useColor = /* @__PURE__ */ __name((StyleSheetFunction) => {
   })();
   return { styles: StyleSheetFunction(colorToken), color: colorToken };
 }, "useColor");
+var MMKV_KEY = "MMKV_KEY_THEME";
+
+// src/hooks/useDarkTheme.ts
+import { useRecoilValue as useRecoilValue2 } from "recoil";
+import { Appearance as Appearance2 } from "react-native";
+var useDarkTheme = /* @__PURE__ */ __name(() => {
+  const theme = useRecoilValue2(themeAtoms);
+  return {
+    isDarkTheme: theme === "dark" || theme === "sys" && Appearance2.getColorScheme() === "dark"
+  };
+}, "useDarkTheme");
 export {
-  themeAtoms,
+  MMKV_KEY,
   useColor,
+  useDarkTheme,
+  useSetTheme,
   vars
 };
 //# sourceMappingURL=index.mjs.map

package/lib/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/generated/vars.ts", "../src/color/index.ts"],
-  "sourcesContent": ["export const vars = {\"color\":{\"light\":{\"neutral-container-lowest\":\"#ffffff\",\"neutral-container-lowest-hover\":\"#F6F6F7\",\"neutral-container-low\":\"#F9F9FA\",\"neutral-container-low-hover\":\"#F6F6F7\",\"neutral-container-mid\":\"#F6F6F7\",\"neutral-container-mid-hover\":\"#EDEEF0\",\"neutral-container-high\":\"#EDEEF0\",\"neutral-container-high-hover\":\"#E3E3E6\",\"neutral-container-highest\":\"#E9E9EB\",\"neutral-container-static-lowest\":\"#ffffff\",\"neutral-container-static-lowest-hover\":\"#F6F6F7\",\"neutral-container-variation-lowest\":\"#ffffff\",\"neutral-fill-lowest\":\"rgba(109,109,112,0)\",\"neutral-fill-lowest-hover\":\"rgba(109,109,112,0.06)\",\"neutral-fill-low\":\"rgba(109,109,112,0.08)\",\"neutral-fill-low-hover\":\"rgba(109,109,112,0.04)\",\"neutral-fill-mid\":\"rgba(109,109,112,0.08)\",\"neutral-fill-mid-hover\":\"rgba(109,109,112,0.16)\",\"neutral-fill-high\":\"rgba(109,109,112,0.2)\",\"neutral-fill-high-hover\":\"rgba(109,109,112,0.28)\",\"neutral-fill-highest\":\"rgba(109,109,112,0.72)\",\"neutral-label-primary\":\"#1E1E1F\",\"neutral-label-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-label-tertiary\":\"rgba(109,109,112,0.48)\",\"neutral-label-quaternary\":\"rgba(109,109,112,0.24)\",\"neutral-label-static-primary\":\"#1E1E1F\",\"neutral-label-static-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-border-overlay-strong\":\"rgba(109,109,112,0.64)\",\"neutral-border-overlay-normal\":\"rgba(109,109,112,0.24)\",\"neutral-border-overlay-subtle\":\"rgba(109,109,112,0.16)\",\"neutral-border-opaque-strong\":\"#1E1E1F\",\"neutral-border-opaque-normal\":\"#D7D7D9\",\"neutral-border-opaque-subtle\":\"#E9E9EB\",\"inverse-container-lowest\":\"#1E1E1F\",\"inverse-container-lowest-hover\":\"#313133\",\"inverse-container-low\":\"#313133\",\"inverse-container-low-hover\":\"#3B3B3D\",\"inverse-container-mid\":\"#313133\",\"inverse-container-mid-hover\":\"#4A4A4D\",\"inverse-container-high\":\"#3B3B3D\",\"inverse-container-high-hover\":\"#4A4A4D\",\"inverse-container-static-high\":\"#3B3B3D\",\"inverse-container-static-high-hover\":\"#58595C\",\"inverse-container-highest\":\"#4A4A4D\",\"inverse-fill-mid\":\"#ffffff\",\"inverse-fill-mid-hover\":\"#F6F6F7\",\"inverse-label-primary\":\"#ffffff\",\"inverse-label-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-label-tertiary\":\"rgba(233,233,235,0.32)\",\"inverse-label-quaternary\":\"rgba(233,233,235,0.2)\",\"inverse-label-static-primary\":\"#ffffff\",\"inverse-label-static-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-strong\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-normal\":\"rgba(233,233,235,0.28)\",\"inverse-border-overlay-subtle\":\"rgba(233,233,235,0.2)\",\"inverse-border-opaque-strong\":\"#ffffff\",\"inverse-border-opaque-normal\":\"#58595C\",\"inverse-border-opaque-subtle\":\"#3B3B3D\",\"brand-container-mid\":\"#4058FF\",\"brand-container-mid-hover\":\"#273FD9\",\"brand-container-high\":\"#273FD9\",\"brand-label-primary\":\"#4058FF\",\"brand-label-secondary\":\"rgba(4,17,102,0.8)\",\"brand-border-opaque-normal\":\"#4058FF\",\"brand-border-overlay-normal\":\"rgba(4,17,102,0.2)\",\"brandinverse-label-primary\":\"#5487FF\",\"accent-yellow\":\"#FFCC00\",\"accent-mint\":\"#02B0B0\",\"accent-cyan\":\"#40B3FF\",\"accent-purple\":\"#B450E6\",\"accent-pink\":\"#FF3377\",\"function-container-positive\":\"#30BF48\",\"function-container-negative\":\"#FF3333\",\"function-container-negative-hover\":\"#DB2323\",\"function-container-caution\":\"#FF9900\",\"function-container-highlight\":\"#FFF9E3\",\"function-container-selection\":\"#FAFBFF\",\"function-container-drag\":\"#D9DEFF\",\"function-label-positive\":\"#30BF48\",\"function-label-negative\":\"#FF3333\",\"function-label-caution\":\"#FF9900\",\"cover-dim-page\":\"rgba(0,0,0,0.56)\"},\"dark\":{\"neutral-container-lowest\":\"#1E1E1F\",\"neutral-container-lowest-hover\":\"#313133\",\"neutral-container-low\":\"#313133\",\"neutral-container-low-hover\":\"#3B3B3D\",\"neutral-container-mid\":\"#3B3B3D\",\"neutral-container-mid-hover\":\"#4A4A4D\",\"neutral-container-high\":\"#3B3B3D\",\"neutral-container-high-hover\":\"#4A4A4D\",\"neutral-container-highest\":\"#4A4A4D\",\"neutral-container-static-lowest\":\"#ffffff\",\"neutral-container-static-lowest-hover\":\"#E3E3E6\",\"neutral-container-variation-lowest\":\"#313133\",\"neutral-fill-lowest\":\"rgba(109,109,112,0)\",\"neutral-fill-lowest-hover\":\"rgba(109,109,112,0.12)\",\"neutral-fill-low\":\"rgba(109,109,112,0.2)\",\"neutral-fill-low-hover\":\"rgba(109,109,112,0.08)\",\"neutral-fill-mid\":\"rgba(109,109,112,0.16)\",\"neutral-fill-mid-hover\":\"rgba(109,109,112,0.32)\",\"neutral-fill-high\":\"rgba(109,109,112,0.32)\",\"neutral-fill-high-hover\":\"rgba(109,109,112,0.44)\",\"neutral-fill-highest\":\"rgba(109,109,112,0.72)\",\"neutral-label-primary\":\"#ffffff\",\"neutral-label-secondary\":\"rgba(233,233,235,0.64)\",\"neutral-label-tertiary\":\"rgba(233,233,235,0.32)\",\"neutral-label-quaternary\":\"rgba(233,233,235,0.2)\",\"neutral-label-static-primary\":\"#1E1E1F\",\"neutral-label-static-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-border-overlay-strong\":\"rgba(233,233,235,0.64)\",\"neutral-border-overlay-normal\":\"rgba(233,233,235,0.28)\",\"neutral-border-overlay-subtle\":\"rgba(233,233,235,0.2)\",\"neutral-border-opaque-strong\":\"#ffffff\",\"neutral-border-opaque-normal\":\"#58595C\",\"neutral-border-opaque-subtle\":\"#3B3B3D\",\"inverse-container-lowest\":\"#ffffff\",\"inverse-container-lowest-hover\":\"#F6F6F7\",\"inverse-container-low\":\"#F9F9FA\",\"inverse-container-low-hover\":\"#F6F6F7\",\"inverse-container-mid\":\"#F6F6F7\",\"inverse-container-mid-hover\":\"#EDEEF0\",\"inverse-container-high\":\"#EDEEF0\",\"inverse-container-high-hover\":\"#E3E3E6\",\"inverse-container-static-high\":\"#3B3B3D\",\"inverse-container-static-high-hover\":\"#58595C\",\"inverse-container-highest\":\"#E9E9EB\",\"inverse-fill-mid\":\"rgba(233,233,235,0.24)\",\"inverse-fill-mid-hover\":\"rgba(233,233,235,0)\",\"inverse-label-primary\":\"#1E1E1F\",\"inverse-label-secondary\":\"rgba(109,109,112,0.8)\",\"inverse-label-tertiary\":\"rgba(109,109,112,0.48)\",\"inverse-label-quaternary\":\"rgba(109,109,112,0.24)\",\"inverse-label-static-primary\":\"#ffffff\",\"inverse-label-static-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-strong\":\"rgba(109,109,112,0.64)\",\"inverse-border-overlay-normal\":\"rgba(109,109,112,0.24)\",\"inverse-border-overlay-subtle\":\"rgba(109,109,112,0.16)\",\"inverse-border-opaque-strong\":\"#1E1E1F\",\"inverse-border-opaque-normal\":\"#D7D7D9\",\"inverse-border-opaque-subtle\":\"#E9E9EB\",\"brand-container-mid\":\"#4058FF\",\"brand-container-mid-hover\":\"#6B7FFF\",\"brand-container-high\":\"#273FD9\",\"brand-label-primary\":\"#5487FF\",\"brand-label-secondary\":\"rgba(4,17,102,0.8)\",\"brand-border-opaque-normal\":\"#4058FF\",\"brand-border-overlay-normal\":\"rgba(4,17,102,0.2)\",\"brandinverse-label-primary\":\"#4058FF\",\"accent-yellow\":\"#FFD739\",\"accent-mint\":\"#00CCCC\",\"accent-cyan\":\"#6AC4FF\",\"accent-purple\":\"#C978F2\",\"accent-pink\":\"#FF6095\",\"function-container-positive\":\"#5DDF73\",\"function-container-negative\":\"#FF3333\",\"function-container-negative-hover\":\"#FF6060\",\"function-container-caution\":\"#FF9900\",\"function-container-highlight\":\"#413503\",\"function-container-selection\":\"#384666\",\"function-container-drag\":\"#384666\",\"function-label-positive\":\"#5DDF73\",\"function-label-negative\":\"#FF3333\",\"function-label-caution\":\"#FF9900\",\"cover-dim-page\":\"rgba(0,0,0,0.56)\"}},\"radius\":{\"xxs\":\"2px\",\"xs\":\"4px\",\"s\":\"6px\",\"m\":\"8px\",\"l\":\"10px\",\"xl\":\"12px\",\"xxl\":\"200px\"},\"opacity\":{\"0\":\"0%\",\"1\":\"1%\",\"4\":\"4%\",\"8\":\"8%\",\"12\":\"12%\",\"16\":\"16%\",\"20\":\"20%\",\"24\":\"24%\",\"28\":\"28%\",\"32\":\"32%\",\"36\":\"36%\",\"40\":\"40%\",\"44\":\"44%\",\"48\":\"48%\",\"50\":\"50%\",\"56\":\"56%\",\"64\":\"64%\",\"72\":\"72%\",\"80\":\"80%\"},\"padding\":{\"component-50\":\"2px\",\"component-100\":\"4px\",\"component-150\":\"6px\",\"component-200\":\"8px\",\"component-300\":\"12px\",\"component-400\":\"16px\",\"component-500\":\"20px\",\"component-600\":\"24px\",\"component-700\":\"32px\",\"component-800\":\"40px\",\"component-900\":\"48px\",\"section-50\":\"20px\",\"section-100\":\"24px\",\"section-200\":\"32px\",\"section-300\":\"40px\",\"section-400\":\"48px\",\"section-500\":\"56px\",\"section-600\":\"64px\",\"section-700\":\"80px\",\"section-800\":\"100px\",\"section-900\":\"120px\"},\"size\":{\"0\":\"0px\",\"1\":\"1px\",\"2\":\"2px\",\"3\":\"3px\",\"4\":\"4px\",\"6\":\"6px\",\"8\":\"8px\",\"10\":\"10px\",\"12\":\"12px\",\"14\":\"14px\",\"16\":\"16px\",\"18\":\"18px\",\"20\":\"20px\",\"24\":\"24px\",\"32\":\"32px\",\"40\":\"40px\",\"48\":\"48px\",\"56\":\"56px\",\"64\":\"64px\",\"80\":\"80px\",\"100\":\"100px\",\"120\":\"120px\",\"140\":\"140px\",\"160\":\"160px\",\"180\":\"180px\",\"200\":\"200px\",\"minus6\":\"-6px\",\"minus4\":\"-4px\",\"minus2\":\"-2px\"},\"gap\":{\"positive-50\":\"2px\",\"positive-100\":\"4px\",\"positive-150\":\"6px\",\"positive-200\":\"8px\",\"positive-300\":\"12px\",\"positive-400\":\"16px\",\"positive-500\":\"20px\",\"positive-600\":\"24px\",\"positive-700\":\"32px\",\"positive-800\":\"40px\",\"positive-900\":\"48px\"},\"shadow\":{\"normal\":[\"0px 2px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)\",\"0px 2px 12px 0px rgba(0, 0, 0, 0.24), 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2)\"],\"strong\":[\"0px 6px 16px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)\",\"0px 6px 16px 0px rgba(0, 0, 0, 0.36), 0px 4px 12px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)\"],\"heavy\":[\"0px 16px 20px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)\",\"0px 16px 20px 0px rgba(0, 0, 0, 0.36), 0px 8px 16px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)\"]},\"iconSize\":{\"xs\":\"16px\",\"s\":\"20px\",\"m\":\"24px\",\"l\":\"32px\",\"xl\":\"40px\"}}", "import { atom, useRecoilValue } from 'recoil';\nimport { vars } from '../generated/vars';\n// import { color, ColorType } from 'prism/color';\n\nexport const themeAtoms = atom<'sys' | 'dark' | 'light'>({\n  key: 'themeAtoms',\n  default: 'sys',\n});\n\nexport type ColorType = typeof vars.color.light;\n\nexport const useColor = <T>(\n  StyleSheetFunction: (color: ColorType) => T,\n): { styles: T; color: ColorType } => {\n  const theme = useRecoilValue(themeAtoms);\n\n  const colorToken = (() => {\n    if (theme === 'sys') {\n      // const colorScheme = Appearance.getColorScheme();\n\n      // if (colorScheme) {\n      //   return color[colorScheme];\n      // }\n\n      return vars.color.light;\n    } else {\n      return vars.color[theme];\n    }\n  })();\n\n  return { styles: StyleSheetFunction(colorToken), color: colorToken };\n};\n"],
-  "mappings": "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",
-  "names": []
+  "sources": ["../src/generated/vars.ts", "../src/color/index.ts", "../src/store/theme.ts", "../src/hooks/useDarkTheme.ts"],
+  "sourcesContent": ["export const vars = {\"color\":{\"light\":{\"neutral-container-lowest\":\"#ffffff\",\"neutral-container-lowest-hover\":\"#F6F6F7\",\"neutral-container-low\":\"#F9F9FA\",\"neutral-container-low-hover\":\"#F6F6F7\",\"neutral-container-mid\":\"#F6F6F7\",\"neutral-container-mid-hover\":\"#EDEEF0\",\"neutral-container-high\":\"#EDEEF0\",\"neutral-container-high-hover\":\"#E3E3E6\",\"neutral-container-highest\":\"#E9E9EB\",\"neutral-container-static-lowest\":\"#ffffff\",\"neutral-container-static-lowest-hover\":\"#F6F6F7\",\"neutral-container-variation-lowest\":\"#ffffff\",\"neutral-fill-lowest\":\"rgba(109,109,112,0)\",\"neutral-fill-lowest-hover\":\"rgba(109,109,112,0.06)\",\"neutral-fill-low\":\"rgba(109,109,112,0.08)\",\"neutral-fill-low-hover\":\"rgba(109,109,112,0.04)\",\"neutral-fill-mid\":\"rgba(109,109,112,0.08)\",\"neutral-fill-mid-hover\":\"rgba(109,109,112,0.16)\",\"neutral-fill-high\":\"rgba(109,109,112,0.2)\",\"neutral-fill-high-hover\":\"rgba(109,109,112,0.28)\",\"neutral-fill-highest\":\"rgba(109,109,112,0.72)\",\"neutral-label-primary\":\"#1E1E1F\",\"neutral-label-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-label-tertiary\":\"rgba(109,109,112,0.48)\",\"neutral-label-quaternary\":\"rgba(109,109,112,0.24)\",\"neutral-label-static-primary\":\"#1E1E1F\",\"neutral-label-static-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-border-overlay-strong\":\"rgba(109,109,112,0.64)\",\"neutral-border-overlay-normal\":\"rgba(109,109,112,0.24)\",\"neutral-border-overlay-subtle\":\"rgba(109,109,112,0.16)\",\"neutral-border-opaque-strong\":\"#1E1E1F\",\"neutral-border-opaque-normal\":\"#D7D7D9\",\"neutral-border-opaque-subtle\":\"#E9E9EB\",\"inverse-container-lowest\":\"#1E1E1F\",\"inverse-container-lowest-hover\":\"#313133\",\"inverse-container-low\":\"#313133\",\"inverse-container-low-hover\":\"#3B3B3D\",\"inverse-container-mid\":\"#313133\",\"inverse-container-mid-hover\":\"#4A4A4D\",\"inverse-container-high\":\"#3B3B3D\",\"inverse-container-high-hover\":\"#4A4A4D\",\"inverse-container-static-high\":\"#3B3B3D\",\"inverse-container-static-high-hover\":\"#58595C\",\"inverse-container-highest\":\"#4A4A4D\",\"inverse-fill-mid\":\"#ffffff\",\"inverse-fill-mid-hover\":\"#F6F6F7\",\"inverse-label-primary\":\"#ffffff\",\"inverse-label-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-label-tertiary\":\"rgba(233,233,235,0.32)\",\"inverse-label-quaternary\":\"rgba(233,233,235,0.2)\",\"inverse-label-static-primary\":\"#ffffff\",\"inverse-label-static-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-strong\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-normal\":\"rgba(233,233,235,0.28)\",\"inverse-border-overlay-subtle\":\"rgba(233,233,235,0.2)\",\"inverse-border-opaque-strong\":\"#ffffff\",\"inverse-border-opaque-normal\":\"#58595C\",\"inverse-border-opaque-subtle\":\"#3B3B3D\",\"brand-container-mid\":\"#4058FF\",\"brand-container-mid-hover\":\"#273FD9\",\"brand-container-high\":\"#273FD9\",\"brand-label-primary\":\"#4058FF\",\"brand-label-secondary\":\"rgba(4,17,102,0.8)\",\"brand-border-opaque-normal\":\"#4058FF\",\"brand-border-overlay-normal\":\"rgba(4,17,102,0.2)\",\"brandinverse-label-primary\":\"#5487FF\",\"accent-yellow\":\"#FFCC00\",\"accent-mint\":\"#02B0B0\",\"accent-cyan\":\"#40B3FF\",\"accent-purple\":\"#B450E6\",\"accent-pink\":\"#FF3377\",\"function-container-positive\":\"#30BF48\",\"function-container-negative\":\"#FF3333\",\"function-container-negative-hover\":\"#DB2323\",\"function-container-caution\":\"#FF9900\",\"function-container-highlight\":\"#FFF9E3\",\"function-container-selection\":\"#FAFBFF\",\"function-container-drag\":\"#D9DEFF\",\"function-label-positive\":\"#30BF48\",\"function-label-negative\":\"#FF3333\",\"function-label-caution\":\"#FF9900\",\"cover-dim-page\":\"rgba(0,0,0,0.56)\"},\"dark\":{\"neutral-container-lowest\":\"#1E1E1F\",\"neutral-container-lowest-hover\":\"#313133\",\"neutral-container-low\":\"#313133\",\"neutral-container-low-hover\":\"#3B3B3D\",\"neutral-container-mid\":\"#3B3B3D\",\"neutral-container-mid-hover\":\"#4A4A4D\",\"neutral-container-high\":\"#3B3B3D\",\"neutral-container-high-hover\":\"#4A4A4D\",\"neutral-container-highest\":\"#4A4A4D\",\"neutral-container-static-lowest\":\"#ffffff\",\"neutral-container-static-lowest-hover\":\"#E3E3E6\",\"neutral-container-variation-lowest\":\"#313133\",\"neutral-fill-lowest\":\"rgba(109,109,112,0)\",\"neutral-fill-lowest-hover\":\"rgba(109,109,112,0.12)\",\"neutral-fill-low\":\"rgba(109,109,112,0.2)\",\"neutral-fill-low-hover\":\"rgba(109,109,112,0.08)\",\"neutral-fill-mid\":\"rgba(109,109,112,0.16)\",\"neutral-fill-mid-hover\":\"rgba(109,109,112,0.32)\",\"neutral-fill-high\":\"rgba(109,109,112,0.32)\",\"neutral-fill-high-hover\":\"rgba(109,109,112,0.44)\",\"neutral-fill-highest\":\"rgba(109,109,112,0.72)\",\"neutral-label-primary\":\"#ffffff\",\"neutral-label-secondary\":\"rgba(233,233,235,0.64)\",\"neutral-label-tertiary\":\"rgba(233,233,235,0.32)\",\"neutral-label-quaternary\":\"rgba(233,233,235,0.2)\",\"neutral-label-static-primary\":\"#1E1E1F\",\"neutral-label-static-secondary\":\"rgba(109,109,112,0.8)\",\"neutral-border-overlay-strong\":\"rgba(233,233,235,0.64)\",\"neutral-border-overlay-normal\":\"rgba(233,233,235,0.28)\",\"neutral-border-overlay-subtle\":\"rgba(233,233,235,0.2)\",\"neutral-border-opaque-strong\":\"#ffffff\",\"neutral-border-opaque-normal\":\"#58595C\",\"neutral-border-opaque-subtle\":\"#3B3B3D\",\"inverse-container-lowest\":\"#ffffff\",\"inverse-container-lowest-hover\":\"#F6F6F7\",\"inverse-container-low\":\"#F9F9FA\",\"inverse-container-low-hover\":\"#F6F6F7\",\"inverse-container-mid\":\"#F6F6F7\",\"inverse-container-mid-hover\":\"#EDEEF0\",\"inverse-container-high\":\"#EDEEF0\",\"inverse-container-high-hover\":\"#E3E3E6\",\"inverse-container-static-high\":\"#3B3B3D\",\"inverse-container-static-high-hover\":\"#58595C\",\"inverse-container-highest\":\"#E9E9EB\",\"inverse-fill-mid\":\"rgba(233,233,235,0.24)\",\"inverse-fill-mid-hover\":\"rgba(233,233,235,0)\",\"inverse-label-primary\":\"#1E1E1F\",\"inverse-label-secondary\":\"rgba(109,109,112,0.8)\",\"inverse-label-tertiary\":\"rgba(109,109,112,0.48)\",\"inverse-label-quaternary\":\"rgba(109,109,112,0.24)\",\"inverse-label-static-primary\":\"#ffffff\",\"inverse-label-static-secondary\":\"rgba(233,233,235,0.64)\",\"inverse-border-overlay-strong\":\"rgba(109,109,112,0.64)\",\"inverse-border-overlay-normal\":\"rgba(109,109,112,0.24)\",\"inverse-border-overlay-subtle\":\"rgba(109,109,112,0.16)\",\"inverse-border-opaque-strong\":\"#1E1E1F\",\"inverse-border-opaque-normal\":\"#D7D7D9\",\"inverse-border-opaque-subtle\":\"#E9E9EB\",\"brand-container-mid\":\"#4058FF\",\"brand-container-mid-hover\":\"#6B7FFF\",\"brand-container-high\":\"#273FD9\",\"brand-label-primary\":\"#5487FF\",\"brand-label-secondary\":\"rgba(4,17,102,0.8)\",\"brand-border-opaque-normal\":\"#4058FF\",\"brand-border-overlay-normal\":\"rgba(4,17,102,0.2)\",\"brandinverse-label-primary\":\"#4058FF\",\"accent-yellow\":\"#FFD739\",\"accent-mint\":\"#00CCCC\",\"accent-cyan\":\"#6AC4FF\",\"accent-purple\":\"#C978F2\",\"accent-pink\":\"#FF6095\",\"function-container-positive\":\"#5DDF73\",\"function-container-negative\":\"#FF3333\",\"function-container-negative-hover\":\"#FF6060\",\"function-container-caution\":\"#FF9900\",\"function-container-highlight\":\"#413503\",\"function-container-selection\":\"#384666\",\"function-container-drag\":\"#384666\",\"function-label-positive\":\"#5DDF73\",\"function-label-negative\":\"#FF3333\",\"function-label-caution\":\"#FF9900\",\"cover-dim-page\":\"rgba(0,0,0,0.56)\"}},\"radius\":{\"xxs\":\"2px\",\"xs\":\"4px\",\"s\":\"6px\",\"m\":\"8px\",\"l\":\"10px\",\"xl\":\"12px\",\"xxl\":\"200px\"},\"opacity\":{\"0\":\"0%\",\"1\":\"1%\",\"4\":\"4%\",\"8\":\"8%\",\"12\":\"12%\",\"16\":\"16%\",\"20\":\"20%\",\"24\":\"24%\",\"28\":\"28%\",\"32\":\"32%\",\"36\":\"36%\",\"40\":\"40%\",\"44\":\"44%\",\"48\":\"48%\",\"50\":\"50%\",\"56\":\"56%\",\"64\":\"64%\",\"72\":\"72%\",\"80\":\"80%\"},\"padding\":{\"component-50\":\"2px\",\"component-100\":\"4px\",\"component-150\":\"6px\",\"component-200\":\"8px\",\"component-300\":\"12px\",\"component-400\":\"16px\",\"component-500\":\"20px\",\"component-600\":\"24px\",\"component-700\":\"32px\",\"component-800\":\"40px\",\"component-900\":\"48px\",\"section-50\":\"20px\",\"section-100\":\"24px\",\"section-200\":\"32px\",\"section-300\":\"40px\",\"section-400\":\"48px\",\"section-500\":\"56px\",\"section-600\":\"64px\",\"section-700\":\"80px\",\"section-800\":\"100px\",\"section-900\":\"120px\"},\"size\":{\"0\":\"0px\",\"1\":\"1px\",\"2\":\"2px\",\"3\":\"3px\",\"4\":\"4px\",\"6\":\"6px\",\"8\":\"8px\",\"10\":\"10px\",\"12\":\"12px\",\"14\":\"14px\",\"16\":\"16px\",\"18\":\"18px\",\"20\":\"20px\",\"24\":\"24px\",\"32\":\"32px\",\"40\":\"40px\",\"48\":\"48px\",\"56\":\"56px\",\"64\":\"64px\",\"80\":\"80px\",\"100\":\"100px\",\"120\":\"120px\",\"140\":\"140px\",\"160\":\"160px\",\"180\":\"180px\",\"200\":\"200px\",\"minus6\":\"-6px\",\"minus4\":\"-4px\",\"minus2\":\"-2px\"},\"gap\":{\"positive-50\":\"2px\",\"positive-100\":\"4px\",\"positive-150\":\"6px\",\"positive-200\":\"8px\",\"positive-300\":\"12px\",\"positive-400\":\"16px\",\"positive-500\":\"20px\",\"positive-600\":\"24px\",\"positive-700\":\"32px\",\"positive-800\":\"40px\",\"positive-900\":\"48px\"},\"shadow\":{\"normal\":[\"0px 2px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.06)\",\"0px 2px 12px 0px rgba(0, 0, 0, 0.24), 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2)\"],\"strong\":[\"0px 6px 16px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)\",\"0px 6px 16px 0px rgba(0, 0, 0, 0.36), 0px 4px 12px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)\"],\"heavy\":[\"0px 16px 20px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 8px 0px rgba(0, 0, 0, 0.08)\",\"0px 16px 20px 0px rgba(0, 0, 0, 0.36), 0px 8px 16px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.24)\"]},\"iconSize\":{\"xs\":\"16px\",\"s\":\"20px\",\"m\":\"24px\",\"l\":\"32px\",\"xl\":\"40px\"}}", "import { useRecoilValue, useSetRecoilState } from 'recoil';\nimport { vars } from '../generated/vars';\nimport { Appearance } from 'react-native';\nimport { themeAtoms } from '../store/theme';\n\nexport type Theme = 'dark' | 'light' | 'sys';\n\nexport const useSetTheme = () => {\n  const setThemeRecoilState = useSetRecoilState(themeAtoms);\n\n  const setTheme = (theme: Theme) => {\n    setThemeRecoilState(theme);\n  };\n\n  return { setTheme };\n};\n\nexport type ColorType = typeof vars.color.light;\n\nexport const useColor = <T>(\n  StyleSheetFunction: (color: ColorType) => T,\n): { styles: T; color: ColorType } => {\n  const theme = useRecoilValue(themeAtoms);\n\n  const colorToken = (() => {\n    if (theme === 'sys') {\n      const colorScheme = Appearance.getColorScheme();\n\n      if (colorScheme) {\n        return vars.color[colorScheme];\n      }\n\n      // colorScheme\uC774 \uC5C6\uB294 \uACBD\uC6B0 light \uD14C\uB9C8\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.\n      return vars.color.light;\n    } else {\n      return vars.color[theme];\n    }\n  })();\n\n  return { styles: StyleSheetFunction(colorToken), color: colorToken };\n};\n\nexport const MMKV_KEY = 'MMKV_KEY_THEME';\n", "import { atom } from 'recoil';\nimport { Theme } from '../color';\n\nexport const themeAtoms = atom<Theme>({\n  key: 'themeAtoms',\n  default: 'sys',\n});\n", "import { useRecoilValue } from 'recoil';\nimport { themeAtoms } from '../store/theme';\nimport { Appearance } from 'react-native';\n\nexport const useDarkTheme = () => {\n  const theme = useRecoilValue(themeAtoms);\n\n  return {\n    isDarkTheme: theme === 'dark' || (theme === 'sys' && Appearance.getColorScheme() === 'dark'),\n  };\n};\n"],
+  "mappings": "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",
+  "names": ["useRecoilValue", "Appearance", "useRecoilValue", "Appearance"]
 }

package/lib/store/theme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../color';
+export declare const themeAtoms: import("recoil").RecoilState<Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/design-token-rn",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "devDependencies": {
     "@eslint/js": "^9.22.0",
     "@internal/design-token-primitive": "workspace:^",
@@ -44,5 +44,8 @@
   "files": [
     "lib",
     "src"
-  ]
+  ],
+  "dependencies": {
+    "react-native": "^0.79.2"
+  }
 }

package/src/color/index.ts

@@ -1,11 +1,19 @@
-import { atom, useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { vars } from '../generated/vars';
-// import { color, ColorType } from 'prism/color';
+import { Appearance } from 'react-native';
+import { themeAtoms } from '../store/theme';
 
-export const themeAtoms = atom<'sys' | 'dark' | 'light'>({
-  key: 'themeAtoms',
-  default: 'sys',
-});
+export type Theme = 'dark' | 'light' | 'sys';
+
+export const useSetTheme = () => {
+  const setThemeRecoilState = useSetRecoilState(themeAtoms);
+
+  const setTheme = (theme: Theme) => {
+    setThemeRecoilState(theme);
+  };
+
+  return { setTheme };
+};
 
 export type ColorType = typeof vars.color.light;
 
@@ -16,12 +24,13 @@ export const useColor = <T>(
 
   const colorToken = (() => {
     if (theme === 'sys') {
-      // const colorScheme = Appearance.getColorScheme();
+      const colorScheme = Appearance.getColorScheme();
 
-      // if (colorScheme) {
-      //   return color[colorScheme];
-      // }
+      if (colorScheme) {
+        return vars.color[colorScheme];
+      }
 
+      // colorScheme이 없는 경우 light 테마를 반환합니다.
       return vars.color.light;
     } else {
       return vars.color[theme];
@@ -30,3 +39,5 @@ export const useColor = <T>(
 
   return { styles: StyleSheetFunction(colorToken), color: colorToken };
 };
+
+export const MMKV_KEY = 'MMKV_KEY_THEME';

package/src/hooks/useDarkTheme.ts

@@ -0,0 +1,11 @@
+import { useRecoilValue } from 'recoil';
+import { themeAtoms } from '../store/theme';
+import { Appearance } from 'react-native';
+
+export const useDarkTheme = () => {
+  const theme = useRecoilValue(themeAtoms);
+
+  return {
+    isDarkTheme: theme === 'dark' || (theme === 'sys' && Appearance.getColorScheme() === 'dark'),
+  };
+};

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './generated/vars';
 export * from './color';
+export * from './hooks/useDarkTheme';

package/src/store/theme.ts

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { Theme } from '../color';
+
+export const themeAtoms = atom<Theme>({
+  key: 'themeAtoms',
+  default: 'sys',
+});