@redocly/theme
Version:
Shared UI components lib
320 lines (272 loc) • 11.3 kB
text/typescript
import { css } from 'styled-components';
import { scorecardDarkMode } from '@redocly/theme/components/Scorecard/variables.dark';
import { mermaidDarkMode } from '@redocly/theme/markdoc/components/Mermaid/variables.dark'
import { menuDarkMode } from '@redocly/theme/components/Menu/variables.dark';
import { buttonDarkMode } from '@redocly/theme/components/Button/variables.dark';
import { segmentedButtonsDarkMode } from '@redocly/theme/components/Segmented/variables.dark';
import { checkboxDarkMode } from '@redocly/theme/icons/CheckboxIcon/variables.dark';
import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables.dark';
const replayDarkMode = css`
/**
* @tokens Replay Colors
* @presenter Color
*/
--replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.18); // @presenter Color
--replay-defined-variable-bg-color: rgba(31, 124, 255, 0.18); // @presenter Color
--replay-server-variable-bg-color: rgba(119, 45, 240, 0.2); // @presenter Color
// @tokens End
`;
export const darkMode = 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: #0e8450;
--color-green-4: #149e53;
--color-green-5: #1cb854;
--color-green-6: #4dd470;
--color-green-7: #72e985;
--color-green-8: #a3f7a9;
--color-green-9: #d2fbd0;
--color-green-10: #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");
${segmentedButtonsDarkMode}
${buttonDarkMode}
${checkboxDarkMode}
${tagDarkMode}
${statusCodeDarkMode}
${menuDarkMode}
${mermaidDarkMode}
${scorecardDarkMode}
${replayDarkMode}
${switcherDarkMode}
${cardsDarkMode}
/**
* @tokens Dark Theme Scrollbar Config
* @presenter Color
*/
color-scheme: dark;
*::-webkit-scrollbar-thumb {
background-color: var(--color-warm-grey-4);
}
// @tokens End
`;