@redocly/theme
Version:
Shared UI components lib
284 lines (228 loc) • 9.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.tag = void 0;
const styled_components_1 = require("styled-components");
exports.tag = (0, styled_components_1.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-status-dot-color-default: var(--color-persian-green-7);
--tag-badge-size: var(--spacing-xs);
--tag-badge-border-width: 1.5px;
--tag-badge-border-color: #ffffff;
/**
* @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: 5px; //@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: 1em; // @presenter Spacing
--tag-icon-height: 1em; // @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-primary); // @presenter Color
--tag-bg-color: var(--color-warm-grey-2); // @presenter Color
--tag-border-color: var(--border-color-primary); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
}
.tag-green,
.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-active); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
}
.tag-red,
.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-active); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
}
.tag-gold,
.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-active); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
}
.tag-blue,
.tag-processing {
--tag-color: var(--color-info-active); // @presenter Color
--tag-bg-color: var(--color-info-bg); // @presenter Color
--tag-border-color: var(--color-info-active); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
}
.tag-purple,
.tag-head {
--tag-color: var(--color-purple-7); // @presenter Color
--tag-bg-color: var(--color-purple-1); // @presenter Color
--tag-border-color: var(--color-purple-7); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
}
.tag-cyan,
.tag-option,
.tag-geekblue,
.tag-link {
--tag-color: var(--color-turquoise-7); // @presenter Color
--tag-bg-color: var(--color-turquoise-1); // @presenter Color
--tag-border-color: var(--color-turquoise-7); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
}
.tag-yellow {
--tag-color: var(--color-carrot-7); // @presenter Color
--tag-bg-color: var(--color-carrot-1); // @presenter Color
--tag-border-color: var(--color-carrot-7); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-carrot-3); // @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-7); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
}
.tag-lime {
--tag-color: var(--color-green-7); // @presenter Color
--tag-bg-color: none; // @presenter Color
--tag-border-color: var(--color-green-7); // @presenter Color
--tag-close-button-bg-color-hover: var(--color-green-3); // @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
}
/**
* @tokens Tag http
*/
.tag-http {
--tag-font-family: var(--font-family-monospaced); // @presenter FontFamily
--tag-text-transform: uppercase;
}
/**
* @tokens Operation tag colors
*/
--tag-operation-color-delete: #e70b46; // @presenter Color
--tag-operation-bg-color-delete: #fee2e9; // @presenter Color
--tag-operation-color-get: #25b869; // @presenter Color
--tag-operation-bg-color-get: #e5faef; // @presenter Color
--tag-operation-color-post: #1e65f5; // @presenter Color
--tag-operation-bg-color-post: #e2ebfe; // @presenter Color
--tag-operation-color-put: #f5901d; // @presenter Color
--tag-operation-bg-color-put: #fef1e2; // @presenter Color
--tag-operation-color-patch: #f5c31d; // @presenter Color
--tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
--tag-operation-color-head: #5b4ccc; // @presenter Color
--tag-operation-bg-color-head: #e6e1fe; // @presenter Color
--tag-operation-color-options: #1a1c21; // @presenter Color
--tag-operation-bg-color-options: #ededf2; // @presenter Color
--tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
--tag-action-color-receive: #4db144; // @presenter Color
--tag-action-color-sub: #4db144; // @presenter Color
--tag-action-color-cons: #4db144; // @presenter Color
--tag-action-color-send: #4144f6; // @presenter Color
--tag-action-color-pub: #4144f6; // @presenter Color
--tag-action-color-publish: #4144f6; // @presenter Color
--tag-action-color-channel: #F0870E; // @presenter Color
--tag-action-color-topic: #F0870E; // @presenter Color
--tag-action-color-queue: #D72E81; // @presenter Color
--tag-action-color-exchange: #9B51E0; // @presenter Color
.tag-delete {
--tag-color: var(--tag-operation-color-delete); // @presenter Color
}
.tag-get {
--tag-color: var(--tag-operation-color-get); // @presenter Color
}
.tag-post {
--tag-color: var(--tag-operation-color-post); // @presenter Color
}
.tag-put {
--tag-color: var(--tag-operation-color-put); // @presenter Color
}
.tag-patch {
--tag-color: var(--tag-operation-color-patch); // @presenter Color
}
.tag-http-deprecated {
--tag-color: var(--tag-operation-color-deprecated) // @presenter Color
}
.tag-receive {
--tag-color: var(--tag-action-color-receive); // @presenter Color
}
.tag-send {
--tag-color: var(--tag-action-color-send); // @presenter Color
}
.tag-pub {
--tag-color: var(--tag-action-color-pub); // @presenter Color
}
.tag-sub {
--tag-color: var(--tag-action-color-sub); // @presenter Color
}
.tag-cons {
--tag-color: var(--tag-action-color-cons); // @presenter Color
}
.tag-publish {
--tag-color: var(--tag-action-color-publish); // @presenter Color
}
.tag-channel {
--tag-color: var(--tag-action-color-channel); // @presenter Color
}
.tag-topic {
--tag-color: var(--tag-action-color-channel); // @presenter Color
}
.tag-queue {
--tag-color: var(--tag-action-color-queue); // @presenter Color
}
.tag-exchange {
--tag-color: var(--tag-action-color-exchange); // @presenter Color
}
// shorten alias for exchange tag:
.tag-exch {
--tag-color: var(--tag-action-color-exchange); // @presenter Color
}
// @tokens End
`;
//# sourceMappingURL=variables.js.map