@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.1

package/src/components/Tabs/Tab.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-type TabProps = {
-  activeTab: string;
-  label: string;
-  className?: string;
-  onClick: (e: string) => void;
-};
-
-export function Tab({ activeTab, label, onClick, className }: TabProps): JSX.Element {
-  const isActive = activeTab === label;
-  return (
-    <TabItem
-      active={isActive}
-      onClick={() => onClick(label)}
-      data-component-name="Markdown/Tabs/Tab"
-      className={className}
-    >
-      {label}
-    </TabItem>
-  );
-}
-
-const TabItem = styled.li<{ active: boolean }>`
-  display: inline-block;
-  list-style: none;
-  cursor: pointer;
-
-  color: var(--md-tabs-tab-text-color);
-  font-size: var(--md-tabs-tab-font-size);
-  font-family: var(--md-tabs-tab-font-family);
-  font-style: var(--md-tabs-tab-font-style);
-  font-weight: var(--md-tabs-tab-font-weight);
-  background-color: var(--md-tabs-tab-background-color);
-  border-radius: var(--md-tabs-tab-border-radius);
-  padding: var(--md-tabs-tab-padding);
-  border: var(--md-tabs-tab-border);
-  border-width: var(--md-tabs-tab-border-width);
-
-  ${({ active }) =>
-    active
-      ? `      
-      color: var(--md-tabs-active-tab-text-color);
-      font-size: var(--md-tabs-active-tab-font-size);
-      font-family: var(--md-tabs-active-tab-font-family);
-      font-style: var(--md-tabs-active-tab-font-style);
-      font-weight: var(--md-tabs-active-tab-font-weight);
-      background-color: var(--md-tabs-active-tab-background-color);
-      border-radius: var(--md-tabs-active-tab-border-radius);
-      padding: var(--md-tabs-active-tab-padding);
-      border: solid var(--md-tabs-active-tab-border-color);
-      border-width: var(--md-tabs-active-tab-border-width);
-    `
-      : `
-    &:hover {
-      color: var(--md-tabs-hover-tab-text-color);
-      font-size: var(--md-tabs-hover-tab-font-size);
-      font-family: var(--md-tabs-hover-tab-font-family);
-      font-style: var(--md-tabs-hover-tab-font-style);
-      font-weight: var(--md-tabs-hover-tab-font-weight);
-      background-color: var(--md-tabs-hover-tab-background-color);
-      border-radius: var(--md-tabs-hover-tab-border-radius);
-      padding: var(--md-tabs-hover-tab-padding);
-      border: solid var(--md-tabs-hover-tab-border-color);
-      border-width: var(--md-tabs-hover-tab-border-width);
-    }
-  `}
-`;

package/src/components/Tabs/Tabs.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import type { PropsWithChildren } from 'react';
-
-import { Tab } from '@theme/components/Tabs';
-
-type Child = { props: { label: string } & TabsProps };
-type TabsProps = PropsWithChildren<{ children: Child[]; className?: string }>;
-
-export function Tabs(props: TabsProps): JSX.Element {
-  const children = React.Children.toArray(props.children) as Child[];
-  const [activeTab, setActiveTab] = useState(children[0]?.props.label);
-  const onTabSelect = (label: string) => setActiveTab(label);
-
-  return (
-    <TabsContainer data-component-name="Markdown/Tabs/Tabs" className={props.className}>
-      <TabList>
-        {children.map((child, idx) => {
-          const { label } = child.props;
-          return (
-            <Tab
-              activeTab={activeTab}
-              key={`${label}-${idx}`}
-              label={label}
-              onClick={onTabSelect}
-            />
-          );
-        })}
-      </TabList>
-      <TabContent>
-        {children.map((child, idx) => {
-          if (child.props.label !== activeTab) return undefined;
-          return <React.Fragment key={idx}> {child.props.children}</React.Fragment>;
-        })}
-      </TabContent>
-    </TabsContainer>
-  );
-}
-
-const TabsContainer = styled.div`
-  color: var(--md-tabs-container-text-color);
-  font-size: var(--md-tabs-container-font-size);
-  font-family: var(--md-tabs-container-font-family);
-  font-style: var(--md-tabs-container-font-style);
-  font-weight: var(--md-tabs-container-font-weight);
-  background-color: var(--md-tabs-container-background-color);
-  margin: var(--md-tabs-container-margin);
-  padding: var(--md-tabs-container-padding);
-  border: var(--md-tabs-container-border);
-
-  ol[class^='Tabs__TabList'] {
-    margin: 0;
-    padding: 0;
-  }
-`;
-
-const TabList = styled.ol`
-  padding: var(--md-tabs-padding);
-  margin-block-end: 0;
-  border: var(--md-tabs-border);
-  border-width: var(--md-tabs-border-width);
-
-  li[class^='Tab__TabItem'] {
-    margin: var(--md-tabs-tab-margin);
-  }
-`;
-
-const TabContent = styled.div`
-  color: var(--md-tabs-content-text-color);
-  font-size: var(--md-tabs-content-font-size);
-  font-family: var(--md-tabs-content-font-family);
-  font-style: var(--md-tabs-content-font-style);
-  font-weight: var(--md-tabs-content-font-weight);
-  background-color: var(--md-tabs-content-background-color);
-  margin: var(--md-tabs-content-margin);
-  padding: var(--md-tabs-content-padding);
-  border: var(--md-tabs-content-border);
-`;

package/src/components/Tabs/index.ts

@@ -1,2 +0,0 @@
-export * from '@theme/components/Tabs/Tab';
-export * from '@theme/components/Tabs/Tabs';

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,145 +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-large-padding: 4px 16px; //@presenter Spacing
-  --tag-margin: 0 5px 0 0; //@presenter Spacing
-  --tag-gap: 5px; //@presenter Spacing
-
-  /**
-    * @tokens Tag size
-    */
-   
-  .tag-size-large {
-    --tag-padding: var(--tag-large-padding);
-    --tag-font-size: var(--font-size-base);
-  }
-
-  /**
-    * @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);
-  --tag-text-transform: capitalize;
-
-  /**
-    * @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-overlay); // @presenter Color
-    --tag-border-color: var(--border-primary); // @presenter Color
-  }
-
-  .tag-green,
-  .tag-success,
-  .tag-approved,
-  .tag-get {
-    --tag-color: var(--color-success-active); // @presenter Color
-    --tag-background-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-active); // @presenter Color
-  }
-
-  .tag-red,
-  .tag-error,
-  .tag-declined,
-  .tag-delete {
-    --tag-color: var(--color-error-active); // @presenter Color
-    --tag-background-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-active); // @presenter Color
-  }
-
-  .tag-gold,
-  .tag-warning,
-  .tag-deprecated,
-  .tag-put {
-    --tag-color: var(--color-warning-active); // @presenter Color
-    --tag-background-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-active); // @presenter Color
-  }
-
-  .tag-blue,
-  .tag-processing,
-  .tag-post {
-    --tag-color: var(--color-info-active); // @presenter Color
-    --tag-background-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-active); // @presenter Color
-  }
-
-  .tag-purple,
-  .tag-head {
-    --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-background-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-7); // @presenter Color
-  }
-
-  .tag-cyan,
-  .tag-option {
-    --tag-color: var(--color-cyan-7); // @presenter Color
-    --tag-background-color: var(--color-cyan-1); // @presenter Color
-    --tag-border-color: var(--color-cyan-7); // @presenter Color
-  }
-
-  .tag-yellow,
-  .tag-patch {
-    --tag-color: var(--color-yellow-7); // @presenter Color
-    --tag-background-color: var(--color-yellow-1); // @presenter Color
-    --tag-border-color: var(--color-yellow-7); // @presenter Color
-  }
-
-  .tag-geekblue,
-  .tag-link {
-    --tag-color: var(--color-geekblue-7); // @presenter Color
-    --tag-background-color: var(--color-geekblue-1); // @presenter Color
-    --tag-border-color: var(--color-geekblue-7); // @presenter Color
-  }
-
-  .tag-magenta,
-  .tag-hook {
-    --tag-color: var(--color-magenta-7); // @presenter Color
-    --tag-background-color: var(--color-magenta-1); // @presenter Color
-    --tag-border-color: var(--color-magenta-7); // @presenter Color
-  }
-
-  .tag-lime {
-    --tag-color: var(--color-lime-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
-    --tag-border-color: var(--color-lime-7); // @presenter Color
-  }
-
-  /**
-    * @tokens Tag http
-    */
-  .tag-http {
-    --tag-text-transform: uppercase;
-  }
-
-  // @tokens End
-`;

package/src/components/Tiles/ThinTile.tsx

@@ -1,136 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@portal/Link';
-import { Flex } from '@theme/ui/Flex';
-import { TileText } from '@theme/components/Tiles/TileText';
-import { TileHeader } from '@theme/components/Tiles/TileHeader';
-import type { TextAlign, TileProps } from '@theme/components/Tiles/types';
-
-const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--border-radius-lg);
-  box-sizing: border-box;
-  padding: var(--spacing-lg);
-  margin-bottom: 20px;
-  text-decoration: none;
-  width: 100%;
-  color: var(--text-primary);
-  border: 1px solid var(--border-secondary);
-  background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
-  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
-  background-repeat: no-repeat;
-
-  :hover {
-    border-color: var(--border-primary);
-  }
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    width: calc(50% - 20px);
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: 250px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.large} {
-    width: 280px;
-  }
-
-  &.external-url {
-    :after {
-      display: none;
-    }
-  }
-`;
-
-const ThinTileIcon = styled.img`
-  width: 90px;
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: 80px;
-  }
-`;
-
-const ThinTileHeader = styled(TileHeader)<{ align?: TextAlign }>`
-  font-size: 24px;
-  font-weight: var(--font-weight-bold);
-  text-align: ${({ align }) => align || 'center'};
-`;
-
-const ThinTileText = styled(TileText)<{ icon?: string; align?: TextAlign }>`
-  color: var(--text-secondary);
-  font-size: 18px;
-  line-height: 1.5;
-  flex-shrink: 0;
-  min-height: 3em;
-  text-align: ${({ align }) => align || 'center'};
-  ${({ icon }) =>
-    icon
-      ? `
-    display: -webkit-box;
-    -webkit-line-clamp: 8;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    line-clamp: 8;
-  `
-      : ''};
-  ${({ theme }) => theme.mediaQueries.small} {
-    min-height: 6em;
-  }
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    min-height: 4.5em;
-  }
-`;
-
-export class ThinTile extends Component<TileProps> {
-  render(): JSX.Element {
-    const { header, icon, children, to, target, headerAlign, textAlign, color, className, style } =
-      this.props;
-
-    const Wrapper = to
-      ? ThinTileWrapper
-      : (ThinTileWrapper.withComponent('div') as typeof ThinTileWrapper);
-
-    return (
-      <Wrapper
-        to={to}
-        target={target}
-        color={color}
-        className={className}
-        style={style}
-        data-component-name="ui/Tiles/ThinTile"
-      >
-        {(icon || header) && (
-          <Flex flexDirection="column">
-            {icon && (
-              <Flex
-                flexShrink={0}
-                height={{ xs: 'auto', small: '100px', medium: '110px' }}
-                alignItems="center"
-                justifyContent="center"
-                mb="25px"
-              >
-                <ThinTileIcon src={icon} />
-              </Flex>
-            )}
-            {header && (
-              <ThinTileHeader align={headerAlign} color={color} data-cy={`Thin-${header}`}>
-                {header}
-              </ThinTileHeader>
-            )}
-          </Flex>
-        )}
-        {children && (
-          <ThinTileText icon={icon} align={textAlign} color={color}>
-            {children}
-          </ThinTileText>
-        )}
-      </Wrapper>
-    );
-  }
-}

package/src/components/Tiles/TileHeader.ts

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-export const TileHeader = styled.h3.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'ui/Tiles/TileHeader',
-  className,
-}))<{ color?: string }>`
-  font-weight: var(--h3-font-weight);
-  line-height: var(--h3-line-height);
-  color: ${(props) => props.color || 'var(--h3-color)'};
-  font-family: var(--h3-font-family);
-  && {
-    margin: 0 0 var(--h3-margin-bottom);
-  }
-`;

package/src/components/Tiles/TileText.tsx

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-export const TileText = styled.span.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'ui/Tiles/TileText',
-  className,
-}))<{ color?: string }>`
-  display: inline-block;
-  font-weight: var(--font-weight-regular);
-  overflow: hidden;
-  color: ${(props) => props.color || 'var(--text-base)'};
-  line-height: 1.25;
-  font-family: var(--font-family-base);
-`;

package/src/components/Tiles/WideTile.tsx

@@ -1,140 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-
-import type { TileProps } from '@theme/components/Tiles/types';
-import { Link } from '@portal/Link';
-import { TileText } from '@theme/components/Tiles/TileText';
-import { TileHeader } from '@theme/components/Tiles/TileHeader';
-
-// prettier-ignore
-const WideTileWrapper = styled(Link)<{
-  disableArrow?: boolean;
-  withIcon: boolean;
-  bgColor?: string;
-  bgImage?: string;
-  color?: string;
-  maxWidth?: string;
-}>`
-  display: inline-flex;
-  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  color: var(--text-primary);
-  border: 1px solid var(--border-secondary);
-  border-radius: var(--border-radius-lg);
-  background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
-  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
-  background-repeat: no-repeat;
-  padding: var(--spacing-lg);
-  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: var(--spacing-xl);
-  box-sizing: border-box;
-  position: relative;
-  text-decoration: none;
-  width: 100%;
-  :hover {
-    border-color: var(--border-primary);
-  }
-  :before {
-    content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
-    display: inline-block;
-    width: 9px;
-    min-height: 18px;
-    background-size: 9px 18px;
-    background-repeat: no-repeat;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 30px;
-  }
-  &.external-url::after {
-    content: none;
-  }
-  
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: calc(50% - 2em);
-    padding: var(--spacing-xl);
-    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
-    flex-direction: row;
-    max-width: ${({ maxWidth }) => maxWidth};
-  }
-`;
-
-const WideTileHeader = styled(TileHeader)<{ align?: string }>`
-  font-size: 24px;
-  font-weight: var(--font-weight-bold);
-  text-align: ${({ align }) => align || 'left'};
-`;
-const WideTileText = styled(TileText)<{ align?: string }>`
-  color: var(--text-secondary);
-  font-size: 18px;
-  text-align: ${({ align }) => align || 'left'};
-`;
-
-const WideTileIcon = styled.div`
-  margin-bottom: 24px;
-  flex-shrink: 0;
-  width: 70px;
-  img {
-    display: block;
-    height: auto;
-    max-width: 100%;
-  }
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    margin-right: 24px;
-    margin-bottom: 0;
-  }
-`;
-
-export class WideTile extends Component<TileProps & { disableArrow?: boolean }> {
-  render(): JSX.Element {
-    const {
-      to,
-      header,
-      children,
-      target,
-      disableArrow,
-      textAlign,
-      headerAlign,
-      icon,
-      bgColor,
-      bgImage,
-      color,
-      className,
-      style,
-      maxWidth,
-    } = this.props;
-    return (
-      <WideTileWrapper
-        to={to}
-        target={target}
-        disableArrow={disableArrow}
-        withIcon={!!icon}
-        bgColor={bgColor}
-        bgImage={bgImage}
-        color={color}
-        className={className}
-        style={style}
-        maxWidth={maxWidth}
-        data-component-name="ui/Tiles/WideTile"
-      >
-        {icon && (
-          <WideTileIcon>
-            <img src={icon} alt="" />
-          </WideTileIcon>
-        )}
-        <div>
-          {header && (
-            <WideTileHeader align={textAlign} color={color} data-cy={`Wide-${header}`}>
-              {header}
-            </WideTileHeader>
-          )}
-          {children && (
-            <WideTileText align={headerAlign} color={color}>
-              {children}
-            </WideTileText>
-          )}
-        </div>
-      </WideTileWrapper>
-    );
-  }
-}

package/src/components/Tiles/index.ts

@@ -1,4 +0,0 @@
-export * from '@theme/components/Tiles/ThinTile';
-export * from '@theme/components/Tiles/TileHeader';
-export * from '@theme/components/Tiles/TileText';
-export * from '@theme/components/Tiles/WideTile';

package/src/components/Tiles/types.ts

@@ -1,19 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export type TextAlign = 'left' | 'right' | 'center' | 'justify';
-
-export interface TileProps {
-  header?: string;
-  icon?: string;
-  children?: string;
-  to?: string;
-  target?: string;
-  headerAlign?: TextAlign;
-  textAlign?: TextAlign;
-  bgColor?: string;
-  bgImage?: string;
-  color?: string;
-  className?: string;
-  style?: CSSProperties;
-  maxWidth?: string;
-}

package/src/components/Tooltip/index.ts

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

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/components/Typography/index.ts

@@ -1,7 +0,0 @@
-export * from '@theme/components/Typography/H1';
-export * from '@theme/components/Typography/H2';
-export * from '@theme/components/Typography/H3';
-export * from '@theme/components/Typography/Emphasis';
-export * from '@theme/components/Typography/SectionHeader';
-export * from '@theme/components/Typography/Typography';
-export * from '@theme/components/Typography/CompactTypography';

package/src/components/index.ts

@@ -1,29 +0,0 @@
-export * from '@theme/components/Button';
-export * from '@theme/components/CopyButton';
-export * from '@theme/components/EditPageButton';
-export * from '@theme/components/JsonViewer';
-export * from '@theme/components/Typography';
-export * from '@theme/components/SidebarLogo';
-export * from '@theme/components/CodeBlock';
-export * from '@theme/components/Tooltip';
-export * from '@theme/components/Panel';
-export * from '@theme/components/Feedback';
-export * from '@theme/components/Tag';
-export * from '@theme/components/TableOfContent';
-export * from '@theme/components/Profile';
-export * from '@theme/components/ColorModeSwitcher';
-export * from '@theme/components/Sidebar';
-export * from '@theme/components/Markdown';
-export * from '@theme/components/OpenApiDocs';
-export * from '@theme/components/SidebarActions';
-export * from '@theme/components/Filter';
-export * from '@theme/components/Tabs';
-export * from '@theme/components/Menu';
-export * from '@theme/components/Separator';
-export * from '@theme/components/Cards';
-export * from '@theme/components/Tiles';
-export * from '@theme/components/Breadcrumbs';
-export * from '@theme/components/Catalog';
-export * from '@theme/components/Product';
-export * from '@theme/components/Select';
-export * from '@theme/components/Dropdown';