chore(landing): styles dir rename (#257)

* chore: rename styles -> salon

* refactor: static config

* refactor: static doc

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/CoverPreview.tsx

@@ -3,7 +3,7 @@ import Cards2SVG from '~/icons/Cards2'
 
 import useSalon, {
   cn,
-} from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/cover_preview'
+} from '../../../salon/articles_intro_tabs/changelog_tab/changelog_demo/cover_preview'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EditorPreview/Toolbox.tsx

@@ -6,7 +6,7 @@ import LightSVG from '~/icons/FlashLight'
 import RatioSVG from '~/icons/Ratio'
 import SizeSVG from '~/icons/ImageSize'
 
-import useSalon from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview/toolbox'
+import useSalon from '../../../../salon/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview/toolbox'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EditorPreview/index.tsx

@@ -8,7 +8,7 @@ import CoverPreview from '../CoverPreview'
 
 import useSalon, {
   cn,
-} from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview'
+} from '../../../../salon/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview'
 
 const EditorPreview: FC = () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBar.tsx

@@ -1,6 +1,6 @@
 import Img from '~/Img'
 
-import useSalon from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar'
+import useSalon from '../../../salon/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar'
 
 const EMOTION_STATIC = 'icons/emotion'
 

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBarBad.tsx

@@ -1,6 +1,6 @@
 import Img from '~/Img'
 
-import useSalon from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar_bad'
+import useSalon from '../../../salon/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar_bad'
 
 const EMOTION_STATIC = '/icons/static/emotion'
 

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/MainList/Footer.tsx

@@ -5,7 +5,7 @@ import { mockUsers } from '~/mock'
 import UpvoteSVG from '~/icons/Upvote'
 import Facepile from '~/widgets/Facepile/LandingPage'
 
-import useSalon from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/main_list/footer'
+import useSalon from '../../../../salon/articles_intro_tabs/changelog_tab/changelog_demo/main_list/footer'
 
 type TProps = {
   upvotesCount?: number

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/MainList/index.tsx

@@ -2,14 +2,14 @@ import { COLOR_NAME } from '~/const/colors'
 
 import TagNode from '~/widgets/TagNode'
 
-import StarSVG from '../../../../styles/articles_intro_tabs/changelog_tab/Star'
+import StarSVG from '../../../../salon/articles_intro_tabs/changelog_tab/Star'
 
 import CoverPreview from '../CoverPreview'
 import Footer from './Footer'
 
 import useSalon, {
   cn,
-} from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/main_list'
+} from '../../../../salon/articles_intro_tabs/changelog_tab/changelog_demo/main_list'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/index.tsx

@@ -3,7 +3,7 @@ import EditorPreview from './EditorPreview'
 import EmotionBar from './EmotionBar'
 import EmotionBarBad from './EmotionBarBad'
 
-import useSalon from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo'
+import useSalon from '../../../salon/articles_intro_tabs/changelog_tab/changelog_demo'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/ChangelogTab/IntroDigest.tsx

@@ -1,5 +1,5 @@
 import IntroItems from './IntroItems'
-import useSalon, {} from '../../styles/articles_intro_tabs/changelog_tab/intro_digest'
+import useSalon, {} from '../../salon/articles_intro_tabs/changelog_tab/intro_digest'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/ChangelogTab/IntroItems.tsx

@@ -5,7 +5,7 @@ import { COLOR_NAME } from '~/const/colors'
 import Button from '~/widgets/Buttons/Button'
 import FeatItem from '../FeatItem'
 
-import useSalon from '../../styles/articles_intro_tabs'
+import useSalon from '../../salon/articles_intro_tabs'
 
 const color = COLOR_NAME.RED
 

src/app/Landing/ArticlesIntroTabs/ChangelogTab/index.tsx

@@ -5,7 +5,7 @@ import type { TActive } from '~/spec'
 import IntroDigest from './IntroDigest'
 import ChangelogDemo from './ChangelogDemo'
 
-import useSalon, { cn } from '../../styles/articles_intro_tabs/changelog_tab'
+import useSalon, { cn } from '../../salon/articles_intro_tabs/changelog_tab'
 
 const ChangelogFeat: FC<TActive> = ({ active }) => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/Content.tsx

@@ -8,7 +8,7 @@ import ChangelogTab from './ChangelogTab'
 import KanbanTab from './KanbanTab'
 import HelpTab from './HelpTab'
 
-import useSalon from '../styles/articles_intro_tabs/content'
+import useSalon from '../salon/articles_intro_tabs/content'
 
 type TProps = {
   tab: TThread

src/app/Landing/ArticlesIntroTabs/DiscussTab/DiscussDemo/CommentItem.tsx

@@ -7,7 +7,7 @@ import ImgFallback from '~/widgets/ImgFallback'
 
 import useSalon, {
   cn,
-} from '../../../styles/articles_intro_tabs/discuss_tab/discuss_demo/comment_item'
+} from '../../../salon/articles_intro_tabs/discuss_tab/discuss_demo/comment_item'
 
 type TProps = {
   user?: TUser

src/app/Landing/ArticlesIntroTabs/DiscussTab/DiscussDemo/PostItem.tsx

@@ -5,9 +5,7 @@ import type { TArticleCat, TActive } from '~/spec'
 import UpvoteSVG from '~/icons/Upvote'
 import ArticleCatState from '~/widgets/ArticleCatState'
 
-import useSalon, {
-  cn,
-} from '../../../styles/articles_intro_tabs/discuss_tab/discuss_demo/post_item'
+import useSalon, { cn } from '../../../salon/articles_intro_tabs/discuss_tab/discuss_demo/post_item'
 
 type TProps = {
   title?: string

src/app/Landing/ArticlesIntroTabs/DiscussTab/DiscussDemo/index.tsx

@@ -14,7 +14,7 @@ import Facepile from '~/widgets/Facepile/LandingPage'
 import PostItem from './PostItem'
 import CommentItem from './CommentItem'
 
-import useSalon, { cn } from '../../../styles/articles_intro_tabs/discuss_tab/discuss_demo'
+import useSalon, { cn } from '../../../salon/articles_intro_tabs/discuss_tab/discuss_demo'
 
 const DiscussDemo: FC = () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/DiscussTab/IntroDigest.tsx

@@ -1,6 +1,6 @@
 import IntroItems from './IntroItems'
 
-import useSalon from '../../styles/articles_intro_tabs/discuss_tab/intro_digest'
+import useSalon from '../../salon/articles_intro_tabs/discuss_tab/intro_digest'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/DiscussTab/IntroItems.tsx

@@ -5,7 +5,7 @@ import { COLOR_NAME } from '~/const/colors'
 import Button from '~/widgets/Buttons/Button'
 
 import FeatItem from '../FeatItem'
-import useSalon from '../../styles/articles_intro_tabs'
+import useSalon from '../../salon/articles_intro_tabs'
 
 const color = COLOR_NAME.PURPLE
 

src/app/Landing/ArticlesIntroTabs/DiscussTab/index.tsx

@@ -5,7 +5,7 @@ import type { TActive } from '~/spec'
 import IntroDigest from './IntroDigest'
 import DiscussDemo from './DiscussDemo'
 
-import useSalon, { cn } from '../../styles/articles_intro_tabs/discuss_tab'
+import useSalon, { cn } from '../../salon/articles_intro_tabs/discuss_tab'
 
 const DiscussFeat: FC<TActive> = ({ active }) => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/FeatItem.tsx

@@ -4,7 +4,7 @@ import type { TColor } from '~/spec'
 import CheckSVG from '~/icons/CheckBold'
 // import CheckSVG from '~/icons/CheckCircle'
 
-import useSalon from '../styles/articles_intro_tabs/feat_item'
+import useSalon from '../salon/articles_intro_tabs/feat_item'
 
 type TProps = {
   text?: string

src/app/Landing/ArticlesIntroTabs/HelpTab/HelpDemo/Article.tsx

@@ -4,7 +4,7 @@ import SosoSVG from '~/icons/EmojiSoSo'
 import BadSVG from '~/icons/EmojiBad'
 import ArrowSimple from '~/icons/ArrowSimple'
 
-import useSalon, { cn } from '../../../styles/articles_intro_tabs/help_tab/help_demo/article'
+import useSalon, { cn } from '../../../salon/articles_intro_tabs/help_tab/help_demo/article'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/HelpTab/HelpDemo/DirTree.tsx

@@ -1,7 +1,7 @@
 import GithubSVG from '~/icons/Github8'
 import BookSVG from '~/icons/Book'
 
-import useSalon, { cn } from '../../../styles/articles_intro_tabs/help_tab/help_demo/dir_tree'
+import useSalon, { cn } from '../../../salon/articles_intro_tabs/help_tab/help_demo/dir_tree'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/HelpTab/HelpDemo/InlineComment.tsx

@@ -1,7 +1,7 @@
 import Img from '~/Img'
 import { mockUsers } from '~/mock'
 
-import useSalon, {} from '../../../styles/articles_intro_tabs/help_tab/help_demo/inline_comment'
+import useSalon, {} from '../../../salon/articles_intro_tabs/help_tab/help_demo/inline_comment'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/HelpTab/HelpDemo/index.tsx

@@ -2,7 +2,7 @@ import DirTree from './DirTree'
 import Article from './Article'
 import InlineComment from './InlineComment'
 
-import useSalon from '../../../styles/articles_intro_tabs/help_tab/help_demo'
+import useSalon from '../../../salon/articles_intro_tabs/help_tab/help_demo'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/HelpTab/IntroDigest.tsx

@@ -1,6 +1,6 @@
 import IntroItems from './IntroItems'
 
-import useSalon from '../../styles/articles_intro_tabs/help_tab/intro_digest'
+import useSalon from '../../salon/articles_intro_tabs/help_tab/intro_digest'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/HelpTab/IntroItems.tsx

@@ -6,7 +6,7 @@ import Button from '~/widgets/Buttons/Button'
 
 import FeatItem from '../FeatItem'
 
-import useSalon from '../../styles/articles_intro_tabs'
+import useSalon from '../../salon/articles_intro_tabs'
 
 const color = COLOR_NAME.CYAN
 const Contents = () => {

src/app/Landing/ArticlesIntroTabs/HelpTab/index.tsx

@@ -5,7 +5,7 @@ import type { TActive } from '~/spec'
 import IntroDigest from './IntroDigest'
 import HelpDemo from './HelpDemo'
 
-import useSalon, { cn } from '../../styles/articles_intro_tabs/help_tab'
+import useSalon, { cn } from '../../salon/articles_intro_tabs/help_tab'
 
 const HelpFeat: FC<TActive> = ({ active }) => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/KanbanTab/IntroDigest.tsx

@@ -2,7 +2,7 @@ import { COLOR_NAME } from '~/const/colors'
 
 import FeatItem from '../FeatItem'
 
-import useSalon, {} from '../../styles/articles_intro_tabs/kanban_tab/intro_digest'
+import useSalon, {} from '../../salon/articles_intro_tabs/kanban_tab/intro_digest'
 
 const color = COLOR_NAME.BLUE
 

src/app/Landing/ArticlesIntroTabs/KanbanTab/KanbanDemo/Banner.tsx

@@ -6,7 +6,7 @@ import GtdWipSVG from '~/icons/GtdWip'
 import GtdDoneSVG from '~/icons/GtdDone'
 import GtdTodoSVG from '~/icons/GtdTodo'
 
-import useSalon, { cn } from '../../../styles/articles_intro_tabs/kanban_tab/banner'
+import useSalon, { cn } from '../../../salon/articles_intro_tabs/kanban_tab/banner'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/KanbanTab/KanbanDemo/KanbanItem.tsx

@@ -5,9 +5,7 @@ import type { TArticleCat } from '~/spec'
 import UpvoteSVG from '~/icons/Upvote'
 import ArticleCatState from '~/widgets/ArticleCatState'
 
-import useSalon, {
-  cn,
-} from '../../../styles/articles_intro_tabs/kanban_tab/kanban_demo/kanban_item'
+import useSalon, { cn } from '../../../salon/articles_intro_tabs/kanban_tab/kanban_demo/kanban_item'
 
 type TProps = {
   count?: number

src/app/Landing/ArticlesIntroTabs/KanbanTab/KanbanDemo/index.tsx

@@ -3,7 +3,7 @@ import { ARTICLE_CAT } from '~/const/gtd'
 import Banner from './Banner'
 import KanbanItem from './KanbanItem'
 
-import useSalon, { cn } from '../../../styles/articles_intro_tabs/kanban_tab/kanban_demo'
+import useSalon, { cn } from '../../../salon/articles_intro_tabs/kanban_tab/kanban_demo'
 
 export default () => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/KanbanTab/index.tsx

@@ -5,7 +5,7 @@ import type { TActive } from '~/spec'
 import IntroDigest from './IntroDigest'
 import KanbanDemo from './KanbanDemo'
 
-import useSalon, { cn } from '../../styles/articles_intro_tabs/kanban_tab'
+import useSalon, { cn } from '../../salon/articles_intro_tabs/kanban_tab'
 
 const KanbanFeat: FC<TActive> = ({ active }) => {
   const s = useSalon()

src/app/Landing/ArticlesIntroTabs/PreviewBars.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import type { TThread } from '~/spec'
 import { THREAD } from '~/const/thread'
 
-import useSalon, { cn } from '../styles/articles_intro_tabs/preview_bars'
+import useSalon, { cn } from '../salon/articles_intro_tabs/preview_bars'
 
 type TProps = {
   tab: TThread

src/app/Landing/ArticlesIntroTabs/Tabs.tsx

@@ -10,7 +10,7 @@ import IntroSpinSVG from '~/icons/IntroSpin'
 
 import PreviewBars from './PreviewBars'
 
-import useSalon, { cn, ICON } from '../styles/articles_intro_tabs/tabs'
+import useSalon, { cn, ICON } from '../salon/articles_intro_tabs/tabs'
 
 const TAB_ITEMS = [
   {

src/app/Landing/ArticlesIntroTabs/index.tsx

@@ -6,7 +6,7 @@ import { THREAD } from '~/const/thread'
 import Tabs from './Tabs'
 import Content from './Content'
 
-import useSalon from '../styles/articles_intro_tabs'
+import useSalon from '../salon/articles_intro_tabs'
 
 export default () => {
   const s = useSalon()

src/app/Landing/BatteryBento/BundleSize/Panel.tsx

@@ -7,7 +7,7 @@ import LoadingGapSVG from '~/icons/LoadingGap'
 
 import { PRODUCTS, MAX_SIZE } from './constant'
 
-import useSalon, { cn } from '../../styles/battery_bento/bundle_size/panel'
+import useSalon, { cn } from '../../salon/battery_bento/bundle_size/panel'
 
 type TProps = {
   hovering: boolean

src/app/Landing/BatteryBento/BundleSize/index.tsx

@@ -1,7 +1,7 @@
 import useHover from '~/hooks/useHover'
 
 import Panel from './Panel'
-import useSalon from '../../styles/battery_bento/bundle_size'
+import useSalon from '../../salon/battery_bento/bundle_size'
 
 export default () => {
   const s = useSalon()

src/app/Landing/BatteryBento/DarkMode/ArticleCard.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react'
 
 import UpvoteSVG from '~/icons/Upvote'
 
-import useSalon, { cn } from '../../styles/battery_bento/dark_mode/article_card'
+import useSalon, { cn } from '../../salon/battery_bento/dark_mode/article_card'
 
 type TProps = {
   hovering: boolean

src/app/Landing/BatteryBento/DarkMode/Panel.tsx

@@ -9,7 +9,7 @@ import SunSVG from '~/icons/Sun'
 import SunSolidSVG from '~/icons/SunSolid'
 import MoonSolidSVG from '~/icons/MoonSolid'
 
-import useSalon, { cn } from '../../styles/battery_bento/dark_mode/panel'
+import useSalon, { cn } from '../../salon/battery_bento/dark_mode/panel'
 
 type TProps = {
   hovering: boolean

src/app/Landing/BatteryBento/DarkMode/index.tsx

@@ -5,7 +5,7 @@ import useTheme from '~/hooks/useTheme'
 
 import Panel from './Panel'
 
-import useSalon, { cn } from '../../styles/battery_bento/dark_mode'
+import useSalon, { cn } from '../../salon/battery_bento/dark_mode'
 
 export default () => {
   const s = useSalon()

src/app/Landing/BatteryBento/Design/Panel.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react'
 
 import CursorSVG from '~/icons/Cursor'
 
-import useSalon, { cn } from '../../styles/battery_bento/design/panel'
+import useSalon, { cn } from '../../salon/battery_bento/design/panel'
 
 type TProps = {
   hovering: boolean

src/app/Landing/BatteryBento/Design/index.tsx

@@ -1,7 +1,7 @@
 import useHover from '~/hooks/useHover'
 
 import Panel from './Panel'
-import useSalon from '../../styles/battery_bento/design'
+import useSalon from '../../salon/battery_bento/design'
 
 export default () => {
   const s = useSalon()

src/app/Landing/BatteryBento/GridBlocks/Slogan.tsx

@@ -1,7 +1,7 @@
 import PlugSVG from '~/icons/Plug'
 import PointSVG from '~/icons/PointDuo'
 
-import useSalon from '../../styles/battery_bento/grid_blocks/slogan'
+import useSalon from '../../salon/battery_bento/grid_blocks/slogan'
 
 export default () => {
   const s = useSalon()

src/app/Landing/BatteryBento/GridBlocks/index.tsx

@@ -20,7 +20,7 @@ import SqaureSrewSVG from '~/icons/SqaureSrewDuo'
 import { SHINE_DOTS } from './constant'
 import Slogan from './Slogan'
 
-import useSalon, { cn } from '../../styles/battery_bento/grid_blocks'
+import useSalon, { cn } from '../../salon/battery_bento/grid_blocks'
 
 const GridBlocks: FC = () => {
   const s = useSalon()