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

Sense UI components library

@value (
  colorNeutralLightest,
  colorSuccessLightest,
  colorInformationLightest,
  colorWarningLightest,
  colorDangerLightest,
  colorFillDisabled
) from '../../styles/variables/_color.css';

@value (
  size42,
  size34,
  size60
) from '../../styles/variables/_size.css';

@value (
  borderRadiusMedium
) from '../../styles/variables/_border.css';

.iconContainer {
  display: flex;
  width: fit-content;
  min-width: size34;
  min-height: size34;
  justify-content: center;
  align-items: center;
  border-radius: borderRadiusMedium;
  background-color: colorNeutralLightest;
}

.iconContainer.disabled {
  pointer-events: none;
  background-color: colorFillDisabled;
}

.medium {
  width: size42;
  height: size42;
}

.small {
  width: size34;
  height: size34;
}

.large {
  width: size60;
  height: size60;
}

.neutral {
  background-color: colorNeutralLightest;
}

.success {
  background-color: colorSuccessLightest;
}

.information {
  background-color: colorInformationLightest;
}

.warning {
  background-color: colorWarningLightest;
}

.danger {
  background-color: colorDangerLightest;
}