@redocly/theme 0.1.12 → 0.1.13

package/Markdown/CodeSample/styled.js

@@ -1,109 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer = exports.CodeButton = void 0;
-var polished_1 = require("polished");
-var styled_components_1 = __importStar(require("styled-components"));
-var Typography_1 = require("../../ui/Typography");
-function genTokens(tokens) {
-    var _a;
-    if (!tokens) {
-        return '';
-    }
-    var res = '';
-    for (var _i = 0, _b = Object.keys(tokens); _i < _b.length; _i++) {
-        var token = _b[_i];
-        if (token !== 'default') {
-            res += ".token.".concat(token, " { color: ").concat((_a = tokens[token]) === null || _a === void 0 ? void 0 : _a.color, "; }\n");
-        }
-    }
-    if (tokens.default) {
-        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      pre& {\n        ", "\n      }\n      ", "\n    "], ["\n      pre& {\n        ", "\n      }\n      ", "\n    "])), (0, Typography_1.typography)(tokens.default), res);
-    }
-    return res;
-}
-var getCodeBlockBackgroundColor = function (theme) {
-    return Array.isArray(theme.codeBlock.backgroundColor)
-        ? theme.codeBlock.backgroundColor[0]
-        : theme.codeBlock.backgroundColor;
-};
-exports.CodeButton = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n"])));
-exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
-exports.CopyCodeButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  display: none;\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  ", "\n  display: none;\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), exports.CodeButton);
-exports.DoneIndicator = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  cursor: default;\n"], ["\n  ", "\n  cursor: default;\n"])), exports.CodeButton);
-var lightStyleCodeButton = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: ", ";\n    outline: 1px solid ", ";\n  }\n"], ["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: ", ";\n    outline: 1px solid ", ";\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.visibleText;
-}, exports.CopyCodeButton, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.visibleText;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.visibleText;
-});
-var darkStyleCodeButton = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: white;\n    color: ", ";\n    background-color: ", ";\n  }\n"], ["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: white;\n    color: ", ";\n    background-color: ", ";\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.visibleText;
-}, exports.CopyCodeButton, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.contrastText;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.copyButton.background;
-});
-var lightStyleTokens = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: #999988;\n    font-style: italic;\n  }\n\n  .token.namespace {\n    opacity: 0.7;\n  }\n\n  .token.string,\n  .token.attr-value {\n    color: #e3116c;\n  }\n  .token.punctuation,\n  .token.operator {\n    color: #393a34; /* no highlight */\n  }\n\n  .token.entity,\n  .token.url,\n  .token.symbol,\n  .token.number,\n  .token.boolean,\n  .token.variable,\n  .token.constant,\n  .token.property,\n  .token.regex,\n  .token.inserted {\n    color: #36acaa;\n  }\n\n  .token.atrule,\n  .token.keyword,\n  .token.attr-name,\n  .language-autohotkey .token.selector {\n    color: #00a4db;\n  }\n\n  .token.function,\n  .token.deleted,\n  .language-autohotkey .token.tag {\n    color: #9a050f;\n  }\n\n  .token.tag,\n  .token.selector,\n  .language-autohotkey .token.keyword {\n    color: #00009f;\n  }\n"], ["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: #999988;\n    font-style: italic;\n  }\n\n  .token.namespace {\n    opacity: 0.7;\n  }\n\n  .token.string,\n  .token.attr-value {\n    color: #e3116c;\n  }\n  .token.punctuation,\n  .token.operator {\n    color: #393a34; /* no highlight */\n  }\n\n  .token.entity,\n  .token.url,\n  .token.symbol,\n  .token.number,\n  .token.boolean,\n  .token.variable,\n  .token.constant,\n  .token.property,\n  .token.regex,\n  .token.inserted {\n    color: #36acaa;\n  }\n\n  .token.atrule,\n  .token.keyword,\n  .token.attr-name,\n  .language-autohotkey .token.selector {\n    color: #00a4db;\n  }\n\n  .token.function,\n  .token.deleted,\n  .language-autohotkey .token.tag {\n    color: #9a050f;\n  }\n\n  .token.tag,\n  .token.selector,\n  .language-autohotkey .token.keyword {\n    color: #00009f;\n  }\n"])));
-var darkStyleTokens = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"], ["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"])));
-exports.Wrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", "\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n\n  pre {\n    white-space: ", ";\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n\n    font-family: ", ";\n    background-color: ", ";\n\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n\n      color: ", ";\n\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: ", ";\n  }\n\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", "\n    ", "\n  }\n"], ["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", "\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n\n  pre {\n    white-space: ", ";\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n\n    font-family: ", ";\n    background-color: ", ";\n\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n\n      color: ", ";\n\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: ", ";\n  }\n\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", "\n    ", "\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return (0, polished_1.getLuminance)(getCodeBlockBackgroundColor(theme)) < 0.25
-        ? darkStyleCodeButton
-        : lightStyleCodeButton;
-}, exports.CodeSampleButtonContainer, exports.CopyCodeButton, function (_a) {
-    var theme = _a.theme;
-    return (theme.typography.code.wrap ? 'pre-wrap' : 'pre');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.code.fontFamily;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.codeBlock.backgroundColor;
-}, function (_a) {
-    var theme = _a.theme;
-    return (0, polished_1.getLuminance)(theme.codeBlock.backgroundColor) < 0.5 ? 'white' : '#393A34';
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.shape.borderRadius;
-}, function (_a) {
-    var theme = _a.theme;
-    return (0, polished_1.getLuminance)(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens;
-}, function (_a) {
-    var theme = _a.theme;
-    return genTokens(theme.codeBlock.tokens);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/Markdown/CodeSample/types.d.ts

@@ -1,9 +0,0 @@
-import { ITypography } from '../../ui/Typography';
-export declare type Token = 'comment' | 'prolog' | 'doctype' | 'cdata' | 'punctuation' | 'property' | 'tag' | 'number' | 'constant' | 'symbol' | 'boolean' | 'selector' | 'string' | 'char' | 'builtin' | 'inserted' | 'operator' | 'entity' | 'url' | 'variable' | 'atrule' | 'keyword' | 'regex' | 'important' | 'important' | 'bold' | 'italic' | 'entity' | 'deleted';
-export declare type Tokens = {
-    [P in Token]?: {
-        color: string;
-    };
-} & {
-    default?: ITypography;
-};

package/Markdown/CodeSample/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -1,39 +0,0 @@
-import React, { useState } from 'react';
-
-import { ClipboardService } from '@theme/utils/ClipboardService';
-import {
-  Wrapper,
-  DoneIndicator,
-  CopyCodeButton,
-  CodeSampleButtonContainer,
-} from '@theme/Markdown/CodeSample/styled';
-
-type CodeSampleProps = {
-  language: string;
-  highlighted: string;
-  rawContent: string;
-};
-
-export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
-  const langClassName = language ? `language-${language}` : '';
-
-  const [isCopied, setIsCopied] = useState(false);
-
-  const copyCode = (code: string) => {
-    ClipboardService.copyCustom(code);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), 1500);
-  };
-
-  return (
-    <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
-      <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
-        {!isCopied && <CopyCodeButton title="Copy the code snippet">Copy</CopyCodeButton>}
-        {isCopied && <DoneIndicator>Copied</DoneIndicator>}
-      </CodeSampleButtonContainer>
-      <pre className={langClassName}>
-        <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
-      </pre>
-    </Wrapper>
-  );
-}

package/src/Markdown/CodeSample/index.ts

@@ -1,3 +0,0 @@
-export * from '@theme/Markdown/CodeSample/CodeSample';
-export * from '@theme/Markdown/CodeSample/styled';
-export * from '@theme/Markdown/CodeSample/types';

package/src/Markdown/CodeSample/styled.ts

@@ -1,289 +0,0 @@
-import { getLuminance } from 'polished';
-import styled, { css } from 'styled-components';
-
-import { typography } from '@theme/ui/Typography';
-import type { Tokens, Token } from '@theme/Markdown/CodeSample/types';
-import { AppTheme } from '@theme/types/portal';
-
-function genTokens(tokens?: Tokens | null) {
-  if (!tokens) {
-    return '';
-  }
-
-  let res = '';
-
-  for (const token of Object.keys(tokens)) {
-    if (token !== 'default') {
-      res += `.token.${token} { color: ${tokens[token as Token]?.color}; }\n`;
-    }
-  }
-
-  if (tokens.default) {
-    return css`
-      pre& {
-        ${typography(tokens.default)}
-      }
-      ${res}
-    `;
-  }
-
-  return res;
-}
-
-const getCodeBlockBackgroundColor = (theme: AppTheme) =>
-  Array.isArray(theme.codeBlock.backgroundColor)
-    ? theme.codeBlock.backgroundColor[0]
-    : theme.codeBlock.backgroundColor;
-
-export const CodeButton = css`
-  padding: 0 5px;
-  border-radius: 4px;
-`;
-
-export const CodeSampleButtonContainer = styled.div`
-  position: absolute;
-  top: 12px;
-  right: 5px;
-`;
-
-export const CopyCodeButton = styled.div`
-  ${CodeButton}
-  display: none;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
-export const DoneIndicator = styled.div`
-  ${CodeButton}
-  cursor: default;
-`;
-
-const lightStyleCodeButton = css`
-  ${CopyCodeButton},
-  ${DoneIndicator} {
-    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
-  }
-
-  ${CopyCodeButton}:hover {
-    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
-    outline: 1px solid ${({ theme }) => theme.codeBlock.copyButton.visibleText};
-  }
-`;
-
-const darkStyleCodeButton = css`
-  ${CopyCodeButton},
-  ${DoneIndicator} {
-    color: ${({ theme }) => theme.codeBlock.copyButton.visibleText};
-  }
-
-  ${CopyCodeButton}:hover {
-    color: white;
-    color: ${({ theme }) => theme.codeBlock.copyButton.contrastText};
-    background-color: ${({ theme }) => theme.codeBlock.copyButton.background};
-  }
-`;
-
-const lightStyleTokens = css`
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: #999988;
-    font-style: italic;
-  }
-
-  .token.namespace {
-    opacity: 0.7;
-  }
-
-  .token.string,
-  .token.attr-value {
-    color: #e3116c;
-  }
-  .token.punctuation,
-  .token.operator {
-    color: #393a34; /* no highlight */
-  }
-
-  .token.entity,
-  .token.url,
-  .token.symbol,
-  .token.number,
-  .token.boolean,
-  .token.variable,
-  .token.constant,
-  .token.property,
-  .token.regex,
-  .token.inserted {
-    color: #36acaa;
-  }
-
-  .token.atrule,
-  .token.keyword,
-  .token.attr-name,
-  .language-autohotkey .token.selector {
-    color: #00a4db;
-  }
-
-  .token.function,
-  .token.deleted,
-  .language-autohotkey .token.tag {
-    color: #9a050f;
-  }
-
-  .token.tag,
-  .token.selector,
-  .language-autohotkey .token.keyword {
-    color: #00009f;
-  }
-`;
-
-const darkStyleTokens = css`
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: hsl(30, 20%, 50%);
-  }
-
-  .token.property,
-  .token.tag,
-  .token.number,
-  .token.constant,
-  .token.symbol {
-    color: #62bff9;
-  }
-  .token.boolean {
-    color: firebrick;
-  }
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: #a0fbaa;
-    & + a,
-    & + a:visited {
-      color: #4ed2ba;
-      text-decoration: underline;
-    }
-  }
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
-    color: hsl(40, 90%, 60%);
-  }
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: hsl(350, 40%, 70%);
-  }
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-
-  .token.deleted {
-    color: red;
-  }
-`;
-
-export const Wrapper = styled.div`
-  overflow: auto;
-  border-radius: 4px;
-  position: relative;
-
-  ${({ theme }) =>
-    getLuminance(getCodeBlockBackgroundColor(theme)) < 0.25
-      ? darkStyleCodeButton
-      : lightStyleCodeButton}
-
-  &:hover {
-    ${CodeSampleButtonContainer} ${CopyCodeButton} {
-      display: block;
-    }
-  }
-
-  pre {
-    white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
-    color: white;
-    padding: 12px 14px 15px 14px;
-    overflow-x: auto;
-    line-height: normal;
-    border-radius: 4px;
-
-    font-family: ${({ theme }) => theme.typography.code.fontFamily};
-    background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
-
-    code {
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-
-      color: ${({ theme }) =>
-        getLuminance(theme.codeBlock.backgroundColor) < 0.5 ? 'white' : '#393A34'};
-
-      &:before,
-      &:after {
-        content: none;
-      }
-    }
-  }
-
-  pre[class*='language-'] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
-    border: 0;
-    border-radius: ${({ theme }) => theme.shape.borderRadius};
-  }
-
-  code[class='language-text'] {
-    line-height: 1.2em;
-    display: inline-flex;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-
-    .token.important,
-    .token.bold {
-      font-weight: bold;
-    }
-    .token.italic {
-      font-style: italic;
-    }
-    .token.entity {
-      cursor: help;
-    }
-    .token.punctuation {
-      opacity: 0.7;
-    }
-    .namespace {
-      opacity: 0.7;
-    }
-
-    ${({ theme }) =>
-      getLuminance(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens}
-    ${({ theme }) => genTokens(theme.codeBlock.tokens)}
-  }
-`;

package/src/Markdown/CodeSample/types.ts

@@ -1,40 +0,0 @@
-import { ITypography } from '@theme/ui/Typography';
-
-export type Token =
-  | 'comment'
-  | 'prolog'
-  | 'doctype'
-  | 'cdata'
-  | 'punctuation'
-  | 'property'
-  | 'tag'
-  | 'number'
-  | 'constant'
-  | 'symbol'
-  | 'boolean'
-  | 'selector'
-  | 'string'
-  | 'char'
-  | 'builtin'
-  | 'inserted'
-  | 'operator'
-  | 'entity'
-  | 'url'
-  | 'variable'
-  | 'atrule'
-  | 'keyword'
-  | 'regex'
-  | 'important'
-  | 'important'
-  | 'bold'
-  | 'italic'
-  | 'entity'
-  | 'deleted';
-
-export type Tokens = {
-  [P in Token]?: {
-    color: string;
-  };
-} & {
-  default?: ITypography;
-};