#[derive(Debug, Clone, PartialEq, Default, Copy)]
pub enum Size {
Sm,
#[default]
Md,
Lg,
}
impl Size {
pub fn to_class(self) -> &'static str {
match self {
Self::Sm => "badge--sm",
Self::Md => "badge--md",
Self::Lg => "badge--lg",
}
}
pub fn to_label_style(self) -> &'static str {
match self {
Self::Sm => "min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px;",
Self::Md => "min-width: 20px; height: 20px; font-size: 11px; padding: 0 5px;",
Self::Lg => "min-width: 24px; height: 24px; font-size: 12px; padding: 0 6px;",
}
}
pub fn to_dot_style(self) -> &'static str {
match self {
Self::Sm => "width: 8px; height: 8px;",
Self::Md => "width: 10px; height: 10px;",
Self::Lg => "width: 12px; height: 12px;",
}
}
}
#[derive(Debug, Clone, PartialEq, Default, Copy)]
pub enum Color {
#[default]
Default,
Accent,
Success,
Warning,
Danger,
}
impl Color {
pub fn to_class(self) -> &'static str {
match self {
Self::Default => "badge--default",
Self::Accent => "badge--accent",
Self::Success => "badge--success",
Self::Warning => "badge--warning",
Self::Danger => "badge--danger",
}
}
pub fn to_primary_style(self) -> &'static str {
match self {
Self::Default => "background-color: #4b5563; color: #ffffff;",
Self::Accent => "background-color: #7c3aed; color: #ffffff;",
Self::Success => "background-color: #16a34a; color: #ffffff;",
Self::Warning => "background-color: #d97706; color: #ffffff;",
Self::Danger => "background-color: #dc2626; color: #ffffff;",
}
}
pub fn to_secondary_style(self) -> &'static str {
match self {
Self::Default => {
"background-color: #ffffff; color: #4b5563; border: 1px solid #4b5563;"
}
Self::Accent => "background-color: #ffffff; color: #7c3aed; border: 1px solid #7c3aed;",
Self::Success => {
"background-color: #ffffff; color: #16a34a; border: 1px solid #16a34a;"
}
Self::Warning => {
"background-color: #ffffff; color: #d97706; border: 1px solid #d97706;"
}
Self::Danger => "background-color: #ffffff; color: #dc2626; border: 1px solid #dc2626;",
}
}
pub fn to_soft_style(self) -> &'static str {
match self {
Self::Default => "background-color: #f3f4f6; color: #4b5563;",
Self::Accent => "background-color: #ede9fe; color: #7c3aed;",
Self::Success => "background-color: #dcfce7; color: #16a34a;",
Self::Warning => "background-color: #fef3c7; color: #d97706;",
Self::Danger => "background-color: #fee2e2; color: #dc2626;",
}
}
}
#[derive(Debug, Clone, PartialEq, Default, Copy)]
pub enum Variant {
#[default]
Primary,
Secondary,
Soft,
}
impl Variant {
pub fn to_class(self) -> &'static str {
match self {
Self::Primary => "badge--primary",
Self::Secondary => "badge--secondary",
Self::Soft => "badge--soft",
}
}
}
#[derive(Debug, Clone, PartialEq, Default, Copy)]
pub enum Placement {
#[default]
TopRight,
TopLeft,
BottomRight,
BottomLeft,
}
impl Placement {
pub fn to_class(self) -> &'static str {
match self {
Self::TopRight => "badge--top-right",
Self::TopLeft => "badge--top-left",
Self::BottomRight => "badge--bottom-right",
Self::BottomLeft => "badge--bottom-left",
}
}
pub fn to_style(self, shape: Shape) -> &'static str {
match (self, shape) {
(Self::TopRight, Shape::Rectangle) => {
"top: 0; right: 0; transform: translate(50%, -50%);"
}
(Self::TopLeft, Shape::Rectangle) => {
"top: 0; left: 0; transform: translate(-50%, -50%);"
}
(Self::BottomRight, Shape::Rectangle) => {
"bottom: 0; right: 0; transform: translate(50%, 50%);"
}
(Self::BottomLeft, Shape::Rectangle) => {
"bottom: 0; left: 0; transform: translate(-50%, 50%);"
}
(Self::TopRight, Shape::Circle) => {
"top: 14.64%; right: 14.64%; transform: translate(50%, -50%);"
}
(Self::TopLeft, Shape::Circle) => {
"top: 14.64%; left: 14.64%; transform: translate(-50%, -50%);"
}
(Self::BottomRight, Shape::Circle) => {
"bottom: 14.64%; right: 14.64%; transform: translate(50%, 50%);"
}
(Self::BottomLeft, Shape::Circle) => {
"bottom: 14.64%; left: 14.64%; transform: translate(-50%, 50%);"
}
}
}
}
#[derive(Debug, Clone, PartialEq, Default, Copy)]
pub enum Shape {
#[default]
Rectangle,
Circle,
}
pub fn base_badge_style() -> &'static str {
"position: absolute; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 600; white-space: nowrap; pointer-events: none; line-height: 1; box-sizing: border-box;"
}
pub fn base_anchor_style() -> &'static str {
"position: relative; display: inline-flex; flex-shrink: 0;"
}
pub fn base_label_style() -> &'static str {
"font-size: inherit; font-weight: inherit; line-height: 1;"
}