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

Sense UI components library

@value (
  colorBackgroundTertiary,
  colorTextSecondary,
  colorTextPrimary
) from '../../styles/variables/_color.css';
@value (spaceXXSmall, spaceSmall, spaceLarge, spaceMedium) from '../../styles/variables/_space.css';
@value (borderRadiusMedium) from '../../styles/variables/_border.css';
@value (size60, size140, size252) from '../../styles/variables/_size.css';

.wrapper {
  display: flex;
  composes: borderPrimary from '../../styles/border.module.css';
  min-width: size252;
  height: fit-content;
  align-items: center;
  gap: spaceSmall;
  background-color: colorBackgroundTertiary;
  border-radius: borderRadiusMedium;
  padding: spaceLarge spaceMedium;
}

.textContainer {
  display: flex;
  flex-direction: column;
  gap: spaceXXSmall;
}

.topFoldContent,
.middleFoldContent,
.bottomFoldContent {
  display: flex;
}

.topFoldContent {
  composes: formLabelSmall from '../../styles/typography.module.css';
  color: colorTextSecondary;
}

.middleFoldContent {
  composes: jumboSmall from '../../styles/typography.module.css';
  color: colorTextPrimary;
}

.bottomFoldContent {
  composes: bodySmall from '../../styles/typography.module.css';
  color: colorTextSecondary;
}