@redocly/theme 0.1.12 → 0.1.13

package/src/utils/ClipboardService.ts

@@ -1,92 +1,9 @@
 export class ClipboardService {
   static isSupported(): boolean {
-    return (
-      typeof document !== 'undefined' &&
-      !!document.queryCommandSupported &&
-      document.queryCommandSupported('copy')
-    );
+    return typeof navigator?.clipboard !== 'undefined';
   }
 
-  static selectElement(element: HTMLDivElement | null): void {
-    if (!element) {
-      return;
-    }
-    let range;
-    let selection;
-    if ((document.body as any).createTextRange) {
-      range = (document.body as any).createTextRange();
-      range.moveToElementText(element);
-      range.select();
-    } else if (document.createRange && window.getSelection) {
-      selection = window.getSelection();
-      range = document.createRange();
-      range.selectNodeContents(element);
-      selection?.removeAllRanges();
-      selection?.addRange(range);
-    }
-  }
-
-  static deselect(): void {
-    if ((document as any).selection) {
-      (document as any).selection.empty();
-    } else if (window.getSelection) {
-      const selection = window.getSelection();
-      if (selection) {
-        selection.removeAllRanges();
-      }
-    }
-  }
-
-  static copySelected(): boolean {
-    let result;
-    try {
-      result = document.execCommand('copy');
-    } catch (err) {
-      result = false;
-    }
-    return result;
-  }
-
-  static copyElement(element: HTMLDivElement | null): boolean {
-    ClipboardService.selectElement(element);
-    const res = ClipboardService.copySelected();
-    if (res) {
-      ClipboardService.deselect();
-    }
-    return res;
-  }
-
-  static copyCustom(text: string): boolean {
-    const textArea = document.createElement('textarea');
-    textArea.style.position = 'fixed';
-    textArea.style.top = '0';
-    textArea.style.left = '0';
-
-    // Ensure it has a small width and height. Setting to 1px / 1em
-    // doesn't work as this gives a negative w/h on some browsers.
-    textArea.style.width = '2em';
-    textArea.style.height = '2em';
-
-    // We don't need padding, reducing the size if it does flash render.
-    textArea.style.padding = '0';
-
-    // Clean up any borders.
-    textArea.style.border = 'none';
-    textArea.style.outline = 'none';
-    textArea.style.boxShadow = 'none';
-
-    // Avoid flash of white box if rendered for any reason.
-    textArea.style.background = 'transparent';
-
-    textArea.value = text;
-
-    document.body.appendChild(textArea);
-
-    textArea.select();
-
-    const res = ClipboardService.copySelected();
-
-    document.body.removeChild(textArea);
-    return res;
+  static copyCustom(text: string): Promise<void> {
+    return navigator.clipboard.writeText(text);
   }
 }

package/src/utils/theme-helpers.ts

@@ -1,6 +1,36 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
 import { css } from 'styled-components';
 
+enum Token {
+  Comment = 'comment',
+  Prolog = 'prolog',
+  Doctype = 'doctype',
+  Cdata = 'cdata',
+  Punctuation = 'punctuation',
+  property = 'property',
+  Tag = 'tag',
+  Number = 'number',
+  Constant = 'constant',
+  Symbol = 'symbol',
+  Boolean = 'boolean',
+  Selector = 'selector',
+  String = 'string',
+  Char = 'char',
+  Builtin = 'builtin',
+  Inserted = 'inserted',
+  Operator = 'operator',
+  Entity = 'entity',
+  Url = 'url',
+  Variable = 'variable',
+  Atrule = 'atrule',
+  Keyword = 'keyword',
+  Regex = 'regex',
+  Important = 'important',
+  Bold = 'bold',
+  Italic = 'italic',
+  Deleted = 'deleted',
+}
+
 const typographyProperties = Object.entries({
   fontSize: 'font-size',
   fontWeight: 'font-weight',
@@ -32,3 +62,19 @@ export function typography(
     ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
   `;
 }
+
+export function generateCodeBlockTokens(): FlattenSimpleInterpolation | string {
+  let res = '';
+
+  for (const token of Object.values(Token)) {
+    const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
+    res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
+  }
+
+  return css`
+    pre& {
+      color: var(--code-block-tokens-default-color);
+    }
+    ${res}
+  `;
+}

package/ui/Typography.d.ts

@@ -1,73 +1,4 @@
-import { SimpleInterpolation } from 'styled-components';
 import { ColorProps, TypographyProps } from 'styled-system';
-export interface ITypography {
-    fontSize?: string;
-    fontWeight?: string | number;
-    fontFamily?: string;
-    lineHeight?: string;
-    color?: string;
-    transform?: string;
-    marginTop?: string;
-    marginRight?: string;
-    marginLeft?: string;
-    marginBottom?: string;
-    marginVertical?: string;
-    marginHorizontal?: string;
-}
-export declare const typographyTokens: {
-    typography: {
-        fontSize: string;
-        fontFamily: string;
-        lineHeight: string;
-    };
-    heading1: {
-        fontSize: string;
-        fontFamily: string;
-        fontWeight: string;
-        lineHeight: string;
-        color: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    heading2: {
-        fontSize: string;
-        fontFamily: string;
-        fontWeight: string;
-        lineHeight: string;
-        color: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    heading3: {
-        fontSize: string;
-        fontFamily: string;
-        fontWeight: string;
-        lineHeight: string;
-        color: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    heading4: {};
-    heading5: {};
-    heading6: {};
-    blockquote: {
-        color: string;
-    };
-    alert: {
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
-        marginTop: string;
-        marginBottom: string;
-        heading: {
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
-            transform: string;
-        };
-    };
-};
-export declare function typography(theme?: ITypography): string | SimpleInterpolation;
 export declare const Emphasis: import("styled-components").StyledComponent<"strong", any, {
     'data-component-name': string;
 }, "data-component-name">;
@@ -77,13 +8,13 @@ export declare const H1: import("styled-components").StyledComponent<"h1", any,
     mt?: string | undefined;
     mb?: string | undefined;
 }, "data-component-name">;
-export declare const H2: import("styled-components").StyledComponent<"h1", any, {
+export declare const H2: import("styled-components").StyledComponent<"h2", any, {
     'data-component-name': string;
 } & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     mt?: string | undefined;
     mb?: string | undefined;
 }, "data-component-name">;
-export declare const H3: import("styled-components").StyledComponent<"h1", any, {
+export declare const H3: import("styled-components").StyledComponent<"h3", any, {
     'data-component-name': string;
 } & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     mt?: string | undefined;

package/ui/Typography.js

@@ -3,126 +3,48 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompactTypography = exports.Typography = exports.SectionHeader = exports.H3 = exports.H2 = exports.H1 = exports.Emphasis = exports.typography = exports.typographyTokens = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
+exports.CompactTypography = exports.Typography = exports.SectionHeader = exports.H3 = exports.H2 = exports.H1 = exports.Emphasis = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
 var styled_system_1 = require("styled-system");
-exports.typographyTokens = {
-    typography: {
-        fontSize: 'var(--font-size-base)',
-        fontFamily: 'var(--h-font-family)',
-        lineHeight: 'var(--line-height-base)',
-    },
-    heading1: {
-        fontSize: 'var(--h1-font-size)',
-        fontFamily: 'var(--h-font-family)',
-        fontWeight: 'var(--h1-font-weight, var(--h-font-weight))',
-        lineHeight: 'var(--h1-line-height)',
-        color: 'var(--h-color)',
-        marginTop: 'var(--h1-margin-top)',
-        marginBottom: 'var(--h1-margin-bottom)',
-    },
-    heading2: {
-        fontSize: 'var(--h2-font-size)',
-        fontFamily: 'var(--h-font-family)',
-        fontWeight: 'var(--h2-font-weight, var(--h-font-weight))',
-        lineHeight: 'var(--h2-line-height)',
-        color: 'var(--h-color)',
-        marginTop: 'var(--h2-margin-top)',
-        marginBottom: 'var(--h2-margin-bottom)',
-    },
-    heading3: {
-        fontSize: 'var(--h3-font-size)',
-        fontFamily: 'var(--h-font-family)',
-        fontWeight: 'var(--h3-font-weight, var(--h-font-weight))',
-        lineHeight: 'var(--h3-line-height)',
-        color: 'var(--h-color)',
-        marginTop: 'var(--h3-margin-top)',
-        marginBottom: 'var(--h3-margin-bottom)',
-    },
-    heading4: {},
-    heading5: {},
-    heading6: {},
-    blockquote: {
-        color: 'var(--color-content)',
-    },
-    alert: {
-        fontSize: 'var(--admonition-font-size)',
-        fontWeight: 'var(--admonition-font-weight)',
-        lineHeight: 'var(--admonition-line-height)',
-        marginTop: 'var(--admonition-margin-vertical)',
-        marginBottom: 'var(--admonition-margin-vertical)',
-        heading: {
-            fontSize: 'var(--admonition-heading-font-size)',
-            fontWeight: 'var(--admonition-heading-font-weight)',
-            lineHeight: 'var(--admonition-line-height)',
-            transform: 'var(--admonition-heading-transform)',
-        },
-    },
-};
-function typography(theme) {
-    if (!theme)
-        return '';
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-transform: ", ";\n  "], ["\n    font-size: ", ";\n    font-weight: ", ";\n    font-family: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-transform: ", ";\n  "])), theme.fontSize || '', theme.fontWeight || '', theme.fontFamily || '', theme.lineHeight || '', theme.color || '', theme.transform || '');
-}
-exports.typography = typography;
+var utils_1 = require("../utils");
 exports.Emphasis = styled_components_1.default.strong.attrs(function () { return ({
     'data-component-name': 'ui/Typography/Emphasis',
-}); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n"], ["\n  font-weight: var(--font-weight-bold);\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n"], ["\n  font-weight: var(--font-weight-bold);\n"])));
 exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
     'data-component-name': 'ui/Typography/H1',
-}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading1), function (_a) {
+}); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.35em 0 0.9em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), (0, utils_1.typography)('h1', 'h'), function (_a) {
     var mt = _a.mt;
     return mt && "margin-top: ".concat(mt, ";");
 }, function (_a) {
     var mb = _a.mb;
     return mb && "margin-bottom: ".concat(mb, ";");
 }, styled_system_1.color, styled_system_1.typography);
-exports.H2 = styled_components_1.default.h1.attrs(function () { return ({
+exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
     'data-component-name': 'ui/Typography/H2',
-}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading2), function (_a) {
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), (0, utils_1.typography)('h2', 'h'), function (_a) {
     var mt = _a.mt;
     return mt && "margin-top: ".concat(mt, ";");
 }, function (_a) {
     var mb = _a.mb;
     return mb && "margin-bottom: ".concat(mb, ";");
 }, styled_system_1.color, styled_system_1.typography);
-exports.H3 = styled_components_1.default.h1.attrs(function () { return ({
+exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
     'data-component-name': 'ui/Typography/H3',
-}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), typography(exports.typographyTokens.heading3), function (_a) {
+}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"], ["\n  ", ";\n  margin: 1.25em 0 0.8em;\n  && {\n    ", "\n    ", "\n    ", "\n    ", "\n  }\n"])), (0, utils_1.typography)('h3', 'h'), function (_a) {
     var mt = _a.mt;
     return mt && "margin-top: ".concat(mt, ";");
 }, function (_a) {
     var mb = _a.mb;
     return mb && "margin-bottom: ".concat(mb, ";");
 }, styled_system_1.color, styled_system_1.typography);
-exports.SectionHeader = styled_components_1.default.h2(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"])));
+exports.SectionHeader = styled_components_1.default.h2(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"])));
 exports.Typography = styled_components_1.default.p.attrs(function () { return ({
     'data-component-name': 'ui/Typography/Typography',
-}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"], ["\n  ", ";\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"])), typography(exports.typographyTokens.typography), styled_system_1.color, function (_a) {
+}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"], ["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"])), styled_system_1.color, function (_a) {
     var mt = _a.mt;
     return mt || '1em';
 }, function (_a) {
@@ -133,5 +55,5 @@ exports.CompactTypography = (0, styled_components_1.default)(exports.Typography)
     mt: '0em',
     mb: '0em',
     'data-component-name': 'ui/Typography/CompactTypography',
-}); })(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/utils/ClipboardService.d.ts

@@ -1,8 +1,4 @@
 export declare class ClipboardService {
     static isSupported(): boolean;
-    static selectElement(element: HTMLDivElement | null): void;
-    static deselect(): void;
-    static copySelected(): boolean;
-    static copyElement(element: HTMLDivElement | null): boolean;
-    static copyCustom(text: string): boolean;
+    static copyCustom(text: string): Promise<void>;
 }

package/utils/ClipboardService.js

@@ -5,81 +5,10 @@ var ClipboardService = /** @class */ (function () {
     function ClipboardService() {
     }
     ClipboardService.isSupported = function () {
-        return (typeof document !== 'undefined' &&
-            !!document.queryCommandSupported &&
-            document.queryCommandSupported('copy'));
-    };
-    ClipboardService.selectElement = function (element) {
-        if (!element) {
-            return;
-        }
-        var range;
-        var selection;
-        if (document.body.createTextRange) {
-            range = document.body.createTextRange();
-            range.moveToElementText(element);
-            range.select();
-        }
-        else if (document.createRange && window.getSelection) {
-            selection = window.getSelection();
-            range = document.createRange();
-            range.selectNodeContents(element);
-            selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
-            selection === null || selection === void 0 ? void 0 : selection.addRange(range);
-        }
-    };
-    ClipboardService.deselect = function () {
-        if (document.selection) {
-            document.selection.empty();
-        }
-        else if (window.getSelection) {
-            var selection = window.getSelection();
-            if (selection) {
-                selection.removeAllRanges();
-            }
-        }
-    };
-    ClipboardService.copySelected = function () {
-        var result;
-        try {
-            result = document.execCommand('copy');
-        }
-        catch (err) {
-            result = false;
-        }
-        return result;
-    };
-    ClipboardService.copyElement = function (element) {
-        ClipboardService.selectElement(element);
-        var res = ClipboardService.copySelected();
-        if (res) {
-            ClipboardService.deselect();
-        }
-        return res;
+        return typeof (navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) !== 'undefined';
     };
     ClipboardService.copyCustom = function (text) {
-        var textArea = document.createElement('textarea');
-        textArea.style.position = 'fixed';
-        textArea.style.top = '0';
-        textArea.style.left = '0';
-        // Ensure it has a small width and height. Setting to 1px / 1em
-        // doesn't work as this gives a negative w/h on some browsers.
-        textArea.style.width = '2em';
-        textArea.style.height = '2em';
-        // We don't need padding, reducing the size if it does flash render.
-        textArea.style.padding = '0';
-        // Clean up any borders.
-        textArea.style.border = 'none';
-        textArea.style.outline = 'none';
-        textArea.style.boxShadow = 'none';
-        // Avoid flash of white box if rendered for any reason.
-        textArea.style.background = 'transparent';
-        textArea.value = text;
-        document.body.appendChild(textArea);
-        textArea.select();
-        var res = ClipboardService.copySelected();
-        document.body.removeChild(textArea);
-        return res;
+        return navigator.clipboard.writeText(text);
     };
     return ClipboardService;
 }());

package/utils/theme-helpers.d.ts

@@ -1,3 +1,4 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
 export declare function getTypographyCssRulesByComponentName(componentName: string, fallbackName?: string): Record<string, string>;
 export declare function typography(componentName: string, fallbackName?: string): FlattenSimpleInterpolation;
+export declare function generateCodeBlockTokens(): FlattenSimpleInterpolation | string;

package/utils/theme-helpers.js

@@ -4,8 +4,38 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
+exports.generateCodeBlockTokens = exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
 var styled_components_1 = require("styled-components");
+var Token;
+(function (Token) {
+    Token["Comment"] = "comment";
+    Token["Prolog"] = "prolog";
+    Token["Doctype"] = "doctype";
+    Token["Cdata"] = "cdata";
+    Token["Punctuation"] = "punctuation";
+    Token["property"] = "property";
+    Token["Tag"] = "tag";
+    Token["Number"] = "number";
+    Token["Constant"] = "constant";
+    Token["Symbol"] = "symbol";
+    Token["Boolean"] = "boolean";
+    Token["Selector"] = "selector";
+    Token["String"] = "string";
+    Token["Char"] = "char";
+    Token["Builtin"] = "builtin";
+    Token["Inserted"] = "inserted";
+    Token["Operator"] = "operator";
+    Token["Entity"] = "entity";
+    Token["Url"] = "url";
+    Token["Variable"] = "variable";
+    Token["Atrule"] = "atrule";
+    Token["Keyword"] = "keyword";
+    Token["Regex"] = "regex";
+    Token["Important"] = "important";
+    Token["Bold"] = "bold";
+    Token["Italic"] = "italic";
+    Token["Deleted"] = "deleted";
+})(Token || (Token = {}));
 var typographyProperties = Object.entries({
     fontSize: 'font-size',
     fontWeight: 'font-weight',
@@ -29,4 +59,14 @@ function typography(componentName, fallbackName) {
     return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), getTypographyCssRulesByComponentName(componentName, fallbackName));
 }
 exports.typography = typography;
-var templateObject_1;
+function generateCodeBlockTokens() {
+    var res = '';
+    for (var _i = 0, _a = Object.values(Token); _i < _a.length; _i++) {
+        var token = _a[_i];
+        var cssTokenColorVariableName = "--code-block-tokens-".concat(token, "-color");
+        res += ".token.".concat(token, " { color: var(").concat(cssTokenColorVariableName, ")}; }\n");
+    }
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    pre& {\n      color: var(--code-block-tokens-default-color);\n    }\n    ", "\n  "], ["\n    pre& {\n      color: var(--code-block-tokens-default-color);\n    }\n    ", "\n  "])), res);
+}
+exports.generateCodeBlockTokens = generateCodeBlockTokens;
+var templateObject_1, templateObject_2;

package/Markdown/CodeSample/CodeSample.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare type CodeSampleProps = {
-    language: string;
-    highlighted: string;
-    rawContent: string;
-};
-export declare function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element;
-export {};

package/Markdown/CodeSample/CodeSample.js

@@ -1,30 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodeSample = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var ClipboardService_1 = require("../../utils/ClipboardService");
-var styled_1 = require("../../Markdown/CodeSample/styled");
-function CodeSample(_a) {
-    var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
-    var langClassName = language ? "language-".concat(language) : '';
-    var _b = (0, react_1.useState)(false), isCopied = _b[0], setIsCopied = _b[1];
-    var copyCode = function (code) {
-        ClipboardService_1.ClipboardService.copyCustom(code);
-        setIsCopied(true);
-        setTimeout(function () { return setIsCopied(false); }, 1500);
-    };
-    return ((0, jsx_runtime_1.jsxs)(styled_1.Wrapper, __assign({ className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" }, { children: [(0, jsx_runtime_1.jsxs)(styled_1.CodeSampleButtonContainer, __assign({ onClick: function () { return copyCode(rawContent); } }, { children: [!isCopied && (0, jsx_runtime_1.jsx)(styled_1.CopyCodeButton, __assign({ title: "Copy the code snippet" }, { children: "Copy" })), isCopied && (0, jsx_runtime_1.jsx)(styled_1.DoneIndicator, { children: "Copied" })] })), (0, jsx_runtime_1.jsx)("pre", __assign({ className: langClassName }, { children: (0, jsx_runtime_1.jsx)("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }) }))] })));
-}
-exports.CodeSample = CodeSample;

package/Markdown/CodeSample/index.d.ts

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

package/Markdown/CodeSample/index.js

@@ -1,19 +0,0 @@
-"use strict";
-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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../Markdown/CodeSample/CodeSample"), exports);
-__exportStar(require("../../Markdown/CodeSample/styled"), exports);
-__exportStar(require("../../Markdown/CodeSample/types"), exports);

package/Markdown/CodeSample/styled.d.ts

@@ -1,5 +0,0 @@
-export declare const CodeButton: import("styled-components").FlattenSimpleInterpolation;
-export declare const CodeSampleButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CopyCodeButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DoneIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;