Python
/
ruff
mirror of https://github.com/astral-sh/ruff
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Upgrade to Tailwind4 (#16471) 

## Test Plan

<img width="3360" alt="Screenshot 2025-03-03 at 10 01 19"
src="https://github.com/user-attachments/assets/d1ecfca0-ce51-440b-aabb-9107323fd1a4"
/>
This commit is contained in:
Micha Reiser 2025-03-03 09:09:09 +00:00 committed by GitHub
parent 8c899c5409
commit be239b9f25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 613 additions and 1182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.github/renovate.json5 vendored
View File

@ -58,12 +58,6 @@
description: "Disable PRs updating GitHub runners (e.g. 'runs-on: macos-14')",
enabled: false,
},
{
// TODO: Remove this once the codebase is upgrade to v4 (https://github.com/astral-sh/ruff/pull/16069)
matchPackageNames: ["tailwindcss"],
matchManagers: ["npm"],
enabled: false,
},
{
// Disable updates of `zip-rs`; intentionally pinned for now due to ownership change
// See: https://github.com/astral-sh/uv/issues/3642

1568
playground/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
playground/package.json
View File

@ -26,17 +26,17 @@
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@tailwindcss/postcss": "^4.0.9",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react-swc": "^3.0.0",
"autoprefixer": "^10.4.13",
"eslint": "^9.0.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-react-hooks": "^5.2.0",
"postcss": "^8.4.20",
"prettier": "^3.0.0",
"tailwindcss": "^3.2.4",
"tailwindcss": "^4.0.9",
"typescript": "^5.1.6",
"typescript-eslint": "^8.25.0",
"vite": "^6.0.0"

4
playground/postcss.config.cjs
View File

@ -1,7 +1,5 @@
module.exports = {
plugins: {
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
};

1
playground/src/Editor/AstralButton.tsx
View File

@ -12,6 +12,7 @@ export default function AstralButton({
"uppercase",
"ease-in-out",
"font-heading",
"outline-radiate",
"transition-all duration-200",
"bg-radiate",
"text-black",

2
playground/src/Editor/Chrome.tsx
View File

@ -82,7 +82,7 @@ export default function Chrome() {
onShare={handleShare}
/>
<div className="flex flex-grow">
<div className="flex grow">
{source != null && (
<Editor
theme={theme}

6
playground/src/Editor/Diagnostics.tsx
View File

@ -30,7 +30,7 @@ export default function Diagnostics({
return (
<div
className={classNames(
"flex flex-grow flex-col overflow-hidden",
"flex grow flex-col overflow-hidden",
theme === "dark" ? "text-white" : null,
)}
>
@ -43,7 +43,7 @@ export default function Diagnostics({
Diagnostics ({diagnostics.length})
</div>
<div className="flex flex-grow p-2 overflow-hidden">
<div className="flex grow p-2 overflow-hidden">
<Items diagnostics={diagnostics} onGoTo={onGoTo} />
</div>
</div>
@ -66,7 +66,7 @@ function Items({
}
return (
<ul className="space-y-0.5 flex-grow overflow-y-scroll">
<ul className="space-y-0.5 grow overflow-y-scroll">
{diagnostics.map((diagnostic, index) => {
return (
<li

2
playground/src/Editor/Editor.tsx
View File

@ -263,7 +263,7 @@ export default function Editor({
id="diagnostics"
minSize={3}
order={1}
className="my-2 flex flex-grow"
className="my-2 flex grow"
>
<Diagnostics
diagnostics={checkResult.diagnostics}

2
playground/src/Editor/SecondaryPanel.tsx
View File

@ -34,7 +34,7 @@ export default function SecondaryPanel({
}: SecondaryPanelProps) {
return (
<div className="flex flex-col h-full">
<div className="flex-grow">
<div className="grow">
<Content
tool={tool}
result={result}

2
playground/src/Editor/ShareButton.tsx
View File

@ -27,7 +27,7 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
) : (
<AstralButton
type="button"
className="relative flex-none leading-6 py-1.5 px-3 shadow-sm disabled:opacity-50"
className="relative flex-none leading-6 py-1.5 px-3 shadow-xs disabled:opacity-50"
disabled={!onShare || copied}
onClick={
onShare

4
playground/src/Editor/SideBar.tsx
View File

@ -10,7 +10,7 @@ export default function SideBar({ children, position }: SideBarProps) {
return (
<ul
className={classNames(
"w-12 flex-initial flex flex-col items-stretch bg-galaxy",
"w-12 flex-initial flex flex-col items-stretch bg-galaxy border-gray-200",
position === "left" ? "border-r" : "border-l",
)}
>
@ -62,7 +62,7 @@ interface TooltipProps {
function Tooltip({ children, position }: TooltipProps) {
return (
<span
className={`z-10 absolute w-100 rounded dark:border-[1px] dark:border-white bg-space dark:bg-white px-2 py-1 hidden text-xs text-white dark:text-black group-hover:flex whitespace-nowrap ${
className={`z-10 absolute rounded dark:border-[1px] dark:border-white bg-space dark:bg-white px-2 py-1 hidden text-xs text-white dark:text-black group-hover:flex whitespace-nowrap ${
position === "right" ? "right-[52px]" : "left-[52px]"
}`}
>

116
playground/src/index.css
View File

@ -1,68 +1,106 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@custom-variant dark (&:is(.dark *));
@theme {
--color-ayu-accent: #ffac2f;
--color-ayu-background: #f8f9fa;
--color-ayu-background-dark: #0b0e14;
--color-black: #261230;
--color-white: #ffffff;
--color-radiate: #d7ff64;
--color-flare: #6340ac;
--color-rock: #78876e;
--color-galaxy: #261230;
--color-space: #30173d;
--color-comet: #6f5d6f;
--color-cosmic: #de5fe9;
--color-sun: #ffac2f;
--color-electron: #46ebe1;
--color-aurora: #46eb74;
--color-constellation: #5f6de9;
--color-neutron: #cff3cf;
--color-proton: #f6afbc;
--color-nebula: #cdcbfb;
--color-supernova: #f1aff6;
--color-starlight: #f4f4f1;
--color-lunar: #fbf2fc;
--color-asteroid: #e3cee3;
--color-crater: #f0dfdf;
--font-heading: Alliance Platt, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
Arial, monospace, Apple Color Emoji, Segoe UI Emoji;
--font-body: Alliance Text, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji;
--font-mono: Roboto Mono;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
}
* {
box-sizing: border-box;
box-sizing: border-box;
}
body,
html,
#root {
margin: 0;
height: 100%;
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
height: 100%;
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shadow-copied {
--tw-shadow:
0 0 0 1px theme("colors.white"), inset 0 0 0 1px theme("colors.white");
--tw-shadow-colored:
0 0 0 1px var(--tw-shadow-color), inset 0 0 0 1px var(--tw-shadow-color);
--tw-shadow: 0 0 0 1px var(--color-white), inset 0 0 0 1px var(--color-white);
--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), inset 0 0 0 1px var(--tw-shadow-color);
box-shadow:
var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
@font-face {
font-family: "Alliance Text";
src:
url("../fonts/Alliance-TextRegular.woff2") format("woff2"),
font-family: "Alliance Text";
src: url("../fonts/Alliance-TextRegular.woff2") format("woff2"),
url("../fonts/Alliance-TextRegular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: block;
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Alliance Text";
src:
url("../fonts/Alliance-TextMedium.woff2") format("woff2"),
font-family: "Alliance Text";
src: url("../fonts/Alliance-TextMedium.woff2") format("woff2"),
url("../fonts/Alliance-TextMedium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: block;
font-weight: 500;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Alliance Platt";
src:
url("../fonts/Alliance-PlattMedium.woff2") format("woff2"),
font-family: "Alliance Platt";
src: url("../fonts/Alliance-PlattMedium.woff2") format("woff2"),
url("../fonts/Alliance-PlattMedium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: block;
font-weight: 500;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Alliance Platt";
src:
url("../fonts/Alliance-PlattRegular.woff2") format("woff2"),
font-family: "Alliance Platt";
src: url("../fonts/Alliance-PlattRegular.woff2") format("woff2"),
url("../fonts/Alliance-PlattRegular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: block;
font-weight: normal;
font-style: normal;
font-display: block;
}

78
playground/tailwind.config.cjs
View File

@ -1,78 +0,0 @@
/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: "class",
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"ayu-accent": "#ffac2f",
"ayu-background": {
DEFAULT: "#f8f9fa",
dark: "#0b0e14",
},
black: "#261230",
white: "#FFFFFF",
radiate: "#D7FF64",
flare: "#6340AC",
rock: "#78876E",
galaxy: "#261230",
space: "#30173D",
comet: "#6F5D6F",
cosmic: "#DE5FE9",
sun: "#FFAC2F",
electron: "#46EBE1",
aurora: "#46EB74",
constellation: "#5F6DE9",
neutron: "#CFF3CF",
proton: "#F6AFBC",
nebula: "#CDCBFB",
supernova: "#F1AFF6",
starlight: "#F4F4F1",
lunar: "#FBF2FC",
asteroid: "#E3CEE3",
crater: "#F0DFDF",
},
fontFamily: {
heading: [
"Alliance Platt",
"system-ui",
"-apple-system",
"Segoe UI",
"Roboto",
"Helvetica",
"Arial",
"monospace",
"Apple Color Emoji",
"Segoe UI Emoji",
],
body: [
"Alliance Text",
"system-ui",
"-apple-system",
"Segoe UI",
"Roboto",
"Helvetica",
"Arial",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
],
mono: ["Roboto Mono"],
},
fontSize: {
xs: "0.75rem" /* 12px */,
sm: "0.875rem" /* 14px */,
base: "1rem" /* 16px */,
lg: "1.125rem" /* 18px */,
xl: "1.25rem" /* 20px */,
"2xl": "1.5rem" /* 25px */,
"3xl": "1.875rem" /* 30px */,
"4xl": "2.25rem" /* 36px */,
"5xl": "3rem" /* 48px */,
},
},
},
plugins: [],
};