@redocly/theme
Version:
Shared UI components lib
360 lines (312 loc) • 13.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.darkMode = void 0;
const styled_components_1 = require("styled-components");
const variables_dark_1 = require("../../components/Scorecard/variables.dark");
const variables_dark_2 = require("../../markdoc/components/Mermaid/variables.dark");
const variables_dark_3 = require("../../components/Menu/variables.dark");
const variables_dark_4 = require("../../components/Button/variables.dark");
const variables_dark_5 = require("../../components/Buttons/variables.dark");
const variables_dark_6 = require("../../components/Segmented/variables.dark");
const variables_dark_7 = require("../../icons/CheckboxIcon/variables.dark");
const variables_dark_8 = require("../../components/Tag/variables.dark");
const variables_dark_9 = require("../../components/StatusCode/variables.dark");
const variables_dark_10 = require("../../components/Switch/variables.dark");
const variables_dark_11 = require("../../markdoc/components/Cards/variables.dark");
const variables_dark_12 = require("../../components/Catalog/variables.dark");
const variables_dark_13 = require("../../components/PageActions/variables.dark");
const variables_dark_14 = require("../../components/Tooltip/variables.dark");
const variables_dark_15 = require("../../components/Banner/variables.dark");
const variables_dark_16 = require("../../components/Admonition/variables.dark");
const variables_dark_17 = require("../../components/SvgViewer/variables.dark");
const replayDarkMode = (0, styled_components_1.css) `
/**
* @tokens Replay Colors
* @presenter Color
*/
--replay-undefined-variable-color: rgb(255, 138, 162); // @presenter Color
--replay-defined-variable-color: rgb(110, 171, 250); // @presenter Color
--replay-server-variable-color: rgb(179, 166, 249); // @presenter Color
--replay-path-parameter-color: rgb(8, 199, 224); // @presenter Color
--replay-undefined-variable-bg-color: rgba(82, 10, 24, 0.16); // @presenter Color
--replay-defined-variable-bg-color: rgba(12, 76, 158, 0.16); // @presenter Color
--replay-server-variable-bg-color: rgba(31, 10, 144, 0.16); // @presenter Color
--replay-path-parameter-bg-color: rgba(5, 88, 99, 0.16); // @presenter Color
--replay-undefined-variable-bg-color-hover: rgba(82, 10, 24, 0.4); // @presenter Color
--replay-defined-variable-bg-color-hover: rgba(12, 76, 158, 0.4); // @presenter Color
--replay-server-variable-bg-color-hover: rgba(31, 10, 144, 0.4); // @presenter Color
--replay-path-parameter-bg-color-hover: rgba(5, 88, 99, 0.4); // @presenter Color
--replay-runtime-expression-color: rgba(147, 166, 249, 1); // @presenter Color
--replay-runtime-expression-bg-color: rgba(147, 166, 249, 0.16); // @presenter Color
--replay-operators-color: rgba(168, 143, 88, 1); // @presenter Color
// @tokens End
`;
const badgesDarkMode = (0, styled_components_1.css) `
/**
* @tokens Audience Badge
*/
--badge-audience-text-color: var(--text-color-secondary); // @presenter Color
--badge-audience-bg-color: var(--color-warm-grey-4); // @presenter Color
// @tokens End
`;
exports.darkMode = (0, styled_components_1.css) `
/* === Dark Theme Colors === */
// The color palette has been modified for a dark theme. According to the logic,
// each color in the light palette is shifted one position towards the end, with the
// first color becoming the last, the second becoming the second-to-last, and so on
/**
* @tokens Dark Base Colors
* @presenter Color
*/
--color-warm-grey-1: #1a1c21;
--color-warm-grey-2: #22242b;
--color-warm-grey-3: #2a2b33;
--color-warm-grey-4: #3b3c45;
--color-warm-grey-5: #555761;
--color-warm-grey-6: #6e6f7a;
--color-warm-grey-7: #9b9ca8;
--color-warm-grey-8: #c4c6d1;
--color-warm-grey-9: #dcdde5;
--color-warm-grey-10: #ededf2;
--color-warm-grey-11: #fbfbfc;
--color-purple-1: #2c2770;
--color-purple-2: #2b2480;
--color-purple-3: #291f99;
--color-purple-4: #4034ab;
--color-purple-5: #5b4ccc;
--color-purple-6: #7a69ee;
--color-purple-7: #9c8ef4;
--color-purple-8: #b3a6f9;
--color-purple-9: #cec4fd;
--color-purple-10: #e6e1fe;
--color-purple-11: #f3f1fe;
--color-blueberry-1: #232a61;
--color-blueberry-2: #222d7a;
--color-blueberry-3: #1e2f93;
--color-blueberry-4: #2f46b7;
--color-blueberry-5: #4561db;
--color-blueberry-6: #5f81ff;
--color-blueberry-7: #87a3ff;
--color-blueberry-8: #9fb7ff;
--color-blueberry-9: #bfd0ff;
--color-blueberry-10: #dfe8ff;
--color-blueberry-11: #F0F4F;
--color-blue-1: #233061;
--color-blue-2: #223d7a;
--color-blue-3: #1f4399;
--color-blue-4: #2558b8;
--color-blue-5: #3072db;
--color-blue-6: #1f7cff;
--color-blue-7: #6eabfa;
--color-blue-8: #90c2fc;
--color-blue-9: #b3d7fc;
--color-blue-10: #d9ebfc;
--color-blue-11: #edf5fc;
--color-sky-1: #1f3757;
--color-sky-2: #1d4479;
--color-sky-3: #155393;
--color-sky-4: #0569b6;
--color-sky-5: #088cda;
--color-sky-6: #0bb4fe;
--color-sky-7: #47d2fe;
--color-sky-8: #6ce5fe;
--color-sky-9: #9df4fe;
--color-sky-10: #cefdfe;
--color-sky-11: #eafefe;
--color-turquoise-1: #1c394f;
--color-turquoise-2: #1c496b;
--color-turquoise-3: #125a81;
--color-turquoise-4: #0475a1;
--color-turquoise-5: #059cc0;
--color-turquoise-6: #08c7e0;
--color-turquoise-7: #41e6ec;
--color-turquoise-8: #67f5ef;
--color-turquoise-9: #9afbef;
--color-turquoise-10: #ccfdf3;
--color-turquoise-11: #ebfdf9;
--color-persian-green-1: #193b47;
--color-persian-green-2: #143d4d;
--color-persian-green-3: #0f4f5d;
--color-persian-green-4: #036a73;
--color-persian-green-5: #048a89;
--color-persian-green-6: #06a192;
--color-persian-green-7: #37c6ab;
--color-persian-green-8: #5fe2be;
--color-persian-green-9: #97f5d2;
--color-persian-green-10: #cafae4;
--color-persian-green-11: #ebfaf3;
--color-green-1: #1a4d40;
--color-green-2: #195848;
--color-green-3: #136a4d;
--color-green-4: #0e8450;
--color-green-5: #149e53;
--color-green-6: #1cb854;
--color-green-7: #4dd470;
--color-green-8: #72e985;
--color-green-9: #a3f7a9;
--color-green-10: #d2fbd0;
--color-green-11: #edfbec;
--color-grass-1: #1f4d2d;
--color-grass-2: #164f29;
--color-grass-3: #135f25;
--color-grass-4: #167625;
--color-grass-5: #208d28;
--color-grass-6: #2fa52d;
--color-grass-7: #66c95b;
--color-grass-8: #93e380;
--color-grass-9: #c2f6ae;
--color-grass-10: #e3fad6;
--color-grass-11: #f0faeb;
--color-carrot-1: #5c3721;
--color-carrot-2: #7a4222;
--color-carrot-3: #934c1a;
--color-carrot-4: #b75f17;
--color-carrot-5: #db7e21;
--color-carrot-6: #ffa02e;
--color-carrot-7: #ffbe62;
--color-carrot-8: #ffd181;
--color-carrot-9: #ffe4ab;
--color-carrot-10: #fff0cc;
--color-carrot-11: #fff8e8;
--color-orange-1: #612729;
--color-orange-2: #7a2024;
--color-orange-3: #931e1a;
--color-orange-4: #b72111;
--color-orange-5: #db3918;
--color-orange-6: #ff5722;
--color-orange-7: #ff8c59;
--color-orange-8: #ffad7a;
--color-orange-9: #ffcea6;
--color-orange-10: #ffead2;
--color-orange-11: #fff4e8;
--color-red-1: #612235;
--color-red-2: #752137;
--color-red-3: #8d1c37;
--color-red-4: #af1631;
--color-red-5: #d12030;
--color-red-6: #f42d2d;
--color-red-7: #f86d60;
--color-red-8: #fb9580;
--color-red-9: #fdc0ab;
--color-red-10: #fee3d4;
--color-red-11: #fef1ea;
--color-raspberry-1: #612241;
--color-raspberry-2: #77214c;
--color-raspberry-3: #901d56;
--color-raspberry-4: #b3185e;
--color-raspberry-5: #d6236a;
--color-raspberry-6: #f9316d;
--color-raspberry-7: #fb6382;
--color-raspberry-8: #fd838f;
--color-raspberry-9: #feacad;
--color-raspberry-10: #fed9d5;
--color-raspberry-11: #fef0ef;
--color-magenta-1: #5e1a48;
--color-magenta-2: #791f5a;
--color-magenta-3: #931a65;
--color-magenta-4: #b6006a;
--color-magenta-5: #da0078;
--color-magenta-6: #fe0184;
--color-magenta-7: #fe409c;
--color-magenta-8: #fe66aa;
--color-magenta-9: #fe99c3;
--color-magenta-10: #fecce0;
--color-magenta-11: #feeff5;
--color-black: #ffffff;
--color-white: #000000;
--color-hover-base: #32343E;
--bg-color: var(--color-warm-grey-2);
--bg-color-hover: var(--color-warm-grey-3);
--bg-color-active: var(--color-warm-grey-4);
--bg-color-tonal: var(--color-warm-grey-2);
--bg-color-tonal-hover: var(--color-warm-grey-2);
--bg-color-tonal-active: var(--color-warm-grey-2);
--bg-color-raised: var(--color-warm-grey-2);
--bg-color-modal-overlay: rgba(0, 0, 0, 0.4);
--bg-raised-gradient: linear-gradient(270deg, var(--color-warm-grey-3) 21.88%, rgba(42, 43, 51, 0) 112.5%);
--layer-color: var(--color-warm-grey-3);
--layer-color-hover: var(--color-warm-grey-4);
--layer-color-active: var(--color-warm-grey-5);
--layer-color-ontonal: var(--color-warm-grey-3);
--layer-color-ontonal-hover: var(--color-warm-grey-4);
--layer-color-ontonal-active: var(--color-warm-grey-5);
--layer-color-accent: var(--color-warm-grey-9);
--layer-accent-hover: var(--color-warm-grey-10);
--layer-color-raised: var(--color-warm-grey-3);
/**
* @tokens Border Colors
* @presenter Color
*/
--border-color-primary: var(--color-warm-grey-5);
--border-color-secondary: var(--color-warm-grey-4);
/**
* @tokens Tree Colors
* @presenter Color
*/
--tree-content-color-hover: var(--color-warm-grey-11); // @presenter Color
--tree-border-color-default: var(--color-warm-grey-4); // @presenter Color
--tree-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
--tree-bg-color-active: var(--color-warm-grey-4); // @presenter Color
/**
* @tokens Links
*/
--link-color-primary: var(--color-blue-7); // @presenter Color
--link-color-primary-hover: var(--color-blue-8); // @presenter Color
--link-color-inverse: var(--color-blue-6); // @presenter Color
--link-color-visited: var(--color-purple-8); // @presenter Color
/**
* @tokens Tab Colors
* @presenter Color
*/
--tab-content-color-default: var(--color-warm-grey-7); // @presenter Color
--tab-bg-color-filled: var(--color-warm-grey-4); // @presenter Color
--tab-content-color-disabled: var(--color-warm-grey-4); // @presenter Color
/**
* @tokens Dropdown Colors
* @presenter Color
*/
--dropdown-text-color: var(--color-warm-grey-8); // @presenter Color
--dropdown-menu-item-bg-color-hover: var(--bg-color-hover); // @presenter Color
--input-bg-color: var(--color-warm-grey-2);
--input-bg-color-ghost: var(--color-warm-grey-3);
--input-border-color: var(--color-warm-grey-4);
--input-border-color-hover: var(--color-warm-grey-5);
--input-border-color-focused: var(--color-info-base);
--input-bg-color-disabled: var(--color-warm-grey-3);
--input-border-color-disabled: var(--color-warm-grey-4);
/**
* @tokens API Reference Schema Required styles
*/
--schema-required-color: #f56c6c; // @presenter Color
--plus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H4.6875V6.79687C4.6875 6.83984 4.72266 6.875 4.76562 6.875H5.23438C5.27734 6.875 5.3125 6.83984 5.3125 6.79687V5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H5.3125V3.20312C5.3125 3.16016 5.27734 3.125 5.23438 3.125H4.76562C4.72266 3.125 4.6875 3.16016 4.6875 3.20312V4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
--minus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
${variables_dark_6.segmentedButtonsDarkMode}
${variables_dark_4.buttonDarkMode}
${variables_dark_5.aiAssistantButtonDarkMode}
${variables_dark_7.checkboxDarkMode}
${variables_dark_8.tagDarkMode}
${variables_dark_9.statusCodeDarkMode}
${variables_dark_3.menuDarkMode}
${variables_dark_2.mermaidDarkMode}
${variables_dark_1.scorecardDarkMode}
${replayDarkMode}
${variables_dark_10.switcherDarkMode}
${variables_dark_11.cardsDarkMode}
${variables_dark_12.catalogDarkMode}
${variables_dark_13.pageActionsDarkMode}
${variables_dark_14.tooltipDarkMode}
${variables_dark_15.bannerDarkMode}
${variables_dark_16.admonitionDarkMode}
${variables_dark_17.svgViewerDarkMode}
${badgesDarkMode}
/**
* @tokens Dark Theme Scrollbar Config
* @presenter Color
*/
color-scheme: dark;
*::-webkit-scrollbar-thumb {
background-color: var(--color-warm-grey-4);
}
// @tokens End
`;
//# sourceMappingURL=dark.js.map