@redocly/theme 0.18.3 → 0.18.4-patch.1

package/src/components/Select/Select.tsx

@@ -1,32 +1,46 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { ArrowIcon } from '@theme/icons';
 import { useOutsideClick } from '@theme/hooks';
 
-export interface SelectProps {
-  selected: React.ReactNode | string;
-  options: React.ReactNode[] | string[];
+export interface SelectProps<T = any> {
+  value: T;
+  options: {
+    element: React.ReactNode | string;
+    value: T;
+    label?: string;
+  }[];
   dataAttributes?: Record<string, string>;
   className?: string;
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
-  onChange?: (value: React.ReactNode | string) => void;
+  onChange?: (value: any) => void;
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  icon?: React.ReactNode;
+  onlyIcon?: boolean;
+  placeholder?: string;
 }
 
-export const Select = ({
+export function Select<T>({
   className,
-  selected,
+  value,
   options,
   dataAttributes,
-  withArrow,
+  withArrow = true,
   triggerEvent = 'click',
   onChange,
-}: SelectProps) => {
-  const selectRef = useRef<HTMLDivElement | null>(null);
+  placement,
+  alignment,
+  icon,
+  onlyIcon,
+  placeholder,
+}: SelectProps<T>) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [_selected, setSelected] = useState<React.ReactNode | string>(selected);
+  // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
 
   const handleOpen = () => {
     setIsOpen(true);
@@ -40,45 +54,56 @@ export const Select = ({
     setIsOpen(!isOpen);
   };
 
-  const handleSelect = (value: React.ReactNode | string) => {
-    setSelected(value);
+  const handleSelect = (value: T) => {
+    // setSelectedIdx(options.findIndex(o => o.value === value));
     setIsOpen(false);
     onChange?.(value);
   };
 
-  useOutsideClick(selectRef, handleClose);
+  useOutsideClick(containerRef, handleClose);
 
-  useEffect(() => {
-    handleSelect(selected);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selected]);
+  // useEffect(() => {
+  //   handleSelect(selected);
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [selected]);
+
+  const selectedOption = options.find((option) => option.value === value);
 
   return (
     <SelectContainer
       {...dataAttributes}
       data-testid="select"
       className={className}
-      ref={selectRef}
+      ref={containerRef}
       onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
       onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        <SelectInputValue withArrow={withArrow}>{_selected}</SelectInputValue>
+        {!onlyIcon && (
+          <SelectInputValue>
+            {selectedOption?.label || selectedOption?.element || placeholder}
+          </SelectInputValue>
+        )}
+        {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
       {isOpen && (
-        <SelectList>
+        <SelectList placement={placement} alignment={alignment}>
           {options.map((option, index) => (
-            <SelectListItem key={index} onClick={() => handleSelect(option)}>
-              {option}
+            <SelectListItem
+              key={index}
+              onClick={() => handleSelect(option.value)}
+              selected={option.value === value}
+            >
+              {typeof option.element === 'string' ? <div>{option.element}</div> : option.element}
             </SelectListItem>
           ))}
         </SelectList>
       )}
     </SelectContainer>
   );
-};
+}
 
 export const SelectContainer = styled.div`
   position: relative;
@@ -102,17 +127,20 @@ export const SelectInput = styled.div`
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
+  gap: 8px;
 `;
 
-export const SelectInputValue = styled.div<{ withArrow?: boolean }>`
+export const SelectInputValue = styled.div`
   pointer-events: none;
-  ${({ withArrow }) => (withArrow ? 'margin-right: 8px;' : '')}
+  min-width: 0;
 `;
 
-export const SelectList = styled.ul`
+export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
+  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
   max-width: var(--select-list-max-width);
@@ -127,7 +155,7 @@ export const SelectList = styled.ul`
   z-index: 1;
 `;
 
-export const SelectListItem = styled.li`
+export const SelectListItem = styled.li<{ selected: boolean }>`
   border-radius: var(--select-list-item-border-radius);
 
   & > * {
@@ -135,6 +163,12 @@ export const SelectListItem = styled.li`
   }
 
   :hover {
-    background-color: var(--select-list-item-active-background-color);
+    background-color: var(--select-list-item-hover-background-color);
   }
+
+  ${({ selected }) =>
+    selected &&
+    `
+    &, &:hover { background-color: var(--select-list-item-active-background-color); }
+    `}
 `;

package/src/components/Select/index.ts

@@ -1 +1,2 @@
 export * from '@theme/components/Select/Select';
+export * from '@theme/components/Select/styledVariables';

package/src/components/Select/styledVariables.ts

@@ -0,0 +1,31 @@
+import { css } from "styled-components";
+
+export const select = css`
+  /**
+    * @tokens Select
+    * */
+  --select-font-size: var(--font-size-base); // @presenter FontSize
+  --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-text-color: var(--text-secondary); // @presenter Color
+  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-input-padding-horizontal: 16px;  // @presenter Spacing
+  --select-input-padding-vertical: 6px;  // @presenter Spacing
+  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --select-list-min-width: 100px;
+  --select-list-max-width: 300px;
+  --select-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --select-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --select-list-background-color: var(--background-color); // @presenter Color
+  --select-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
+  --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-active-background-color: var(--bg-overlay); // @presenter Color
+  --select-list-item-hover-background-color: var(--bg-raised); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/Separator/Separator.tsx

@@ -5,16 +5,30 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
+import { useThemeConfig } from '@theme/hooks';
 
 export function Separator({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
+  const { sidebar } = useThemeConfig();
+
+  const separatorLine = item.separatorLine || sidebar?.separatorLine;
+  const linePosition = item.linePosition || sidebar?.linePosition || 'bottom';
 
   return (
-    <Wrapper data-component-name="Sidebar/Separator" className={className}>
+    <Wrapper
+      data-component-name="Sidebar/Separator"
+      className={className}
+      linePosition={linePosition}
+      withLabel={!!item.label}
+    >
       <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
-      {item.separatorLine ? <SeparatorLine /> : null}
+      {separatorLine ? <SeparatorLine /> : null}
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div<{ linePosition: 'top' | 'bottom'; withLabel?: boolean }>`
+  display: flex;
+  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
+  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
+`;

package/src/components/Separator/SeparatorItem.tsx

@@ -9,23 +9,20 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
   }),
 )`
   cursor: default;
-  font-weight: var(--font-weight-bold);
-  color: var(--sidebar-separator-item-color);
-  font-family: var(--sidebar-item-separator-font-family);
+  font-weight: var(--sidebar-item-separator-font-weight);
+  color: var(--sidebar-item-separator-text-color);
   font-size: var(--sidebar-item-separator-font-size);
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
+  border-radius: 0;
+  padding: var(--sidebar-item-separator-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
   }
 
-  *:not(:first-child) > & {
-    margin-top: var(--sidebar-item-separator-offset);
-  }
-
   :hover {
-    color: inherit;
-    background-color: inherit;
+    color: var(--sidebar-item-separator-text-color);
+    background: none;
   }
 `;

package/src/components/Separator/SeparatorLine.tsx

@@ -4,7 +4,11 @@ export const SeparatorLine = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/SeparatorLine',
   className,
 }))`
-  height: 1px;
-  background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
+  height: var(--sidebar-item-separator-border-width);
+  background-color: var(--sidebar-item-separator-border-color);
+  margin: var(--mobile-sidebar-item-separator-line-offset);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin: var(--sidebar-item-separator-line-offset);
+  }
 `;

package/src/components/Sidebar/ApiCallItem.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { OperationBadge } from '@theme/components/OperationBadge';
+import { Tag } from '@theme/components/Tag';
 import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
@@ -12,10 +12,10 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
         <Label active={item.active}>
-          <Badge type={item.httpVerb || ''}>
-            {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
-          </Badge>
           {item.label}
+          <HttpTag color={item.httpVerb || ''}>
+            {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
+          </HttpTag>
         </Label>
       </MenuLinkItem>
 
@@ -25,6 +25,8 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
 }
 
 const Label = styled(MenuItemLabel)`
+  display: flex;
+  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -34,14 +36,16 @@ const Label = styled(MenuItemLabel)`
 
 const Wrapper = styled.div``;
 
-export const Badge = styled(OperationBadge)`
+export const HttpTag = styled(Tag)`
   flex-shrink: 0;
-  margin-top: 0;
-  width: 36px;
-  height: 14px;
-  font-size: var(--sidebar-item-badge-http-font-size);
-  font-family: var(--sidebar-item-badge-http-font-family);
-  font-weight: var(--sidebar-item-badge-http-font-weight);
-  border-radius: var(--sidebar-item-badge-http-border-radius);
-  color: var(--sidebar-item-badge-http-text-color);
+  margin: var(--sidebar-item-http-tag-margin);
+  text-transform: uppercase;
+
+  width: var(--sidebar-item-http-tag-width);
+  height: var(--sidebar-item-http-tag-height);
+
+  font-size: var(--sidebar-item-http-tag-font-size);
+  font-family: var(--sidebar-item-http-tag-font-family);
+  font-weight: var(--sidebar-item-http-tag-font-weight);
+  border-radius: var(--sidebar-item-http-tag-border-radius);
 `;

package/src/components/Sidebar/FooterWrapper.tsx

@@ -1,15 +1,14 @@
 import styled from 'styled-components';
 export const FooterWrapper = styled.div<{ collapsed?: boolean }>`
+  padding: var(--sidebar-footer-padding-vertical) var(--sidebar-footer-padding-horizontal);
+
   ${({ collapsed }) =>
     collapsed &&
     `
         position: sticky;
         bottom: 0;
+        padding: 0;
     `}
-  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
-  padding-top: var(--sidebar-spacing-unit);
-  padding-right: var(--sidebar-spacing-unit);
-  border-top: solid 1px var(--border-color);
 
   button {
     margin: 0;

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -4,7 +4,7 @@ export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/HeaderWrapper',
   className,
 }))`
-  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-spacing-unit);
-  border-bottom: solid 1px var(--border-color);
+  margin: var(--sidebar-offset-top) 0 0 0;
+  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
+  border-bottom: solid 1px var(--border-primary);
 `;

package/src/components/Sidebar/VersionPicker.tsx

@@ -9,6 +9,11 @@ export const VersionPicker = styled(Select).attrs(() => ({
     'data-component-name': 'Sidebar/VersionPicker',
   },
 }))<SelectProps>`
+  --select-list-item-active-background-color: var(
+    --version-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
+
   font-size: var(--version-picker-font-size);
   font-weight: var(--version-picker-font-weight);
   border-radius: var(--version-picker-border-radius);
@@ -25,6 +30,7 @@ export const VersionPicker = styled(Select).attrs(() => ({
 
   ${SelectList} {
     right: 0;
+    width: 100%;
     min-width: var(--version-picker-list-min-width);
     max-width: var(--version-picker-list-max-width);
     padding: var(--version-picker-list-padding);
@@ -40,9 +46,5 @@ export const VersionPicker = styled(Select).attrs(() => ({
       padding: var(--version-picker-list-item-vertical-padding)
         var(--version-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--version-picker-list-item-active-background-color);
-    }
   }
 `;

package/src/components/Sidebar/index.ts

@@ -11,3 +11,4 @@ export * from '@theme/components/Sidebar/FooterWrapper';
 export * from '@theme/components/Sidebar/HeaderWrapper';
 export * from '@theme/components/Sidebar/SidebarItemIcon';
 export * from '@theme/components/Sidebar/VersionPicker';
+export * from '@theme/components/Sidebar/styledVariables';

package/src/components/Sidebar/styledVariables.ts

@@ -0,0 +1,214 @@
+import { css } from 'styled-components';
+
+export const sidebar = css`
+  /* === Sidebar === */
+
+  /**
+    * @tokens Sidebar logo
+    */
+
+  --sidebar-logo-max-height: 285px; // @presenter Spacing
+  --sidebar-logo-max-width: 285px; // @presenter Spacing
+  --sidebar-logo-padding: 2px; // @presenter Spacing
+
+  /**
+    * @tokens Sidebar typography
+    */
+  --sidebar-word-break: inherit; // @presenter WordBreak
+
+  /**
+    * @tokens Sidebar colors
+    * @presenter Color
+    */
+  --sidebar-background-color: var(--bg-base); // @presenter Color
+  --sidebar-border-color: var(--border-secondary); // @presenter Color
+
+  /**
+    * @tokens Sidebar spacing
+    * @presenter Spacing
+    */
+  --sidebar-spacing-unit: var(--spacing-base); // @presenter Spacing
+  --sidebar-width: 285px; // @presenter Spacing
+
+  --sidebar-offset-top: var(--sidebar-spacing-unit); // @presenter Spacing
+  --sidebar-offset-left: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-header-padding-bottom: var(--sidebar-spacing-unit); // @presenter Spacing
+
+  --sidebar-chevron-size: var(--spacing-xs); // @presenter Spacing
+
+  /* === Sidebar Item === */
+
+  /**
+    * @tokens Sidebar item typography
+    */
+  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+    * @tokens Sidebar item colors
+    *  @presenter Color
+    */
+  --sidebar-item-text-color: var(--text-secondary); // @presenter Color
+  --sidebar-item-background-color: transparent; // @presenter Color
+
+  --sidebar-item-active-color: var(--text-primary); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
+
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-hover-color: var(--text-primary); // @presenter Color
+
+  /**
+    * @tokens Sidebar item spacing
+    * @presenter Spacing
+    */
+
+  --sidebar-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
+  --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+
+  /**
+    * @tokens Sidebar item border
+    */
+  --sidebar-item-border-radius: 6px; // @presenter BorderRadius
+
+  /**
+    * @tokens Sidebar item icon
+    */
+  --sidebar-item-icon-size: var(--spacing-xl);
+  --sidebar-item-icon-border-radius: 100%;
+
+  /**
+    * @tokens Sidebar item sublabel
+    */
+  --sidebar-item-sublabel-font-family: inherit; // sublabel is for drilldown only but I would like to support it in general
+  --sidebar-item-sublabel-font-size: var(--font-size-base); // @presenter FontSize
+  --sidebar-item-sublabel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --sidebar-item-sublabel-text-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item drilldown
+    */
+
+  --sidebar-item-drilldown-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-drilldown-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-drilldown-transform: inherit; // @presenter TextTransform
+  --sidebar-item-drilldown-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-drilldown-background-color: var(--sidebar-background-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item group
+    */
+  --sidebar-item-group-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-group-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-text-group-transform: inherit;
+  --sidebar-item-group-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+
+  // we need a theme config for chevron-location: left (default), right-compact, right, none
+  // we need another theme config for chevron-style: up-down, down-up, right-down, down-right
+
+  --sidebar-group-item-chevron-size: var(--spacing-xs); // @presenter Spacing
+  --sidebar-group-item-chevron-color: var(--sidebar-item-text-color); // @presenter Color
+
+  /**
+    * @tokens Sidebar item separator
+    */
+  --sidebar-item-separator-font-family: var(--sidebar-item-font-family);
+  --sidebar-item-separator-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-item-separator-font-weight: var(--sidebar-item-font-weight); // @presenter FontWeight
+  --sidebar-item-separator-text-transform: inherit; // @presenter TextTransform
+  --sidebar-item-separator-text-color: var(--text-placeholder); // @presenter Color
+
+  --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
+  --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-separator-border-width: 1px; // @presenter Spacing
+  --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
+
+  /**
+   * @tokens Sidebar item http tag
+   */
+
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
+  --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
+
+  /**
+    * @tokens Sidebar back button
+    */
+  --sidebar-back-button-font-family: var(--sidebar-item-font-family);
+  --sidebar-back-button-font-size: var(--sidebar-item-font-size); // @presenter FontSize
+  --sidebar-back-button-transform: inherit; // @presenter TextTransform
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-background-color: transparent; // @presenter Color
+  --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color); // @presenter Color
+  --sidebar-back-button-hover-background-color: transparent; // @presenter Color
+  --sidebar-back-button-icon-color: var(--sidebar-item-text-color); // @presenter Color
+  --sidebar-back-button-margin: 0 0 var(--spacing-lg) 0; // @presenter Spacing
+  --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
+  --sidebar-back-button-icon: none;
+
+  /**
+  * @tokens Sidebar footer
+  */
+  --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
+  --sidebar-footer-padding-horizontal: var(--spacing-lg); // @presenter Spacing
+  --sidebar-collapse-button-background-color: var(--bg-overlay); // @presenter Color
+  --sidebar-collapse-button-icon-color: var(--text-primary); // @presenter Color
+  --sidebar-collapse-button-border-color: var(--border-primary); // @presenter Color
+  --sidebar-collapse-button-active-background-color: unset; // @presenter Color
+  --sidebar-collapse-button-active-border-color: 0; // @presenter Color
+
+  --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
+  --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+
+  // @tokens End
+`;
+
+export const versionPicker = css`
+  /**
+    * @tokens Version picker
+    * */
+
+  --version-picker-font-size: var(--font-size-base); // @presenter FontSize
+  --version-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --version-picker-text-color: var(--select-text-color); // @presenter Color
+  --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+  --version-picker-margin-vertical: 10px; // @presenter Spacing
+  --version-picker-margin-horizontal: 15px; // @presenter Spacing
+
+  --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --version-picker-input-border: 1px solid var(--border-primary); // @presenter Border
+  --version-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --version-picker-list-min-width: var(--select-list-min-width);
+  --version-picker-list-max-width: var(--select-list-max-width);
+  --version-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --version-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --version-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --version-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --version-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --version-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/Sidebar/types.ts

@@ -47,6 +47,7 @@ export interface NavItem {
   requiredPermission?: string;
   menuStyle?: MenuStyle;
   separatorLine?: boolean;
+  linePosition?: 'top' | 'bottom';
   version?: string;
   default?: boolean;
 }