docs: get theme value globally

doc/docs/advanced/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Advanced",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn the more advanced usecases"
+  }
+}

doc/docs/advanced/global-theme-value.mdx

@@ -0,0 +1,76 @@
+---
+sidebar_position: 1
+title: Get Theme value in global
+---
+
+
+
+# Get Theme Value Globally
+
+The React Native Styled System does not provide a way to retrieve themes from globally outside of React's Context.
+
+However, when you pass a theme to `StyledSystemProvider`, you can store the theme as a global object and reference it in your code where this theme changes.
+
+Let's say you have a Wrapper component in your code that wraps a `StyledSystemProvider` like this:
+
+```tsx
+import...
+import StyledSystemTheme from './AppTheme'
+
+export const StyledSystemAppThemeProvider = ({ children }: PropsWithChildren<{}>) => {
+  const { sfTop, sfBottom, sfLeft, sfRight } = useSafeAreaValues();
+
+  const theme = useMemo(() => {
+    const safeArea = { sfTop, sfRight, sfBottom, sfLeft };
+    return {
+      ...StyledSystemTheme,
+      sizes: { ...StyledSystemTheme.sizes, ...safeArea },
+      space: { ...StyledSystemTheme.space, ...safeArea },
+    };
+  }, [sfLeft, sfTop, sfRight, sfBottom]);
+
+  return <StyledSystemProvider theme={theme}>{children}</StyledSystemProvider>;
+};
+```
+
+Now, when the `theme` object changes, we save it for reference as a global variable.
+
+```tsx
+import...
+import StyledSystemTheme from './AppTheme'
+
+//highlight-start
+let _globalTheme: ThemedDict = StyledSystemTheme;
+export const getGlobalTheme = () => _globalTheme;
+//highlight-end
+
+export const StyledSystemAppThemeProvider = ({ children }: PropsWithChildren<{}>) => {
+  const { sfTop, sfBottom, sfLeft, sfRight } = useSafeAreaValues();
+
+  const theme = useMemo(() => {
+    const safeArea = { sfTop, sfRight, sfBottom, sfLeft };
+    return {
+      ...StyledSystemTheme,
+      sizes: { ...StyledSystemTheme.sizes, ...safeArea },
+      space: { ...StyledSystemTheme.space, ...safeArea },
+    };
+  }, [sfLeft, sfTop, sfRight, sfBottom]);
+
+//highlight-start
+  useEffect(() => {
+    globalTheme = theme;
+  }, [theme]);
+//highlight-end
+
+  return <StyledSystemProvider theme={theme}>{children}</StyledSystemProvider>;
+};
+```
+
+We can now reference the theme via `getGlobalTheme()` in our code.
+
+:::warning
+Note that the latest `theme` value may not always be referenced.
+
+For example, save the value returned by `getGlobalTheme()` in a variable and then
+If you try to use it after the theme value has changed, it will point to the old value.
+:::

doc/docs/usage/configuration.mdx

@@ -27,7 +27,7 @@ If you try to use a theme in a Render Context where `StyledSystemProvider` does
 
 ## 2. Creating a custom `ThemedDict` object
 
-`ThemedDict` is a set of design token values that we need to pass to our theme.
+`ThemedDict` is a set of design token values that you need to pass to your theme.
 
 These include `space`, `sizes`, `colors`, etc.
 

doc/i18n/ko/docusaurus-plugin-content-blog/options.json

@@ -0,0 +1,14 @@
+{
+  "title": {
+    "message": "Blog",
+    "description": "The title for the blog used in SEO"
+  },
+  "description": {
+    "message": "Blog",
+    "description": "The description for the blog used in SEO"
+  },
+  "sidebar.title": {
+    "message": "Recent posts",
+    "description": "The label for the left sidebar"
+  }
+}

doc/i18n/ko/docusaurus-plugin-content-docs/current.json

@@ -10,5 +10,13 @@
   "sidebar.tutorialSidebar.category.Usage.link.generated-index.description": {
     "message": "React Native Styled System의 개념들을 빠르게 배워보세요.",
     "description": "The generated-index page description for category Usage in sidebar tutorialSidebar"
+  },
+  "sidebar.tutorialSidebar.category.Advanced": {
+    "message": "고급",
+    "description": "The label for category Advanced in sidebar tutorialSidebar"
+  },
+  "sidebar.tutorialSidebar.category.Advanced.link.generated-index.description": {
+    "message": "특정 상황에서의 사용법들을 알아보세요.",
+    "description": "The generated-index page description for category Advanced in sidebar tutorialSidebar"
   }
 }

doc/i18n/ko/docusaurus-plugin-content-docs/current/advanced/global-theme-value.mdx

@@ -0,0 +1,76 @@
+---
+sidebar_position: 1
+title: 전역 테마 객체 참조
+---
+
+# 전역 테마 객체 참조
+
+React Native Styled System은 React의 Context 외부의 전역에서 테마를 가져오는
+방식을 제공하지 않습니다.
+
+그러나 `StyledSystemProvider`에 테마를 전달할 때, 이 테마가 변경되는 당신의 코드에서
+전역 객체로 테마를 저장해두고 참조할 수 있습니다.
+
+다음과 같은 `StyledSystemProvider`를 감싸는 당신의 코드의 Wrapper 컴포넌트가 있다고 해보겠습니다.
+
+```tsx
+import ...
+import StyledSystemTheme from './AppTheme'
+
+export const StyledSystemAppThemeProvider = ({ children }: PropsWithChildren<{}>) => {
+  const { sfTop, sfBottom, sfLeft, sfRight } = useSafeAreaValues();
+
+  const theme = useMemo(() => {
+    const safeArea = { sfTop, sfRight, sfBottom, sfLeft };
+    return {
+      ...StyledSystemTheme,
+      sizes: { ...StyledSystemTheme.sizes, ...safeArea },
+      space: { ...StyledSystemTheme.space, ...safeArea },
+    };
+  }, [sfLeft, sfTop, sfRight, sfBottom]);
+
+  return <StyledSystemProvider theme={theme}>{children}</StyledSystemProvider>;
+};
+```
+
+이제 `theme`객체가 변경될 때 이를 전역 변수로 참조할 수 있게 저장합니다.
+
+```tsx
+import ...
+import StyledSystemTheme from './AppTheme'
+
+// highlight-start
+let _globalTheme: ThemedDict = StyledSystemTheme;
+export const getGlobalTheme = () => _globalTheme;
+// highlight-end
+
+export const StyledSystemAppThemeProvider = ({ children }: PropsWithChildren<{}>) => {
+  const { sfTop, sfBottom, sfLeft, sfRight } = useSafeAreaValues();
+
+  const theme = useMemo(() => {
+    const safeArea = { sfTop, sfRight, sfBottom, sfLeft };
+    return {
+      ...StyledSystemTheme,
+      sizes: { ...StyledSystemTheme.sizes, ...safeArea },
+      space: { ...StyledSystemTheme.space, ...safeArea },
+    };
+  }, [sfLeft, sfTop, sfRight, sfBottom]);
+
+// highlight-start
+  useEffect(() => {
+    globalTheme = theme;
+  }, [theme]);
+// highlight-end
+
+  return <StyledSystemProvider theme={theme}>{children}</StyledSystemProvider>;
+};
+```
+
+이제 우리의 코드에서 `getGlobalTheme()`를 통해 테마를 참조할 수 있습니다.
+
+:::warning
+항상 최신 `theme`값이 참조되지 않을 수 있다는 것을 주의하세요.
+
+예를 들어, `getGlobalTheme()`로 반환된 값을 변수에 저장해두었다가
+테마 값이 변경된 이후 사용하려고 하면 이전의 값을 가리키고 있습니다.
+:::

src/provider/StyledSystemProvider.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { PropsWithChildren } from 'react';
 import React from 'react';
 
 import type { ThemedDict } from '../@types/ThemedDict';
@@ -12,7 +12,7 @@ export type StyledSystemContextValue = {
 export const StyledSystemContext = React.createContext<StyledSystemContextValue>({
   theme: emptyThemedDict,
 });
-type Props = { children: ReactElement | null; theme: Partial<ThemedDict> };
+type Props = PropsWithChildren<{ theme: Partial<ThemedDict> }>;
 
 export const StyledSystemProvider = ({ children, theme }: Props) => {
   return (