@kelvininc/ui-components/dist/collection/components/form-label/form-label.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 --label-color: Label text color.
   * @prop --label-required-color: Required indicator color.
   * @prop --label-gap: Gap between label elements.
   * @prop --label-bottom-spacing: Bottom spacing of the label container.
   */
  --label-color: var(--text-surface-neutral-tertiary);
  --label-required-color: var(--text-surface-danger-default);
  --label-gap: var(--spacing-2xs);
  --label-bottom-spacing: var(--spacing-2xs);
  display: inline-flex;
  user-select: none;
}

.required {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.required + label {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.label {
  font-family: Proxima Nova;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--label-color);
}

.required {
  color: var(--label-required-color);
}

.label-container {
  display: inline-flex;
  gap: var(--label-gap);
  margin-bottom: var(--label-bottom-spacing);
}