@redocly/theme 0.0.0-react18-20231120182601

package/src/components/Panel/PanelComponent.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
+
+import { ShelfIcon } from '@theme/icons';
+import { PanelBody } from '@theme/components/Panel/PanelBody';
+import { PanelHeader } from '@theme/components/Panel/PanelHeader';
+import { PanelHeaderTitle } from '@theme/components/Panel/PanelHeaderTitle';
+import type { PanelHeaderProps } from '@theme/components/Panel/PanelHeader';
+
+export interface PanelComponentProps {
+  expanded?: boolean;
+  className?: string;
+  renderChildrenHidden?: boolean;
+  header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
+  onToggle?: (expanded: boolean) => void;
+  description?: React.ReactNode;
+}
+
+export function PanelComponent({
+  expanded = true,
+  renderChildrenHidden = false,
+  header,
+  className,
+  children,
+  onToggle,
+  description,
+}: PropsWithChildren<PanelComponentProps>): JSX.Element {
+  const [isExpanded, setExpanded] = useState(expanded);
+  const [animate, setAnimate] = useState(false);
+
+  const toggle = ({ target }: BaseSyntheticEvent): void => {
+    if (target instanceof HTMLAnchorElement) return;
+    setAnimate(true);
+    setExpanded(!isExpanded);
+    onToggle?.(!isExpanded);
+  };
+
+  useEffect(() => setExpanded(expanded), [expanded]);
+
+  return (
+    <div
+      className={className}
+      data-cy={
+        typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null
+      }
+      data-component-name="Panel/PanelComponent"
+    >
+      {header &&
+        (typeof header === 'function' ? (
+          header({ expanded: isExpanded, toggle })
+        ) : (
+          <PanelHeader data-cy="panel-header" onClick={toggle} expanded={isExpanded}>
+            <InlineBox>
+              <PanelHeaderTitle data-cy="title">{header}</PanelHeaderTitle>
+              <ShelfIcon direction={isExpanded ? 'down' : 'right'} />
+              {description}
+            </InlineBox>
+          </PanelHeader>
+        ))}
+
+      {(isExpanded || renderChildrenHidden) && (
+        <PanelBody data-cy="panel-body" hidden={!isExpanded} animate={animate}>
+          {children}
+        </PanelBody>
+      )}
+    </div>
+  );
+}
+
+export const InlineBox = styled.div`
+  display: inline-flex;
+  align-items: center;
+
+  > span:last-child {
+    margin-left: 8px;
+  }
+`;

package/src/components/Panel/PanelHeader.ts

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+import type { BaseSyntheticEvent } from 'react';
+
+export interface PanelHeaderProps {
+  expanded?: boolean;
+  disabled?: boolean;
+  toggle?: (e: BaseSyntheticEvent) => void;
+}
+
+export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Panel/PanelHeader',
+  className,
+}))<PanelHeaderProps>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  white-space: var(--panel-heading-white-space-local);
+  color: var(--panel-heading-text-color);
+
+  cursor: pointer;
+
+  line-height: var(--panel-heading-line-height-local);
+  font-size: var(--panel-heading-font-size-local);
+  padding: var(--panel-heading-padding-local);
+  border: var(--panel-heading-border);
+  background-color: var(--panel-heading-background-color);
+
+  border-top-left-radius: var(--panel-border-radius);
+  border-top-right-radius: var(--panel-border-radius);
+  border-bottom-right-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panel-border-radius)')};
+  border-bottom-left-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panel-border-radius)')};
+
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+`;

package/src/components/Panel/PanelHeaderTitle.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const PanelHeaderTitle = styled.span.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Panel/PanelHeaderTitle',
+  className,
+}))`
+  margin-right: 5px;
+  font-weight: var(--panel-heading-font-weight-local);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--panel-heading-text-color);
+`;

package/src/components/Panel/index.ts

@@ -0,0 +1,6 @@
+export * from '@theme/components/Panel/Panel';
+export * from '@theme/components/Panel/PanelBody';
+export * from '@theme/components/Panel/PanelComponent';
+export * from '@theme/components/Panel/PanelHeader';
+export * from '@theme/components/Panel/PanelHeaderTitle';
+export * from '@theme/components/Panel/styledVariables';

package/src/components/Panel/styledVariables.ts

@@ -0,0 +1,480 @@
+import { css } from 'styled-components';
+
+export const responsePanelColors = css`
+  /**
+  * @tokens Response Panel Common
+  */
+
+  --panel-response-heading-padding: 10px 20px;
+  --panel-response-heading-font-size: var(--font-size-base);
+  --panel-response-heading-line-height: var(--line-height-sm);
+  --panel-response-heading-font-weight: var(--font-weight-bold);
+  --panel-response-heading-text-color: var(--text-primary);
+
+  --panel-response-body-text-color: var(--text-secondary);
+
+  /**
+  * @tokens Response Panel Success colors
+  * @presenter Color
+  */
+  --panel-response-success-border-color: var(--color-success-border);
+  --panel-response-success-heading-background-color: var(--color-success-bg);
+  --panel-response-success-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-success-body-background-color: transparent;
+  --panel-response-success-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Error colors
+  * @presenter Color
+  */
+
+  --panel-response-error-border-color: var(--color-error-border);
+  --panel-response-error-heading-background-color: var(--color-error-bg);
+  --panel-response-error-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-error-body-background-color: transparent;
+  --panel-response-error-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Redirect colors
+  * @presenter Color
+  */
+
+  --panel-response-redirect-border-color: var(--color-warning-border);
+  --panel-response-redirect-heading-background-color: var(--color-warning-bg);
+  --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-redirect-body-background-color: transparent;
+  --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Info colors
+  * @presenter Color
+  */
+
+  --panel-response-info-border-color: var(--color-info-border);
+  --panel-response-info-heading-background-color: var(--color-info-bg);
+  --panel-response-info-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-info-body-background-color: transparent;
+  --panel-response-info-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Response Panel Callback colors
+  * @presenter Color
+  */
+
+  --panel-response-callback-border-color: var(--color-geekblue-3);
+  --panel-response-callback-heading-background-color: var(--color-geekblue-1);
+  --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color);
+  --panel-response-callback-body-background-color: transparent;
+  --panel-response-callback-body-text-color: var(--panel-response-body-text-color);
+
+  /**
+  * @tokens Panel response success, info, error, redirect, callback common
+  */
+
+  .panel-response-success,
+  .panel-response-info,
+  .panel-response-error,
+  .panel-response-redirect,
+  .panel-response-callback {
+    --panel-body-text-color: var(--panel-response-body-text-color); // @presenter Color
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+
+    --panel-heading-text-color: var(--panel-response-heading-text-color); // @presenter Color
+    --panel-heading-font-size-local: var(--panel-response-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-response-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-response-heading-line-height);
+    --panel-heading-padding-local: var(--panel-response-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+    --panel-heading-white-space-local: normal;
+    --panel-body-padding-local: var(--panel-body-padding);
+  }
+
+  /**
+  * @tokens Panel response success colors
+  * @presenter Color
+  */
+
+  .panel-response-success {
+    --panel-border-local: 1px solid var(--panel-response-success-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-success-body-text-color);
+    --panel-body-background-color: var(--panel-response-success-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-success-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-success-heading-text-color);
+  }
+
+  /**
+  * @tokens Panel response info colors
+  * @presenter Color
+  */
+
+  .panel-response-info {
+    --panel-border-local: 1px solid var(--panel-response-info-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-info-body-text-color);
+    --panel-body-background-color: var(--panel-response-info-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-info-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-info-heading-text-color);
+  }
+
+  /**
+  * @tokens Panel response error colors
+  * @presenter Color
+  */
+
+  .panel-response-error {
+    --panel-border-local: 1px solid var(--panel-response-error-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-error-body-text-color);
+    --panel-body-background-color: var(--panel-response-error-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-error-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-error-heading-text-color);
+  }
+
+  /**
+  * @tokens Panel response redirect colors
+  * @presenter Color
+  */
+
+  .panel-response-redirect {
+    --panel-border-local: 1px solid var(--panel-response-redirect-border-color); // @presenter Border
+    --panel-body-text-color: var(--panel-response-redirect-body-text-color);
+
+    --panel-body-background-color: var(--panel-response-redirect-body-background-color);
+    --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);
+  }
+
+  /**
+  * @tokens Panel response callback colors
+  * @presenter Color
+  */
+
+  .panel-response-callback {
+    --panel-border-local: 1px solid var(--panel-response-callback-border-color); // @presenter Border
+
+    --panel-body-text-color: var(--panel-response-callback-body-text-color);
+    --panel-body-background-color: var(--panel-response-callback-body-background-color);
+
+    --panel-heading-background-color: var(--panel-response-callback-heading-background-color);
+    --panel-heading-text-color: var(--panel-response-callback-heading-text-color);
+  }
+
+  // @tokens End
+`;
+
+export const apiReferencePanels = css`
+  /**
+  * @tokens Panels spacing
+  * @presenter Spacing
+  */
+
+  --panel-gap-horizontal: var(--spacing-xl);
+  --panel-gap-vertical: var(--spacing-base);
+
+  /**
+  * @tokens Panel common
+  */
+
+  --panel-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --panel-border: 1px solid var(--border-primary); // @presenter Border
+
+  --panel-line-height: var(--line-height-base); // @presenter LineHeight
+  --panel-font-size: var(--font-size-base); // @presenter FontSize
+  --panel-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-font-weight: var(--font-weight-regular); // @presenter FontWeight
+
+  /**
+  * @tokens Panel heading common
+  */
+
+  --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-heading-font-size: 18px; // @presenter FontSize
+  --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --panel-heading-text-color: var(--text-primary);
+  --panel-heading-padding: var(--spacing-base);
+  --panel-heading-line-height: 1; // @presenter LineHeight
+  --panel-heading-white-space: 'nowrap';
+  --panel-heading-border: 1px solid var(--border-primary);
+
+  /**
+  * @tokens Panel body common
+  */
+
+  --panel-body-font-family: var(--font-family-base); // @presenter FontFamily
+  --panel-body-font-size: var(--font-size-base); // @presenter FontSize
+  --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --panel-body-text-color: var(--text-secondary);
+  --panel-body-padding: var(--spacing-base);
+  --panel-body-border: 1px solid var(--border-primary);
+
+  /**
+  * @tokens Panel default, response, callback, security schemas
+  */
+
+  .panel-request-schemas,
+  .panel-response-schemas,
+  .panel-callback-schemas,
+  .panel-security-schemas,
+  .panel-default {
+    --panel-text-color: var(--text-primary); // @presenter Color
+    --panel-font-family-local: var(--panel-font-family);
+    --panel-font-size-local: var(--panel-font-size);
+    --panel-font-weight-local: var(--panel-font-weight);
+    --panel-background-color: var(--bg-base); // @presenter Color
+    --panel-border-local: var(--panel-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--text-primary); // @presenter Color
+
+    --panel-body-text-color: var(--panel-text-color); // @presenter Color
+    --panel-body-font-family-local: var(--panel-body-font-family);
+    --panel-body-font-size-local: var(--panel-body-font-size);
+    --panel-body-font-weight-local: var(--panel-body-font-weight);
+    --panel-body-padding-local: var(--panel-body-padding);
+    --panel-body-background-color: var(--bg-base); // @presenter Color
+    --panel-body-border: var(--panel-body-border); // @presenter Border
+
+    --panel-heading-text-color: var(--panel-text-color); // @presenter Color
+    --panel-heading-font-family-local: var(--panel-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-heading-line-height);
+    --panel-heading-padding-local: var(--panel-heading-padding);
+    --panel-heading-background-color: var(--bg-base); // @presenter Color
+    --panel-heading-border: var(--panel-heading-border); // @presenter Border
+    --panel-heading-white-space-local: var(--panel-heading-white-space);
+  }
+
+  /**
+  * @tokens Panel samples common
+  */
+
+  --panel-samples-block-background-color: var(--bg-base); // @presenter Color
+  --panel-samples-width: 50%;
+
+  --panel-samples-text-color: var(--text-primary); // @presenter Color
+  --panel-samples-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-samples-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-font-weight: var(--panel-font-weight); // @presenter FontWight
+  --panel-samples-background-color: var(--bg-raised); // @presenter Color
+  --panel-samples-border: var(--panel-border); // @presenter Border
+  --panel-samples-chevron-icon-color: var(--text-primary); // @presenter Color
+
+  /**
+  * @tokens Panel samples body common
+  */
+
+  --panel-samples-body-text-color: var(--text-secondary); // @presenter Color
+  --panel-samples-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
+  --panel-samples-body-font-size: var(--panel-body-font-size); // @presenter FontSize
+  --panel-samples-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
+  --panel-samples-body-padding: var(--panel-body-padding);
+  --panel-samples-body-background-color: var(--bg-raised); // @presenter Color
+  --panel-samples-body-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel samples heading common
+  */
+
+  --panel-samples-heading-text-color: var(--text-primary); // @presenter Color
+  --panel-samples-heading-font-family: var(--panel-heading-font-family); // @presenter FontFamily
+  --panel-samples-heading-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-heading-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-samples-heading-line-height: var(--line-height-xxlg); // @presenter LineHeight
+  --panel-samples-heading-padding: 0 20px;
+  --panel-samples-heading-background-color: var(--bg-overlay); // @presenter Color
+  --panel-samples-heading-border: unset; // @presenter Border
+
+  /**
+  * @tokens Panel samples default
+  */
+  .panel-samples-default {
+    --text-color: var(--panel-samples-text-color);
+    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-samples-font-family);
+    --panel-font-size-local: var(--panel-samples-font-size);
+    --panel-font-weight-local: var(--panel-samples-font-weight);
+    --panel-background-color: var(--panel-samples-background-color); // @presenter Color
+    --panel-border-local: var(--panel-samples-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
+
+    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
+    --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color
+
+    --panel-body-font-family-local: var(--panel-samples-body-font-family);
+    --panel-body-font-size-local: var(--panel-samples-body-font-size);
+    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
+    --panel-body-padding-local: 0;
+    --panel-body-border-local: var(--panel-samples-body-border);
+
+    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
+    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
+    --panel-heading-padding-local: var(--panel-samples-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+  }
+
+  /**
+  * @tokens Panel try-it, request-samples, response-samples, callback samples
+  */
+
+  .panel-try-it,
+  .panel-pull-right,
+  .panel-request-samples,
+  .panel-response-samples,
+  .panel-callback-samples {
+    --text-color: var(--panel-samples-text-color);
+    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-samples-font-family);
+    --panel-font-size-local: var(--panel-samples-font-size);
+    --panel-font-weight-local: var(--panel-samples-font-weight);
+    --panel-background-color: var(--panel-samples-background-color); // @presenter Color
+    --panel-border-local: var(--panel-samples-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
+
+    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
+    --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color
+
+    --panel-body-font-family-local: var(--panel-samples-body-font-family);
+    --panel-body-font-size-local: var(--panel-samples-body-font-size);
+    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
+    --panel-body-padding-local: var(--panel-samples-body-padding);
+    --panel-body-border-local: var(--panel-samples-body-border);
+
+    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
+    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
+    --panel-heading-padding-local: var(--panel-samples-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+  }
+
+  /**
+  * @tokens Panel try-it nested common
+  * @presenter Color
+  */
+
+  --panel-try-it-nested-text-color: var(--text-primary);
+  --panel-try-it-nested-chevron-icon-color: var(--text-primary);
+
+  --panel-try-it-nested-body-background-color: var(--bg-raised);
+  --panel-try-it-nested-body-text-color: var(--text-secondary);
+  --panel-try-it-nested-body-padding: var(--panel-body-padding); // @presenter Spacing
+  --panel-try-it-nested-body-border-color: var(--border-primary);
+
+  --panel-try-it-nested-heading-text-color: var(--text-primary);
+  --panel-try-it-nested-heading-background-color: transparent;
+  --panel-try-it-nested-heading-border-color: var(--border-primary);
+
+  /**
+  * @tokens Panel try-it nested
+  * @presenter Color
+  */
+
+  .panel-try-it-nested {
+    --panel-text-color: var(--panel-try-it-nested-text-color);
+    --panel-chevron-icon-color: var(--panel-try-it-nested-chevron-icon-color);
+
+    --panel-body-text-color: var(--panel-try-it-nested-body-text-color);
+    --panel-body-background-color: var(--panel-try-it-nested-body-background-color);
+    --panel-body-padding-local: var(--panel-try-it-nested-body-padding); // @presenter Spacing
+
+    --panel-heading-text-color: var(--panel-try-it-nested-heading-text-color);
+    --panel-heading-background-color: var(--panel-try-it-nested-heading-background-color);
+  }
+
+  /**
+  * @tokens Panel samples tabs
+  */
+
+  --panel-samples-tabs-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-samples-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-samples-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
+
+  --panel-samples-tabs-text-color: var(--text-secondary); // @presenter Color
+  --panel-samples-tabs-hover-text-color: var(--text-primary); // @presenter Color
+  --panel-samples-tabs-active-text-color: var(--text-primary); // @presenter Color
+  --panel-samples-tabs-disabled-text-color: var(--text-placeholder); // @presenter Color
+
+  --panel-samples-tabs-background-color: transparent; // @presenter Color
+  --panel-samples-tabs-hover-background-color: transparent; // @presenter Color
+  --panel-samples-tabs-active-background-color: var(--bg-base); // @presenter Color
+
+  --panel-samples-code-block-background-color: var(--code-block-background-color); // @presenter Color
+
+  /**
+  * @tokens Panel try-it tabs
+  */
+
+  --panel-try-it-tabs-font-size: var(--font-size-sm);
+  --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
+
+  --panel-try-it-tabs-text-color: var(--text-secondary); // @presenter Color
+  --panel-try-it-tabs-hover-text-color: var(--text-primary); // @presenter Color
+  --panel-try-it-tabs-active-text-color: var(--text-primary); // @presenter Color
+  --panel-try-it-tabs-disabled-text-color: var(--text-placeholder); // @presenter Color
+
+  --panel-try-it-tabs-background-color: none; // @presenter Color
+  --panel-try-it-tabs-hover-background-color: var(--bg-raised); // @presenter Color
+  --panel-try-it-tabs-active-background-color: var(--bg-base); // @presenter Color
+  --panel-try-it-tabs-disabled-background-color: none; // @presenter Color
+
+  /**
+  * @tokens Panel try-it action button
+  */
+
+  --panel-try-it-action-button-width: auto;
+  --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily
+  --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
+  --panel-try-it-action-button-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-text-wrap: var(--button-text-wrap);
+  --panel-try-it-action-button-background-color: var(--color-primary); // @presenter Color
+  --panel-try-it-action-button-border-color: var(--color-primary); // @presenter Color
+
+  --panel-try-it-action-button-active-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-active-background-color: var(--color-primary-active); // @presenter Color
+  --panel-try-it-action-button-active-border-color: var(--color-primary-active); // @presenter Color
+
+  --panel-try-it-action-button-hover-text-color: var(--text-light-solid); // @presenter Color
+  --panel-try-it-action-button-hover-background-color: var(--color-primary-hover); // @presenter Color
+  --panel-try-it-action-button-hover-border-color: var(--color-primary-hover); // @presenter Color
+
+  /**
+  * @tokens Panel samples other styles
+  */
+  --panel-samples-dropdown-background-color: var(--bg-base); // @presenter Color
+  --panel-samples-dropdown-color: var(--text-secondary); // @presenter Color
+  --panel-samples-dropdown-border: 1px solid var(--border-primary); // @presenter Border
+
+  /**
+  * @tokens Panel try-it other styles
+  */
+
+  --panel-try-it-input-background-color: var(--bg-base); // @presenter Color
+  --panel-try-it-input-text-color: var(--text-secondary); // @presenter Color
+  --panel-try-it-input-border: 1px solid var(--border-primary); // @presenter Border
+
+  --panel-try-it-dropdown-background-color: var(--bg-base); // @presenter Color
+  --panel-try-it-dropdown-color: var(--text-secondary); // @presenter Color
+  --panel-try-it-dropdown-border: 1px solid var(--border-primary); // @presenter Border
+  --panel-try-it-border: 1px solid var(--border-primary); // @presenter Border
+
+  // @tokens End
+`;

package/src/components/Product/Product.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ProductConfig } from '@theme/config';
+
+export type ProductProps = {
+  product: ProductConfig;
+  className?: string;
+};
+
+export const Product = ({ product, className }: ProductProps): JSX.Element | null => {
+  return (
+    <ProductWrapper data-component-name="Product/Product" className={className}>
+      {product.icon && <ProductLogo src={product.icon} />}
+      <span>{product.name}</span>
+    </ProductWrapper>
+  );
+};
+
+const ProductWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ProductLogo = styled.img`
+  margin-right: var(--product-logo-margin);
+  max-height: var(--select-line-height);
+`;