@redocly/theme 0.18.3-patch.0 → 0.18.3

package/src/components/Search/styledVariables.ts

@@ -1,95 +0,0 @@
-import { css } from 'styled-components';
-
-export const search = css`
-  /**
-      * @tokens Search
-      */
-
-  --search-highlight-background-color: none; // @presenter Color
-  --search-highlight-text-color: var(--color-info); // @presenter Color
-
-  /**
-      * @tokens Portal Search
-      */
-
-  --search-input-background-color: var(--bg-raised); // @presenter Color
-  --search-input-text-color: var(--text-primary); // @presenter Color
-
-  --search-input-border: none;
-  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
-  --search-input-font-size: var(--font-size-base); // @presenter FontSize
-  --search-input-font-family: var(--font-family-base); // @presenter FontFamily
-  --search-input-line-height: 1.15em; // @presenter LineHeight
-
-  --search-input-hover-background-color: var(--bg-raised); // @presenter Color
-  --search-input-hover-border: none; // @presenter Color
-  --search-input-placeholder-color: var(--text-placeholder);
-  --search-input-icons-color: var(--text-placeholder);
-
-  --search-popover-background-color: var(--bg-base); // @presenter Color
-  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
-  --search-popover-shadow: var(--bg-base-shadow); // @presenter BoxShadow
-  --search-popover-border: none;
-
-  --search-item-padding: 8px 24px;
-  --search-item-text-color: var(--text-secondary); // @presenter Color
-  --search-item-title-text-color: var(--text-primary); // @presenter Color
-  --search-item-path-text-color: var(--text-description); // @presenter Color
-  --search-item-background-color: transparent; // @presenter Color
-  --search-item-active-text-color: var(--text-primary); // @presenter Color
-  --search-item-active-title-text-color: var(--text-primary); // @presenter Color
-  --search-item-active-background-color: var(--bg-raised); // @presenter Color
-
-  /**
-    * @tokens Sidebar Search
-    */
-
-  --sidebar-search-button-background-color: transparent; // @presenter Color
-  --sidebar-search-button-text-color: var(--text-secondary); // @presenter Color
-  --sidebar-search-button-border: var(--border-primary);
-  --sidebar-search-button-border-radius: none; // @presenter BorderRadius
-  --sidebar-search-button-font-size: var(--font-size-sm); // @presenter FontSize
-  --sidebar-search-button-font-family: var(--font-family-base); // @presenter FontFamily
-  --sidebar-search-button-line-height: 1.15em; // @presenter LineHeight
-  --sidebar-search-button-hover-background-color: transparent; // @presenter Color
-  --sidebar-search-button-hover-border: var(--border-primary); // @presenter Color
-  --sidebar-search-button-active-background-color: transparent; // @presenter Color
-  --sidebar-search-button-active-border: var(--border-primary); // @presenter Color
-
-  /**
-    * @tokens Search results modal
-    * @presenter Color
-    */
-
-  --search-modal-background: var(--bg-base);
-  --search-modal-text-color: var(--text-primary);
-  --search-modal-border: none;
-  --search-modal-box-shadow: none;
-
-  --search-modal-header-border-radius: var(--border-radius-lg);
-  --search-modal-header-background-color: var(--bg-raised);
-  --search-modal-clear-button-background-color: var(--bg-overlay);
-  --search-modal-clear-button-border: 1px solid var(--bg-overlay);
-  --search-modal-clear-button-hover-background-color: var(--bg-overlay);
-  --search-modal-clear-button-hover-border: 1px solid var(--border-primary);
-
-  /**
-  * @tokens Sidebar Trigger
-  */
-
-  --search-trigger-padding-horizontal: var(--spacing-sm);
-  --search-trigger-padding-vertical: calc(var(--spacing-unit) * 1.5);
-  --search-trigger-padding: var(--search-trigger-padding-vertical)
-    var(--search-trigger-padding-horizontal);
-  --search-trigger-text-color: var(--text-placeholder);
-  --search-trigger-background-color: var(--bg-base);
-  --search-trigger-border: 1px solid var(--border-primary);
-  --search-trigger-border-radius: var(--border-radius-md);
-  --search-trigger-hover-background-color: var(--navbar-item-hover-background-color);
-  --search-trigger-gap: var(--spacing-sm);
-  --search-trigger-font-size: var(--font-size-base);
-  --search-trigger-shortcut-font-size: var(--font-size-sm);
-  --search-trigger-icon-size: 16px;
-  
-  // @tokens End
-`;

package/src/components/Select/styledVariables.ts

@@ -1,30 +0,0 @@
-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-raised); // @presenter Color
-
-  // @tokens End
-`;

package/src/components/Sidebar/styledVariables.ts

@@ -1,208 +0,0 @@
-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
-
-  /**
-    * @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-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-lg); // @presenter Spacing
-  --sidebar-item-separator-border-width: 1px; // @presenter Spacing
-  --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-padding-top: var(--spacing-xxs); // @presenter Spacing
-
-  /**
-   * @tokens Sidebar item http tag
-   */
-
-  --sidebar-item-http-tag-width: 36px;
-  --sidebar-item-http-tag-height: 14px;
-  --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
-  --sidebar-item-http-tag-font-size: 8px; // @presenter FontSize
-  --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
-  --sidebar-item-http-tag-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-
-  /**
-    * @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
-  
-  // @tokens End
-`;

package/src/components/TableOfContent/styledVariables.ts

@@ -1,43 +0,0 @@
-import { css } from 'styled-components';
-
-export const toc = css`
-  /**
-    * @tokens TOC
-    * */
-
-  --toc-width: 240px;
-  --toc-background-color: transparent;
-
-  --toc-spacing-unit: var(--spacing-xs);
-  --toc-offset-top: var(--toc-spacing-unit);
-
-  /**
-     * @tokens TOC item typography
-     */
-  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily
-  --toc-item-font-size: var(--font-size-base); // @presenter FontSize
-
-  /**
-    * @tokens TOC item
-    */
-
-  --toc-item-text-color: var(--text-description); // @presenter Color
-  --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --toc-item-active-text-color: var(--text-primary); // @presenter Color
-  --toc-item-background-color: transparent; // @presenter Color
-  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
-  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing
-  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
-
-  /**
-    * @tokens TOC header
-    */
-
-  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize
-  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily
-  --toc-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
-  --toc-heading-text-color: var(--text-primary); // @presenter Color
-  --toc-heading-text-transform: none; // @presenter TextTransform
-
-  // @tokens End
-`;

package/src/components/Tag/Tag.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'default';
-type ActionStatusColor = 'approved' | 'declined' | 'pending';
-type SubjectStatusColor = 'active' | 'draft' | 'deprecated';
-type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
-type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
-type Color =
-  | 'red'
-  | 'green'
-  | 'blue'
-  | 'grey'
-  | 'gold'
-  | 'cyan'
-  | 'magneta'
-  | 'purple'
-  | 'lime'
-  | 'geekblue'
-  | 'yellow';
-
-interface TagProps {
-  className?: string;
-  children?: React.ReactNode;
-  closable?: boolean;
-  color?: StatusColor | Color | string;
-  icon?: React.ReactNode;
-}
-
-export function Tag({ children, className, color = 'default', icon }: TagProps): JSX.Element {
-  return (
-    <TagContainer className={className} color={color}>
-      {icon ? icon : null}
-      {children}
-    </TagContainer>
-  );
-}
-
-const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
-  'data-component-name': 'Tag/Tag',
-  className: className + ` tag-${color}`,
-}))<TagProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-wrap: nowrap;
-
-  padding: var(--tag-padding);
-  margin: var(--tag-margin);
-  gap: var(--tag-gap);
-
-  font-size: var(--tag-font-size);
-  font-family: var(--tag-font-family);
-  font-weight: var(--tag-font-weight);
-  line-height: var(--tag-line-height);
-  box-shadow: var(--tag-box-shadow);
-
-  color: var(--tag-color);
-  background-color: var(--tag-background-color);
-  border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
-  border-radius: var(--tag-border-radius);
-`;

package/src/components/Tag/index.ts

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

package/src/components/Tag/styledVariables.ts

@@ -1,127 +0,0 @@
-import { css } from 'styled-components';
-
-export const tag = css`
-  /**
-    * @tokens Tag borders
-    */
-
-  --tag-border-width: 1px; //@presenter Border
-  --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
-  --tag-box-shadow: none; // @presenter Shadow
-
-  /**
-    * @tokens Tag spacing
-    */
-
-  --tag-padding: 1px 8px; //@presenter Spacing
-  --tag-margin: 0 5px 0 0; //@presenter Spacing
-  --tag-gap: 5px; //@presenter Spacing
-
-  /**
-    * @tokens Tag typography
-    */
-
-  --tag-font-size: var(--font-size-sm); // @presenter FontSize
-  --tag-font-family: inherit; // @presenter FontFamily
-  --tag-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --tag-line-height: var(--line-height-sm);
-
-  /**
-    * @tokens Tag icon
-    */
-
-  --tag-icon-width: 1em; // @presenter Spacing
-  --tag-icon-height: 1em; // @presenter Spacing
-
-  /**
-    * @tokens Tag colors
-    */
-
-  .tag-grey,
-  .tag-draft,
-  .tag-schema,
-  .tag-default {
-    --tag-color: var(--text-primary); // @presenter Color
-    --tag-background-color: var(--bg-raised); // @presenter Color
-    --tag-border-color: var(--border-primary); // @presenter Color
-  }
-
-  .tag-green,
-  .tag-success,
-  .tag-approved,
-  .tag-get {
-    --tag-color: var(--color-success-base); // @presenter Color
-    --tag-background-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-border); // @presenter Color
-  }
-
-  .tag-red,
-  .tag-error,
-  .tag-declined,
-  .tag-delete {
-    --tag-color: var(--color-error-base); // @presenter Color
-    --tag-background-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-border); // @presenter Color
-  }
-
-  .tag-gold,
-  .tag-warning,
-  .tag-deprecated,
-  .tag-put {
-    --tag-color: var(--color-warning-base); // @presenter Color
-    --tag-background-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-border); // @presenter Color
-  }
-
-  .tag-blue,
-  .tag-processing,
-  .tag-post {
-    --tag-color: var(--color-info-base); // @presenter Color
-    --tag-background-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-border); // @presenter Color
-  }
-
-  .tag-purple,
-  .tag-head {
-    --tag-color: var(--color-purple-6); // @presenter Color
-    --tag-background-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-3); // @presenter Color
-  }
-
-  .tag-cyan,
-  .tag-option {
-    --tag-color: var(--color-cyan-6); // @presenter Color
-    --tag-background-color: var(--color-cyan-1); // @presenter Color
-    --tag-border-color: var(--color-cyan-3); // @presenter Color
-  }
-
-  .tag-yellow,
-  .tag-patch {
-    --tag-color: var(--color-yellow-6); // @presenter Color
-    --tag-background-color: var(--color-yellow-1); // @presenter Color
-    --tag-border-color: var(--color-yellow-3); // @presenter Color
-  }
-
-  .tag-geekblue,
-  .tag-link {
-    --tag-color: var(--color-geekblue-6); // @presenter Color
-    --tag-background-color: var(--color-geekblue-1); // @presenter Color
-    --tag-border-color: var(--color-geekblue-3); // @presenter Color
-  }
-
-  .tag-magneta,
-  .tag-hook {
-    --tag-color: var(--color-magneta-6); // @presenter Color
-    --tag-background-color: var(--color-magneta-1); // @presenter Color
-    --tag-border-color: var(--color-magneta-3); // @presenter Color
-  }
-
-  .tag-lime {
-    --tag-color: var(--color-lime-6); // @presenter Color
-    --tag-background-color: var(--color-lime-1); // @presenter Color
-    --tag-border-color: var(--color-lime-3); // @presenter Color
-  }
-
-  // @tokens End
-`;

package/src/components/Tooltip/styledVariables.ts

@@ -1,18 +0,0 @@
-import { css } from "styled-components";
-
-export const tooltip = css`
-  /**
-    * @tokens Tooltip Base
-    * @presenter Color
-    */
-
-  --tooltip-text-color: var(--text-secondary);
-  --tooltip-background-color: var(--bg-raised);
-
-  .tooltip-copy-button {
-    --tooltip-text-color: var(--text-secondaru);
-    --tooltip-background-color: var(--bg-raised);
-  }
-
-  // @tokens End
-`;

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Icon = ({
-  className,
-  checked = false,
-  onClick,
-}: {
-  className?: string;
-  checked?: boolean;
-  onClick?: () => void;
-}) => (
-  <span className={className} onClick={onClick}>
-    {checked ? (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect width="16" height="16" rx="4" fill="var(--checkbox-active-background-color)" />
-        <path
-          d="M3.91308 7.03516H3.91326C3.99256 7.03525 4.07081 7.05331 4.14213 7.08798C4.21341 7.12262 4.27591 7.17295 4.32497 7.2352L3.91308 7.03516ZM3.91308 7.03516H3.09394C2.89031 7.03516 2.7766 7.26975 2.90232 7.4292L2.90237 7.42927L6.11214 11.4957L6.11218 11.4957C6.32247 11.7619 6.72568 11.7611 6.93667 11.4962L6.93708 11.4957L12.6597 4.24398C12.6598 4.24378 12.66 4.24358 12.6602 4.24338C12.7884 4.08295 12.6699 3.85 12.4689 3.85H11.6498C11.4894 3.85 11.3367 3.9235 11.2376 4.05044C11.2375 4.05055 11.2374 4.05066 11.2373 4.05077L6.52403 10.0216M3.91308 7.03516L6.52403 10.0216M6.52403 10.0216L4.32506 7.23531L6.52403 10.0216Z"
-          fill="var(--checkbox-mark-color)"
-          stroke="var(--checkbox-mark-color)"
-        />
-      </svg>
-    ) : (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect width="16" height="16" rx="4" fill="var(--checkbox-background-color)" />
-        <rect
-          x="0.5"
-          y="0.5"
-          width="15"
-          height="15"
-          rx="3.5"
-          stroke="var(--checkbox-border-color)"
-        />
-      </svg>
-    )}
-  </span>
-);
-
-export const CheckboxIcon = styled(Icon).attrs<{ checked?: boolean }>({
-  'data-component-name': 'icons/CheckboxIcon/CheckboxIcon',
-})`
-  margin-right: var(--spacing-xs);
-  display: flex;
-
-  --checkbox-active-border-color: var(--color-primary-base);
-  --checkbox-active-background-color: var(--color-primary-base);
-
-  --checkbox-border-color: var(--border-primary);
-  --checkbox-background-color: var(--bg-base);
-
-  --checkbox-mark-color: var(--bg-base);
-`;

package/src/icons/CheckboxIcon/index.ts

@@ -1 +0,0 @@
-export { CheckboxIcon } from '@theme/icons/CheckboxIcon/CheckboxIcon';

package/src/icons/ErrorIcon/ErrorIcon.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Icon = () => (
-  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M8.5 1C4.63438 1 1.5 4.13438 1.5 8C1.5 11.8656 4.63438 15 8.5 15C12.3656 15 15.5 11.8656 15.5 8C15.5 4.13438 12.3656 1 8.5 1ZM11.0844 10.6594L10.0531 10.6547L8.5 8.80313L6.94844 10.6531L5.91563 10.6578C5.84688 10.6578 5.79063 10.6031 5.79063 10.5328C5.79063 10.5031 5.80156 10.475 5.82031 10.4516L7.85313 8.02969L5.82031 5.60938C5.80143 5.58647 5.79096 5.5578 5.79063 5.52812C5.79063 5.45937 5.84688 5.40312 5.91563 5.40312L6.94844 5.40781L8.5 7.25938L10.0516 5.40938L11.0828 5.40469C11.1516 5.40469 11.2078 5.45937 11.2078 5.52969C11.2078 5.55937 11.1969 5.5875 11.1781 5.61094L9.14844 8.03125L11.1797 10.4531C11.1984 10.4766 11.2094 10.5047 11.2094 10.5344C11.2094 10.6031 11.1531 10.6594 11.0844 10.6594Z"
-      fill="var(--color-error-base)"
-    />
-  </svg>
-);
-
-export const ErrorIcon = styled(Icon).attrs(() => ({
-  'data-component-name': 'icons/ErrorIcon/ErrorIcon',
-}))``;

package/src/icons/ErrorIcon/index.ts

@@ -1 +0,0 @@
-export * from '@theme/icons/ErrorIcon/ErrorIcon';