refactor(web): theme system

web/src/beta/components/Text/index.tsx

@@ -1,7 +1,11 @@
 import { CSSProperties } from "react";
 
 import { useTheme } from "@reearth/services/theme";
-import { FontWeight, typography, TypographySize } from "@reearth/services/theme/fonts";
+import {
+  FontWeight,
+  typography,
+  TypographySize,
+} from "@reearth/services/theme/reearthTheme/common/fonts";
 
 type NonChangeableProperties = "color" | "fontFamily" | "fontSize" | "lineHeight" | "fontStyle";
 

web/src/beta/lib/core/Crust/Infobox/Block/HTML/index.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from
 import Icon from "@reearth/beta/components/Icon";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
-import fonts from "@reearth/services/theme/fonts";
+import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
 
 import { CommonProps as BlockProps } from "..";
 import { Border } from "../utils";

web/src/beta/lib/core/Crust/Infobox/Block/Text/index.tsx

@@ -5,7 +5,7 @@ import Icon from "@reearth/beta/components/Icon";
 import Markdown from "@reearth/beta/components/Markdown";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
-import fonts from "@reearth/services/theme/fonts";
+import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
 
 import { CommonProps as BlockProps, Typography } from "..";
 import { Border, typographyStyles } from "../utils";

web/src/beta/lib/core/Crust/Infobox/Block/utils.ts

@@ -1,5 +1,5 @@
 import { styled } from "@reearth/services/theme";
-import fonts from "@reearth/services/theme/fonts";
+import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
 
 import { InfoboxProperty } from "../types";
 

web/src/beta/lib/core/Crust/Plugins/Plugin/ModalContainer/index.tsx

@@ -6,7 +6,7 @@ import {
   useCallback,
 } from "react";
 
-import theme, { styled } from "@reearth/services/theme";
+import { styled } from "@reearth/services/theme";
 
 export type PluginModalInfo = {
   id?: string;
@@ -52,7 +52,8 @@ const Wrapper = styled.div<{ visible: boolean }>`
   top: 50%;
   transform: translate(-50%, -50%);
   visibility: ${({ visible }) => (visible ? "visible" : "hidden")};
-  z-index: ${({ visible }) => (visible ? theme.zIndexes.pluginModal : theme.zIndexes.hidden)};
+  z-index: ${({ visible, theme }) =>
+    visible ? theme.zIndexes.pluginModal : theme.zIndexes.hidden};
   transition: opacity 0.25s;
   opacity: ${({ visible }) => (visible ? "1" : "0")};
 `;
@@ -66,7 +67,8 @@ const Background = styled.div<{ visible: boolean; background?: string }>`
   height: 100%;
   background: ${({ background }) => background};
   visibility: ${({ visible }) => (visible ? "visible" : "hidden")};
-  z-index: ${({ visible }) => (visible ? theme.zIndexes.pluginModal - 1 : theme.zIndexes.hidden)};
+  z-index: ${({ visible, theme }) =>
+    visible ? theme.zIndexes.pluginModal - 1 : theme.zIndexes.hidden};
 `;
 
 export default forwardRef(ModalContainer);

web/src/beta/lib/core/Crust/Plugins/Plugin/PopupContainer/index.tsx

@@ -8,7 +8,7 @@ import {
   RefObject,
 } from "react";
 
-import theme, { styled } from "@reearth/services/theme";
+import { styled } from "@reearth/services/theme";
 
 import type { PopupPosition } from "../../plugin_types";
 
@@ -59,7 +59,8 @@ const PopupContainer: ForwardRefRenderFunction<HTMLDivElement | undefined, Props
 const Wrapper = styled.div<{ visible: boolean }>`
   position: absolute;
   visibility: ${({ visible }) => (visible ? "visible" : "hidden")};
-  z-index: ${({ visible }) => (visible ? theme.zIndexes.pluginPopup : theme.zIndexes.hidden)};
+  z-index: ${({ visible, theme }) =>
+    visible ? theme.zIndexes.pluginPopup : theme.zIndexes.hidden};
   transition: opacity 0.25s;
   opacity: ${({ visible }) => (visible ? "1" : "0")};
 `;

web/src/beta/lib/core/Crust/Widgets/Widget/Timeline/UI/ScaleList.tsx

@@ -52,11 +52,22 @@ const ScaleListInner: React.FC<ScaleListInnerProps> = memo(function ScaleListPre
               <ScaleLabel size="2xs" customColor publishedTheme={publishedTheme}>
                 {label}
               </ScaleLabel>
-              <Scale isHour={isHour} isStrongScale={isStrongScale} />
+              <Scale
+                isHour={isHour}
+                isStrongScale={isStrongScale}
+                publishedTheme={publishedTheme}
+              />
             </LabeledScale>
           );
         }
-        return <Scale key={idx} isHour={isHour} isStrongScale={isStrongScale} />;
+        return (
+          <Scale
+            key={idx}
+            isHour={isHour}
+            isStrongScale={isStrongScale}
+            publishedTheme={publishedTheme}
+          />
+        );
       })}
     </>
   );
@@ -97,15 +108,17 @@ const ScaleLabel = styled(Text)<StyledColorProps>`
   white-space: nowrap;
 `;
 
-const Scale = styled.div<{
-  isHour: boolean;
-  isStrongScale: boolean;
-}>`
+const Scale = styled.div<
+  StyledColorProps & {
+    isHour: boolean;
+    isStrongScale: boolean;
+  }
+>`
   flex-shrink: 0;
   width: ${({ isStrongScale }) =>
     isStrongScale ? `${STRONG_SCALE_WIDTH}px` : `${NORMAL_SCALE_WIDTH}px`};
   height: ${({ isHour }) => (isHour && "16px") || "12px"};
-  background: ${({ theme }) => theme.colors.publish.dark.text.weak};
+  background: ${({ publishedTheme }) => publishedTheme?.weakText};
 `;
 
 export default ScaleList;

web/src/beta/lib/core/Crust/Widgets/Widget/Timeline/UI/index.tsx

@@ -132,7 +132,12 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
        * TODO: Support keyboard operation for accessibility
        * see: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
        */}
-      <ScaleBox role="slider" {...events} ref={scaleElement} shouldScroll={shouldScroll}>
+      <ScaleBox
+        role="slider"
+        {...events}
+        ref={scaleElement}
+        shouldScroll={shouldScroll}
+        publishedTheme={theme}>
         <ScaleList
           start={startDate}
           scaleCount={scaleCount}
@@ -274,7 +279,7 @@ const CurrentTime = styled(Text)<StyledColorProps>`
   white-space: pre-line;
 `;
 
-const ScaleBox = styled.div<{ shouldScroll: boolean }>`
+const ScaleBox = styled.div<StyledColorProps & { shouldScroll: boolean }>`
   border: ${({ theme }) => `${BORDER_WIDTH}px solid ${theme.main.weak}`};
   border-radius: 5px;
   box-sizing: border-box;
@@ -302,7 +307,7 @@ const ScaleBox = styled.div<{ shouldScroll: boolean }>`
   }
   ::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background-color: ${({ theme }) => theme.colors.publish.dark.icon.main};
+    background-color: ${({ publishedTheme }) => publishedTheme?.mainIcon};
   }
   margin: ${({ theme }) =>
     `${theme.metrics.xs}px ${theme.metrics.s}px ${theme.metrics.xs}px ${theme.metrics.xs}px`};

web/src/beta/lib/core/Crust/theme/dark.ts

@@ -1,15 +1,15 @@
-import { colors } from "@reearth/services/theme";
+import { publishColors as colors } from "@reearth/services/theme/publishTheme";
 
 import type { Theme } from ".";
 
 export const dark: Theme = {
-  strongText: colors.publish.dark.text.strong,
-  mainText: colors.publish.dark.text.main,
-  weakText: colors.publish.dark.text.weak,
-  strongIcon: colors.publish.dark.icon.strong,
-  mainIcon: colors.publish.dark.icon.main,
-  weakIcon: colors.publish.dark.icon.weak,
-  select: colors.publish.dark.other.select,
-  mask: colors.publish.dark.other.mask,
-  background: colors.publish.dark.other.background,
+  strongText: colors.dark.text.strong,
+  mainText: colors.dark.text.main,
+  weakText: colors.dark.text.weak,
+  strongIcon: colors.dark.icon.strong,
+  mainIcon: colors.dark.icon.main,
+  weakIcon: colors.dark.icon.weak,
+  select: colors.dark.other.select,
+  mask: colors.dark.other.mask,
+  background: colors.dark.other.background,
 };

web/src/beta/lib/core/Crust/theme/forest.ts

@@ -1,15 +1,15 @@
-import { colors } from "@reearth/services/theme";
+import { publishColors as colors } from "@reearth/services/theme/publishTheme";
 
 import type { Theme } from ".";
 
 export const forest: Theme = {
-  strongText: colors.publish.forest.text.strong,
-  mainText: colors.publish.forest.text.main,
-  weakText: colors.publish.forest.text.weak,
-  strongIcon: colors.publish.forest.icon.strong,
-  mainIcon: colors.publish.forest.icon.main,
-  weakIcon: colors.publish.forest.icon.weak,
-  select: colors.publish.forest.other.select,
-  mask: colors.publish.forest.other.mask,
-  background: colors.publish.forest.other.background,
+  strongText: colors.forest.text.strong,
+  mainText: colors.forest.text.main,
+  weakText: colors.forest.text.weak,
+  strongIcon: colors.forest.icon.strong,
+  mainIcon: colors.forest.icon.main,
+  weakIcon: colors.forest.icon.weak,
+  select: colors.forest.other.select,
+  mask: colors.forest.other.mask,
+  background: colors.forest.other.background,
 };

web/src/beta/lib/core/Crust/theme/light.ts

@@ -1,15 +1,15 @@
-import { colors } from "@reearth/services/theme";
+import { publishColors as colors } from "@reearth/services/theme/publishTheme";
 
 import type { Theme } from ".";
 
 export const light: Theme = {
-  strongText: colors.publish.light.text.strong,
-  mainText: colors.publish.light.text.main,
-  weakText: colors.publish.light.text.weak,
-  strongIcon: colors.publish.light.icon.strong,
-  mainIcon: colors.publish.light.icon.main,
-  weakIcon: colors.publish.light.icon.weak,
-  select: colors.publish.light.other.select,
-  mask: colors.publish.light.other.mask,
-  background: colors.publish.light.other.background,
+  strongText: colors.light.text.strong,
+  mainText: colors.light.text.main,
+  weakText: colors.light.text.weak,
+  strongIcon: colors.light.icon.strong,
+  mainIcon: colors.light.icon.main,
+  weakIcon: colors.light.icon.weak,
+  select: colors.light.other.select,
+  mask: colors.light.other.mask,
+  background: colors.light.other.background,
 };

web/src/classic/components/atoms/Box/index.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
 
 import { styled } from "@reearth/services/theme";
-import { MetricsSizes, metricsSizes } from "@reearth/services/theme/metrics";
+import { MetricsSizes, metricsSizes } from "@reearth/services/theme/reearthTheme/common/metrics";
 
 export type Props = {
   className?: string;

web/src/classic/components/atoms/Button/index.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from "react";
 import Icon from "@reearth/classic/components/atoms/Icon";
 import Text from "@reearth/classic/components/atoms/Text";
 import { styled } from "@reearth/services/theme";
-import { metricsSizes } from "@reearth/services/theme/metrics";
+import { metricsSizes } from "@reearth/services/theme/reearthTheme/common/metrics";
 
 export type Type = "primary" | "secondary" | "danger";
 

web/src/classic/components/atoms/Check/index.tsx

@@ -1,5 +1,5 @@
 import { styled } from "@reearth/services/theme";
-import fonts from "@reearth/services/theme/fonts";
+import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
 
 type Props = {
   linked?: boolean;

web/src/classic/components/atoms/PublicationStatus/index.tsx

@@ -4,7 +4,7 @@ import Text from "@reearth/classic/components/atoms/Text";
 import { useT } from "@reearth/services/i18n";
 // Theme
 import { styled } from "@reearth/services/theme";
-import { metricsSizes } from "@reearth/services/theme/metrics";
+import { metricsSizes } from "@reearth/services/theme/reearthTheme/common/metrics";
 
 export type Status = "published" | "limited" | "unpublished";
 
@@ -54,20 +54,20 @@ const StyledStatus = styled.div`
 const StatusCircle = styled.div<PublishStatusProps>`
   width: ${({ size }) => (size === "lg" || size === "md" ? "10px" : "9px")};
   height: ${({ size }) => (size === "lg" || size === "md" ? "10px" : "9px")};
-  background: ${props =>
-    props.status === "published" || props.status === "limited"
-      ? props.theme.publishStatus.published
-      : props.status === "unpublished"
-      ? props.theme.publishStatus.unpublished
-      : props.status === "building"
-      ? props.theme.publishStatus.building
+  background: ${({ theme, status }) =>
+    status === "published" || status === "limited"
+      ? theme.publishStatus.published
+      : status === "unpublished"
+      ? theme.publishStatus.unpublished
+      : status === "building"
+      ? theme.publishStatus.building
       : null};
   border-radius: 50px;
   margin: auto ${metricsSizes["s"]}px auto 0;
 `;
 
 const PublishLink = styled.a`
-  color: ${props => props.theme.main.strongText};
+  color: ${({ theme }) => theme.main.strongText};
   text-decoration: none;
 `;
 

web/src/classic/components/atoms/Radio/index.tsx

@@ -1,5 +1,5 @@
 import { styled } from "@reearth/services/theme";
-import fonts from "@reearth/services/theme/fonts";
+import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
 
 type Props = {
   linked?: boolean;

web/src/classic/components/atoms/Select/core.tsx

@@ -4,7 +4,7 @@ import { useClickAway } from "react-use";
 import { useMergeRefs } from "use-callback-ref";
 
 import { styled, css, metrics } from "@reearth/services/theme";
-import { metricsSizes } from "@reearth/services/theme/metrics";
+import { metricsSizes } from "@reearth/services/theme/reearthTheme/common/metrics";
 
 // Components
 

web/src/classic/components/atoms/SelectOption/index.tsx

@@ -1,6 +1,6 @@
 import Text from "@reearth/classic/components/atoms/Text";
 import { styled } from "@reearth/services/theme";
-import fonts from "@reearth/services/theme/fonts";
+import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
 
 export type Props = {
   label: string;

web/src/classic/components/atoms/Table/index.tsx

@@ -1,6 +1,6 @@
 import Text from "@reearth/classic/components/atoms/Text";
-import theme, { fonts, styled } from "@reearth/services/theme";
-import { TypographySize } from "@reearth/services/theme/fonts";
+import { fonts, styled } from "@reearth/services/theme";
+import { TypographySize } from "@reearth/services/theme/reearthTheme/common/fonts";
 
 export type Props<T> = {
   className?: string;
@@ -95,7 +95,7 @@ const StyledTable = styled.table<{
   white-space: ${({ multiLine }) => (multiLine ? "normal" : "nowrap")};
   background: ${({ bg, theme }) => (bg ? bg : theme.main.bg)};
   border-color: ${({ borderColor, theme }) => (borderColor ? borderColor : theme.main.lighterBg)};
-  color: ${({ textColor }) => (textColor ? textColor : theme.main.text)};
+  color: ${({ textColor, theme }) => (textColor ? textColor : theme.main.text)};
   font-size: ${({ textSize }) => `${textSize}px`};
   width: ${({ width }) => (width ? width : "100%")};
   height: ${({ columnHeight }) => columnHeight};

web/src/classic/components/atoms/Text/index.tsx

@@ -1,7 +1,11 @@
 import { CSSProperties } from "react";
 
 import { useTheme } from "@reearth/services/theme";
-import { FontWeight, typography, TypographySize } from "@reearth/services/theme/fonts";
+import {
+  FontWeight,
+  typography,
+  TypographySize,
+} from "@reearth/services/theme/reearthTheme/common/fonts";
 
 type NonChangeableProperties = "color" | "fontFamily" | "fontSize" | "lineHeight" | "fontStyle";
 

web/src/classic/components/atoms/TextBox/index.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState, useCallback, useRef } from "react";
 
 import Flex from "@reearth/classic/components/atoms/Flex";
 import { styled, metrics } from "@reearth/services/theme";
-import fonts from "@reearth/services/theme/fonts";
-import { metricsSizes } from "@reearth/services/theme/metrics";
+import fonts from "@reearth/services/theme/reearthTheme/common/fonts";
+import { metricsSizes } from "@reearth/services/theme/reearthTheme/common/metrics";
 
 export type Props<T extends string = string> = {
   className?: string;