@dialpad/dialtone-css
Version:
Dialpad's design system
164 lines (145 loc) • 6.33 kB
text/less
//
// DIALTONE
// COMPONENTS: BADGES
//
// These are badge classes for Dialpad's design system Dialtone.
// For further documentation of these and other classes,
// visit https://dialtone.dialpad.com/components/badges
//
// TABLE OF CONTENTS
// • COMPONENT CSS VARIABLES
// • BASE STYLE
// • KIND
// • TYPE
// • SLOTS
//
// ============================================================================
// $ BASE STYLE
// ----------------------------------------------------------------------------
.d-badge {
// COMPONENT CSS VARIABLES
// --------------------------------------------------------------------------
--badge-color-text: var(--dt-badge-color-foreground-default);
--badge-color-background: var(--dt-badge-color-background-default);
--badge-color-outline: var(--dt-badge-color-border-default);
--badge-radius: var(--dt-size-300);
--badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
--badge-font-size: var(--dt-font-size-100);
--badge-font-weight: var(--dt-font-weight-semi-bold);
--badge-gap: var(--dt-space-200);
--badge-letter-spacing: var(--dt-size-50);
--badge-padding-y: var(--dt-space-100);
--badge-padding-x: var(--dt-space-300);
--badge-label-padding-x: var(--dt-space-200);
--badge-text-case: none;
--badge-decorative-color: var(--dt-color-black-900);
// BASE STYLE
// --------------------------------------------------------------------------
display: inline-flex;
gap: var(--badge-gap);
align-items: center;
justify-content: center;
box-sizing: border-box;
min-inline-size: var(--dt-size-550);
padding: var(--badge-padding-y) var(--badge-padding-x);
color: var(--badge-color-text);
font-weight: var(--badge-font-weight);
font-size: var(--badge-font-size);
line-height: var(--badge-line-height);
letter-spacing: var(--badge-letter-spacing);
text-align: center;
text-transform: var(--badge-text-case);
background-color: var(--badge-color-background);
border-radius: var(--badge-radius);
// Kind
// --------------------------------------------------------------------------
&--count {
--badge-radius: var(--dt-size-radius-pill);
--badge-padding-x: calc(var(--dt-space-400) - var(--dt-space-100));
--badge-padding-y: var(--dt-space-300);
--badge-line-height: var(--dt-size-500);
--badge-label-padding-x: var(--dt-space-0);
--badge-gap: var(--dt-space-300);
}
// TYPE
// --------------------------------------------------------------------------
&--info {
--badge-color-background: var(--dt-badge-color-background-info);
}
&--success {
--badge-color-background: var(--dt-badge-color-background-success);
}
&--warning {
--badge-color-background: var(--dt-badge-color-background-warning);
}
&--critical {
--badge-color-background: var(--dt-badge-color-background-critical);
}
&--bulletin {
--badge-color-text: var(--dt-badge-color-foreground-bulletin);
--badge-color-background: var(--dt-badge-color-background-bulletin);
&.d-badge--subtle {
--badge-color-text: var(--dt-badge-color-foreground-bulletin-subtle);
--badge-color-background: var(--dt-badge-color-background-bulletin-subtle);
--badge-color-outline: var(--dt-badge-color-border-bulletin-subtle);
}
}
&--ai {
--badge-color-text: var(--dt-badge-color-foreground-ai);
--badge-color-background: var(--dt-color-brand-magenta); // fallback to gradient
text-shadow: var(--dt-size-50) var(--dt-size-50) 0 hsl(var(--dt-color-neutral-black-h), var(--dt-color-neutral-black-s), var(--dt-color-neutral-black-l), 0.6);
background-image: var(--dt-badge-color-background-ai);
}
&--outlined {
box-shadow: 0 0 0 var(--dt-size-border-100) var(--badge-color-outline) inset;
}
// DECORATIVE
// --------------------------------------------------------------------------
&--decorate-black-400 { --badge-decorative-color: var(--dt-color-black-400); }
&--decorate-black-500 { --badge-decorative-color: var(--dt-color-black-500); }
&--decorate-black-900 { --badge-decorative-color: var(--dt-color-black-900); }
&--decorate-red-200 { --badge-decorative-color: var(--dt-color-red-200); }
&--decorate-red-300 { --badge-decorative-color: var(--dt-color-red-300); }
&--decorate-red-400 { --badge-decorative-color: var(--dt-color-red-400); }
&--decorate-purple-200 { --badge-decorative-color: var(--dt-color-purple-200); }
&--decorate-purple-300 { --badge-decorative-color: var(--dt-color-purple-300); }
&--decorate-purple-400 { --badge-decorative-color: var(--dt-color-purple-400); }
&--decorate-purple-500 { --badge-decorative-color: var(--dt-color-purple-500); }
&--decorate-blue-200 { --badge-decorative-color: var(--dt-color-blue-200); }
&--decorate-blue-300 { --badge-decorative-color: var(--dt-color-blue-300); }
&--decorate-blue-400 { --badge-decorative-color: var(--dt-color-blue-400); }
&--decorate-green-300 { --badge-decorative-color: var(--dt-color-green-300); }
&--decorate-green-400 { --badge-decorative-color: var(--dt-color-green-400); }
&--decorate-green-500 { --badge-decorative-color: var(--dt-color-green-500); }
&--decorate-gold-300 { --badge-decorative-color: var(--dt-color-gold-300); }
&--decorate-gold-400 { --badge-decorative-color: var(--dt-color-gold-400); }
&--decorate-gold-500 { --badge-decorative-color: var(--dt-color-gold-500); }
&--decorate-magenta-200 { --badge-decorative-color: var(--dt-color-magenta-200); }
&--decorate-magenta-300 { --badge-decorative-color: var(--dt-color-magenta-300); }
&--decorate-magenta-400 { --badge-decorative-color: var(--dt-color-magenta-400); }
// SLOTS
// --------------------------------------------------------------------------
&__decorative {
display: inline-flex;
width: var(--dt-size-400);
height: var(--dt-size-400);
background-color: var(--badge-decorative-color);
border-radius: var(--dt-size-200);
margin-inline-start: var(--dt-space-200);
}
&__label {
display: flex;
align-items: center;
padding-inline: var(--badge-label-padding-x);
}
&__icon-left,
&__icon-right {
display: flex;
}
&__icon-left {
padding-inline-start: var(--dt-space-100);
}
&__icon-right {
padding-inline-end: var(--dt-space-100);
}
}