From 4987d8ed07b85aaa8fb5d0190d95b9de1b12e28a Mon Sep 17 00:00:00 2001 From: Iain Lane Date: Mon, 27 Jan 2025 16:37:16 +0000 Subject: [PATCH] chore(docs): bump to tailwind 4.0 This is [a new major version of Tailwind CSS][release-announcement], which includes a lot of breaking changes. This commit updates the project to use the new version. A lot of changes were required to accommodate this. We drop the `@astrojs/tailwind` plugin since it's not been ported to 4.0 yet. What that does is bridge between Starlight and Tailwind, and this is something we can do manually by taking the few definitions that are needed. As this implies, the way Tailwind works has changed a fair bit. There's no Javascript config file any more - it's all done in CSS instead. So the configuration has had an overhaul. Some of the classes have changed too. This, and the dropping of the plugin, meant that the styles broke a bit. We have ported to be more Tailwind-native to fix this. This means dropping most of the inline css ` diff --git a/docs/src/components/MobileTableOfContents.astro b/docs/src/components/MobileTableOfContents.astro index e9592c6c2..a7f6191db 100644 --- a/docs/src/components/MobileTableOfContents.astro +++ b/docs/src/components/MobileTableOfContents.astro @@ -1,151 +1,82 @@ --- import { Icon } from '@astrojs/starlight/components'; import TableOfContentsList from './TableOfContentsList.astro'; -import type { Props } from '@astrojs/starlight/props' - +import type { Props } from '@astrojs/starlight/props'; const { toc, slug } = Astro.props; --- { - toc && ( - - - - ) + toc && ( + + + + ) } - - diff --git a/docs/src/components/TableOfContents.astro b/docs/src/components/TableOfContents.astro index 43a3c1f81..d2feda225 100644 --- a/docs/src/components/TableOfContents.astro +++ b/docs/src/components/TableOfContents.astro @@ -1,19 +1,24 @@ --- import TableOfContentsList from './TableOfContentsList.astro'; -import type { Props } from '@astrojs/starlight/props' +import type { Props } from '@astrojs/starlight/props'; const { toc, slug } = Astro.props; --- { - toc && ( - - - - ) + toc && ( + + + + ) } diff --git a/docs/src/components/TableOfContentsList.astro b/docs/src/components/TableOfContentsList.astro index 1b8d069b0..47ccd4b62 100644 --- a/docs/src/components/TableOfContentsList.astro +++ b/docs/src/components/TableOfContentsList.astro @@ -2,81 +2,88 @@ import type { MarkdownHeading } from 'astro'; interface TocItem extends MarkdownHeading { - children: TocItem[]; + children: TocItem[]; } interface Props { - toc: TocItem[]; - depth?: number; - isMobile?: boolean; - basePath: string + toc: TocItem[]; + depth?: number; + isMobile?: boolean; + basePath: string; } const { toc, isMobile = false, depth = 0, basePath } = Astro.props; --- \ No newline at end of file + /* TODO: Port this use Tailwind classes, and remove the `style` element */ + ul { + padding: 0; + list-style: none; + } + a { + --pad-inline: 0.5rem; + display: block; + border-radius: 0.25rem; + padding-block: 0.25rem; + padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) + var(--pad-inline); + line-height: 1.25; + } + a[aria-current='true'] { + color: var(--sl-color-text-accent); + } + .isMobile a { + --pad-inline: 1rem; + display: flex; + justify-content: space-between; + gap: var(--pad-inline); + border-top: 1px solid var(--sl-color-gray-6); + border-radius: 0; + padding-block: 0.5rem; + color: var(--sl-color-text); + font-size: var(--sl-text-sm); + text-decoration: none; + outline-offset: var(--sl-outline-offset-inside); + } + .isMobile:first-child > li:first-child > a { + border-top: 0; + } + .isMobile a[aria-current='true'], + .isMobile a[aria-current='true']:hover, + .isMobile a[aria-current='true']:focus { + color: var(--sl-color-white); + background-color: unset; + } + .isMobile a[aria-current='true']::after { + content: ''; + width: 1rem; + background-color: var(--sl-color-text-accent); + /* Check mark SVG icon */ + -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg=='); + mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg=='); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + shrink: 0; + } + diff --git a/docs/src/content/docs/internal/releasing.md b/docs/src/content/docs/internal/releasing.md index 347f8fb9a..741f6172d 100644 --- a/docs/src/content/docs/internal/releasing.md +++ b/docs/src/content/docs/internal/releasing.md @@ -1,5 +1,5 @@ --- -title: "Releasing a new version" +title: 'Releasing a new version' --- For releasing Tanka we're using [release-please][]. @@ -8,4 +8,3 @@ Once you want to do a release, merge that prepared pull-request. release-please will then do all the tagging and GitHub Release creation. [release-please]: https://github.com/googleapis/release-please-action - diff --git a/docs/src/tailwind.css b/docs/src/tailwind.css index b5c61c956..cd2da7e30 100644 --- a/docs/src/tailwind.css +++ b/docs/src/tailwind.css @@ -1,3 +1,74 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@layer theme, base, components, utilities; +@import 'tailwindcss/theme.css' layer(theme); +@import 'tailwindcss/preflight.css' layer(base); +@import 'tailwindcss/utilities.css' layer(utilities); + +@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); + +@theme { + --color-accent-50: #fff7ed; + --color-accent-100: #ffedd5; + --color-accent-200: #fed7aa; + --color-accent-300: #fdba74; + --color-accent-400: #fb923c; + --color-accent-500: #f97316; + --color-accent-600: #ea580c; + --color-accent-700: #c2410c; + --color-accent-800: #9a3412; + --color-accent-900: #7c2d12; + --color-accent-950: #431407; + + --color-gray-50: #fafafa; + --color-gray-100: #f4f4f5; + --color-gray-200: #e4e4e7; + --color-gray-300: #d4d4d8; + --color-gray-400: #a1a1aa; + --color-gray-500: #71717a; + --color-gray-600: #52525b; + --color-gray-700: #3f3f46; + --color-gray-800: #27272a; + --color-gray-900: #18181b; + --color-gray-950: #09090b; + + --grid-template-columns-hero: 7fr 4fr; +} + +@layer components { + a { + @apply text-accent-600 underline; + } +} + +@layer base { + :root { + --sl-font: 'Inter Variable'; + } +} + +/* TODO: this block can be removed once `@astrojs/starlight-tailwind` supports + * Tailwind 4 */ +:root[data-theme='light'] { + --sl-color-white: var(--color-gray-900); + --sl-color-gray-1: var(--color-gray-800); + --sl-color-gray-2: var(--color-gray-700); + --sl-color-gray-3: var(--color-gray-500); + --sl-color-gray-4: var(--color-gray-400); + --sl-color-gray-5: var(--color-gray-300); + --sl-color-gray-6: var(--color-gray-200); + --sl-color-gray-7: var(--color-gray-100); + --sl-color-black: white; + --sl-color-accent-low: var(--color-accent-200); + --sl-color-accent: var(--color-accent-600); + --sl-color-accent-high: var(--color-accent-900); +} +:root[data-theme='dark'] { + --sl-color-gray-1: var(--color-gray-200); + --sl-color-gray-2: var(--color-gray-300); + --sl-color-gray-3: var(--color-gray-400); + --sl-color-gray-4: var(--color-gray-600); + --sl-color-gray-5: var(--color-gray-700); + --sl-color-gray-6: var(--color-gray-800); + --sl-color-black: var(--color-gray-900); + --sl-color-accent: var(--color-accent-950); + --sl-color-accent-high: var(--color-accent-200); +} diff --git a/docs/tailwind.config.mjs b/docs/tailwind.config.mjs deleted file mode 100644 index 21fff145b..000000000 --- a/docs/tailwind.config.mjs +++ /dev/null @@ -1,22 +0,0 @@ -import starlightPlugin from '@astrojs/starlight-tailwind'; -import colors from 'tailwindcss/colors'; - -/** @type {import('tailwindcss').Config} */ -export default { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: { - colors: { - accent: colors.orange, - gray: colors.zinc, - }, - fontFamily: { - sans: ['"Inter Variable"'], - }, - gridTemplateColumns: { - 'hero': '7fr 4fr', - }, - }, - }, - plugins: [starlightPlugin()], -}; diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 3fd7ae6e8..fbc2f5fc1 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,3 +1,3 @@ { "extends": "astro/tsconfigs/strictest" -} \ No newline at end of file +}