@redocly/theme 0.18.2 → 0.18.3-patch.0

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -3,30 +3,34 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 import type { LogoConfig } from '@theme/types/portal';
+import { Image } from '@theme/components/Image/Image';
 
 export type NavbarLogoProps = {
-  logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
+  logo: Pick<LogoConfig, 'image' | 'link' | 'altText' | 'srcSet'>;
   className?: string;
 };
 
 export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null {
-  if (!logo.image) {
+  if (!logo.image && !logo.srcSet) {
     return null;
   }
   const img = (
-    <NavLogo
-      className={className}
-      src={logo.image}
-      alt={logo.altText}
-      data-component-name="NavbarLogo/NavbarLogo"
-    />
+    <Image className={className} src={logo.image} srcSet={logo.srcSet} alt={logo.altText} />
   );
-  return logo.link ? <Link to={logo.link}>{img}</Link> : img;
+
+  return <LogoContainer>{logo.link ? <Link to={logo.link}>{img}</Link> : img}</LogoContainer>;
 }
 
-const NavLogo = styled.img`
+export const LogoContainer = styled.div.attrs({
+  'data-component-name': 'NavbarLogo/NavbarLogo',
+})`
   max-width: var(--navbar-logo-max-width);
   max-height: var(--navbar-logo-max-height);
   height: var(--navbar-logo-height);
   margin: var(--navbar-logo-margin);
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 `;

package/src/components/OpenApiDocs/DevOnboardingTryItSecurity.tsx

@@ -115,7 +115,6 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
         />
         <UseKeyButton
           disabled={(!selectedAppSecret && hasApiAccess) || appLoading}
-          color="secondary"
           onClick={() => {
             if (selectedAppSecret) {
               props.onChange(selectedAppSecret);
@@ -164,7 +163,7 @@ const FormLabel = styled.label<{ required?: boolean }>`
         display: inline-block;
         content: '*';
         margin-left: 4px;
-        color: var(--color-error-500);
+        color: var(--color-error);
       }
     `}
 `;

package/src/components/OpenApiDocs/Dropdown.tsx

@@ -154,7 +154,7 @@ box-sizing: border-box;
     &,
     &:hover,
     &:focus-within {
-      border: 1px solid var(--border-color);
+      border: 1px solid var(--border-primary);
       box-shadow: none;
     }
 
@@ -172,9 +172,9 @@ box-sizing: border-box;
     appearance: none;
     cursor: pointer;
 
-    color: var(--text-color);
+    color: var(--text-secondary);
     line-height: inherit;
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-family: inherit;
     padding: var(--docs-dropdown-padding);
     ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};

package/src/components/Panel/PanelHeader.ts

@@ -16,6 +16,7 @@ export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 40px;
   white-space: var(--panel-heading-white-space-local);
 
   cursor: pointer;

package/src/components/Panel/PanelHeaderTitle.ts

@@ -8,9 +8,5 @@ export const PanelHeaderTitle = styled.span.attrs<{ className?: string }>(({ cla
   font-weight: var(--panel-heading-font-weight-local);
   overflow: hidden;
   text-overflow: ellipsis;
-
-  /* changed from var(--text-color-inverse) to var(--text-color)
-     should change several components in openapi/graphql reference-docs to use inverse color
-   */
   color: var(--panel-heading-text-color);
 `;

package/src/components/Panel/index.ts

@@ -3,3 +3,4 @@ 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,487 @@
+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: vat(--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: vat(--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: 12px; // @presenter FontSize
+  --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-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
+
+  // TODO PUL RIGHT section - related to pull right - fix later
+
+  --samples-panel-markdown-background-color: #3c4c5a;
+  --samples-panel-markdown-border-color: #46596a;
+
+  --layout-right-rail-width: 50%;
+  --layout-right-rail-background-color: transparent;
+`;

package/src/components/Product/index.ts

@@ -1,2 +1,3 @@
 export * from '@theme/components/Product/ProductPicker';
 export * from '@theme/components/Product/Product';
+export * from '@theme/components/Product/styledVariables';

package/src/components/Product/styledVariables.ts

@@ -0,0 +1,39 @@
+import { css } from "styled-components";
+
+export const product = css`
+
+  /**
+    * @tokens Product
+    */
+  --product-logo-margin: 10px; // @presenter Spacing
+
+  // @tokens End
+`;
+
+export const productPicker = css`
+  /**
+    * @tokens Product picker
+    * */
+
+  --product-picker-font-size: var(--select-font-size); // @presenter FontSize
+  --product-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --product-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --product-picker-text-color: var(--select-text-color); // @presenter Color
+  --product-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
+
+  --product-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --product-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --product-picker-input-border-radius: var(--select-input-border-radius); // @presenter BorderRadius
+
+  --product-picker-list-min-width: var(--select-list-min-width);
+  --product-picker-list-max-width: var(--select-list-max-width);
+  --product-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --product-picker-list-border-radius: var(--select-list-border-radius); // @presenter BorderRadius
+  --product-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --product-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --product-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --product-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --product-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --product-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+`;

package/src/components/Profile/LoginLink.tsx

@@ -28,10 +28,9 @@ const StyledLink = styled.a.attrs(() => ({
   display: inline-block;
   color: var(--navbar-text-color);
   text-decoration: none;
-  padding: 0 var(--navbar-item-padding-horizontal);
   text-align: center;
   line-height: 1;
-  font-size: var(--navbar-item-font-size);
+  font-size: var(--navbar-font-size);
   font-weight: var(--navbar-item-font-weight);
   &:hover {
     color: var(--navbar-item-hover-text-color);