feat(layout-sider): add ToggleButtonTextColor (#1250)

* feat(layout-sider): add siderToggleButtonTextColor

* docs(changelog): fulfill

* feat(layout-sider): improve toggleButtonIconColor

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)

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)

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
       }),

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);

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'

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