mirror of
https://github.com/sern-handler/website
synced 2026-06-27 10:12:23 +00:00
88 lines
1.9 KiB
Plaintext
88 lines
1.9 KiB
Plaintext
---
|
|
import type { Badge } from '../schemas/badge';
|
|
|
|
interface Props {
|
|
variant?: Badge['variant'] | 'outline';
|
|
text?: string;
|
|
}
|
|
const { variant = 'default', text } = Astro.props;
|
|
---
|
|
|
|
<span class:list={['sl-badge', variant]} set:html={text} />
|
|
|
|
<style>
|
|
.sl-badge {
|
|
display: inline-block;
|
|
border: 1px solid var(--sl-color-border-badge);
|
|
border-radius: 0.25rem;
|
|
font-family: var(--sl-font-system-mono);
|
|
font-size: var(--sl-text-xs);
|
|
font-weight: 400;
|
|
padding: 0.125rem 0.375rem;
|
|
line-height: 1;
|
|
color: #fff;
|
|
background-color: var(--sl-color-bg-badge);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.outline {
|
|
--sl-color-bg-badge: transparent;
|
|
--sl-color-border-badge: currentColor;
|
|
color: inherit;
|
|
}
|
|
|
|
.default {
|
|
--sl-color-bg-badge: var(--sl-color-accent-low);
|
|
--sl-color-border-badge: var(--sl-color-accent);
|
|
}
|
|
|
|
.note {
|
|
--sl-color-bg-badge: var(--sl-color-blue-low);
|
|
--sl-color-border-badge: var(--sl-color-blue);
|
|
}
|
|
|
|
.danger {
|
|
--sl-color-bg-badge: var(--sl-color-red-low);
|
|
--sl-color-border-badge: var(--sl-color-red);
|
|
}
|
|
|
|
.success {
|
|
--sl-color-bg-badge: var(--sl-color-green-low);
|
|
--sl-color-border-badge: var(--sl-color-green);
|
|
}
|
|
|
|
.caution {
|
|
--sl-color-bg-badge: var(--sl-color-orange-low);
|
|
--sl-color-border-badge: var(--sl-color-orange);
|
|
}
|
|
|
|
.tip {
|
|
--sl-color-bg-badge: var(--sl-color-purple-low);
|
|
--sl-color-border-badge: var(--sl-color-purple);
|
|
}
|
|
|
|
:global([data-theme='light']) .default {
|
|
--sl-color-bg-badge: var(--sl-color-accent-high);
|
|
}
|
|
|
|
:global([data-theme='light']) .note {
|
|
--sl-color-bg-badge: var(--sl-color-blue-high);
|
|
}
|
|
|
|
:global([data-theme='light']) .danger {
|
|
--sl-color-bg-badge: var(--sl-color-red-high);
|
|
}
|
|
|
|
:global([data-theme='light']) .success {
|
|
--sl-color-bg-badge: var(--sl-color-green-high);
|
|
}
|
|
|
|
:global([data-theme='light']) .caution {
|
|
--sl-color-bg-badge: var(--sl-color-orange-high);
|
|
}
|
|
|
|
:global([data-theme='light']) .tip {
|
|
--sl-color-bg-badge: var(--sl-color-purple-high);
|
|
}
|
|
</style>
|