@spaced-out/ui-design-system/lib/components/StatusIndicator/StatusIndicator.module.css

Sense UI components library

@value (
  colorTextInformation,
  colorTextSuccess,
  colorTextWarning,
  colorTextDanger,
  colorTextNeutral,
  colorBackgroundTertiary,
  colorFillPrimary,
  colorTextPrimary,
  colorTextDisabled
) from '../../styles/variables/_color.css';
@value (size8) from '../../styles/variables/_size.css';
@value (borderRadiusCircle, borderWidthTertiary) from '../../styles/variables/_border.css';

.statusWrapper {
  --border-color: colorBackgroundTertiary;
  display: flex;
  color: colorFillPrimary;
  width: size8;
  min-width: size8;
  height: size8;
  min-height: size8;
  border-radius: borderRadiusCircle;
  background-color: colorTextPrimary;
  box-sizing: content-box;
}

.information {
  background-color: colorTextInformation;
}

.success {
  background-color: colorTextSuccess;
}

.warning {
  background-color: colorTextWarning;
}

.danger {
  background-color: colorTextDanger;
}

.neutral {
  background-color: colorTextNeutral;
}

.disabled {
  background-color: colorTextDisabled;
}

.withBorder {
  border: borderWidthTertiary solid var(--border-color);
}