@redocly/theme/src/components/Tag/variables.dark.ts

Shared UI components lib

import { css } from 'styled-components';

/* eslint-disable theme/no-raw-colors-in-styles */
export const tagDarkMode = css`
  --tag-close-button-bg-color-focus: var(--color-warm-grey-6); // @presenter Color

  --tag-border-color-focused: var(--color-blue-8); // @presenter Color
  --tag-badge-border-color: var(--border-color-secondary);

  .tag-grey,
  .tag-draft,
  .tag-schema,
  .tag-default {
    --tag-color: var(--color-warm-grey-8); // @presenter Color
    --tag-bg-color: var(--color-warm-grey-4); // @presenter Color
    --tag-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
  }

  .tag-red {
    --tag-color: var(--color-red-7); // @presenter Color
    --tag-bg-color: var(--color-red-1); // @presenter Color
    --tag-border-color: var(--color-red-8); // @presenter Color
    --tag-border-color-hover: var(--color-red-6); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
  }

  .tag-green {
    --tag-color: var(--color-green-7); // @presenter Color
    --tag-bg-color: var(--color-green-1); // @presenter Color
    --tag-border-color: var(--color-green-3); // @presenter Color
    --tag-border-color-hover: var(--color-green-5); // @presenter Color
    --tag-bg-color-hover: var(--color-green-2); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-green-2); // @presenter Color
  }

  .tag-blue {
    --tag-color: var(--color-blue-7); // @presenter Color
    --tag-bg-color: var(--color-blue-1); // @presenter Color
    --tag-border-color-hover: var(--color-blue-5); // @presenter Color
    --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-blue-2); // @presenter Color
  }

  .tag-magenta,
  .tag-hook { 
    --tag-color: var(--color-magenta-4); // @presenter Color
    --tag-bg-color: var(--color-magenta-1); // @presenter Color
    --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-magenta-2); // @presenter Color
  }

  .tag-purple {
    --tag-color: var(--color-purple-7); // @presenter Color
    --tag-bg-color: var(--color-purple-1); // @presenter Color
    --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
    --tag-border-color-hover: var(--color-purple-5); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-purple-2); // @presenter Color
  }

  .tag-carrot {
    --tag-color: var(--color-carrot-6); // @presenter Color
    --tag-bg-color: var(--color-carrot-1); // @presenter Color
    --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
    --tag-border-color: var(--color-carrot-4); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-carrot-2); // @presenter Color
  }

  .tag-raspberry {
    --tag-color: var(--color-raspberry-7); // @presenter Color
    --tag-bg-color: var(--color-raspberry-1); // @presenter Color
    --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-raspberry-2); // @presenter Color
  }

  .tag-orange {
    --tag-color: var(--color-orange-7); // @presenter Color
    --tag-bg-color: var(--color-orange-1); // @presenter Color
    --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
    --tag-border-color: var(--color-orange-3); // @presenter Color
    --tag-border-color-hover: var(--color-orange-5); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-orange-2); // @presenter Color
  }

  .tag-grass {
    --tag-bg-color: var(--color-grass-1); // @presenter Color
    --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
    --tag-color: var(--color-grass-7); // @presenter Color
    --tag-border-color: var(--color-grass-3); // @presenter Color
    --tag-border-color-hover: var(--color-grass-5); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-grass-2); // @presenter Color
  }

  .tag-persian-green {
    --tag-color: var(--color-persian-green-7); // @presenter Color
    --tag-bg-color: var(--color-persian-green-1); // @presenter Color
    --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
    --tag-border-color: var(--color-persian-green-3); // @presenter Color
    --tag-border-color-hover: var(--color-persian-green-5); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-persian-green-2); // @presenter Color
  }

  .tag-turquoise,
  .tag-option {
    --tag-color: var(--color-turquoise-6); // @presenter Color
    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
    --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
    --tag-border-color: var(--color-turquoise-4); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-turquoise-2); // @presenter Color
  }

  .tag-sky {
    --tag-color: var(--color-sky-6); // @presenter Color
    --tag-bg-color: var(--color-sky-1); // @presenter Color
    --tag-border-color: var(--color-sky-4); // @presenter Color
    --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
  }

  .tag-blueberry {
    --tag-color: var(--color-blueberry-7); // @presenter Color
    --tag-bg-color: var(--color-blueberry-1); // @presenter Color
    --tag-border-color-hover: var(--color-blueberry-5); // @presenter Color
    --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-blueberry-2); // @presenter Color
  }

  .tag-warning,
  .tag-deprecated {
    --tag-color: var(--color-warning-active); // @presenter Color
    --tag-bg-color: var(--color-warning-bg); // @presenter Color
    --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
  }

  .tag-processing,
  .tag-info {
    --tag-color: var(--color-info-active); // @presenter Color
    --tag-bg-color: var(--color-info-bg); // @presenter Color
    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
  }

  .tag-error,
  .tag-declined {
    --tag-color: var(--color-error-active); // @presenter Color
    --tag-bg-color: var(--color-error-bg); // @presenter Color
    --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
  }

  .tag-success,
  .tag-approved  {
    --tag-color: var(--color-success-active); // @presenter Color
    --tag-bg-color: var(--color-success-bg); // @presenter Color
    --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
  }

  .tag-link {
    --tag-color: var(--color-info-active); // @presenter Color
    --tag-bg-color: var(--color-info-bg); // @presenter Color
    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
  }

  .tag-delete {
    --tag-color: #fa82a2; // @presenter Color
    --tag-bg-color: #47252E; // @presenter Color
    --tag-bg-color-hover: #653441; // @presenter Color
  }

  .tag-get {
    --tag-color: #68cc97; // @presenter Color
    --tag-bg-color: #1F3D2D; // @presenter Color
    --tag-bg-color-hover: #34654B; // @presenter Color
  }

  .tag-post {
    --tag-color: #90b0f0; // @presenter Color
    --tag-bg-color: #2B3447; // @presenter Color
    --tag-bg-color-hover: #3A465F; // @presenter Color
  }

  .tag-query {
    --tag-color: #68cc97; // @presenter Color
    --tag-bg-color: #1F3D2D; // @presenter Color
    --tag-bg-color-hover: #34654B; // @presenter Color
  }

  .tag-put {
    --tag-color: #e0a663; // @presenter Color
    --tag-bg-color: #3D2D1B; // @presenter Color
    --tag-bg-color-hover: #674C2D; // @presenter Color
  }

  .tag-patch {
    --tag-color: #e0c363; // @presenter Color
    --tag-bg-color: #3D351B; // @presenter Color
    --tag-bg-color-hover: #67592D; // @presenter Color
  }

  .tag-head {
    --tag-color: var(--color-purple-7); // @presenter Color
    --tag-bg-color: #312B5A; // @presenter Color
    --tag-bg-color-hover: #413875; // @presenter Color
  }

  .tag-channel {
    --tag-color: #F5AD5B; // @presenter Color
    --tag-bg-color: #4A3721; // @presenter Color
    --tag-bg-color-hover: #64492B; // @presenter Color
  }

  .tag-topic {
    --tag-color: #F5AD5B; // @presenter Color
    --tag-bg-color: #4A3721; // @presenter Color
    --tag-bg-color-hover: #64492B; // @presenter Color
  }

  .tag-send {
    --tag-color: #7779F8; // @presenter Color
    --tag-bg-color: #272754; // @presenter Color
    --tag-bg-color-hover: #373776; // @presenter Color
  }

  .tag-pub {
    --tag-color: #7779F8; // @presenter Color
    --tag-bg-color: #272754; // @presenter Color
    --tag-bg-color-hover: #373776; // @presenter Color
  }

  .tag-publish {
    --tag-color: #7779F8; // @presenter Color
    --tag-bg-color: #272754; // @presenter Color
    --tag-bg-color-hover: #373776; // @presenter Color
  }

  .tag-http-additional-operation {
    --tag-color: #FCAB69; // @presenter Color
    --tag-bg-color: #523926; // @presenter Color
    --tag-bg-color-hover: #694830; // @presenter Color
  }

  .tag-receive {
    --tag-color: #88CF82; // @presenter Color
    --tag-bg-color: #23421F; // @presenter Color
    --tag-bg-color-hover: #305A2A; // @presenter Color
  }

  .tag-sub {
    --tag-color: #88CF82; // @presenter Color
    --tag-bg-color: #23421F; // @presenter Color
    --tag-bg-color-hover: #305A2A; // @presenter Color
  }

  .tag-cons {
    --tag-color: #88CF82; // @presenter Color
    --tag-bg-color: #23421F; // @presenter Color
    --tag-bg-color-hover: #305A2A; // @presenter Color
  }

  .tag-exchange {
    --tag-color: #C79CF2; // @presenter Color
    --tag-bg-color: #472669; // @presenter Color
    --tag-bg-color-hover: #5C3187; // @presenter Color
  }
      
  // shorten alias for exchange tag:
  .tag-exch {
    --tag-color: #C79CF2; // @presenter Color
    --tag-bg-color: #472669; // @presenter Color
    --tag-bg-color-hover: #5C3187; // @presenter Color
  }

  .tag-queue {
    --tag-color: #F7A7CF; // @presenter Color
    --tag-bg-color: #622242; // @presenter Color
    --tag-bg-color-hover: #882F5C; // @presenter Color
  }

  .tag-variant-filled {
    --tag-border-color: transparent;
    --tag-border-color-hover: transparent;
  }

  .tag-variant-outline {
    --tag-bg-color: transparent;
    --tag-bg-color-hover: transparent;
  }
`;
/* eslint-enable theme/no-raw-colors-in-styles */