@redocly/theme 0.19.6 → 0.19.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/components/Button/Button.js +2 -1
  2. package/lib/components/Button/styledVariables.js +10 -1
  3. package/lib/components/Menu/MobileMenu.d.ts +1 -1
  4. package/lib/components/Menu/MobileMenu.js +2 -2
  5. package/lib/components/Menu/types.d.ts +1 -0
  6. package/lib/components/Navbar/Navbar.js +1 -1
  7. package/package.json +1 -1
  8. package/src/components/Button/Button.tsx +2 -1
  9. package/src/components/Button/styledVariables.ts +10 -1
  10. package/src/components/Menu/MobileMenu.tsx +2 -2
  11. package/src/components/Menu/types.ts +1 -0
  12. package/src/components/Navbar/Navbar.tsx +1 -1
package/lib/components/Button/Button.js CHANGED
@@ -51,7 +51,7 @@ const getSize = (size = 'default') => (0, styled_components_1.css) `
51
51
  min-width: var(--button-${size}-min-width);
52
52
  `;
53
53
  exports.baseButtonStyles = (0, styled_components_1.css) `
54
- display: flex;
54
+ display: inline-flex;
55
55
  align-items: center;
56
56
  justify-content: center;
57
57
  gap: var(--spacing-xs);
@@ -74,6 +74,7 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
74
74
  &:hover {
75
75
  box-shadow: var(--button-hover-box-shadow);
76
76
  background-color: var(--button-hover-background-color);
77
+ color: var(--button-hover-color, var(--button-color));
77
78
  border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
78
79
  }
79
80
 
package/lib/components/Button/styledVariables.js CHANGED
@@ -52,12 +52,16 @@ exports.button = (0, styled_components_1.css) `
52
52
  --button-color: var(--text-primary); // @presenter Color
53
53
  --button-background-color: var(--bg-overlay); // @presenter Color
54
54
  --button-border-color: var(--bg-overlay);
55
+ --button-outlined-color: var(--text-primary);
56
+
55
57
 
56
58
  --button-hover-background-color: var(--bg-overlay); // @presenter Color
57
59
  --button-hover-border-color: var(--border-primary); // @presenter Color
60
+ --button-outlined-hover-color: var(--text-primary); // @presenter Color
58
61
 
59
62
  --button-active-background-color: var(--bg-overlay); // @presenter Color
60
63
  --button-active-border-color: var(--button-color); // @presenter Color
64
+ --button-outlined-active-color: var(--bg-overlay); // @presenter Color
61
65
 
62
66
  --button-disabled-color: var(--text-placeholder); // @presenter Color
63
67
  --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -72,12 +76,15 @@ exports.button = (0, styled_components_1.css) `
72
76
  --button-background-color: var(--color-primary); // @presenter Color
73
77
  --button-border-color: var(--color-primary); // @presenter Color
74
78
  --button-border: 1px solid var(--button-border-color);
79
+ --button-outlined-color: var(--color-primary);
75
80
 
76
81
  --button-hover-background-color: var(--color-primary-hover); // @presenter Color
77
82
  --button-hover-border-color: var(--color-primary-hover); // @presenter Color
83
+ --button-outlined-hover-color: var(--color-primary-hover);
78
84
 
79
85
  --button-active-background-color: var(--color-primary-active); // @presenter Color
80
86
  --button-active-border-color: var(--color-primary-active); // @presenter Color
87
+ --button-outlined-active-color: var(--color-primary-active); // @presenter Color
81
88
 
82
89
  --button-disabled-color: var(--text-placeholder); // @presenter Color
83
90
  --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -88,7 +95,9 @@ exports.button = (0, styled_components_1.css) `
88
95
  * @tokens Button outline
89
96
  */
90
97
  .button-outlined {
91
- --button-background-color: transparent; // @presenter Color
98
+ background-color: transparent;
99
+ --button-color: var(--button-outlined-color); // @presenter Color
100
+ --button-hover-color: var(--button-outlined-hover-color); // @presenter Color
92
101
  }
93
102
 
94
103
  /**
package/lib/components/Menu/MobileMenu.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import type { MobileMenuProps } from '../../components/Menu/types';
3
- export declare function MobileMenu({ className }: MobileMenuProps): JSX.Element | null;
3
+ export declare function MobileMenu({ className, hideUserProfile }: MobileMenuProps): JSX.Element | null;
4
4
  export declare const ControlButton: import("styled-components").StyledComponent<"li", any, {}, never>;
package/lib/components/Menu/MobileMenu.js CHANGED
@@ -38,7 +38,7 @@ const icons_1 = require("../../icons");
38
38
  const Product_1 = require("../../components/Product/Product");
39
39
  const use_mobile_menu_levels_1 = require("../../components/Menu/hooks/use-mobile-menu-levels");
40
40
  const use_mobile_menu_items_1 = require("../../components/Menu/hooks/use-mobile-menu-items");
41
- function MobileMenu({ className }) {
41
+ function MobileMenu({ className, hideUserProfile }) {
42
42
  var _a, _b, _c;
43
43
  const location = (0, react_router_dom_1.useLocation)();
44
44
  const product = (0, hooks_1.useCurrentProduct)();
@@ -65,7 +65,7 @@ function MobileMenu({ className }) {
65
65
  react_1.default.createElement(Product_1.Product, { product: product }))) : null,
66
66
  react_1.default.createElement(MenuWrapper, null,
67
67
  react_1.default.createElement(index_1.Menu, { items: menuItems, isMobile: true }))),
68
- react_1.default.createElement(MobileUserProfile_1.MobileUserProfile, null)));
68
+ hideUserProfile ? null : react_1.default.createElement(MobileUserProfile_1.MobileUserProfile, null)));
69
69
  }
70
70
  exports.MobileMenu = MobileMenu;
71
71
  const MobileMenuWrapper = styled_components_1.default.div `
package/lib/components/Menu/types.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export interface MobileMenuProps {
2
2
  className?: string;
3
+ hideUserProfile?: boolean;
3
4
  }
package/lib/components/Navbar/Navbar.js CHANGED
@@ -81,7 +81,7 @@ function NavbarPresentational(props) {
81
81
  const themeConfig = (0, useThemeConfig_1.useThemeConfig)();
82
82
  const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
83
83
  return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar", className: className },
84
- isOpen && react_1.default.createElement(MobileMenu_1.MobileMenu, null),
84
+ isOpen && react_1.default.createElement(MobileMenu_1.MobileMenu, { hideUserProfile: !!hideUserProfile }),
85
85
  react_1.default.createElement(exports.NavbarRow, null,
86
86
  react_1.default.createElement(BurgerButton_1.BurgerButton, { onClick: isOpen ? closeMobileMenu : openMobileMenu, isOpen: isOpen }),
87
87
  react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.19.6",
3
+ "version": "0.19.7",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/Button/Button.tsx CHANGED
@@ -47,7 +47,7 @@ const getSize = (size: ButtonSize = 'default'): FlattenSimpleInterpolation => cs
47
47
  `;
48
48
 
49
49
  export const baseButtonStyles = css`
50
- display: flex;
50
+ display: inline-flex;
51
51
  align-items: center;
52
52
  justify-content: center;
53
53
  gap: var(--spacing-xs);
@@ -70,6 +70,7 @@ export const baseButtonStyles = css`
70
70
  &:hover {
71
71
  box-shadow: var(--button-hover-box-shadow);
72
72
  background-color: var(--button-hover-background-color);
73
+ color: var(--button-hover-color, var(--button-color));
73
74
  border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
74
75
  }
75
76
 
package/src/components/Button/styledVariables.ts CHANGED
@@ -50,12 +50,16 @@ export const button = css`
50
50
  --button-color: var(--text-primary); // @presenter Color
51
51
  --button-background-color: var(--bg-overlay); // @presenter Color
52
52
  --button-border-color: var(--bg-overlay);
53
+ --button-outlined-color: var(--text-primary);
54
+
53
55
 
54
56
  --button-hover-background-color: var(--bg-overlay); // @presenter Color
55
57
  --button-hover-border-color: var(--border-primary); // @presenter Color
58
+ --button-outlined-hover-color: var(--text-primary); // @presenter Color
56
59
 
57
60
  --button-active-background-color: var(--bg-overlay); // @presenter Color
58
61
  --button-active-border-color: var(--button-color); // @presenter Color
62
+ --button-outlined-active-color: var(--bg-overlay); // @presenter Color
59
63
 
60
64
  --button-disabled-color: var(--text-placeholder); // @presenter Color
61
65
  --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -70,12 +74,15 @@ export const button = css`
70
74
  --button-background-color: var(--color-primary); // @presenter Color
71
75
  --button-border-color: var(--color-primary); // @presenter Color
72
76
  --button-border: 1px solid var(--button-border-color);
77
+ --button-outlined-color: var(--color-primary);
73
78
 
74
79
  --button-hover-background-color: var(--color-primary-hover); // @presenter Color
75
80
  --button-hover-border-color: var(--color-primary-hover); // @presenter Color
81
+ --button-outlined-hover-color: var(--color-primary-hover);
76
82
 
77
83
  --button-active-background-color: var(--color-primary-active); // @presenter Color
78
84
  --button-active-border-color: var(--color-primary-active); // @presenter Color
85
+ --button-outlined-active-color: var(--color-primary-active); // @presenter Color
79
86
 
80
87
  --button-disabled-color: var(--text-placeholder); // @presenter Color
81
88
  --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -86,7 +93,9 @@ export const button = css`
86
93
  * @tokens Button outline
87
94
  */
88
95
  .button-outlined {
89
- --button-background-color: transparent; // @presenter Color
96
+ background-color: transparent;
97
+ --button-color: var(--button-outlined-color); // @presenter Color
98
+ --button-hover-color: var(--button-outlined-hover-color); // @presenter Color
90
99
  }
91
100
 
92
101
  /**
package/src/components/Menu/MobileMenu.tsx CHANGED
@@ -12,7 +12,7 @@ import { Product } from '@theme/components/Product/Product';
12
12
  import { useMobileMenuLevels } from '@theme/components/Menu/hooks/use-mobile-menu-levels';
13
13
  import { useMobileMenuItems } from '@theme/components/Menu/hooks/use-mobile-menu-items';
14
14
 
15
- export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
15
+ export function MobileMenu({ className, hideUserProfile }: MobileMenuProps): JSX.Element | null {
16
16
  const location = useLocation();
17
17
  const product = useCurrentProduct();
18
18
 
@@ -66,7 +66,7 @@ export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
66
66
  <Menu items={menuItems} isMobile />
67
67
  </MenuWrapper>
68
68
  </ScrollableArea>
69
- <MobileUserProfile />
69
+ {hideUserProfile ? null : <MobileUserProfile />}
70
70
  </MobileMenuWrapper>
71
71
  );
72
72
  }
package/src/components/Menu/types.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export interface MobileMenuProps {
2
2
  className?: string;
3
+ hideUserProfile?: boolean;
3
4
  }
package/src/components/Navbar/Navbar.tsx CHANGED
@@ -89,7 +89,7 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
89
89
 
90
90
  return (
91
91
  <NavbarContainer data-component-name="Navbar/Navbar" className={className}>
92
- {isOpen && <MobileMenu />}
92
+ {isOpen && <MobileMenu hideUserProfile={!!hideUserProfile} />}
93
93
  <NavbarRow>
94
94
  <BurgerButton onClick={isOpen ? closeMobileMenu : openMobileMenu} isOpen={isOpen} />
95
95
  <NavbarLogo logo={logo} />