@redocly/theme/src/core/styles/dark.ts

Shared UI components lib

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 { aiAssistantButtonDarkMode } from '@redocly/theme/components/Buttons/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';
import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dark';
import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/variables.dark';
import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark';
import { admonitionDarkMode } from '@redocly/theme/components/Admonition/variables.dark';
import { svgViewerDarkMode } from '@redocly/theme/components/SvgViewer/variables.dark';

const replayDarkMode = 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 = 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
`


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: #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");

  ${segmentedButtonsDarkMode}
  ${buttonDarkMode}
  ${aiAssistantButtonDarkMode}
  ${checkboxDarkMode}
  ${tagDarkMode}
  ${statusCodeDarkMode}
  ${menuDarkMode}
  ${mermaidDarkMode}
  ${scorecardDarkMode}
  ${replayDarkMode}
  ${switcherDarkMode}
  ${cardsDarkMode}
  ${catalogDarkMode}
  ${pageActionsDarkMode}
  ${tooltipDarkMode}
  ${bannerDarkMode}
  ${admonitionDarkMode}
  ${svgViewerDarkMode}
  ${badgesDarkMode}

  /**
    * @tokens Dark Theme Scrollbar Config
    * @presenter Color
    */
  color-scheme: dark;

  *::-webkit-scrollbar-thumb {
    background-color: var(--color-warm-grey-4);
  }

  // @tokens End
`;