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

Sense UI components library

@value (
  colorNeutralLightest,
  colorNeutralLight,
  colorInformationLightest,
  colorInformationLight,
  colorSuccessLightest,
  colorSuccessLight,
  colorWarningLightest,
  colorWarningLight,
  colorDangerLightest,
  colorDangerLight,
  colorBackgroundTertiary,
  colorGrayLightest,
  colorTextDisabled,
  colorFillDisabled,
  colorFocusPrimary
) from '../../styles/variables/_color.css';
@value (
  spaceXXSmall,
  spaceXSmall,
  spaceSmall
) from '../../styles/variables/_space.css';
@value (
  borderRadiusXSmall
) from '../../styles/variables/_border.css';
@value (
  size18,
  size26,
  size34
) from '../../styles/variables/_size.css';

@value (
  borderWidthNone,
  borderWidthTertiary
) from '../../styles/variables/_border.css';

.chipWrapper {
  composes: formLabelSmall from '../../styles/typography.module.css';
  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
  display: flex;
  background-color: colorNeutralLightest;
  align-items: center;
  max-width: fit-content;
  max-height: fit-content;
  gap: spaceXXSmall;
  border-radius: borderRadiusXSmall;
  cursor: pointer;
}

.chipWrapper:focus {
  outline: none;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.large {
  padding: spaceXSmall spaceSmall;
  min-height: size34;
}

.medium {
  min-height: size26;
  padding: spaceXXSmall spaceSmall;
}

.small {
  padding: calc(spaceXXSmall / 2) spaceXSmall;
  min-height: size18;
}

.primary {
  background-color: colorNeutralLightest;
}

.noHoverState {
  cursor: initial;
}

.primary:not(.noHoverState):hover {
  background-color: colorNeutralLight;
}

.information {
  background-color: colorInformationLightest;
}

.information:not(.noHoverState):hover {
  background-color: colorInformationLight;
}

.success {
  background-color: colorSuccessLightest;
}

.success:not(.noHoverState):hover {
  background-color: colorSuccessLight;
}

.warning {
  background-color: colorWarningLightest;
}

.warning:not(.noHoverState):hover {
  background-color: colorWarningLight;
}

.danger {
  background-color: colorDangerLightest;
}

.danger:not(.noHoverState):hover {
  background-color: colorDangerLight;
}

.secondary {
  composes: borderPrimary from '../../styles/border.module.css';
  background-color: colorBackgroundTertiary;
}

.secondary:not(.noHoverState):hover {
  background-color: colorGrayLightest;
}

.withIcon {
  padding: spaceXXSmall spaceSmall spaceXXSmall spaceXSmall;
}

.dismissable {
  padding: spaceXXSmall spaceXSmall spaceXXSmall spaceSmall;
}

.dismissIconWrapper {
  margin-left: spaceXSmall;
  cursor: pointer;
}

.statusIndicatorBlock {
  margin-right: spaceXXSmall;
}

.alignTop {
  align-self: flex-start;
}

/* This should be last section for CSS Specificity  */

.disabled {
  color: colorTextDisabled;
  background-color: colorFillDisabled;
  border: initial;
  pointer-events: none;
  cursor: not-allowed;
}

.disabled .dismissIcon {
  color: colorTextDisabled;
}

.disabled .chipIcon {
  color: colorTextDisabled;
}