diff --git a/src/pages/workers-ai/models/[name].astro b/src/pages/workers-ai/models/[name].astro
index 3a9de81c7045fc4..afea341fb6b1263 100644
--- a/src/pages/workers-ai/models/[name].astro
+++ b/src/pages/workers-ai/models/[name].astro
@@ -151,7 +151,7 @@ const starlightPageProps = {
{name}
{isBeta && }
@@ -162,7 +162,7 @@ const starlightPageProps = {
{model.name}
-
{description}
+
{description}
{
model.name === "@cf/meta/llama-3.2-11b-vision-instruct" && (
diff --git a/src/plugins/expressive-code/workers-playground.js b/src/plugins/expressive-code/workers-playground.js
index fae46e4fb12b389..992423594e2fd31 100644
--- a/src/plugins/expressive-code/workers-playground.js
+++ b/src/plugins/expressive-code/workers-playground.js
@@ -88,10 +88,10 @@ export default () => {
properties: {
className: [
"playground-frame",
- "!flex",
- "!p-4",
- "!justify-end",
- "!items-center",
+ "flex!",
+ "p-4!",
+ "justify-end!",
+ "items-center!",
],
},
children: [
@@ -100,13 +100,13 @@ export default () => {
tagName: "a",
properties: {
className: [
- "!bg-cl1-brand-orange",
- "!rounded",
- "!px-6",
- "!py-2",
- "!text-cl1-black",
- "!font-medium",
- "!no-underline",
+ "bg-cl1-brand-orange!",
+ "rounded-sm!",
+ "px-6!",
+ "py-2!",
+ "text-cl1-black!",
+ "font-medium!",
+ "no-underline!",
],
href: `https://workers.cloudflare.com/playground#${serialised}`,
target: "_blank",
diff --git a/src/styles/badges.css b/src/styles/badges.css
index 001beab380fc96d..47d61874dc21c44 100644
--- a/src/styles/badges.css
+++ b/src/styles/badges.css
@@ -19,33 +19,33 @@
:root {
.sl-badge {
&.note {
- background-color: theme("colors.cl1.blue.8") !important;
- color: theme("colors.cl1.blue.2") !important;
+ background-color: var(--color-cl1-blue-8) !important;
+ color: var(--color-cl1-blue-2) !important;
}
&.danger {
- background-color: theme("colors.cl1.red.8") !important;
- color: theme("colors.cl1.red.2") !important;
+ background-color: var(--color-cl1-red-8) !important;
+ color: var(--color-cl1-red-2) !important;
}
&.success {
- background-color: theme("colors.cl1.green.8") !important;
- color: theme("colors.cl1.green.2") !important;
+ background-color: var(--color-cl1-green-8) !important;
+ color: var(--color-cl1-green-2) !important;
}
&.caution {
- background-color: theme("colors.cl1.orange.8") !important;
- color: theme("colors.cl1.orange.2") !important;
+ background-color: var(--color-cl1-orange-8) !important;
+ color: var(--color-cl1-orange-2) !important;
}
&.tip {
- background-color: theme("colors.cl1.violet.8") !important;
- color: theme("colors.cl1.violet.1") !important;
+ background-color: var(--color-cl1-violet-8) !important;
+ color: var(--color-cl1-violet-1) !important;
}
&.default {
- background-color: theme("colors.cl1.gray.9") !important;
- color: theme("colors.cl1.gray.2") !important;
+ background-color: var(--color-cl1-gray-9) !important;
+ color: var(--color-cl1-gray-2) !important;
}
}
}
@@ -53,33 +53,33 @@
:root[data-theme="dark"] {
.sl-badge {
&.note {
- background-color: theme("colors.cl1.blue.7") !important;
- color: theme("colors.cl1.blue.0") !important;
+ background-color: var(--color-cl1-blue-7) !important;
+ color: var(--color-cl1-blue-0) !important;
}
&.danger {
- background-color: theme("colors.cl1.red.8") !important;
- color: theme("colors.cl1.red.0") !important;
+ background-color: var(--color-cl1-red-8) !important;
+ color: var(--color-cl1-red-0) !important;
}
&.success {
- background-color: theme("colors.cl1.green.7") !important;
- color: theme("colors.cl1.green.0") !important;
+ background-color: var(--color-cl1-green-7) !important;
+ color: var(--color-cl1-green-0) !important;
}
&.caution {
- background-color: theme("colors.cl1.orange.8") !important;
- color: theme("colors.cl1.orange.0") !important;
+ background-color: var(--color-cl1-orange-8) !important;
+ color: var(--color-cl1-orange-0) !important;
}
&.tip {
- background-color: theme("colors.cl1.violet.8") !important;
- color: theme("colors.cl1.violet.0") !important;
+ background-color: var(--color-cl1-violet-8) !important;
+ color: var(--color-cl1-violet-0) !important;
}
&.default {
- background-color: theme("colors.cl1.gray.8") !important;
- color: theme("colors.cl1.gray.3") !important;
+ background-color: var(--color-cl1-gray-8) !important;
+ color: var(--color-cl1-gray-3) !important;
}
}
}
diff --git a/src/styles/breadcrumbs.css b/src/styles/breadcrumbs.css
index 104ae7734d3d9d2..93d547fd421922e 100644
--- a/src/styles/breadcrumbs.css
+++ b/src/styles/breadcrumbs.css
@@ -1,27 +1,7 @@
-.c-breadcrumbs {
- --spacing-vertical-separator-breadcrumbs: 0.625rem;
-
- padding: 0.5rem 0;
-
- .c-breadcrumbs__link {
- font-size: 0.75rem;
- line-height: 1.25rem;
- font-weight: 600;
- }
-
- .c-breadcrumbs__separator {
- color: theme("colors.cl1.brand.orange");
- }
-
- .c-breadcrumbs__truncated-button {
- color: theme("colors.cl1.brand.orange");
- }
-}
-
:root[data-theme="dark"] {
- --color-link-breadcrumbs: theme("colors.cl1.gray.7");
+ --color-link-breadcrumbs: var(--color-cl1-gray-7);
}
:root[data-theme="light"] {
- --color-link-breadcrumbs: theme("colors.cl1.gray.4");
+ --color-link-breadcrumbs: var(--color-cl1-gray-4);
}
diff --git a/src/styles/pagination.css b/src/styles/pagination.css
index 15760ac0f899409..1347ce6584aab6a 100644
--- a/src/styles/pagination.css
+++ b/src/styles/pagination.css
@@ -40,9 +40,9 @@
}
:root[data-theme="light"] {
- --pagination-arrow-color: theme("colors.cl1.gray.0");
+ --pagination-arrow-color: var(--color-cl1-gray-0);
}
:root[data-theme="dark"] {
- --pagination-arrow-color: theme("colors.cl1.gray.9");
+ --pagination-arrow-color: var(--color-cl1-gray-9);
}
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index bb2144e01d77c77..98193c7d5b296bd 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -77,12 +77,12 @@
}
:root[data-theme="dark"] {
- --sl-color-bg-sidebar: theme("colors.cl1.gray.0");
- --sl-color-sidebar-active: theme("colors.cl1.blue.7");
- --sl-color-sidebar-hover: theme("colors.cl1.gray.2");
+ --sl-color-bg-sidebar: var(--color-cl1-gray-0);
+ --sl-color-sidebar-active: var(--color-cl1-blue-7);
+ --sl-color-sidebar-hover: var(--color-cl1-gray-2);
}
:root[data-theme="light"] {
- --sl-color-sidebar-active: theme("colors.cl1.blue.4");
- --sl-color-sidebar-hover: theme("colors.cl1.gray.9");
+ --sl-color-sidebar-active: var(--color-cl1-blue-4);
+ --sl-color-sidebar-hover: var(--color-cl1-gray-9);
}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 0e1a1748368e443..bacc7ab769a7361 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,6 +1,147 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer base, starlight, theme, components, utilities;
+
+@import "@astrojs/starlight-tailwind";
+@import "tailwindcss/theme.css" layer(theme) source(none);
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+
+@source "../**/*.{astro,html,js,jsx,ts,tsx,css}";
+@source not "../content/";
+
+@theme {
+ --color-black: var(--sl-color-white);
+
+ --color-accent-200: var(--tw-accent-200);
+ --color-accent-600: var(--tw-accent-600);
+ --color-accent-900: var(--tw-accent-900);
+ --color-accent: var(--sl-color-accent);
+ --color-accent-high: var(--tw-accent-200);
+
+ --color-sl: var(--sl-color-text);
+
+ --color-gray-100: #f6f6f6;
+ --color-gray-200: #eeeeee;
+ --color-gray-300: #c2c2c2;
+ --color-gray-400: #8b8b8b;
+ --color-gray-500: #585858;
+ --color-gray-700: #383838;
+ --color-gray-800: #272727;
+ --color-gray-900: #181818;
+
+ --color-cl1-white: #fff;
+ --color-cl1-black: #000;
+
+ --color-cl1-red-0: #3c0501;
+ --color-cl1-red-1: #5a0801;
+ --color-cl1-red-2: #780a02;
+ --color-cl1-red-3: #970d02;
+ --color-cl1-red-4: #b20f03;
+ --color-cl1-red-5: #e81403;
+ --color-cl1-red-6: #fc574a;
+ --color-cl1-red-7: #fe9f97;
+ --color-cl1-red-8: #feccc8;
+ --color-cl1-red-9: #ffefee;
+
+ --color-cl1-orange-0: #361a02;
+ --color-cl1-orange-1: #482303;
+ --color-cl1-orange-2: #592b04;
+ --color-cl1-orange-3: #763905;
+ --color-cl1-orange-4: #8d4406;
+ --color-cl1-orange-5: #c05d08;
+ --color-cl1-orange-6: #ee730a;
+ --color-cl1-orange-7: #f8a054;
+ --color-cl1-orange-8: #fbcda5;
+ --color-cl1-orange-9: #fef1e6;
+
+ --color-cl1-gold-0: #361a02;
+ --color-cl1-gold-1: #3e2d00;
+ --color-cl1-gold-2: #4c3700;
+ --color-cl1-gold-3: #644900;
+ --color-cl1-gold-4: #735400;
+ --color-cl1-gold-5: #a77a00;
+ --color-cl1-gold-6: #dda100;
+ --color-cl1-gold-7: #ffce4b;
+ --color-cl1-gold-8: #ffeab2;
+ --color-cl1-gold-9: #fff8e4;
+
+ --color-cl1-green-0: #0a2614;
+ --color-cl1-green-1: #0e381d;
+ --color-cl1-green-2: #104122;
+ --color-cl1-green-3: #15562d;
+ --color-cl1-green-4: #196535;
+ --color-cl1-green-5: #228b49;
+ --color-cl1-green-6: #2db35e;
+ --color-cl1-green-7: #55d584;
+ --color-cl1-green-8: #a8e9c0;
+ --color-cl1-green-9: #e3f8eb;
+
+ --color-cl1-cyan-0: #061b20;
+ --color-cl1-cyan-1: #0b333e;
+ --color-cl1-cyan-2: #0d3e4b;
+ --color-cl1-cyan-3: #115061;
+ --color-cl1-cyan-4: #156074;
+ --color-cl1-cyan-5: #1e89a5;
+ --color-cl1-cyan-6: #30b6da;
+ --color-cl1-cyan-7: #73cee6;
+ --color-cl1-cyan-8: #ace2f0;
+ --color-cl1-cyan-9: #e9f7fb;
+
+ --color-cl1-blue-0: #001c43;
+ --color-cl1-blue-1: #002b67;
+ --color-cl1-blue-2: #003681;
+ --color-cl1-blue-3: #0045a6;
+ --color-cl1-blue-4: #0051c3;
+ --color-cl1-blue-5: #086fff;
+ --color-cl1-blue-6: #4693ff;
+ --color-cl1-blue-7: #82b6ff;
+ --color-cl1-blue-8: #b9d6ff;
+ --color-cl1-blue-9: #ecf4ff;
+
+ --color-cl1-indigo-0: #170f58;
+ --color-cl1-indigo-1: #221785;
+ --color-cl1-indigo-2: #2c1ea9;
+ --color-cl1-indigo-3: #3524cd;
+ --color-cl1-indigo-4: #4b3bdc;
+ --color-cl1-indigo-5: #7366e4;
+ --color-cl1-indigo-6: #9d94ec;
+ --color-cl1-indigo-7: #c2bdf3;
+ --color-cl1-indigo-8: #dfdcf9;
+ --color-cl1-indigo-9: #f1f0fc;
+
+ --color-cl1-violet-0: #350b42;
+ --color-cl1-violet-1: #490f5c;
+ --color-cl1-violet-2: #5f1477;
+ --color-cl1-violet-3: #741892;
+ --color-cl1-violet-4: #8d1eb1;
+ --color-cl1-violet-5: #b73cdf;
+ --color-cl1-violet-6: #cf7ee9;
+ --color-cl1-violet-7: #dfa8f1;
+ --color-cl1-violet-8: #ebcaf6;
+ --color-cl1-violet-9: #f7eafb;
+
+ --color-cl1-pink-0: #2d0210;
+ --color-cl1-pink-1: #4e031c;
+ --color-cl1-pink-2: #6a0426;
+ --color-cl1-pink-3: #8d0633;
+ --color-cl1-pink-4: #af0740;
+ --color-cl1-pink-5: #e80954;
+ --color-cl1-pink-6: #f85189;
+ --color-cl1-pink-7: #fb97b9;
+ --color-cl1-pink-8: #fdc9db;
+ --color-cl1-pink-9: #fef1f5;
+
+ --color-cl1-gray-0: #1d1d1d;
+ --color-cl1-gray-1: #313131;
+ --color-cl1-gray-2: #3d3d3d;
+ --color-cl1-gray-3: #4a4a4a;
+ --color-cl1-gray-4: #595959;
+ --color-cl1-gray-5: #797979;
+ --color-cl1-gray-6: #999999;
+ --color-cl1-gray-7: #b6b6b6;
+ --color-cl1-gray-8: #d9d9d9;
+ --color-cl1-gray-9: #f2f2f2;
+
+ --color-cl1-brand-orange: #f6821f;
+}
@layer base {
:root {
diff --git a/src/util/container.ts b/src/util/container.ts
index bf22794f0a13d96..944b555f17f4999 100644
--- a/src/util/container.ts
+++ b/src/util/container.ts
@@ -19,6 +19,7 @@ export async function entryToString(
});
container.addServerRenderer({
name: "@astrojs/react",
+ // @ts-expect-error incompatible types
renderer: reactRenderer,
});
@@ -43,6 +44,7 @@ export async function componentToString(
});
container.addServerRenderer({
name: "@astrojs/react",
+ // @ts-expect-error incompatible types
renderer: reactRenderer,
});
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
deleted file mode 100644
index 5d86484f1a9655b..000000000000000
--- a/tailwind.config.mjs
+++ /dev/null
@@ -1,168 +0,0 @@
-// @ts-check
-import starlightPlugin from "@astrojs/starlight-tailwind";
-
-const gray = {
- 100: "#f6f6f6",
- 200: "#eeeeee",
- 300: "#c2c2c2",
- 400: "#8b8b8b",
- 500: "#585858",
- 700: "#383838",
- 800: "#272727",
- 900: "#181818",
-};
-
-const cl1 = {
- white: "#fff",
- black: "#000",
- red: {
- 0: "#3c0501",
- 1: "#5a0801",
- 2: "#780a02",
- 3: "#970d02",
- 4: "#b20f03",
- 5: "#e81403",
- 6: "#fc574a",
- 7: "#fe9f97",
- 8: "#feccc8",
- 9: "#ffefee",
- },
- orange: {
- 0: "#361a02",
- 1: "#482303",
- 2: "#592b04",
- 3: "#763905",
- 4: "#8d4406",
- 5: "#c05d08",
- 6: "#ee730a",
- 7: "#f8a054",
- 8: "#fbcda5",
- 9: "#fef1e6",
- },
- gold: {
- 0: "#361a02",
- 1: "#3e2d00",
- 2: "#4c3700",
- 3: "#644900",
- 4: "#735400",
- 5: "#a77a00",
- 6: "#dda100",
- 7: "#ffce4b",
- 8: "#ffeab2",
- 9: "#fff8e4",
- },
- green: {
- 0: "#0a2614",
- 1: "#0e381d",
- 2: "#104122",
- 3: "#15562d",
- 4: "#196535",
- 5: "#228b49",
- 6: "#2db35e",
- 7: "#55d584",
- 8: "#a8e9c0",
- 9: "#e3f8eb",
- },
- cyan: {
- 0: "#061b20",
- 1: "#0b333e",
- 2: "#0d3e4b",
- 3: "#115061",
- 4: "#156074",
- 5: "#1e89a5",
- 6: "#30b6da",
- 7: "#73cee6",
- 8: "#ace2f0",
- 9: "#e9f7fb",
- },
- blue: {
- 0: "#001c43",
- 1: "#002b67",
- 2: "#003681",
- 3: "#0045a6",
- 4: "#0051c3",
- 5: "#086fff",
- 6: "#4693ff",
- 7: "#82b6ff",
- 8: "#b9d6ff",
- 9: "#ecf4ff",
- },
- indigo: {
- 0: "#170f58",
- 1: "#221785",
- 2: "#2c1ea9",
- 3: "#3524cd",
- 4: "#4b3bdc",
- 5: "#7366e4",
- 6: "#9d94ec",
- 7: "#c2bdf3",
- 8: "#dfdcf9",
- 9: "#f1f0fc",
- },
- violet: {
- 0: "#350b42",
- 1: "#490f5c",
- 2: "#5f1477",
- 3: "#741892",
- 4: "#8d1eb1",
- 5: "#b73cdf",
- 6: "#cf7ee9",
- 7: "#dfa8f1",
- 8: "#ebcaf6",
- 9: "#f7eafb",
- },
- pink: {
- 0: "#2d0210",
- 1: "#4e031c",
- 2: "#6a0426",
- 3: "#8d0633",
- 4: "#af0740",
- 5: "#e80954",
- 6: "#f85189",
- 7: "#fb97b9",
- 8: "#fdc9db",
- 9: "#fef1f5",
- },
- gray: {
- 0: "#1d1d1d",
- 1: "#313131",
- 2: "#3d3d3d",
- 3: "#4a4a4a",
- 4: "#595959",
- 5: "#797979",
- 6: "#999999",
- 7: "#b6b6b6",
- 8: "#d9d9d9",
- 9: "#f2f2f2",
- },
- brand: {
- orange: "#f6821f",
- },
-};
-
-/** @type {import('tailwindcss').Config} */
-export default {
- content: ["./src/**/*.{astro,html,js,jsx,ts,tsx}"],
- theme: {
- extend: {
- colors: {
- black: {
- DEFAULT: "var(--sl-color-white)",
- },
- accent: {
- DEFAULT: "var(--sl-color-accent)",
- high: "var(--tw-accent-200)",
- 200: "var(--tw-accent-200)",
- 600: "var(--tw-accent-600)",
- 900: "var(--tw-accent-900)",
- },
- sl: {
- DEFAULT: "var(--sl-color-text)",
- },
- gray,
- cl1,
- },
- },
- },
- plugins: [starlightPlugin()],
-};