@kelvininc/ui-components/dist/collection/components/tag/tag.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host {
  /**
   * @prop --tag-background-color: Tag background color.
   * @prop --tag-border-color: Tag border color.
   * @prop --tag-label-color: Tag label text color.
   * @prop --tag-badge-color: Tag badge text color.
   * @prop --tag-badge-background-color: Tag badge background color.
   * @prop --tag-icon-color: Tag icon color.
   * @prop --tag-content-gap: Gap between icon, label and badge.
   * @prop --tag-content-padding-x: Horizontal padding inside the tag.
   * @prop --tag-content-padding-y: Vertical padding inside the tag.
   */
  --tag-content-gap: var(--spacing-xs);
  --tag-content-padding-x: var(--spacing-md);
  --tag-content-padding-y: var(--spacing-none);
}

.tag-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tag-content-gap);
  width: fit-content;
  max-width: stretch;
  height: var(--size-xl);
  box-sizing: border-box;
  border-radius: var(--radius-md);
  padding: var(--tag-content-padding-y) var(--tag-content-padding-x);
  background-color: var(--tag-background-color, var(--_tag-bg));
  border: 1px solid var(--tag-border-color, var(--_tag-border-color));
}
.tag-container kv-icon {
  --icon-color: var(--tag-icon-color, var(--_tag-icon));
  --icon-width: var(--size-md);
  --icon-height: var(--size-md);
}
.tag-container .tag-label {
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tag-label-color, var(--_tag-label));
}
.tag-container kv-badge {
  --badge-background-color-secondary: var(--tag-badge-background-color, var(--_tag-badge-bg));
  --badge-text-color-secondary: var(--tag-badge-color, var(--_tag-badge));
}
.tag-container--color-neutral {
  --_tag-bg: var(--background-container-tag-neutral-default);
  --_tag-border-color: var(--border-container-tag-neutral-subtle);
  --_tag-label: var(--text-container-tag-neutral-default);
  --_tag-badge: var(--text-container-tag-neutral-default);
  --_tag-badge-bg: var(--background-container-tag-neutral-subtle);
  --_tag-icon: var(--icon-container-tag-neutral-soft);
}
.tag-container--color-brand {
  --_tag-bg: var(--background-container-tag-brand-default);
  --_tag-border-color: var(--border-container-tag-brand-subtle);
  --_tag-label: var(--text-container-tag-brand-default);
  --_tag-badge: var(--text-container-tag-brand-default);
  --_tag-badge-bg: var(--background-container-tag-brand-subtle);
  --_tag-icon: var(--icon-container-tag-brand-soft);
}
.tag-container--color-purple {
  --_tag-bg: var(--background-container-tag-accent-default);
  --_tag-border-color: var(--border-container-tag-accent-subtle);
  --_tag-label: var(--text-container-tag-accent-default);
  --_tag-badge: var(--text-container-tag-accent-default);
  --_tag-badge-bg: var(--background-container-tag-accent-subtle);
  --_tag-icon: var(--icon-container-tag-accent-soft);
}
.tag-container--color-green {
  --_tag-bg: var(--background-container-tag-success-default);
  --_tag-border-color: var(--border-container-tag-success-default);
  --_tag-label: var(--text-container-tag-success-default);
  --_tag-badge: var(--text-container-tag-success-default);
  --_tag-badge-bg: var(--background-container-tag-success-subtle);
  --_tag-icon: var(--icon-container-tag-success-soft);
}
.tag-container--color-yellow {
  --_tag-bg: var(--background-container-tag-warning-default);
  --_tag-border-color: var(--border-container-tag-warning-default);
  --_tag-label: var(--text-container-tag-warning-default);
  --_tag-badge: var(--text-container-tag-warning-default);
  --_tag-badge-bg: var(--background-container-tag-warning-subtle);
  --_tag-icon: var(--icon-container-tag-warning-soft);
}
.tag-container--color-red {
  --_tag-bg: var(--background-container-tag-danger-default);
  --_tag-border-color: var(--border-container-tag-danger-default);
  --_tag-label: var(--text-container-tag-danger-default);
  --_tag-badge: var(--text-container-tag-danger-default);
  --_tag-badge-bg: var(--background-container-tag-danger-subtle);
  --_tag-icon: var(--icon-container-tag-danger-soft);
}
.tag-container--color-blue {
  --_tag-bg: var(--background-container-tag-info-default);
  --_tag-border-color: var(--border-container-tag-info-default);
  --_tag-label: var(--text-container-tag-info-default);
  --_tag-badge: var(--text-container-tag-info-default);
  --_tag-badge-bg: var(--background-container-tag-info-subtle);
  --_tag-icon: var(--icon-container-tag-info-soft);
}