wix-style-react/dist/src/Badge/Badge.st.css

wix-style-react

:import {
  -st-from: '../common/Focusable/Focusable.st.css';
  -st-default: Focusable;
}

:import {
  -st-from: "../Text/Caption.st.css";
  -st-default: Caption;
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-tiny-bold;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named:
    THEME-COLOR-10, THEME-COLOR-20,
    B30, B40,
    D20, D40, D70, D80,
    F00,
    G10, G30, G40,
    O10,
    P10,
    R10, R30, R40,
    Y10, Y30, Y40
}

@st-import [
  --wds-badge-border-radius-tiny,
  --wds-badge-border-radius-small,
  --wds-badge-border-radius-medium,

  --wds-badge-padding-vertical-tiny,
  --wds-badge-padding-vertical-small,
  --wds-badge-padding-vertical-medium,

  --wds-badge-padding-horizontal-tiny,
  --wds-badge-padding-horizontal-small,
  --wds-badge-padding-horizontal-medium,

  --wds-badge-size-tiny,
  --wds-badge-size-small,
  --wds-badge-size-medium,

  --wds-color-border-dark-primary,
  --wds-color-border-dark-secondary,
  --wds-color-border-standard-primary,
  --wds-color-border-standard-secondary,
  --wds-color-border-destructive-primary,
  --wds-color-border-destructive-secondary,
  --wds-color-border-success-primary,
  --wds-color-border-success-secondary,
  --wds-color-border-warning-primary,
  --wds-color-border-warning-secondary,
  --wds-color-border-urgent-primary,
  --wds-color-border-premium-primary,

  --wds-color-text-standard-primary-light,
  --wds-color-text-standard-secondary,
  --wds-color-text-primary,
  --wds-color-text-destructive,
  --wds-color-text-success,
  --wds-color-text-warning,
  --wds-color-text-urgent,
  --wds-color-text-premium,
  --wds-color-text-standard-secondary-light,

  --wds-color-fill-standard-primary,
  --wds-color-fill-standard-secondary,
  --wds-color-fill-standard-tertiary,
  --wds-color-fill-dark-primary,
  --wds-color-fill-dark-secondary,
  --wds-color-fill-dark-tertiary,
  --wds-color-fill-success-primary,
  --wds-color-fill-success-secondary,
  --wds-color-fill-warning-primary,
  --wds-color-fill-warning-secondary,
  --wds-color-fill-urgent-primary,
  --wds-color-fill-urgent-tertiary,
  --wds-color-fill-premium-primary,
  --wds-color-fill-premium-tertiary,
  --wds-color-fill-destructive-primary,
  --wds-color-fill-destructive-secondary,
  --wds-color-fill-destructive-tertiary,
  --wds-color-fill-success-tertiary,

  --wds-color-black-400,
  --wds-color-white,
  --wds-color-blue-400,
  --wds-color-red-400,
  --wds-color-green-400,
  --wds-color-black-700,
  --wds-color-yellow-400,

  --wds-shadow-focus-standard,
  --wds-space-100,
  ] from "@wix/design-system-tokens/all.st.css";

.root {
  -st-extends: Focusable;
  -st-states: skin(string), type(string), size(string), clickable(boolean), uppercase(boolean), newColorsBranding(boolean), noPadding(boolean);

  border: 1px solid;
  border-radius: var(--wds-badge-border-radius-medium, 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  max-width: 100%;
}

/* Focus when clickable */
.root:focus {
  outline: none;
}

.root:focus-visible {
  outline: none;
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

:vars {
  backgroundColor: var(--wds-color-fill-dark-primary, grey);
  borderColor: var(--wds-color-fill-dark-primary, grey);
  color: var(--wds-color-text-standard-primary-light, value(D80));
  medium: var(--wds-badge-padding-vertical-medium, 0px) var(--wds-badge-padding-horizontal-medium, 12px);
  small: var(--wds-badge-padding-vertical-small, 0px) var(--wds-badge-padding-horizontal-small, 6px);
  tiny: var(--wds-badge-padding-vertical-tiny, 0px) var(--wds-badge-padding-horizontal-tiny, 5.5px);
  mediumHeight: var(--wds-badge-size-medium, 24px);
  smallHeight: var(--wds-badge-size-small, 18px);
  tinyHeight: var(--wds-badge-size-tiny, 18px);
}

.prefix, .suffix {
  fill: currentColor;
  flex-shrink: 0;
}

.BadgeStyle {
  border-color: value(borderColor);
  color: value(color);
  background: value(backgroundColor);
}

.text {
  -st-extends: Caption;
}

.root .text {
  color: currentColor;
  letter-spacing: 1px;
  margin: auto 0px;
}

.root >:not(:last-child) {
  margin-inline-end: var(--wds-space-100, 6px);
}

.root:uppercase .text {
  text-transform: uppercase;
}

/* type = transparent */
.root:type(transparent):skin(general) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(transparent):skin(standard) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-text-primary, value(THEME-COLOR-20))
  );
}

.root:type(transparent):skin(danger) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-text-destructive, value(R10))
  );
}

.root:type(transparent):skin(success) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-text-success, value(G10))
  );
}

.root:type(transparent):skin(neutral) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-text-standard-secondary-light, value(D40))
  );
}

.root:type(transparent):skin(warning) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-text-warning, value(Y10))
  );
}

.root:type(transparent):skin(urgent) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-text-urgent, value(O10))
  );
}

.root:type(transparent):skin(neutralStandard) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-blue-400, value(B30))
  );
}

.root:newColorsBranding:type(transparent):skin(neutralStandard) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-blue-400, value(B40))
  );
}

.root:type(transparent):skin(neutralSuccess) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-green-400, value(G30))
  );
}

.root:newColorsBranding:type(transparent):skin(neutralSuccess) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-green-400, value(G40))
  );
}

.root:type(transparent):skin(neutralDanger) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-red-400, value(R30))
  );
}

.root:newColorsBranding:type(transparent):skin(neutralDanger) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-red-400, value(R40))
  );
}

.root:type(transparent):skin(premium) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-text-premium, value(P10))
  );
}

.root:type(transparent):skin(neutralLight) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-black-700, value(D70))
  );
}

.root:type(transparent):skin(warningLight) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-yellow-400, value(Y30))
  );
}

.root:newColorsBranding:type(transparent):skin(warningLight) {
  -st-mixin: BadgeStyle(
    backgroundColor transparent,
    borderColor transparent,
    color var(--wds-color-yellow-400, value(Y40))
  );
}

/* type = solid */
.root:type(solid):skin(general) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-dark-primary, value(D20)),
    borderColor var(--wds-color-fill-dark-primary, value(D20)),
    color var(--wds-color-text-standard-primary-light, white)
  );
}

.root:type(solid):skin(standard) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-standard-primary, value(THEME-COLOR-20)) ,
    borderColor var(--wds-color-fill-standard-primary, value(THEME-COLOR-20)),
    color var(--wds-color-text-standard-primary-light, white)
  );
}

.root:type(solid):skin(danger) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-destructive-primary, value(R10)),
    borderColor var(--wds-color-fill-destructive-primary, value(R10)),
    color var(--wds-color-text-standard-primary-light, white)
  );
}

.root:type(solid):skin(success) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-success-primary, value(G10)),
    borderColor var(--wds-color-fill-success-primary, value(G10)),
    color var(--wds-color-text-standard-primary-light, white)
  );
}

.root:type(solid):skin(neutral) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-black-400, value(D40)),
    borderColor var(--wds-color-black-400, value(D40)),
    color var(--wds-color-text-standard-primary-light, white)
  );
}

.root:type(solid):skin(warning) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-warning-primary, value(Y10)),
    borderColor var(--wds-color-fill-warning-primary, value(Y10)),
    color var(--wds-color-text-standard-primary-light, white)
  );
}

.root:type(solid):skin(urgent) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-urgent-primary, value(O10)),
    borderColor var(--wds-color-fill-urgent-primary, value(O10)),
    color var(--wds-color-text-standard-primary-light, white)
  );
}

.root:type(solid):skin(neutralStandard) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-standard-secondary, value(B30)),
    borderColor var(--wds-color-fill-standard-secondary, value(B30)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:newColorsBranding:type(solid):skin(neutralStandard) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-standard-secondary, value(B40)),
    borderColor var(--wds-color-fill-standard-secondary, value(B40)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(solid):skin(neutralSuccess) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-success-secondary, value(G30)),
    borderColor var(--wds-color-fill-success-secondary, value(G30)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:newColorsBranding:type(solid):skin(neutralSuccess) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-success-secondary, value(G40)),
    borderColor var(--wds-color-fill-success-secondary, value(G40)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(solid):skin(neutralDanger) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-destructive-secondary, value(R30)),
    borderColor var(--wds-color-fill-destructive-secondary, value(R30)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:newColorsBranding:type(solid):skin(neutralDanger) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-destructive-secondary, value(R40)),
    borderColor var(--wds-color-fill-destructive-secondary, value(R40)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(solid):skin(premium) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-premium-primary, value(P10)),
    borderColor var(--wds-color-fill-premium-primary, value(P10)),
    color var(--wds-color-text-standard-primary-light, white)
  );
}

.root:type(solid):skin(neutralLight) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-dark-secondary, value(D70)),
    borderColor var(--wds-color-fill-dark-secondary, value(D70)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(solid):skin(warningLight) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-warning-secondary, value(Y30)),
    borderColor var(--wds-color-fill-warning-secondary, value(Y30)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:newColorsBranding:type(solid):skin(warningLight) {
  -st-mixin: BadgeStyle(
    backgroundColor var(--wds-color-fill-warning-secondary, value(Y40)),
    borderColor var(--wds-color-fill-warning-secondary, value(Y40)),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

/* type = outlined */
.root:type(outlined):skin(general) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-dark-primary, value(D20)),
    backgroundColor var(--wds-color-fill-dark-tertiary, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}


.root:type(outlined):skin(standard) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-standard-primary, value(THEME-COLOR-20)),
    backgroundColor var(--wds-color-fill-standard-tertiary, white),
    color var(--wds-color-text-primary, value(THEME-COLOR-20))
  );
}

.root:type(outlined):skin(danger) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-destructive-primary, value(R10)),
    backgroundColor var(--wds-color-fill-destructive-tertiary, white),
    color var(--wds-color-text-destructive, value(R10))
  );
}

.root:type(outlined):skin(success) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-success-primary, value(G10)),
    backgroundColor var(--wds-color-fill-success-tertiary, white),
    color var(--wds-color-text-success, value(G10))
  );
}

.root:type(outlined):skin(neutral) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-dark-primary, value(D40)),
    backgroundColor var(--wds-color-fill-dark-tertiary, white),
    color var(--wds-color-text-standard-secondary-light, value(D40))
  );
}

.root:type(outlined):skin(warning) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-warning-primary, value(Y10)),
    backgroundColor var(--wds-color-white, white),
    color var(--wds-color-text-warning, value(Y10))
  );
}

.root:type(outlined):skin(urgent) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-urgent-primary, value(O10)),
    backgroundColor var(--wds-color-fill-urgent-tertiary, white),
    color var(--wds-color-text-urgent, value(O10))
  );
}

.root:type(outlined):skin(neutralStandard) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-standard-secondary, value(B30)),
    backgroundColor var(--wds-color-fill-standard-tertiary, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:newColorsBranding:type(outlined):skin(neutralStandard) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-standard-secondary, value(B40)),
    backgroundColor var(--wds-color-fill-standard-tertiary, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(outlined):skin(neutralSuccess) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-success-secondary, value(G30)),
    backgroundColor var(--wds-color-fill-success-tertiary, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:newColorsBranding:type(outlined):skin(neutralSuccess) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-success-secondary, value(G40)),
    backgroundColor var(--wds-color-fill-success-tertiary, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(outlined):skin(neutralDanger) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-destructive-secondary, value(R30)),
    backgroundColor var(--wds-color-fill-destructive-tertiary, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:newColorsBranding:type(outlined):skin(neutralDanger) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-destructive-secondary, value(R40)),
    backgroundColor var(--wds-color-fill-destructive-tertiary, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(outlined):skin(premium) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-premium-primary, value(P10)),
    backgroundColor var(--wds-color-fill-premium-tertiary, white),
    color var(--wds-color-text-premium, value(P10))
  );
}

.root:type(outlined):skin(neutralLight) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-dark-secondary, value(D70)),
    backgroundColor var(--wds-color-fill-dark-tertiary, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:type(outlined):skin(warningLight) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-warning-secondary, value(Y30)),
    backgroundColor var(--wds-color-white, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.root:newColorsBranding:type(outlined):skin(warningLight) {
  -st-mixin: BadgeStyle(
    borderColor var(--wds-color-border-warning-secondary, value(Y40)),
    backgroundColor var(--wds-color-white, white),
    color var(--wds-color-text-standard-secondary, value(D20))
  );
}

.BadgeStyle .text {
  color: value(color);
}

/* size = medium */
.root:size(medium) {
  padding: value(medium);
  height: value(mediumHeight);
}

.root:noPadding:size(medium) {
  padding: 0;
}

/* size = small */
.root:size(small) {
  padding: value(small);
  height: value(smallHeight);
}

.root:noPadding:size(small) {
  padding: 0;
}

/* size = tiny */
.root:size(tiny) {
  padding: value(tiny);
  height: value(tinyHeight);
}

.root:noPadding:size(tiny) {
  padding: 0;
}

/* cursor = pointer */
.root:clickable {
  cursor: pointer;
}

/* st-namespace-reference="../../../src/Badge/Badge.st.css" */