@redocly/theme 0.18.3-patch.0 → 0.18.3

package/src/components/Panel/styledVariables.ts

@@ -1,487 +0,0 @@
-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/styledVariables.ts

@@ -1,39 +0,0 @@
-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/UserProfileData.tsx

@@ -1,40 +0,0 @@
-import { Profile } from '@theme';
-import React from 'react';
-import styled from 'styled-components';
-
-import { AvatarWrapper, ProfileWrapper } from '@theme/components/Profile/Profile';
-
-interface UserProfileDataProps {
-  userData: { name: string; picture: string };
-}
-
-export function UserProfileData(props: UserProfileDataProps) {
-  const { userData } = props;
-
-  return (
-    <UserProfileDataWrapper>
-      <ProfilePicture>
-        <Profile name={userData.name} imageUrl={userData.picture} />
-      </ProfilePicture>
-      <UserName>{userData.name}</UserName>
-    </UserProfileDataWrapper>
-  );
-}
-
-const UserProfileDataWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-const ProfilePicture = styled.div`
-  margin-right: 16px;
-
-  ${AvatarWrapper} {
-    margin: 0;
-  }
-
-  ${ProfileWrapper} {
-    padding: 0;
-  }
-`;
-
-const UserName = styled.div``;

package/src/components/Profile/styledVariables.ts

@@ -1,53 +0,0 @@
-import { css } from "styled-components";
-
-export const userProfile = css`
-
-  /**
-    * @tokens User Profile
-    */
-
-   --profile-avatar-width: var(--control-height-base); // @presenter Spacing
-   --profile-avatar-height: var(--control-height-base); // @presenter Spacing
-   --profile-avatar-border-radius: 50%; // @presenter BorderRadius
-
-   --profile-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily
-   --profile-avatar-font-size: var(--navbar-item-font-size); // @presenter FontSize
-   --profile-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight
-   --profile-avatar-line-height: var(--line-height-base); // @presenter LineHeight
-  
-   --profile-avatar-padding-vertical: var(--spacing-base); // @presenter Spacing
-   --profile-avatar-padding-horizontal: var(--spacing-base); // @presenter Spacing
-
-   // @tokens End
-`;
-
-export const userProfileDropdown = css`
-  /**
-    * @tokens User profile menu dropdown
-    * */
-
-  --profile-dropdown-font-size: var(--dropdown-font-size); // @presenter FontSize
-  --profile-dropdown-font-weight: var(--dropdown-font-weight); // @presenter FontWeight
-  --profile-dropdown-line-height: var(--dropdown-line-height); // @presenter LineHeight
-  --profile-dropdown-text-color: var(--dropdown-text-color); // @presenter Color
-  --profile-dropdown-border-radius: var(--dropdown-border-radius); // @presenter BorderRadius
-
-  --profile-dropdown-list-min-width: var(--dropdown-list-min-width);
-  --profile-dropdown-list-max-width: var(--dropdown-list-max-width);
-  --profile-dropdown-list-padding: var(--dropdown-list-padding); // @presenter Spacing
-  --profile-dropdown-list-border-radius: var(--dropdown-list-border-radius); // @presenter BorderRadius
-  --profile-dropdown-list-background-color: var(--dropdown-list-background-color); // @presenter Color
-  --profile-dropdown-list-box-shadow: var(--dropdown-list-box-shadow); // @presenter Shadow
-
-  --profile-dropdown-list-item-horizontal-padding: var(--dropdown-list-item-horizontal-padding); // @presenter Spacing
-  --profile-dropdown-list-item-vertical-padding: var(--dropdown-list-item-vertical-padding); // @presenter Spacing
-  --profile-dropdown-list-item-border-radius: var(--dropdown-list-item-border-radius); // @presenter BorderRadius
-  --profile-dropdown-list-item-active-background-color: var(--dropdown-list-item-active-background-color); // @presenter Color
-  --profile-dropdown-list-item-separator-color: var(--dropdown-list-item-separator-color); // @presenter Color
-
-  --profile-dropdown-logout-color: var(--color-error-base);
-  --profile-dropdown-logout-border-color: var(--border-secondary);
-  --profile-dropdown-logout-padding: 0 0 0 var(--spacing-xxs);
-
-  // @tokens End
-`