jjj 0.2.1

A modal interface for Jujutsu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

---
import { BadgeComponentSchema, type BadgeComponentProps } from '../schemas/badge';
import { parseWithFriendlyErrors } from '../utils/error-map';
import type { HTMLAttributes } from 'astro/types';

type Props = BadgeComponentProps & HTMLAttributes<'span'>;

const {
	text,
	variant,
	size,
	class: customClass,
	...attrs
} = parseWithFriendlyErrors(
	BadgeComponentSchema,
	Astro.props,
	'Invalid prop passed to the `<Badge/>` component.'
);
---

<span class:list={['sl-badge', variant, size, customClass]} {...attrs}>{text}</span>

<style>
	:global(:root) {
		--sl-badge-default-border: var(--sl-color-accent);
		--sl-badge-default-bg: var(--sl-color-accent-low);
		--sl-badge-default-text: #fff;

		--sl-badge-note-border: var(--sl-color-blue);
		--sl-badge-note-bg: var(--sl-color-blue-low);
		--sl-badge-note-text: #fff;

		--sl-badge-danger-border: var(--sl-color-red);
		--sl-badge-danger-bg: var(--sl-color-red-low);
		--sl-badge-danger-text: #fff;

		--sl-badge-success-border: var(--sl-color-green);
		--sl-badge-success-bg: var(--sl-color-green-low);
		--sl-badge-success-text: #fff;

		--sl-badge-caution-border: var(--sl-color-orange);
		--sl-badge-caution-bg: var(--sl-color-orange-low);
		--sl-badge-caution-text: #fff;

		--sl-badge-tip-border: var(--sl-color-purple);
		--sl-badge-tip-bg: var(--sl-color-purple-low);
		--sl-badge-tip-text: #fff;
	}

	:global([data-theme='light']:root) {
		--sl-badge-default-bg: var(--sl-color-accent-high);
		--sl-badge-note-bg: var(--sl-color-blue-high);
		--sl-badge-danger-bg: var(--sl-color-red-high);
		--sl-badge-success-bg: var(--sl-color-green-high);
		--sl-badge-caution-bg: var(--sl-color-orange-high);
		--sl-badge-tip-bg: var(--sl-color-purple-high);
	}

	.sl-badge {
		display: inline-block;
		border: 1px solid var(--sl-color-border-badge);
		border-radius: 0.25rem;
		font-family: var(--sl-font-system-mono);
		line-height: normal;
		color: var(--sl-color-text-badge);
		background-color: var(--sl-color-bg-badge);
		overflow-wrap: anywhere;
	}

	/* Sidebar overrides */
	:global(.sidebar-content) .sl-badge {
		line-height: 1;
		font-size: var(--sl-text-xs);
		padding: 0.125rem 0.375rem;
	}

	/* outline variant */
	:global(.sidebar-content a[aria-current='page']) > .sl-badge {
		--sl-color-bg-badge: transparent;
		--sl-color-border-badge: currentColor;
		color: inherit;
	}

	/* Color variants */
	.default {
		--sl-color-bg-badge: var(--sl-badge-default-bg);
		--sl-color-border-badge: var(--sl-badge-default-border);
		--sl-color-text-badge: var(--sl-badge-default-text);
	}

	.note {
		--sl-color-bg-badge: var(--sl-badge-note-bg);
		--sl-color-border-badge: var(--sl-badge-note-border);
		--sl-color-text-badge: var(--sl-badge-note-text);
	}

	.danger {
		--sl-color-bg-badge: var(--sl-badge-danger-bg);
		--sl-color-border-badge: var(--sl-badge-danger-border);
		--sl-color-text-badge: var(--sl-badge-danger-text);
	}

	.success {
		--sl-color-bg-badge: var(--sl-badge-success-bg);
		--sl-color-border-badge: var(--sl-badge-success-border);
		--sl-color-text-badge: var(--sl-badge-success-text);
	}

	.tip {
		--sl-color-bg-badge: var(--sl-badge-tip-bg);
		--sl-color-border-badge: var(--sl-badge-tip-border);
		--sl-color-text-badge: var(--sl-badge-tip-text);
	}

	.caution {
		--sl-color-bg-badge: var(--sl-badge-caution-bg);
		--sl-color-border-badge: var(--sl-badge-caution-border);
		--sl-color-text-badge: var(--sl-badge-caution-text);
	}

	/* Size variants */
	.small {
		font-size: var(--sl-text-xs);
		padding: 0.125rem 0.25rem;
	}

	.medium {
		font-size: var(--sl-text-sm);
		padding: 0.175rem 0.35rem;
	}

	.large {
		font-size: var(--sl-text-base);
		padding: 0.225rem 0.45rem;
	}

	/* Badge in headings */
	:global(.sl-markdown-content :is(h1, h2, h3, h4, h5, h6)) .sl-badge {
		vertical-align: middle;
	}
</style>