fix(Dropdown): add 21 theme variables (#3310)

skbkontur · Nov 8, 2023 · 47b69ad · 47b69ad
1 parent 7be897e
commit 47b69ad
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 22 deletions.
diff --git a/packages/react-ui/components/Dropdown/getDropdownTheme.ts b/packages/react-ui/components/Dropdown/getDropdownTheme.ts
@@ -1,42 +1,41 @@
 import { ThemeFactory } from '../../lib/theming/ThemeFactory';
 import { Theme } from '../../lib/theming/Theme';
-import { isTheme2022 } from '../../lib/theming/ThemeHelpers';
 
 export const getDropdownTheme = (theme: Theme): Theme => {
   return ThemeFactory.create(
     {
-      selectDefaultBg: theme.btnDefaultBg,
+      selectDefaultBg: theme.dropdownDefaultBg,
       selectMenuOffsetY: theme.dropdownMenuOffsetY,
       selectBorderColorHover: theme.dropdownMenuHoverBorderColor,
       selectBorderColorTransition: theme.dropdownMenuBorderColorTransition,
 
-      selectBorderWidth: theme.btnBorderWidth,
-      selectOutlineWidth: theme.btnOutlineWidth,
+      selectBorderWidth: theme.dropdownBorderWidth,
+      selectOutlineWidth: theme.dropdownOutlineWidth,
 
-      selectLineHeightSmall: theme.btnLineHeightSmall,
-      selectFontSizeSmall: theme.btnFontSizeSmall,
-      selectPaddingXSmall: isTheme2022(theme) ? theme.btnPaddingXSmall : theme.selectPaddingXSmall,
-      selectPaddingYSmall: theme.btnPaddingYSmall,
-      selectIconSizeSmall: theme.btnIconSizeSmall,
+      selectLineHeightSmall: theme.dropdownLineHeightSmall,
+      selectFontSizeSmall: theme.dropdownFontSizeSmall,
+      selectPaddingXSmall: theme.dropdownPaddingXSmall,
+      selectPaddingYSmall: theme.dropdownPaddingYSmall,
+      selectIconSizeSmall: theme.dropdownIconSizeSmall,
       selectBorderRadiusSmall: theme.dropdownButtonBorderRadiusSmall,
 
-      selectLineHeightMedium: theme.btnLineHeightMedium,
-      selectFontSizeMedium: theme.btnFontSizeMedium,
-      selectPaddingXMedium: isTheme2022(theme) ? theme.btnPaddingXMedium : theme.selectPaddingXMedium,
-      selectPaddingYMedium: theme.btnPaddingYMedium,
-      selectIconSizeMedium: theme.btnIconSizeMedium,
+      selectLineHeightMedium: theme.dropdownLineHeightMedium,
+      selectFontSizeMedium: theme.dropdownFontSizeMedium,
+      selectPaddingXMedium: theme.dropdownPaddingXMedium,
+      selectPaddingYMedium: theme.dropdownPaddingYMedium,
+      selectIconSizeMedium: theme.dropdownIconSizeMedium,
       selectBorderRadiusMedium: theme.dropdownButtonBorderRadiusMedium,
 
-      selectLineHeightLarge: theme.btnLineHeightLarge,
-      selectFontSizeLarge: theme.btnFontSizeLarge,
-      selectPaddingXLarge: isTheme2022(theme) ? theme.btnPaddingXLarge : theme.selectPaddingXLarge,
-      selectPaddingYLarge: theme.btnPaddingYLarge,
-      selectIconSizeLarge: theme.btnIconSizeLarge,
+      selectLineHeightLarge: theme.dropdownLineHeightLarge,
+      selectFontSizeLarge: theme.dropdownFontSizeLarge,
+      selectPaddingXLarge: theme.dropdownPaddingXLarge,
+      selectPaddingYLarge: theme.dropdownPaddingYLarge,
+      selectIconSizeLarge: theme.dropdownIconSizeLarge,
       selectBorderRadiusLarge: theme.dropdownButtonBorderRadiusLarge,
 
-      selectBgDisabled: theme.btnDisabledBg,
-      selectBorderColorDisabled: theme.btnDisabledBorderColor,
-      selectTextColorDisabled: theme.btnDisabledTextColor,
+      selectBgDisabled: theme.dropdownBgDisabled,
+      selectBorderColorDisabled: theme.dropdownBorderColorDisabled,
+      selectTextColorDisabled: theme.dropdownTextColorDisabled,
     },
     theme,
   );

diff --git a/packages/react-ui/internal/themes/DefaultTheme.ts b/packages/react-ui/internal/themes/DefaultTheme.ts
@@ -1061,6 +1061,70 @@ export class DefaultTheme {
   public static dropdownButtonBorderRadiusSmall = '1px';
   public static dropdownButtonBorderRadiusMedium = '1px';
   public static dropdownButtonBorderRadiusLarge = '1px';
+
+  public static get dropdownDefaultBg() {
+    return this.btnDefaultBg;
+  }
+  public static get dropdownBorderWidth() {
+    return this.btnBorderWidth;
+  }
+  public static get dropdownOutlineWidth() {
+    return this.btnOutlineWidth;
+  }
+  public static get dropdownLineHeightSmall() {
+    return this.btnLineHeightSmall;
+  }
+  public static get dropdownFontSizeSmall() {
+    return this.btnFontSizeSmall;
+  }
+  public static get dropdownPaddingXSmall() {
+    return this.selectPaddingXSmall;
+  }
+  public static get dropdownPaddingYSmall() {
+    return this.btnPaddingYSmall;
+  }
+  public static get dropdownIconSizeSmall() {
+    return this.btnIconSizeSmall;
+  }
+  public static get dropdownLineHeightMedium() {
+    return this.btnLineHeightMedium;
+  }
+  public static get dropdownFontSizeMedium() {
+    return this.btnFontSizeMedium;
+  }
+  public static get dropdownPaddingXMedium() {
+    return this.selectPaddingXMedium;
+  }
+  public static get dropdownPaddingYMedium() {
+    return this.btnPaddingYMedium;
+  }
+  public static get dropdownIconSizeMedium() {
+    return this.btnIconSizeMedium;
+  }
+  public static get dropdownLineHeightLarge() {
+    return this.btnLineHeightLarge;
+  }
+  public static get dropdownFontSizeLarge() {
+    return this.btnFontSizeLarge;
+  }
+  public static get dropdownPaddingXLarge() {
+    return this.selectPaddingXLarge;
+  }
+  public static get dropdownPaddingYLarge() {
+    return this.btnPaddingYLarge;
+  }
+  public static get dropdownIconSizeLarge() {
+    return this.btnIconSizeLarge;
+  }
+  public static get dropdownBgDisabled() {
+    return this.btnDisabledBg;
+  }
+  public static get dropdownBorderColorDisabled() {
+    return this.btnDisabledBorderColor;
+  }
+  public static get dropdownTextColorDisabled() {
+    return this.btnDisabledTextColor;
+  }
   //#endregion
   //#region Menu
   public static get menuBgDefault() {

diff --git a/packages/react-ui/internal/themes/Theme2022.ts b/packages/react-ui/internal/themes/Theme2022.ts
@@ -123,6 +123,17 @@ export class Theme2022 extends (class {} as typeof DefaultThemeInternal) {
   public static dropdownButtonBorderRadiusSmall = '8px';
   public static dropdownButtonBorderRadiusMedium = '8px';
   public static dropdownButtonBorderRadiusLarge = '8px';
+  public static get dropdownPaddingXSmall() {
+    return this.btnPaddingXSmall;
+  }
+
+  public static get dropdownPaddingXMedium() {
+    return this.btnPaddingXMedium;
+  }
+
+  public static get dropdownPaddingXLarge() {
+    return this.btnPaddingXLarge;
+  }
 
   //#region Input
   public static inputIconColor = '#858585';