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

Shared UI components lib

import { css } from 'styled-components';

/* eslint-disable theme/no-raw-colors-in-styles */
export const tag = css`
  /**
    * @tokens Tag borders
    */

  --tag-border-width: 1px; //@presenter Border
  --tag-border-style: solid; //@presenter Border
  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
  --tag-box-shadow: none; // @presenter Shadow
  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius

  --tag-status-dot-color-default: var(--color-persian-green-7);
  --tag-badge-size: var(--spacing-xs);
  --tag-badge-border-width: 2px;
  --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
  --tag-border-color-focused: var(--color-blue-4); // @presenter Color
  --tag-close-button-bg-color-focus: var(--color-warm-grey-4); // @presenter Color

  /**
    * @tokens Tag spacing
    */

  --tag-padding-vertical: 1px; //@presenter Spacing
  --tag-padding-horizontal: 8px; //@presenter Spacing
  --tag-padding: 0 var(--tag-padding-horizontal); //@presenter Spacing
  --tag-content-padding: var(--tag-padding-vertical) 0; //@presenter Spacing
  --tag-content-gap: 4px; //@presenter Spacing

  --tag-large-padding-vertical: 4px; //@presenter Spacing
  --tag-large-padding-horizontal: 16px; //@presenter Spacing
  --tag-large-padding: 0 var(--tag-large-padding-horizontal); //@presenter Spacing
  --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
  
  --tag-margin: 0 5px 0 0; //@presenter Spacing
  --tag-gap: 4px; //@presenter Spacing

  /**
    * @tokens Tag size
    */

  .tag-size-large {
    --tag-padding: var(--tag-large-padding);
    --tag-content-padding: var(--tag-large-content-padding);
    --tag-font-size: var(--font-size-base);
  }

  /**
    * @tokens Tag typography
    */

  --tag-font-size: var(--font-size-sm); // @presenter FontSize
  --tag-font-family: inherit; // @presenter FontFamily
  --tag-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --tag-line-height: var(--line-height-sm);
  --tag-text-transform: capitalize;

  /**
    * @tokens Tag icon
    */

  --tag-icon-width: 14px; // @presenter Spacing
  --tag-icon-height: 14px; // @presenter Spacing


  /**
    * @tokens Tag colors
    */
  --tag-basic-content-color: var(--color-warm-grey-9); // @presenter Color
  --tag-basic-bg-color: var(--color-warm-grey-2); // @presenter Color
  --tag-basic-border-color: var(--color-warm-grey-2); // @presenter Color

  .tag-grey,
  .tag-draft,
  .tag-schema,
  .tag-default {
    --tag-color: var(--text-color-secondary); // @presenter Color
    --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
    --tag-border-color: var(--border-color-primary); // @presenter Color
    --tag-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
    --tag-border-color-hover: var(--color-warm-grey-5); // @presenter Color
  }

  .tag-green {
    --tag-color: var(--color-green-8); // @presenter Color
    --tag-bg-color: var(--color-green-1); // @presenter Color
    --tag-border-color: 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-border-color-hover: var(--color-green-6); // @presenter Color
  }

  .tag-success,
  .tag-approved {
    --tag-color: var(--color-success-active); // @presenter Color
    --tag-bg-color: var(--color-success-bg); // @presenter Color
    --tag-border-color: var(--color-success-border); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
    --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
    --tag-border-color-hover: var(--color-success-border-hover); // @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-3); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
    --tag-bg-color-hover: var(--color-red-2); // @presenter Color
    --tag-border-color-hover: var(--color-red-5); // @presenter Color
  }

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

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

  .tag-blue {
    --tag-color: var(--color-blue-7); // @presenter Color
    --tag-bg-color: var(--color-blue-1); // @presenter Color
    --tag-border-color: var(--color-blue-4); // @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-border-color-hover: var(--color-blue-6); // @presenter Color
  }

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

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

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

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

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

  .tag-magenta,
  .tag-hook {
    --tag-color: var(--color-magenta-7); // @presenter Color
    --tag-bg-color: var(--color-magenta-1); // @presenter Color
    --tag-border-color: var(--color-magenta-3); // @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-border-color-hover: var(--color-magenta-5); // @presenter Color
  }

  .tag-product {
    --tag-color: var(--color-warm-grey-7); // @presenter Color
    --tag-bg-color: transparent; // @presenter Color
    --tag-border-color: var(--color-warm-grey-4); // @presenter Color
    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
  }

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

  .tag-sky {
    --tag-color: var(--color-sky-8); // @presenter Color
    --tag-bg-color: var(--color-sky-1); // @presenter Color
    --tag-border-color: var(--color-sky-5); // @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-border-color-hover: var(--color-sky-7); // @presenter Color
  }

  .tag-raspberry {
    --tag-color: var(--color-raspberry-7); // @presenter Color
    --tag-bg-color: var(--color-raspberry-1); // @presenter Color
    --tag-border-color: var(--color-raspberry-3); // @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-border-color-hover: var(--color-raspberry-5); // @presenter Color
  }

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

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

  .tag-blueberry {
    --tag-color: var(--color-blueberry-7); // @presenter Color
    --tag-bg-color: var(--color-blueberry-1); // @presenter Color
    --tag-border-color: var(--color-blueberry-4); // @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-border-color-hover: var(--color-blueberry-6); // @presenter Color
  }

  /**
    * @tokens Tag http
    */
  .tag-http {
    --tag-font-family: var(--font-family-monospaced); // @presenter FontFamily
    --tag-text-transform: uppercase;
  }

  /**
    * @tokens Operation tag colors
    */

  .tag-head {
    --tag-color: #6355CA; // @presenter Color
    --tag-bg-color: #ECEBFA; // @presenter Color
    --tag-bg-color-hover: #E0DEF7; // @presenter Color
  }

  .tag-delete {
    --tag-color: #e70b46; // @presenter Color
    --tag-bg-color: #fee2e9; // @presenter Color
    --tag-bg-color-hover: #fdd3dd; // @presenter Color
  }

  .tag-get {
    --tag-color: #25b869; // @presenter Color
    --tag-bg-color: #e5faef; // @presenter Color
    --tag-bg-color-hover: #D4F7E5; // @presenter Color
  }

  .tag-post {
    --tag-color: #1e65f5; // @presenter Color
    --tag-bg-color: #e2ebfe; // @presenter Color
    --tag-bg-color-hover: #CEDDFD; // @presenter Color
  }

  .tag-query {
    --tag-color: #25b869; // @presenter Color
    --tag-bg-color: #e5faef; // @presenter Color
    --tag-bg-color-hover: #D4F7E5; // @presenter Color
  }

  .tag-put {
    --tag-color: #f5901d; // @presenter Color
    --tag-bg-color: #fef1e2; // @presenter Color
    --tag-bg-color-hover: #FDE2C4; // @presenter Color
  }

  .tag-patch {
    --tag-color: #f5c31d; // @presenter Color
    --tag-bg-color: #fdf6dd; // @presenter Color
    --tag-bg-color-hover: #FCF0C5; // @presenter Color
  }

  .tag-http-deprecated {
    --tag-color: var(--text-color-disabled); // @presenter Color
  }

  .tag-http-additional-operation {
    --tag-color: #F97316; // @presenter Color
    --tag-bg-color: #faede3; // @presenter Color
    --tag-bg-color-hover: #fae2cf; // @presenter Color
  }

  .tag-send {
    --tag-color: #4144F6; // @presenter Color
    --tag-bg-color: #ECECFE; // @presenter Color
    --tag-bg-color-hover: #CFCFFC; // @presenter Color
  }

  .tag-pub {
    --tag-color: #4144F6; // @presenter Color
    --tag-bg-color: #ECECFE; // @presenter Color
    --tag-bg-color-hover: #CFCFFC; // @presenter Color
  }

  .tag-publish {
    --tag-color: #4144F6; // @presenter Color
    --tag-bg-color: #ECECFE; // @presenter Color
    --tag-bg-color-hover: #CFCFFC; // @presenter Color
  }

  .tag-receive {
    --tag-color: #4db144; // @presenter Color
    --tag-bg-color:  #E5FDE2; // @presenter Color
    --tag-bg-color-hover: #D4FCCF; // @presenter Color
  }

  .tag-sub {
    --tag-color: #4db144; // @presenter Color
    --tag-bg-color:  #E5FDE2; // @presenter Color
    --tag-bg-color-hover: #D4FCCF; // @presenter Color
  }

  .tag-cons {
    --tag-color: #4db144; // @presenter Color
    --tag-bg-color:  #E5FDE2; // @presenter Color
    --tag-bg-color-hover: #D4FCCF; // @presenter Color
  }

  .tag-channel {
    --tag-color: #F0870E; // @presenter Color
    --tag-bg-color: #FDF1E2; // @presenter Color
    --tag-bg-color-hover: #FBE1C1; // @presenter Color
  }

  .tag-topic {
    --tag-color: #F0870E; // @presenter Color
    --tag-bg-color: #FDF1E2; // @presenter Color
    --tag-bg-color-hover: #FBE1C1; // @presenter Color
  }

  .tag-queue {
    --tag-color: #D72E81; // @presenter Color
    --tag-bg-color: #FAE5F0; // @presenter Color
    --tag-bg-color-hover: #F7D4E6; // @presenter Color
  }

  .tag-exchange {
    --tag-color: #9B51E0; // @presenter Color
    --tag-bg-color: #F0E5FA; // @presenter Color
    --tag-bg-color-hover: #E6D4F7; // @presenter Color
  }
      
  // shorten alias for exchange tag:
  .tag-exch {
    --tag-color: #9B51E0; // @presenter Color
    --tag-bg-color: #F0E5FA; // @presenter Color
    --tag-bg-color-hover: #E6D4F7; // @presenter Color
  }

  /**
    * @tokens Tag variants
    */

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

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