Skip to content

Commit abb4b92

Browse files
KianNHKianNH
committed
add variant styling
1 parent 96e3f9b commit abb4b92

File tree

8 files changed

+245
-50
lines changed

8 files changed

+245
-50
lines changed

‎src/badges.css‎

Lines changed: 75 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,85 @@
1-
:root {
2-
--badge-background: #b9d6ff;
3-
--badge-text: #002b67;
1+
.sl-badge {
2+
/* Unset Starlight styling */
3+
border: none;
4+
font-family: var(--__sl-font);
5+
overflow-wrap: unset;
6+
7+
/* Apply styling from https://www.npmjs.com/package/@cloudflare/component-label */
8+
align-items: center;
9+
border-radius: 50px;
10+
display: inline-flex;
11+
font-size: 12px;
12+
font-weight: 400;
13+
line-height: 1;
14+
user-select: none;
15+
white-space: nowrap;
16+
padding: 4px 8px;
17+
}
418

19+
:root {
520
.sl-badge {
6-
/* Unset Starlight styling */
7-
border: none;
8-
font-family: var(--__sl-font);
9-
overflow-wrap: unset;
10-
11-
/* Apply styling from https://www.npmjs.com/package/@cloudflare/component-label */
12-
align-items: center;
13-
border-radius: 50px;
14-
display: inline-flex;
15-
font-size: 12px;
16-
font-weight: 400;
17-
line-height: 1;
18-
user-select: none;
19-
white-space: nowrap;
20-
padding: 4px 8px;
21-
22-
background-color: var(--badge-background);
23-
color: var(--badge-text);
24-
25-
&.gray {
26-
background-color: #d9d9d9;
27-
color: #313131;
21+
&.note {
22+
background-color: theme("colors.cl1.blue.8") !important;
23+
color: theme("colors.cl1.blue.2") !important;
24+
}
25+
26+
&.danger {
27+
background-color: theme("colors.cl1.red.8") !important;
28+
color: theme("colors.cl1.red.2") !important;
29+
}
30+
31+
&.success {
32+
background-color: theme("colors.cl1.green.8") !important;
33+
color: theme("colors.cl1.green.2") !important;
34+
}
35+
36+
&.caution {
37+
background-color: theme("colors.cl1.orange.8") !important;
38+
color: theme("colors.cl1.orange.2") !important;
39+
}
40+
41+
&.tip {
42+
background-color: theme("colors.cl1.violet.8") !important;
43+
color: theme("colors.cl1.violet.1") !important;
44+
}
45+
46+
&.default {
47+
background-color: theme("colors.cl1.gray.9") !important;
48+
color: theme("colors.cl1.gray.2") !important;
2849
}
2950
}
3051
}
3152

3253
:root[data-theme="dark"] {
33-
--badge-background: #f8a054;
34-
--badge-text: #1d1d1d;
54+
.sl-badge {
55+
&.note {
56+
background-color: theme("colors.cl1.blue.7") !important;
57+
color: theme("colors.cl1.blue.0") !important;
58+
}
59+
60+
&.danger {
61+
background-color: theme("colors.cl1.red.8") !important;
62+
color: theme("colors.cl1.red.0") !important;
63+
}
64+
65+
&.success {
66+
background-color: theme("colors.cl1.green.7") !important;
67+
color: theme("colors.cl1.green.0") !important;
68+
}
69+
70+
&.caution {
71+
background-color: theme("colors.cl1.orange.8") !important;
72+
color: theme("colors.cl1.orange.0") !important;
73+
}
3574

36-
.sl-badge.gray {
37-
background-color: #b6b6b6;
38-
color: #1d1d1d;
75+
&.tip {
76+
background-color: theme("colors.cl1.violet.8") !important;
77+
color: theme("colors.cl1.violet.0") !important;
78+
}
79+
80+
&.default {
81+
background-color: theme("colors.cl1.gray.8") !important;
82+
color: theme("colors.cl1.gray.3") !important;
83+
}
3984
}
4085
}

‎src/components/InlineBadge.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ if (preset) {
2323
}
2424
case "beta": {
2525
text = "Beta";
26-
variant = "default";
26+
variant = "caution";
2727
break;
2828
}
2929
case "deprecated": {

‎src/components/ModelCatalog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
240240
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold">
241241
{model.model_display_name}
242242
</span>
243-
{isBeta && <span className="sl-badge ml-1">Beta</span>}
243+
{isBeta && <span className="sl-badge caution ml-1">Beta</span>}
244244
</div>
245245
<div className="!m-0 text-xs">
246246
<ModelInfo model={model.model} />

‎src/components/fields/FieldBadges.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const FieldBadges = ({ badges }: { badges: string[] }) => {
33
<ul className="m-0 inline-flex list-none items-center gap-2 p-0 text-xs">
44
{badges.map((badge) => (
55
<li key={badge}>
6-
<span className="sl-badge gray">{badge}</span>
6+
<span className="sl-badge default">{badge}</span>
77
</li>
88
))}
99
</ul>

‎src/components/overrides/PageTitle.astro‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { getEntry } from "astro:content";
1616
1717
const spotlightDetails = Astro.props.entry.data.spotlight;
1818
const updated = Astro.props.entry.data.updated;
19-
const badge = Astro.props.entry.data.sidebar?.badge;
2019
const summary = Astro.props.entry.data.summary;
2120
2221
const slug = Astro.props.entry.slug;
@@ -97,8 +96,6 @@ const hideBreadcrumbs = Astro.props.hideBreadcrumbs;
9796

9897
{!hideTitle && <Default {...Astro.props} />}
9998

100-
{badge && <Badge variant={badge.variant} text={badge.text} />}
101-
10299
{updated && <LastReviewed date={updated} />}
103100

104101
{

‎src/components/overrides/Sidebar.astro‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,28 @@ interface Group {
2929
order: number;
3030
}
3131
32+
function inferBadgeVariant(badge: ComponentProps<typeof Badge>) {
33+
if (badge.variant === "default") {
34+
switch (badge.text) {
35+
case "Beta": {
36+
badge.variant = "caution";
37+
break;
38+
}
39+
case "New": {
40+
badge.variant = "note";
41+
break;
42+
}
43+
case "Deprecated":
44+
case "Legacy": {
45+
badge.variant = "danger";
46+
break;
47+
}
48+
}
49+
}
50+
51+
return badge;
52+
}
53+
3254
const currentSection = slug?.split("/")[0];
3355
3456
let filtered = sidebar.filter(
@@ -76,7 +98,10 @@ async function handleGroup(group: Group): Promise<SidebarEntry> {
7698
7799
group.label = frontmatter.sidebar.group?.label ?? frontmatter.title;
78100
group.order = frontmatter.sidebar.order ?? Number.MAX_VALUE;
79-
group.badge = frontmatter.sidebar.group?.badge;
101+
102+
if (frontmatter.sidebar.group?.badge) {
103+
group.badge = inferBadgeVariant(frontmatter.sidebar.group?.badge);
104+
}
80105
81106
if (frontmatter.hideChildren) {
82107
return {
@@ -127,6 +152,10 @@ async function handleLink(link: Link): Promise<Link> {
127152
const frontmatter = page.data;
128153
link.order = frontmatter.sidebar.order ?? Number.MAX_VALUE;
129154
155+
if (link.badge) {
156+
link.badge = inferBadgeVariant(link.badge);
157+
}
158+
130159
if (slug === currentSection) {
131160
link.order = 0;
132161
}
@@ -139,6 +168,7 @@ async function handleLink(link: Link): Promise<Link> {
139168
badge: frontmatter.external_link.startsWith("/api")
140169
? {
141170
text: "API",
171+
variant: "note",
142172
}
143173
: undefined,
144174
};

‎src/content/docs/style-guide/components/badges.mdx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,19 @@ import { Badge } from "~/components";
66

77
Badges are a built-in component provided by [Starlight](https://starlight.astro.build/guides/components/#bades). Use them to indicate a product is in beta, for example.
88

9-
:::caution
10-
11-
Whilst the component from Starlight supports `variant` and `size` props, these are ignored in our styling.
12-
13-
:::
14-
15-
To adopt this styling in a React component, please use a `span` with the `sl-badge` class. In order to style the badge as gray, please apply the `gray` class.
16-
179
## Component
1810

11+
To adopt this styling in a React component, apply the `sl-badge` class to a `span` element.
12+
1913
```mdx live
2014
import { Badge } from "~/components";
2115

16+
<Badge text="Note" variant="note" />
17+
<Badge text="Success" variant="success" />
18+
<Badge text="Tip" variant="tip" />
19+
<Badge text="Caution" variant="caution" />
20+
<Badge text="Danger" variant="danger" />
2221
<Badge text="Default" />
23-
<Badge text="Gray" class="gray" />
24-
25-
<span className="sl-badge gray">
26-
React
27-
</span>
2822
```
2923

3024
## Sidebar

‎tailwind.config.mjs‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,134 @@ const gray = {
1212
900: "#181818",
1313
};
1414

15+
const cl1 = {
16+
white: "#fff",
17+
black: "#000",
18+
red: {
19+
0: "#3c0501",
20+
1: "#5a0801",
21+
2: "#780a02",
22+
3: "#970d02",
23+
4: "#b20f03",
24+
5: "#e81403",
25+
6: "#fc574a",
26+
7: "#fe9f97",
27+
8: "#feccc8",
28+
9: "#ffefee",
29+
},
30+
orange: {
31+
0: "#361a02",
32+
1: "#482303",
33+
2: "#592b04",
34+
3: "#763905",
35+
4: "#8d4406",
36+
5: "#c05d08",
37+
6: "#ee730a",
38+
7: "#f8a054",
39+
8: "#fbcda5",
40+
9: "#fef1e6",
41+
},
42+
gold: {
43+
0: "#361a02",
44+
1: "#3e2d00",
45+
2: "#4c3700",
46+
3: "#644900",
47+
4: "#735400",
48+
5: "#a77a00",
49+
6: "#dda100",
50+
7: "#ffce4b",
51+
8: "#ffeab2",
52+
9: "#fff8e4",
53+
},
54+
green: {
55+
0: "#0a2614",
56+
1: "#0e381d",
57+
2: "#104122",
58+
3: "#15562d",
59+
4: "#196535",
60+
5: "#228b49",
61+
6: "#2db35e",
62+
7: "#55d584",
63+
8: "#a8e9c0",
64+
9: "#e3f8eb",
65+
},
66+
cyan: {
67+
0: "#061b20",
68+
1: "#0b333e",
69+
2: "#0d3e4b",
70+
3: "#115061",
71+
4: "#156074",
72+
5: "#1e89a5",
73+
6: "#30b6da",
74+
7: "#73cee6",
75+
8: "#ace2f0",
76+
9: "#e9f7fb",
77+
},
78+
blue: {
79+
0: "#001c43",
80+
1: "#002b67",
81+
2: "#003681",
82+
3: "#0045a6",
83+
4: "#0051c3",
84+
5: "#086fff",
85+
6: "#4693ff",
86+
7: "#82b6ff",
87+
8: "#b9d6ff",
88+
9: "#ecf4ff",
89+
},
90+
indigo: {
91+
0: "#170f58",
92+
1: "#221785",
93+
2: "#2c1ea9",
94+
3: "#3524cd",
95+
4: "#4b3bdc",
96+
5: "#7366e4",
97+
6: "#9d94ec",
98+
7: "#c2bdf3",
99+
8: "#dfdcf9",
100+
9: "#f1f0fc",
101+
},
102+
violet: {
103+
0: "#350b42",
104+
1: "#490f5c",
105+
2: "#5f1477",
106+
3: "#741892",
107+
4: "#8d1eb1",
108+
5: "#b73cdf",
109+
6: "#cf7ee9",
110+
7: "#dfa8f1",
111+
8: "#ebcaf6",
112+
9: "#f7eafb",
113+
},
114+
pink: {
115+
0: "#2d0210",
116+
1: "#4e031c",
117+
2: "#6a0426",
118+
3: "#8d0633",
119+
4: "#af0740",
120+
5: "#e80954",
121+
6: "#f85189",
122+
7: "#fb97b9",
123+
8: "#fdc9db",
124+
9: "#fef1f5",
125+
},
126+
gray: {
127+
0: "#1d1d1d",
128+
1: "#313131",
129+
2: "#3d3d3d",
130+
3: "#4a4a4a",
131+
4: "#595959",
132+
5: "#797979",
133+
6: "#999999",
134+
7: "#b6b6b6",
135+
8: "#d9d9d9",
136+
9: "#f2f2f2",
137+
},
138+
brand: {
139+
orange: "#f6821f",
140+
},
141+
};
142+
15143
/** @type {import('tailwindcss').Config} */
16144
export default {
17145
content: ["./src/**/*.{astro,html,js,jsx,ts,tsx}"],
@@ -29,6 +157,7 @@ export default {
29157
900: "var(--tw-accent-900)",
30158
},
31159
gray,
160+
cl1,
32161
},
33162
},
34163
},

0 commit comments

Comments
 (0)