From d62f9348c6ac1969fc4c84962d51fd3a8d4c9a6b Mon Sep 17 00:00:00 2001
From: wenzheng <59534171+liaozheng-yi@users.noreply.github.com>
Date: Wed, 29 Sep 2021 00:09:48 +0800
Subject: [PATCH] feat(layout-sider): add ToggleButtonTextColor (#1250)

* feat(layout-sider): add siderToggleButtonTextColor

* docs(changelog): fulfill

* feat(layout-sider): improve toggleButtonIconColor
---
 CHANGELOG.en-US.md                         | 1 +
 CHANGELOG.zh-CN.md                         | 1 +
 src/layout/src/LayoutSider.tsx             | 2 ++
 src/layout/src/styles/layout-sider.cssr.ts | 2 +-
 src/layout/styles/dark.ts                  | 2 ++
 src/layout/styles/light.ts                 | 2 ++
 6 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 658c14690..851f7ff6d 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -4,6 +4,7 @@
 
 ### Fixes
 
+- Fix `n-layout-sider`'s `arrow-circle`'s icon style.
 - Fix `n-upload`'s `show-preview-button` prop not working，closes [#1238](https://github.com/TuSimple/naive-ui/issues/1238).
 
 ## 2.19.3 (2021-09-28)
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 68189596f..8d97f4867 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -4,6 +4,7 @@
 
 ### Fixes
 
+- 修复 `n-layout-sider` 中 `arrow-circle` 的icon样式
 - 修复 `n-upload` 的 `show-preview-button` 属性失效，关闭 [#1238](https://github.com/TuSimple/naive-ui/issues/1238)
 
 ## 2.19.3 (2021-09-28)
diff --git a/src/layout/src/LayoutSider.tsx b/src/layout/src/LayoutSider.tsx
index 5158d9a52..45108c0d5 100644
--- a/src/layout/src/LayoutSider.tsx
+++ b/src/layout/src/LayoutSider.tsx
@@ -221,11 +221,13 @@ export default defineComponent({
           vars['--color'] = self.siderColorInverted
           vars['--text-color'] = self.textColorInverted
           vars['--border-color'] = self.siderBorderColorInverted
+          vars['--toggle-button-icon-color'] = self.siderToggleButtonIconColorInverted
           vars.__invertScrollbar = self.__invertScrollbar
         } else {
           vars['--color'] = self.siderColor
           vars['--text-color'] = self.textColor
           vars['--border-color'] = self.siderBorderColor
+          vars['--toggle-button-icon-color'] = self.siderToggleButtonIconColor
         }
         return vars
       }),
diff --git a/src/layout/src/styles/layout-sider.cssr.ts b/src/layout/src/styles/layout-sider.cssr.ts
index c1992124b..b34e1db4c 100644
--- a/src/layout/src/styles/layout-sider.cssr.ts
+++ b/src/layout/src/styles/layout-sider.cssr.ts
@@ -106,7 +106,7 @@ export default cB('layout-sider', `
     align-items: center;
     justify-content: center;
     font-size: 18px;
-    color: var(--text-color);
+    color: var(--toggle-button-icon-color);
     border: var(--toggle-button-border);
     background-color: var(--toggle-button-color);
     box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .06);
diff --git a/src/layout/styles/dark.ts b/src/layout/styles/dark.ts
index 5f1449eb8..4665b677d 100644
--- a/src/layout/styles/dark.ts
+++ b/src/layout/styles/dark.ts
@@ -38,6 +38,8 @@ const layoutDark: LayoutTheme = {
       siderColorInverted: cardColor,
       siderToggleButtonBorder: '1px solid transparent',
       siderToggleButtonColor: popoverColor,
+      siderToggleButtonIconColor: textColor2,
+      siderToggleButtonIconColorInverted: textColor2,
       siderToggleBarColor: composite(bodyColor, scrollbarColor),
       siderToggleBarColorHover: composite(bodyColor, scrollbarColorHover),
       __invertScrollbar: 'false'
diff --git a/src/layout/styles/light.ts b/src/layout/styles/light.ts
index 9d5473301..5c2d4bf86 100644
--- a/src/layout/styles/light.ts
+++ b/src/layout/styles/light.ts
@@ -35,6 +35,8 @@ export const self = (vars: ThemeCommonVars) => {
     siderColorInverted: invertedColor,
     siderToggleButtonBorder: `1px solid ${dividerColor}`,
     siderToggleButtonColor: baseColor,
+    siderToggleButtonIconColor: textColor2,
+    siderToggleButtonIconColorInverted: invertedColor,
     siderToggleBarColor: composite(bodyColor, scrollbarColor),
     siderToggleBarColorHover: composite(bodyColor, scrollbarColorHover),
     // hack for inverted background